/* ============================================================
   Qualims — Главная v2 (доска виджетов, ассеты дизайнера).
   Сборка: (1) базовая доска v1 (docs/design/assets/dashboard.css)
   + (2) слой v2 (docs/design/assets/dashboard-v2.css)
   + (3) шелл-стили страницы из макета «Главная v2», скоуп .dash-v2.
   Грузится ВМЕСТО css/dashboard.css (страница dashboard_v2.html).
   Токены — глобальный tokens.css (совместим 1:1).
   ============================================================ */

/* ============================================================
   QUALIMS — Adaptive dashboard grid ("недотетрис")
   Widget sizes 1×1 / 2×2 / 3×3 change INFORMATION DEPTH, not just
   footprint. Live edit mode: drag-reorder, resize, add/remove.
   Depends on tokens.css.
   ============================================================ */

/* ── Board: 4-col dense grid, fixed row module ──────── */
.board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 78px;
    grid-auto-flow: row dense;
    gap: var(--s-4);
    position: relative;
}

/* widget cell — spans driven by --col / --row (set in JS) */
.w {
    --col: 1; --row: 2;
    grid-column: span var(--col);
    grid-row: span var(--row);
    min-width: 0; min-height: 0;
}

/* ── Widget card ───────────────────────────────────── */
.wg {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); height: 100%;
    display: flex; flex-direction: column; overflow: hidden;
    transition: box-shadow var(--m-base) var(--ease), border-color var(--m-base), transform var(--m-base);
}
.wg-head { display: flex; align-items: center; gap: 9px; padding: 13px 15px 9px; flex-shrink: 0; }
.wg-head > i { color: var(--ink-3); font-size: 1rem; flex-shrink: 0; }
.wg-head h3 { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--ink); letter-spacing: -.01em; flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-head .meta { font-size: var(--text-sm); color: var(--ink-3); flex-shrink: 0; }
.wg-head .open { color: var(--ink-3); font-size: var(--text-sm); flex-shrink: 0; padding: 3px 7px; border-radius: 6px;
    transition: background var(--m-fast), color var(--m-fast); }
.wg-head .open:hover { background: var(--surface-2); color: var(--accent); }
.wg-body { flex: 1; padding: 0 15px 15px; min-height: 0; display: flex; flex-direction: column; }

/* ── Numbers / stats ───────────────────────────────── */
.wg-num { display: flex; align-items: baseline; gap: 8px; }
.wg-num b { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.wg-num.lg b { font-size: 2.5rem; }
.wg-num span { font-size: var(--text-sm); color: var(--ink-3); }

.wg-avail { display: flex; align-items: baseline; gap: 8px; }
.wg-avail .big { font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.wg-avail .of { font-size: var(--text-base); color: var(--ink-3); }

/* ── Chips ─────────────────────────────────────────── */
.wg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 600;
    padding: 3px 9px; border-radius: var(--r-full); line-height: 1.45; }
.chip.ok   { background: var(--ok-soft);   color: var(--ok);   }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad  { background: var(--bad-soft);  color: var(--bad);  }
.chip.mut  { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }

/* ── Dots ──────────────────────────────────────────── */
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
.dot.free { background: var(--ok); } .dot.busy { background: var(--bad); } .dot.act { background: var(--warn); }

/* ── Mini list (2×2) ───────────────────────────────── */
.wg-mini { display: flex; flex-direction: column; margin-top: 12px; }
.wg-mini .r { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.wg-mini .r:last-child { border-bottom: none; }
.wg-mini .nm { flex: 1; font-size: var(--text-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-mini .x { font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ── Sparkline ─────────────────────────────────────── */
.wg-spark { margin-top: auto; padding-top: 10px; }
.spark { width: 100%; height: 34px; display: block; }
.demo-label { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* ── Footer links ──────────────────────────────────── */
.wg-foot-links { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.wg-foot-links a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm);
    font-size: var(--text-sm); color: var(--ink-2); text-decoration: none; transition: background var(--m-fast), color var(--m-fast); }
.wg-foot-links a:hover { background: var(--surface-2); color: var(--ink); }
.wg-foot-links a i { color: var(--ink-3); width: 16px; }
.wg-foot-links a .n { margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── Category / instrument breakdown (3×3) ─────────── */
.wg-cols { display: grid; grid-template-columns: var(--cols, 0.95fr 1.25fr); gap: 20px; flex: 1; min-height: 0; }
.wg-break { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.wg-break .b { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); white-space: nowrap; color: var(--ink-2); }
.wg-break .b .v { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ── Mini table (3×3) ──────────────────────────────── */
.wg-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-top: 8px; }
.wg-tbl th { text-align: left; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-3); padding: 5px 8px; border-bottom: 1px solid var(--line-strong); }
.wg-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--ink); }
.wg-tbl tr:last-child td { border-bottom: none; }
.wg-tbl .mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-2); }

/* ── Device chips (instruments) ────────────────────── */
.dev-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.dev-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500;
    padding: 5px 10px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }

/* ── Instrument schedule timeline (chromatographs 3×3) ── */
.tl { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; min-height: 0; }
.tl-scale { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; padding-bottom: 4px; }
.tl-scale .ticks { display: flex; justify-content: space-between; font-size: var(--text-2xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tl-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; }
.tl-row .dn { font-size: var(--text-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 6px; }
.tl-track { position: relative; height: 22px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.tl-block { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; font-size: var(--text-2xs); font-weight: 600;
    color: var(--ink); display: flex; align-items: center; padding: 0 6px; white-space: nowrap; overflow: hidden; }
.tl-block.busy { background: color-mix(in srgb, var(--bad) 26%, var(--surface)); color: var(--bad); }
.tl-block.book { background: color-mix(in srgb, var(--accent) 26%, var(--surface)); color: var(--accent-strong); }
.tl-block.maint { background: color-mix(in srgb, var(--warn) 26%, var(--surface)); color: var(--warn); }
.tl-now { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--accent); z-index: 2; }
.tl-now::after { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ── Operation rows ────────────────────────────────── */
.op-list { display: flex; flex-direction: column; }
.op-li { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.op-li:last-child { border-bottom: none; }
.op-li .nm { flex: 1; min-width: 0; font-size: var(--text-base); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-li .by { font-size: var(--text-sm); color: var(--ink-3); flex-shrink: 0; }
.op-li .tm { font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 44px; text-align: right; }
.op-li .qty { font-size: var(--text-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 60px; text-align: right; }
.op-li .loc { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3); flex-shrink: 0; min-width: 40px; }
.op-tag { font-size: var(--text-2xs); font-weight: 700; width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
    display: grid; place-items: center; }
.op-tag.use { background: var(--warn-soft); color: var(--warn); }
.op-tag.add { background: var(--ok-soft); color: var(--ok); }

/* day summary (recent ops 3×3 left col) */
.day-sum { display: flex; flex-direction: column; gap: 10px; }
.day-sum .row { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--ink-2); }
.day-sum .row b { margin-left: auto; font-size: var(--text-md); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── User rows (active now) ────────────────────────── */
.usr-list { display: flex; flex-direction: column; }
.usr-li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.usr-li:last-child { border-bottom: none; }
.usr-li .av { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2);
    display: grid; place-items: center; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.usr-li .nm { font-size: var(--text-base); color: var(--ink); }
.usr-li .rl { font-size: var(--text-sm); color: var(--ink-3); margin-left: auto; }
.usr-li .doing { font-size: var(--text-sm); color: var(--ink-2); margin-left: auto; display: flex; align-items: center; gap: 6px; }
.usr-li .doing i { color: var(--ink-3); }
.online { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; box-shadow: 0 0 0 3px var(--ok-soft); }
.usr-avatars { display: flex; margin-top: 12px; }
.usr-avatars .av { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2);
    display: grid; place-items: center; font-size: 11px; font-weight: 600; border: 2px solid var(--surface); margin-left: -7px; }
.usr-avatars .av:first-child { margin-left: 0; }

/* ── Tasks ─────────────────────────────────────────── */
.task-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.task-li { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: var(--r-sm); }
.task-li:hover { background: var(--surface-2); }
.task-li .box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--line-strong); flex-shrink: 0; cursor: pointer;
    display: grid; place-items: center; color: transparent; transition: background var(--m-fast), border-color var(--m-fast); }
.task-li .box:hover { border-color: var(--accent); }
.task-li.done .box { background: var(--accent); border-color: var(--accent); color: #fff; }
.task-li .tx { flex: 1; font-size: var(--text-base); color: var(--ink); }
.task-li.done .tx { color: var(--ink-3); text-decoration: line-through; }
.task-add { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.task-add input { flex: 1; font-family: inherit; font-size: var(--text-base); color: var(--ink);
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 11px; outline: none; }
.task-add input::placeholder { color: var(--ink-3); }
.task-add input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── Notes ─────────────────────────────────────────── */
.notes-ta { width: 100%; flex: 1; resize: none; font-family: inherit; font-size: var(--text-base);
    color: var(--ink); background: transparent; border: none; outline: none; line-height: 1.6; padding: 4px 0; }
.notes-ta::placeholder { color: var(--ink-3); }

/* ── Today ─────────────────────────────────────────── */
.today .dow { font-size: var(--text-base); color: var(--ink-2); font-weight: 500; text-transform: capitalize; }
.today .date { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1.05; margin: 2px 0; }
.today .clk { font-size: var(--text-base); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.today .bk { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.today .bk-label { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.today .bk-li { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: var(--text-sm); color: var(--ink); border-bottom: 1px solid var(--line); }
.today .bk-li:last-child { border-bottom: none; }
.today .bk-li .tm { font-variant-numeric: tabular-nums; color: var(--ink-2); flex-shrink: 0; min-width: 78px; }
.today .bk-li .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Quiet empty state ─────────────────────────────── */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    flex: 1; color: var(--ink-3); text-align: center; min-height: 60px; }
.empty i { font-size: 1.3rem; opacity: .45; }
.empty span { font-size: var(--text-sm); }

/* ============================================================
   EDIT MODE
   ============================================================ */
.board.editing .w { cursor: grab; }
.board.editing .wg {
    border-style: dashed; border-color: var(--line-strong);
}
.board.editing .wg:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); }

/* dim live content slightly so chrome reads as the active layer */
.board.editing .wg-body { opacity: .55; pointer-events: none; transition: opacity var(--m-base); }
/* hide the normal head in edit mode — the toolbar names the widget */
.board.editing .wg-head { display: none; }

/* edit toolbar — appears on top of card in edit mode */
.w-edit { display: none; }
.board.editing .w-edit {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 9px; border-bottom: 1px dashed var(--line-strong);
    background: var(--surface-2); flex-shrink: 0;
}
.w-grip { color: var(--ink-3); cursor: grab; font-size: 1rem; padding: 2px; display: flex; }
.w-grip:active { cursor: grabbing; }
.w-edit .w-name { flex: 1; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* size segmented control */
.w-sizes { display: flex; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; }
.w-sizes button { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; line-height: 1;
    padding: 4px 6px; border: none; border-radius: 5px; background: transparent; color: var(--ink-2); cursor: pointer;
    transition: background var(--m-fast), color var(--m-fast); }
.w-sizes button:hover:not(:disabled):not(.on) { background: var(--surface-2); color: var(--ink); }
.w-sizes button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.w-sizes button:disabled { color: var(--ink-3); opacity: .4; cursor: not-allowed; }

.w-remove { border: none; background: transparent; color: var(--ink-3); cursor: pointer; padding: 4px 5px;
    border-radius: 6px; font-size: .95rem; display: flex; transition: background var(--m-fast), color var(--m-fast); }
.w-remove:hover { background: var(--bad-soft); color: var(--bad); }

/* drag states */
.w.dragging { opacity: .35; }
.w.dragging .wg { border-color: var(--accent); border-style: solid; }
.board.editing .w.drop-target .wg { box-shadow: 0 0 0 2px var(--accent); }

/* ── Add-widget tile ───────────────────────────────── */
.w-add { --col: 1; --row: 2; grid-column: span var(--col); grid-row: span var(--row); display: none; }
.board.editing .w-add { display: block; }
.add-tile {
    height: 100%; width: 100%; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
    background: transparent; color: var(--ink-3); cursor: pointer; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: var(--text-sm); font-weight: 500;
    transition: border-color var(--m-fast), color var(--m-fast), background var(--m-fast);
}
.add-tile:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.add-tile i { font-size: 1.4rem; }

/* ── Edit banner (under topbar) ────────────────────── */
.edit-bar {
    display: none; align-items: center; gap: 11px;
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    border-radius: var(--r-md); padding: 10px 14px; margin-bottom: var(--s-5);
}
.edit-bar.show { display: flex; }
.edit-bar i.lead { color: var(--accent-strong); font-size: 1.05rem; }
.edit-bar .txt { flex: 1; font-size: var(--text-base); color: var(--ink); }
.edit-bar .txt strong { font-weight: 600; }
.edit-bar .spacer { flex: 1; }

/* ── Add-widget menu (popover) ─────────────────────── */
.addmenu-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.18); display: none; }
.addmenu-backdrop.show { display: block; }
.addmenu {
    position: fixed; z-index: 201; width: 320px; max-height: 70vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop); padding: 8px;
}
.addmenu .am-head { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3); padding: 8px 10px 6px; }
.addmenu .am-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer;
    transition: background var(--m-fast); }
