/* ============================================================
   DAP ERP — Design System
   Brand theme (Navy + Red) with density + dark mode support
   Backward-compatible with legacy class names (.section, .kpi, .muted, .page-shell, .badge-*, .status)
   ============================================================ */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: var(--text-base);
  line-height: 1.5;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ---------- Brand theme (light) ---------- */
:root,
[data-theme="brand"][data-mode="light"] {
  --font-sans: "Inter", ui-sans-serif, system-ui, "Sarabun", -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter", "Sarabun", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bg: #f6f7fb;
  --surface: #ffffff;
  --sunken: #eef1f7;
  --overlay: rgba(15, 23, 42, 0.5);

  --ink: #0b1530;
  --ink-soft: #1f2a4d;
  --muted: #5d6a85;
  --faint: #98a2b3;
  --on-accent: #ffffff;

  --line: #e3e7ef;
  --line-strong: #cdd4e0;
  --line-faint: #eef1f7;

  --accent: #06164a;
  --accent-hover: #0c2670;
  --accent-soft: #eef2fb;
  --highlight: #df1f26;
  --highlight-soft: #fde9ea;

  --success: #0f9d58;
  --success-soft: #e6f6ee;
  --warn: #b86e00;
  --warn-soft: #fdf2db;
  --danger: #c1191f;
  --danger-soft: #fde9ea;
  --info: #2563eb;
  --info-soft: #e8efff;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(11, 21, 48, 0.04);
  --shadow-sm: 0 1px 2px rgba(11, 21, 48, 0.06), 0 1px 1px rgba(11, 21, 48, 0.04);
  --shadow-md: 0 4px 14px rgba(11, 21, 48, 0.06), 0 1px 2px rgba(11, 21, 48, 0.04);
  --shadow-lg: 0 16px 36px rgba(11, 21, 48, 0.10);

  --focus-ring: 0 0 0 3px rgba(223, 31, 38, 0.18);
}

/* ---------- Brand theme (dark) ---------- */
[data-mode="dark"] {
  --bg: #06091a;
  --surface: #0d1230;
  --sunken: #050818;
  --overlay: rgba(0, 0, 0, 0.6);
  --ink: #eef2fb;
  --ink-soft: #cfd6ea;
  --muted: #8390b3;
  --faint: #586289;
  --line: #1a2050;
  --line-strong: #283168;
  --line-faint: #11163a;
  --accent: #6b85ff;
  --accent-hover: #8fa3ff;
  --accent-soft: #141a40;
  --highlight: #ff5560;
  --highlight-soft: #2a1218;
  --success-soft: #0e2a1e;
  --warn-soft: #2a1d08;
  --danger-soft: #2a1218;
  --info-soft: #0f1a3a;
  --on-accent: #06091a;
}

/* ---------- Theme: mono (Linear-style) ---------- */
[data-theme="mono"][data-mode="light"] {
  --bg: #fafafa; --surface: #ffffff; --sunken: #f4f4f5;
  --ink: #09090b; --ink-soft: #18181b; --muted: #71717a; --faint: #a1a1aa;
  --line: #ececef; --line-strong: #d4d4d8; --line-faint: #f4f4f5;
  --accent: #18181b; --accent-hover: #000000; --accent-soft: #f4f4f5;
  --highlight: #5b21d6; --highlight-soft: #ede9fe;
  --success: #15803d; --success-soft: #ecfdf5;
  --warn: #a16207;    --warn-soft: #fef3c7;
  --danger: #b91c1c;  --danger-soft: #fee2e2;
  --info: #1d4ed8;    --info-soft: #dbeafe;
  --radius-sm: 4px; --radius: 6px; --radius-lg: 10px;
  --focus-ring: 0 0 0 3px rgba(91, 33, 214, 0.20);
}
[data-theme="mono"][data-mode="dark"] {
  --bg: #0a0a0a; --surface: #131316; --sunken: #18181b;
  --ink: #fafafa; --ink-soft: #e4e4e7; --muted: #a1a1aa; --faint: #71717a;
  --line: #27272a; --line-strong: #3f3f46; --line-faint: #1c1c1f;
  --accent: #fafafa; --accent-hover: #ffffff; --accent-soft: #1c1c1f;
  --highlight: #a78bfa; --highlight-soft: #1e1a36;
  --success-soft: #0e2a1e; --warn-soft: #2a1d08;
  --danger-soft: #2a1218; --info-soft: #0f1a3a;
  --on-accent: #09090b;
}

/* ---------- Theme: editorial (Notion-warm) ---------- */
[data-theme="editorial"][data-mode="light"] {
  --font-display: "Source Serif 4", "IBM Plex Serif", "Sarabun", Georgia, serif;
  --bg: #faf9f6; --surface: #ffffff; --sunken: #f3f1eb;
  --ink: #232120; --ink-soft: #2f2c2a; --muted: #7b746c; --faint: #a8a098;
  --line: #ece8df; --line-strong: #d8d2c4; --line-faint: #f3f1eb;
  --accent: #1d4737; --accent-hover: #0f2f25; --accent-soft: #e8f0eb;
  --highlight: #b8542f; --highlight-soft: #faece2;
  --success: #527a3a; --success-soft: #ecf3e2;
  --warn: #a86a1a;    --warn-soft: #faf0d8;
  --danger: #a13d2a;  --danger-soft: #faece2;
  --info: #345f8b;    --info-soft: #e6eef6;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px;
  --focus-ring: 0 0 0 3px rgba(184, 84, 47, 0.18);
}
[data-theme="editorial"][data-mode="dark"] {
  --font-display: "Source Serif 4", "IBM Plex Serif", "Sarabun", Georgia, serif;
  --bg: #1a1816; --surface: #221f1c; --sunken: #15130f;
  --ink: #f3efe6; --ink-soft: #d8d2c4; --muted: #8a8275; --faint: #5c5448;
  --line: #2e2924; --line-strong: #423b32; --line-faint: #221f1c;
  --accent: #a8c8a0; --accent-hover: #c0dab8; --accent-soft: #1f2620;
  --highlight: #e7a17c; --highlight-soft: #2a1e16;
  --success-soft: #1c2618; --warn-soft: #2a2010;
  --danger-soft: #2a1e16; --info-soft: #18222e;
  --on-accent: #14201a;
}

/* ---------- Toast (auto-dismissing) ---------- */
.dap-toast-wrap {
  position: fixed; bottom: 24px; right: 24px; z-index: 2000;
  display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none;
}
.dap-toast {
  pointer-events: auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 12px 16px;
  box-shadow: var(--shadow-lg); min-width: 260px; max-width: 420px;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--text-sm); line-height: 1.45;
  animation: dap-toast-in .25s cubic-bezier(.2,.7,.3,1) both;
}
.dap-toast[data-tone="success"] { border-left-color: var(--success); }
.dap-toast[data-tone="danger"]  { border-left-color: var(--danger);  }
.dap-toast[data-tone="warning"] { border-left-color: var(--warn);    }
.dap-toast[data-tone="info"]    { border-left-color: var(--info);    }
.dap-toast.leaving { animation: dap-toast-out .2s ease-in both; }
.dap-toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.dap-toast[data-tone="success"] svg { color: var(--success); }
.dap-toast[data-tone="danger"]  svg { color: var(--danger); }
.dap-toast[data-tone="warning"] svg { color: var(--warn); }
.dap-toast .x { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 16px; line-height: 1; }
.dap-toast .x:hover { color: var(--ink); }
@keyframes dap-toast-in  { from { opacity: 0; transform: translateX(20px); } }
@keyframes dap-toast-out { to   { opacity: 0; transform: translateX(20px); } }

/* ---------- Modal scrim + dialog (command palette, notifications, generic) ---------- */
.dap-scrim {
  position: fixed; inset: 0; background: var(--overlay, rgba(15,23,42,.5));
  z-index: 1500; backdrop-filter: blur(2px);
  animation: dap-fade-in .15s ease-out;
}
@keyframes dap-fade-in { from { opacity: 0; } }
.dap-modal {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  z-index: 1501; overflow: hidden;
  animation: dap-modal-in .18s cubic-bezier(.2,.7,.3,1);
}
@keyframes dap-modal-in { from { opacity: 0; transform: translate(-50%, -8px); } }
.dap-modal-hd { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-faint); }
.dap-modal-hd svg { width: 18px; height: 18px; color: var(--muted); }
.dap-modal-hd input { flex: 1; border: 0; background: transparent; outline: 0; font-size: var(--text-md); color: var(--ink); }
.dap-modal-hd input::placeholder { color: var(--faint); }
.dap-modal-hd kbd {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--muted);
  background: var(--sunken); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px;
}
.dap-modal-body { max-height: 60vh; overflow-y: auto; padding: 8px 0; }
.dap-cmd-section { padding: 8px 18px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dap-cmd-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  cursor: pointer; color: var(--ink); text-decoration: none;
  border-left: 2px solid transparent;
}
.dap-cmd-item:hover, .dap-cmd-item[data-focused="true"] {
  background: var(--sunken); color: var(--ink); border-left-color: var(--accent);
}
.dap-cmd-item svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.dap-cmd-item .label { flex: 1; font-size: var(--text-sm); font-weight: 500; }
.dap-cmd-item .hint  { font-size: 11px; color: var(--faint); }

