/* ============================================================================
   juribooks-executive-theme-v1.css — THE application theme.

   Authority: JURIBOOKS-EXECUTIVE-DESIGN-SYSTEM.md (derived from the executive
   Home). Scope: html[data-jb-theme="executive"], set before first paint by the
   marker script in index.html.

   HOW IT STAYS AUTHORITATIVE WITHOUT AN !IMPORTANT ARMS RACE
   1. The ten palette/brand skins that competed with each other (skin, exhibit,
      dashboard-skin, premium, odoo-skin, brand, sections, railpos, applecraft,
      plain) are no longer applied under this theme (index.html links them with
      media="not all"; see EXECUTIVE-CASCADE-AUDIT.md). The Odoo / Ledger
      Classic layers are attribute-scoped to their own theme names and so are
      inactive too.
   2. What remains is the token-driven base, the typography authority (V5),
      functional layers and this file. Type sizes that V5 fixes are set here
      through V5's own tokens (--type-*), not by out-ranking V5.
   3. Colour, border, radius and spacing rules here out-rank the base by
      specificity alone. !important is used only where a value is written as an
      inline style by a script this theme may not edit (noted where it occurs).

   WHAT THIS FILE NEVER TOUCHES
   #feeNote (a document, not an app surface); print (the print document carries
   no theme marker, so none of this reaches paper); any calculation, route,
   permission or stored value.
   ========================================================================== */

/* ============================================================== 1. TOKENS */
html[data-jb-theme="executive"] {
  color-scheme: light;

  --shell-navy: #102B4C; --shell-navy-deep: #0B223E; --shell-navy-soft: #17395E;
  --primary-blue: #1672E8; --primary-blue-hover: #0F63CE; --primary-blue-soft: #EAF3FF;
  --canvas: #F4F8FC; --surface: #FFFFFF; --surface-soft: #F8FAFD;
  --border: #DFE6EE; --border-soft: #EBF0F5; --border-strong: #C8D1DC;
  --ink: #162033; --ink-soft: #4E5A6D; --muted: #667186; --placeholder: #667085;
  --success: #19A974; --success-soft: #E3F7EF; --success-ink: #0F7A52;
  --warning: #E9A620; --warning-soft: #FFF4D8; --warning-ink: #8A5D00;
  --danger: #E44757;  --danger-soft: #FDE8EC;  --danger-ink: #B42335;
  --info: #2587D9;    --info-soft: #E5F2FC;    --info-ink: #1B5E9E;
  --purple: #8B5CF6;  --purple-soft: #F0EAFE;
  --shadow-sm: 0 1px 2px rgba(16, 43, 76, .04), 0 4px 12px rgba(16, 43, 76, .05);
  --shadow-popover: 0 18px 50px rgba(16, 43, 76, .18);
  --radius-sm: 5px; --radius-md: 7px; --radius-lg: 9px;
  --row-h: 36px; --ctl-h: 38px; --btn-h: 36px;
  --th-bg: #F3F6FA; --row-zebra: #FAFBFD; --row-hover: #F2F7FE; --row-selected: #EAF3FF;
  --font-exec: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-code: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* ---- the names every existing screen already reads ---- */
  --navy: #102B4C; --navy-700: #0B223E; --navy-600: #17395E; --navy-300: #8FA6C2;
  --fill-navy: #1672E8; --fill-navy-hover: #0F63CE; --fill-navy-active: #0D56B4;
  --accent: #1672E8; --on-navy: #FFFFFF;
  --paper: #F4F8FC; --surface-2: #F8FAFD; --surface-3: #EEF2F7;
  --line: #DFE6EE; --line-2: #D3DCE6; --line-strong: #C8D1DC;
  --mute: #667186; --mute-2: #667186;
  --debit: #1B5E9E; --bg-debit: #E5F2FC;
  --credit: #B42335; --bg-credit: #FDE8EC;
  --balanced: #0F7A52; --bg-balanced: #E3F7EF;
  --flag: #8A5D00; --bg-flag: #FFF4D8;
  --radius: 6px; --r-sm: 5px; --r-lg: 9px;
  --ring: 0 0 0 3px #EAF3FF;
  --shadow: var(--shadow-sm); --sh-1: var(--shadow-sm); --sh-3: var(--shadow-popover);
  --jb-navy: #102B4C; --jb-canvas: #F4F8FC; --jb-orange: #1672E8;

  /* ---- V5 typography tokens (the approved scale) ---- */
  --type-ink: #162033; --type-ink-soft: #4E5A6D; --type-secondary: #4E5A6D;
  --type-muted: #667186; --type-placeholder: #667085;
  --type-button-size: 12px; --type-input-size: 13px; --type-tab-size: 12px; --type-panel-size: 14px;
  --type-label-weight: 600; --type-th-weight: 600; --type-eyebrow-weight: 600; --type-badge-weight: 600;
  --type-th-size-v4: 11px;    /* table headings: whole pixels (V4 used 10.5px) */

  /* ---- charts: blue / muted purple / neutrals; status colours for status only ---- */
  --chart-1: #1672E8; --chart-2: #A57CF7; --chart-3: #8FA6C2; --chart-4: #5B8FD8;
  --chart-5: #C8B4F9; --chart-6: #B8C4D2; --chart-7: #768297; --chart-8: #D3DCE6;
  --chart-success: #19A974; --chart-warning: #E9A620; --chart-danger: #E44757;
  --chart-grid: #EBF0F5; --chart-ink: #162033; --chart-muted: #4E5A6D;
  --chart-card-bg: #FFFFFF; --chart-card-border: #DFE6EE; --chart-label-bg: #FFFFFF;
}
/* The fee note is a document, not an app surface: inside it the type tokens
   keep the typography layer's own defaults (juribooks-sharp-type-v5.css :root),
   so nothing of the interface theme reaches it. */
html[data-jb-theme="executive"] #feeNote {
  /* every V5 token back to the typography layer's own default */
  --type-th-size-v4: 11px; --type-button-size: 13px; --type-input-size: 14px; --type-tab-size: 13px; --type-panel-size: 15px;
  --type-label-weight: 700; --type-th-weight: 700; --type-eyebrow-weight: 700; --type-badge-weight: 700; --type-worksheet-input-size: 14px;
  --type-ink: #252933; --type-ink-soft: #434A55; --type-secondary: #4D5562; --type-muted: #626B78; --type-placeholder: #667085;
}
/* The Journal worksheet keeps its bold labels and headings (a denser, heavier
   grid by design; the V5 suite pins T8/T10 there). */
html[data-jb-theme="executive"] #view-batch { --type-label-weight: 700; --type-th-weight: 700; }
/* The Payment Voucher is a form, so it takes the form input size (13px); the
   Journal worksheet keeps 14px in its grid (V5 T6). */
html[data-jb-theme="executive"] #view-post { --type-worksheet-input-size: 13px; }

/* The old dark/light and skin preferences may not change the product shell. */
html[data-jb-theme="executive"] body { background: var(--canvas); color: var(--ink); }
/* The old theme-cycle button belongs to the retired rail and cannot change the
   product theme any more (its handler returns early), so it is hidden. */
html[data-jb-theme="executive"] #themeBtn { display: none !important; }

@media screen {

/* ============================================================== 2. PAGE HEADER
   The app's own title bar (#vTitle / #vSub) becomes the page header on every
   screen; its utility buttons and status chips sit on the right. */
html[data-jb-theme="executive"] .main > header.topbar {
  min-height: 72px; padding: 12px 24px; gap: 14px; flex-wrap: nowrap;
  background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none;
}
html[data-jb-theme="executive"] .main > header.topbar .tb-title { display: block; min-width: 0; flex: 1 1 auto; }   /* the old hide rule is a legacy skin section, off under this theme */
html[data-jb-theme="executive"] .main > header.topbar #vTitle {
  margin: 0; font-family: var(--font-exec); font-size: 22px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.015em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-jb-theme="executive"] .main > header.topbar #vSub {
  margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-jb-theme="executive"] .main > header.topbar .spacer { display: none; }
/* A fixed order, whatever a module inserts and wherever it inserts it:
   title first, then the page's actions, then status. */
html[data-jb-theme="executive"] .main > header.topbar .tb-title { order: 1; }
html[data-jb-theme="executive"] .main > header.topbar .tb-actions { order: 2; }
html[data-jb-theme="executive"] .main > header.topbar .tb-stats { order: 3; }
html[data-jb-theme="executive"] .main > header.topbar > *:not(.tb-title):not(.tb-actions):not(.tb-stats) { order: 3; }
/* Utility controls (lock, text size, print options) keep their icon only; the
   label is still there for screen readers through title/aria-label. */
