/* ============================================================================
   Дизайн-система «Dashboard A» — бібліотека компонентів.

   УВЕСЬ файл скоуплено під .ds (корінь дашборда), бо імена з макета
   (.row/.col/.chip/.task-*/.hearing-*) перетинаються з Bootstrap і наявними
   класами застосунку. Скоуп = пілот не зачіпає решту продукту; розкат на інші
   сторінки = додати .ds на їхній контейнер (або зняти скоуп при злитті).

   Кольори/відступи/радіуси - лише через токени дизайн-системи (style.css :root).
   Типографіка - через шкалу .t-* (--fs-*/--lh-*/--ls-*/--fw-*).
   ============================================================================ */

.ds { font-variant-numeric: tabular-nums; }
.ds .tnum { font-variant-numeric: tabular-nums; }

/* ── Сітка дашборда ── */
.ds-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: var(--gap); align-items: stretch; }
.ds-col  { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
@media (max-width: 880px) {
    .ds-grid { grid-template-columns: 1fr; }
}

/* ── HERO ── */
.ds .hero { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; margin-bottom: var(--gap); }
.ds .hero-top { display: flex; align-items: center; gap: 18px; padding: 22px 26px; }
.ds .hero-greet { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ds .hero-h { font: var(--fw-title-xl) var(--fs-title-xl)/var(--lh-title-xl) var(--font-sans); letter-spacing: var(--ls-title-xl); color: var(--ink); }
.ds .hero-sub { display: flex; align-items: center; gap: 10px; font: var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--muted); flex-wrap: wrap; }
.ds .hero-sub .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); flex-shrink: 0; }
.ds .role { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--border-radius-pill); background: var(--accent-soft); color: var(--accent-700); font: var(--fw-control) var(--fs-control)/1 var(--font-sans); }
.ds .role svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.ds .hero-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }

/* Смуга метрик HERO */
.ds .metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.ds .metric { padding: 16px 26px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.ds .metric + .metric::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--rule); }
.ds .metric-label { font: var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--muted); }
.ds .metric-val { font: var(--fw-title-xl) var(--fs-title-xl)/var(--lh-title-xl) var(--font-sans); letter-spacing: var(--ls-title-xl); color: var(--ink); font-variant-numeric: tabular-nums; }
.ds .metric-val .u { font: var(--fw-control) var(--fs-control)/1 var(--font-sans); color: var(--muted); margin-left: 3px; }
.ds .metric.alert .metric-val { color: var(--danger); }
@media (max-width: 768px) {
    /* HERO: складаємо привітання й дії у колонку, інакше дії (margin-left:auto)
       налазять на великий заголовок */
    .ds .hero-top { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 18px; }
    .ds .hero-h { font-size: 20px; }
    .ds .hero-actions { margin-left: 0; flex-wrap: wrap; }
    .ds .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
    .ds .metrics { grid-template-columns: repeat(2, 1fr); }
    .ds .metric { padding: 14px 18px; }
    .ds .metric:nth-child(2)::before, .ds .metric:nth-child(4)::before { display: none; }
}
@media (max-width: 460px) {
    .ds .metrics { grid-template-columns: 1fr; }
    .ds .metric + .metric::before { display: none; }
}

/* ── ПАНЕЛЬ (вигляд .panel; канон-злиття з .content-card - при розкаті) ── */
.ds .panel { display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow); }
/* Фіксовані висоти (бенто 2×2): верхній ряд tall, нижній short */
.ds .panel.tier-tall  { height: var(--pane-tall); }
.ds .panel.tier-short { height: var(--pane-short); }
.ds .panel-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px var(--panel-pad); border-bottom: 1px solid var(--rule); }
/* Скрол-регіон: контент панелі прокручується, шапка закріплена */
.ds .panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
.ds .panel-scroll::-webkit-scrollbar { width: 8px; }
.ds .panel-scroll::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 99px; border: 2px solid var(--card); }
.ds .panel-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }
.ds .panel-title { display: flex; align-items: center; gap: 9px; font: var(--fw-section) var(--fs-section)/var(--lh-section) var(--font-sans); letter-spacing: var(--ls-section); color: var(--ink); white-space: nowrap; }
.ds .panel-title .ico { width: 26px; height: 26px; border-radius: 8px; background: var(--soft); color: var(--muted); display: grid; place-items: center; }
.ds .panel-title .ico svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ds .link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--accent-700); font: var(--fw-control) var(--fs-control)/1 var(--font-sans); white-space: nowrap; }
.ds .link svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.ds .link:hover { color: var(--accent); }

