/* =============================================================================
   bridge.css — the pages that grew up on base.css, on the CRM look (114 · re-skin)
   =============================================================================
   Karim, 25 Sep 2026: «first make the css for the rest of modules or pages that
   aren't the same as now». Every page now carries ONE shell — the CRM's rail and
   top bar, painted by file-shell.js — and ONE palette, the CRM tokens.

   HOW, without rewriting 6,500 lines of base.css: base.css paints from its own
   tokens (`--ink`, `--paper`, `--line`, `--accent`, `--stop` …) and nothing else —
   «the whole system was repainted from here on 5 September and not one of the
   3,900 lines below it moved». So this file, loaded AFTER base.css, points every
   one of those tokens at the CRM's (`--text`, `--surface`, `--border`, `--brand`,
   `--danger` …) and the old components take the new colours, fonts and corners.

   Load order on an old page:  crm/tokens · crm/layout · crm/motion · css/base.css · css/bridge.css
   Not loaded: crm/base.css and crm/components.css — they would fight base.css over
   `.input`, `.field`, `.modal`, `.btn-*`. The few CRM pieces the shell itself needs
   (avatar, dropdown menu, the bell, the pending tag, the crumb) are copied below.

   LOGICAL PROPERTIES ONLY — tools/check-css.sh. */

/* ---------- 1. the tokens: base.css's names, the CRM's values ---------- */
:root {
  --ink: var(--text);
  --ink-soft: var(--text-2);
  --ink-faint: var(--text-3);
  --ink-faintest: var(--text-4);
  --paper: var(--surface);
  --paper-soft: var(--bg);
  --paper-inset: var(--surface-2);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --sales: var(--success);
  --sales-soft: var(--success-soft);
  --sales-line: var(--lime-mid);
  --ops: var(--brand);
  --ops-soft: var(--brand-soft);
  --ops-line: var(--blue-300);
  --accent: var(--ops);
  --accent-soft: var(--ops-soft);
  --accent-line: var(--ops-line);
  --warn: var(--warning);
  --warn-soft: var(--warning-soft);
  --stop: var(--danger);
  --stop-soft: var(--danger-soft);
  --shadow-panel: var(--shadow);
  --shadow-drop: var(--shadow-lg);
  --veil: rgba(12, 27, 42, .38);
  --radius: var(--r-sm);
  --font: var(--font-ar);
  --size-0: var(--fs-xs);
  --size-1: var(--fs-sm);
  --size-2: var(--fs-md);
  --size-3: var(--fs-lg);
  --size-4: var(--fs-2xl);
  /* the old shell's measures still steer a few sticky offsets inside pages */
  --header-height: var(--topbar-h);
  --sidebar-width: var(--sidebar-w);
}
html[lang="en"] { --font: var(--font-en); }
[data-lane="sales"] { --accent: var(--sales); --accent-soft: var(--sales-soft); --accent-line: var(--sales-line); }
[data-lane="ops"]   { --accent: var(--ops);   --accent-soft: var(--ops-soft);   --accent-line: var(--ops-line); }

/* 190 · `background-attachment: fixed` is GONE (it was here and in crm/styles/base.css): a fixed gradient behind a
   scrolling page makes the browser repaint the whole page on every scroll — the jerk Karim felt after the re-skin.
   `scroll` here outranks the CRM rule, which stays verbatim in crm/. The same two lines sit in open-file.css for the
   pages that load the CRM sheets without this one. */
body { background: var(--bg); background-image: var(--bg-canvas); background-attachment: scroll; color: var(--text); -webkit-font-smoothing: antialiased; }
/* 190 · no entry animation per table row: crm/styles/components.css animates EVERY `.tbl tbody tr` in (with a delay
   per row) — a list of three hundred rows is three hundred animations before it is readable. Rows appear; the
   page-level enter stays. */
