/* ── Dicardo UI base — "dk" kit (shared design foundation) ─────────────
   One source of truth for the calm v3/v4 look. Loaded after style.css and
   before every page layer (portal-home, mgmt-home, chrome-v3, tasks-v3,
   inventory-v4). Page layers keep their own prefixes (--hx-, --md-, --ch-,
   --tv-) but map them onto these tokens, so a colour changes in one place.

   Rules of the system
   - Neutral surfaces + hairline borders; one indigo accent for "primary /
     current"; tone colours only for status and things needing attention.
   - Secondary text is contrast-checked: muted ≥ 7:1, faint/subtle ≥ 4.5:1
     on white (slate-400 was dropped — it measured ~2.6:1).
   - --dk-accent is for text, icons, lines and soft fills. Solid fills with
     white text use --dk-accent-fill (stays deep indigo in dark mode).
   - Stroke icons (ui-icons.js), Persian digits, Vazirmatn from style.css. */

:root{
  /* surfaces */
  --dk-bg:#f6f7fb;
  --dk-surface:#ffffff;
  --dk-surface-2:#f8fafc;
  --dk-surface-solid:#ffffff;          /* dialogs / docked panels (never translucent) */
  --dk-hover:#f5f7fb;
  --dk-chip:#f1f5f9;
  --dk-border:#e2e5ee;
  --dk-border-strong:#cfd5e1;

  /* text */
  --dk-text:#0f172a;
  --dk-muted:#475569;
  --dk-subtle:#526175;
  --dk-faint:#5b6b80;

  /* accent */
  --dk-accent:#4f46e5;
  --dk-accent-soft:rgba(79,70,229,.09);
  --dk-accent-fill:#4f46e5;
  --dk-on-accent:#ffffff;
  --dk-focus:0 0 0 3px rgba(79,70,229,.18);

  /* tones (text colour / soft background) */
  --dk-ok:#047857;     --dk-ok-soft:rgba(5,150,105,.11);
  --dk-warn:#92400e;   --dk-warn-soft:rgba(217,119,6,.12);
  --dk-danger:#b91c1c; --dk-danger-soft:rgba(220,38,38,.09);
  --dk-info:#1d4ed8;   --dk-info-soft:rgba(37,99,235,.09);
  --dk-violet:#6d28d9; --dk-violet-soft:rgba(124,58,237,.10);
  --dk-review:#a21caf; --dk-review-soft:rgba(162,28,175,.10);
  --dk-neutral:#475569; --dk-neutral-soft:rgba(100,116,139,.12);
  /* solid tone marks (dots, bars) — brighter than text tones */
  --dk-ok-mark:#10b981; --dk-warn-mark:#d97706; --dk-danger-mark:#dc2626;

  /* depth */
  --dk-shadow:0 1px 2px rgba(15,23,42,.04), 0 6px 20px -12px rgba(15,23,42,.10);
  --dk-shadow-hover:0 2px 4px rgba(15,23,42,.05), 0 18px 36px -14px rgba(15,23,42,.18);
  --dk-shadow-pop:0 24px 60px -24px rgba(15,23,42,.45);

  /* shape + rhythm */
  --dk-r-sm:8px;
  --dk-r:10px;
  --dk-r-lg:14px;
  --dk-r-pill:999px;
  --dk-h-sm:30px;
  --dk-h:38px;
  --dk-h-lg:40px;

  /* type scale (px, tuned for Vazirmatn at long reading sessions) */
  --dk-fs-xs:11.5px;
  --dk-fs-sm:12.5px;
  --dk-fs:13.5px;
  --dk-fs-md:14.5px;
  --dk-fs-lg:17px;
  --dk-fs-xl:22px;

  --dk-ease:cubic-bezier(.2,.8,.2,1);
}

html[data-theme="dark"]{
  --dk-bg:#0b1120;
  --dk-surface:rgba(30,41,59,.55);
  --dk-surface-2:rgba(30,41,59,.32);
  --dk-surface-solid:#111827;
  --dk-hover:rgba(51,65,85,.42);
  --dk-chip:rgba(148,163,184,.10);
  --dk-border:rgba(148,163,184,.16);
  --dk-border-strong:rgba(148,163,184,.28);

  --dk-text:#e2e8f0;
  --dk-muted:#a8b3c4;
  --dk-subtle:#94a3b8;
  --dk-faint:#8f9cb1;

  --dk-accent:#a5b4fc;
  --dk-accent-soft:rgba(129,140,248,.15);
  --dk-accent-fill:#4f46e5;
  --dk-focus:0 0 0 3px rgba(129,140,248,.28);

  --dk-ok:#34d399;     --dk-ok-soft:rgba(52,211,153,.13);
  --dk-warn:#fbbf24;   --dk-warn-soft:rgba(251,191,36,.13);
  --dk-danger:#f87171; --dk-danger-soft:rgba(248,113,113,.14);
  --dk-info:#60a5fa;   --dk-info-soft:rgba(96,165,250,.14);
  --dk-violet:#c4b5fd; --dk-violet-soft:rgba(167,139,250,.14);
  --dk-review:#f0abfc; --dk-review-soft:rgba(240,171,252,.14);
  --dk-neutral:#a8b3c4; --dk-neutral-soft:rgba(148,163,184,.14);
  --dk-ok-mark:#34d399; --dk-warn-mark:#fbbf24; --dk-danger-mark:#f87171;

  --dk-shadow:0 1px 2px rgba(0,0,0,.25);
  --dk-shadow-hover:0 18px 40px -16px rgba(0,0,0,.6);
  --dk-shadow-pop:0 24px 60px -24px rgba(0,0,0,.7);
}

