/* juribooks-ledger-classic-v1.css — "Ledger Classic" theme.
   A third selectable theme alongside legacy and odoo-classic:
       <html data-jb-theme="ledger-classic">
   Activate with:  localStorage.setItem('jb.theme','ledger-classic')  (then reload)

   PRESENTATION ONLY. No ledger, billing, VAT/WHT, payroll, trust, budget,
   cash-flow, storage, auth, export, numbering or posting logic is touched.
   No JS module is opened. Every rule is a colour, border, radius, spacing or
   background declaration.

   Load position: AFTER juribooks-odoo-sharp-type-v3.1.css and BEFORE
   juribooks-sharp-type-v4.css — deliberately, so the v4 type contract
   (Inter Tight interface + reports, IBM Plex Mono identifiers, Inter Tight
   tabular-lining money, 36/44px density) keeps ownership of typography and
   this theme owns only chrome and colour.

   Design intent — original work in the classic desktop-accounting genre:
   institutional grey chrome, a graphite navigator, hairline-gridded dense
   tables, flat square-cornered surfaces with no decorative elevation, and
   the traditional blue-debit / red-credit ledger convention. It is NOT a
   reproduction of any vendor's product chrome, palette or trade dress.

   Every rule is scoped to html[data-jb-theme="ledger-classic"], so legacy
   and odoo-classic are bit-for-bit unaffected.
   ============================================================ */

html[data-jb-theme="ledger-classic"]{
  color-scheme:light;

  /* ---- theme-own tokens ---- */
  --lc-graphite:#2b3238;      /* navigator field            */
  --lc-graphite-2:#39424a;    /* navigator hover            */
  --lc-chrome:#dfe3e7;        /* toolbar / table header     */
  --lc-chrome-2:#e7eaed;
  --lc-canvas:#eceef0;        /* work-area canvas           */
  --lc-accent:#1f5d63;        /* deep slate-teal            */
  --lc-accent-dark:#164a4f;
  --lc-accent-soft:#e6eff0;
  --lc-accent-pale:#f2f7f7;
  --lc-line:#c3c9d0;
  --lc-line-soft:#d7dbe0;     /* hairline grid inside the ruled tables — lighter than --lc-line so the
                                 outer table edge (--lc-line) still reads as the stronger boundary */
  --lc-line-strong:#a9b1ba;
  --lc-ink:#1c2126;
  --lc-ink-soft:#3d454e;
  --lc-muted:#667180;
  --lc-debit:#1f4f8f;         /* traditional ledger blue    */
  --lc-credit:#a3242f;        /* traditional ledger red     */
  --lc-ok:#1f6b3c;
  --lc-flag:#8a6a00;

  /* ---- remap the tokens every existing skin layer already reads ----
     Same bridge-token technique juribooks-odoo-classic-v3.css uses, so no
     selector anywhere in the app needs rewriting. */
  --accent:var(--lc-accent)!important;
  --on-navy:#fff!important;
  --navy:var(--lc-graphite)!important;
  --navy-700:#22282d!important;
  --navy-600:var(--lc-graphite-2)!important;
  --navy-300:#8b959e!important;
  --fill-navy:var(--lc-accent)!important;
  --fill-navy-hover:var(--lc-accent-dark)!important;
  --fill-navy-active:#123c40!important;
  --ink:var(--lc-ink)!important;
  --ink-soft:var(--lc-ink-soft)!important;
  --paper:var(--lc-canvas)!important;
  --surface:#fff!important;
  --surface-2:#f6f7f8!important;
  --surface-3:var(--lc-chrome-2)!important;
  --line:var(--lc-line)!important;
  --line-2:#b7bec6!important;
  --line-strong:var(--lc-line-strong)!important;
  --debit:var(--lc-debit)!important;
  --credit:var(--lc-credit)!important;
  --balanced:var(--lc-ok)!important;
  --flag:var(--lc-flag)!important;
  --bg-debit:#e8eef7!important;
  --bg-credit:#f9eaec!important;
  --bg-balanced:#e8f2ec!important;
  --bg-flag:#fbf3e0!important;
  --mute:var(--lc-muted)!important;
  --mute-2:#7d8794!important;

  /* Square-ish corners: this genre is drawn with rules, not radii. */
  --radius:3px!important; --r-xs:2px!important; --r-sm:2px!important;
  --r-md:3px!important;   --r-lg:3px!important;

  /* Flat surfaces. Elevation is reserved for genuine overlays. */
  --shadow:none!important;
  --sh-1:none!important;
  --sh-3:0 14px 44px rgba(20,26,32,.24)!important;
  --ring:0 0 0 1px #fff,0 0 0 3px rgba(31,93,99,.32)!important;

  --color-heading:var(--lc-ink)!important;
  --color-subheading:var(--lc-muted)!important;
  --color-body:var(--lc-ink)!important;

  /* Public-page bridge tokens (signup / reset-password / admin), the same
     set juribooks-odoo-sharp-type-v3.1.css remaps for the Odoo theme. */
  --jb-navy:var(--lc-graphite)!important;
  --jb-navy-deep:#22282d!important;
  --jb-orange:var(--lc-accent)!important;
  --jb-orange-strong:var(--lc-accent-dark)!important;
  --jb-orange-soft:var(--lc-accent-soft)!important;
  --jb-green:var(--lc-ok)!important;
  --jb-green-soft:#e8f2ec!important;
  --jb-paleblue:var(--lc-accent-pale)!important;
  --jb-canvas:var(--lc-canvas)!important;
}