.tbl tbody tr { animation: none; }
html[lang="ar"] body { line-height: 1.62; }
a { color: var(--brand); }
a:hover { color: var(--brand-strong); }
::selection { background: var(--brand-soft); color: var(--brand-ink); }
:focus-visible { outline: none; box-shadow: var(--ring); }
[hidden] { display: none !important; }
svg.ic { width: 18px; height: 18px; flex: none; }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- 2. the CRM shell beats the old shell's rules that share a class name ---------- */
/* base.css frames every page in 24px and `body.has-shell` took it away; the class is gone with the old skeleton */
body:has(> .shell) { padding: 0; }
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-block-size: 100vh; }
.shell .sidebar {
  width: auto; flex-shrink: 1; border-inline-end: 0; background: var(--sidebar-bg); color: var(--sidebar-text);
  padding-block: var(--sp-4); padding-inline: var(--sp-3); gap: var(--sp-2); position: sticky; inset-block-start: 0;
  block-size: 100vh; overflow: hidden; z-index: 30; display: flex; flex-direction: column;
}
/* 122 · the rail SCROLLS INSIDE the sidebar, as on the CRM pages: the aside keeps its height, the nav is the scroll region
   (without this a bridged page hid every entry below the fold — Finance, System — and some browsers drew a fat scrollbar) */
.shell .sidebar .nav { flex: 1 1 0%; min-block-size: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--sidebar-hover-bg) transparent; padding-inline-end: 2px; }
.shell .sidebar .nav::-webkit-scrollbar { width: 6px; }
.shell .sidebar .nav::-webkit-scrollbar-thumb { background: var(--sidebar-hover-bg); border-radius: 3px; }
.shell .sidebar .nav::-webkit-scrollbar-track { background: transparent; }
.shell .brand-mark { width: 34px; height: 34px; }                    /* the CRM's mark, not the old shell's 26px */
/* 128.1 · THE LOGO WAS BLUE ON THE OLD PAGES AND LIME ON THE NEW — Karim's «the logo changes». base.css loads AFTER the CRM's
   layout.css here and paints `.brand-mark` in the old accent; the lime mark, the avatar, the brand gap and the un-boxed top-bar
   buttons live in open-file.css/components.css, which a bridged page does not load. Restated from those files, word for word,
   so the rail of chart-of-accounts is the rail of tasks (documents/reports/128-walk/rail-diff.py measures the two computed) */
.shell .brand { gap: var(--sp-3); }                                                       /* base.css: gap-2 */
.shell .brand-mark { border-radius: var(--r-sm); background: var(--lime); color: var(--on-lime); }   /* open-file.css */
.shell .sidebar-user .avatar { background: var(--lime); color: var(--on-lime); font-family: var(--font-ar); }   /* open-file.css */
.shell .topbar .lang-toggle, .shell .topbar .icon-btn { border: 0; box-shadow: none; }     /* base.css boxes every button */
.shell .topbar .icon-btn { background: transparent; }
.shell .topbar .icon-btn .icon { stroke-width: 1.75; }                                     /* open-file.css `.icon` */
.shell .sidebar, .shell .topbar { line-height: 1.55; }                                     /* crm/styles/base.css body */
html[lang="ar"] .shell .sidebar, html[lang="ar"] .shell .topbar { line-height: 1.68; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar, #c3ccd9); border-radius: var(--r-sm); border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; }
.shell .nav a.nav-item {
  display: flex; align-items: center; gap: 10px; padding-block: 8px; padding-inline: 10px; border-radius: var(--r-sm);
  color: var(--sidebar-text); font-weight: 500; font-size: var(--fs-sm); text-decoration: none; background: transparent;
}
.shell .nav a.nav-item:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-active); }
.shell .nav a.nav-item.active, .shell .nav a.nav-item.is-active {
  background: var(--sidebar-active-bg); color: var(--sidebar-text-active); font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.shell .nav a.nav-item svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.nav .is-pending { display: flex; align-items: center; gap: 10px; padding-block: 8px; padding-inline: 10px; border-radius: var(--r-sm); color: var(--sidebar-text); font-size: var(--fs-sm); opacity: .55; cursor: default; }
.nav .is-pending svg { width: 18px; height: 18px; flex: none; }
.nav .pending-tag { margin-inline-start: auto; font-size: 10px; opacity: .8; border: 0; background: transparent; color: inherit; padding: 0; }
.nav-grp { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sidebar-text); opacity: .6; padding-block: 12px 4px;   /* 128.1 · open-file.css's 12px, not 10 */ padding-inline: 10px; }
/* 122 · the heading is a button and the pages under it fold — base.css paints every button as a paper
   box, so the rail's heading is un-boxed here; the same rules as open-file.css for the CRM-native pages */