/* ---------- Notification panel ---------- */
.dap-notif-panel {
  position: fixed; top: 60px; right: 16px;
  width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 80px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  z-index: 1501; overflow: hidden; display: flex; flex-direction: column;
  animation: dap-modal-in .18s cubic-bezier(.2,.7,.3,1);
}
.dap-notif-hd { padding: 12px 16px; border-bottom: 1px solid var(--line-faint); display: flex; align-items: center; justify-content: space-between; }
.dap-notif-hd .h { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.dap-notif-body { overflow-y: auto; }
.dap-notif-item {
  display: flex; gap: 12px; padding: 12px 16px; align-items: flex-start;
  border-bottom: 1px solid var(--line-faint);
  color: var(--ink); text-decoration: none;
}
.dap-notif-item:hover { background: var(--sunken); }
.dap-notif-item .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--accent); }
.dap-notif-item[data-tone="warning"] .dot { background: var(--warn); }
.dap-notif-item[data-tone="danger"]  .dot { background: var(--danger); }
.dap-notif-item[data-tone="success"] .dot { background: var(--success); }
.dap-notif-item .title { font-size: var(--text-sm); font-weight: 550; line-height: 1.4; }
.dap-notif-item .meta  { font-size: 11px; color: var(--muted); margin-top: 2px; }
.dap-notif-empty { padding: 32px 16px; text-align: center; color: var(--muted); font-size: var(--text-sm); }
.dap-bell-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 8px; height: 8px; border-radius: 4px;
  background: var(--highlight); border: 2px solid var(--surface);
  padding: 0;
}

/* ---------- Sparkline (pure SVG, no library) ---------- */
.dap-spark { width: 100%; height: 32px; display: block; }
.dap-kpi-spark { margin-top: 8px; }

/* ============================================================
   VISUAL MAPPING LIBRARY
   Global semantic colors (do not rely on color alone — always
   pair with text label / icon).
   ============================================================ */

/* Status pills — uniform shape, semantic colors keyed by data-status */
.dap-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; font-size: var(--text-xs); font-weight: 600;
  border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--sunken); color: var(--ink-soft);
  border: 1px solid var(--line);
  line-height: 1.5;
}
.dap-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .75; flex-shrink: 0;
}
.dap-pill[data-tone="revenue"],
.dap-pill[data-tone="received"],
.dap-pill[data-tone="collected"],
.dap-pill[data-tone="paid"],
.dap-pill[data-tone="approved"],
.dap-pill[data-tone="completed"],
.dap-pill[data-tone="success"],
.dap-pill[data-tone="healthy"]    { background: var(--success-soft); color: var(--success); border-color: transparent; }