html[data-jb-theme="executive"] .main > header.topbar :is(#lockBtn, #zoomCtl) span:not(.ico) { display: none; }
html[data-jb-theme="executive"] .main > header.topbar :is(#lockBtn, #zoomCtl, .btn-icon) { min-width: 36px; padding: 0 9px; }
html[data-jb-theme="executive"] .main > header.topbar #apprWrap, html[data-jb-theme="executive"] .main > header.topbar #printWrap { display: inline-flex; }
html[data-jb-theme="executive"] .main > header.topbar .tb-actions { display: flex; align-items: center; gap: 8px; flex: none; }
html[data-jb-theme="executive"] .main > header.topbar .tb-stats { display: flex; gap: 6px; flex: none; }
html[data-jb-theme="executive"] .main > header.topbar .stat-chip {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 1px;
  min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-soft); box-shadow: none;
}
html[data-jb-theme="executive"] .main > header.topbar .stat-chip .v { font-family: var(--font-exec); font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.1; }
html[data-jb-theme="executive"] .main > header.topbar .stat-chip .l { font-size: var(--text-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); line-height: 1.1; }
html[data-jb-theme="executive"] .main > header.topbar .stat-chip .v { font-family: var(--font-exec); }
/* Two of the three header chips are read-outs that belong to a screen, not to
   every page: the account count (Chart of accounts) and the active PV
   reference (Payment Voucher). The storage state stays, because it tells the
   firm their work is saved. Nothing is removed, only hidden from the header. */
html[data-jb-theme="executive"] .main > header.topbar .tb-stats .stat-chip:not(#saveChip):not(#cloudChip) { display: none; }
html[data-jb-theme="executive"] .main > header.topbar .stat-chip.save-ok .v { color: var(--success-ink); }
html[data-jb-theme="executive"] .main > header.topbar .stat-chip.save-bad { border-color: var(--danger); background: var(--danger-soft); }
/* Connection / account chip, moved into the command bar by the shell. */
html[data-jb-theme="executive"] .xs-cmd-right .xs-cloud-chip {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0;
  height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-soft); box-shadow: none; white-space: nowrap; max-width: 190px; overflow: hidden; cursor: pointer;
}
html[data-jb-theme="executive"] .xs-cmd-right .xs-cloud-chip:hover { border-color: var(--primary-blue); background: var(--primary-blue-soft); }
html[data-jb-theme="executive"] .xs-cmd-right .xs-cloud-chip .v { font-family: var(--font-exec); font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.15; text-transform: none; letter-spacing: 0; }
html[data-jb-theme="executive"] .xs-cmd-right .xs-cloud-chip .l { font-family: var(--font-exec); font-size: var(--text-xs); font-weight: 500; color: var(--ink-soft); line-height: 1.15; text-transform: none; letter-spacing: 0; }
html[data-jb-theme="executive"] .xs-cmd-right .xs-cloud-chip.save-bad { border-color: #F3C7CE; background: var(--danger-soft); }
html[data-jb-theme="executive"] .xs-cmd-right .xs-cloud-chip.save-bad .v { color: var(--danger-ink); }
html[data-jb-theme="executive"] .xs-cmd-right .xs-cloud-chip.save-ok { border-color: #BFE8D6; background: var(--success-soft); }
html[data-jb-theme="executive"] .xs-cmd-right .xs-cloud-chip.save-ok .v { color: var(--success-ink); }
@media (max-width: 900px) { html[data-jb-theme="executive"] .xs-cmd-right .xs-cloud-chip { display: none; } }

/* A heading inside the page that only repeats the page title (flagged by the
   shell after each render) is hidden on screen; it still prints. */
html[data-jb-theme="executive"] .xs-dup-title { display: none !important; }

/* ============================================================== 3. CANVAS */
html[data-jb-theme="executive"] .main,
html[data-jb-theme="executive"] .main > .view { background: var(--canvas); }
html[data-jb-theme="executive"] .main > .view { padding: 18px 24px 64px; color: var(--ink); }

/* ============================================================== 4. BUTTONS */
html[data-jb-theme="executive"] .main .btn,
html[data-jb-theme="executive"] .modal .btn,
html[data-jb-theme="executive"] .drill-foot .btn,
html[data-jb-theme="executive"] .a2-panel .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--btn-h); padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); color: var(--ink); box-shadow: none; filter: none;
  font-family: var(--font-exec); line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
html[data-jb-theme="executive"] .main .btn:hover,
html[data-jb-theme="executive"] .modal .btn:hover,
html[data-jb-theme="executive"] .drill-foot .btn:hover,
html[data-jb-theme="executive"] .a2-panel .btn:hover { background: var(--primary-blue-soft); border-color: var(--primary-blue); color: var(--ink); }
html[data-jb-theme="executive"] .main .btn svg,
html[data-jb-theme="executive"] .modal .btn svg { width: 16px; height: 16px; flex: none; }
html[data-jb-theme="executive"] :is(.main, .modal, .drill-foot, .a2-panel) .btn.primary,
html[data-jb-theme="executive"] :is(.main, .modal, .drill-foot, .a2-panel) button.primary {
  background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; box-shadow: none; border-radius: 6px;
}
html[data-jb-theme="executive"] :is(.main, .modal, .drill-foot, .a2-panel) .btn.primary:hover,
html[data-jb-theme="executive"] :is(.main, .modal, .drill-foot, .a2-panel) button.primary:hover { background: var(--primary-blue-hover); border-color: var(--primary-blue-hover); color: #fff; }
html[data-jb-theme="executive"] :is(.main, .modal, .drill-foot, .a2-panel) .btn.danger { background: var(--surface); border-color: var(--border-strong); color: var(--danger-ink); }
html[data-jb-theme="executive"] :is(.main, .modal, .drill-foot, .a2-panel) .btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-ink); }
html[data-jb-theme="executive"] :is(.main, .modal) .btn.ghost { background: transparent; border-color: transparent; color: var(--primary-blue); }
html[data-jb-theme="executive"] :is(.main, .modal) .btn:disabled,
html[data-jb-theme="executive"] :is(.main, .modal) .btn[disabled] { background: var(--surface-soft); border-color: var(--border); color: var(--muted); cursor: not-allowed; }
html[data-jb-theme="executive"] :is(.main, .modal) .btn:active { transform: none; }
html[data-jb-theme="executive"] .main .btn-icon { min-width: var(--btn-h); padding: 0 9px; }
/* index.html makes everything inside a table cell inherit the cell's size with
   `.view .tb-tbl td * { font-size: inherit !important }` (uniform report
   sizing). A button in a cell is still a button: only !important reaches it. */
html[data-jb-theme="executive"] .main .view :is(.tb-tbl, .stmt) td .btn:not(#feeNote *) { font-size: var(--type-button-size) !important; }
html[data-jb-theme="executive"] .main .btn-mini { min-height: 28px; padding: 0 10px; border-radius: 6px; }
html[data-jb-theme="executive"] .icon-btn {
  width: 32px; height: 32px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--ink-soft);
}
html[data-jb-theme="executive"] .icon-btn:hover { border-color: var(--primary-blue); color: var(--primary-blue); background: var(--primary-blue-soft); }
html[data-jb-theme="executive"] :is(.main, .modal, .a2-panel) :is(.btn, button, a, [tabindex]):focus-visible {
  outline: 2px solid var(--primary-blue); outline-offset: 2px; box-shadow: none;
}
/* links in content */
html[data-jb-theme="executive"] .main .view a:not(.btn) { color: var(--primary-blue); }

