/* ============================================================================
   Kizuna — application stylesheet (extracted from base.html, verbatim order)
   Sections: Tokens · Typography · Components · Layout · Dark mode · A11y
   Keep cascade order identical to the original inline <style>.
   ============================================================================ */

/* ---- Tokens (brand) — Kizuna Logic indigo/cyan system ---- */
:root {
  --kz:#4F46E5; --kz2:#2563EB; --accent:#06B6D4;
  --bs-body-font-family:'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body {
  background:#F8FAFC;
  font-family:var(--bs-body-font-family);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  letter-spacing:.005em; line-height:1.55;
}
/* GoDaddy-inspired typography (GD Sherpa -> Plus Jakarta Sans):
   confident, tightly-tracked headings + semibold UI text. Colours & layout unchanged. */
h1,h2,h3,h4,h5,h6,.page-title { font-weight:700; letter-spacing:-.018em; line-height:1.2; }
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 { letter-spacing:-.025em; }
.btn { font-weight:600; letter-spacing:.005em; }
.form-label { font-weight:600; }
.badge { font-weight:600; letter-spacing:.02em; }
.table thead th { font-weight:600; }
.navlink { letter-spacing:.005em; }
.lead { font-weight:400; }

/* ============ Phase 0 — design system tokens & primitives ============ */
:root{
  --radius:16px; --radius-sm:12px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05), 0 2px 8px -2px rgba(15,23,42,.07);
  --shadow:0 10px 26px -12px rgba(15,23,42,.20); --shadow-lg:0 26px 52px -18px rgba(15,23,42,.30);
  --border:#e7ebf3; --muted:#64748B; --ink:#0F172A;
  /* KPI accent set — the SIX colours a stat-card icon may use, beside the three
     brand tokens (--kz, --kz2, --accent) the dashboards already use.
     ⚠ These are not new colours. Every one is a value ALREADY in the product; this
     only gives them names so ten ad-hoc hex literals stop drifting. The owner asked
     specifically not to change the product's colouring, so four near-duplicates
     collapse onto their nearest sibling (#b8860b->ochre, #1d6fb8->blue,
     #566 and #7d8590 -> slate) and nothing else moves at all. */
  --acc-teal:#157a6e; --acc-purple:#6a1b9a; --acc-clay:#c1503a;
  --acc-ochre:#9a6a16; --acc-blue:#1565a6; --acc-slate:#64748b;
  --ok:#157a5b; --ok-bg:#e6f6ef; --warn:#9a6a16; --warn-bg:#fbf1dc;
  --bad:#c4362f; --bad-bg:#fdeceb; --info:#1565a6; --info-bg:#e8f1fb; --mut-bg:#eef1f5;

  /* ── WS-1 scales (2026-07-23) — one vocabulary for spacing, type, motion, elevation.
     ADDITIVE: existing rules keep their hard-coded px until they are touched; new work
     and refactors use these so the product stops drifting a pixel at a time. Values
     chosen to MATCH what is already common in the codebase, not to restyle it. */
  /* 8px spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:44px;
  /* type scale (rem) + line-heights */
  --fs-xs:.74rem; --fs-sm:.84rem; --fs-base:.94rem; --fs-md:1.02rem;
  --fs-lg:1.22rem; --fs-xl:1.55rem; --fs-2xl:2rem;
  --lh-tight:1.2; --lh-snug:1.35; --lh-normal:1.55;
  /* motion — every transition/animation should reference these */
  --dur-fast:.12s; --dur-base:.18s; --dur-slow:.32s;
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  /* elevation ladder: rest -> hover -> overlay (aliases onto the shadows above) */
  --elev-1:var(--shadow-sm); --elev-2:var(--shadow); --elev-3:var(--shadow-lg);
}