.addmenu .am-item:hover { background: var(--surface-2); }
.addmenu .am-item.disabled { opacity: .4; cursor: not-allowed; }
.addmenu .am-item.disabled:hover { background: transparent; }
.addmenu .am-item i { width: 20px; text-align: center; color: var(--accent); font-size: 1rem; }
.addmenu .am-item .am-tx { flex: 1; }
.addmenu .am-item .am-tt { font-size: var(--text-base); font-weight: 500; color: var(--ink); }
.addmenu .am-item .am-sub { font-size: var(--text-xs); color: var(--ink-3); margin-top: 1px; }
.addmenu .am-item .am-added { font-size: var(--text-2xs); color: var(--ink-3); }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 1180px) {
    .board { grid-template-columns: repeat(2, 1fr); }
    .w.s-3x3 { --col: 2; }
    .wg-cols { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 820px) {
    .board { grid-template-columns: 1fr; }
    .w, .w.s-2x2, .w.s-3x3, .w-add { --col: 1; }
}

/* ============================================================
   Qualims — Главная v2: KPI-строка, единая status-модель,
   экшн-виджет, объединённые виджеты. Слой поверх dashboard.css.
   Использует токены (--ok/--warn/--bad muted, teal accent).
   ============================================================ */

/* ── chip small variant ─────────────────────────────── */
.chip.sm { font-size: var(--text-2xs); padding: 2px 8px; gap: 4px; }

/* ── Пульс лаборатории — KPI strip над сеткой ───────── */
.pulse {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.pulse-kpi {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.pulse-kpi .pk-ic {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.2rem;
  background: var(--accent-soft); color: var(--accent-strong);
}
.pulse-kpi.risk .pk-ic { background: var(--warn-soft); color: var(--warn); }
.pulse-kpi .pk-mid { min-width: 0; }
.pulse-kpi .pk-v { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
.pulse-kpi .pk-v small { font-size: .95rem; font-weight: 600; color: var(--ink-3); }
.pulse-kpi .pk-l { font-size: var(--text-xs); color: var(--ink-3); margin-top: 2px; }
.pulse-kpi .pk-trend { margin-left: auto; font-size: var(--text-2xs); font-weight: 700; color: var(--ok); display: flex; align-items: center; gap: 3px; }
.pulse-kpi .pk-trend.down { color: var(--bad); }
@media (max-width: 1180px) { .pulse { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .pulse { grid-template-columns: 1fr; } }

/* ── Status donut (единая модель: ok / warn / bad) ──── */
.donut { position: relative; width: 104px; height: 104px; flex: 0 0 auto; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut .dn-track { fill: none; stroke: var(--surface-3); stroke-width: 12; }
.donut .dn-seg { fill: none; stroke-width: 12; stroke-linecap: butt; }
.donut .dn-seg.ok { stroke: var(--ok); } .donut .dn-seg.warn { stroke: var(--warn); } .donut .dn-seg.bad { stroke: var(--bad); }
.donut .dn-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut .dn-c b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.donut .dn-c span { font-size: var(--text-2xs); color: var(--ink-3); margin-top: 2px; }

/* reagents status layouts */
.st-1 { display: flex; align-items: center; gap: 14px; }
.st-1 .donut { width: 74px; height: 74px; }
.st-1 .donut .dn-c b { font-size: 1.05rem; }
.st-mini { display: flex; flex-direction: column; gap: 3px; }
.st-mini b { font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.st-mini span { font-size: var(--text-xs); color: var(--ink-3); }
.st-mini .chip { margin-top: 4px; align-self: flex-start; }

.st-2 { display: flex; align-items: center; gap: 18px; }
.st-2.fill { height: 100%; gap: 28px; justify-content: center; }
.st-2.fill .donut { width: 190px; height: 190px; }
.st-2.fill .donut .dn-c b { font-size: 2.5rem; }
.st-2.fill .donut .dn-c span { font-size: var(--text-sm); }
.st-2.fill .st-legend { flex: 0 0 auto; gap: 14px; }
.st-2.fill .st-need { flex: 1 1 auto; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.st-2.fill .st-row { font-size: var(--text-base); }
@media (max-width: 1180px) {
  .st-2.fill { gap: 20px; }
  .st-2.fill .donut { width: 140px; height: 140px; }
  .st-2.fill .donut .dn-c b { font-size: 1.7rem; }
  .st-2.fill .st-row { font-size: var(--text-sm); }
  .st-2.fill .st-need .att-line { font-size: var(--text-sm); }
}
@media (max-width: 620px) {
  .st-2.fill { flex-direction: column; }
}

/* equipment: [hidden] must win over .tl{display:flex} or both category panels render stacked */
.tl[hidden] { display: none; }
.st-2.compact { gap: 14px; }
.st-2.compact .donut { width: 78px; height: 78px; }
.st-2.compact .donut .dn-c b { font-size: 1.05rem; }
.st-2.compact .st-legend { gap: 6px; }

/* reagents 3×3 left column — donut + legend centered as a group, spark below */
.st-3 { display: flex; flex-direction: column; gap: 14px; height: 100%; min-width: 0; }
.st-3-top { display: flex; align-items: center; justify-content: center; gap: 30px; flex: 1; min-height: 0; }
.st-3-top .donut.big { width: 140px; height: 140px; flex: 0 0 auto; }
.st-3-top .donut.big .dn-c b { font-size: 2rem; }
.st-3-top .donut.big .dn-c span { font-size: var(--text-xs); }
.st-3-top .st-legend { flex: 0 0 auto; min-width: 150px; gap: 11px; }
.st-3 .wg-spark { margin-top: auto; width: 100%; }

/* reagents 3×3: keep 2-col side-by-side down to tablet (widget is full-width there);
   stack + trim only on phones so the fixed 4-row card never clips */
@media (max-width: 1180px) {
  .wg-cols { grid-template-columns: 0.85fr 1.25fr !important; gap: 16px !important; }
  /* narrow left column: stack donut over legend so labels don't truncate */
  .st-3-top { flex-direction: column; gap: 12px; }
  .st-3-top .donut.big { width: 118px; height: 118px; }
  .st-3-top .st-legend { width: 100%; max-width: 230px; }
}
@media (max-width: 820px) {
  .wg-cols { grid-template-columns: 1fr !important; }
  .st-3-top { flex-direction: row; justify-content: flex-start; gap: 18px; }
  .st-3 .wg-spark { display: none; }
  .st-3-top .donut.big { width: 100px; height: 100px; }
  .st-3-top .donut.big .dn-c b { font-size: 1.4rem; }
  .w.s-3x3 { --row: 8; }
}
.st-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.st-row { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); color: var(--ink-2); }
.st-row .st-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-row .st-v { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.st-att { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.att-line { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); color: var(--ink); }
.att-line .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.att-line .chip { flex: 0 0 auto; }

/* ── Экшн-виджет «Требует внимания» ─────────────────── */
.act-list { display: flex; flex-direction: column; gap: 2px; }
.act-li { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-radius: var(--r-sm); border-bottom: 1px solid var(--line); }
.act-li:last-child { border-bottom: none; }
.act-li:hover { background: var(--surface-2); }
.act-ic { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; font-size: 1rem; }
.act-ic.bad { background: var(--bad-soft); color: var(--bad); }
.act-ic.warn { background: var(--warn-soft); color: var(--warn); }
.act-ic.ok { background: var(--ok-soft); color: var(--ok); }
.act-tx { flex: 1; min-width: 0; }
.act-tt { font-size: var(--text-base); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-sub { font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.act-cta {
  flex: 0 0 auto; min-width: 92px; text-align: center; font: inherit; font-size: var(--text-xs); font-weight: 600;
  color: var(--accent-strong); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: var(--r-sm);
  padding: 6px 12px; cursor: pointer; transition: background var(--m-fast), color var(--m-fast);
}
.act-cta:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* пустое состояние экшн-виджета */
.act-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; text-align: center; color: var(--ink-3); }
.act-empty .ae-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; background: var(--ok-soft); color: var(--ok); }
.act-empty .ae-tt { font-size: var(--text-base); font-weight: 600; color: var(--ink-2); }

/* ── Оборудование: категории + табы ─────────────────── */
.eq-cat { margin-top: 14px; }
.eq-cat-h { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.eq-cat-h i { color: var(--ink-3); }
.eq-cat-h .chip { margin-left: auto; }
.eq-cat .dev-row { margin-top: 8px; }

/* equipment 2×2 — category blocks with free/total bar */
.eq2 { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.eq2-cat { display: flex; flex-direction: column; gap: 7px; }
.eq2-h { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.eq2-h i { color: var(--ink-3); }
.eq2-count { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.eq2-count.ok { color: var(--ok); } .eq2-count.warn { color: var(--warn); }
.eq2-count span { color: var(--ink-3); font-weight: 600; }
.eq2-bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.eq2-bar i { display: block; height: 100%; border-radius: 99px; }
.eq2-bar i.ok { background: var(--ok); } .eq2-bar i.warn { background: var(--warn); }
.eq2-sub { display: flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--ink-3); }

.eq-tabs, .act-tabs { display: inline-flex; gap: 3px; background: var(--surface-2); border-radius: var(--r-full); padding: 3px; margin-bottom: 10px; }
.w.s-3x3 .eq-tabs { margin-bottom: 8px; }
.w.s-3x3 .tl { margin-top: 8px; gap: 5px; }
.eq-tabs button, .act-tabs button {
  font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--ink-2);
  border: none; background: none; border-radius: var(--r-full); padding: 5px 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: background var(--m-fast), color var(--m-fast);
}
.eq-tabs button.on, .act-tabs button.on { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-sm); }

/* ── Мой день (clock + брони + задачи) ──────────────── */
.myday { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 18px; height: 100%; }
.today.sm .clk { font-size: 2.1rem; }
.myday-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--line); padding-left: 18px; }
/* список задач скроллится ВНУТРИ карточки, а не вываливается за неё */
.myday-col .md-sec:last-child { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.md-sec .demo-label { margin-bottom: 7px; }
.md-sec .task-li { padding: 5px 2px; }
.md-sec .bk-li { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: var(--text-sm); color: var(--ink); border-bottom: 1px solid var(--line); }
.md-sec .bk-li:last-child { border-bottom: none; }
.md-sec .bk-li .tm { font-variant-numeric: tabular-nums; color: var(--ink-2); flex-shrink: 0; min-width: 96px; }
.md-sec .task-li .box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-strong); flex-shrink: 0; display: grid; place-items: center; color: transparent; }
.md-sec .task-li.done .box { background: var(--accent); border-color: var(--accent); color: #fff; }
.md-sec .task-li .tx { font-size: var(--text-sm); color: var(--ink); }
.md-sec .task-li.done .tx { color: var(--ink-3); text-decoration: line-through; }
@media (max-width: 560px) { .myday { grid-template-columns: 1fr; } .myday-col { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; } }

/* ── Поверки и аттестации ───────────────────────────── */
.cal-list { display: flex; flex-direction: column; }
.cal-li { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "dot dev due" "dot type due"; column-gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.cal-li:last-child { border-bottom: none; }
.cal-li .dot { grid-area: dot; align-self: center; }
.cal-dev { grid-area: dev; font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.cal-type { grid-area: type; font-size: var(--text-xs); color: var(--ink-3); }
.cal-due { grid-area: due; font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.cal-due.ok { color: var(--ink-3); } .cal-due.warn { color: var(--warn); } .cal-due.bad { color: var(--bad); }

/* ── Pending-заглушка (отчёты) ──────────────────────── */
.pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; text-align: center; padding: 8px; }
.pending .pending-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; background: var(--surface-2); color: var(--ink-3); }
.pending .pending-tt { font-size: var(--text-base); font-weight: 600; color: var(--ink-2); }
.pending .pending-sub { font-size: var(--text-xs); color: var(--ink-3); line-height: 1.5; max-width: 34ch; }

/* ── Шелл страницы (из макета «Главная v2», скоуп .dash-v2 — не даём
      bootstrap-классам .btn прод-шелла конфликтовать с дизайном) ── */
.dash-v2 .topbar { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) 0 var(--s-4); }
.dash-v2 .topbar .greet { flex: 1; min-width: 0; }
.dash-v2 .topbar h1 { margin: 0; font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.dash-v2 .topbar .sub { margin: 3px 0 0; font-size: var(--text-base); color: var(--ink-2); }
.dash-v2 .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-family: inherit; font-size: var(--text-base); font-weight: 500; line-height: 1;
    padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer;
    transition: background var(--m-fast) var(--ease), border-color var(--m-fast), color var(--m-fast), box-shadow var(--m-fast);
    white-space: nowrap; text-decoration: none;
}
.dash-v2 .btn i { font-size: 1rem; }
.dash-v2 .btn-sm { padding: 6px 11px; font-size: var(--text-sm); }
.dash-v2 .btn-primary { background: var(--accent); color: var(--on-accent); }
.dash-v2 .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: 0 2px 10px var(--accent-glow); }
.dash-v2 .btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-strong); }
.dash-v2 .btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.dash-v2 .btn-soft { background: var(--accent-soft); color: var(--accent-strong); }
.dash-v2 .btn-soft:hover { background: var(--accent); color: var(--on-accent); }

/* ============================================================
   Блок Б (ассет дизайнера v14/v20): отчёты-строки, RDP, СКУД,
   задачи-CRUD, события приборов, быстрые ссылки
   ============================================================ */
/* Отчёты и испытания — строки состояний */
.rep{display:flex;flex-direction:column;margin-top:2px}
.rep-row{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:var(--r-sm);cursor:pointer;border-bottom:1px solid var(--line)}
.rep-row:last-child{border-bottom:none}
.rep-row:hover{background:var(--surface-2)}
.rep-ic{width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;font-size:1rem;background:var(--surface-2);color:var(--ink-3)}
.rep-ic.acc{background:var(--accent-soft);color:var(--accent-strong)}
.rep-ic.warn{background:var(--warn-soft);color:var(--warn)}
.rep-tx{flex:1;min-width:0;font-size:var(--text-sm);color:var(--ink)}
.rep-n{font-weight:700;font-size:var(--text-base)}
.rep-sub{font-size:var(--text-xs);color:var(--ink-3);margin-top:1px}
.rep-go{color:var(--ink-3);font-size:.8rem;flex:0 0 auto}

/* Block B widgets */
.rdp-list{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.rdp-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}
.rdp-row:last-child{border-bottom:none}
.rdp-nm{flex:1;font-size:var(--text-sm);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdp-btn{flex:0 0 auto;font:inherit;font-size:var(--text-xs);font-weight:600;color:var(--accent-strong);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-sm);padding:5px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.rdp-btn:hover{background:var(--accent);color:var(--on-accent)}
.rdp-btn[disabled]{opacity:.4;cursor:not-allowed}
.mh{display:flex;flex-direction:column;gap:8px}
.mh-big{font-size:1.9rem;font-weight:700;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.mh-sub{font-size:var(--text-xs);color:var(--ink-3);margin-top:-4px}
.mh-line{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-sm);color:var(--ink-2);padding-top:8px;border-top:1px solid var(--line)}
.mh-line span{display:inline-flex;align-items:center;gap:8px}.mh-line span i{color:var(--ink-3)}.mh-line b{color:var(--ink);font-variant-numeric:tabular-nums}
.tsk{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow:auto}
.tsk-li{display:flex;align-items:center;gap:9px;padding:7px 4px;border-radius:var(--r-sm)}
.tsk-li:hover{background:var(--surface-2)}
.tsk-box{width:18px;height:18px;flex:0 0 auto;border-radius:5px;border:1.5px solid var(--line-strong);display:grid;place-items:center;color:#fff;font-size:.7rem;cursor:pointer}
.tsk-box.on{background:var(--accent);border-color:var(--accent)}
.tsk-flag{flex:0 0 auto;font-size:.75rem;color:var(--ink-4);cursor:pointer}
.tsk-flag.on{color:var(--warn)}
.tsk-tx{flex:1;font-size:var(--text-sm);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsk-li.done .tsk-tx{color:var(--ink-3);text-decoration:line-through}
.tsk-li.done .tsk-flag{opacity:.4}
.tsk-badge{flex:0 0 auto;font-size:var(--text-2xs);font-weight:600;border-radius:99px;padding:2px 8px}
.tsk-badge.asg{color:var(--accent-strong);background:var(--accent-soft)}
.tsk-badge.due{color:var(--ink-3);background:var(--surface-3);font-variant-numeric:tabular-nums}
.tsk-badge.due.overdue{color:#fff;background:var(--bad)}
.tsk-del{border:none;background:none;color:var(--ink-3);cursor:pointer;font-size:.8rem;opacity:0;flex:0 0 auto}
.tsk-li:hover .tsk-del{opacity:1}.tsk-del:hover{color:var(--bad)}
.tsk-add{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.tsk-addtoggle{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:var(--text-sm);font-weight:500;color:var(--accent-strong);background:none;border:none;cursor:pointer;padding:2px}
.tsk-addtoggle:hover{color:var(--accent)}
.tsk-form{display:flex;flex-direction:column;gap:8px}
.tsk-fi{border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:7px 10px;font:inherit;font-size:var(--text-sm);color:var(--ink);background:var(--surface-2);outline:none}
.tsk-fi:focus{border-color:var(--accent-line)}
.tsk-form-row{display:flex;gap:6px;align-items:stretch}
.tsk-form-row select{flex:1;min-width:0}
.tsk-form-row input[type=date]{flex:0 0 auto;width:130px}
.tsk-flagbtn{flex:0 0 auto;width:34px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink-3);cursor:pointer}
.tsk-flagbtn.on{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.tsk-create{flex:0 0 auto;font:inherit;font-size:var(--text-sm);font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:var(--r-sm);padding:0 14px;cursor:pointer}
.tsk-create:hover{background:var(--accent-strong)}
.err-list{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.err-li{display:flex;align-items:center;gap:11px;padding:10px 4px;border-bottom:1px solid var(--line)}
.err-li:last-child{border-bottom:none}
.err-ic{width:30px;height:30px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;font-size:.9rem}
.err-ic.bad{background:var(--bad-soft);color:var(--bad)}.err-ic.warn{background:var(--warn-soft);color:var(--warn)}
.err-tx{flex:1;min-width:0}
.err-t{font-size:var(--text-sm);font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.err-tm{font-size:var(--text-2xs);color:var(--ink-3);font-weight:400}
.err-m{font-size:var(--text-xs);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.err-ack{flex:0 0 auto;font:inherit;font-size:var(--text-2xs);font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:5px 9px;cursor:pointer}
.err-ack:hover{border-color:var(--accent-line);color:var(--accent-strong)}
.err-ack[disabled]{cursor:default;color:var(--ok);border-color:var(--ok-line)}
.ql-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
.ql-grid.sm{grid-template-columns:1fr}
.ql-item{position:relative;display:flex;align-items:center;gap:10px;padding:11px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line);font-size:var(--text-sm);font-weight:500;color:var(--ink);cursor:pointer;text-decoration:none;font-family:inherit;text-align:left}
.ql-item:hover{border-color:var(--accent-line);color:var(--accent-strong)}
.ql-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ql-rm{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--surface);background:var(--bad);color:#fff;font-size:.6rem;display:none;place-items:center;cursor:pointer;padding:0}
.ql-editing .ql-rm{display:grid}
.ql-editing .ql-item{cursor:default}
.ql-add{border-style:dashed;color:var(--ink-3)}
.ql-add .ql-ic{background:var(--surface-3);color:var(--ink-3)}
.ql-editing .ql-add{display:none}
.ql-picker{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.ql-pick{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:var(--text-xs);font-weight:500;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:99px;padding:5px 11px;cursor:pointer}
.ql-pick:hover{border-color:var(--accent-line);color:var(--accent-strong);background:var(--accent-soft)}
.ql-pick-empty{font-size:var(--text-xs);color:var(--ink-3)}
.wg-editbtn{border:none;background:none;color:var(--ink-3);cursor:pointer;font-size:.85rem;padding:2px;line-height:1}
.wg-editbtn:hover,.wg-editbtn.on{color:var(--accent-strong)}
.ql-ic{width:28px;height:28px;flex:0 0 auto;border-radius:8px;background:var(--accent-soft);color:var(--accent-strong);display:grid;place-items:center;font-size:.9rem}