.dap-pill[data-tone="expense"],
.dap-pill[data-tone="cost"],
.dap-pill[data-tone="payout"],
.dap-pill[data-tone="rejected"],
.dap-pill[data-tone="cancelled"],
.dap-pill[data-tone="overdue"],
.dap-pill[data-tone="loss"],
.dap-pill[data-tone="danger"]     { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

.dap-pill[data-tone="recoverable"],
.dap-pill[data-tone="low-margin"],
.dap-pill[data-tone="warning"]    { background: var(--warn-soft); color: var(--warn); border-color: transparent; }

.dap-pill[data-tone="outstanding"],
.dap-pill[data-tone="info"]       { background: var(--info-soft); color: var(--info); border-color: transparent; }

.dap-pill[data-tone="pending"],
.dap-pill[data-tone="review"]     { background: #fff8e1; color: #936508; border-color: transparent; }
[data-mode="dark"] .dap-pill[data-tone="pending"],
[data-mode="dark"] .dap-pill[data-tone="review"] { background: #2a2210; color: #ffd88a; }

.dap-pill[data-tone="draft"],
.dap-pill[data-tone="archived"],
.dap-pill[data-tone="neutral"]    { background: var(--sunken); color: var(--muted); border-color: transparent; }

/* Field-value chips (matter list etc.) — soft, no status dot, wrap-friendly.
   Black/Red case numbers are colour-coded to their Thai names (ดำ/แดง). */
.dap-fchip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.45;
  background: var(--sunken); color: var(--ink-soft);
  max-width: 100%; white-space: normal;
}
.dap-fchip[data-tone="black-case"] { background: #e7e9f0; color: #232c3b; white-space: nowrap; }
[data-mode="dark"] .dap-fchip[data-tone="black-case"] { background: #2a2f3a; color: #e1e6f0; }
.dap-fchip[data-tone="red-case"]   { background: var(--danger-soft); color: var(--danger); white-space: nowrap; }
.dap-fchip[data-tone="court"]      { background: var(--info-soft); color: var(--info); }
.dap-fchip[data-tone="type"]       { background: var(--accent-soft); color: var(--accent); }
.dap-fchip[data-tone="client"]     { background: var(--sunken); color: var(--ink-soft); }
.dap-fchip[data-tone="assignee"]   { background: var(--sunken); color: var(--ink-soft); }
.dap-fchip[data-tone="muted"]      { background: var(--sunken); color: var(--muted); }
/* รหัสแฟ้ม — monospace reference chip, quiet neutral */
.dap-fchip[data-tone="code"] {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  background: var(--sunken); color: var(--ink-soft); letter-spacing: 0; font-size: 11px;
}
/* Matter-type chips — one hue per practice area for fast scanning */
.dap-fchip[data-type="litigation"]   { background: #e7e8fb; color: #4338ca; }
.dap-fchip[data-type="corporate"]    { background: #d6f3ec; color: #0f766e; }
.dap-fchip[data-type="consulting"]   { background: #fbeecb; color: #946600; }
.dap-fchip[data-type="enforcement"]  { background: #fde3d3; color: #b4530a; }
.dap-fchip[data-type="ip_trademark"] { background: #efe4fb; color: #7c3aed; }
[data-mode="dark"] .dap-fchip[data-type="litigation"]   { background: #25264a; color: #c3c4f5; }
[data-mode="dark"] .dap-fchip[data-type="corporate"]    { background: #0f342f; color: #87e0d2; }
[data-mode="dark"] .dap-fchip[data-type="consulting"]   { background: #38300f; color: #ecc879; }
[data-mode="dark"] .dap-fchip[data-type="enforcement"]  { background: #3a2410; color: #f2b489; }
[data-mode="dark"] .dap-fchip[data-type="ip_trademark"] { background: #2b1f44; color: #c9aef5; }

/* Deadline urgency — keyed by data-urgency */
.dap-pill[data-urgency="overdue"] { background: #fde0e0; color: #8b1313; border-color: transparent; }
[data-mode="dark"] .dap-pill[data-urgency="overdue"] { background: #401414; color: #ffb0b0; }
.dap-pill[data-urgency="today"]   { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.dap-pill[data-urgency="d3"]      { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.dap-pill[data-urgency="d7"]      { background: #fff8e1; color: #936508; border-color: transparent; }
[data-mode="dark"] .dap-pill[data-urgency="d7"] { background: #2a2210; color: #ffd88a; }
.dap-pill[data-urgency="d14"]     { background: var(--success-soft); color: var(--success); border-color: transparent; }
.dap-pill[data-urgency="future"]  { background: var(--info-soft); color: var(--info); border-color: transparent; }
.dap-pill[data-urgency="done"]    { background: var(--sunken); color: var(--muted); border-color: transparent; }

/* Profitability — keyed by data-pl */
.dap-pill[data-pl="healthy"]      { background: var(--success-soft); color: var(--success); border-color: transparent; }
.dap-pill[data-pl="break-even"]   { background: var(--info-soft); color: var(--info); border-color: transparent; }
.dap-pill[data-pl="low-margin"]   { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.dap-pill[data-pl="loss"]         { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.dap-pill[data-pl="pending"]      { background: #fff8e1; color: #936508; border-color: transparent; }
[data-mode="dark"] .dap-pill[data-pl="pending"]{ background: #2a2210; color: #ffd88a; }

/* Progress bar (semantic colors via data-tone) */
.dap-progress {
  position: relative; height: 8px; border-radius: 999px;
  background: var(--sunken); overflow: hidden; min-width: 80px;
}
.dap-progress > .bar {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--accent); border-radius: 999px;
  transition: width .35s cubic-bezier(.2,.7,.3,1);
}
.dap-progress[data-tone="success"] > .bar { background: var(--success); }
.dap-progress[data-tone="warning"] > .bar { background: var(--warn); }
.dap-progress[data-tone="danger"]  > .bar { background: var(--danger); }
.dap-progress[data-tone="info"]    > .bar { background: var(--info); }
.dap-progress-row {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-xs); color: var(--muted);
}
.dap-progress-row .dap-progress { flex: 1; }
.dap-progress-row .v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }

/* Document completeness meter (compact, segmented) */
.dap-meter { display: flex; gap: 2px; min-width: 80px; }
.dap-meter > i {
  flex: 1; height: 6px; border-radius: 2px;
  background: var(--sunken);
}
.dap-meter > i[data-on="1"] { background: var(--success); }
.dap-meter[data-tone="warn"]   > i[data-on="1"] { background: var(--warn); }
.dap-meter[data-tone="danger"] > i[data-on="1"] { background: var(--danger); }

/* Generic SVG chart wrappers */
.dap-chart {
  width: 100%; max-width: 100%; display: block;
  font-family: var(--font-sans);
}
.dap-chart-empty {
  display: flex; align-items: center; justify-content: center;
  height: 140px; color: var(--muted); font-size: var(--text-sm);
  background: var(--sunken); border-radius: var(--radius); border: 1px dashed var(--line);
}
.dap-chart-legend {
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  font-size: var(--text-xs); color: var(--muted); margin-top: 8px;
}
.dap-chart-legend .it { display: inline-flex; align-items: center; gap: 6px; }
.dap-chart-legend .it i {
  width: 10px; height: 10px; border-radius: 2px; background: var(--accent); flex-shrink: 0;
}

/* Gantt / Timeline (pure CSS rows) */
.dap-gantt { font-size: var(--text-xs); }
.dap-gantt-row {
  display: grid; grid-template-columns: 200px 1fr auto;
  gap: 12px; padding: 8px 0; align-items: center;
  border-bottom: 1px solid var(--line-faint);
}
.dap-gantt-row .lbl { color: var(--ink-soft); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dap-gantt-row .when { color: var(--muted); font-variant-numeric: tabular-nums; }
.dap-gantt-track {
  position: relative; height: 12px; border-radius: 6px;
  background: var(--sunken); overflow: hidden;
}
.dap-gantt-bar {
  position: absolute; top: 0; height: 100%; border-radius: 6px;
  background: var(--accent); min-width: 4px;
}
.dap-gantt-bar[data-tone="overdue"]  { background: var(--danger); }
.dap-gantt-bar[data-tone="today"]    { background: var(--danger); }
.dap-gantt-bar[data-tone="d3"]       { background: var(--warn); }
.dap-gantt-bar[data-tone="d7"]       { background: #f5c000; }
.dap-gantt-bar[data-tone="d14"]      { background: var(--success); }
.dap-gantt-bar[data-tone="future"]   { background: var(--info); }
.dap-gantt-bar[data-tone="done"]     { background: var(--muted); opacity: .55; }

/* Wave 10 B.4 — Calendar month grid */
.dap-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 8px;
}
.dap-cal-dow {
  background: var(--sunken); padding: 8px 6px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; text-align: center;
}
.dap-cal-cell {
  background: var(--surface); padding: 6px;
  min-height: 96px; display: flex; flex-direction: column; gap: 2px;
  position: relative;
  min-width: 0;            /* allow equal 1fr columns; chips ellipsis-clip instead of forcing overflow */
  overflow: hidden;
}
.dap-cal-event { max-width: 100%; }
.dap-cal-cell[data-out="true"] { background: var(--sunken); opacity: 0.45; }
.dap-cal-cell[data-today="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.dap-cal-num { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.dap-cal-cell[data-today="true"] .dap-cal-num { color: var(--accent); }
.dap-cal-event {
  font-size: 10.5px; padding: 2px 6px; border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--accent-soft); color: var(--accent);
  border-left: 3px solid var(--accent);
  text-decoration: none; display: block;
  cursor: pointer;
}
.dap-cal-event:hover { filter: brightness(1.05); }
.dap-cal-event[data-kind="hearing"] { background: var(--danger-soft); color: var(--danger); border-left-color: var(--danger); }
.dap-cal-event[data-kind="filing"]  { background: var(--warn-soft);   color: var(--warn);   border-left-color: var(--warn); }
.dap-cal-event[data-kind="meeting"] { background: var(--info-soft);   color: var(--info);   border-left-color: var(--info); }
.dap-cal-event[data-kind="review"]  { background: #ede9fe; color: #5b21d6; border-left-color: #5b21d6; }
[data-mode="dark"] .dap-cal-event[data-kind="review"] { background: #1e1a36; color: #c4b5fd; }
.dap-cal-event[data-kind="task"]    { background: var(--sunken); color: var(--muted); border-left-color: var(--muted); }
.dap-cal-more {
  font-size: 10px; color: var(--muted); padding: 1px 4px;
  background: none; border: 0; text-align: left; cursor: pointer; border-radius: 3px;
}
.dap-cal-more:hover { color: var(--accent); background: var(--accent-soft); }
.dap-cal-mc { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; }
.dap-cal-who { font-weight: 700; }
.dap-cal-case { font-weight: 400; opacity: 0.82; }
/* Calendar event popover — full case context on click */
.dap-cal-popover { --bs-popover-max-width: 320px; }
.dap-cal-pop { font-size: 12px; line-height: 1.45; }
.dap-cal-pop-hd { margin-bottom: 6px; }
.dap-cal-pop-title { font-weight: 700; margin-bottom: 6px; line-height: 1.3; }
.dap-cal-pop-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 8px; }
.dap-cal-pop-dl dt { color: var(--muted); font-weight: 500; white-space: nowrap; }
.dap-cal-pop-dl dd { margin: 0; word-break: break-word; }
/* Phones: a month grid is too narrow for the case name — keep the kind-coloured
   chip but show only the responsible lawyer's name; tap opens the full popover. */
@media (max-width: 540px) {
  .dap-cal-cell { padding: 4px 3px; min-height: 84px; }
  .dap-cal-num { font-size: 10px; }
  .dap-cal-cell .dap-cal-event {
    font-size: 9px; line-height: 1.35; padding: 1px 4px; border-radius: 3px;
  }
  .dap-cal-cell .dap-cal-event .dap-cal-case { display: none; }
  .dap-cal-more { font-size: 9px; padding: 0 2px; }
}

/* Wave 10 B.3 — Matters Kanban */
.dap-kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.dap-kanban-col {
  background: var(--sunken); border-radius: var(--radius);
  padding: 12px; min-height: 240px;
  border-top: 3px solid var(--line-strong);
  display: flex; flex-direction: column; gap: 8px;
}
.dap-kanban-col[data-status="prospect"] { border-top-color: var(--muted); }
.dap-kanban-col[data-status="active"]   { border-top-color: var(--success); }
.dap-kanban-col[data-status="on_hold"]  { border-top-color: var(--warn); }
.dap-kanban-col[data-status="closing"]  { border-top-color: var(--info); }
.dap-kanban-col[data-status="closed"]   { border-top-color: var(--muted); }
.dap-kanban-hd { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--line-faint); }
.dap-kanban-hd .h { font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.dap-kanban-hd .c { font-size: 11px; color: var(--muted); background: var(--surface); padding: 1px 8px; border-radius: 999px; }
.dap-kanban-card {
  background: var(--surface); border: 1px solid var(--line-faint);
  border-radius: var(--radius-sm); padding: 10px;
  cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.dap-kanban-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--line); }
.dap-kanban-card .code { font-weight: 700; font-size: 12px; color: var(--accent); }
.dap-kanban-card .title { font-size: 13px; color: var(--ink); font-weight: 550; line-height: 1.35; margin: 2px 0 6px; }
.dap-kanban-card .meta { font-size: 11px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .dap-kanban { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .dap-kanban { grid-template-columns: 1fr; }
}

/* Money color helpers — text-only, paired with badge or label */
.dap-money-pos { color: var(--success); font-variant-numeric: tabular-nums; font-weight: 600; }
.dap-money-neg { color: var(--danger);  font-variant-numeric: tabular-nums; font-weight: 600; }
.dap-money-rec { color: var(--warn);    font-variant-numeric: tabular-nums; font-weight: 600; }
.dap-money-out { color: var(--info);    font-variant-numeric: tabular-nums; font-weight: 600; }

/* Aging buckets bar (current / 1-30 / 31-60 / 61-90 / 90+) */
.dap-aging {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  margin: 6px 0;
}
.dap-aging .seg {
  height: 10px; border-radius: 3px; background: var(--sunken);
  position: relative;
}
.dap-aging .seg[data-bucket="0"]  { background: var(--success); }
.dap-aging .seg[data-bucket="1"]  { background: var(--info); }
.dap-aging .seg[data-bucket="2"]  { background: #f5c000; }
.dap-aging .seg[data-bucket="3"]  { background: var(--warn); }
.dap-aging .seg[data-bucket="4"]  { background: var(--danger); }
.dap-aging-legend {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  font-size: 10.5px; color: var(--muted); text-align: center; margin-top: 4px;
}
.dap-aging-legend .v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Density ---------- */
[data-density="compact"] {
  --text-xs: 11px;   --text-sm: 12px;  --text-base: 13px; --text-md: 14px;
  --text-lg: 16px;   --text-xl: 19px;  --text-2xl: 24px;  --text-3xl: 30px;  --text-4xl: 38px;
  --s-1: 4px; --s-2: 6px; --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 20px; --s-7: 28px; --s-8: 36px;
  --h-row: 38px; --h-input: 32px;
}
:root,
[data-density="regular"] {
  --text-xs: 11.5px; --text-sm: 12.5px; --text-base: 14px; --text-md: 15px;
  --text-lg: 17px;   --text-xl: 20px;   --text-2xl: 26px;  --text-3xl: 34px;  --text-4xl: 44px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 44px;
  --h-row: 48px; --h-input: 36px;
}
[data-density="comfy"] {
  --text-xs: 12px;   --text-sm: 13px;   --text-base: 15px; --text-md: 16px;
  --text-lg: 18px;   --text-xl: 22px;   --text-2xl: 28px;  --text-3xl: 38px;  --text-4xl: 50px;
  --s-1: 6px; --s-2: 10px; --s-3: 14px; --s-4: 18px; --s-5: 24px; --s-6: 30px; --s-7: 40px; --s-8: 56px;
  --h-row: 56px; --h-input: 40px;
}

/* ── Phase C: typography & density polish ───────────────────────────
   The 3 density modes own the type scale; these add readability + the
   critical mobile input-zoom fix. ───────────────────────────────────── */
/* iOS Safari auto-zooms when a focused input is < 16px. Force 16px on
   small screens / forced-mobile so the viewport never jumps on focus. */
@media (max-width: 768px) {
  .form-control, .form-select, .dap-input, .dap-select, .dap-textarea,
  input, select, textarea { font-size: 16px; }
}
.dap-app[data-mobile="true"] .form-control,
.dap-app[data-mobile="true"] .form-select,
.dap-app[data-mobile="true"] .dap-input,
.dap-app[data-mobile="true"] .dap-select,
.dap-app[data-mobile="true"] .dap-textarea,
.dap-app[data-mobile="true"] input,
.dap-app[data-mobile="true"] select,
.dap-app[data-mobile="true"] textarea { font-size: 16px; }
/* Comfortable line-height for data rows (multi-line cells like the
   matter title+chips cell breathe better). */
.ui-data-table tbody td, .dap-table td, .table > tbody > tr > td { line-height: 1.5; }
/* Long-form prose stays within a readable measure (~72ch). */
.dap-prose, .prose-measure { max-width: 72ch; }

/* ============================================================
   PRIMITIVES
   ============================================================ */
.dap-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.dap-card-pad { padding: var(--s-5); }
.dap-stack { display: flex; flex-direction: column; gap: var(--s-3); }
.dap-row { display: flex; align-items: center; gap: var(--s-3); }
.dap-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.dap-grid { display: grid; gap: var(--s-4); }

/* Typography */
.dap-h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.dap-h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 650; line-height: 1.2; letter-spacing: -0.005em; margin: 0; color: var(--ink); }
.dap-h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.25; margin: 0; color: var(--ink); }
.dap-h4 { font-size: var(--text-md); font-weight: 600; margin: 0; color: var(--ink); }
.dap-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.dap-muted, .muted { color: var(--muted); }
.dap-faint { color: var(--faint); }
.dap-num { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums; }
.dap-mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; }

/* Buttons (also override Bootstrap defaults) */
.dap-btn, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--h-input);
  padding: 0 var(--s-4);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  font-weight: 550;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all .12s ease;
  white-space: nowrap;
  user-select: none;
}
.dap-btn:hover, .btn:hover { background: var(--sunken); border-color: var(--line-strong); color: var(--ink); }
.dap-btn:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dap-btn:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }
.dap-btn > svg, .btn > svg { width: 16px; height: 16px; flex-shrink: 0; }

.dap-btn-primary, .btn-primary, .btn-dark {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.dap-btn-primary:hover, .btn-primary:hover, .btn-dark:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent);
}
.dap-btn-danger, .btn-danger {
  background: var(--danger); color: #fff; border-color: var(--danger);
}
.dap-btn-danger:hover, .btn-danger:hover {
  background: var(--danger); color: #fff; border-color: var(--danger); filter: brightness(1.05);
}
.dap-btn-ghost, .btn-link {
  background: transparent; border-color: transparent; color: var(--accent); text-decoration: none;
}
.dap-btn-ghost:hover, .btn-link:hover { background: var(--sunken); color: var(--accent-hover); }
.btn-outline-dark, .dap-btn-outline {
  background: transparent; color: var(--accent); border-color: var(--line-strong);
}
.btn-outline-dark:hover, .dap-btn-outline:hover {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.btn-outline-secondary {
  background: transparent; color: var(--muted); border-color: var(--line-strong);
}
.btn-outline-secondary:hover {
  background: var(--sunken); color: var(--ink); border-color: var(--line-strong);
}

.dap-btn-sm, .btn-sm { height: 28px; padding: 0 10px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.dap-btn-sm > svg, .btn-sm > svg { width: 14px; height: 14px; }
.dap-btn-icon { width: var(--h-input); padding: 0; }
.dap-btn-icon.dap-btn-sm { width: 28px; }
.btn-lg { height: 48px; padding: 0 var(--s-5); font-size: var(--text-md); border-radius: var(--radius-lg); }

/* Inputs */
.dap-input, .dap-select, .dap-textarea,
.form-control, .form-select {
  height: var(--h-input);
  width: 100%;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  transition: border-color .12s, box-shadow .12s;
}
textarea.form-control, .dap-textarea { height: auto; padding: var(--s-3); resize: vertical; min-height: 80px; line-height: 1.5; }
.form-control:focus, .form-select:focus,
.dap-input:focus, .dap-select:focus, .dap-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.form-control::placeholder, .dap-input::placeholder { color: var(--faint); }
.form-label { font-size: var(--text-xs); font-weight: 600; color: var(--muted); margin-bottom: 4px; letter-spacing: 0.02em; }
.form-text { color: var(--muted); font-size: var(--text-xs); margin-top: 4px; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: var(--focus-ring); border-color: var(--accent); }

.dap-input-wrap { position: relative; display: flex; align-items: center; }
.dap-input-wrap .dap-input { padding-left: 36px; }
.dap-input-wrap > svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }

/* Badges (new + legacy) */
.dap-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 550;
  border-radius: var(--radius-pill);
  background: var(--sunken);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  white-space: nowrap;
  line-height: 1.4;
}
.dap-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.dap-badge[data-tone="ok"]     { background: var(--success-soft); color: var(--success); border-color: transparent; }
.dap-badge[data-tone="ok"]::before { background: var(--success); }
.dap-badge[data-tone="warn"]   { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.dap-badge[data-tone="warn"]::before { background: var(--warn); }
.dap-badge[data-tone="danger"], .dap-badge[data-tone="risk"] { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.dap-badge[data-tone="danger"]::before, .dap-badge[data-tone="risk"]::before { background: var(--danger); }
.dap-badge[data-tone="info"]   { background: var(--info-soft); color: var(--info); border-color: transparent; }
.dap-badge[data-tone="info"]::before { background: var(--info); }
.dap-badge[data-tone="accent"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.dap-badge[data-tone="accent"]::before { background: var(--accent); }
.dap-badge[data-plain]::before { display: none; }

/* Legacy badge classes */
.badge-soft, .badge-gray { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; font-size: var(--text-xs); font-weight: 550; border-radius: var(--radius-pill); background: var(--sunken); color: var(--ink-soft); border: 1px solid var(--line); }
.badge-blue { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge-red  { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge-green{ background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge-amber{ background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge-dark { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.status { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }

/* Avatar */
.dap-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-weight: 600; font-size: 11px; letter-spacing: .02em; flex-shrink: 0;
}
.dap-avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.dap-avatar-sm { width: 22px; height: 22px; font-size: 9.5px; }
.dap-avatar-stack { display: inline-flex; }
.dap-avatar-stack .dap-avatar { margin-left: -8px; border: 2px solid var(--surface); }
.dap-avatar-stack .dap-avatar:first-child { margin-left: 0; }

/* Tables (new + legacy Bootstrap) */
.dap-table, .table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: 0;
  background: transparent;
  color: var(--ink);
}
.dap-table th, .table > thead > tr > th {
  text-align: left; font-weight: 600;
  font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding: 10px var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.dap-table td, .table > tbody > tr > td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-faint);
  border-top: 0;
  vertical-align: middle;
  color: var(--ink);
}
.dap-table tr:hover td, .table-hover > tbody > tr:hover > td { background: var(--sunken); }
.dap-table tr:last-child td, .table > tbody > tr:last-child > td { border-bottom: 0; }
.dap-td-num, .text-end { text-align: right; font-variant-numeric: tabular-nums; }
.table-light > :not(caption) > * > * { background: var(--sunken); }

/* Scrollbar */
.dap-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.dap-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 2px solid var(--bg); }
.dap-scroll::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   APP SHELL — Sidebar + TopBar layout
   ============================================================ */
.dap-app {
  display: grid;
  grid-template-columns: var(--sb-w, 248px) 1fr;
  grid-template-rows: 1fr;
  min-height: 100vh;
  background: var(--bg);
  --sb-w: 248px;
}
.dap-app[data-collapsed="true"] { --sb-w: 64px; }

/* Sidebar */
.dap-sb {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  position: sticky;
  top: 0;
  height: 100vh;
}
.dap-sb-hd {
  display: flex; align-items: center; gap: 10px;
  height: 60px; padding: 0 14px;
  border-bottom: 1px solid var(--line-faint);
  flex-shrink: 0;
}
.dap-sb-logo {
  width: 32px; height: 32px; flex-shrink: 0;
}
.dap-sb-brand { min-width: 0; line-height: 1.15; }
.dap-sb-brand .t { font-weight: 650; font-size: var(--text-sm); color: var(--ink); display: block; white-space: nowrap; font-family: var(--font-display); }
.dap-sb-brand .s { font-size: 10.5px; color: var(--muted); display: block; white-space: nowrap; letter-spacing: .05em; }

.dap-sb-ws {
  margin: var(--s-3) var(--s-3) var(--s-2);
  padding: 10px;
  border-radius: var(--radius);
  background: var(--sunken);
  display: flex; align-items: center; gap: 10px;
  border: 1px solid transparent; min-width: 0;
}
.dap-sb-ws .dap-avatar { width: 30px; height: 30px; font-size: 12px; background: var(--accent); color: var(--on-accent); }
.dap-sb-ws .ws-info { min-width: 0; line-height: 1.15; flex: 1; }
.dap-sb-ws .ws-name { font-weight: 600; font-size: var(--text-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dap-sb-ws .ws-role { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }

.dap-sb-nav { flex: 1; overflow-y: auto; padding: var(--s-2) var(--s-2) var(--s-3); }
.dap-sb-nav-section {
  padding: 14px 10px 6px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint);
}
.dap-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px;
  color: var(--ink-soft); font-size: var(--text-sm);
  font-weight: 500; cursor: pointer; min-width: 0;
  text-decoration: none;
}
.dap-nav-item:hover { background: var(--sunken); color: var(--ink); }
.dap-nav-item[data-active="true"], .dap-nav-item.active {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.dap-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.dap-nav-item .label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dap-nav-item .count {
  font-size: 10.5px; font-weight: 600; padding: 1px 6px;
  border-radius: 999px; background: var(--surface);
  color: var(--muted); border: 1px solid var(--line);
}
.dap-nav-item[data-active="true"] .count { background: var(--accent); color: var(--on-accent); border-color: transparent; }

.dap-sb-foot { padding: 10px; border-top: 1px solid var(--line-faint); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Collapsed sidebar */
[data-collapsed="true"] .dap-sb-brand,
[data-collapsed="true"] .dap-sb-ws .ws-info,
[data-collapsed="true"] .dap-sb-nav-section,
[data-collapsed="true"] .dap-nav-item .label,
[data-collapsed="true"] .dap-nav-item .count,
[data-collapsed="true"] .dap-sb-foot .label { display: none; }
[data-collapsed="true"] .dap-sb-ws { margin: var(--s-3) 8px var(--s-2); padding: 6px; justify-content: center; }
[data-collapsed="true"] .dap-nav-item { justify-content: center; padding: 8px; }
[data-collapsed="true"] .dap-sb-hd { justify-content: center; padding: 0; }

/* Sidebar nav — collapsible accordion groups */
.dap-nav-group { display: block; }
.dap-nav-grp-hd {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none; user-select: none;
}
.dap-nav-grp-hd::-webkit-details-marker { display: none; }
.dap-nav-grp-hd::marker { content: ""; }
.dap-nav-grp-hd:hover { color: var(--muted); }
.dap-nav-grp-hd .grp-chev {
  width: 13px; height: 13px; margin-left: auto; flex-shrink: 0;
  color: var(--faint); transition: transform .18s ease;
}
.dap-nav-group[open] > .dap-nav-grp-hd .grp-chev { transform: rotate(180deg); }
/* Highlight the section heading that contains the current page */
.dap-nav-group:has(.dap-nav-item[data-active="true"]) > .dap-nav-grp-hd { color: var(--accent); }
.dap-nav-group-body { display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; }
.dap-nav-group[open] > .dap-nav-group-body { animation: dap-fade 160ms ease; }

/* Keyboard focus rings for nav + collapsible group headers (a11y §1) */
.dap-nav-item:focus-visible,
.dap-nav-grp-hd:focus-visible,
.dap-mobile-nav-item:focus-visible,
.dap-cmd-item:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 7px; }

/* Respect the user's reduced-motion preference (a11y §1 CRITICAL) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Main */
.dap-main { display: flex; flex-direction: column; min-width: 0; }

.dap-topbar {
  height: 60px; border-bottom: 1px solid var(--line); background: var(--surface);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-5); flex-shrink: 0;
  position: sticky; top: 0; z-index: 10;
}
.dap-search { flex: 1; max-width: 480px; }
.dap-search .form-control { background: var(--sunken); border-color: transparent; }
.dap-search .form-control:focus { background: var(--surface); }
.dap-spacer { flex: 1; }

.dap-page { flex: 1; padding: var(--s-5) var(--s-6); }
.dap-page-narrow, .page-shell { max-width: 1240px; margin: 0 auto; }

.dap-page-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap;
}
.dap-page-hd .breadcrumb { font-size: var(--text-xs); color: var(--muted); margin-bottom: 6px; letter-spacing: .02em; padding: 0; background: none; }
.dap-page-hd h1, .dap-page-hd .h1 { font-family: var(--font-display); font-size: var(--text-3xl); margin: 0; line-height: 1.1; letter-spacing: -0.015em; font-weight: 700; }
.dap-page-hd .subtitle { color: var(--muted); margin-top: 6px; font-size: var(--text-sm); }

/* Legacy h-classes used in templates */
h1.h3, .h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.h3 { font-size: var(--text-lg); font-weight: 600; color: var(--ink); }
h1, h2, h3, h4, h5, h6 { color: var(--ink); }

/* KPI cards (new + legacy) */
.dap-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
}
.dap-kpi, .kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
  min-height: 110px;
  box-shadow: var(--shadow-xs);
}
.dap-kpi .k-label, .kpi .muted, .kpi .small {
  font-size: var(--text-xs); font-weight: 600; color: var(--muted);
}
.dap-kpi .k-value, .kpi .value {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 650; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.dap-kpi .k-foot { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--muted); margin-top: auto; }
.dap-kpi .k-trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: var(--text-xs); }
.dap-kpi .k-trend[data-dir="up"] { color: var(--success); }
.dap-kpi .k-trend[data-dir="down"] { color: var(--danger); }
.dap-kpi .k-trend[data-dir="flat"] { color: var(--muted); }

/* Section card (new + legacy) */
.dap-section, .section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: var(--s-5);
}
.dap-section.flush { padding: 0; overflow: hidden; }
.dap-section-hd { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line-faint); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.dap-section-hd h3 { font-size: var(--text-md); font-weight: 600; margin: 0; color: var(--ink); }
.dap-section-bd { padding: var(--s-4) var(--s-5); }
.dap-section-bd.flush { padding: 0; }

/* Alerts (Bootstrap override) */
.alert {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: var(--s-3) var(--s-4);
  font-size: var(--text-sm);
}
.alert-success, .alert-ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.alert-warning, .alert-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.alert-danger, .alert-error { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.alert-info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.alert-light { background: var(--sunken); color: var(--ink-soft); border-color: var(--line); }

/* Tabs (Bootstrap nav-tabs) */
.nav-tabs { gap: var(--s-1); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.nav-tabs .nav-link {
  padding: 10px var(--s-4); font-size: var(--text-sm); font-weight: 550;
  color: var(--muted); border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--ink); border-color: transparent transparent transparent; background: transparent; }
.nav-tabs .nav-link.active { color: var(--ink); background: transparent; border-color: transparent transparent var(--highlight); font-weight: 600; }

/* Dropdown (Bootstrap) */
.dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px; background: var(--surface); }
.dropdown-item { border-radius: var(--radius-sm); color: var(--ink-soft); font-size: var(--text-sm); padding: 8px 10px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sunken); color: var(--ink); }
.dropdown-item.active { background: var(--accent-soft); color: var(--accent); }

/* Mobile bottom nav */
.dap-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  z-index: 50;
  padding: 4px 0 max(4px, env(safe-area-inset-bottom));
}
.dap-mobile-nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); font-size: 10.5px; font-weight: 600;
  background: none; border: none; cursor: pointer; padding: 0;
  text-decoration: none;
}
.dap-mobile-nav-item svg { width: 20px; height: 20px; }
.dap-mobile-nav-item[data-active="true"] { color: var(--accent); }

/* Utilities */
.dap-hr, hr { height: 1px; background: var(--line); border: none; margin: var(--s-4) 0; }
.dap-clickable { cursor: pointer; }
.dap-clickable:hover { background: var(--sunken); }
.dap-only-desktop { display: initial; }
.dap-only-mobile { display: none; }

/* Login page */
.dap-login, .login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--bg);
}
.dap-login-art {
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-hover) 60%, color-mix(in srgb, var(--accent) 70%, var(--highlight)) 100%);
  color: #fff; padding: var(--s-7);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.dap-login-art::after {
  content: "";
  position: absolute;
  inset: -100px;
  background:
    radial-gradient(60% 50% at 30% 20%, color-mix(in srgb, var(--highlight) 60%, transparent) 0%, transparent 60%),
    radial-gradient(50% 40% at 80% 90%, color-mix(in srgb, white 18%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.dap-login-form-wrap { display: flex; align-items: center; justify-content: center; padding: var(--s-7); }
.dap-login-form { width: 100%; max-width: 380px; }
.login-shell { max-width: 480px; margin: 0 auto; padding: var(--s-7); }
.login-panel { border-top: 4px solid var(--highlight); padding: var(--s-6); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md); }
.login-logo { display: block; width: min(360px, 100%); height: auto; margin: 0 auto var(--s-5); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .dap-app { grid-template-columns: 1fr; }
  .dap-sb {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 280px; z-index: 102; height: 100vh;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 8px 0 32px rgba(0,0,0,.15);
  }
  .dap-app[data-mobile-sb="true"] .dap-sb { transform: translateX(0); }
  [data-collapsed="true"] .dap-sb-brand,
  [data-collapsed="true"] .dap-sb-ws .ws-info,
  [data-collapsed="true"] .dap-sb-nav-section,
  [data-collapsed="true"] .dap-nav-item .label,
  [data-collapsed="true"] .dap-nav-item .count,
  [data-collapsed="true"] .dap-sb-foot .label { display: block; }
  [data-collapsed="true"] .dap-sb-ws { justify-content: flex-start; padding: 10px; }
  [data-collapsed="true"] .dap-nav-item { justify-content: flex-start; padding: 7px 10px; }
  [data-collapsed="true"] .dap-sb-hd { padding: 0 14px; justify-content: flex-start; }
  .dap-mobile-nav { display: flex; }
  /* Mobile overflow guard: keep the page within the viewport. Genuinely wide
     content (data tables) scrolls inside its own .table-responsive wrapper. */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .dap-app, .dap-main, .dap-page, .page-shell, .section, .dap-section { max-width: 100vw; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dap-page { padding: var(--s-4) var(--s-4) 80px; }
  .dap-page-hd h1 { font-size: var(--text-2xl); }
  .dap-search { max-width: none; }
  .dap-topbar { padding: 0 var(--s-4); height: 56px; }
  .dap-only-desktop { display: none; }
  .dap-only-mobile { display: initial; }
  .dap-login, .login-page { grid-template-columns: 1fr; }
  .dap-login-art { display: none; }
}

/* Forced mobile layout — server-detected phone (g.is_mobile) or user toggle,
   applied at ANY viewport width so the experience is deliberate + the
   desktop/mobile switch works on tablets and large phones too. Mirrors the
   ≤900px chrome. */
.dap-app[data-mobile="true"] { grid-template-columns: 1fr; overflow-x: hidden; max-width: 100vw; }
.dap-app[data-mobile="true"] .dap-sb {
  position: fixed; top: 0; bottom: 0; left: 0; width: 280px; z-index: 102; height: 100vh;
  transform: translateX(-100%); transition: transform .2s ease; box-shadow: 8px 0 32px rgba(0,0,0,.15);
}
.dap-app[data-mobile="true"][data-mobile-sb="true"] .dap-sb { transform: translateX(0); }
.dap-app[data-mobile="true"] .dap-mobile-nav { display: flex; }
.dap-app[data-mobile="true"] .dap-only-desktop { display: none; }
.dap-app[data-mobile="true"] .dap-only-mobile { display: initial; }
.dap-app[data-mobile="true"] .dap-page { padding: var(--s-4) var(--s-4) 80px; overflow-x: hidden; }
.dap-app[data-mobile="true"] .dap-search { max-width: none; }
.dap-app[data-mobile="true"] .dap-topbar { padding: 0 var(--s-4); height: 56px; }
.dap-app[data-mobile="true"] .dap-page,
.dap-app[data-mobile="true"] .page-shell,
.dap-app[data-mobile="true"] .section,
.dap-app[data-mobile="true"] .dap-section { max-width: 100vw; }
.dap-app[data-mobile="true"] .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Wide multi-column filter/KPI rows: force single column on forced-mobile so
   nothing overflows even at >900px widths. */
.dap-app[data-mobile="true"] .row { margin-left: 0; margin-right: 0; }
.dap-app[data-mobile="true"] .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
@media (max-width: 560px) {
  .dap-kpi, .kpi { min-height: 90px; padding: var(--s-3) var(--s-4); }
  .dap-kpi .k-value, .kpi .value { font-size: var(--text-xl); }
}

/* ============================================================
   Phase B — responsive data tables → stacked cards on mobile.
   JS (cardizeTables) tags list-like tables with .dap-cardize and
   writes data-label on each <td>; applyCardMode toggles .show-cards
   based on viewport / forced-mobile. Add class .no-cards to opt out.
   ============================================================ */
.dap-cardize.show-cards > thead {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.dap-cardize.show-cards,
.dap-cardize.show-cards > tbody,
.dap-cardize.show-cards > tbody > tr,
.dap-cardize.show-cards > tbody > tr > td { display: block; width: auto; }
.dap-cardize.show-cards > tbody > tr {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 4px 14px; margin-bottom: 10px; background: var(--surface);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(2,6,23,.05));
}
.dap-cardize.show-cards > tbody > tr > td {
  display: block; padding: 7px 0; border: 0;
  border-bottom: 1px solid var(--line-faint);
  text-align: left; white-space: normal;
}
.dap-cardize.show-cards > tbody > tr > td:last-child { border-bottom: 0; }
/* small uppercase label sits ABOVE the value (definition-list card) */
.dap-cardize.show-cards > tbody > tr > td::before {
  content: attr(data-label); display: block; margin-bottom: 2px;
  font-weight: 700; font-size: 10.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.3;
}
/* first column = the record identifier → render it as the card title */
.dap-cardize.show-cards > tbody > tr > td:first-child {
  font-size: var(--text-md); font-weight: 650; color: var(--ink);
}
/* card title cell: drop the redundant field label, let the title wrap fully */
.dap-cardize.show-cards > tbody > tr > td:first-child::before { content: none; }
.dap-cardize.show-cards .ui-row-title { white-space: normal; max-width: none; }
.dap-cardize.show-cards > tbody > tr > td:empty { display: none; }
/* action / label-less cells: no prefix label */
.dap-cardize.show-cards > tbody > tr > td:not([data-label])::before { content: none; }

/* Safety net: tables that are NOT cardized must not break the viewport —
   give them their own horizontal scroll on small screens. */
@media (max-width: 768px) {
  .dap-page table:not(.dap-cardize) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.dap-app[data-mobile="true"] .dap-page table:not(.dap-cardize) {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* Drawer / Modal scrim */
.dap-scrim { position: fixed; inset: 0; background: var(--overlay); z-index: 100; animation: dap-fade 120ms ease; }
.dap-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--surface); border-left: 1px solid var(--line); z-index: 101; display: flex; flex-direction: column; box-shadow: -16px 0 40px rgba(0,0,0,.12); animation: dap-slide 180ms cubic-bezier(.2,.7,.2,1); }
@keyframes dap-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dap-slide { from { transform: translateX(20px); opacity: 0.7; } to { transform: translateX(0); opacity: 1; } }

/* PDF print page (legacy) */
.pdf-page { background: #fff; color: #000; font-family: Arial, sans-serif; font-size: 12px; }
.pdf-brand-header { border-bottom: 4px solid var(--highlight); margin-bottom: 22px; padding-bottom: 14px; }
.pdf-brand-logo { width: 220px; height: auto; background: #fff; }
.pdf-brand-title { color: var(--accent); font-size: 24px; font-weight: 700; margin: 12px 0 0; }
.pdf-doc-header { align-items: flex-start; display: flex; justify-content: space-between; gap: 18px; }
.pdf-doc-title { color: var(--accent); font-size: 24px; font-weight: 700; line-height: 1.3; margin: 12px 0 0; }
.pdf-table { width: 100%; border-collapse: collapse; }
.pdf-table th, .pdf-table td { border: 1px solid #c8ceda; padding: 7px; }
.pdf-table th { text-align: left; color: var(--accent); background: var(--accent-soft); }
.pdf-box { border: 1px solid var(--line); border-left: 4px solid var(--highlight); padding: 12px; background: #fbfcff; }
.pdf-original-stamp { border: 2px solid var(--highlight); border-radius: 6px; color: var(--highlight); display: inline-flex; flex-direction: column; font-size: 14px; font-weight: 700; line-height: 1.25; margin-top: 6px; min-width: 132px; padding: 10px 14px; text-align: center; text-transform: uppercase; }
.pdf-page-break { break-before: page; page-break-before: always; }
.legal-pdf h1 { color: var(--accent); font-size: 20px; margin: 18px 0 10px; }
.legal-pdf h2 { color: var(--accent); font-size: 15px; margin: 16px 0 8px; }
.legal-pdf p { line-height: 1.55; white-space: pre-line; }

/* Module support pages */
.dap-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
}
.dap-module-card {
  display: block;
  min-height: 138px;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.dap-module-card:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.dap-module-card[data-tone="success"] { border-left-color: var(--success); }
.dap-module-card[data-tone="warning"] { border-left-color: var(--warn); }
.dap-module-card[data-tone="danger"] { border-left-color: var(--danger); }
.dap-module-card h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0;
}
.dap-module-card p {
  margin: var(--s-2) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.dap-module-status {
  flex: 0 0 auto;
  max-width: 44%;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.dap-module-link {
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* ============================================================
   Reusable page header + expandable usage-help panel
   ============================================================ */
.page-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4);
}
.page-hd-text { min-width: 0; }
.page-hd-title {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700;
  line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--ink);
}
.page-hd-sub { margin-top: 4px; font-size: var(--text-sm); color: var(--muted); max-width: 70ch; }
.page-hd-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.page-help-btn { display: inline-flex; align-items: center; gap: 5px; }
.page-help-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700;
}
.page-help {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: var(--radius);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5); margin-bottom: var(--s-4);
  animation: dap-fade 140ms ease;
}
.page-help-head { font-weight: 650; color: var(--accent); margin-bottom: 6px; font-size: var(--text-sm); }
.page-help-steps { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: var(--text-sm); }
.page-help-steps li { margin: 3px 0; line-height: 1.5; }

/* ============================================================
   Operational UI helpers
   Shared by Matters, Tasks, Deadlines, AP, and Payment Vouchers.
   ============================================================ */
.ui-filter-bar {
  padding: var(--s-4);
}
.ui-quick-filters {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.ui-data-table {
  --bs-table-hover-bg: var(--sunken);
}
.ui-data-table thead th {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--surface);
  border-bottom-color: var(--line);
  white-space: nowrap;
}
.ui-data-table tbody td {
  vertical-align: middle;
}
.ui-row-title {
  display: block;
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 700;
  font-size: var(--text-md);
}
.ui-row-muted {
  opacity: .68;
}
.ui-action-menu {
  justify-content: flex-end;
}
.ui-action-menu .dropdown-menu {
  min-width: 190px;
  border-radius: var(--radius);
  border-color: var(--line);
  box-shadow: var(--shadow-md);
}
.ui-action-menu form {
  margin: 0;
}
.ui-action-menu .dropdown-item {
  font-size: var(--text-sm);
}
.ui-owner-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.ui-owner-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 800;
  flex-shrink: 0;
}
.ui-priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--sunken);
  color: var(--ink-soft);
  white-space: nowrap;
}
.ui-priority-high,
.ui-priority-urgent,
.ui-priority-critical {
  background: var(--danger-soft);
  color: var(--danger);
}
.ui-priority-low {
  background: var(--success-soft);
  color: var(--success);
}
.ui-empty-state {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  text-align: center;
  padding: var(--s-6) var(--s-4);
  color: var(--ink-soft);
}
.ui-empty-state strong {
  color: var(--ink);
  font-size: var(--text-md);
}
.ui-empty-state span {
  max-width: 52ch;
  color: var(--muted);
  font-size: var(--text-sm);
}
.ui-empty-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sunken);
  color: var(--muted);
  font-weight: 800;
}
.ui-metric-card {
  min-height: 100px;
}
.ui-metric-success {
  border-left: 3px solid var(--success);
}
.ui-metric-warn {
  border-left: 3px solid var(--warn);
}
.ui-metric-danger {
  border-left: 3px solid var(--danger);
}

/* Misc legacy support */
.brand-mark { width: auto; height: 36px; background: transparent; border-radius: 0; }
.brand-text { font-weight: 700; color: var(--accent); }
.alert-warn { color: var(--warn); }

/* ============================================================
   Matter detail workspace
   (these layout classes previously had no styling)
   ============================================================ */
.matter-dashboard { display: flex; flex-direction: column; gap: var(--s-5); }
.matter-dashboard > .section,
.matter-dashboard > .matter-operations { margin: 0; }

/* Page bar / header */
.matter-pagebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}
.matter-folder-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
  font-size: 22px; line-height: 1; flex-shrink: 0;
}
.matter-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* Top grid: hero (left) + finance snapshot (right) */
.matter-top-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
  align-items: stretch;
}
.matter-hero-card,
.matter-finance-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--s-5);
}
.matter-hero-card { display: flex; flex-direction: column; gap: var(--s-3); }
.matter-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.matter-title {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 650; line-height: 1.25; letter-spacing: -0.005em;
  margin: 0; color: var(--ink);
}
.matter-meta-row {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: var(--text-sm); color: var(--ink-soft);
  align-items: baseline;
}
.matter-meta-row > span { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.matter-meta-row a { font-weight: 600; }
.matter-hero-card .matter-meta-row + .matter-meta-row {
  padding-top: var(--s-3); border-top: 1px solid var(--line-faint);
}
.matter-hero-detail-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-faint);
}
.matter-hero-detail-item {
  min-height: 78px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: var(--s-3) var(--s-4);
  background: var(--sunken);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius);
}
.matter-hero-detail-item span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1.35;
}
.matter-hero-detail-item strong {
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}
.matter-hero-detail-item.detail-danger { background: var(--danger-soft); border-color: transparent; }
.matter-status-strip {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  border: 1px solid var(--line-faint);
  background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface));
}
.matter-status-strip div {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.matter-status-strip span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 650;
}
.matter-status-strip strong {
  color: var(--accent);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* Finance snapshot card */
.matter-finance-card { display: flex; flex-direction: column; gap: var(--s-2); }
.matter-progress-value {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 650; line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.matter-progress {
  height: 8px; border-radius: var(--radius-pill);
  background: var(--sunken); overflow: hidden;
}
.matter-progress > span {
  display: block; height: 100%; max-width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: inherit;
}
.matter-finance-card .col-6 strong {
  font-size: var(--text-md); font-variant-numeric: tabular-nums;
}

/* Milestone card (litigation) */
.milestone-card { display: flex; flex-direction: column; gap: var(--s-4); }
.nearest-deadline-alert {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  background: linear-gradient(120deg, var(--accent), var(--accent-hover));
  color: var(--on-accent);
  border-radius: var(--radius); padding: var(--s-4) var(--s-5);
}
.nearest-deadline-alert strong { font-size: var(--text-md); display: block; }
.nearest-deadline-alert .text-white-50 { color: rgba(255,255,255,.72) !important; }

.milestone-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.milestone-list { display: flex; flex-direction: column; gap: var(--s-2); }
.milestone-row {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
  background: var(--sunken);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius); padding: var(--s-3) var(--s-4);
}
.milestone-row > div:first-child { min-width: 150px; flex: 1 1 150px; }
.milestone-row strong { font-size: var(--text-sm); color: var(--ink); }
.milestone-timeline-item {
  background: var(--sunken);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius);
  padding: 0;
}
.milestone-timeline-item summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 64px;
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;
}
.milestone-timeline-item summary::-webkit-details-marker { display: none; }
.milestone-timeline-item[open] summary {
  border-bottom: 1px solid var(--line-faint);
}
.milestone-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--surface);
}
.milestone-dot.is-done {
  border-color: var(--success);
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-soft);
}
.milestone-summary-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.milestone-summary-text strong { font-size: var(--text-sm); color: var(--ink); }
.milestone-summary-text span { color: var(--muted); font-size: var(--text-sm); }
.milestone-summary-status {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 650;
  white-space: nowrap;
}
.milestone-timeline-item .milestone-set-form {
  padding: var(--s-3) var(--s-4);
}
.milestone-set-form {
  display: flex; align-items: center; gap: var(--s-2);
  flex: 2 1 320px; flex-wrap: wrap;
}
.milestone-set-form input[type="date"] { flex: 0 0 auto; width: auto; min-width: 140px; }
.milestone-set-form input:not([type="date"]) { flex: 1 1 140px; min-width: 120px; }
.milestone-set-form .btn { flex: 0 0 auto; }