.shell .nav button.nav-grp { display: flex; align-items: center; gap: 6px; inline-size: 100%; text-align: start; background: none; border: 0; box-shadow: none; border-radius: var(--r-sm); font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sidebar-text); cursor: pointer; }
.shell .nav button.nav-grp:hover, .shell .nav button.nav-grp:focus-visible { opacity: 1; background: var(--sidebar-hover-bg); color: var(--sidebar-text); }
.shell .nav button.nav-grp:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.shell .nav .nav-grp-name { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.shell .nav .nav-grp .nav-chevron { flex: none; margin-inline-start: auto; width: 12px; height: 12px; transition: transform 120ms ease; }
.shell .nav .nav-grp[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.shell .nav .nav-grp.is-here[aria-expanded="false"] { opacity: 1; color: var(--lime); }
.shell .nav .nav-items[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .shell .nav .nav-grp .nav-chevron { transition: none; } }
/* 189 · the Finance menu's seven groups inside «Finance» — the same rule as open-file.css */
.shell .nav button.nav-grp.nav-subgrp { padding-block: 8px 3px; padding-inline-start: 18px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; text-transform: none; opacity: .72; }
.shell .nav .nav-items .nav-items { padding-block-end: 2px; }
.shell .main { min-inline-size: 0; display: flex; flex-direction: column; }
.shell .app-main { flex: 1 1 auto; }
/* 128 · an old page's main region waits for the rail: hidden until loadShell sets html[data-shell] (first-paint.js sets it
   itself after 3 s if no script ever does) — the bare skeleton painted before the scripts arrived was the «restart» Karim saw */
html:not([data-shell]) .shell > .main > .app-main { visibility: hidden; }
.topbar-crumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; min-inline-size: 0; margin-inline-end: var(--sp-2); }
.topbar-crumb a { color: var(--text-3); }
.topbar-crumb a:hover { color: var(--brand); }
.topbar-crumb b { color: var(--text); font-weight: 600; }
.topbar-crumb .sep { color: var(--text-4); }

/* ---------- 3. the CRM pieces the shell itself is made of (components.css, copied) ---------- */
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 12px; color: #FFFFFF; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); flex: none; }
.avatar.sm { width: 26px; height: 26px; font-size: 10px; }
.avatar.xs { width: 22px; height: 22px; font-size: 9px; }
.dropdown { position: relative; }
.menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-inline-size: 210px; max-inline-size: min(320px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 5px; z-index: var(--z-menu); }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding-block: 9px; padding-inline: 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text); text-align: start; background: transparent; border: 0; cursor: pointer; text-decoration: none; }
.menu button:hover, .menu a:hover { background: var(--surface-hover); }
.menu[hidden] { display: none; }
.pill-count { display: inline-grid; place-items: center; min-inline-size: 20px; height: 20px; padding-inline: 6px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 600; }

/* ---------- 4. the bell (open-file.css, copied) ---------- */
.bell-block .icon-btn { position: relative; }
.bell-block .icon-btn .icon { width: 18px; height: 18px; }
.bell-n { position: absolute; inset-block-start: -4px; inset-inline-end: -4px; min-inline-size: 18px; height: 18px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding-inline: 5px; }
.bell-n[hidden] { display: none; }
.bell-panel { min-inline-size: 340px; max-inline-size: 420px; max-block-size: 70vh; overflow: auto; padding: 0; }
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 10px; padding-inline: 12px; font-weight: 600; border-block-end: 1px solid var(--border); }
.bell-head .faint { font-weight: 400; font-size: var(--fs-xs); color: var(--text-4); }
.bell-row { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding-block: 10px; padding-inline: 12px; border-block-end: 1px solid var(--border); text-align: start; background: transparent; border-inline: 0; border-block-start: 0; cursor: pointer; font: inherit; color: inherit; }
.bell-row:hover { background: var(--surface-2); }
.bell-row.unread { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.bell-row .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); flex: none; margin-block-start: 6px; visibility: hidden; }
.bell-row.unread .dot { visibility: visible; }
.bell-row b { display: block; font-size: var(--fs-sm); }
.bell-row .what { font-size: var(--fs-sm); color: var(--text-2); }
.bell-row .meta { font-size: 11px; color: var(--text-4); margin-block-start: 2px; }
.bell-row .grow { flex: 1; min-inline-size: 0; }
.bell-empty { padding-block: 24px; padding-inline: 12px; color: var(--text-4); text-align: center; font-size: var(--fs-sm); }