/* ═══ shared components ═══════════════════════════════════════════════
   Use these for new pages. Class names are `dk-*`, so legacy style.css
   rules never match them; `!important` only where legacy element rules
   (button/input/select) would otherwise win. */

.dk-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.dk-ic, .dk-ic svg{ width:16px; height:16px; flex:0 0 auto; display:inline-block; vertical-align:-3px; }

/* surface */
.dk-card{
  background:var(--dk-surface); border:1px solid var(--dk-border); border-radius:var(--dk-r-lg);
  box-shadow:var(--dk-shadow); color:var(--dk-text);
}
.dk-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--dk-border); }
.dk-card-title{ margin:0; font-size:var(--dk-fs-md); font-weight:800; color:var(--dk-text); line-height:1.6; }
.dk-card-body{ padding:16px; }
.dk-page-title{ margin:0; font-size:var(--dk-fs-xl); font-weight:800; line-height:1.5; color:var(--dk-text); }
.dk-page-sub{ margin:2px 0 0; font-size:var(--dk-fs); line-height:1.8; color:var(--dk-muted); }

/* buttons */
.dk-btn{
  display:inline-flex !important; align-items:center; justify-content:center; gap:7px;
  height:var(--dk-h); margin:0 !important; padding:0 14px !important; border-radius:var(--dk-r) !important;
  border:1px solid var(--dk-border) !important; background:var(--dk-surface) !important; color:var(--dk-text) !important;
  font:inherit !important; font-size:var(--dk-fs) !important; font-weight:700 !important; line-height:1 !important;
  box-shadow:none !important; cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background-color .12s, border-color .12s, color .12s;
}
.dk-btn:hover{ background:var(--dk-hover) !important; }
.dk-btn:focus-visible{ outline:none; box-shadow:var(--dk-focus) !important; border-color:var(--dk-accent) !important; }
.dk-btn:disabled, .dk-btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }
.dk-btn-primary{ background:var(--dk-accent-fill) !important; border-color:transparent !important; color:var(--dk-on-accent) !important; }
.dk-btn-primary:hover{ background:var(--dk-accent-fill) !important; filter:brightness(1.08); }
.dk-btn-quiet{ background:transparent !important; border-color:transparent !important; color:var(--dk-muted) !important; }
.dk-btn-quiet:hover{ background:var(--dk-hover) !important; color:var(--dk-text) !important; }
.dk-btn-danger{ color:var(--dk-danger) !important; }
.dk-btn-danger:hover{ background:var(--dk-danger-soft) !important; border-color:transparent !important; }
.dk-btn-sm{ height:var(--dk-h-sm); padding:0 10px !important; border-radius:var(--dk-r-sm) !important; font-size:var(--dk-fs-sm) !important; }
.dk-btn-icon{ width:var(--dk-h); padding:0 !important; }
.dk-btn-icon.ui-btn-sm{ width:var(--dk-h-sm); }

/* segmented control (view switchers, either/or choices) */
.dk-seg{
  display:inline-flex; gap:2px; padding:3px; border-radius:11px;
  background:var(--dk-chip); border:1px solid var(--dk-border);
}
.dk-seg-btn{
  display:inline-flex !important; align-items:center; gap:6px;
  height:32px; margin:0 !important; padding:0 12px !important; border:0 !important; border-radius:8px !important;
  background:transparent !important; color:var(--dk-muted) !important; box-shadow:none !important;
  font:inherit !important; font-size:13px !important; font-weight:700 !important; cursor:pointer;
}
.dk-seg-btn:hover{ color:var(--dk-text) !important; }
.dk-seg-btn.is-on, .dk-seg-btn[aria-selected="true"], .dk-seg-btn[aria-checked="true"]{
  background:var(--dk-surface-solid) !important; color:var(--dk-text) !important; box-shadow:0 1px 2px rgba(15,23,42,.08) !important;
}
html[data-theme="dark"] .dk-seg-btn.is-on,
html[data-theme="dark"] .dk-seg-btn[aria-selected="true"],
html[data-theme="dark"] .dk-seg-btn[aria-checked="true"]{ background:rgba(71,85,105,.55) !important; }
.dk-seg-btn:focus-visible{ outline:2px solid var(--dk-accent); outline-offset:1px; }
.dk-count{
  display:inline-block; min-width:20px; padding:0 6px; border-radius:var(--dk-r-pill);
  background:var(--dk-chip); color:var(--dk-muted); font-size:var(--dk-fs-xs); font-weight:700; line-height:20px; text-align:center;
}
.dk-count:empty{ display:none; }