/* Upcoming deadline rows */
.deadline-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.deadline-row.deadline-urgent {
  border-color: transparent; background: var(--danger-soft);
  border-left: 3px solid var(--danger);
}
.deadline-row .text-end span { font-variant-numeric: tabular-nums; font-weight: 600; }
.matter-empty-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
}
.matter-empty-state strong { color: var(--ink); font-size: var(--text-sm); }
.matter-empty-state span { color: var(--muted); font-size: var(--text-sm); }

/* Milestone change history */
.milestone-history { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.milestone-history-list { display: flex; flex-direction: column; gap: var(--s-2); }
.milestone-history-item {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line-faint);
  border-radius: var(--radius); background: var(--surface);
}
.milestone-history-note {
  margin-top: 4px; font-size: var(--text-sm); color: var(--ink-soft);
  background: var(--sunken); border-radius: var(--radius-sm); padding: 4px 8px;
}

/* Matter detail field grid */
.matter-detail-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.matter-detail-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-3) var(--s-4);
  background: var(--sunken);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius);
}
.matter-detail-item .muted { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; }
.matter-detail-item strong { font-size: var(--text-sm); color: var(--ink); word-break: break-word; }
.matter-detail-item.detail-danger { background: var(--danger-soft); border-color: transparent; }
.matter-detail-item.detail-danger strong { color: var(--danger); }