/* ---------- 5. small mendings where the old components meet the new tokens ---------- */
.btn-primary, .btn-secondary, .btn-danger, .btn-quiet { border-radius: var(--r-sm); }
.btn-primary { box-shadow: var(--shadow-brand); }
.input, .select, textarea.input { border-radius: var(--r-xs); }
.input:focus, textarea.input:focus, select.input:focus { border-color: var(--brand); box-shadow: var(--ring); outline: none; }
.form-card, .detail-panel, .chart-detail, .modal { border-radius: var(--r-lg); }
.badge, .chip, .log-chip { border-radius: 999px; }
/* the rail never underlines, the crumb never underlines — base.css underlines every link by default */
.shell .sidebar a, .topbar-crumb a, .topbar-actions a { text-decoration: none; }
.shell .brand, .shell .brand:hover { text-decoration: none; color: var(--sidebar-text-active); }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .shell .sidebar { position: fixed; inset-inline-start: calc(-1 * var(--sidebar-w)); width: var(--sidebar-w); } .shell.nav-open .sidebar { inset-inline-start: 0; transform: none; box-shadow: var(--shadow-lg); z-index: 60; } }
/* tour 13 · F9: the ☰ menu is touched — its group heads and lines 44 px; and the page behind it dimmed while it is open
   (a press on the dim closes it: file-shell.js closes on any press outside the rail) */
@media (max-width: 900px) {
  .shell .nav button.nav-grp, .shell .nav a.nav-item, .shell .nav-fiscal { min-block-size: 44px; }
  .shell::before { content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(12, 27, 51, .40); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
  .shell.nav-open::before { opacity: 1; visibility: visible; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .shell::before { transition: none; } }
/* 175 · the Finance menu: a count beside an entry that waits for somebody, and the fiscal year's state at the foot */
.nav-item .nav-n { margin-inline-start: auto; flex: none; min-inline-size: 20px; block-size: 18px; padding-inline: 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; line-height: 1; }
.nav-item .nav-n.bad { background: var(--rose-500); color: #fff; }
.nav-item .nav-n.warn { background: var(--amber-500); color: #3a2600; }
.nav-fiscal { display: flex; align-items: center; gap: 8px; margin-block: 14px 4px; margin-inline: 6px; padding-block: 8px; padding-inline: 10px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .06); color: var(--sidebar-text); font-size: var(--fs-xs); text-decoration: none; }
.nav-fiscal:hover { color: var(--sidebar-text-active); }
.nav-fiscal i { flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--lime); }
.nav-fiscal i.closed { background: var(--slate-500); }
/* 176 · the Chart of accounts: the year's small line, the balance's side, the way into the ledger */
.tree-trend { flex: none; inline-size: 92px; display: inline-flex; justify-content: flex-end; align-items: center; font-size: var(--size-1); color: var(--ink-faint); }
.tree-spark polyline { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linejoin: round; }
.tree-spark circle { fill: var(--navy); }
.tree-side { font-family: var(--font-en); font-size: 11px; color: var(--text-3); }
.tree-ledger { flex: none; inline-size: 28px; block-size: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--brand); }
.tree-ledger:hover, .tree-ledger:focus-visible { background: var(--brand-soft); }
.tree-ledger.is-none { visibility: hidden; }
.chip.is-only { border-style: dashed; }
.chip.is-only.is-on { border-style: solid; }