/* ============================================================== 5. FORMS */
html[data-jb-theme="executive"] .main :is(.inp, .pf input, .pf select, .pf textarea, .period-bar input, .period-bar select),
html[data-jb-theme="executive"] .main .view :is(input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="search"], input[type="tel"], input[type="month"], input[type="password"], input:not([type]), select, textarea):not(#feeNote *),
html[data-jb-theme="executive"] .modal :is(.inp, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: var(--ctl-h); border: 1px solid var(--border-strong); border-radius: 6px;
  background-color: var(--surface); box-shadow: none; font-family: var(--font-exec);
}
html[data-jb-theme="executive"] .main .view textarea:not(#feeNote *), html[data-jb-theme="executive"] .modal textarea { padding-top: 8px; }
html[data-jb-theme="executive"] .main :is(.inp, input, select, textarea):hover:not(:disabled):not(:focus) { border-color: #9FB0C4; }
html[data-jb-theme="executive"] .main :is(.inp, input, select, textarea):focus,
html[data-jb-theme="executive"] .modal :is(.inp, input, select, textarea):focus {
  border-color: var(--primary-blue); box-shadow: 0 0 0 3px var(--primary-blue-soft);
  outline: 2px solid var(--primary-blue); outline-offset: 1px;   /* visible in forced colours too */
}
html[data-jb-theme="executive"] .main :is(.inp, input, select, textarea):disabled,
html[data-jb-theme="executive"] .main :is(.inp, input, select, textarea)[readonly] { background-color: var(--surface-soft); color: var(--ink-soft); }
html[data-jb-theme="executive"] .main input[type="checkbox"], html[data-jb-theme="executive"] .main input[type="radio"],
html[data-jb-theme="executive"] .modal input[type="checkbox"], html[data-jb-theme="executive"] .modal input[type="radio"] { accent-color: var(--primary-blue); width: 16px; height: 16px; min-height: 0; }
html[data-jb-theme="executive"] :is(.main, .modal) :is(.fld, .pf label, .field-label) { text-transform: none; letter-spacing: .01em; margin-bottom: 6px; color: var(--ink-soft); }
html[data-jb-theme="executive"] .main .pf { gap: 6px; }
html[data-jb-theme="executive"] .main .pf-grid { gap: 14px 16px; }
html[data-jb-theme="executive"] .main :is(.help, .hint, .helper, .hnote) { font-size: 11px; font-weight: 400; color: var(--ink-soft); line-height: 1.5; }
html[data-jb-theme="executive"] .main .period-bar {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: none;
  padding: 10px 12px; gap: 10px 12px; margin-bottom: 14px;
}

/* ============================================================== 6. CARDS, SECTIONS */
html[data-jb-theme="executive"] .main .card,
html[data-jb-theme="executive"] .main .panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm);
}
html[data-jb-theme="executive"] .main .card:hover { box-shadow: var(--shadow-sm); transform: none; }
html[data-jb-theme="executive"] .main .card > :is(h2, h3), html[data-jb-theme="executive"] .main .section-heading { letter-spacing: -.005em; }
/* The eyebrow is a section heading: ink, title case as written, blue tick. */
html[data-jb-theme="executive"] .main .eyebrow {
  color: var(--ink); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; gap: 8px;
  border-bottom: 1px solid var(--border-soft); padding-bottom: 8px;
}
html[data-jb-theme="executive"] .main .eyebrow::before { content: none; }
html[data-jb-theme="executive"] .main :is(.imp-note, .note, .callout) {
  background: var(--info-soft); border: 1px solid #C9E1F6; border-radius: 7px; color: var(--ink); font-size: 12px; line-height: 1.55;
}
html[data-jb-theme="executive"] .main .imp-ok { color: var(--success-ink); }
html[data-jb-theme="executive"] .main .imp-fail { color: var(--danger-ink); }

/* ============================================================== 7. TABS */
html[data-jb-theme="executive"] .main .rtabs {
  display: flex; gap: 2px; width: 100%; padding: 0; margin: 0 0 16px; overflow-x: auto;
  background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none;
  scrollbar-width: thin;
}
html[data-jb-theme="executive"] .main .rtab {
  flex: none; min-height: var(--ctl-h); padding: 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--ink-soft); font-family: var(--font-exec); font-size: 12px; font-weight: 600; box-shadow: none; white-space: nowrap;
}
html[data-jb-theme="executive"] .main .rtab:hover { color: var(--ink); background: transparent; }
html[data-jb-theme="executive"] .main .rtab.on { color: var(--primary-blue); border-bottom-color: var(--primary-blue); background: transparent; font-weight: 600; }
/* segmented controls */
html[data-jb-theme="executive"] .main .seg { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 7px; padding: 3px; }
html[data-jb-theme="executive"] .main .seg button { border: 0; border-radius: 5px; background: transparent; color: var(--ink-soft); box-shadow: none; min-height: 30px; }
html[data-jb-theme="executive"] .main .seg button.on { background: var(--surface); color: var(--primary-blue); box-shadow: 0 1px 2px rgba(16, 43, 76, .08); }
/* report / settings side lists */
html[data-jb-theme="executive"] .main :is(.rlist, .set-list) { border-right: 1px solid var(--border); }
html[data-jb-theme="executive"] .main :is(.rlist-h, .set-list-h) { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; color: var(--muted); }
html[data-jb-theme="executive"] .main :is(.rlist-item, .set-list-item) {
  border-radius: 6px; padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--ink); border-left: 0;
}
html[data-jb-theme="executive"] .main :is(.rlist-item, .set-list-item):hover { background: var(--surface-soft); color: var(--ink); }
html[data-jb-theme="executive"] .main :is(.rlist-item, .set-list-item):is(.on, .active, [aria-current="page"], [aria-selected="true"]) {
  background: var(--primary-blue-soft); color: var(--primary-blue); font-weight: 600; box-shadow: none;
}

/* ============================================================== 8. TABLES
   Operational tables only. Report sheets (.rbody) keep their formal ruled
   treatment exactly as the report stylesheet draws it. */
html[data-jb-theme="executive"] .main :is(.tb-tbl, .vat-tbl, .coa-tbl, .recent-tbl, .lines-tbl):not(#feeNote *):not(.rbody *) {
  border-collapse: separate; border-spacing: 0; background: var(--surface);
}
html[data-jb-theme="executive"] .main :is(.tb-tbl, .vat-tbl, .coa-tbl, .recent-tbl, .lines-tbl):not(#feeNote *):not(.rbody *) thead th {
  height: var(--row-h); padding: 0 12px; background: var(--th-bg); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border); border-top: 0; white-space: nowrap; vertical-align: middle;
}
html[data-jb-theme="executive"] .main :is(.tb-tbl, .vat-tbl, .coa-tbl, .recent-tbl, .lines-tbl):not(#feeNote *):not(.rbody *) tbody td {
  height: var(--row-h); padding: 6px 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface); vertical-align: middle;
}
html[data-jb-theme="executive"] .main :is(.tb-tbl, .vat-tbl, .coa-tbl, .recent-tbl, .lines-tbl):not(#feeNote *):not(.rbody *) tbody tr:nth-child(even) > td { background: var(--row-zebra); }
html[data-jb-theme="executive"] .main :is(.tb-tbl, .vat-tbl, .coa-tbl, .recent-tbl, .lines-tbl):not(#feeNote *):not(.rbody *) tbody tr:hover > td { background: var(--row-hover); }
html[data-jb-theme="executive"] .main :is(.tb-tbl, .vat-tbl, .coa-tbl, .recent-tbl, .lines-tbl):not(#feeNote *):not(.rbody *) tbody tr:is(.sel, .selected, [aria-selected="true"]) > td { background: var(--row-selected); }
html[data-jb-theme="executive"] .main :is(.tb-tbl, .vat-tbl, .coa-tbl, .recent-tbl, .lines-tbl):not(#feeNote *):not(.rbody *) :is(tr.tot, tfoot tr) > td {
  font-weight: 600; background: var(--surface-soft); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--border);
}
/* amounts: Inter Tight tabular, right, never wrap. Codes: IBM Plex Mono.
   Not inside report scope: there the user's report face (Settings >
   Appearance & formatting > Financial reports) governs amounts too. */
html[data-jb-theme="executive"] .main .view :is(td.r, th.r, td.num, .num, .amt, .money, .mx .v, .kpi .v, .dkpi .v):not(#feeNote *):not([data-typography-scope="report"] *) {
  font-family: var(--font-exec); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1;
  white-space: nowrap;
}
html[data-jb-theme="executive"] .main .view :is(td.r, td.num, .amt, .money):not(#feeNote *):not([data-typography-scope="report"] *) { font-weight: 600; text-align: right; }
html[data-jb-theme="executive"] .main .view :is(.mono, .coa-code, .acct-code, .doc-ref, .jrefdisp):not(#feeNote *) { font-family: var(--font-code); font-weight: 600; }
/* wide grids scroll inside their own box, never the page */
html[data-jb-theme="executive"] .main .view :is(.tbl-wrap, .frz, .table-wrap, .scroll-x) { overflow-x: auto; max-width: 100%; }

/* ============================================================== 9. METRIC TILES */
html[data-jb-theme="executive"] .main :is(.mx, .kpi, .dkpi) {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); transform: none;
}
html[data-jb-theme="executive"] .main :is(.mx, .kpi, .dkpi) .l {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
}
html[data-jb-theme="executive"] .main :is(.mx, .kpi, .dkpi) .v { color: var(--ink); font-weight: 700; letter-spacing: -.015em; }
html[data-jb-theme="executive"] .main :is(.mx-grid, .kpi-grid) { gap: 12px; }

/* ============================================================== 10. STATUS */
html[data-jb-theme="executive"] .main :is(.tag, .badge, .pill.status, .chip, .cat-badge) {
  display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 0 8px; border-radius: 999px; border: 0;
  font-family: var(--font-exec); font-size: 11px; font-weight: 600; letter-spacing: 0;
  background: var(--surface-soft); color: var(--ink-soft);
}
html[data-jb-theme="executive"] .main .cat-badge { border: 1px solid var(--border); }
html[data-jb-theme="executive"] .main :is(.tag.ok, .badge.ok, .chip.ok, .ok.tag) { background: var(--success-soft); color: var(--success-ink); }
html[data-jb-theme="executive"] .main :is(.tag.bad, .badge.bad, .chip.bad, .tag.cr) { background: var(--danger-soft); color: var(--danger-ink); }
html[data-jb-theme="executive"] .main :is(.tag.dr, .tag.info) { background: var(--info-soft); color: var(--info-ink); }
html[data-jb-theme="executive"] .main :is(.tag.warn, .badge.warn, .tag.flag) { background: var(--warning-soft); color: var(--warning-ink); }
html[data-jb-theme="executive"] .main .balrow { border-radius: 999px; border: 0; font-weight: 600; background: var(--success-soft); color: var(--success-ink); }
html[data-jb-theme="executive"] .main .balrow.bad { background: var(--danger-soft); color: var(--danger-ink); }
/* the account picker chip: a code control, so it keeps the code face */
html[data-jb-theme="executive"] .main .pill {
  height: 28px; border-radius: 6px; border: 1px solid #C9DCF5; background: var(--primary-blue-soft); color: var(--info-ink);
  font-family: var(--font-code); font-weight: 600; text-transform: none;
}
html[data-jb-theme="executive"] .main .pill:hover { border-color: var(--primary-blue); background: var(--surface); }

/* ============================================================== 11. EMPTY STATES */
html[data-jb-theme="executive"] .main .empty {
  padding: 40px 20px; gap: 8px; color: var(--ink-soft); font-size: 12px; line-height: 1.55;
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 8px;
}
html[data-jb-theme="executive"] .main .empty::before {
  width: 44px; height: 44px; border: 0; background: var(--primary-blue-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231672E8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7zM14 3v5h5M10 13h6M10 17h4'/%3E%3C/svg%3E") center / 22px no-repeat;
}
html[data-jb-theme="executive"] .main .empty :is(b, strong, h3, h4) { color: var(--ink); font-size: 14px; font-weight: 700; }

/* ============================================================== 12. REPORT SHEETS
   Formal: one white sheet, ruled table, no cards inside. Report typography
   settings keep governing size and face ([data-typography-scope="report"]). */
html[data-jb-theme="executive"] .main .rbody,
html[data-jb-theme="executive"] #view-afs .afs-sheet,
html[data-jb-theme="executive"] .main .rep-sheet {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 22px 26px; box-shadow: none;
}
html[data-jb-theme="executive"] .main .rlayout { gap: 16px; }
/* Full-width statement sheet.
   The reports screen is a report picker plus one sheet. Its base layout is a
   two-column grid, and the rule that collapsed it so the picker sits above a
   full-width sheet lived in juribooks-skin-v2.css — a legacy skin this theme
   retires. Retiring the skin therefore also retired a *structural* reports
   rule, and the sheet lost 264px (1100px -> 836px at 1440px), squeezing every
   statement. The structure belongs to the layout, not to a skin, so it is
   restored here. Presentation only: no figure, total or classification moves. */
html[data-jb-theme="executive"] :is(#view-reports, #view-metrics, #view-afs) .rlayout { display: block; }
/* The report picker becomes the theme's own tab rail (section 7) rather than a
   210px side column, so the sheet gets the full width and the picker costs one
   row instead of a stacked list. Base .rlist rules are single-class, so these
   out-rank them on specificity alone — no !important needed. */
html[data-jb-theme="executive"] :is(#view-reports, #view-metrics, #view-afs) .rlist {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  flex: none; width: auto; max-width: none; height: auto; position: static; overflow: visible;
  border-right: 0; border-bottom: 1px solid var(--border);
  padding: 0; margin: 0 0 16px;
}
html[data-jb-theme="executive"] :is(#view-reports, #view-metrics, #view-afs) .rlist-item {
  display: inline-flex; align-items: center; flex: none; width: auto; text-align: left; white-space: nowrap;
  min-height: var(--ctl-h); padding: 0 12px; margin: 0 0 -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
  font-family: var(--font-exec); font-size: 12px; font-weight: 600; color: var(--ink-soft);
}
html[data-jb-theme="executive"] :is(#view-reports, #view-metrics, #view-afs) .rlist-item:hover {
  color: var(--ink); background: transparent;
}
html[data-jb-theme="executive"] :is(#view-reports, #view-metrics, #view-afs) .rlist-item.on {
  color: var(--primary-blue); border-bottom-color: var(--primary-blue); background: transparent;
}
html[data-jb-theme="executive"] :is(#view-reports, #view-metrics, #view-afs) .rbody {
  width: auto; flex: none; padding-left: 0;
}
/* Trial balance account code: tabular, quiet, subordinate to the description. */
html[data-jb-theme="executive"] .main .tb-tbl td.report-account-code {
  font-variant-numeric: tabular-nums lining-nums; color: var(--ink-soft); font-weight: 600; white-space: nowrap;
}
/* Inside the sheet, headings, rules, totals and colours stay exactly as the
   report settings and report stylesheet draw them. The theme does not restyle
   statement typography (tests R1/R3). */

/* chart text: Inter Tight tabular (CSS out-ranks SVG presentation attributes) */
html[data-jb-theme="executive"] .main svg text:not([data-typography-scope="report"] *) { font-family: var(--font-exec); font-variant-numeric: tabular-nums lining-nums; }

/* ============================================================== 13. OVERLAYS
   One scrim, one panel treatment, one header/body/footer rhythm. */
html[data-jb-theme="executive"] .scrim { background: rgba(11, 34, 62, .45); backdrop-filter: none; }
html[data-jb-theme="executive"] .modal {
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-popover); background: var(--surface);
}
html[data-jb-theme="executive"] .modal-head {
  min-height: 56px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--border); background: var(--surface);
}
html[data-jb-theme="executive"] .modal-head h3 { font-family: var(--font-exec); font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; }
html[data-jb-theme="executive"] .modal-body { padding: 20px; }
html[data-jb-theme="executive"] .modal-foot {
  padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-soft);
  display: flex; justify-content: flex-end; gap: 8px;
}
/* Appearance & formatting dialog */
html[data-jb-theme="executive"] .a2-panel { border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-popover); font-family: var(--font-exec); }
html[data-jb-theme="executive"] .a2-head { border-bottom: 1px solid var(--border); }
html[data-jb-theme="executive"] .a2-h { font-size: 16px; font-weight: 700; color: var(--ink); }
/* drill-down drawer */
html[data-jb-theme="executive"] #drillBox { border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-popover); }
html[data-jb-theme="executive"] .drill-head { min-height: 56px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
html[data-jb-theme="executive"] .drill-title { font-size: 16px; font-weight: 700; color: var(--ink); }
html[data-jb-theme="executive"] .drill-sub { color: var(--ink-soft); }
html[data-jb-theme="executive"] .drill-foot { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-soft); }
/* Overlays built with inline styles by scripts this theme may not edit
   (bank reconciliation, budget control, bank feed, mobile nav): the scrim
   colour is inline, so it needs !important to be brought into line. */
html[data-jb-theme="executive"] #brDrawerScrim,
html[data-jb-theme="executive"] .main [style*="position:fixed;inset:0"][style*="background:rgba(20,24,32"],
html[data-jb-theme="executive"] body > [style*="position:fixed;inset:0"][style*="background:rgba(0,0,0,.42)"],
html[data-jb-theme="executive"] body > [style*="position:fixed;inset:0"][style*="background:rgba(20,24,32"] { background: rgba(11, 34, 62, .45) !important; backdrop-filter: none !important; }
/* menus and popovers attached to the page header */
html[data-jb-theme="executive"] #apprMenu, html[data-jb-theme="executive"] #printMenu {
  border: 1px solid var(--border) !important; border-radius: 8px !important; box-shadow: var(--shadow-popover) !important;   /* inline style in index.html */
}
/* toast */
html[data-jb-theme="executive"] .toast { background: var(--shell-navy); color: #fff; border-radius: 8px; font-family: var(--font-exec); font-size: 13px; box-shadow: var(--shadow-popover); }
html[data-jb-theme="executive"] .toast svg { color: #5FD3A6; }

/* ============================================================== 14. JOURNAL (worksheet)
   Dense spreadsheet kept: no cards per line, rows stay compact. Focus mode
   ("maximise") widens the worksheet inside the shell instead of covering it,
   so the sidebar and command bar remain on every page. */
html[data-jb-theme="executive"] body.jb-xshell #view-batch.batch-max {
  position: static !important; inset: auto !important; z-index: auto; padding: 18px 24px 64px !important; background: var(--canvas);   /* index.html: position:fixed!important */
}
html[data-jb-theme="executive"] .jrnwin { border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); max-width: none; background: var(--surface); }
html[data-jb-theme="executive"] .jrnwin.oob { border-color: var(--danger); }
html[data-jb-theme="executive"] #view-batch .jtbl th { background: var(--th-bg); color: var(--ink-soft); }
html[data-jb-theme="executive"] #view-batch .sw-tb { color: var(--ink-soft); border-radius: 6px; }
/* totals row and status strip: amounts in Inter Tight tabular, not the code face */
html[data-jb-theme="executive"] #view-batch :is(.sw-totrow .val, .sw-status span) {
  font-family: var(--font-exec); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* journal-entry.js (a protected accounting module) writes this amount's face
   as an inline style, so only !important reaches it */
html[data-jb-theme="executive"] #view-batch .sw-status span[style*="--fmono"] { font-family: var(--font-exec) !important; }
html[data-jb-theme="executive"] #view-batch .sw-tb:hover { background: var(--primary-blue-soft); border-color: #C9DCF5; color: var(--primary-blue); }

/* ============================================================== 15. CLIENT TRUST
   Same components, trust semantics kept: green only for reconciled, red only
   for a deficit or difference. Never presented as firm cash. */
html[data-jb-theme="executive"] #view-trust .ok, html[data-jb-theme="executive"] #view-trust .tie-ok { color: var(--success-ink); }
html[data-jb-theme="executive"] #view-trust .bad, html[data-jb-theme="executive"] #view-trust .deficit { color: var(--danger-ink); }

/* ============================================================== 16. RESPONSIVE */
@media (max-width: 1100px) {
  html[data-jb-theme="executive"] .main > header.topbar .tb-stats { display: none; }
}
@media (max-width: 1023px) {
  html[data-jb-theme="executive"] .main > header.topbar { padding: 10px 16px; }
  html[data-jb-theme="executive"] .main > .view { padding: 16px 16px 56px; }
}
@media (max-width: 767px) {
  html[data-jb-theme="executive"] .main > header.topbar { flex-wrap: wrap; min-height: 0; gap: 8px; }
  html[data-jb-theme="executive"] .main > header.topbar .tb-title { flex-basis: 100%; }
  html[data-jb-theme="executive"] .main > header.topbar #vTitle { font-size: 19px; white-space: normal; }
  html[data-jb-theme="executive"] .main > header.topbar #vSub { white-space: normal; }
  html[data-jb-theme="executive"] .main > header.topbar .tb-actions { flex-wrap: wrap; }
  html[data-jb-theme="executive"] .main > .view { padding: 12px 12px 48px; }
  html[data-jb-theme="executive"] :is(.main, .modal) .btn { min-height: 44px; }
  html[data-jb-theme="executive"] .main :is(.inp, input, select, textarea), html[data-jb-theme="executive"] .modal :is(.inp, input, select, textarea) { font-size: 16px !important; min-height: 44px; }   /* V5 sets 13-14px !important; 16px stops mobile zoom */
  html[data-jb-theme="executive"] .main :is(.tb-tbl, .vat-tbl, .coa-tbl) tbody td { height: 44px; }
  html[data-jb-theme="executive"] .main .view :is(.tb-tbl, .vat-tbl, .coa-tbl, .jtbl, .stmt) { display: block; overflow-x: auto; max-width: 100%; }
  html[data-jb-theme="executive"] .main :is(.pf-grid, .mx-grid, .kpi-grid) { grid-template-columns: minmax(0, 1fr) !important; }   /* base sets column counts with !important at this width */
  html[data-jb-theme="executive"] .main :is(.rtab, .rlist-item, .set-list-item) { min-height: 44px; }
}

} /* @media screen */

/* ============================================================== 17. SIGN-IN GATE
   The gate injects its own stylesheet (lib/juribooks-authgate-v2.js). That is
   authentication code, so it is not edited: these rules out-rank it by
   specificity (1,2,1 over 1,1,0), inside and outside its dark-mode block. */
html[data-jb-theme="executive"] #authGate { background: var(--shell-navy); font-family: var(--font-exec); }
html[data-jb-theme="executive"] #authGate .ag-card {
  max-width: 400px; padding: 28px 30px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-popover);
}
html[data-jb-theme="executive"] #authGate .ag-brand b { font-family: var(--font-exec); font-size: 17px; font-weight: 700; color: var(--ink); }
html[data-jb-theme="executive"] #authGate .ag-brand span { font-size: var(--text-xs); font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink-soft); }
html[data-jb-theme="executive"] #authGate h2 { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
html[data-jb-theme="executive"] #authGate .ag-sub { font-size: 12px; color: var(--ink-soft); }
html[data-jb-theme="executive"] #authGate label { font-size: 11px; font-weight: 600; color: var(--ink-soft); letter-spacing: .01em; }
html[data-jb-theme="executive"] #authGate input {
  height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); color: var(--ink); font-family: var(--font-exec); font-size: 14px;
}
html[data-jb-theme="executive"] #authGate input:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 3px var(--primary-blue-soft); }
html[data-jb-theme="executive"] #authGate .ag-btn { height: 40px; padding: 0 14px; border-radius: 6px; background: var(--primary-blue); font-family: var(--font-exec); font-size: 13px; font-weight: 600; }
html[data-jb-theme="executive"] #authGate .ag-btn:hover { background: var(--primary-blue-hover); }
html[data-jb-theme="executive"] #authGate .ag-links a { color: var(--primary-blue); font-size: 12px; }
html[data-jb-theme="executive"] #authGate .ag-links a:hover { color: var(--primary-blue-hover); }
html[data-jb-theme="executive"] #authGate .ag-err { color: var(--danger-ink); font-size: 12px; }
html[data-jb-theme="executive"] #authGate .ag-lease, html[data-jb-theme="executive"] #authGate .ag-okmsg { color: var(--success-ink); }
html[data-jb-theme="executive"] #authGate .ag-note { background: var(--surface-soft); color: var(--ink-soft); }
@media (prefers-color-scheme: dark) {
  html[data-jb-theme="executive"] #authGate .ag-card { background: var(--surface); color: var(--ink); }
  html[data-jb-theme="executive"] #authGate :is(h2, .ag-brand b) { color: var(--ink); }
  html[data-jb-theme="executive"] #authGate input { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
}

/* ============================================================== 18. PUBLIC PAGES
   signup.html, reset-password.html, admin.html (body.jb-public): the same
   product: navy mark, Inter Tight, white bordered cards, blue actions. */
html[data-jb-theme="executive"] body.jb-public {
  background: var(--canvas); color: var(--ink); font-family: var(--font-exec);
  --fserif: var(--font-exec); --fsans: var(--font-exec);   /* public headings are written with inline var(--fserif) */
}
html[data-jb-theme="executive"] body.jb-public :is(h1, h2, h3, .brand, .brand *) { font-family: var(--font-exec); color: var(--ink); letter-spacing: -.01em; }
html[data-jb-theme="executive"] body.jb-public .brand { font-weight: 700; }
html[data-jb-theme="executive"] body.jb-public .card,
html[data-jb-theme="executive"] body.jb-public .plan {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm);
}
html[data-jb-theme="executive"] body.jb-public .plan.sel, html[data-jb-theme="executive"] body.jb-public .plan[aria-pressed="true"], html[data-jb-theme="executive"] body.jb-public .plan.on {
  border-color: var(--primary-blue); box-shadow: 0 0 0 3px var(--primary-blue-soft);
}
html[data-jb-theme="executive"] body.jb-public .price { font-family: var(--font-exec); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
html[data-jb-theme="executive"] body.jb-public .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
html[data-jb-theme="executive"] body.jb-public label { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
html[data-jb-theme="executive"] body.jb-public :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: var(--ctl-h); border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--ink);
  font-family: var(--font-exec); font-size: 13px; box-shadow: none;
}
html[data-jb-theme="executive"] body.jb-public :is(input, select, textarea):focus { border-color: var(--primary-blue); box-shadow: 0 0 0 3px var(--primary-blue-soft); outline: none; }
html[data-jb-theme="executive"] body.jb-public :is(.btn, button[type="submit"], .login button, form button:not(.danger):not(.pill)) {
  min-height: var(--ctl-h); border: 1px solid var(--primary-blue); border-radius: 6px; background: var(--primary-blue); color: #fff;
  font-family: var(--font-exec); font-size: 13px; font-weight: 600; box-shadow: none;
}
html[data-jb-theme="executive"] body.jb-public :is(.btn, button[type="submit"], .login button, form button:not(.danger):not(.pill)):hover { background: var(--primary-blue-hover); border-color: var(--primary-blue-hover); }
html[data-jb-theme="executive"] body.jb-public button.danger, html[data-jb-theme="executive"] body.jb-public .danger { color: var(--danger-ink); }
html[data-jb-theme="executive"] body.jb-public a { color: var(--primary-blue); }
html[data-jb-theme="executive"] body.jb-public :is(.pill, .badge) { border-radius: 999px; font-family: var(--font-exec); font-size: 11px; font-weight: 600; }
html[data-jb-theme="executive"] body.jb-public .money { font-family: var(--font-exec); font-variant-numeric: tabular-nums lining-nums; font-weight: 600; }
html[data-jb-theme="executive"] body.jb-public table th { background: var(--th-bg); color: var(--ink-soft); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
html[data-jb-theme="executive"] body.jb-public :is(.err, .msg.err) { color: var(--danger-ink); }

@media (prefers-reduced-motion: reduce) {
  html[data-jb-theme="executive"] .main * { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  html[data-jb-theme="executive"] :is(.btn, .rtab.on, .tag, .badge, .balrow) { forced-color-adjust: auto; border: 1px solid CanvasText; }
}