/* Operations tab shell */
.matter-operations {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.matter-tabs { padding: var(--s-3) var(--s-4) 0; gap: var(--s-1); }
.matter-tabs .nav-link {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 700;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 12px 14px;
}
.matter-tabs .nav-link:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.matter-tabs .nav-link.active {
  color: var(--ink);
  background: transparent;
  border-bottom-color: var(--highlight);
}
.matter-tabs .badge {
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.matter-tab-content { padding: var(--s-5); }
.matter-tab-content > .section { box-shadow: none; }

/* Executive case summary editors */
.summary-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.summary-editor-block { display: flex; flex-direction: column; gap: 6px; }
.summary-editor-block .form-label { margin-bottom: 0; }
.summary-editor-block .form-label strong { color: var(--ink); font-size: var(--text-sm); text-transform: none; letter-spacing: 0; }
.summary-editor-block .form-label .muted { font-weight: 500; text-transform: none; letter-spacing: 0; }
.rich-editor {
  min-height: 120px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: var(--text-sm); line-height: 1.55; color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
  overflow-wrap: anywhere;
}
.rich-editor:focus {
  outline: none; background: var(--surface);
  border-color: var(--accent); box-shadow: var(--focus-ring);
}
.rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--faint);
}

/* Next-hearing inline banner */
.nearest-hearing-alert {
  background: var(--info-soft); color: var(--ink-soft);
  border: 1px solid transparent; border-left: 3px solid var(--info);
  border-radius: var(--radius); padding: var(--s-3) var(--s-4);
  font-size: var(--text-sm);
}

/* Task kanban */
.kanban-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kanban-column {
  background: var(--sunken); border: 1px solid var(--line-faint);
  border-radius: var(--radius); padding: var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2); min-height: 120px;
}
.kanban-column h4 {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); margin: 0 0 var(--s-1);
}
.kanban-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--s-3);
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; gap: 4px;
}
.kanban-card strong { font-size: var(--text-sm); }
.kanban-card .meta-line { font-size: var(--text-xs); color: var(--muted); }
.kanban-card .k-prio { align-self: flex-start; }

/* Kanban column status accent + header count + empty drop-zone */
.kanban-column { border-top: 3px solid var(--line); }
.kanban-column[data-status="pending"]     { border-top-color: var(--muted); }
.kanban-column[data-status="in_progress"] { border-top-color: var(--info); }
.kanban-column[data-status="completed"]   { border-top-color: var(--success); }
.kanban-col-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 var(--s-1); }
.kanban-col-hd h4 { margin: 0; }
.kanban-col-hd .k-count {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line-faint);
  border-radius: 999px; padding: 0 8px; line-height: 18px; min-width: 22px; text-align: center;
}
.kanban-empty {
  flex: 1; min-height: 64px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; text-align: center;
  padding: var(--s-3); border: 1px dashed var(--line); border-radius: var(--radius-sm);
  color: var(--muted); font-size: var(--text-xs); background: transparent;
}
.kanban-empty a { font-weight: 600; }

/* Compact inline empty-state for detail-tab tables (timesheets, documents) */
.dap-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: var(--s-6) var(--s-4);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--sunken); color: var(--ink-soft);
}
.dap-empty svg { color: var(--muted); opacity: 0.85; margin-bottom: 2px; }
.dap-empty strong { color: var(--ink); font-size: var(--text-sm); }
.dap-empty span { color: var(--muted); font-size: var(--text-xs); max-width: 46ch; }
.dap-empty .btn, .dap-empty .dap-btn { margin-top: 6px; }
/* Compact variant for empty rows inside dense/secondary tables (no border/bg) */
.dap-empty.dap-empty-sm { min-height: 0; padding: 18px 12px; gap: 6px; border: none; background: transparent; }
.dap-empty.dap-empty-sm span { font-size: var(--text-sm); color: var(--muted); max-width: none; }
.dap-empty-ico { width: 22px; height: 22px; color: var(--muted); opacity: 0.5; }

/* Compact inline quick-add form (mirrors matter-dropzone, single-row) */
.matter-quickadd {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2);
  padding: var(--s-3); border: 1px solid var(--line-faint);
  border-radius: var(--radius); background: var(--sunken);
}
.matter-quickadd .qa-field { display: flex; flex-direction: column; gap: 2px; }
.matter-quickadd .qa-field > label { font-size: 11px; font-weight: 600; color: var(--muted); }
.matter-quickadd .qa-grow { flex: 1 1 200px; min-width: 160px; }
.matter-quickadd .qa-check { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; }