/* ============================================================
   STRUCTURAL RULES — written against the app's REAL DOM.

   v1 targeted .side / .sidebar / #sidebar, which do not exist in this
   codebase: the navigator is <aside class="rail"> + <nav id="nav">, and
   juribooks-nav-v2.js REBUILDS that subtree at runtime into .jb2-grp /
   .jb2-glab / button[data-view] (documented in THEME-CASCADE-AUDIT.md).
   That mismatch is why the graphite chrome never appeared. Every selector
   below now mirrors the chains juribooks-odoo-classic-v3.css uses, so it
   out-specifies juribooks-skin-v2.css's own !important rules, and both the
   original and the runtime-rebuilt nav markup are covered.

   Verified live DOM: .shell .rail #nav .navgrp-label|.jb2-glab
   button[data-view](.on) .rail-foot .jb-brandmark-txt .navtoggle
   .topbar .tb-title .tb-actions .btn .tb-stats .stat-chip .main .view
   .card .mx .tb-tbl .rtab .rlist-item td.r .num
   ============================================================ */

/* ---- 1. Canvas ------------------------------------------------------- */
html[data-jb-theme="ledger-classic"],
html[data-jb-theme="ledger-classic"][data-theme="dark"]{background:var(--lc-canvas)!important}
html[data-jb-theme="ledger-classic"] body,
html[data-jb-theme="ledger-classic"][data-theme="dark"] body{background:var(--lc-canvas)!important;color:var(--lc-ink)!important}
html[data-jb-theme="ledger-classic"] .main,
html[data-jb-theme="ledger-classic"] .view,
html[data-jb-theme="ledger-classic"] body[data-ui="clean"] .view{background:var(--lc-canvas)!important;color:var(--lc-ink)!important}

/* ---- 2. Navigator — the graphite field ------------------------------
   Classic desktop-accounting navigators are a dark field with a solid
   selection bar, not a white rail with a pill. */
html[data-jb-theme="ledger-classic"] .rail,
html[data-jb-theme="ledger-classic"] body[data-ui="clean"] .rail{
  background:var(--lc-graphite)!important;background-image:none!important;
  color:#dfe4e9!important;
  border-right:1px solid #1c2126!important;box-shadow:none!important;
}
html[data-jb-theme="ledger-classic"] .nav,
html[data-jb-theme="ledger-classic"] body[data-ui="clean"] #nav{background:transparent!important;border:0!important}

html[data-jb-theme="ledger-classic"] .jb-brandmark-txt b,
html[data-jb-theme="ledger-classic"] .rail .jb-brandmark-txt b{color:#ffffff!important}
html[data-jb-theme="ledger-classic"] .jb-brandmark-txt span,
html[data-jb-theme="ledger-classic"] .rail .jb-brandmark-txt span{color:#a7b0b9!important}
html[data-jb-theme="ledger-classic"] .jb-brandmark:hover{background:var(--lc-graphite-2)!important}

html[data-jb-theme="ledger-classic"] .navtoggle,
html[data-jb-theme="ledger-classic"] body[data-ui="clean"] .navtoggle{
  color:#b6bec6!important;background:transparent!important;
  border:1px solid #4a555e!important;border-radius:2px!important;
}
html[data-jb-theme="ledger-classic"] .navtoggle:hover{color:#fff!important;background:var(--lc-graphite-2)!important}

/* Group headings: tracked uppercase on the graphite field. Matches the
   1-3-1 chain skin-v2 uses so it is not shadowed. */
html[data-jb-theme="ledger-classic"] .navgrp-label,
html[data-jb-theme="ledger-classic"] .jb2-glab,
html[data-jb-theme="ledger-classic"] body[data-ui="clean"] .navgrp-label,
html[data-jb-theme="ledger-classic"] body[data-ui="clean"] .jb2-glab,
html[data-jb-theme="ledger-classic"] .rail #nav .jb2-glab,
html[data-jb-theme="ledger-classic"] body[data-ui="clean"] .rail #nav .jb2-glab{
  color:#9aa4ad!important;background:transparent!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
}
html[data-jb-theme="ledger-classic"] .navgrp-label:hover,
html[data-jb-theme="ledger-classic"] .navgrp.open .navgrp-label,
html[data-jb-theme="ledger-classic"] .navgrp.hasactive .navgrp-label,
html[data-jb-theme="ledger-classic"] .jb2-glab:hover,
html[data-jb-theme="ledger-classic"] .jb2-grp.open .jb2-glab,
html[data-jb-theme="ledger-classic"] .jb2-grp.hasactive .jb2-glab,
html[data-jb-theme="ledger-classic"] .rail #nav .jb2-glab:hover,
html[data-jb-theme="ledger-classic"] .rail #nav .jb2-grp.open .jb2-glab,
html[data-jb-theme="ledger-classic"] .rail #nav .jb2-grp.hasactive .jb2-glab{color:#ffffff!important}

/* Items: square, no pill. */
html[data-jb-theme="ledger-classic"] .nav button[data-view],
html[data-jb-theme="ledger-classic"] body[data-ui="clean"] #nav button[data-view]{
  border-radius:0!important;color:rgba(223,228,233,.82)!important;
  background:transparent!important;box-shadow:none!important;
}
html[data-jb-theme="ledger-classic"] .nav button[data-view]:hover,
html[data-jb-theme="ledger-classic"] body[data-ui="clean"] #nav button[data-view]:hover{
  color:#fff!important;background:var(--lc-graphite-2)!important;
}
/* Selected row: solid bar + a left indicator in the accent. */
html[data-jb-theme="ledger-classic"] .nav button[data-view].on,
html[data-jb-theme="ledger-classic"] body[data-ui="clean"] #nav button[data-view].on{
  position:relative;color:#fff!important;background:#4a555e!important;
  font-weight:600!important;border-radius:0!important;box-shadow:none!important;
}
html[data-jb-theme="ledger-classic"] .nav button[data-view].on::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;height:auto;
  border-radius:0;background:var(--lc-accent);opacity:1;transform:none;
}
html[data-jb-theme="ledger-classic"] .nav button[data-view].on svg{color:#fff!important;opacity:1}

html[data-jb-theme="ledger-classic"] .rail-foot,
html[data-jb-theme="ledger-classic"] .rail-foot *{color:#a7b0b9!important;border-color:#1c2126!important}
html[data-jb-theme="ledger-classic"] .rail-foot button:hover{color:#fff!important;background:var(--lc-graphite-2)!important}

/* ---- 3. Toolbar — the SAME graphite field as the navigator, not a
   separate light chrome strip. The rail no longer reads as one dark
   accent floating in an otherwise light shell; the whole top-level chrome
   (rail + toolbar) is one graphite surface, with only the work-area
   canvas and its cards/tables staying light. */
html[data-jb-theme="ledger-classic"] .topbar,
html[data-jb-theme="ledger-classic"] body[data-ui="clean"] .topbar{
  background:var(--lc-graphite)!important;background-image:none!important;
  border-bottom:1px solid #1c2126!important;box-shadow:none!important;
}
html[data-jb-theme="ledger-classic"] .topbar h1{color:#ffffff!important;font-weight:700!important;letter-spacing:-.022em!important}
html[data-jb-theme="ledger-classic"] .topbar .sub{color:#a7b0b9!important}
html[data-jb-theme="ledger-classic"] .tb-actions .btn,
html[data-jb-theme="ledger-classic"] .topbar .btn{
  border-radius:2px!important;border:1px solid #4a555e!important;
  background:transparent!important;color:#dfe4e9!important;box-shadow:none!important;
}
html[data-jb-theme="ledger-classic"] .tb-actions .btn:hover,
html[data-jb-theme="ledger-classic"] .topbar .btn:hover{
  background:var(--lc-graphite-2)!important;border-color:var(--lc-accent)!important;
  color:#ffffff!important;
}
html[data-jb-theme="ledger-classic"] .stat-chip{
  border:1px solid #4a555e!important;border-radius:2px!important;
  background:var(--lc-graphite-2)!important;box-shadow:none!important;
}
html[data-jb-theme="ledger-classic"] .stat-chip .v{color:#ffffff!important}
html[data-jb-theme="ledger-classic"] .stat-chip .l{color:#a7b0b9!important}

/* ---- 4. Cards / panels — flat, ruled, square ------------------------- */
html[data-jb-theme="ledger-classic"] :is(.card,.mx,.panel,.period-bar,.box){
  background:#fff!important;border:1px solid var(--lc-line)!important;
  border-radius:3px!important;box-shadow:none!important;
}
html[data-jb-theme="ledger-classic"] :is(.card,.mx,.panel) > :is(h2,h3,.card-h,.hd){
  background:var(--lc-chrome-2)!important;
  border-bottom:1px solid var(--lc-line)!important;
  margin:0!important;padding:7px 12px!important;color:var(--lc-ink)!important;
}

/* ---- 5. Tables — the hairline grid this genre is built on ------------ */
html[data-jb-theme="ledger-classic"] :is(.tb-tbl,.stmt,.coa-tbl,.jtbl,.drill-tbl,.recent-tbl,.far-tbl,.ppe-tbl,.vat-tbl){
  border-collapse:collapse!important;background:#fff!important;
}
html[data-jb-theme="ledger-classic"] :is(.tb-tbl,.stmt,.coa-tbl,.jtbl,.drill-tbl,.recent-tbl,.far-tbl,.ppe-tbl,.vat-tbl) :is(td,th){
  border:1px solid var(--lc-line-soft)!important;
}
html[data-jb-theme="ledger-classic"] :is(.tb-tbl,.stmt,.coa-tbl,.jtbl,.drill-tbl,.recent-tbl,.far-tbl,.ppe-tbl,.vat-tbl) th{
  background:linear-gradient(#eef1f3,var(--lc-chrome))!important;
  border-bottom:2px solid var(--lc-line-strong)!important;
  color:var(--lc-ink-soft)!important;
}
html[data-jb-theme="ledger-classic"] :is(.tb-tbl,.coa-tbl,.drill-tbl,.recent-tbl) tbody tr:nth-child(even) > td{background:#fafbfc!important}
html[data-jb-theme="ledger-classic"] :is(.tb-tbl,.coa-tbl,.drill-tbl,.recent-tbl) tbody tr:hover > td{background:var(--lc-accent-soft)!important}
/* Totals: a double rule above the figure, as ruled ledgers do it.
   ".view" inserted ahead of the row selector: an inline !important rule
   (`:is(.view) :is(.stmt,.tb-tbl) tr.tot td`) already targets this exact
   row at specificity (0,3,2); the plain attribute+tr.tot+td chain only
   reaches (0,2,2) and silently lost to it (confirmed live: computed
   border-top stayed the pre-existing rule's colour, not --lc-ink). Mirrors
   the same ".view" chain juribooks-odoo-classic-v3.css already uses to
   win this identical collision for the Odoo theme. */
html[data-jb-theme="ledger-classic"] .view :is(tr.tot,tr.total) > :is(td,th){
  border-top:1px solid var(--lc-ink)!important;background:var(--lc-chrome-2)!important;font-weight:700!important;
}
html[data-jb-theme="ledger-classic"] :is(tr.grand,tr.gtot) > :is(td,th){
  border-top:3px double var(--lc-ink)!important;background:var(--lc-chrome-2)!important;font-weight:700!important;
}

/* ---- 6. Inputs — recessed field, square, accent focus ---------------- */
html[data-jb-theme="ledger-classic"] :is(input,select,textarea,.inp){
  border-radius:2px!important;border:1px solid var(--lc-line-strong)!important;
  background:#fff!important;box-shadow:inset 0 1px 1px rgba(28,33,38,.05)!important;
}
html[data-jb-theme="ledger-classic"] :is(input,select,textarea,.inp):focus-visible{
  outline:2px solid var(--lc-accent)!important;outline-offset:0!important;
  border-color:var(--lc-accent)!important;
}

/* ---- 7. Report tabs / list pickers — same graphite field as the rail/
   toolbar, so the tab strip reads as chrome, not as another card. ---- */
html[data-jb-theme="ledger-classic"] .rtabs,
html[data-jb-theme="ledger-classic"] body[data-ui="clean"] .rtabs{
  background:var(--lc-graphite)!important;border:1px solid #1c2126!important;
  border-radius:2px!important;
}
html[data-jb-theme="ledger-classic"] .rtab{border-radius:2px!important;color:#9aa4ad!important}
html[data-jb-theme="ledger-classic"] .rtab:hover{color:#ffffff!important;background:var(--lc-graphite-2)!important}
html[data-jb-theme="ledger-classic"] .rtab.on,
html[data-jb-theme="ledger-classic"] body[data-ui="clean"] .rtab.on{
  position:relative;color:#ffffff!important;background:var(--lc-graphite-2)!important;
  border-bottom-color:transparent!important;box-shadow:none!important;
}
html[data-jb-theme="ledger-classic"] .rtab.on::after{
  content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:2px;background:var(--lc-accent);
}
html[data-jb-theme="ledger-classic"] :is(.rlist-item,.set-list-item){border-radius:2px!important}
html[data-jb-theme="ledger-classic"] :is(.rlist-item,.set-list-item).on{color:#fff!important;background:var(--lc-accent)!important}
html[data-jb-theme="ledger-classic"] :is(.rlist-item,.set-list-item):hover{color:var(--lc-accent-dark)!important;background:var(--lc-accent-soft)!important}

/* ---- 8. Ledger semantics — traditional blue debit / red credit ------- */
html[data-jb-theme="ledger-classic"] :is(.debit,td.debit){color:var(--lc-debit)!important}
html[data-jb-theme="ledger-classic"] :is(.credit,td.credit){color:var(--lc-credit)!important}
html[data-jb-theme="ledger-classic"] :is(.neg,.is-neg){color:var(--lc-credit)!important}

/* ---- 9. Overlays keep real elevation -------------------------------- */
html[data-jb-theme="ledger-classic"] :is(.modal,.dialog,.sheet,.popover,.menu,.pal){
  border-radius:3px!important;border:1px solid var(--lc-line-strong)!important;
  box-shadow:var(--sh-3)!important;
}

/* ---- 10. Command palette — the app's actual "menu": a quick-jump list
   of accounts/views, not a data-entry form. Graphite, matching the rail/
   toolbar/tab-strip chrome, since it is navigation chrome too. Data-entry
   modals/dialogs (rule 9, above) stay light — their input fields need a
   light field to read against, same reasoning as rule 6. */
html[data-jb-theme="ledger-classic"] .palette{
  background:var(--lc-graphite)!important;border:1px solid #1c2126!important;
}
html[data-jb-theme="ledger-classic"] .palette-head{border-bottom:1px solid #39424a!important}
html[data-jb-theme="ledger-classic"] .palette-head svg{color:#9aa4ad!important}
html[data-jb-theme="ledger-classic"] .palette-head input{color:#ffffff!important}
html[data-jb-theme="ledger-classic"] .palette-head input::placeholder{color:#7d8794!important}
html[data-jb-theme="ledger-classic"] .palette-head kbd{
  background:var(--lc-graphite-2)!important;border-color:#4a555e!important;color:#dfe4e9!important;
}
html[data-jb-theme="ledger-classic"] .pal-item{color:#dfe4e9!important}
html[data-jb-theme="ledger-classic"] .pal-item:hover,
html[data-jb-theme="ledger-classic"] .pal-item.active{background:var(--lc-graphite-2)!important}
html[data-jb-theme="ledger-classic"] .pal-item .code{color:var(--lc-accent-soft)!important}
html[data-jb-theme="ledger-classic"] .pal-item .ct{
  background:#39424a!important;border-color:#4a555e!important;color:#a7b0b9!important;
}
html[data-jb-theme="ledger-classic"] .pal-empty{color:#9aa4ad!important}