/* ── МОВА СТАТУСІВ: нейтральний чип + кольорова крапка (колір несе крапка) ── */
.ds .chip { display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 9px; border-radius: var(--border-radius-pill); font: var(--fw-control) 11.5px/1 var(--font-sans); background: var(--soft); color: var(--ink-2); white-space: nowrap; flex-shrink: 0; border: 1px solid var(--rule); }
.ds .chip .d { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); flex-shrink: 0; }
.ds .chip[data-tone="danger"] .d { background: var(--danger); }
.ds .chip[data-tone="warn"] .d { background: var(--warn); }
.ds .chip[data-tone="ok"] .d { background: var(--ok); }
.ds .chip[data-tone="accent"] .d { background: var(--accent); }
.ds .chip.count { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── СПІЛЬНИЙ РЯДОК ── */
.ds .row { display: grid; align-items: center; border-bottom: 1px solid var(--rule); transition: background .12s; position: relative; }
.ds .row:last-child { border-bottom: 0; }
.ds .row:hover { background: var(--accent-wash); }

/* Позначку терміновості як налаштування прибрано - .bar лишається інертним (прихований) */
.ds .bar { display: none; }

/* ── ЗАВДАННЯ ── */
.ds .task { grid-template-columns: 1fr auto; gap: 14px; padding: var(--row-pad) var(--panel-pad); }
.ds .task-title { font: var(--fw-strong) var(--fs-strong)/var(--lh-strong) var(--font-sans); color: var(--ink); margin-bottom: 2px; }
.ds .task-meta { font: var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ds .due { font: var(--fw-control) var(--fs-control)/1.3 var(--font-sans); color: var(--muted); text-align: right; white-space: nowrap; }
.ds .due .day { display: block; font: var(--fw-caption) var(--fs-label)/1 var(--font-sans); color: var(--muted-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ds .task.today .due { color: var(--danger); }
.ds .task.soon  .due { color: var(--warn); }

/* ── ЗАСІДАННЯ ── */
.ds .hearing { grid-template-columns: 62px 1fr; gap: 0 16px; padding: 14px var(--panel-pad); align-items: stretch; }
.ds .date { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-right: 15px; border-right: 1px solid var(--rule); min-width: 62px; }
.ds .date .dow { font-size: 10px; font-weight: 600; letter-spacing: .01em; color: var(--muted); margin-bottom: 5px; white-space: nowrap; }
.ds .date .d { font: var(--fw-display) var(--fs-display)/1 var(--font-sans); letter-spacing: var(--ls-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ds .date .m { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); margin-top: 3px; }
.ds .date .t { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.ds .hearing.today .date .dow { color: var(--accent); }
.ds .hearing.today .date .d { color: var(--accent); }
.ds .h-body { min-width: 0; }
.ds .h-title { font: var(--fw-section) var(--fs-strong)/var(--lh-strong) var(--font-sans); color: var(--ink); margin-bottom: 7px; }
.ds .h-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.ds .casenum { font: var(--fw-control) var(--fs-label)/1.4 var(--font-sans); color: var(--ink-2); background: var(--soft); border: 1px solid var(--rule); padding: 1px 7px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.ds .dup { display: inline-flex; align-items: center; gap: 4px; font: var(--fw-caption) var(--fs-label)/1 var(--font-sans); color: var(--muted-2); }
.ds .dup svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ds .h-line { display: flex; align-items: flex-start; gap: 6px; font: var(--fw-caption) var(--fs-caption)/1.4 var(--font-sans); color: var(--muted); margin-top: 3px; }
.ds .h-line svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.7; color: var(--muted-2); flex-shrink: 0; margin-top: 2px; }

/* ── РАХУНКИ ── */
.ds .inv { grid-template-columns: 1fr auto; gap: 14px; padding: var(--row-pad) var(--panel-pad); }
.ds .inv-no { font: var(--fw-control) var(--fs-label)/1.4 var(--font-sans); color: var(--muted-2); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.ds .inv-client { font: var(--fw-strong) var(--fs-strong)/var(--lh-strong) var(--font-sans); color: var(--ink); margin-bottom: 3px; }
.ds .inv-term { font: var(--fw-caption) var(--fs-caption)/1 var(--font-sans); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ds .inv-term svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.7; color: var(--muted-2); }
.ds .inv-amt { text-align: right; font: var(--fw-title) var(--fs-title)/1 var(--font-sans); letter-spacing: var(--ls-title); white-space: nowrap; color: var(--danger); font-variant-numeric: tabular-nums; }
.ds .inv-amt .u { font: var(--fw-body) var(--fs-label)/1 var(--font-sans); color: var(--muted); margin-left: 2px; }

/* ── СПОВІЩЕННЯ ── */
.ds .note { grid-template-columns: 30px 1fr 24px; gap: 13px; padding: var(--row-pad) var(--panel-pad); align-items: start; }
.ds .note .n-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--soft); color: var(--muted); display: grid; place-items: center; margin-top: 1px; }
.ds .note .n-ico svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ds .n-type { font: var(--fw-section) var(--fs-label)/1 var(--font-sans); color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.ds .n-type .d { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); }
.ds .n-type[data-tone="accent"] .d { background: var(--accent); }
.ds .n-type[data-tone="ok"] .d { background: var(--ok); }
.ds .n-type[data-tone="warn"] .d { background: var(--warn); }
.ds .n-type[data-tone="danger"] .d { background: var(--danger); }
.ds .n-msg { font: var(--fw-body) var(--fs-caption)/1.45 var(--font-sans); color: var(--ink-2); }
.ds .n-msg b { font-weight: var(--fw-section); color: var(--ink); }
.ds .note .n-check { align-self: center; }                 /* вертикально по центру рядка */
.ds .n-check { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--rule-2); background: var(--card); display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; color: var(--muted-2); cursor: pointer; flex-shrink: 0; }
.ds .n-check i { font-size: 13px; line-height: 1; }         /* центрування bi-іконки в кнопці */
.ds .n-check svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.ds .n-check:hover { color: var(--ok); border-color: var(--ok); }

/* ── Порожній стан сповіщень (компактний) + перемикання чипа за .is-empty ── */
.ds .n-empty { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px 20px; gap: 4px; }
.ds .n-empty .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--soft); color: var(--ok); display: grid; place-items: center; margin-bottom: 6px; }
.ds .n-empty .ic i { font-size: 18px; }
.ds .n-empty .t { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ds .n-empty .s { font-size: 12px; color: var(--muted); }
.ds .chip-empty { display: none; }
.ds .panel-notif.is-empty .n-list { display: none; }
.ds .panel-notif.is-empty .n-empty { display: flex; }
.ds .panel-notif.is-empty .chip-has { display: none; }
.ds .panel-notif.is-empty .chip-empty { display: inline-flex; }
.ds .panel-notif.is-empty .panel-scroll { display: flex; flex-direction: column; justify-content: center; }

/* ── Порожні стани (інші панелі) ── */
.ds .panel-empty { padding: 34px var(--panel-pad); text-align: center; color: var(--muted); font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans); }
.ds .panel-empty .ico { width: 34px; height: 34px; margin: 0 auto 10px; color: var(--muted-2); display: grid; place-items: center; }
.ds .panel-empty .ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }