/* ==========================================================================
   Dashboard dark theme: deep navy background with soft glows, glass cards,
   bright charts, mouse-following 3D tilt and light, animated entrance.
   Active only while the Dashboard is open (body.theme-dark, set by views/dashboard.js).
   ========================================================================== */
body.theme-dark {
  --d-text: #e9f0fa;
  --d-muted: #93a7c4;
  --d-border: rgba(148, 178, 220, 0.16);
  --d-border-strong: rgba(148, 178, 220, 0.28);
  --d-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  --d-field: rgba(7, 21, 44, 0.75);
  --d-copper: #f0a36b;
  --d-blue: #60a5fa;
  background: #050f22;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Background: navy gradient, two soft light glows and a faint grid */
body.theme-dark .main {
  position: relative;
  color: var(--d-text);
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(240, 163, 107, 0.2), transparent 60%),
    radial-gradient(900px 760px at -12% 28%, rgba(59, 130, 246, 0.22), transparent 62%),
    radial-gradient(700px 500px at 60% 110%, rgba(45, 212, 191, 0.1), transparent 60%),
    linear-gradient(180deg, #0a1d3c 0%, #06132a 55%, #050f22 100%);
  background-attachment: fixed;
}
body.theme-dark .main::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(148, 178, 220, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 178, 220, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%);
}
body.theme-dark .content { position: relative; }

