/* ---------- доска виджетов ---------- */

.board-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.board-edit-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.board-edit-actions label.btn { position: relative; overflow: hidden; }
.board-toolbar .btn.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }

.board-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--space-2) 10px;
  margin-bottom: 10px;
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* ---------- виджет ---------- */

.widget {
  grid-column: span var(--w, 12);
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.widget.h-s { height: 220px; }
.widget.h-m { height: 340px; }
.widget.h-l { height: 520px; }
.widget.h-auto { height: auto; }

.widget-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 10px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
  background: transparent;
}
.widget-head h3 { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.widget-icon { display: inline-flex; color: var(--muted); }
.widget-icon svg { width: 14px; height: 14px; }
.widget-grip { display: inline-flex; color: var(--muted); cursor: grab; }
.widget-grip:active { cursor: grabbing; }

.widget-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.widget-controls select { padding: 2px var(--space-1); font-size: var(--text-xs); }

.widget-body {
  flex: 1;
  min-height: 0;
  padding: var(--space-3) 14px;
  overflow: auto;
  overscroll-behavior: contain;
}
.widget.h-auto .widget-body { overflow: visible; }

/* Внутри блока списки скроллит .widget-body — без вложенных полос. */
.widget-body .audit,
.widget-body .history,
.widget-body .table-list,
.widget-body .users-list,
.widget-body .snippet-list {
  max-height: none;
  overflow: visible;
}

.widget-inline-toolbar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 10px; }
.widget-inline-toolbar .muted-note { color: var(--err); }

.widget.active { border-color: var(--accent-border); }

/* Подсветка блока при переходе из навигации: мягкая вспышка рамкой. */
.widget.flash {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
  transition: border-color var(--transition-base, 0.15s ease), box-shadow var(--transition-base, 0.15s ease);
}
@media (prefers-reduced-motion: reduce) {
  .widget.flash { transition: none; }
}

.widget-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  touch-action: none;
}
.widget-resize::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  opacity: 0.75;
}
.widget-resize:hover::after { opacity: 1; }
html[data-resizing='true'] { cursor: nwse-resize; user-select: none; }

/* ---------- сетка в режиме редактирования ---------- */

.board.editing {
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1.4px);
  background-size: calc((100% - 11 * 16px) / 12 + 16px) 24px;
  outline: 1px dashed var(--border);
  outline-offset: 8px;
  border-radius: var(--radius-sm);
}

.board-status { color: var(--muted); }
.board-hint { max-width: 560px; text-align: right; }

/* ---------- режим редактирования ---------- */

.widget.editing,
.widget.dragging { outline: 1px dashed var(--accent-border); outline-offset: 2px; }
.widget.dragging { opacity: 0.6; }
.widget.drag-over { outline: 2px solid var(--accent); outline-offset: 2px; }
.widget:not(.editing) .widget-head { cursor: default; }
.board .widget[data-id] .widget-head[draggable='true'] { cursor: grab; }
.board .widget[data-id] .widget-head[draggable='true']:active { cursor: grabbing; }

/* ---------- Phase 2: placeholder, collapse, дашборды ---------- */

.board-placeholder {
  grid-column: span var(--w, 6);
  min-height: 120px;
  border: 2px dashed var(--accent-border);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  transition: opacity var(--transition-base, 0.15s ease);
}

.widget {
  transition: opacity var(--transition-base, 0.15s ease), outline-color var(--transition-fast, 0.1s ease);
}

.widget.is-collapsed .widget-body {
  display: none;
}
.widget.is-collapsed {
  align-self: start;
}
.widget-collapse {
  flex: none;
}
.widget.is-collapsed .widget-collapse svg {
  transform: rotate(-90deg);
}
.widget-collapse svg {
  transition: transform var(--transition-fast, 0.1s ease);
}
.widget-category {
  flex: none;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dashboard-select {
  max-width: 220px;
}

.board-dashboard-bar {
  margin-bottom: 10px;
}

.board-palette .palette-group {
  width: 100%;
}

@media (max-width: 700px) {
  .board {
    gap: var(--space-3);
  }
  .dashboard-select {
    flex: 1;
    max-width: none;
  }
  .widget-controls {
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-placeholder,
  .widget,
  .widget-collapse svg {
    transition: none;
  }
}

/* ---------- Phase 3: Ecosystem-блоки ---------- */

.eco-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eco-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.eco-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
}
.metric-drill {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: var(--space-1) 6px;
  margin: 0 -6px;
}
.metric-drill:hover {
  border-color: var(--accent-border);
}
.metric-drill:hover .metric-value {
  color: var(--accent);
}
button.metric-drill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.latency-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  height: 64px;
  margin-top: 10px;
}
.latency-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.latency-fill {
  display: block;
  width: 100%;
  max-width: 36px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
}
.latency-label {
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
}

.timeline {
  display: flex;
  gap: 1px;
  height: 22px;
  margin-top: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tl-seg {
  flex: 1;
  min-width: 1px;
}
.tl-seg.is-up {
  background: var(--ok);
}
.tl-seg.is-down {
  background: var(--err);
}

.alert-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.alert-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px var(--space-2);
}
.alert-row.is-muted {
  opacity: 0.65;
}
.alert-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.alert-title {
  font-size: 12.5px;
  font-weight: 600;
}
.alert-actions {
  display: flex;
  gap: var(--space-1);
  flex: none;
}
.state-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: 8px;
}
.btn-mini.active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

/* ---------- LumeBOS widgets (Этап 5) ---------- */
.drop-zone {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  text-align: center;
  margin-bottom: 8px;
}
.drop-zone.drag-over {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.upload-job {
  border-top: 1px solid var(--border);
  padding: var(--space-2) 0;
}
.table-wrap tr.is-selected td {
  background: var(--accent-soft);
}
.table-wrap tr[data-bucket],
.table-wrap tr[data-key] {
  cursor: pointer;
}