/* P&L waterfall — matter profit summary (Estimated Matter Profit Summary) */
.pnl-waterfall { display: flex; flex-direction: column; }
.pnl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 12px; }
.pnl-label { font-size: var(--text-sm); color: var(--ink-soft); }
.pnl-label small { color: var(--muted); font-weight: 400; }
.pnl-amt {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--ink); white-space: nowrap;
}
.pnl-amt.neg { color: var(--danger); }
.pnl-note { font-size: var(--text-xs); color: var(--muted); padding: 0 12px 4px 26px; }
.pnl-row.pnl-subtotal { border-top: 1px solid var(--line); margin-top: 2px; }
.pnl-row.pnl-subtotal .pnl-label,
.pnl-row.pnl-subtotal .pnl-amt { font-weight: 650; color: var(--ink); }
.pnl-row.pnl-total {
  margin-top: 8px; padding: 13px 14px; border-radius: var(--radius);
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 32%, transparent);
}
.pnl-row.pnl-total .pnl-label { font-weight: 700; color: var(--ink); font-size: var(--text-md); }
.pnl-row.pnl-total .pnl-amt { font-size: var(--text-2xl); color: var(--success); font-weight: 750; }
.pnl-row.pnl-total.is-loss { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 32%, transparent); }
.pnl-row.pnl-total.is-loss .pnl-amt { color: var(--danger); }
.pnl-foot { padding: 8px 12px 0; border-top: 1px dashed var(--line-faint); margin-top: 8px; }

/* Aside: related claim requests strip */
.pnl-aside {
  height: 100%; display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--sunken); border: 1px solid var(--line-faint);
  border-radius: var(--radius); padding: var(--s-4);
}
.pnl-aside-hd { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.pnl-claim { background: var(--surface); border: 1px solid var(--line-faint); border-radius: var(--radius-sm); padding: 10px 12px; }
.pnl-claim-top { display: flex; align-items: baseline; gap: 8px; }
.pnl-claim-top > .nm { font-size: var(--text-sm); color: var(--ink-soft); font-weight: 600; flex: 1; }
.pnl-claim-top > .amt { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: var(--text-lg); font-weight: 650; }
.pnl-claim-top > .tag { font-size: var(--text-xs); color: var(--muted); }
.pnl-claim-sub { font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }
.pnl-actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }

/* Document totals / summary panel (invoice, receipt, proposal, PV, claim forms) */
.dap-totals {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  width: 100%; max-width: 440px; margin-left: auto;
}
.dap-totals-hd {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); padding: 9px 16px; background: var(--sunken); border-bottom: 1px solid var(--line-faint);
}
.dap-totals-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 16px; }
.dap-totals-row > .lbl { font-size: var(--text-sm); color: var(--ink-soft); }
.dap-totals-row > .lbl small { color: var(--muted); }
.dap-totals-row > .amt { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.dap-totals-row.neg > .amt { color: var(--danger); }
.dap-totals-row.subtotal { border-top: 1px solid var(--line-faint); }
.dap-totals-row.subtotal > .lbl, .dap-totals-row.subtotal > .amt { font-weight: 650; color: var(--ink); }
.dap-totals-row.grand {
  border-top: 2px solid var(--line); background: var(--success-soft); padding: 12px 16px;
}
.dap-totals-row.grand > .lbl { font-weight: 700; color: var(--ink); font-size: var(--text-md); }
.dap-totals-row.grand > .amt { font-size: var(--text-xl); font-weight: 750; color: var(--success); }
.dap-totals-row.grand.is-zero > .amt { color: var(--ink-soft); }
/* Sticky form action bar (long document forms) */
.dap-formbar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
  margin-top: var(--s-4); padding: 12px 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--line-faint); border-radius: var(--radius);
}
.dap-formbar .spacer { margin-right: auto; }
.dap-formbar .bar-total { font-size: var(--text-sm); color: var(--ink-soft); }
.dap-formbar .bar-total strong { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: var(--text-lg); color: var(--ink); margin-left: 6px; }

/* Searchable select — combobox enhancement (global, vanilla) */
.dap-ss { position: relative; }
.dap-ss-native {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dap-ss-input { padding-right: 2rem; cursor: text; }
.dap-ss::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 0; height: 0;
  transform: translateY(-2px); border: 5px solid transparent; border-top-color: var(--muted);
  pointer-events: none;
}
.dap-ss.open::after { transform: translateY(-6px) rotate(180deg); }
.dap-ss-panel {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 264px; overflow-y: auto; display: none; padding: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md, 0 10px 28px rgba(6,22,74,0.14));
}
.dap-ss.open .dap-ss-panel { display: block; }
.dap-ss-opt {
  padding: 7px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm);
  color: var(--ink); cursor: pointer; line-height: 1.35;
}
.dap-ss-opt:hover, .dap-ss-opt.active { background: var(--sunken); }
.dap-ss-opt.is-selected { font-weight: 600; color: var(--accent); }
.dap-ss-none { padding: 8px 10px; color: var(--muted); font-size: var(--text-sm); }

/* In-app document viewer (receipts, matter docs, signed uploads) */
.dap-docviewer { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; }
.dap-docviewer[hidden] { display: none; }
.dap-docviewer-backdrop { position: absolute; inset: 0; background: rgba(6,22,74,0.55); backdrop-filter: blur(2px); }
.dap-docviewer-panel {
  position: relative; width: min(960px, 94vw); height: min(88vh, 920px);
  display: flex; flex-direction: column; background: var(--surface);
  border-radius: var(--radius); box-shadow: 0 24px 64px rgba(0,0,0,0.35); overflow: hidden;
}
.dap-docviewer-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--sunken);
}
.dap-docviewer-name { font-weight: 600; font-size: var(--text-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dap-docviewer-actions { display: flex; gap: 8px; flex: none; }
.dap-docviewer-body { flex: 1; min-height: 0; background: #2b2f3a; display: flex; align-items: center; justify-content: center; overflow: auto; }
.dap-docviewer-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dap-docviewer-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.dap-docviewer-body .dap-docviewer-fallback { color: #fff; text-align: center; padding: 40px; }
/* "View" affordance auto-added to upload links */
.dap-doc-view-btn {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; cursor: pointer;
  font-size: var(--text-xs); color: var(--accent); background: none; border: 0; padding: 0;
}
.dap-doc-view-btn:hover { text-decoration: underline; }
/* Nav count badge (approval queue) */
.dap-nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1; color: #fff;
  background: var(--highlight); border-radius: 999px;
}

/* Trust / closing mini cards */
.mini-report-card {
  display: flex; flex-direction: column; gap: 2px; height: 100%;
  padding: var(--s-4); background: var(--sunken);
  border: 1px solid var(--line-faint); border-radius: var(--radius);
}
.mini-report-card > span:first-child { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.mini-report-card > strong {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 650;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* Document order history chips */
.order-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; background: var(--sunken); color: var(--ink-soft); }
.order-history { margin-top: 4px; font-size: var(--text-xs); color: var(--muted); display: flex; flex-direction: column; gap: 2px; }

/* Matter financials KPIs already use .kpi; just ensure spacing */
.matter-financials .kpi .value { font-size: var(--text-xl); }

/* Responsive */
@media (max-width: 992px) {
  .matter-top-grid { grid-template-columns: 1fr; }
  .matter-hero-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matter-status-strip { grid-template-columns: 1fr; }
  .milestone-grid { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .kanban-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .matter-tab-content { padding: var(--s-4); }
  .milestone-row { flex-direction: column; align-items: stretch; }
  .milestone-timeline-item summary { grid-template-columns: auto minmax(0, 1fr); }
  .milestone-summary-status { grid-column: 2; white-space: normal; }
  .milestone-set-form { flex-direction: column; align-items: stretch; }
  .milestone-set-form input[type="date"],
  .milestone-set-form input:not([type="date"]),
  .milestone-set-form .btn { width: 100%; }
  .matter-hero-detail-grid { grid-template-columns: 1fr; }
  .matter-detail-grid { grid-template-columns: 1fr 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   UI/UX hardening (ui-ux-pro-max audit): a11y focus, submit
   feedback, mobile touch targets. System-wide, all pages.
   ───────────────────────────────────────────────────────────── */
/* §1 Accessibility — consistent branded focus ring for keyboard nav
   on the interactive elements not already covered (links, role=button,
   focusable chips, summary). Buttons/inputs/nav handled above. */
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible,
.dap-fchip:focus-visible,
.dap-cal-event:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

/* §8 Forms — submit loading spinner (paired with base.html submit guard) */
.dap-spin {
  display: inline-block; width: 0.85em; height: 0.85em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; vertical-align: -0.12em;
  animation: dap-spin 0.6s linear infinite;
}
@keyframes dap-spin { to { transform: rotate(360deg); } }
button[data-loading] { cursor: progress; opacity: 0.85; }

/* §2 Touch — primary actions + inputs reach the 44px target on phones
   (dense .btn-sm/.btn-link in tables intentionally excluded). */
@media (max-width: 768px) {
  .btn:not(.btn-sm):not(.btn-link),
  .form-control:not([type="hidden"]),
  .form-select {
    min-height: 44px;
  }
}