/* ⚠ Reduced-motion is a HARD contract for everything WS-6 adds. Any new transition or
   animation must be neutralised here, or it ships an accessibility regression. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}
/* surfaces */
.card{ border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card:hover{ box-shadow:var(--shadow); transition:box-shadow .18s ease; }
.btn{ border-radius:var(--radius-sm); font-weight:600; }
.btn-kz{ box-shadow:0 8px 20px -10px rgba(79,70,229,.6); transition:transform .14s ease, box-shadow .2s ease, background-position .4s ease; }
.btn-kz:hover{ transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(79,70,229,.7); }
.form-control,.form-select,.input-group-text{ border-radius:var(--radius-sm); border-color:var(--border); }
.form-control:focus,.form-select:focus{ border-color:var(--kz); box-shadow:0 0 0 4px rgba(79,70,229,.15); }
/* page header primitive */
.page-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.page-header .ph-title{ display:flex; align-items:center; gap:10px; margin:0; }
/* stat-card primitive (dashboards) */
.stat-card{ border:1px solid var(--border); border-radius:var(--radius); background:#fff; padding:15px 17px; box-shadow:var(--shadow-sm); display:flex; gap:13px; align-items:flex-start; height:100%; position:relative; overflow:hidden; transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease; }
.stat-card::after{ content:""; position:absolute; right:-18px; top:-18px; width:92px; height:92px; border-radius:50%; background:radial-gradient(circle, rgba(79,70,229,.12), transparent 70%); pointer-events:none; }
.stat-card .ic{ width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex:0 0 40px;color:#fff; }
/* let the text column shrink so a long crore-scale value wraps instead of being
   clipped by the card's overflow:hidden (flex children default to min-width:auto). */
.stat-card > :not(.ic){ min-width:0; }
.stat-card .l{ font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.stat-card .v{ font-size:1.15rem; font-weight:700; line-height:1.22; color:var(--ink); overflow-wrap:anywhere; letter-spacing:-.01em; }
.stat-card .d{ font-size:.76rem; font-weight:600; color:var(--muted); }
.stat-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--kz2); }
.page-hero{ position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--border); background:linear-gradient(135deg, rgba(79,70,229,.08), rgba(6,182,212,.06)); box-shadow:var(--shadow-sm); }
.page-hero::after{ content:""; position:absolute; inset:auto -8% -40% auto; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(79,70,229,.16), transparent 70%); pointer-events:none; }
.hero-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#fff; color:var(--kz); font-size:.78rem; font-weight:700; letter-spacing:.03em; border:1px solid rgba(79,70,229,.16); box-shadow:0 8px 18px -12px rgba(79,70,229,.35); }
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.section-card .section-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.quick-link{ display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--ink); font-weight:600; background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(248,250,252,.95)); transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.quick-link:hover{ transform:translateY(-1px); border-color:var(--kz2); box-shadow:0 10px 20px -14px rgba(79,70,229,.35); color:var(--kz); text-decoration:none; }
.quick-link .bi{ color:var(--kz2); }
.topbar__title{ display:flex; align-items:center; gap:10px; min-width:0; }
.topbar__icon{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(79,70,229,.16), rgba(6,182,212,.16)); color:var(--kz); border:1px solid rgba(79,70,229,.16); }
.topbar__copy{ min-width:0; }
.topbar__eyebrow{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); line-height:1; margin-bottom:2px; }
.topbar__label{ font-weight:700; color:var(--ink); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* (Legacy .auth-* split-screen styles removed — all auth pages now use auth.css .kz-auth) */

/* ===================== Account dropdown menu ===================== */
.kz-usermenu{ min-width:264px; border:1px solid var(--border); border-radius:16px; padding:7px; box-shadow:var(--shadow-lg); margin-top:8px; }
.kz-um-head{ display:flex; align-items:center; gap:12px; padding:9px 11px 12px; margin-bottom:4px; border-bottom:1px solid var(--border); }
.kz-um-head .avatar{ width:42px; height:42px; font-size:1rem; flex:0 0 42px; }
.kz-um-id{ min-width:0; }
.kz-um-name{ font-weight:700; font-size:.96rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kz-um-sub{ color:var(--muted); font-size:.79rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kz-usermenu .dropdown-item{ display:flex; align-items:center; gap:11px; border-radius:11px; padding:9px 12px; font-weight:500; font-size:.9rem; color:var(--ink); }
.kz-usermenu .dropdown-item .bi{ font-size:1.05rem; width:18px; text-align:center; color:var(--muted); }
.kz-usermenu .dropdown-item:hover, .kz-usermenu .dropdown-item:focus{ background:rgba(79,70,229,.08); color:var(--kz); }
.kz-usermenu .dropdown-item:hover .bi, .kz-usermenu .dropdown-item:focus .bi{ color:var(--kz); }
.kz-usermenu .dropdown-item.kz-um-out{ color:#dc2626; }
.kz-usermenu .dropdown-item.kz-um-out:hover{ background:rgba(220,38,38,.09); color:#dc2626; }
.kz-usermenu .dropdown-item.kz-um-out:hover .bi{ color:#dc2626; }
.kz-usermenu hr.dropdown-divider{ margin:5px 6px; border-color:var(--border); }
html[data-theme="dark"] .kz-usermenu{ background:#1E293B; border-color:#334155; }
html[data-theme="dark"] .kz-um-head{ border-bottom-color:#334155; }
html[data-theme="dark"] .kz-usermenu .dropdown-item{ color:#E2E8F0; }
html[data-theme="dark"] .kz-usermenu .dropdown-item:hover, html[data-theme="dark"] .kz-usermenu .dropdown-item:focus{ background:#243246; color:#A5B4FC; }
html[data-theme="dark"] .kz-usermenu .dropdown-item:hover .bi{ color:#A5B4FC; }

/* clickable stat cards (drill into the data) */
a.stat-link{ display:block; height:100%; text-decoration:none; color:inherit; }
a.stat-link:hover .stat-card{ box-shadow:0 6px 18px rgba(13,59,102,.16); transform:translateY(-1px); border-color:var(--kz); }
a.stat-link:hover .stat-card .v{ text-decoration:underline; }
a.stat-link .stat-card{ transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease; }
/* status badges */
.badge-status{ display:inline-block; font-weight:600; font-size:.72rem; padding:.3em .6em; border-radius:999px; letter-spacing:.01em; line-height:1.4; }
.bs-ok{background:var(--ok-bg);color:var(--ok);} .bs-warn{background:var(--warn-bg);color:var(--warn);}
.bs-bad{background:var(--bad-bg);color:var(--bad);} .bs-info{background:var(--info-bg);color:var(--info);}
.bs-mut{background:var(--mut-bg);color:#566;}
/* empty state */
.empty-state{ text-align:center; padding:44px 20px; color:var(--muted); }
.empty-state .es-ic{ font-size:2.6rem; color:#c4cfdc; line-height:1; }
.empty-state h6{ color:var(--ink); margin:12px 0 4px; font-weight:700; }
/* dashboard components: KPI trend chip, sparkline, segment bar */
.kz-delta{ display:inline-flex; align-items:center; gap:1px; font-size:.7rem; font-weight:700; padding:.1em .42em; border-radius:999px; vertical-align:middle; margin-left:5px; letter-spacing:.01em; line-height:1.3; }
.kz-delta .bi{ font-size:.72rem; }
.kz-delta.up{ background:var(--ok-bg); color:var(--ok); }
.kz-delta.down{ background:var(--bad-bg); color:var(--bad); }
.kz-delta.flat{ background:var(--mut-bg); color:#566; }
.kz-spark{ display:block; width:100%; height:32px; margin-top:9px; }
.kz-segbar{ display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--mut-bg); }
.kz-segbar > span{ display:block; height:100%; min-width:2px; }
.kz-seglegend{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:11px; }
.kz-seglegend .it{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--muted); }
.kz-seglegend .dot{ width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
html[data-theme="dark"] .kz-delta.flat{ background:#334155; color:#c3ccd8; }
html[data-theme="dark"] .kz-segbar{ background:#334155; }
html[data-theme="dark"] .kz-seglegend .it{ color:#9aa7b8; }
/* drag-to-scroll: a wide table/grid the mouse can grab and slide (ux.js adds the classes) */
.kz-dragscroll{ cursor:grab; }
.kz-dragscroll.kz-dragging{ cursor:grabbing; user-select:none; }
/* single Edit toggle for grids: .ge-view shows normally, .ge-edit shows in edit mode.
   The [data-grid-edit] button (ux.js) toggles .grid-editing on the grid + enables inputs. */
.ge-edit{ display:none; }
.grid-editing .ge-view{ display:none; }
.grid-editing .ge-edit{ display:block; width:100%; }
.ge-del{ display:none; }
.grid-editing .ge-del{ display:inline-flex; }
.grid-editing .ge-col{ display:table-cell; }        /* a column that only exists in edit mode */
.ge-col{ display:none; }
/* amount cells are locked (read-only) until Edit: they read as plain text — no box, no
   caret — so the whole grid looks like a report until the user opts into editing.
   Specific enough to beat `.tb-tbl .tb-m .form-control` (0,0,3,0). */
.tb-tbl .tb-m .tb-amt[readonly], .tb-tbl .tb-m .grid-input[readonly],
.tb-amt[readonly], .grid-input[readonly]{
  background:transparent !important; border-color:transparent !important; box-shadow:none !important; cursor:default;
}
/* A locked (readonly) amount cell must show NO focus affordance — no indigo ring AND no
   blue focus outline — until the grid's Edit button unlocks it. Editable cells keep both. */
.tb-amt[readonly]:focus, .grid-input[readonly]:focus,
.tb-tbl .tb-m .tb-amt[readonly]:focus, .tb-tbl .tb-m .grid-input[readonly]:focus{ outline:none !important; box-shadow:none !important; }
html[data-theme="dark"] .tb-tbl .tb-m .tb-amt[readonly],
html[data-theme="dark"] .tb-tbl .tb-m .grid-input[readonly]{ background:transparent !important; border-color:transparent !important; }
/* tables */
table.table-sort th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
table.table-sort th.sortable .si{ opacity:.35; font-size:.68rem; margin-left:2px; }
table.table-sort th.sortable.asc .si-up, table.table-sort th.sortable.desc .si-dn{ opacity:1; }
table.table-sort th.sortable.asc .si-dn, table.table-sort th.sortable.desc .si-up{ display:none; }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
/* sticky form action bar */
.form-actionbar{ position:sticky; bottom:0; background:#fff; border-top:1px solid var(--border); padding:12px 0 2px; margin-top:6px; }
html[data-theme="dark"] .card{ border-color:#334155; }
html[data-theme="dark"] .form-actionbar{ background:#1E293B; border-top-color:#334155; }
html[data-theme="dark"] .stat-card{ background:#1E293B; border-color:#334155; }
html[data-theme="dark"] .stat-card .v{ color:#E2E8F0; }
html[data-theme="dark"] .empty-state h6{ color:#E2E8F0; }
html[data-theme="dark"] .empty-state .es-ic{ color:#56657a; }
html[data-theme="dark"] .page-hero{ background:linear-gradient(135deg, rgba(79,70,229,.22), rgba(6,182,212,.14)); border-color:#334155; }
html[data-theme="dark"] .hero-chip{ background:#243246; color:#C7D2FE; border-color:#334155; }
html[data-theme="dark"] .quick-link{ background:linear-gradient(180deg, rgba(30,41,59,.82), rgba(15,23,42,.95)); color:#E2E8F0; border-color:#334155; }
html[data-theme="dark"] .quick-link:hover{ border-color:var(--kz2); }
html[data-theme="dark"] .topbar__icon{ background:linear-gradient(135deg, rgba(79,70,229,.26), rgba(6,182,212,.2)); border-color:#334155; color:#C7D2FE; }
html[data-theme="dark"] .topbar__label{ color:#E2E8F0; }
/* Bootstrap fixed-light utilities don't auto-adapt — make them dark-aware (covers all module/grid pages) */
html[data-theme="dark"] .table-light{ --bs-table-bg:#243246; --bs-table-color:#E2E8F0; --bs-table-border-color:#334155; }
html[data-theme="dark"] .table-secondary{ --bs-table-bg:#262f3f; --bs-table-color:#E2E8F0; --bs-table-border-color:#334155; }
html[data-theme="dark"] .table-active{ --bs-table-bg:#243246; --bs-table-color:#E2E8F0; }
html[data-theme="dark"] .bg-light:not(.badge){ background-color:#1E293B !important; }
html[data-theme="dark"] .bg-white:not(.badge){ background-color:#1E293B !important; color:#E2E8F0; }
/* status badges use light/coloured bg (bg-warning/info/light) — keep their text dark for contrast */
html[data-theme="dark"] .badge.text-dark{ color:#1f2733 !important; }
html[data-theme="dark"] .border{ border-color:#334155 !important; }
html[data-theme="dark"] .list-group-item{ background:#1E293B; color:#E2E8F0; border-color:#334155; }
html[data-theme="dark"] hr{ border-color:#334155; }
/* Inline brand-navy text (topbar tenant name, auth brand marks) is invisible on dark — force it light.
   Overrides inline style="color:var(--kz)" which CSS can't otherwise beat. */
html[data-theme="dark"] [style*="color:var(--kz)"]{ color:#A5B4FC !important; }
html[data-theme="dark"] .topbar .fw-semibold{ color:#C7D2FE !important; }
html[data-theme="dark"] .stat-card .l, html[data-theme="dark"] .stat-card .d{ color:#9aa7b8; }
/* avatar (initials) */
.avatar{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:linear-gradient(135deg,var(--kz),var(--kz2)); color:#fff; font-weight:700; line-height:1;
  width:30px; height:30px; font-size:.78rem; letter-spacing:.02em; flex:0 0 auto; }
.avatar.lg{ width:64px; height:64px; font-size:1.4rem; }
.sidebar { width:250px; height:100vh; background:linear-gradient(185deg,#312E81 0%,#1E1B4B 60%,#0F172A 100%); position:fixed; top:0; left:0; overflow-y:auto; overscroll-behavior:contain; z-index:1040; transition:transform .25s ease; border-right:1px solid rgba(255,255,255,.06); }
/* slim scrollbar for the sidebar */
.sidebar::-webkit-scrollbar { width:7px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); border-radius:4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.38); }
.sidebar .brand { color:#fff; font-weight:700; padding:16px 20px; font-size:1.15rem; letter-spacing:.5px; border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar .grp { color:#a5b4fc; font-size:.7rem; text-transform:uppercase; letter-spacing:1px; padding:14px 20px 5px; opacity:.85; }
.sidebar a.navlink { display:flex; align-items:center; gap:11px; color:#cbd5f5; padding:9px 16px; margin:1px 10px; border-radius:11px; text-decoration:none; font-size:.92rem; transition:background .14s ease, color .14s ease; }
.sidebar a.navlink:hover { background:rgba(255,255,255,.09); color:#fff; }
.sidebar a.navlink.active { background:linear-gradient(100deg, rgba(79,70,229,.65), rgba(6,182,212,.45)); color:#fff; box-shadow:0 6px 16px -8px rgba(6,182,212,.6); }
/* Collapsible nav groups (Business Tools + services) */
.sidebar .nav-collapse { margin:1px 10px; }
.sidebar .nav-collapse > summary.grp-toggle { display:flex; align-items:center; gap:11px; color:#cbd5f5; padding:9px 16px; border-radius:11px; font-size:.92rem; cursor:pointer; list-style:none; user-select:none; transition:background .14s ease, color .14s ease; }
.sidebar .nav-collapse > summary.grp-toggle::-webkit-details-marker { display:none; }
.sidebar .nav-collapse > summary.grp-toggle:hover { background:rgba(255,255,255,.09); color:#fff; }
.sidebar .nav-collapse > summary.grp-toggle .chev { margin-left:auto; font-size:.8rem; transition:transform .18s ease; opacity:.75; }
.sidebar .nav-collapse[open] > summary.grp-toggle .chev { transform:rotate(180deg); }
.sidebar .nav-collapse[open] > summary.grp-toggle { color:#fff; }
.sidebar .nav-sub { margin:2px 0 4px; padding-left:8px; border-left:2px solid rgba(255,255,255,.10); }
.sidebar .nav-sub a.navlink { margin:1px 4px; font-size:.88rem; }
.sidebar a.navlink .ext, .sidebar summary .ext { margin-left:auto; font-size:.72rem; opacity:.6; }
.sidebar a.navlink .ext { margin-left:6px; }
.content { margin-left:250px; }
.topbar { position:sticky; top:0; z-index:1030; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; padding:11px 24px; }
.page-wrap { padding:24px 30px; }
.page-title { font-weight:700; color:var(--ink); }
.card .page-title { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.card .page-title .small { margin:0; }
.card { border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.kpi { border-radius:var(--radius); color:#fff; }
.table thead th { background:#eef2ff; color:#4338ca; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.btn-kz { background:linear-gradient(120deg,var(--kz),var(--kz2) 55%,var(--accent)); background-size:160% auto; color:#fff; border:none; }
.btn-kz:hover { background-position:right center; color:#fff; }
.grid-input { border:1px solid #d4dde8; border-radius:4px; padding:4px 6px; width:100%; font-size:.85rem; }
/* keep numeric grid cells tight: hide the browser spinner arrows (input stays number-only) */
.grid-input[type=number] { -moz-appearance:textfield; appearance:textfield; }
.grid-input[type=number]::-webkit-outer-spin-button,
.grid-input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
/* To-Do List — a task flagged urgent gets a red left accent and a red-bordered
   field so it stands out in the list. */
.todo-urgent > td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.todo-urgent .grid-input { border-color: var(--bad); }

/* Segmented tabs — buttons at the top switch between panels (CSS-only: hidden
   radios drive which panel shows; the server pre-checks the active one so the
   choice survives a save). Used by To-Do List (#tab-*) and Scheduling (#stab-*). */
.seg-tabin { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.seg-tabbar { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.seg-tab { cursor:pointer; padding:.45rem .95rem; border:1px solid var(--border); border-radius:999px;
  font-weight:600; font-size:.85rem; color:var(--muted); background:#fff; user-select:none; white-space:nowrap; }
.seg-tab:hover { border-color:var(--kz); color:var(--kz); }
.seg-panel { display:none; }
/* active-tab pill */
#tab-daily:checked    ~ .seg-tabbar label[for="tab-daily"],
#tab-weekly:checked   ~ .seg-tabbar label[for="tab-weekly"],
#tab-monthly:checked  ~ .seg-tabbar label[for="tab-monthly"],
#stab-daily:checked   ~ .seg-tabbar label[for="stab-daily"],
#stab-weekly:checked  ~ .seg-tabbar label[for="stab-weekly"] {
  background:linear-gradient(120deg,var(--kz),var(--kz2) 55%,var(--accent)); color:#fff; border-color:transparent; }
#tab-daily:focus-visible   ~ .seg-tabbar label[for="tab-daily"],
#tab-weekly:focus-visible  ~ .seg-tabbar label[for="tab-weekly"],
#tab-monthly:focus-visible ~ .seg-tabbar label[for="tab-monthly"],
#stab-daily:focus-visible  ~ .seg-tabbar label[for="stab-daily"],
#stab-weekly:focus-visible ~ .seg-tabbar label[for="stab-weekly"] { outline:2px solid var(--kz); outline-offset:2px; }
/* panel show */
#tab-daily:checked   ~ #panel-daily,
#tab-weekly:checked  ~ #panel-weekly,
#tab-monthly:checked ~ #panel-monthly,
#stab-daily:checked  ~ #spanel-daily,
#stab-weekly:checked ~ #spanel-weekly { display:block; }
html[data-theme="dark"] .seg-tab { background:#1E293B; border-color:#334155; color:#8a97a8; }
html[data-theme="dark"] .seg-tab:hover { color:#A5B4FC; border-color:#A5B4FC; }

/* Weekly Scheduling — drag a task from one slot to another (pure client-side reorder;
   the grid still saves by cell position, so this only moves the text between inputs). */
.sch-cell { padding:2px !important; }
.sch-wrap { display:flex; align-items:center; gap:2px; }
.sch-grip { flex:0 0 auto; width:15px; text-align:center; color:var(--muted); cursor:grab;
  opacity:0; touch-action:none; user-select:none; font-size:.85rem; line-height:1; }
.sch-cell.has-task .sch-grip { opacity:.55; }
.sch-grip:hover { opacity:1 !important; }
.sch-grip:active { cursor:grabbing; }
.sch-in { flex:1 1 auto; min-width:0; }
.sch-cell.sch-dragging { opacity:.4; }
.sch-cell.sch-over { outline:2px dashed var(--kz); outline-offset:-2px; background:rgba(79,70,229,.09); }
.sch-ghost { position:fixed; z-index:3000; left:0; top:0; transform:translate(-50%,-150%);
  pointer-events:none; background:var(--kz); color:#fff; padding:4px 11px; border-radius:999px;
  font-size:.75rem; font-weight:600; max-width:220px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; box-shadow:var(--shadow-lg); }
html[data-theme="dark"] .sch-grip { color:#8a97a8; }
html[data-theme="dark"] .sch-cell.sch-over { background:rgba(165,180,252,.14); outline-color:#A5B4FC; }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1035; }
/* mobile: sidebar slides in */
@media (max-width: 991.98px) {
  .sidebar { transform:translateX(-100%); }
  body.sb-open .sidebar { transform:translateX(0); }
  body.sb-open .sidebar-backdrop { display:block; }
  .content { margin-left:0; }
}
/* Dark mode */
html[data-theme="dark"] body { background:#0F172A; color:#E2E8F0; }
html[data-theme="dark"] .card { background:#1E293B; color:#E2E8F0; box-shadow:0 1px 4px rgba(0,0,0,.4); }
html[data-theme="dark"] .topbar { background:#1E293B; border-bottom-color:#334155; }
html[data-theme="dark"] .table { color:#E2E8F0; }
html[data-theme="dark"] .table thead th { background:#243246; color:#C7D2FE; }
html[data-theme="dark"] .table-hover tbody tr:hover > * { background:#243246; }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .grid-input { background:#0F172A; color:#E2E8F0; border-color:#334155; }
html[data-theme="dark"] .btn-light { background:#243246; color:#E2E8F0; border-color:#334155; }
html[data-theme="dark"] .text-muted { color:#8a97a8 !important; }
html[data-theme="dark"] .page-title { color:#A5B4FC; }
html[data-theme="dark"] .dropdown-menu { background:#1E293B; color:#E2E8F0; }
html[data-theme="dark"] .dropdown-item { color:#E2E8F0; }
html[data-theme="dark"] .dropdown-item:hover { background:#243246; }

/* ============ Phase 4 — accessibility (WCAG AA) ============ */
/* Visible keyboard focus ring on all interactive elements */
a:focus-visible, button:focus-visible, .navlink:focus-visible,
[tabindex]:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
  outline:2px solid var(--kz2); outline-offset:2px;
}
/* Keyboard-accessible clickable table rows */
tr[data-href]{ cursor:pointer; }
tr[data-href]:hover > *{ background:rgba(29,111,184,.05); }
tr[data-href]:focus-visible{ outline:2px solid var(--kz2); outline-offset:-2px; }
html[data-theme="dark"] tr[data-href]:hover > *{ background:#243246; }
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ============ Phase 5 — Command palette (Ctrl/Cmd + K) ============ */
.cmdk-overlay{ display:none; position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:2050; padding-top:12vh; }
.cmdk-overlay.show{ display:block; }
.cmdk-box{ width:min(580px,92vw); margin:0 auto; background:#fff; border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; }
.cmdk-search{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); color:var(--muted); }
.cmdk-input{ border:0; outline:0; flex:1; font-size:1rem; background:transparent; color:var(--ink); }
.cmdk-list{ list-style:none; margin:0; padding:6px; max-height:52vh; overflow:auto; }
.cmdk-sec{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; padding:8px 12px 4px; }
.cmdk-item{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:8px; cursor:pointer; color:var(--ink); }
.cmdk-item .bi{ color:var(--muted); width:18px; text-align:center; }
.cmdk-item.sel, .cmdk-item:hover{ background:var(--info-bg); color:var(--kz); }
.cmdk-item.sel .bi{ color:var(--kz); }
.cmdk-empty{ padding:18px; text-align:center; color:var(--muted); }
.cmdk-foot{ display:flex; gap:16px; padding:8px 16px; border-top:1px solid var(--border); font-size:.74rem; color:var(--muted); }
.cmdk-foot kbd{ background:var(--mut-bg); border-radius:4px; padding:1px 5px; color:var(--ink); font-family:inherit; }
.cmdk-trigger kbd{ background:rgba(0,0,0,.06); border-radius:4px; padding:0 5px; font-size:.72rem; font-family:inherit; }
html[data-theme="dark"] .cmdk-box{ background:#1E293B; }
html[data-theme="dark"] .cmdk-search{ border-bottom-color:#334155; color:#8a97a8; }
html[data-theme="dark"] .cmdk-input{ color:#E2E8F0; }
html[data-theme="dark"] .cmdk-input::placeholder{ color:#8a97a8; }
html[data-theme="dark"] .cmdk-item{ color:#E2E8F0; }
html[data-theme="dark"] .cmdk-item .bi{ color:#8a97a8; }
html[data-theme="dark"] .cmdk-item.sel, html[data-theme="dark"] .cmdk-item:hover{ background:#243246; color:#C7D2FE; }
html[data-theme="dark"] .cmdk-item.sel .bi, html[data-theme="dark"] .cmdk-item:hover .bi{ color:#C7D2FE; }
html[data-theme="dark"] .cmdk-sec{ color:#8a97a8; }
html[data-theme="dark"] .cmdk-foot{ border-top-color:#334155; }
html[data-theme="dark"] .cmdk-foot kbd{ background:#334155; color:#E2E8F0; }
/* topbar/list search input-group icon box in dark */
html[data-theme="dark"] .input-group-text{ background:#243246; color:#C7D2FE; border-color:#334155; }

/* ============ Date picker (flatpickr) — dark theme ============ */
html[data-theme="dark"] .flatpickr-calendar{ background:#1E293B; color:#E2E8F0; box-shadow:var(--shadow-lg); border:1px solid #334155; }
html[data-theme="dark"] .flatpickr-calendar.arrowTop:before{ border-bottom-color:#334155; }
html[data-theme="dark"] .flatpickr-calendar.arrowTop:after{ border-bottom-color:#1E293B; }
html[data-theme="dark"] .flatpickr-calendar.arrowBottom:before{ border-top-color:#334155; }
html[data-theme="dark"] .flatpickr-calendar.arrowBottom:after{ border-top-color:#1E293B; }
html[data-theme="dark"] .flatpickr-months .flatpickr-month, html[data-theme="dark"] .flatpickr-current-month input.cur-year,
html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months{ color:#E2E8F0; fill:#E2E8F0; }
html[data-theme="dark"] .flatpickr-monthDropdown-months{ background:#1E293B; }
html[data-theme="dark"] .flatpickr-weekday{ color:#8a97a8; }
html[data-theme="dark"] span.flatpickr-weekday{ color:#8a97a8; }
html[data-theme="dark"] .flatpickr-day{ color:#cdd7e3; }
html[data-theme="dark"] .flatpickr-day:hover, html[data-theme="dark"] .flatpickr-day:focus{ background:#243246; border-color:#243246; }
html[data-theme="dark"] .flatpickr-day.today{ border-color:var(--kz2); }
html[data-theme="dark"] .flatpickr-day.selected, html[data-theme="dark"] .flatpickr-day.selected:hover{ background:var(--kz2); border-color:var(--kz2); color:#fff; }
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled, html[data-theme="dark"] .flatpickr-day.prevMonthDay, html[data-theme="dark"] .flatpickr-day.nextMonthDay{ color:#56657a; }
html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg, html[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg{ fill:#cdd7e3; }
html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg, html[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg{ fill:var(--kz2); }
html[data-theme="dark"] .numInputWrapper span.arrowUp:after{ border-bottom-color:#8a97a8; }
html[data-theme="dark"] .numInputWrapper span.arrowDown:after{ border-top-color:#8a97a8; }
html[data-theme="dark"] .numInputWrapper:hover{ background:#243246; }

/* ============ Phase 3b — onboarding checklist ============ */
.onboard-card{ border-left:3px solid var(--kz2); }
.onboard-step{ display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; text-decoration:none; color:var(--ink); font-size:.9rem; font-weight:600; background:#fff; }
.onboard-step:hover{ border-color:var(--kz2); background:var(--info-bg); color:var(--kz); }
.onboard-step .bi:first-child{ color:var(--kz2); font-size:1.05rem; }
.onboard-step.done{ color:var(--muted); font-weight:500; background:var(--mut-bg); }
.onboard-step.done .bi:first-child{ color:var(--ok); }
.onboard-step.done span{ text-decoration:line-through; }
html[data-theme="dark"] .onboard-step{ background:#243246; color:#E2E8F0; border-color:#334155; }

/* ============ Phase 3b — settings tabs ============ */
.settings-tabs .nav-link{ color:var(--muted); font-weight:600; border:0; border-bottom:2px solid transparent; }
.settings-tabs .nav-link.active{ color:var(--kz); background:transparent; border-bottom-color:var(--kz); }

/* ============ Phase 6 — loading states & micro-interactions ============ */
/* Top navigation progress bar (perceived speed) */
#navprogress{ position:fixed; top:0; left:0; height:3px; width:0; opacity:0; z-index:3000;
  background:linear-gradient(90deg,var(--kz2),#5aa9e6); box-shadow:0 0 8px rgba(29,111,184,.55);
  transition:width .25s ease, opacity .3s ease; }
#navprogress.go{ opacity:1; }
/* Button loading spinner + duplicate-submit guard */
.btn.is-loading{ color:transparent !important; pointer-events:none; position:relative; }
.btn.is-loading::after{ content:""; position:absolute; width:15px; height:15px; top:calc(50% - 7px); left:calc(50% - 7px);
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:btnspin .6s linear infinite; }
.btn-outline-secondary.is-loading::after, .btn-light.is-loading::after, .btn-outline-primary.is-loading::after,
.btn-link.is-loading::after{ border-color:rgba(13,59,102,.3); border-top-color:var(--kz); }
@keyframes btnspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .btn.is-loading::after{ animation:none; } #navprogress{ transition:opacity .2s; } }

/* ── WS-6 motion & loading (2026-07-23) ────────────────────────────────────────
   All reference the WS-1 motion tokens and are neutralised by the reduced-motion
   guard near the top of this file — do not add a duration that bypasses it. */

/* Skeleton: a shimmering placeholder shaped like the content it stands in for. Use
   `.sk` on a block, or `.sk-line`/`.sk-line.sm` for text rows, while data loads. */
.sk, .sk-line{ position:relative; overflow:hidden; background:#eef1f6; border-radius:var(--radius-sm); }
.sk-line{ height:12px; margin:7px 0; border-radius:6px; }
.sk-line.sm{ height:9px; width:60%; }
.sk-line.lg{ height:20px; width:40%; }
.sk::after, .sk-line::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform:translateX(-100%); animation:sk-shimmer 1.25s var(--ease-out) infinite; }
@keyframes sk-shimmer{ to{ transform:translateX(100%); } }
html[data-theme="dark"] .sk, html[data-theme="dark"] .sk-line{ background:#273244; }
html[data-theme="dark"] .sk::after, html[data-theme="dark"] .sk-line::after{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }

/* A saved/success tick that draws itself once, e.g. flashed after a form POST. */
.ok-tick{ display:inline-block; width:1em; height:1em; vertical-align:-.15em; }
.ok-tick circle{ fill:none; stroke:var(--ok); stroke-width:3; stroke-dasharray:76; stroke-dashoffset:76;
  animation:tick-ring var(--dur-slow) var(--ease-out) forwards; }
.ok-tick path{ fill:none; stroke:var(--ok); stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26; animation:tick-check var(--dur-base) var(--ease-out) .28s forwards; }
@keyframes tick-ring{ to{ stroke-dashoffset:0; } }
@keyframes tick-check{ to{ stroke-dashoffset:0; } }

/* A KPI number counting up on first paint (JS adds .is-counting; see ux.js). The
   value is always in the DOM as text, so with JS off or reduced-motion it just shows. */
.stat-card .v.is-counting{ font-variant-numeric:tabular-nums; }

/* ============ Phase 7 — accessibility ============ */
/* Skip-to-content link (visible on keyboard focus) */
.skip-link{ position:fixed; top:-60px; left:12px; z-index:4000; background:var(--kz); color:#fff;
  padding:9px 16px; border-radius:8px; font-weight:600; text-decoration:none; transition:top .2s ease; }
.skip-link:focus{ top:12px; color:#fff; outline:2px solid #ffd166; outline-offset:2px; }

/* ============ Phase 8 — responsive data tables (mobile card view) ============ */
@media (max-width: 640px){
  .page-wrap{ padding:16px 14px; }
  .table-sort thead{ display:none; }
  .table-sort, .table-sort tbody{ display:block; }
  .table-sort tr[data-href]{ display:block; border:1px solid var(--border); border-radius:10px;
    margin-bottom:10px; box-shadow:var(--shadow-sm); overflow:hidden; background:#fff; }
  .table-sort tr[data-href] td:first-child, .table-sort tr[data-href] td:last-child{ display:none; }
  .table-sort tr[data-href] td[data-label]{ display:flex; justify-content:space-between; align-items:center;
    gap:12px; border:0; border-bottom:1px solid var(--border); padding:8px 13px; text-align:right; }
  .table-sort tr[data-href] td[data-label]:last-of-type{ border-bottom:0; }
  .table-sort tr[data-href] td[data-label]::before{ content:attr(data-label); font-weight:600;
    color:var(--muted); text-align:left; flex:0 0 auto; }
  html[data-theme="dark"] .table-sort tr[data-href]{ background:#1E293B; }
}

/* ============ Pricing cards — shared by client Billing + admin Plans console ============ */
.term-toggle{ display:inline-flex; background:var(--card,#fff); border:1px solid var(--border,#e7ebf3); border-radius:999px; padding:4px; gap:2px; }
.term-toggle button{ border:none; background:transparent; padding:.5rem 1.4rem; border-radius:999px; font-weight:700; font-size:.9rem; color:var(--muted,#64748B); cursor:pointer; transition:.15s; }
.term-toggle button.active{ background:linear-gradient(120deg,#4F46E5,#2563EB 60%,#06B6D4); color:#fff; box-shadow:0 8px 18px -8px rgba(79,70,229,.6); }
.term-toggle button:focus-visible{ outline:2px solid #4F46E5; outline-offset:2px; }
.plan-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:20px; max-width:900px; margin:0 auto; align-items:stretch; }
.plan-grid.wide{ max-width:1200px; }
@media (max-width:575px){ .plan-grid{ grid-template-columns:1fr; gap:16px; } }
.plan-card{ position:relative; border:1px solid var(--border,#e7ebf3); border-radius:20px; padding:26px 24px; background:var(--card,#fff);
  box-shadow:0 18px 40px -26px rgba(15,23,42,.28); display:flex; flex-direction:column; text-align:left; }
@media (max-width:575px){ .plan-card{ padding:22px 18px; } }
.plan-card.featured{ border:2px solid transparent;
  background:linear-gradient(var(--card,#fff),var(--card,#fff)) padding-box, linear-gradient(120deg,#4F46E5,#06B6D4) border-box;
  box-shadow:0 26px 56px -24px rgba(79,70,229,.45); }
.plan-card.inactive{ opacity:.62; }
.plan-ribbon{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(120deg,#4F46E5,#06B6D4);
  color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.06em; padding:4px 14px; border-radius:999px; text-transform:uppercase; white-space:nowrap; }
.plan-name{ font-size:1.15rem; font-weight:800; letter-spacing:-.01em; }
.plan-key{ font-size:.72rem; color:var(--muted,#94A3B8); font-weight:600; }
.plan-price{ font-size:2.3rem; font-weight:800; letter-spacing:-.02em; line-height:1; margin-top:6px;
  background:linear-gradient(120deg,#4F46E5,#06B6D4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@media (max-width:575px){ .plan-price{ font-size:2rem; } }
.plan-period{ color:var(--muted,#64748B); font-size:.85rem; font-weight:600; }
.plan-sub{ color:var(--muted,#64748B); font-size:.85rem; margin:2px 0 14px; }
.plan-feats{ list-style:none; padding:0; margin:0 0 18px; flex:1; }
.plan-feats li{ display:flex; gap:9px; align-items:flex-start; padding:5px 0; font-size:.9rem; }
.plan-feats li i{ color:#10B981; margin-top:2px; }
.plan-feats li.muted-feat{ color:var(--muted,#94A3B8); } .plan-feats li.muted-feat i{ color:#CBD5E1; }
.current-chip{ display:inline-block; background:#ECFDF5; color:#059669; border:1px solid #A7F3D0; font-weight:700; font-size:.72rem; padding:2px 10px; border-radius:999px; }
.status-pill{ display:inline-block; font-size:.7rem; font-weight:700; padding:2px 9px; border-radius:999px; }
.status-pill.on{ background:#ECFDF5; color:#059669; border:1px solid #A7F3D0; }
.status-pill.off{ background:#F1F5F9; color:#64748B; border:1px solid #E2E8F0; }
.plan-actions{ display:flex; flex-wrap:wrap; gap:6px; border-top:1px solid var(--border,#eef1f6); padding-top:12px; margin-top:2px; }
.plan-actions form{ margin:0; }

/* --- Pricing cards: hover & motion (mouse devices only; respects reduced-motion) --- */
.plan-card{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease; }
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .plan-card:hover{ transform:translateY(-5px); box-shadow:0 30px 58px -22px rgba(79,70,229,.42); border-color:#C7D2FE; }
  .plan-card.featured:hover{ transform:translateY(-6px); box-shadow:0 36px 68px -20px rgba(79,70,229,.60); }
  .plan-card.inactive:hover{ opacity:1; }
}
.term-toggle button:not(.active):hover{ color:#4F46E5; background:rgba(79,70,229,.08); }
.plan-actions .btn{ transition: transform .12s ease; }
.plan-actions .btn:hover:not(:disabled){ transform:translateY(-1px); }

/* --- Pricing cards: dark theme (plan-card is not a .card, so it needs its own rules) --- */
html[data-theme="dark"] .plan-card{ background:#1E293B; border-color:#334155; color:#E2E8F0; box-shadow:0 18px 40px -26px rgba(0,0,0,.6); }
html[data-theme="dark"] .plan-card.featured{
  background:linear-gradient(#1E293B,#1E293B) padding-box, linear-gradient(120deg,#4F46E5,#06B6D4) border-box; }
html[data-theme="dark"] .term-toggle{ background:#1E293B; border-color:#334155; }
html[data-theme="dark"] .term-toggle button:not(.active){ color:#94A3B8; }
html[data-theme="dark"] .term-toggle button:not(.active):hover{ color:#A5B4FC; background:rgba(99,102,241,.15); }
html[data-theme="dark"] .current-chip{ background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.4); color:#34D399; }
html[data-theme="dark"] .status-pill.on{ background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.4); color:#34D399; }
html[data-theme="dark"] .status-pill.off{ background:#243246; color:#94A3B8; border-color:#334155; }
html[data-theme="dark"] .plan-actions{ border-top-color:#334155; }
html[data-theme="dark"] .plan-feats li.muted-feat{ color:#64748B; }
html[data-theme="dark"] .plan-feats li.muted-feat i{ color:#475569; }
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  html[data-theme="dark"] .plan-card:hover{ border-color:#4F46E5; box-shadow:0 30px 58px -20px rgba(79,70,229,.5); }
}

/* --- Pricing cards: whole card is clickable (opens Edit on admin / checkout on billing) --- */
.plan-card.clickable{ cursor:pointer; }
.plan-card.clickable:focus-visible{ outline:3px solid rgba(79,70,229,.55); outline-offset:3px; }

/* --- A11y: contrast fixes (axe) --- */
.cmdk-trigger kbd{ color:#334155; }
html[data-theme="dark"] .cmdk-trigger kbd{ color:#CBD5E1; background:rgba(255,255,255,.12); }
.current-chip{ color:#047857; }
/* Inactive plans: grayscale instead of opacity-dimming (opacity killed text contrast — axe). */
.plan-card.inactive{ opacity:1; filter:grayscale(.65); background:#FAFBFC; }
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .plan-card.inactive:hover{ filter:none; background:var(--card,#fff); }
}
html[data-theme="dark"] .plan-card.inactive{ background:#1B2534; }
/* A11y contrast: status pills + outline action buttons (axe ≥4.5:1) */
.status-pill.on{ color:#047857; }
.status-pill.off{ color:#475569; }
.plan-actions .btn-outline-primary{ color:#0B5ED7; }
.plan-actions .btn-outline-success{ color:#146C43; border-color:#146C43; }
.plan-actions .btn-outline-warning{ color:#B45309; border-color:#D97706; }
.plan-actions .btn-outline-warning:hover{ background:#D97706; border-color:#D97706; color:#fff; }
/* Contain absolutely-positioned children (e.g. .visually-hidden th text) inside the
   scroll wrapper — otherwise they escape the clip and cause phantom page overflow. */
.table-responsive{ position:relative; }

/* Select placeholder — a required select still on its empty "Select" option shows
   muted placeholder-style text (like input::placeholder) until a real choice is made. */
select.form-select:required:invalid{ color:#8A94A6; }
html[data-theme="dark"] select.form-select:required:invalid{ color:#7C8798; }
select.form-select:required:invalid option:not([value=""]){ color:var(--bs-body-color,#212529); }

/* Tall modals (e.g. the plan editor) must always keep the footer/Save button on
   screen on short laptop heights. Cap the body and let it scroll — id-specificity
   overrides Bootstrap's own scrollable rule if that ever fails to cap the dialog. */
#planModal .modal-body{ max-height:calc(100vh - 190px); overflow-y:auto; }

/* ============================================================================
   Finance & Accounts (Jeweller edition) — finance.kizunalogic.com
   Category (metal) tones are semantic to the subject; brand accent stays indigo→cyan.
   ========================================================================== */
:root{
  --fin-gold:#B8862B; --fin-silver:#7C8AA0; --fin-diamond:#1E96D6; --fin-fixed:#7C6FF0;
  /* shareholding donut slots (--sh-1..8), cycled per holder */
  --sh-1:#4F46E5; --sh-2:#06B6D4; --sh-3:#B8862B; --sh-4:#157a5b;
  --sh-5:#c4362f; --sh-6:#7C6FF0; --sh-7:#1565a6; --sh-8:#7C8AA0;
}
html[data-theme="dark"]{
  --fin-gold:#D9A845; --fin-silver:#9AA8BE; --fin-diamond:#4FB6E8; --fin-fixed:#A99CF6;
  --sh-1:#A5B4FC; --sh-2:#4FB6E8; --sh-3:#D9A845; --sh-4:#4cc79c;
  --sh-5:#f08a82; --sh-6:#A99CF6; --sh-7:#69b4e6; --sh-8:#9AA8BE;
}
.fin-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 auto; background:var(--muted); }
.fin-gold{ background:var(--fin-gold); } .fin-silver{ background:var(--fin-silver); }
.sh-1{ background:var(--sh-1); } .sh-2{ background:var(--sh-2); } .sh-3{ background:var(--sh-3); }
.sh-4{ background:var(--sh-4); } .sh-5{ background:var(--sh-5); } .sh-6{ background:var(--sh-6); }
.sh-7{ background:var(--sh-7); } .sh-8{ background:var(--sh-8); }
.fin-diamond{ background:var(--fin-diamond); } .fin-fixed{ background:var(--fin-fixed); }
.fin-txt-gold{ color:var(--fin-gold); } .fin-txt-silver{ color:var(--fin-silver); }
.fin-txt-diamond{ color:var(--fin-diamond); } .fin-txt-fixed{ color:var(--fin-fixed); }

/* monthly bar chart (no JS/CDN) */
.fin-bars{ display:flex; align-items:flex-end; gap:6px; height:auto; flex:1 1 auto; min-height:190px; padding-top:8px; }
.fin-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.fin-bar{ width:100%; max-width:22px; border-radius:6px 6px 0 0; min-height:4px;
  background:linear-gradient(180deg, var(--kz), var(--accent)); transition:height .5s ease; }
.fin-bar.b2{ background:linear-gradient(180deg, #94a3b8, #cbd5e1); }
.fin-bar-lbl{ font-size:.66rem; color:var(--muted); margin-top:6px; }

/* donut (category mix) via conic-gradient set inline */
.fin-sales-grid{ display:grid; grid-template-columns:minmax(240px, 320px) minmax(320px, 1fr); gap:2rem; align-items:flex-start; min-height:260px; }
@media (max-width: 991.98px){ .fin-sales-grid{ grid-template-columns:1fr; } .fin-donut{ margin:0 auto; } }
.fin-donut{ width:230px; height:230px; border-radius:50%; position:relative; }
.fin-donut::after{ content:""; position:absolute; inset:28px; border-radius:50%; background:var(--card, #fff); }
html[data-theme="dark"] .fin-donut::after{ background:#1E293B; }
.fin-donut .c{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; z-index:1; }
.fin-donut .c .cv{ font-weight:800; letter-spacing:-.02em; font-size:1.35rem; }
.fin-donut .c .cl{ font-size:.9rem; color:var(--muted); margin-top:.25rem; }
.fin-sales-list{ min-width:0; padding:1.25rem; display:grid; gap:0.9rem; background:rgba(248,250,252,.95); border-radius:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
@media (max-width: 767.98px){ .fin-sales-list{ padding:1rem; } }
.card .d-flex.align-items-center.gap-3.flex-wrap{ gap:2rem; align-items:flex-start; }
.card .d-flex.align-items-center.gap-2.py-1.small{ gap:1rem; }
.card .d-flex.align-items-center.gap-2.py-1.small .fin-dot{ width:12px; height:12px; }
.fin-sales-row{ display:grid; grid-template-columns:min-content minmax(0,1fr) min-content min-content; gap:.85rem 1rem; align-items:center; padding:1.1rem 0; border-bottom:1px solid rgba(15,23,42,.14); }
.fin-sales-row:last-child{ border-bottom:none; }
.fin-sales-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.98rem; font-weight:600; }
.fin-sales-amount{ width:150px; white-space:nowrap; font-size:.9rem; color:var(--muted); justify-self:end; }
.fin-sales-row b{ white-space:nowrap; }
.card .page-title.finance-section-heading{ margin-bottom:1.75rem; }
.card .page-title.finance-section-heading span.text-muted{ margin-top:.2rem; }
.card .page-title.finance-section-heading i{ margin-right:.5rem; }
.card .page-title{ gap:1.1rem; }
.fin-sales-list .fin-sales-row span, .fin-sales-row b{ line-height:1.35; }
.fin-sales-row span.fin-sales-label{ color:var(--ink); }
.fin-sales-row .tnum{ color:#0f172a; }
.card .fin-sales-list{ transition:background .3s ease, transform .3s ease; }
.card .fin-sales-list:hover{ background:rgba(248,250,252,.99); transform:translateY(-1px); }
.card .page-title.finance-section-heading{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }

/* Sales-by-category (Overview) — an interactive donut (Chart.js on top of a reliable
   CSS-ring fallback) with a padded centre that shows the ABBREVIATED total (so the
   figure never touches the ring), above a detailed legend where each category carries
   its own % bar + exact amount + margin. Consistent premium palette by rank. */
.scat{ display:flex; flex-direction:column; align-items:center; gap:1.35rem; }
.scat-chart{ position:relative; width:212px; height:212px; flex:0 0 212px; }
.scat-ring{ position:absolute; inset:0; border-radius:50%; }
.scat-ring::after{ content:""; position:absolute; inset:31px; border-radius:50%; background:#fff; }
html[data-theme="dark"] .scat-ring::after{ background:#1E293B; }
.scat-chart canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; z-index:1; }
.scat-center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; z-index:2; pointer-events:none; padding:26px; }
.scat-total{ font-weight:800; letter-spacing:-.02em; font-size:1.55rem; line-height:1; }
.scat-sub{ font-size:.7rem; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:.06em; }
.scat-legend{ width:100%; display:flex; flex-direction:column; gap:.95rem; }
.scat-top{ display:flex; align-items:center; gap:.55rem; }
.scat-dot{ width:12px; height:12px; border-radius:4px; flex:0 0 12px; }
.scat-name{ flex:1; min-width:0; font-weight:600; font-size:.93rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scat-pct{ font-size:.9rem; font-weight:700; font-variant-numeric:tabular-nums; flex:0 0 auto; }
.scat-bar{ height:6px; border-radius:4px; background:var(--mut-bg); overflow:hidden; margin:7px 0 4px 27px; }
.scat-bar span{ display:block; height:100%; border-radius:4px; transition:width .5s ease; }
.scat-amt{ margin-left:27px; font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.scat-sep{ opacity:.45; padding:0 .2rem; }
.scat-item{ transition:transform .12s ease; }
@media (hover:hover){ .scat-item:hover{ transform:translateX(2px); } }

/* Petty-cash receipt attachment — interactive drop zone + preview (in the Add/Edit modal). */
.pc-drop{ position:relative; border:1.5px dashed var(--border); border-radius:var(--radius-sm);
  background:var(--mut-bg); min-height:96px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:14px; transition:border-color .15s ease, background .15s ease; }
.pc-drop.drag{ border-color:var(--kz); background:rgba(79,70,229,.06); }
.pc-file{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.pc-drop-empty{ color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:3px; pointer-events:none; }
.pc-drop-empty .bi{ font-size:1.5rem; color:var(--kz); }
.pc-drop-picked{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; }
.pc-preview{ width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border); flex:0 0 auto; background:#fff; }
.pc-pdfic{ width:64px; height:64px; border-radius:8px; border:1px solid var(--border); display:grid; place-items:center; flex:0 0 auto; background:#fff; }
.pc-pdfic .bi{ font-size:1.9rem; color:var(--bad); }
.pc-pick-meta{ flex:1; min-width:0; }
.pc-drop-picked .btn{ position:relative; z-index:1; flex:0 0 auto; }
.pc-current{ font-size:.85rem; }
.pc-viewbtn .bi{ color:var(--kz); }
html[data-theme="dark"] .pc-drop{ background:#243246; }
html[data-theme="dark"] .pc-drop.drag{ background:rgba(79,70,229,.16); }
html[data-theme="dark"] .pc-preview, html[data-theme="dark"] .pc-pdfic{ background:#0F172A; }

/* Revenue & profit trend (Overview) — interactive Sales-bars + GP-line chart that flexes
   to fill the card, above a 4-up insights strip (best month / avg / GP / total). */
.rt-chart{ position:relative; flex:1 1 auto; min-height:210px; width:100%; }
.rt-chart canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; }
.rt-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:1.1rem; }
@media (max-width:575.98px){ .rt-stats{ grid-template-columns:repeat(2,1fr); } }
.rt-stat{ display:flex; flex-direction:column; gap:1px; padding:.7rem .8rem; border:1px solid var(--border);
  border-radius:13px; background:var(--mut-bg); }
.rt-stat .k{ font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
.rt-stat .k i{ margin-right:2px; }
.rt-stat .v{ font-size:1.02rem; font-weight:800; letter-spacing:-.01em; margin-top:2px; }
.rt-stat .d{ font-size:.72rem; color:var(--muted); }
html[data-theme="dark"] .rt-stat{ background:#0f1a2e; border-color:#2a3852; }

/* Debtors — expanded per-customer detail. An inset panel (left accent + subtle fill +
   breathing room) with a LIGHT header, so the bills read as a nested detail rather than
   a second full table butting against the rows above/below. */
.dbt-detail{ padding:.5rem 1.25rem 1.1rem 2.4rem; background:var(--mut-bg); border-left:3px solid var(--kz); }
.dbt-detail-tbl{ background:transparent; margin:0; }
.dbt-detail-tbl thead th{ background:transparent !important; color:var(--muted) !important; font-weight:700;
  font-size:.68rem; letter-spacing:.04em; border-bottom:1px solid var(--border); padding:.55rem .55rem .6rem; }
.dbt-detail-tbl tbody td{ padding:.7rem .55rem; border-color:var(--border); vertical-align:middle; }
.dbt-detail-tbl tbody tr:last-child > td{ border-bottom:0; }
.dbt-detail-tbl .ps-4{ padding-left:.55rem !important; }
.dbt-detail-tbl .pe-3{ padding-right:.55rem !important; }
html[data-theme="dark"] .dbt-detail{ background:#131c2b; border-left-color:#6366f1; }

/* Daily Tracker — the owner's day-book. Emphasised time column (like a logbook rail),
   struck-through done rows, a left accent on hover. */
.dt-log .dt-time-h{ width:118px; }
.dt-time{ white-space:nowrap; }
.dt-time .dt-t{ font-weight:700; font-variant-numeric:tabular-nums; font-size:.95rem; }
.dt-time .dt-t-end{ display:block; font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums; margin-top:1px; }
.dt-log tbody td:first-child{ border-left:3px solid transparent; }
.dt-log tbody tr:hover td:first-child{ border-left-color:var(--kz); }
.dt-log tr.dt-done .dt-act{ text-decoration:line-through; color:var(--muted); }
.dt-notes{ max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Daily Tracker — streak challenge (work-days only, 1 task done keeps the day). */
.dt-streak-head{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.dt-fire{ font-weight:800; font-size:1.55rem; letter-spacing:-.02em;
  background:linear-gradient(120deg,#f59e0b,#ef4444 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dt-fire .bi{ -webkit-text-fill-color:#f59e0b; }
.dt-streak-lbl{ color:var(--muted); font-size:.9rem; }
.dt-alive{ color:var(--warn); font-weight:600; }
.dt-next{ color:var(--muted); }
.dt-next .bi{ color:var(--kz); }
/* 7-day strip */
.dt-strip{ display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; margin:.25rem 0 .9rem; }
.dt-day{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:.5rem .25rem;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--mut-bg); text-align:center; }
.dt-day .dt-dow{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.dt-day .dt-dot{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.85rem;
  background:#fff; border:1px solid var(--border); color:var(--muted); }
.dt-day .dt-dnum{ font-size:.7rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.dt-done.dt-day{ background:var(--ok-bg); border-color:transparent; }
.dt-done .dt-dot{ background:var(--ok); border-color:var(--ok); color:#fff; }
.dt-miss.dt-day .dt-dot{ background:var(--bad-bg); border-color:transparent; color:var(--bad); }
.dt-today.dt-day{ border-color:var(--kz); box-shadow:0 0 0 2px rgba(79,70,229,.15); }
.dt-today .dt-dot{ background:var(--kz); border-color:var(--kz); color:#fff; }
.dt-weekend.dt-day{ background:transparent; border-style:dashed; opacity:.7; }
/* milestone badges */
.dt-miles{ display:flex; flex-wrap:wrap; gap:.4rem; }
.dt-mile{ display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .6rem; border-radius:999px;
  font-size:.8rem; font-weight:700; border:1px dashed var(--border); color:var(--muted); background:var(--mut-bg); }
.dt-mile.on{ border-style:solid; border-color:transparent; color:#fff;
  background:linear-gradient(120deg,var(--kz),var(--kz2) 55%,var(--accent)); box-shadow:var(--shadow-sm); }
html[data-theme="dark"] .dt-day .dt-dot{ background:#0F172A; }
html[data-theme="dark"] .dt-day{ background:#243246; }
html[data-theme="dark"] .dt-weekend.dt-day{ background:transparent; }
html[data-theme="dark"] .dt-done.dt-day{ background:rgba(21,122,91,.18); }
html[data-theme="dark"] .dt-miss.dt-day .dt-dot{ background:rgba(196,54,47,.2); }
html[data-theme="dark"] .dt-mile{ background:#243246; }
/* super-admin design-preview banner (sample data, no client records) */
.dt-preview-banner{ border:1px solid var(--kz); background:linear-gradient(0deg,rgba(79,70,229,.06),rgba(79,70,229,.06)); color:var(--ink); border-radius:var(--radius-sm); }
.dt-preview-banner .bi{ color:var(--kz); }
html[data-theme="dark"] .dt-preview-banner{ background:rgba(79,70,229,.14); color:var(--e2, #E2E8F0); border-color:#4F46E5; }
/* full-width "add new log" footer under the table */
.dt-addrow{ border-top:1px solid var(--border); padding:.55rem; }
.dt-addbtn{ width:100%; border:1px dashed var(--border); color:var(--kz); font-weight:600;
  background:transparent; border-radius:var(--radius-sm); padding:.5rem; }
.dt-addbtn:hover{ background:var(--mut-bg); color:var(--kz); border-color:var(--kz); }
html[data-theme="dark"] .dt-addbtn:hover{ background:#243246; }
html[data-theme="dark"] .dt-addbtn{ color:#A5B4FC; }

/* compliance / margin ring */
.fin-ring{ --pct:0; width:92px; height:92px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:conic-gradient(var(--kz) calc(var(--pct)*1%), var(--mut-bg) 0); position:relative; }
.fin-ring::before{ content:""; position:absolute; inset:10px; border-radius:50%; background:var(--card, #fff); }
html[data-theme="dark"] .fin-ring::before{ background:#1E293B; }
.fin-ring span{ position:relative; font-weight:700; }

/* category card with a left metal rail */
.fin-cat{ position:relative; overflow:hidden; }
.fin-cat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--rail, var(--kz)); }

/* P&L / statement table */
.fin-stmt{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; min-width:760px; }
.fin-stmt th, .fin-stmt td{ padding:9px 12px; text-align:right; font-size:.86rem; border-bottom:1px solid var(--border); white-space:nowrap; }
.fin-stmt th:first-child, .fin-stmt td:first-child{ text-align:left; }
.fin-stmt thead th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  font-weight:700; position:sticky; top:0; background:var(--card); border-bottom:2px solid var(--border); }
.fin-stmt .grp td{ font-weight:700; background:var(--mut-bg); }
.fin-stmt .sub td:first-child{ padding-left:28px; color:var(--muted); }
.fin-stmt .tot td{ font-weight:800; border-top:2px solid var(--border); border-bottom:2.5px double var(--border); }
.fin-stmt .pos{ color:var(--ok); } .fin-stmt .neg{ color:var(--bad); }

/* tabular numeric cell helper */
.tnum{ font-variant-numeric:tabular-nums; text-align:right; }

/* ---- Trial Balance: wide financial grid — sticky header + sticky totals ---- */
.tb-card{ overflow:hidden; }
.tb-scroll{ overflow-x:auto; }
.tb-tbl{ table-layout:fixed; width:max-content; min-width:100%; border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; }
.tb-tbl th, .tb-tbl td{ padding:10px 12px; border-bottom:1px solid #eceff6; vertical-align:middle; overflow:hidden; }
.tb-tbl thead th{ position:sticky; top:0; z-index:3; background:#f7f9fc; color:var(--muted);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; border-bottom:2px solid #e3e8f2; white-space:nowrap; }
.tb-tbl tbody tr:hover td{ background:#f6f8fd; }
.tb-tbl .tb-act{ width:48px; text-align:center; }
.tb-tbl .tb-no{ width:96px; text-align:center; font-weight:700; }
.tb-tbl .tb-name{ width:244px; font-weight:500; white-space:normal; word-break:break-word; }
.tb-tbl .tb-m{ width:132px; text-align:center; }
.tb-tbl .tb-del{ width:44px; text-align:center; }
.tb-tbl tfoot td{ background:#f1f4fb; font-weight:800; color:var(--ink);
  border-top:2px solid #e3e8f2; border-bottom:0; white-space:nowrap; }
.tb-tbl .tb-m .form-control{ width:100%; text-align:center; border-color:#e7ecf6; padding:.28rem .3rem; font-size:.82rem; }
.tb-tbl .tb-m .form-control:focus{ border-color:var(--kz); }
.tb-editbtn{ border:0; background:transparent; color:var(--muted); width:30px; height:30px; border-radius:8px;
  cursor:pointer; display:inline-grid; place-items:center; transition:background .15s, color .15s; }
.tb-editbtn:hover{ color:#fff; background:linear-gradient(120deg,var(--kz),var(--kz2)); }
/* holds a pencil's place in a row that has none, so names stay on one left edge */
.tb-editbtn-gap{ display:block; width:30px; height:30px; flex:0 0 30px; }
/* dark */
html[data-theme="dark"] .tb-tbl th, html[data-theme="dark"] .tb-tbl td{ border-bottom-color:#2a3852; }
html[data-theme="dark"] .tb-tbl thead th{ background:#1a2436; border-color:#2a3852; }
html[data-theme="dark"] .tb-tbl tbody tr:hover td{ background:#213046; }
html[data-theme="dark"] .tb-tbl tfoot td{ background:#0f1826; color:#E2E8F0; border-color:#2a3852; }
html[data-theme="dark"] .tb-tbl .tb-m .form-control{ border-color:#2f3d55; }

/* Inventory grid — reuses .tb-tbl fixed layout; category spans 3 UOM rows */
.inv-cat{ font-weight:700; vertical-align:middle; background:#fbfcff; border-right:1px solid #eceff6; }
.inv-uom{ color:var(--muted); font-size:.8rem; white-space:nowrap; }
.tb-tbl tbody tr.inv-top td{ border-top:2px solid #e6eaf3; }
.tb-tbl tbody tr.inv-avg td{ color:var(--muted); font-size:.8rem; background:#fcfcfe; }
html[data-theme="dark"] .inv-cat{ background:#131c2b; border-right-color:#2a3852; }
html[data-theme="dark"] .tb-tbl tbody tr.inv-avg td{ background:#0f1826; }
html[data-theme="dark"] .tb-tbl tbody tr.inv-top td{ border-top-color:#2a3852; }
/* Working Capital flag row */
.wc-flag{ background:var(--bad-bg) !important; }
html[data-theme="dark"] .wc-flag{ background:#2c1512 !important; }

/* Inventory: freeze the Inventory-name + Unit-of-measurement columns on x-scroll */
.inv-tbl .inv-c1, .inv-tbl .inv-cat{ position:sticky; left:0; z-index:2; }
.inv-tbl .inv-c2, .inv-tbl .inv-uom{ position:sticky; left:162px; z-index:2; box-shadow:2px 0 0 -1px #e3e8f2; }
.inv-tbl tbody .inv-uom{ background:#fff; }
.inv-tbl tbody tr.inv-avg .inv-uom{ background:#fcfcfe; }
.inv-tbl thead .inv-c1, .inv-tbl thead .inv-c2{ z-index:4; }
.inv-tbl tfoot .inv-c1, .inv-tbl tfoot .inv-c2{ z-index:3; }
html[data-theme="dark"] .inv-tbl tbody .inv-uom{ background:#141c2b; }
html[data-theme="dark"] .inv-tbl tbody tr.inv-avg .inv-uom{ background:#0f1826; }

/* Expenses grid: freeze the Expense-head column on x-scroll. Own left/width offsets
   matched to its own <col> — deliberately NOT .inv-c1/.inv-c2, whose left:162px
   belongs to the Inventory/COGS layout and would park a frozen column over the Apr
   cell here. */
.exp-tbl .exp-c1, .exp-tbl .exp-head{ position:sticky; left:0; z-index:2; }
/* Expense-type column freezes beside the head. left = the head column's own width
   (230px) — NOT .inv-c2's 162px, which belongs to the Inventory/COGS layout. */
.exp-tbl .exp-c2, .exp-tbl .exp-type{ position:sticky; left:230px; z-index:2; box-shadow:2px 0 0 -1px #e3e8f2; }
.exp-tbl thead .exp-c1, .exp-tbl thead .exp-c2{ z-index:4; }
.exp-tbl tfoot .exp-c1, .exp-tbl tfoot .exp-c2{ z-index:3; }
.exp-tbl tbody .exp-type{ background:#fff; }
.exp-head{ font-weight:700; vertical-align:middle; background:#fbfcff; border-right:1px solid #eceff6; }
.exp-type{ white-space:nowrap; }
/* read-only Expense-type tag — the type is changed only via the Add/Edit modal */
.exp-type-tag{ display:inline-flex; align-items:center; font-size:.8rem; color:var(--ink); }
html[data-theme="dark"] .exp-type-tag{ color:#E2E8F0; }
html[data-theme="dark"] .exp-head{ background:#131c2b; border-right-color:#2a3852; }
html[data-theme="dark"] .exp-tbl tbody .exp-type{ background:#141c2b; }
html[data-theme="dark"] .exp-tbl .exp-c2, html[data-theme="dark"] .exp-tbl .exp-type{ box-shadow:2px 0 0 -1px #2a3852; }

/* Plan The Year: freeze the row-label column (REVENUE/PROFIT) while the 12 month
   columns scroll. Own left offset — .tb-name/.tb-grp offsets are Trial-Balance
   specific and would park this column over the Apr cell. */
.pl-tbl .pl-c1{ position:sticky; left:0; z-index:2; background:#fff; width:150px;
  box-shadow:2px 0 0 -1px #e3e8f2; text-align:left; }
.pl-tbl thead .pl-c1{ z-index:4; background:#f7f9fc; }
.pl-tbl tfoot .pl-c1{ z-index:3; background:#f1f4fb; }
.pl-tbl tbody tr:hover .pl-c1{ background:#f6f8fd; }
.pl-tbl tbody tr.table-light .pl-c1{ background:#f1f4fb; }
html[data-theme="dark"] .pl-tbl .pl-c1{ background:#141c2b; box-shadow:2px 0 0 -1px #2a3852; }
html[data-theme="dark"] .pl-tbl thead .pl-c1{ background:#1a2436; }
html[data-theme="dark"] .pl-tbl tbody tr:hover .pl-c1{ background:#213046; }
html[data-theme="dark"] .pl-tbl tbody tr.table-light .pl-c1{ background:#0f1826; }
/* Plan The Year: profit-margin % printed under each profit input (profit ÷ revenue
   for that month). Normal weight, muted; red when the month runs at a loss. */
.pl-pct{ margin-top:3px; font-size:.72rem; font-weight:400; color:var(--muted);
  text-align:right; font-variant-numeric:tabular-nums; line-height:1.2; min-height:.9rem; }
.pl-pct.neg{ color:var(--bad); }
html[data-theme="dark"] .pl-pct{ color:#8a97a8; }
html[data-theme="dark"] .pl-pct.neg{ color:#f28b82; }

/* ===== Expense Analysis (fin_pnl) — ranked spend, budget-vs-actual, split, trend ===== */
.ea-rank{ display:flex; flex-direction:column; gap:9px; }
.ea-rrow{ display:grid; grid-template-columns:170px 1fr 128px; align-items:center; gap:12px; }
.ea-name{ font-size:.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ea-dot{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:7px; vertical-align:middle; }
.ea-dot.op{ background:var(--kz); } .ea-dot.fin{ background:#7c8195; }
/* Expense types: operating / depreciation & amortisation / financing */
.ea-dot.ea-t-operating{ background:var(--kz); }
.ea-dot.ea-t-depreciation{ background:var(--accent); }
.ea-dot.ea-t-financing{ background:#7c8195; }
.ea-track{ height:22px; background:#eef2f9; border-radius:6px; overflow:hidden; }
.ea-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,var(--kz),var(--kz2)); min-width:2px; }
.ea-fill.fin{ background:linear-gradient(90deg,#7c8195,#9aa2b5); }
.ea-fill.ea-t-operating{ background:linear-gradient(90deg,var(--kz),var(--kz2)); }
.ea-fill.ea-t-depreciation{ background:linear-gradient(90deg,var(--accent),#67d3e8); }
.ea-fill.ea-t-financing{ background:linear-gradient(90deg,#7c8195,#9aa2b5); }
.ea-rval{ text-align:right; font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums; }
.ea-rpct{ color:var(--muted); font-weight:500; font-size:.76rem; }
@media (max-width:560px){ .ea-rrow{ grid-template-columns:110px 1fr 92px; } }
/* operating vs financing split */
.ea-split{ display:flex; height:30px; border-radius:8px; overflow:hidden; margin-top:16px; border:1px solid var(--border); }
.ea-seg{ display:flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:700; color:#fff; white-space:nowrap; padding:0 10px; min-width:0; overflow:hidden; }
.ea-seg.op{ background:linear-gradient(120deg,var(--kz),var(--kz2)); }
.ea-seg.fi{ background:#6b7180; }
.ea-seg.ea-t-operating{ background:linear-gradient(120deg,var(--kz),var(--kz2)); }
.ea-seg.ea-t-depreciation{ background:var(--accent); }
.ea-seg.ea-t-financing{ background:#6b7180; }
.ea-legend{ display:flex; gap:16px; margin-top:9px; font-size:.76rem; color:var(--muted); flex-wrap:wrap; }
.ea-legend span{ display:inline-flex; align-items:center; gap:6px; }
.ea-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.ea-legend-val{ gap:10px 20px; font-size:.78rem; }
.ea-legend-val b{ color:var(--ink); font-weight:700; }
.ea-legend-val .ea-lpct{ color:var(--muted); font-weight:700; }
html[data-theme="dark"] .ea-legend-val b{ color:var(--e2,#E2E8F0); }
.ea-legend i.op{ background:var(--kz); } .ea-legend i.fi{ background:#6b7180; }
.ea-legend i.ea-t-operating{ background:var(--kz); }
.ea-legend i.ea-t-depreciation{ background:var(--accent); }
.ea-legend i.ea-t-financing{ background:#6b7180; }
/* "Where the money goes" spend heatmap (head × month) */
.hm-wrap{ overflow-x:auto; margin:8px 0 4px; }
.hm{ border-collapse:separate; border-spacing:3px; width:100%; }
.hm th, .hm td{ font-variant-numeric:tabular-nums; }
.hm thead th{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  color:var(--muted); text-align:center; padding:2px 4px; }
.hm .hm-corner{ text-align:left; }
.hm .hm-head{ text-align:left; font-size:.8rem; font-weight:600; white-space:nowrap; padding-right:10px;
  position:sticky; left:0; background:var(--card,#fff); z-index:1; }
.hm .hm-head .ea-dot{ margin-right:6px; }
.hm-cell{ width:64px; min-width:56px; height:38px; text-align:center; border-radius:7px;
  background:#f1f4f9; color:var(--ink); font-size:.72rem; font-weight:600; vertical-align:middle; }
.hm-cell.zero{ background:repeating-linear-gradient(-45deg,#f5f7fb,#f5f7fb 4px,#eef2f8 4px,#eef2f8 8px); color:transparent; }
.hm-cell.hot{ color:#fff; }
.hm-cell span{ display:inline-block; }
.hm-cell.hm-colt{ background:transparent; font-weight:700; color:var(--muted); }
.hm .hm-tot-h{ text-align:right; }
.hm .hm-tot{ text-align:right; font-weight:700; font-size:.78rem; white-space:nowrap; padding-left:8px; }
.hm tfoot th, .hm tfoot .hm-tot{ padding-top:5px; }
html[data-theme="dark"] .hm .hm-head{ background:#1E293B; }
html[data-theme="dark"] .hm-cell{ background:#243246; color:var(--e2,#E2E8F0); }
html[data-theme="dark"] .hm-cell.zero{ background:repeating-linear-gradient(-45deg,#1b2635,#1b2635 4px,#212f42 4px,#212f42 8px); color:transparent; }
/* budget vs actual bar */
.ea-ba{ height:9px; border-radius:5px; background:#eef2f9; position:relative; overflow:hidden; }
.ea-bud{ position:absolute; inset:0 auto 0 0; height:100%; background:#c7cfdd; }
.ea-act{ position:absolute; inset:0 auto 0 0; height:100%; border-radius:5px; }
.ea-act.over{ background:var(--bad); } .ea-act.under{ background:var(--ok); } .ea-act.on{ background:var(--kz2); }
.table .ea-trow td{ font-weight:800; border-top:2px solid var(--border); background:#f1f4fb; }
.ea-callout{ display:flex; align-items:flex-start; gap:8px; margin:0 16px 16px; padding:11px 13px; border-radius:var(--radius-sm); background:var(--bad-bg); color:var(--bad); font-size:.84rem; font-weight:600; }
/* month-wise trend */
.ea-spark{ display:flex; align-items:flex-end; gap:5px; height:82px; }
.ea-b{ flex:1; background:linear-gradient(180deg,var(--kz2),var(--accent)); border-radius:3px 3px 0 0; min-height:3px; opacity:.85; }
.ea-b:last-child{ opacity:1; background:linear-gradient(180deg,var(--kz),var(--kz2)); }
.ea-months{ display:flex; gap:5px; margin-top:5px; }
.ea-months span{ flex:1; text-align:center; font-size:.6rem; color:var(--muted); font-variant-numeric:tabular-nums; }
/* dark mode */
html[data-theme="dark"] .ea-track, html[data-theme="dark"] .ea-ba{ background:#0f1826; }
html[data-theme="dark"] .ea-bud{ background:#3a475c; }
html[data-theme="dark"] .table .ea-trow td{ background:#0f1826; border-top-color:#2a3852; }
html[data-theme="dark"] .ea-split{ border-color:#2a3852; }
html[data-theme="dark"] .inv-tbl .inv-c2, html[data-theme="dark"] .inv-tbl .inv-uom{ box-shadow:2px 0 0 -1px #2a3852; }

/* Balance Sheet — clickable accordion of Capital / Liabilities / Assets */
.bs-group{ border-bottom:1px solid var(--border); }
.bs-group:last-child{ border-bottom:0; }
.bs-sum{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px;
  cursor:pointer; font-weight:700; list-style:none; }
.bs-sum::-webkit-details-marker{ display:none; }
.bs-sum .chev{ transition:transform .18s ease; margin-right:9px; color:var(--muted); font-size:.9rem; }
.bs-group[open] > .bs-sum .chev{ transform:rotate(90deg); }
.bs-sum .bs-total{ font-variant-numeric:tabular-nums; font-size:1.05rem; }
.bs-body{ padding:0 18px 14px; }
.bs-head-row{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--border); font-weight:600; }
.bs-subhead{ font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-top:14px; margin-bottom:2px; font-weight:700; }
.bs-led{ display:flex; justify-content:space-between; gap:12px; padding:3px 0 3px 20px; font-size:.85rem; color:var(--muted); }
.bs-led .n{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bs-amt{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.bs-empty{ padding:3px 0 3px 20px; font-size:.82rem; color:var(--faint,#94a3b8); font-style:italic; }
html[data-theme="dark"] .bs-group{ border-bottom-color:#2a3852; }
html[data-theme="dark"] .bs-head-row{ border-top-color:#2a3852; }

/* Finance ratio help icon (tooltip trigger on stat cards) */
.fin-help{ color:var(--muted); font-size:.76rem; cursor:help; margin-left:3px; opacity:.65; vertical-align:baseline; }
.fin-help:hover{ opacity:1; color:var(--kz); }

/* Balance Sheet — visible descriptions under each heading */
.bs-sum-l{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bs-sum-desc{ font-size:.76rem; font-weight:400; color:var(--muted); padding-left:24px; max-width:64ch; }
.bs-head-l{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.bs-head-desc{ font-size:.75rem; font-weight:400; color:var(--muted); max-width:64ch; }

/* Finance grids: consistent tabular numerals + size so columns/rows line up evenly */
.tb-tbl input.form-control, .tb-tbl select.form-select,
.tb-tbl td, .tb-tbl th{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1, "lnum" 1; }
.tb-tbl .tb-m, .tb-tbl .tb-m .form-control, .tb-tbl .inv-uom{ font-size:.82rem; }
.tb-tbl .tb-amt{ font-family:inherit; letter-spacing:0; }
/* Trial-Balance grouping select column */
.tb-tbl .tb-grp{ width:210px; }
.tb-tbl .tb-grp .form-select{ font-size:.8rem; }

/* Trial Balance: freeze Group + Ledger Name columns on horizontal scroll.
   Column order is now Group (leftmost) then Ledger Account Name (owner 2026-07-25);
   the A/c No. column was removed. tb-grp width is 210px, so tb-name starts at 210. */
.tb-tbl .tb-act, .tb-tbl .tb-no, .tb-tbl .tb-name, .tb-tbl .tb-grp{ position:sticky; z-index:2; background:#fff; }
.tb-tbl .tb-grp{ left:0; }
.tb-tbl .tb-name{ left:210px; box-shadow:2px 0 0 -1px #e3e8f2; }
/* numbers right-aligned + decimals visible (owner ask): TB month cells + totals */
#tbTable .tb-m, #tbTable .tb-m .form-control{ text-align:right; }
.tb-tbl thead .tb-act, .tb-tbl thead .tb-no, .tb-tbl thead .tb-name, .tb-tbl thead .tb-grp{ z-index:4; background:#f7f9fc; }
.tb-tbl tfoot .tb-act, .tb-tbl tfoot .tb-no, .tb-tbl tfoot .tb-name, .tb-tbl tfoot .tb-grp{ z-index:3; background:#f1f4fb; }
.tb-tbl tbody tr:hover .tb-act, .tb-tbl tbody tr:hover .tb-no, .tb-tbl tbody tr:hover .tb-name, .tb-tbl tbody tr:hover .tb-grp{ background:#f6f8fd; }
html[data-theme="dark"] .tb-tbl .tb-act, html[data-theme="dark"] .tb-tbl .tb-no, html[data-theme="dark"] .tb-tbl .tb-name, html[data-theme="dark"] .tb-tbl .tb-grp{ background:#141c2b; }
html[data-theme="dark"] .tb-tbl thead .tb-act, html[data-theme="dark"] .tb-tbl thead .tb-no, html[data-theme="dark"] .tb-tbl thead .tb-name, html[data-theme="dark"] .tb-tbl thead .tb-grp{ background:#1a2436; }
html[data-theme="dark"] .tb-tbl tfoot .tb-act, html[data-theme="dark"] .tb-tbl tfoot .tb-no, html[data-theme="dark"] .tb-tbl tfoot .tb-name, html[data-theme="dark"] .tb-tbl tfoot .tb-grp{ background:#0f1826; }
html[data-theme="dark"] .tb-tbl tbody tr:hover .tb-act, html[data-theme="dark"] .tb-tbl tbody tr:hover .tb-no, html[data-theme="dark"] .tb-tbl tbody tr:hover .tb-name, html[data-theme="dark"] .tb-tbl tbody tr:hover .tb-grp{ background:#213046; }
html[data-theme="dark"] .tb-tbl .tb-name{ box-shadow:2px 0 0 -1px #2a3852; }

/* ── Trial Balance: single advanced filter panel ─────────────────────────── */
.tbf-btn .tbf-badge{ display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin-left:4px; border-radius:9px;
  background:var(--kz); color:#fff; font-size:.68rem; font-weight:700; line-height:1; }
.tbf-btn.tbf-active{ border-color:var(--kz); color:var(--kz); box-shadow:inset 0 0 0 1px var(--kz); }
.tbf-panel{ width:340px; max-width:92vw; padding:0; border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; }
.tbf-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  border-bottom:1px solid var(--border); background:linear-gradient(120deg,rgba(79,70,229,.07),rgba(6,182,212,.07)); }
.tbf-title{ font-weight:700; font-size:.92rem; display:flex; align-items:center; gap:7px; }
.tbf-title i{ color:var(--kz); }
.tbf-reset{ border:0; background:none; color:var(--muted); font-size:.78rem; font-weight:600; cursor:pointer; padding:0; }
.tbf-reset:hover{ color:var(--bad); }
.tbf-body{ padding:13px 14px; display:flex; flex-direction:column; gap:15px; max-height:62vh; overflow:auto; }
.tbf-label{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); margin-bottom:8px; }
.tbf-search{ position:relative; }
.tbf-search > i{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.85rem; }
.tbf-q{ width:100%; padding:.42rem .6rem .42rem 31px; border:1px solid var(--border);
  border-radius:10px; font-size:.85rem; background:#fff; color:var(--ink); }
.tbf-q:focus{ outline:0; border-color:var(--kz); box-shadow:0 0 0 3px rgba(79,70,229,.13); }
.tbf-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.tbf-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--border);
  border-radius:999px; background:#fff; color:var(--ink); font-size:.79rem; font-weight:600; cursor:pointer;
  transition:border-color .12s, background .12s, color .12s; }
.tbf-chip b{ font-weight:700; color:var(--muted); font-size:.72rem; }
@media (hover:hover){ .tbf-chip:hover{ border-color:var(--kz); } }
.tbf-chip.active{ background:linear-gradient(120deg,var(--kz),var(--kz2)); border-color:transparent; color:#fff; }
.tbf-chip.active b{ color:rgba(255,255,255,.85); }
.tbf-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.tbf-cap{ background:#4F46E5; } .tbf-lia{ background:#F59E0B; } .tbf-ast{ background:#10B981; }
.tbf-pnl{ background:#2563EB; } .tbf-exp{ background:#EF4444; } .tbf-net{ background:#8B5CF6; }
.tbf-mut{ background:#94A3B8; }
.tbf-chip.active .tbf-dot{ box-shadow:0 0 0 2px rgba(255,255,255,.55); }
.tbf-seg{ display:flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.tbf-segbtn{ flex:1; padding:7px 8px; border:0; border-right:1px solid var(--border); background:#fff;
  color:var(--muted); font-size:.8rem; font-weight:600; cursor:pointer; }
.tbf-segbtn:last-child{ border-right:0; }
.tbf-segbtn.active{ background:linear-gradient(120deg,var(--kz),var(--kz2)); color:#fff; }
.tbf-switch{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:.83rem; font-weight:500; margin:0; }
.tbf-switch input{ position:absolute; opacity:0; width:0; height:0; }
.tbf-slider{ position:relative; width:36px; height:20px; border-radius:20px; background:#cbd5e1; flex:0 0 36px; transition:background .15s; }
.tbf-slider::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.tbf-switch input:checked + .tbf-slider{ background:var(--kz); }
.tbf-switch input:checked + .tbf-slider::after{ transform:translateX(16px); }
.tbf-switch input:focus-visible + .tbf-slider{ box-shadow:0 0 0 3px rgba(79,70,229,.28); }
.tbf-foot{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px;
  border-top:1px solid var(--border); background:#f8fafc; }
.tbf-result{ font-size:.8rem; color:var(--muted); }
.tbf-result b{ color:var(--ink); }
html[data-theme="dark"] .tbf-panel{ background:#1E293B; border-color:#334155; }
html[data-theme="dark"] .tbf-head{ border-bottom-color:#334155; background:linear-gradient(120deg,rgba(99,102,241,.14),rgba(6,182,212,.10)); }
html[data-theme="dark"] .tbf-q,
html[data-theme="dark"] .tbf-chip,
html[data-theme="dark"] .tbf-segbtn{ background:#0F172A; color:#E2E8F0; border-color:#334155; }
html[data-theme="dark"] .tbf-segbtn{ border-right-color:#334155; }
html[data-theme="dark"] .tbf-foot{ background:#172033; border-top-color:#334155; }
html[data-theme="dark"] .tbf-result b{ color:#E2E8F0; }
html[data-theme="dark"] .tbf-slider{ background:#475569; }

/* Desktop: user-collapsible sidebar for a wider workspace (state persisted). On
   mobile the sidebar is already off-canvas, so this only applies from lg up. */
.content{ transition:margin-left .25s ease; }
@media (min-width: 992px){
  html.sb-collapsed .sidebar{ transform:translateX(-100%); }
  html.sb-collapsed .content{ margin-left:0; }
}

/* Balance Sheet — master-detail: dropdown sidebar (left) + body panels (right) */
.bs-master{ display:grid; grid-template-columns:340px minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width: 900px){ .bs-master{ grid-template-columns:1fr; } }
.bs-side{ padding:0; overflow:hidden; }
.bs-side-head{ padding:14px 16px 11px; }
.bs-side-head .t{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.bs-side-head .h{ font-size:.75rem; color:#94a3b8; margin-top:2px; }
.bs-navgrp{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:11px 14px; border:0; border-top:1px solid var(--border); background:transparent; cursor:pointer; font:inherit; text-align:left; }
.bs-navgrp .l{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:.9rem; color:var(--ink); }
.bs-navgrp .chev{ color:var(--muted); font-size:.7rem; transition:transform .18s ease; }
.bs-navgrp .amt{ font-variant-numeric:tabular-nums; font-size:.85rem; color:var(--muted); font-weight:600; }
.bs-navgrp.active{ background:#EEF2FF; }
.bs-navgrp.active .l, .bs-navgrp.active .amt{ color:var(--kz); }
.bs-navgrp.active .chev{ transform:rotate(90deg); }
.bs-navsub{ display:none; align-items:center; justify-content:space-between; gap:8px; padding:8px 14px 8px 34px;
  font-size:.82rem; color:var(--muted); cursor:pointer; }
.bs-navsub:hover{ background:var(--mut-bg); }
.bs-navsub.show{ display:flex; }
.bs-navsub .amt{ font-variant-numeric:tabular-nums; }
.bs-navsub.on{ color:var(--kz); font-weight:600; }
.bs-panel{ display:none; }
.bs-panel.active{ display:block; }
.bs-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border); }
.bs-panel-head h4{ font-size:1.15rem; }
.bs-panel-head .desc{ font-size:.8rem; color:var(--muted); margin-top:4px; max-width:66ch; }
.bs-panel-head .tot{ text-align:right; white-space:nowrap; }
.bs-panel-head .tot .k{ font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#94a3b8; }
.bs-panel-head .tot .v{ font-size:1.2rem; font-weight:800; font-variant-numeric:tabular-nums; }
.bs-subblock{ border:1px solid #eef1f8; border-radius:11px; padding:11px 14px 12px; margin-bottom:10px; background:#fcfcfe; }
.bs-subblock .sh{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bs-subblock .sh .nm{ display:flex; align-items:center; gap:8px; font-weight:600; }
.bs-subblock .sh .amt{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bs-subblock .sd{ font-size:.75rem; color:#94a3b8; margin-top:3px; }
.bs-subled{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0; font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.bs-subled .n{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bs-subempty{ font-size:.8rem; color:#94a3b8; font-style:italic; padding:4px 0; }
html[data-theme="dark"] .bs-navgrp{ border-top-color:#233149; }
html[data-theme="dark"] .bs-navgrp.active{ background:#1e2740; }
html[data-theme="dark"] .bs-navgrp.active .l, html[data-theme="dark"] .bs-navgrp.active .amt, html[data-theme="dark"] .bs-navsub.on{ color:#A5B4FC; }
html[data-theme="dark"] .bs-subblock{ background:#0f1826; border-color:#233149; }

/* Sidebar: nested sub-nav (e.g. Balance Sheet analysis → Capital / Liability / Assets) */
.sidebar .nav-sub2{ margin:1px 0 5px 12px; padding-left:8px; border-left:2px solid rgba(255,255,255,.10); }
.sidebar .nav-sub2 a.navlink{ margin:1px 4px; font-size:.85rem; padding:7px 12px; }
.sidebar .nav-sub2 a.navlink .bi-dot{ font-size:1.15rem; margin:0 -2px 0 -4px; }

/* ---- Column filters (table.colfilter + th.cf) --------------------------- */
.cf-btn{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0 3px;margin-left:4px;font-size:.78rem;line-height:1;opacity:.5;vertical-align:middle}
.cf-btn:hover,.cf-btn.cf-on{opacity:1;color:var(--kz)}
.cf-pop{display:none;position:fixed;z-index:1085;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:8px;width:224px}
.cf-pop.cf-open{display:flex;gap:6px;align-items:center}
.cf-pop input{flex:1 1 auto}
html[data-theme="dark"] .cf-btn{color:var(--muted)}
html[data-theme="dark"] .cf-btn:hover,html[data-theme="dark"] .cf-btn.cf-on{color:#A5B4FC}
html[data-theme="dark"] .cf-pop{background:#1E293B;border-color:#334155}

/* "Open <portal>" link inside a sidebar dropdown — distinct from the module list */
.nav-sub .navlink-open{ color:var(--kz); font-weight:600; }
.nav-sub .navlink-open .bi{ color:var(--kz); }
html[data-theme="dark"] .nav-sub .navlink-open, html[data-theme="dark"] .nav-sub .navlink-open .bi{ color:#A5B4FC; }

/* ==========================================================================
   PRINT — shared foundation (project-wide)
   base.html already tags chrome with .no-print but nothing defined it, so it
   only worked on pages carrying their own @media print block (MIS). These
   rules give EVERY page a sane print/Save-as-PDF baseline; a page adds only
   what's specific to its own layout. Primitives:
     .no-print    hide on paper        .print-only  show only on paper
     .kz-phead    formal masthead      .kz-pfoot    report footer
   ========================================================================== */
.print-only{ display:none; }
@media print{
  @page{ size:A4 landscape; margin:11mm 9mm 13mm; }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  /* chrome off */
  .sidebar,.topbar,.no-print,.modal,.modal-backdrop,.toast-container,.offcanvas,
  #globalConfirm,#navprogress,.skip-link{ display:none !important; }
  .content,#main,.page-wrap,main{ margin:0 !important; padding:0 !important; max-width:none !important; width:auto !important; }
  /* always print on white, even when the viewer is in dark mode */
  body,html[data-theme="dark"] body,html[data-theme="dark"]{ background:#fff !important; color:#0f172a !important; }
  body{ font-size:11px; }
  .print-only{ display:block !important; }
  /* cards flatten into bordered report blocks that don't split across pages */
  .card{ box-shadow:none !important; border:1px solid #cbd2df !important; border-radius:6px !important;
         padding:9px 11px !important; margin-bottom:9px !important; break-inside:avoid; page-break-inside:avoid; }
  .card.p-0{ padding:0 !important; }
  .card>h6.page-title,.card .page-title{ font-size:12px !important; margin-bottom:5px !important;
         break-after:avoid; page-break-after:avoid; }
  /* ⚠ EVERY month-wide grid must be released for print, not just Plan The Year's.
     `.tb-tbl .tb-m` hard-codes width:132px and out-ranks a <colgroup>, so a 15-column
     grid demands ~1,856px and simply runs off a 1,061px page — Expense Analysis was
     losing Nov to Mar off the right-hand edge of the paper. This was fixed once for
     `.pl-tbl` and the fix never generalised; here it does. */
  .tb-tbl{ table-layout:auto !important; width:100% !important; min-width:0 !important; }
  .tb-tbl col{ width:auto !important; }
  .tb-tbl .tb-m, .tb-tbl .tb-no, .tb-tbl .tb-name, .tb-tbl .tb-grp,
  .tb-tbl .pl-c1, .tb-tbl .exp-c1, .tb-tbl .inv-c1, .tb-tbl .inv-c2,
  .tb-tbl .inv-cat, .tb-tbl .inv-uom{ width:auto !important; min-width:0 !important; }
  .tb-tbl th, .tb-tbl td{ font-size:9px !important; padding:3px 3px !important; }
  .tb-tbl thead th{ white-space:nowrap; }
  /* ⚠ An <input> CLIPS its value; once the columns above are released to fit the page
     they get narrow, and "66,666.6667" printed as "66,666.". So on paper every grid
     input is replaced by its value as TEXT, which can wrap. The mirror spans are
     created and kept in step by ux.js, so this needs no markup in any template. */
  .tb-tbl input.form-control{ display:none !important; }
  .tb-tbl .pl-v{ display:block !important; font-size:9px; text-align:right;
        color:#0f172a; white-space:normal; overflow-wrap:anywhere; }

  /* scrollers must show everything on paper, and sticky columns must not float */
  .tb-scroll,.table-responsive{ overflow:visible !important; }
  [class*="-c1"],[class*="-c2"],.tb-no,.tb-name,.tb-grp,.inv-cat,.inv-uom,.exp-head,.pl-c1{
         position:static !important; box-shadow:none !important; }
  table thead{ display:table-header-group; }
  table tr{ break-inside:avoid; page-break-inside:avoid; }
  /* masthead / footer */
  .kz-phead{ border-bottom:2px solid var(--kz); padding-bottom:8px; margin-bottom:11px; }
  .kz-phead .co{ font-family:'Plus Jakarta Sans',sans-serif; font-size:19px; font-weight:800; letter-spacing:-.01em; color:#0f172a; }
  .kz-phead .ttl{ font-size:11px; font-weight:700; color:var(--kz); text-transform:uppercase; letter-spacing:.07em; margin-top:2px; }
  .kz-phead .meta{ font-size:10px; color:#475569; margin-top:4px; }
  .kz-phead .amt{ float:right; text-align:right; font-size:9.5px; color:#64748b; font-weight:600;
         text-transform:uppercase; letter-spacing:.04em; }
  .kz-pfoot{ margin-top:9px; padding-top:5px; border-top:1px solid #cbd2df; font-size:8.5px; color:#64748b;
         display:flex; justify-content:space-between; }
}

/* Plan The Year — print. The grid is made of <input>s; on paper they must read as
   plain figures, not form boxes (borders/shadows/spinners stripped, value kept). */
@media print{
  /* The grid carries inline <col style="width:120px"> (150 + 12x120 + 150 = 1740px),
     which on A4 landscape pushes Mar + Total off the paper. A stylesheet !important
     beats an inline style, so release the fixed columns and let the table fit. */
  .pl-tbl col{ width:auto !important; }
  .pl-tbl{ table-layout:auto !important; width:100% !important; min-width:0 !important; font-size:9.5px; }
  /* tight padding buys width for the month columns; the figures are what matter */
  /* nowrap on the HEADINGS only. A month cell must be free to wrap, or an extreme
     figure widens the table past the page edge and is lost at the margin. */
  .pl-tbl th,.pl-tbl td{ padding:3px 3px !important; }
  .pl-tbl thead th{ white-space:nowrap; }
  /* ⚠ .tb-tbl .tb-m hard-codes width:132px and out-ranks the colgroup — release it
     here too, or every month column demands 132px and the grid cannot fit the page. */
  .pl-tbl .tb-m{ width:auto !important; }
  .pl-tbl .pl-c1{ width:auto !important; }
  .pl-tbl thead th{ background:#eef1f7 !important; color:#334155 !important; font-size:8.5px !important; }
  .pl-tbl tfoot td,.pl-tbl tr.table-light td{ background:#e7e8fb !important; }
  .pl-tbl .pl-c1{ background:#eef1f7 !important; font-size:9px !important; }
  /* ⚠ inputs are REPLACED by their value as text, not merely restyled. An <input>
     CLIPS its content — at A4 portrait the month columns squeeze to ~34px and
     "52,00,000" (48px) simply prints cut off, which is what a client reported as
     figures "hiding". Text can wrap; an input can only hide. .pl-v is kept in step
     with its input by ux.js. */
  .pl-tbl input.form-control{ display:none !important; }
  .pl-tbl .pl-v{ display:block !important; font-size:9.5px; text-align:right; color:#0f172a;
         white-space:normal; overflow-wrap:anywhere; }
  .pl-pct{ font-size:8px !important; margin-top:1px !important; }
  /* the chart is supporting material — keep it whole, never split it. Height is
     set on the WRAPPER, not the canvas: scaling a rendered canvas with max-height
     squashes the bitmap instead of re-laying-out the plot. */
  .py-chart{ height:200px !important; break-inside:avoid; page-break-inside:avoid; }
}

/* Plan The Year — the Revenue vs Profit chart.
   ⚠ The canvas MUST take its height from this wrapper. It used to carry only a
   `height="90"` attribute, and once Chart.js had given the x-axis labels and the
   bottom legend their share there were NINE pixels left for the plot: both series
   drew as one flat line, on screen and in the printed PDF, with no readable value
   anywhere. Pair this with `maintainAspectRatio:false` — one without the other does
   nothing. */
/* ── Advisory note (`.recon-bar`) — "read this before you trust the numbers below".
   THREE TONES, because these notes are not equal:
     (base)        info      — how to read the page  (blue)
     .is-warn      warning   — the data is incomplete, the figures may mislead  (amber)
     .is-critical  critical  — the figures are wrong until you act  (red)
   ⚠ Use `_note.html`'s macro, not this markup by hand: it was hand-rolled twice and
   for a while `.recon-bar` had NO CSS AT ALL, so the one element telling a client
   their figures were incomplete rendered as ordinary body copy.
   ⚠ Every note must end with the ACTION that clears it — a link to the page to edit.
   A warning with no way out is just an apology. ── */
.recon-bar{ display:flex; gap:10px; align-items:flex-start;
  background:var(--info-bg); color:var(--info);
  border:1px solid color-mix(in srgb, var(--info) 26%, transparent);
  border-radius:var(--radius-sm); padding:10px 13px; margin:0 0 14px;
  font-size:.88rem; line-height:1.5; }
.recon-bar > i{ font-size:1.05rem; line-height:1.35; flex:0 0 auto; }
.recon-bar b{ font-weight:700; }
.recon-bar a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.recon-bar.is-warn{ background:var(--warn-bg); color:var(--warn);
  border-color:color-mix(in srgb, var(--warn) 26%, transparent); }
.recon-bar.is-critical{ background:var(--bad-bg); color:var(--bad);
  border-color:color-mix(in srgb, var(--bad) 30%, transparent); }
html[data-theme="dark"] .recon-bar{ background:#152738; color:#8fc4f2; border-color:#28496b; }
html[data-theme="dark"] .recon-bar.is-warn{ background:#3a2f12; color:#f0c869; border-color:#5c4a1c; }
html[data-theme="dark"] .recon-bar.is-critical{ background:#3a1c1a; color:#f3a09a; border-color:#6b2f2a; }
@media print{
  /* mono-safe: tone carries no meaning on paper, so it reads as one bordered band */
  .recon-bar, .recon-bar.is-warn, .recon-bar.is-critical{
    background:#fff !important; color:#0f172a !important;
    border:1px solid #94a3b8 !important; font-size:9px; padding:6px 8px; }
}

.pl-v{ display:none; }        /* print-only mirror of a Plan-the-Year input */
.py-chart{ position:relative; height:260px; }
.py-chart .py-chart-off{ display:none; }
.py-chart.is-off canvas{ display:none; }
.py-chart.is-off .py-chart-off{ display:block; }

/* Shareholding analysis — a 100% ownership bar + control facts. Deliberately a
   different shape from the category donut above it on the same page. */
.sh-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.sh-head .k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.sh-head .v{ font-size:1.15rem; font-weight:800; letter-spacing:-.01em; overflow-wrap:anywhere; }
.sh-bar{ margin-top:10px; height:34px; }
.sh-seg{ font-size:.78rem; }
.sh-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(116px,1fr)); gap:9px; margin-top:14px; }
.sh-fact{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px; min-width:0; }
.sh-fact .k{ font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.sh-fact .v{ font-weight:700; font-size:.94rem; margin-top:2px; overflow-wrap:anywhere; }
.sh-fact .d{ font-size:.74rem; color:var(--muted); margin-top:2px; }
.sh-bg-1{ background:var(--sh-1); } .sh-bg-2{ background:var(--sh-2); } .sh-bg-3{ background:var(--sh-3); }
.sh-bg-4{ background:var(--sh-4); } .sh-bg-5{ background:var(--sh-5); } .sh-bg-6{ background:var(--sh-6); }
.sh-bg-7{ background:var(--sh-7); } .sh-bg-8{ background:var(--sh-8); }
html[data-theme="dark"] .sh-fact{ border-color:#334155; }
html[data-theme="dark"] .sh-bar{ border-color:#334155; }

/* Finance Overview — business-health strip, books health, and a roomier
   shareholding card (2026-07-20 dashboard audit). */
.fh-health{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.fh-hgrp{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 13px;
  text-decoration:none; color:inherit; display:block; transition:border-color .15s, box-shadow .15s, transform .15s; }
.fh-hgrp .t{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  font-weight:700; margin-bottom:7px; display:flex; align-items:center; gap:6px; }
.fh-hgrp .t .bi{ color:var(--kz); }
.fh-hgrp .r{ display:flex; justify-content:space-between; gap:10px; font-size:.84rem; padding:3px 0; }
.fh-hgrp .r span{ color:var(--muted); }
.fh-hgrp .r b{ font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (hover:hover){ .fh-hgrp:hover{ border-color:var(--kz); box-shadow:var(--shadow-sm); transform:translateY(-1px); } }
.fh-note{ margin-top:11px; font-size:.8rem; color:var(--muted); background:var(--mut-bg);
  border-radius:var(--radius-sm); padding:8px 11px; }
.fh-books{ display:flex; flex-direction:column; gap:7px; }
.fh-brow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fh-pill{ display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; }
.fh-pill.ok{ color:var(--ok); } .fh-pill.warn{ color:var(--warn); } .fh-pill.bad{ color:var(--bad); }
.fh-budget{ margin-top:13px; padding-top:12px; border-top:1px solid var(--border); }
.sh-card .sh-bar{ height:40px; }
.sh-card .sh-head .v{ font-size:1.35rem; }
html[data-theme="dark"] .fh-hgrp{ border-color:#334155; }
html[data-theme="dark"] .fh-note{ background:#1a2436; }
html[data-theme="dark"] .fh-budget{ border-top-color:#334155; }

/* ===== Ratio charts (.rchart) — the analysis cards, as 12-month trends ==========
   Replaces the single annual number on every finance analysis card. Deliberately
   inline SVG, not Chart.js, for two structural reasons:
     - base.html's theme toggle is a closure that dispatches NO event, so a <canvas>
       could never follow a light/dark switch without new plumbing. SVG inherits the
       custom properties below and re-themes for free, with zero JavaScript.
     - the print foundation forces a white page but does NOT reset the dark-mode
       custom properties, so a dark-configured canvas rasterises white-on-white on A4.
   There is also no axis-tick layer by design: every number near a chart is rendered
   through |inr in Jinja, so Chart.js's western-grouping trap cannot recur.
   Geometry (and gap handling) comes from _fin_chart() server-side. */
.rchart{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rc-l{ font-size:.72rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:5px; }
.rc-l .bi{ font-size:.78rem; }
.rc-svg{ display:block; width:100%; height:auto; overflow:visible; margin-top:4px; }
.rc-grid{ stroke:var(--border); stroke-width:1; }
.rc-zero{ stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3; }
.rc-area{ fill:var(--kz); fill-opacity:.07; stroke:none; }
.rc-path{ fill:none; stroke:var(--kz); stroke-width:2; stroke-linejoin:round;
  stroke-linecap:round; vector-effect:non-scaling-stroke; }
.rc-dot{ fill:var(--card,#fff); stroke:var(--kz); stroke-width:1.5;
  vector-effect:non-scaling-stroke; cursor:help; }
.rc-dot.is-last{ fill:var(--kz); }
.rc-hit{ fill:transparent; cursor:help; }         /* wider hover target than the dot */
.rc-x{ display:flex; gap:1px; margin-top:3px; }
.rc-x span{ flex:1; text-align:center; font-size:.58rem; color:var(--muted);
  font-variant-numeric:tabular-nums; }
.rc-x span.on{ color:var(--kz); font-weight:700; }
/* the value, printed under the last point marker */
.rc-foot{ margin-top:5px; font-size:.78rem; color:var(--muted);
  font-variant-numeric:tabular-nums; }
.rc-foot b{ color:var(--ink); font-size:1.02rem; font-weight:700; }
.rc-foot .rc-mo{ font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; }
.rc-note{ font-size:.68rem; color:var(--muted); margin-top:2px; }
.rc-empty{ font-size:.78rem; color:var(--muted); padding:14px 0 10px; text-align:center; }
/* accent variant, so a page can distinguish a second series */
.rchart.alt .rc-path{ stroke:var(--accent); }
.rchart.alt .rc-area{ fill:var(--accent); }
.rchart.alt .rc-dot{ stroke:var(--accent); }
.rchart.alt .rc-dot.is-last{ fill:var(--accent); }
.rchart.good .rc-path,.rchart.good .rc-dot{ stroke:var(--ok); }
.rchart.good .rc-area{ fill:var(--ok); } .rchart.good .rc-dot.is-last{ fill:var(--ok); }
.rchart.bad .rc-path,.rchart.bad .rc-dot{ stroke:var(--bad); }
.rchart.bad .rc-area{ fill:var(--bad); } .rchart.bad .rc-dot.is-last{ fill:var(--bad); }
html[data-theme="dark"] .rc-grid{ stroke:#2a3852; }
html[data-theme="dark"] .rc-zero{ stroke:#4a5a72; }
html[data-theme="dark"] .rc-path{ stroke:#A5B4FC; }
html[data-theme="dark"] .rc-area{ fill:#A5B4FC; fill-opacity:.10; }
html[data-theme="dark"] .rc-dot{ fill:#1E293B; stroke:#A5B4FC; }
html[data-theme="dark"] .rc-dot.is-last{ fill:#A5B4FC; }
html[data-theme="dark"] .rc-x span.on{ color:#A5B4FC; }
html[data-theme="dark"] .rc-foot b{ color:#E2E8F0; }
html[data-theme="dark"] .rchart.alt .rc-path,html[data-theme="dark"] .rchart.alt .rc-dot{ stroke:#4FB6E8; }
html[data-theme="dark"] .rchart.alt .rc-area,html[data-theme="dark"] .rchart.alt .rc-dot.is-last{ fill:#4FB6E8; }
@media (max-width:420px){ .rc-x span{ font-size:.52rem; } .rc-l{ font-size:.66rem; } }
/* on paper: pin the colours light — the print foundation whitens the page but does
   not reset html[data-theme="dark"]'s custom properties. */
@media print{
  .rc-path{ stroke:#4F46E5 !important; } .rc-dot{ fill:#fff !important; stroke:#4F46E5 !important; }
  .rc-dot.is-last{ fill:#4F46E5 !important; }
  .rc-area{ fill:#4F46E5 !important; fill-opacity:.08 !important; }
  .rc-grid{ stroke:#cbd2df !important; } .rc-zero{ stroke:#94a3b8 !important; }
  .rc-l,.rc-x span,.rc-foot,.rc-note{ color:#475569 !important; }
  .rc-foot b{ color:#0f172a !important; }
  .rchart{ break-inside:avoid; page-break-inside:avoid; }
}

/* ===== Flippable ratio cards ==================================================
   Front = the chart. Back = what the ratio means. Flipped by a real <input
   type=checkbox> so this needs NO JavaScript and stays keyboard-operable — the
   whole finance chart layer ships without JS and this keeps that true.

   Geometry note: the FRONT sits in normal flow and therefore defines the card's
   height; only the BACK is absolutely positioned over it. A common flip
   implementation absolutely positions both faces, which forces a fixed pixel
   height — unworkable here because these cards measure anywhere from 165px at
   375px wide to 253px on a laptop. Letting the front set the height means the
   flip is responsive for free, and Bootstrap's h-100 still equalises the row. */
.rcard{ position:relative; }
.rc-flip{ position:absolute; opacity:0; width:1px; height:1px; margin:0;
  pointer-events:none; }                       /* focusable, not visible */
.rcard-inner{ position:relative; transition:transform .55s cubic-bezier(.2,.7,.3,1);
  transform-style:preserve-3d; }
.rcard-front,.rcard-back{ backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.rcard-back{ position:absolute; inset:0; transform:rotateY(180deg);
  display:flex; flex-direction:column; gap:6px; overflow:auto; }
.rc-flip:checked ~ .rcard-inner{ transform:rotateY(180deg); }
.rc-back-t{ font-size:.72rem; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:5px; }
.rc-back-d{ font-size:.82rem; color:var(--ink); line-height:1.45; }
/* the flip control sits OUTSIDE .rcard-inner, so it never rotates away and one
   button serves both faces */
.rc-flipbtn{ position:absolute; top:0; right:0; z-index:2; cursor:pointer;
  width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--muted); font-size:.92rem; margin:0;
  transition:background .15s, color .15s; }
.rc-flipbtn:hover{ background:var(--mut-bg); color:var(--kz); }
.rc-flip:focus-visible ~ .rc-flipbtn{ outline:2px solid var(--kz); outline-offset:2px; }
.rc-flip:checked ~ .rc-flipbtn{ color:var(--kz); }
.rc-flip:checked ~ .rc-flipbtn .bi::before{ content:"\f129"; }   /* ⓘ → ✕-ish (arrow-left) */
html[data-theme="dark"] .rc-back-d{ color:#E2E8F0; }
html[data-theme="dark"] .rc-flipbtn:hover{ background:#243246; color:#A5B4FC; }
html[data-theme="dark"] .rc-flip:checked ~ .rc-flipbtn{ color:#A5B4FC; }
/* A 3D rotation is decoration. With reduced motion the faces swap instantly —
   the information is identical, only the transition goes. */
@media (prefers-reduced-motion: reduce){
  .rcard-inner{ transition:none; }
}
/* On paper the flip is undone and BOTH faces print, stacked: a printed MIS report
   must carry the explanation, and a rotated card would print its front alone. */
@media print{
  .rcard-inner{ transform:none !important; }
  .rcard-front,.rcard-back{ backface-visibility:visible !important; }
  .rcard-back{ position:static !important; transform:none !important;
    margin-top:8px; padding-top:7px; border-top:1px solid #cbd2df; overflow:visible !important; }
  .rc-back-t{ display:none; }                  /* the front already names the ratio */
  .rc-back-d{ color:#475569 !important; font-size:8.5px !important; }
  .rc-flipbtn{ display:none !important; }
}

/* ===== Month values printed under the chart (.rc-vals) ========================
   Twelve figures, one per point, so a value never needs hovering for. Shares the
   flex geometry of .rc-x above it so letters and numbers line up in one grid.
   Shortened to ₹40.2L / ₹1.36Cr by _inr_short(): '-40,20,000' needs 46.5px and
   even a two-per-row card offers only 46.2px per month. The <title> on each point
   keeps the exact rupees, and every table on the page still shows full figures. */
.rc-vals{ display:flex; gap:1px; margin-top:2px; }
.rc-vals span{ flex:1 1 0; min-width:0; text-align:center; font-size:.6rem;
  color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.rc-vals span.on{ color:var(--ink); font-weight:700; }
html[data-theme="dark"] .rc-vals span.on{ color:#E2E8F0; }
/* Below 576px a full-width card gives ~25.8px per month against ~27.9px needed, so
   the labels would collide. Show every second month; the rest stay on hover and the
   month letters above remain complete, so the axis is not misread. */
@media (max-width:575.98px){
  .rc-vals span:nth-of-type(even){ display:none; }
  .rc-vals span{ font-size:.58rem; }
}
/* 1200-1399px is the tightest the layout ever gets: two cards per row have just
   started, but the viewport has not caught up, leaving ~31px per month against ~33px
   needed for a label like '-108%'. Measured, not guessed — a hair smaller here rather
   than shrinking every label at every width to satisfy one narrow band. */
@media (min-width:1200px) and (max-width:1399.98px){
  .rc-vals span{ font-size:.55rem; letter-spacing:-.01em; }
}
@media print{
  .rc-vals span{ color:#475569 !important; font-size:7.5px !important; }
  .rc-vals span.on{ color:#0f172a !important; }
  .rc-vals span:nth-of-type(even){ display:block !important; }   /* paper is wide */
}

/* ===== Net Profit statement (.np-stmt) — the waterfall on .fin-stmt ===========
   Adds only what the shared primitive doesn't cover: the magnitude-bar column and
   the inline hint. Everything else (sticky heads, .grp/.sub/.tot, .pos/.neg) comes
   from .fin-stmt, which was already designed for exactly this and unused until now. */
.np-stmt{ min-width:680px; }
.np-stmt .np-barcell{ width:22%; min-width:120px; padding-top:12px; padding-bottom:12px; }
.np-stmt .np-barcell .ea-track{ margin:0; }
.np-stmt .np-barhead{ text-align:center; }
.np-stmt .ea-fill.np-loss{ background:linear-gradient(90deg,var(--bad),#e06b62); }
.np-hint{ font-size:.72rem; font-weight:400; color:var(--muted); margin-left:6px;
  text-transform:none; letter-spacing:0; }
@media (max-width:767.98px){
  /* the bar is the first thing to go when space is short — it is a nicety, the
     numbers beside it are not */
  .np-stmt .np-barcell, .np-stmt .np-barhead{ display:none; }
  .np-stmt{ min-width:520px; }
}
@media print{
  .np-stmt .np-barcell .ea-fill{ print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}

/* ===== Category cell in the Sales grid ========================================
   dot · text · pencil, as a 3-column grid. The name and the unit sit in ONE text
   column so their left edges align — they used to be siblings of the dot, so the
   name began after it while the unit began at it, giving a ragged edge. The dot is
   nudged to the optical centre of the name's first line rather than its box top. */
.cat-cell{ display:grid; grid-template-columns:auto auto 1fr; align-items:start;
  column-gap:8px; }
/* In edit mode the leftmost slot (a now-pencil-less spacer) is dropped so the
   name/unit/delete controls sit flush-left in the Sales category column. */
.grid-editing .cat-cell .tb-editbtn-gap{ display:none; }
.grid-editing .cat-cell{ text-align:left; }
.cat-cell .fin-dot{ margin-top:.45em; }
.cat-txt{ min-width:0; }
.cat-name{ font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.cat-uom{ font-size:.74rem; font-weight:500; color:var(--muted); line-height:1.3;
  margin-top:1px; }
.cat-edit{ margin-top:-1px; }
/* the same dot+label pairing inline in a normal table row (Annual Analysis) */
.cat-inline{ display:inline-flex; align-items:center; gap:7px; }
html[data-theme="dark"] .cat-uom{ color:#8a97a8; }

/* ===== Month-grid density (Sales / Purchases / Inventory) =====================
   These grids carry 12 month columns plus two frozen label columns, so every pixel
   spent on padding is a month the client cannot see. Measured before this change:
   the two frozen columns ate 364px of a 1128px viewport (32%) to show "Gold" and
   "Qty (gms)", rows stood 54px tall, and the Category cell wasted 120px of vertical
   space around 37px of content. */
.inv-tbl th, .inv-tbl td{ padding:7px 10px; }
.inv-tbl .inv-uom{ font-size:.78rem; }
/* let the long "Unit Of Measurements" heading wrap instead of forcing the column
   wide enough to hold it on one line */
.inv-tbl thead .inv-c2{ white-space:normal; line-height:1.2; }
/* The dominant "empty white space" in these grids was never the column maths — it
   was ~144 rounded white pill inputs floating with gaps between them, which reads as
   a form rather than a spreadsheet. Filling the cell and flattening the chrome makes
   the grid read as a table: the borders become the grid lines, and an empty cell
   looks like an empty cell rather than a blank card. */
/* ⚠ `.tb-tbl .tb-m` hard-codes width:132px and `.tb-tbl .tb-m .form-control` sets
   text-align:center — BOTH out-rank a colgroup and a plain `input` selector, which is
   why the <col> widths appeared to be ignored. Match their specificity and come later
   in the file. Money reads right-aligned; 118px still holds "12,00,00,000". */
.inv-tbl .tb-m{ padding:0; width:118px; }
.inv-tbl .tb-m .form-control{ width:100%; max-width:none; height:38px; padding:4px 9px;
  border-radius:0; border:0; border-right:1px solid #eef1f7; background:transparent;
  box-shadow:none; text-align:right; font-size:.82rem; }
/* Interaction styling (hover tint + indigo focus ring) applies ONLY to editable cells —
   a locked amount is `readonly` until the grid's Edit button is pressed, so it must show
   NO hover/focus effect (a readonly input is still focusable; without :not([readonly]) the
   focus ring makes a locked cell look editable). */
.inv-tbl .tb-m .form-control:not([readonly]):hover{ background:#f7f9fd; }
.inv-tbl .tb-m .form-control:not([readonly]):focus{ background:#fff; box-shadow:inset 0 0 0 2px var(--kz);
  border-radius:4px; position:relative; z-index:1; }
.inv-tbl tbody tr:hover .tb-m .form-control:not([readonly]){ background:#f9fbff; }
.inv-tbl tbody tr:hover .tb-m .form-control:not([readonly]):focus{ background:#fff; }
html[data-theme="dark"] .inv-tbl .tb-m .form-control{ border-right-color:#243146; }
html[data-theme="dark"] .inv-tbl .tb-m .form-control:not([readonly]):hover,
html[data-theme="dark"] .inv-tbl tbody tr:hover .tb-m .form-control:not([readonly]){ background:#1a2436; }
html[data-theme="dark"] .inv-tbl .tb-m .form-control:not([readonly]):focus{ background:#0f1826; }

/* ⚠ FROZEN-COLUMN OFFSETS ARE PER-LAYOUT — see the finance skill. `.inv-c2` is
   pinned to the Inventory/Purchases first-column width; a grid with a different
   first column MUST declare its own, or the frozen column slides over its
   neighbour once the grid is scrolled. Both now match a 152px first column. */
.inv-tbl .inv-c2, .inv-tbl .inv-uom{ left:152px; }
.sal-tbl .inv-c2, .sal-tbl .inv-uom{ left:152px; }

/* ===== Fully centred analysis tables =========================================
   Sales "Annual Analysis" and Gross Profit "Category-wise" read as comparison
   grids rather than ledgers, so every column is centred — heading AND cell. The
   .num right-alignment and Bootstrap's .text-center both carry weight, so this
   has to beat them; hence the !important, scoped to the opt-in class only. */
.tbl-centre th, .tbl-centre td{ text-align:center !important; }
.tbl-centre tfoot td{ text-align:center !important; }

/* Net Profit statement: every column centred EXCEPT the magnitude bar, which is a
   fixed-width track and must stay flush so the bars share one baseline. */
.np-stmt th, .np-stmt td{ text-align:center !important; }
.np-stmt th.np-barhead, .np-stmt td.np-barcell{ text-align:left !important; }

/* ===== Cost of Goods Sold statement (.cogs-tbl) ==============================
   A read-only month grid, so its cells hold text rather than inputs — the shared
   .inv-tbl input rules don't apply and the numbers need their own right-alignment.
   Its frozen-column offset matches the 152px first column, per the per-layout rule. */
.cogs-tbl .inv-c2, .cogs-tbl .inv-uom{ left:152px; }
.cogs-tbl .cogs-v{ text-align:right; font-variant-numeric:tabular-nums; }
.cogs-tbl .tb-m{ text-align:right; }
.cogs-tbl tbody tr.cogs-row td{ background:#f7f9fd; border-top:1px solid #e3e8f2; }
.cogs-tbl tbody tr.cogs-row .inv-uom{ background:#f7f9fd; }
/* a month with no closing stock recorded — the input that makes the formula misread */
.cogs-tbl .cogs-gap{ background:#fffbf0; }
.cogs-tbl thead th.cogs-gap{ background:#fdf3e0; color:var(--warn); }
html[data-theme="dark"] .cogs-tbl tbody tr.cogs-row td,
html[data-theme="dark"] .cogs-tbl tbody tr.cogs-row .inv-uom{ background:#16202f; border-top-color:#2a3852; }
html[data-theme="dark"] .cogs-tbl .cogs-gap{ background:#221c10; }
html[data-theme="dark"] .cogs-tbl thead th.cogs-gap{ background:#2e2410; color:#e0b862; }

/* ===== Business Growth Plan · Home Work · Score Card ===================== */
/* Week button grid */
.gw-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:8px; }
.gw-week{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:52px; border:1.5px solid var(--border); border-radius:var(--radius-sm); text-decoration:none;
  color:var(--ink); background:#fff; font-weight:700; transition:transform .08s, box-shadow .12s, border-color .12s; }
.gw-week .n{ font-size:1.05rem; line-height:1; }
.gw-week:hover{ transform:translateY(-1px); box-shadow:var(--shadow); border-color:var(--kz); color:var(--kz); }
.gw-week.current{ border-color:var(--kz); background:linear-gradient(120deg,var(--kz),var(--kz2) 55%,var(--accent)); color:#fff; box-shadow:var(--shadow); }
.gw-week.current:hover{ color:#fff; }
.gw-week.sel{ outline:3px solid rgba(79,70,229,.28); outline-offset:1px; }
.gw-week.complete{ border-color:var(--ok); }
.gw-week.locked{ background:var(--mut-bg); color:var(--muted); border-style:dashed; cursor:not-allowed; font-weight:600; }
.gw-week.locked .bi{ font-size:.72rem; margin-top:2px; opacity:.7; }
.gw-dot{ width:7px; height:7px; border-radius:50%; background:var(--muted); margin-top:4px; }
.gw-dot.ok{ background:var(--ok); }
.gw-week.current .gw-dot{ background:#fff; }
.gw-key{ display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:-1px; border:1.5px solid var(--border); background:#fff; }
.gw-key.cur{ background:var(--kz); border-color:var(--kz); }
.gw-key.lock{ background:var(--mut-bg); border-style:dashed; }
/* Weekly message + read-only task list */
.gw-msg{ white-space:pre-wrap; background:var(--mut-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; line-height:1.6; margin-bottom:12px; }
.gw-label{ font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:4px 0 6px; }
.gw-tasks{ list-style:none; padding:0; margin:0; }
.gw-tasks li{ display:flex; gap:9px; padding:7px 0; border-bottom:1px solid var(--border); }
.gw-tasks li:last-child{ border-bottom:0; }
.gw-tasks li .bi{ color:var(--muted); margin-top:2px; }
.gw-tasks li.done .bi{ color:var(--ok); }
.gw-tasks li .t{ font-weight:600; }
.gw-tasks li.done .t{ text-decoration:line-through; color:var(--muted); }
.gw-tasks li .d{ font-size:.85rem; color:var(--muted); }
/* Home Work rows */
.hw-row{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:9px; }
.hw-row.done{ border-color:var(--ok); background:var(--ok-bg); }
.hw-check{ display:flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; margin:0; }
.hw-check input{ width:17px; height:17px; }
.hw-detail{ font-size:.85rem; color:var(--muted); margin:2px 0 6px 25px; }
.hw-work{ display:flex; gap:8px; align-items:flex-end; margin-top:6px; }
.hw-work textarea{ flex:1; }
/* Admin authoring */
.gw-adm-list{ display:flex; flex-direction:column; max-height:70vh; overflow:auto; }
.gw-adm-week{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius-sm);
  text-decoration:none; color:var(--ink); font-weight:600; }
.gw-adm-week:hover{ background:var(--mut-bg); }
.gw-adm-week.sel{ background:linear-gradient(120deg,var(--kz),var(--kz2) 55%,var(--accent)); color:#fff; }
.gw-adm-week.sel .badge{ background:rgba(255,255,255,.25)!important; }
.gw-adm-task{ display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.gw-adm-edit{ display:flex; gap:6px; align-items:center; flex:1; }
.gw-adm-task .form-control{ flex:1; }
html[data-theme="dark"] .gw-week{ background:#1E293B; color:#E2E8F0; border-color:#334155; }
html[data-theme="dark"] .gw-week:hover{ color:#A5B4FC; border-color:#A5B4FC; }
html[data-theme="dark"] .gw-week.locked{ background:#141d2b; color:#8a97a8; }
html[data-theme="dark"] .gw-key{ background:#1E293B; border-color:#334155; }
html[data-theme="dark"] .gw-msg{ background:#141d2b; border-color:#334155; }

/* ===== Coverflow carousel (Business Growth Plan week cards) =============
   Cards carry the whole week (message + tasks) and use the SYSTEM theme:
   a surface card (like every other card) with a brand-gradient header. */
.cf-wrap{ display:flex; align-items:center; gap:6px; margin:6px 0 2px; }
.cf-stage{ flex:1; position:relative; height:520px; perspective:1750px; overflow:hidden; outline:none; touch-action:pan-y; }
.cf-track{ position:absolute; inset:0; transform-style:preserve-3d; }
.cf-card{ position:absolute; left:50%; top:50%; width:468px; height:500px; margin:-250px 0 0 -234px;
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  background:#fff; color:var(--ink); display:flex; flex-direction:column; will-change:transform,opacity;
  box-shadow:0 20px 46px -18px rgba(15,23,42,.45);
  transition:transform .5s cubic-bezier(.2,.75,.2,1), opacity .5s; backface-visibility:hidden; }
.cf-card.cf-active{ cursor:default; border-color:var(--kz); box-shadow:0 34px 72px -22px rgba(15,23,42,.55); }
/* header — brand gradient, identical across cards (the system's signature) */
.cf-head{ position:relative; flex:0 0 auto; padding:18px 20px 16px; color:#fff;
  background:linear-gradient(120deg,var(--kz),var(--kz2) 55%,var(--accent)); }
.cf-card.locked .cf-head{ background:linear-gradient(120deg,#64748b,#475569); }
.cf-card.complete .cf-head{ background:linear-gradient(120deg,#0f9d63,#157a5b 60%,#0d9488); }
.cf-eyebrow{ display:block; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.82; }
.cf-title{ display:block; margin-top:4px; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.35rem;
  font-weight:800; line-height:1.16; letter-spacing:-.02em; text-wrap:balance; padding-right:52px; }
.cf-ring{ position:absolute; top:17px; right:18px; width:38px; height:38px; border-radius:50%;
  background:conic-gradient(#fff calc(var(--p,0)*1%), rgba(255,255,255,.28) 0);
  -webkit-mask:radial-gradient(closest-side, transparent 63%, #000 65%); mask:radial-gradient(closest-side, transparent 63%, #000 65%); }
/* body — surface, holds message + tasks */
.cf-body{ flex:1 1 auto; overflow-y:auto; padding:16px 19px 18px; display:flex; flex-direction:column; }
.cf-msg{ white-space:pre-wrap; font-size:.95rem; line-height:1.62; margin:0 0 15px; color:var(--ink);
  padding-left:13px; border-left:3px solid var(--kz); }
.cf-tlabel{ font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin:0 0 4px; }
.cf-tasks{ list-style:none; padding:0; margin:0 0 14px; }
.cf-tasks li{ position:relative; padding:8px 0 8px 22px; border-bottom:1px solid var(--border); }
.cf-tasks li:last-child{ border-bottom:0; }
.cf-tasks li::before{ content:"\203A"; position:absolute; left:3px; top:6px; font-weight:800;
  font-size:1.05rem; line-height:1; color:var(--kz); }        /* › pointer */
.cf-tasks li.done::before{ content:"\2713"; color:var(--ok); font-size:.92rem; top:8px; left:1px; }  /* ✓ */
.cf-tasks li .t{ display:block; font-weight:600; font-size:.94rem; line-height:1.4; color:var(--ink); }
.cf-tasks li.done .t{ text-decoration:line-through; text-decoration-thickness:1px; color:var(--muted); }
.cf-tasks li .d{ display:block; font-size:.82rem; color:var(--muted); margin-top:2px; line-height:1.45; }
.cf-cta{ margin-top:auto; align-self:flex-start; }
.cf-cta-row{ margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; }
.cf-cta-row .cf-cta{ margin-top:0; }
/* Week jump strip (Business Growth Plan / Work Log) — Week 1…38 pills */
.gw-weekstrip{ display:flex; gap:6px; overflow-x:auto; padding:6px 2px 10px; margin-bottom:4px; scrollbar-width:thin; scroll-behavior:smooth; }
.gw-wpill{ flex:0 0 auto; min-width:38px; height:38px; padding:0 8px; border:1px solid var(--border); border-radius:11px;
  background:#fff; color:var(--ink); font-weight:700; font-size:.86rem; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:3px; text-decoration:none; transition:transform .08s, border-color .15s, background .15s, color .15s; }
.gw-wpill .wn{ line-height:1; }
.gw-wpill .bi{ font-size:.72rem; opacity:.85; }
.gw-wpill:hover{ border-color:var(--kz2); color:var(--kz); transform:translateY(-1px); text-decoration:none; }
.gw-wpill.on{ background:linear-gradient(120deg,var(--kz),var(--kz2) 55%,var(--accent)); border-color:transparent; color:#fff; box-shadow:var(--shadow-sm); }
.gw-wpill.current:not(.on){ border-color:var(--kz); color:var(--kz); }
.gw-wpill.done:not(.on){ border-color:var(--ok); color:var(--ok); }
.gw-wpill.locked{ background:var(--mut-bg); color:var(--muted); border-style:dashed; cursor:not-allowed; }
.gw-wpill.locked:hover{ transform:none; border-color:var(--border); color:var(--muted); }
.wl-text{ white-space:pre-wrap; font-size:.9rem; color:var(--ink); line-height:1.55; }
html[data-theme="dark"] .gw-wpill{ background:#1E293B; color:#E2E8F0; border-color:#334155; }
html[data-theme="dark"] .gw-wpill.locked{ background:#141d2b; color:#8a97a8; }
html[data-theme="dark"] .gw-wpill.current:not(.on){ border-color:#A5B4FC; color:#A5B4FC; }
html[data-theme="dark"] .wl-text{ color:#E2E8F0; }
.cf-note{ display:flex; gap:12px; align-items:flex-start; margin:auto 0; }
.cf-note>.bi{ font-size:1.5rem; color:var(--kz); margin-top:1px; }
.cf-note b{ display:block; color:var(--ink); }
.cf-note span{ display:block; font-size:.86rem; color:var(--muted); margin-top:2px; }
.cf-nav{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:1px solid var(--border);
  background:#fff; color:var(--kz); display:flex; align-items:center; justify-content:center; font-size:1.15rem;
  cursor:pointer; box-shadow:var(--shadow); z-index:60; transition:background .15s,color .15s,transform .08s; }
.cf-nav:hover{ background:var(--kz); color:#fff; }
.cf-nav:active{ transform:scale(.94); }
.cf-hint{ text-align:center; font-size:.8rem; margin:2px 0 12px; }
@media (max-width:640px){
  .cf-stage{ height:456px; perspective:1200px; }
  .cf-card{ width:292px; height:454px; margin:-227px 0 0 -146px; }
  .cf-title{ font-size:1.08rem; padding-right:44px; }
  .cf-nav{ width:36px; height:36px; }
}
@media (prefers-reduced-motion: reduce){ .cf-card{ transition:none; } }
html[data-theme="dark"] .cf-card{ background:#1E293B; color:#E2E8F0; border-color:#334155; }
html[data-theme="dark"] .cf-card.cf-active{ border-color:#A5B4FC; }
html[data-theme="dark"] .cf-tasks li{ border-bottom-color:rgba(148,163,184,.22); }
html[data-theme="dark"] .cf-msg,
html[data-theme="dark"] .cf-tasks li .t,
html[data-theme="dark"] .cf-note b,
html[data-theme="dark"] .cf-tlabel,
html[data-theme="dark"] .cf-tasks li::before{ color:#E2E8F0; }
html[data-theme="dark"] .cf-tasks li.done .t{ color:#94A3B8; }
html[data-theme="dark"] .cf-tasks li .d{ color:#94A3B8; }
html[data-theme="dark"] .cf-note span{ color:#CBD5E1; }
html[data-theme="dark"] .cf-nav{ background:#1E293B; color:#A5B4FC; border-color:#334155; }
html[data-theme="dark"] .cf-nav:hover{ background:var(--kz); color:#fff; }