/* Top bar */
body.theme-dark .topbar { background: rgba(6, 19, 42, 0.72); border-bottom-color: var(--d-border); }
body.theme-dark .topbar-title strong { color: #fff; }
body.theme-dark .topbar-title .crumb { color: var(--d-muted); }
body.theme-dark .icon-btn { color: var(--d-muted); }
body.theme-dark .icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
body.theme-dark .count-badge { box-shadow: 0 0 0 2px #0a1d3c; }

/* Headings */
body.theme-dark .page-header h1 { color: #fff; text-shadow: 0 2px 24px rgba(96, 165, 250, 0.25); }
body.theme-dark .page-header p, body.theme-dark .muted { color: var(--d-muted); }
body.theme-dark .eyebrow { color: var(--d-copper); }
body.theme-dark .link-btn { color: #93c5fd; }

/* Glass surfaces */
body.theme-dark .period-bar,
body.theme-dark .card,
body.theme-dark .stat {
  background: var(--d-glass);
  border-color: var(--d-border);
  color: var(--d-text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.theme-dark .card-header { border-bottom-color: rgba(148, 178, 220, 0.1); }
body.theme-dark .card-header h2, body.theme-dark .card-header h3 { color: #fff; }

/* Filters */
body.theme-dark .chip { background: rgba(255, 255, 255, 0.05); border-color: var(--d-border); color: var(--d-text); }
body.theme-dark .chip:hover { border-color: var(--d-border-strong); background: rgba(255, 255, 255, 0.09); }
body.theme-dark .chip.active { background: linear-gradient(135deg, #f0a36b, #c27135); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(240, 163, 107, 0.35); }
body.theme-dark .period-bar .field { color: var(--d-muted); }
body.theme-dark .period-bar select, body.theme-dark .period-bar input { background: var(--d-field); border-color: var(--d-border); color: #fff; color-scheme: dark; }
body.theme-dark .period-bar select:focus, body.theme-dark .period-bar input:focus { border-color: var(--d-copper); box-shadow: 0 0 0 3px rgba(240, 163, 107, 0.25); }
body.theme-dark .period-bar option { background: #0b1d3a; color: #fff; }
body.theme-dark .segmented { background: rgba(255, 255, 255, 0.06); }
body.theme-dark .segmented button { color: var(--d-muted); }
body.theme-dark .segmented button.active { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: none; }

/* Stat cards */
body.theme-dark .stat-label { color: var(--d-muted); }
body.theme-dark .stat-value { color: #fff; font-size: 23px; text-shadow: 0 0 22px rgba(96, 165, 250, 0.28); }
body.theme-dark .stat-note { color: var(--d-muted); }
body.theme-dark .stat::after { box-shadow: 0 0 14px var(--accent); }
body.theme-dark .stat.tone-paid { --accent: #34d399; }
body.theme-dark .stat.tone-pending { --accent: #fbbf24; }
body.theme-dark .stat.tone-overdue { --accent: #f87171; }
body.theme-dark .stat.tone-draft { --accent: #94a3b8; }
body.theme-dark .stat.tone-sent { --accent: #38bdf8; }
body.theme-dark .stat.tone-accent { --accent: #f0a36b; }

/* Charts */
body.theme-dark .line-chart, body.theme-dark .donut { shape-rendering: geometricPrecision; }
body.theme-dark .line-chart .grid-line { stroke: rgba(148, 178, 220, 0.12); }
body.theme-dark .line-chart .axis-label { fill: var(--d-muted); }
body.theme-dark .line-chart .dot { fill: #081a36; }
body.theme-dark .line-chart .trend-line { filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.45)); }
body.theme-dark .line-chart .trend-area { opacity: 0.2; }
body.theme-dark .chart-legend { color: var(--d-muted); }
body.theme-dark .donut { width: 196px; height: 196px; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35)); }
body.theme-dark .donut circle:not(.segment) { stroke: rgba(255, 255, 255, 0.08); }
body.theme-dark .donut .segment { transition: stroke-width 0.2s ease, filter 0.2s ease; }
body.theme-dark .donut .segment:hover { stroke-width: 32; filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 255, 255, 0.35)); opacity: 1; }
body.theme-dark .donut-value { font: 800 24px Manrope, sans-serif; fill: #fff; }
body.theme-dark .donut-label { font: 600 11px Manrope, sans-serif; fill: var(--d-muted); }
body.theme-dark .donut-legend button, body.theme-dark .bar-row { color: var(--d-text); }
body.theme-dark .donut-legend button:hover, body.theme-dark button.bar-row:hover { background: rgba(255, 255, 255, 0.06); }
body.theme-dark .donut-legend i { box-shadow: 0 0 8px var(--swatch); }
body.theme-dark .donut-legend .mono, body.theme-dark .bar-value, body.theme-dark .aging-col .mono, body.theme-dark .rank-item .mono { color: #fff; }
body.theme-dark .bar-track { background: rgba(255, 255, 255, 0.07); }
body.theme-dark .bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--swatch) 55%, transparent), var(--swatch)); box-shadow: 0 0 12px color-mix(in srgb, var(--swatch) 60%, transparent); }
body.theme-dark .aging-col .aging-bar { background: linear-gradient(180deg, var(--swatch), color-mix(in srgb, var(--swatch) 55%, #06132a)); box-shadow: 0 0 18px color-mix(in srgb, var(--swatch) 45%, transparent); }
body.theme-dark .aging-col small { color: var(--d-muted); }
body.theme-dark .rank-item:hover { background: rgba(255, 255, 255, 0.05); }
body.theme-dark .rank-item strong { color: #fff; }
body.theme-dark .rank-item small, body.theme-dark .rank-item .rank { color: var(--d-muted); }
body.theme-dark .timeline small { color: var(--d-muted); }
body.theme-dark .timeline a { color: #bfdbfe; }

/* Latest invoices table */
body.theme-dark .table th { background: rgba(255, 255, 255, 0.035); border-bottom-color: var(--d-border); color: var(--d-muted); }
body.theme-dark .table td { border-bottom-color: rgba(148, 178, 220, 0.08); color: var(--d-text); }
body.theme-dark .table tbody tr:hover { background: rgba(96, 165, 250, 0.07); }
body.theme-dark .table .ref { color: #9cc7ff; }
body.theme-dark .table .strong, body.theme-dark .table .num { color: #fff; }
body.theme-dark .badge-draft { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
body.theme-dark .badge-sent { background: rgba(56, 189, 248, 0.15); color: #7dd3fc; }
body.theme-dark .badge-pending { background: rgba(251, 191, 36, 0.15); color: #fcd34d; }
body.theme-dark .badge-partially_paid { background: rgba(45, 212, 191, 0.15); color: #5eead4; }
body.theme-dark .badge-paid { background: rgba(52, 211, 153, 0.15); color: #6ee7b7; }
body.theme-dark .badge-overdue { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }
body.theme-dark .badge-cancelled { background: rgba(100, 116, 139, 0.2); color: #cbd5e1; }

/* ---------- Hover: lift, zoom, 3D tilt toward the mouse and a moving light ---------- */
@media (hover: hover) and (pointer: fine) {
  body.theme-dark .stat,
  body.theme-dark .chart-card {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)) scale(var(--zoom, 1));
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    will-change: transform;
  }
  body.theme-dark .stat.is-hover,
  body.theme-dark .chart-card.is-hover {
    --lift: -6px;
    z-index: 2;
    border-color: rgba(240, 163, 107, 0.5);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(240, 163, 107, 0.25), 0 0 46px rgba(59, 130, 246, 0.22);
    transition: transform 0.12s ease-out, box-shadow 0.35s ease, border-color 0.35s ease;
  }
  body.theme-dark .stat.is-hover { --zoom: 1.06; }
  body.theme-dark .chart-card.is-hover { --zoom: 1.015; }
  body.theme-dark .stat.is-hover .stat-value { text-shadow: 0 0 26px rgba(240, 163, 107, 0.55); }
  body.theme-dark .stat.is-hover .stat-label .icon { color: var(--d-copper); }

  /* Light that follows the mouse across the card */
  body.theme-dark .stat::before,
  body.theme-dark .chart-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.13), rgba(96, 165, 250, 0.06) 35%, transparent 60%);
  }
  body.theme-dark .stat.is-hover::before,
  body.theme-dark .chart-card.is-hover::before { opacity: 1; }
  body.theme-dark .chart-card { position: relative; }
  body.theme-dark .chart-card > * { position: relative; z-index: 1; }

  /* A light sweep across stat cards on hover */
  body.theme-dark .stat { overflow: hidden; }
  body.theme-dark .stat .stat-value::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
    transform: skewX(-18deg);
    opacity: 0;
  }
  body.theme-dark .stat.is-hover .stat-value::after { animation: dash-sweep 0.9s ease forwards; }
}

/* ---------- Entrance animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.theme-dark .stat,
  body.theme-dark .dash-grid > .card,
  body.theme-dark .period-bar {
    animation: dash-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: calc(var(--d, 0) * 55ms);
  }
  body.theme-dark .line-chart .trend-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: dash-draw 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * 220ms + 350ms);
  }
  body.theme-dark .line-chart .trend-area { animation: dash-fade 1.2s ease 0.8s backwards; }
  body.theme-dark .donut .segment {
    animation: dash-segment 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: calc(var(--i, 0) * 110ms + 250ms);
  }
}
@keyframes dash-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
@keyframes dash-draw { to { stroke-dashoffset: 0; } }
@keyframes dash-fade { from { opacity: 0; } }
@keyframes dash-segment { from { opacity: 0; stroke-width: 4; } }
@keyframes dash-sweep { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }

body.theme-dark .stat .stat-value { position: relative; }

/* ==========================================================================
   App-wide dark colours. Redefining the design tokens restyles every component
   that uses them; the rules after this block handle hard-coded colours.
   ========================================================================== */
body.theme-dark {
  --ink: #e9f0fa;
  --ink-2: #c6d3e6;
  --muted: #93a7c4;
  --line: rgba(148, 178, 220, 0.18);
  --line-2: rgba(148, 178, 220, 0.1);
  --bg: #050f22;
  --surface: #0f213f;
  --surface-2: #132a4a;
  --grey-soft: rgba(255, 255, 255, 0.07);
  --copper: #e08a4f;
  --copper-600: #f0a36b;
  --copper-soft: rgba(240, 163, 107, 0.18);
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.15);
  --blue: #60a5fa;
  --blue-soft: rgba(56, 189, 248, 0.14);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.15);
  --teal: #2dd4bf;
  --teal-soft: rgba(45, 212, 191, 0.15);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.16);
  --grey: #cbd5e1;
  --slate: #cbd5e1;
  --slate-soft: rgba(100, 116, 139, 0.22);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.55);
  color: var(--ink);
}

/* Sidebar: a shade deeper than the page, with a glass edge */
body.theme-dark .sidebar { background: rgba(4, 12, 28, 0.92); border-right: 1px solid var(--d-border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.theme-dark .sidebar .nav-link { color: #aebfd8; }
body.theme-dark .sidebar .nav-link.active { background: linear-gradient(135deg, rgba(240, 163, 107, 0.22), rgba(96, 165, 250, 0.14)); color: #fff; box-shadow: inset 0 0 0 1px rgba(240, 163, 107, 0.35), 0 6px 20px rgba(0, 0, 0, 0.3); }
body.theme-dark .sidebar .nav-link.active .icon { color: var(--d-copper); }
body.theme-dark .sidebar-user, body.theme-dark .sidebar-user strong { color: #fff; }

/* Buttons */
body.theme-dark .btn-primary { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35); }
body.theme-dark .btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #60a5fa, #2563eb); }
body.theme-dark .btn-accent { background: linear-gradient(135deg, #f0a36b, #c27135); box-shadow: 0 6px 18px rgba(240, 163, 107, 0.3); }
body.theme-dark .btn-accent:hover:not(:disabled) { background: linear-gradient(135deg, #f5b784, #d47f40); }
body.theme-dark .btn-secondary { background: rgba(255, 255, 255, 0.06); border-color: var(--d-border); color: var(--ink); }
body.theme-dark .btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.11); border-color: var(--d-border-strong); }
body.theme-dark .btn-ghost { color: var(--ink-2); }
body.theme-dark .btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); }
body.theme-dark .btn-danger { background: linear-gradient(135deg, #ef4444, #b91c1c); }
body.theme-dark .btn.is-busy::after, body.theme-dark .btn-secondary.is-busy::after { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; }

/* Form fields everywhere */
body.theme-dark .field input,
body.theme-dark .field select,
body.theme-dark .field textarea,
body.theme-dark .input,
body.theme-dark .items-table input,
body.theme-dark .items-table textarea,
body.theme-dark .perm-row select,
body.theme-dark .user-controls select,
body.theme-dark .pager select {
  background: var(--d-field);
  border-color: var(--d-border);
  color: #fff;
  color-scheme: dark;
}
body.theme-dark .field input::placeholder, body.theme-dark .field textarea::placeholder, body.theme-dark .items-table input::placeholder, body.theme-dark .items-table textarea::placeholder, body.theme-dark .recipient-picker input::placeholder { color: #6f86a8; }
body.theme-dark .field input:focus, body.theme-dark .field select:focus, body.theme-dark .field textarea:focus, body.theme-dark .input:focus,
body.theme-dark .items-table input:focus, body.theme-dark .items-table textarea:focus { border-color: var(--d-copper); box-shadow: 0 0 0 3px rgba(240, 163, 107, 0.22); }
body.theme-dark .field input:disabled, body.theme-dark .field select:disabled, body.theme-dark .items-table input[readonly] { background: rgba(255, 255, 255, 0.03); color: var(--muted); }
body.theme-dark option { background: #0b1d3a; color: #fff; }
body.theme-dark .field { color: var(--ink-2); }
body.theme-dark input[type='checkbox'], body.theme-dark input[type='radio'] { accent-color: #f0a36b; }

/* Glass surfaces on every page */
body.theme-dark .filters { background: rgba(255, 255, 255, 0.03); border-bottom-color: var(--line-2); }
body.theme-dark .toolbar { border-bottom-color: var(--line-2); }
body.theme-dark .table-footer { color: var(--muted); }
body.theme-dark .tabs { border-bottom-color: var(--line); }
body.theme-dark .tab.active { color: #fff; border-bottom-color: var(--d-copper); }
body.theme-dark .view-toggle { background: rgba(255, 255, 255, 0.06); }
body.theme-dark .view-toggle button.active { background: rgba(255, 255, 255, 0.14); color: #fff; }
body.theme-dark .form-section { border-bottom-color: var(--line-2); }
body.theme-dark .form-section > h3 .step { background: linear-gradient(135deg, #f0a36b, #c27135); }
body.theme-dark .form-section > h3, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4 { color: #fff; }
body.theme-dark .state-empty h3 { color: #fff; }
body.theme-dark .state-error { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.35); }
body.theme-dark .state-error p { color: var(--ink-2); }
body.theme-dark .spinner { border-color: rgba(255, 255, 255, 0.12); border-top-color: var(--d-copper); }

/* Tables */
body.theme-dark .table tbody tr:hover { background: rgba(96, 165, 250, 0.07); }
body.theme-dark .table tfoot td { background: rgba(255, 255, 255, 0.05); color: #fff; }
body.theme-dark .table .ref { color: #9cc7ff; }

/* Menus, dialogs, drawers: solid (not see-through) so they read clearly over the page */
body.theme-dark .menu { background: #0f213f; border-color: var(--d-border-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(96, 165, 250, 0.08); }
body.theme-dark .menu-item:hover, body.theme-dark .menu-item:focus { background: rgba(255, 255, 255, 0.07); }
body.theme-dark .modal, body.theme-dark .drawer { background: linear-gradient(180deg, #11264a, #0c1c38); border: 1px solid var(--d-border); color: var(--ink); }
body.theme-dark .layer.open { background: rgba(2, 8, 20, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.theme-dark .dialog-header, body.theme-dark .dialog-footer { border-color: var(--line-2); }
body.theme-dark .toast { background: #0f213f; border: 1px solid var(--d-border); border-left: 4px solid var(--green); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
body.theme-dark .toast-error { border-left-color: var(--red); }
body.theme-dark .toast-info { border-left-color: var(--blue); }
body.theme-dark .suggestions { background: #0f213f; border-color: var(--d-border-strong); }
body.theme-dark .suggestions button { color: var(--ink); }
body.theme-dark .suggestions button:hover, body.theme-dark .suggestions button.active { background: rgba(255, 255, 255, 0.07); }

/* Invoice form and detail page */
body.theme-dark .summary-row { border-bottom-color: var(--line-2); }
body.theme-dark .summary-net { background: linear-gradient(135deg, #1d4ed8, #0b2a66); box-shadow: 0 10px 30px rgba(29, 78, 216, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
body.theme-dark .selected-client { background: rgba(255, 255, 255, 0.05); border-color: var(--d-border); }
body.theme-dark .preview-stage { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); }
body.theme-dark .preview-stage > .muted { color: var(--muted); }
body.theme-dark .invoice-doc .muted { color: var(--doc-muted); }

/* Staff directory and profile */
body.theme-dark .staff-card { background: var(--d-glass); border-color: var(--d-border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
body.theme-dark .staff-card-top h3, body.theme-dark .staff-total strong, body.theme-dark .staff-counts strong { color: #fff; }
body.theme-dark .staff-counts { border-top-color: var(--line-2); }
body.theme-dark .hover-panel { background: #081a36; border: 1px solid var(--d-border-strong); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(96, 165, 250, 0.15); }
body.theme-dark .hover-panel::after { border-top-color: #081a36; }
body.theme-dark .mini-stat { background: var(--d-glass); border-color: var(--d-border); }
body.theme-dark .mini-stat strong { color: #fff; }
body.theme-dark .admin-box { background: rgba(240, 163, 107, 0.07); border-color: rgba(240, 163, 107, 0.45); }
body.theme-dark .perm-row { background: rgba(255, 255, 255, 0.04); border-color: var(--line-2); }
body.theme-dark .avatar { background: linear-gradient(135deg, #1e3a66, #28508a); color: #dbeafe; }

/* Messages */
body.theme-dark .message-list { border-right-color: var(--line); }
body.theme-dark .message-item { border-bottom-color: var(--line-2); }
body.theme-dark .message-item:hover { background: rgba(255, 255, 255, 0.04); }
body.theme-dark .message-item.active { background: rgba(96, 165, 250, 0.12); }
body.theme-dark .bubble-content { background: rgba(255, 255, 255, 0.05); border-color: var(--line); }
body.theme-dark .bubble.mine .bubble-content { background: rgba(59, 130, 246, 0.14); border-color: rgba(96, 165, 250, 0.3); }
body.theme-dark .bubble-meta strong { color: #fff; }
body.theme-dark .thread-header, body.theme-dark .reply-box { border-color: var(--line-2); }
body.theme-dark .recipient-picker { background: var(--d-field); border-color: var(--d-border); }
body.theme-dark .recipient-picker input { background: transparent; color: #fff; }
body.theme-dark .token { background: rgba(96, 165, 250, 0.18); color: #dbeafe; }

/* Notifications, audit, settings */
body.theme-dark .notice { border-bottom-color: var(--line-2); }
body.theme-dark .notice:hover { background: rgba(255, 255, 255, 0.04); }
body.theme-dark .notice.unread { background: rgba(240, 163, 107, 0.05); }
body.theme-dark .notice-title { color: #fff; }
body.theme-dark .image-slot { background: rgba(255, 255, 255, 0.03); border-color: var(--d-border); }
body.theme-dark .image-slot .preview { background: rgba(255, 255, 255, 0.92); }
body.theme-dark .image-slot strong { color: #fff; }

/* 3D tilt and light also on staff cards and the small profile figures */
@media (hover: hover) and (pointer: fine) {
  body.theme-dark .staff-card,
  body.theme-dark .mini-stat {
    position: relative;
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)) scale(var(--zoom, 1));
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  }
  body.theme-dark .staff-card:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)) scale(var(--zoom, 1)); }
  body.theme-dark .staff-card.is-hover,
  body.theme-dark .mini-stat.is-hover {
    --lift: -6px;
    --zoom: 1.04;
    z-index: 5;
    border-color: rgba(240, 163, 107, 0.5);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(240, 163, 107, 0.25), 0 0 46px rgba(59, 130, 246, 0.22);
    transition: transform 0.12s ease-out, box-shadow 0.35s ease, border-color 0.35s ease;
  }
  body.theme-dark .staff-card::before,
  body.theme-dark .mini-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), rgba(96, 165, 250, 0.05) 35%, transparent 60%);
  }
  body.theme-dark .staff-card.is-hover::before,
  body.theme-dark .mini-stat.is-hover::before { opacity: 1; }
}

/* Pages glide in as they open */
@media (prefers-reduced-motion: no-preference) {
  body.theme-dark .content > .card,
  body.theme-dark .content > .section,
  body.theme-dark .content > .split,
  body.theme-dark .content > .invoice-form-layout,
  body.theme-dark .content > .invoice-detail-layout,
  body.theme-dark .content > .stack,
  body.theme-dark .staff-card {
    animation: dash-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: calc(var(--d, 0) * 55ms);
  }
  body.theme-dark .content > .page-header { animation: dash-fade 0.6s ease backwards; }
}

/* The invoice document is white paper: keep its own colours inside the dark app. */
body.theme-dark .invoice-doc h2 { color: var(--doc-accent); }
body.theme-dark .invoice-doc .doc-company-name, body.theme-dark .invoice-doc .doc-title { color: var(--doc-navy); }