/* status pill: <span class="ui-pill" data-tone="ok|warn|danger|info|violet|review|neutral|accent"> */
.dk-pill{
  --tone:var(--dk-neutral); --tone-soft:var(--dk-neutral-soft);
  display:inline-flex; align-items:center; gap:5px; max-width:100%; height:24px; padding:0 9px;
  border-radius:var(--dk-r-pill); background:var(--tone-soft); color:var(--tone);
  font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dk-pill::before{ content:""; width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:currentColor; }
.dk-pill.no-dot::before{ content:none; }
.dk-pill[data-tone="ok"]{ --tone:var(--dk-ok); --tone-soft:var(--dk-ok-soft); }
.dk-pill[data-tone="warn"]{ --tone:var(--dk-warn); --tone-soft:var(--dk-warn-soft); }
.dk-pill[data-tone="danger"]{ --tone:var(--dk-danger); --tone-soft:var(--dk-danger-soft); }
.dk-pill[data-tone="info"]{ --tone:var(--dk-info); --tone-soft:var(--dk-info-soft); }
.dk-pill[data-tone="violet"]{ --tone:var(--dk-violet); --tone-soft:var(--dk-violet-soft); }
.dk-pill[data-tone="review"]{ --tone:var(--dk-review); --tone-soft:var(--dk-review-soft); }
.dk-pill[data-tone="accent"]{ --tone:var(--dk-accent); --tone-soft:var(--dk-accent-soft); }

/* form fields */
.dk-field{ display:grid; gap:6px; min-width:0; }
.dk-label{ font-size:var(--dk-fs-sm); font-weight:700; color:var(--dk-muted); }
.dk-optional{ margin-inline-start:4px; padding:0 6px; border-radius:6px; background:var(--dk-chip); color:var(--dk-faint); font-size:var(--dk-fs-xs); font-weight:600; }
.dk-input{
  width:100%; min-height:var(--dk-h-lg); margin:0 !important; padding:8px 12px !important;
  border-radius:var(--dk-r) !important; border:1px solid var(--dk-border) !important;
  background:var(--dk-surface-2) !important; color:var(--dk-text) !important;
  font:inherit !important; font-size:var(--dk-fs) !important; box-shadow:none !important;
}
html[data-theme="dark"] .dk-input{ background:rgba(15,23,42,.45) !important; }
.dk-input::placeholder{ color:var(--dk-faint); }
.dk-input:focus{ outline:none; border-color:var(--dk-accent) !important; box-shadow:var(--dk-focus) !important; }
textarea.ui-input{ min-height:84px; line-height:1.8; resize:vertical; }

/* dense data table built from divs: set grid-template-columns per table */
.dk-table{ display:flex; flex-direction:column; }
.dk-table-head, .dk-table-row{ display:grid; align-items:center; gap:12px; padding:0 16px; }
.dk-table-head{ height:36px; background:var(--dk-surface-2); border-bottom:1px solid var(--dk-border); font-size:12px; font-weight:700; color:var(--dk-muted); }
.dk-table-row{ min-height:48px; font-size:13px; color:var(--dk-text); }
.dk-table-row + .dk-table-row{ border-top:1px solid var(--dk-border); }
.dk-table-row:hover{ background:var(--dk-hover); }
.dk-table-row > *{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* empty / loading */
.dk-empty{ padding:36px 16px; text-align:center; font-size:var(--dk-fs); color:var(--dk-muted); }
.dk-skel{ border-radius:6px; background:linear-gradient(90deg, var(--dk-chip) 0%, var(--dk-hover) 50%, var(--dk-chip) 100%); background-size:200% 100%; animation:dk-skel 1.2s linear infinite; }
@keyframes dk-skel{ to{ background-position:-200% 0; } }

/* keyboard hint */
.dk-kbd{ display:inline-block; min-width:20px; padding:0 5px; border-radius:5px; border:1px solid var(--dk-border); border-bottom-width:2px; background:var(--dk-surface-solid); color:var(--dk-muted); font:600 11px/18px ui-monospace, SFMono-Regular, Menlo, monospace; text-align:center; }

@media (prefers-reduced-motion:reduce){
  .dk-btn, .dk-skel{ transition:none; animation:none; }
}