/* ═══════════════════════════════════════════════════════════════════════════
   AUTOZONE v2.3 — "Navy & gold, renewed"
   One stylesheet, two themes. A navy chassis, a quiet light canvas, one gold.

   The class names are the same ones every module already uses (card, table.grid,
   btn, tag, kpi, toolbar …), so the whole system changes from this file and the
   shared layout — no module view had to learn a new vocabulary. What changed is
   underneath: Vazirmatn for every script on the page (IBM Plex Mono stays for
   codes), a softer canvas with white cards on it, 16px corners on surfaces and
   12px on controls, layered shadows instead of heavy rings, pills for status,
   and one focus ring everywhere.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
    color-scheme:light;
    --font-ui:"Vazirmatn","Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif;
    --font-display:var(--font-ui);
    /* Kurdish inside a code-styled element falls through to Vazirmatn, not to a monospaced Arabic face that
       pulls every letter apart */
    --font-mono:"IBM Plex Mono","Vazirmatn",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

    /* type scale — a little more generous than before; Vazirmatn reads larger than Plex at the same size */
    --fs-xs:12px; --fs-sm:13px; --fs-base:14.5px; --fs-md:16px; --fs-lg:19px; --fs-xl:23px; --fs-2xl:28px;

    /* brand */
    --midnight:#0F1B2D; --midnight-deep:#0A1322; --midnight-raise:#1A2A42;
    --accent:#D4A640; --accent2:#E6C067; --accent-hover:#C8982F; --accent-ink:#86630E; --on-accent:#1B1405;
    --accent-soft:rgba(212,166,64,.13); --accent-ring:rgba(212,166,64,.5);

    /* surfaces and text */
    --bg:#F5F7FA; --card:#FFFFFF; --soft:#F4F6F9; --soft-2:#EDF0F5; --line:#E4E8EF; --line-strong:#D2D9E3; --field-line:#D5DCE6;
    --th-bg:#F7F9FC; --row-hover:#F8FAFD;
    --text:#152033; --muted:#5B6878; --placeholder:#8792A2; --link:#2455A4;

    /* status: every pair is AA on its own background */
    --ok:#0B7549; --ok-bg:#E3F4EB; --warn:#935B04; --warn-bg:#FCF1D9; --bad:#BA3029; --bad-bg:#FCEAE8;
    --info:#2356AA; --info-bg:#E6EEFB; --purple:#6842AA; --purple-bg:#EFE9FA;

    /* charts read these (BI dashboard, executive overview) so a chart changes with the theme */
    --chart-1:#D4A640; --chart-2:#2F5E9E; --chart-3:#1F9D6B; --chart-4:#7A5AC8; --chart-5:#D8594C; --chart-6:#8E99A8;
    --chart-grid:rgba(15,27,45,.07); --chart-text:#5B6878;

    /* names older views and the print layout still read */
    --brand:#0F1B2D; --brand2:#1A2A42; --ink:var(--text); --soft-bg:var(--soft); --good:var(--ok); --field:var(--soft);

    --sidebar:#0F1B2D; --sidebar-deep:#0A1322; --sidebar-text:#E8EDF5; --sidebar-muted:#8D9AAE; --sidebar-sub:#A9B4C4;
    --sidebar-line:rgba(232,237,245,.08); --sidebar-hover:rgba(255,255,255,.045); --sidebar-active:rgba(255,255,255,.08);

    --top-bg:rgba(245,247,250,.84);
    --plate-a:#F7F9FB; --plate-b:#D3D9E0; --plate-ink:#232D3A;

    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
    --radius-xs:8px; --radius-sm:12px; --radius:16px; --radius-lg:20px;

    /* a hairline ring gives the white card its edge on a light canvas; the two soft layers give it lift */
    --shadow:0 0 0 1px rgba(15,27,45,.08),0 1px 2px rgba(15,27,45,.04),0 3px 8px -3px rgba(15,27,45,.06);
    --shadow-md:0 0 0 1px rgba(15,27,45,.06),0 4px 10px -4px rgba(15,27,45,.08),0 18px 36px -18px rgba(15,27,45,.2);
    --shadow-lg:0 0 0 1px rgba(15,27,45,.07),0 12px 24px -12px rgba(15,27,45,.18),0 32px 64px -24px rgba(15,27,45,.34);
    --ring:0 0 0 3px rgba(212,166,64,.32);
    --focus:rgba(212,166,64,.85);

    --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
    --mesh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16'%3E%3Cpath d='M0 8L14 0L28 8L14 16Z' fill='none' stroke='%230F1B2D' stroke-opacity='.06'/%3E%3C/svg%3E");
    --mesh-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16'%3E%3Cpath d='M0 8L14 0L28 8L14 16Z' fill='none' stroke='%23E8EDF4' stroke-opacity='.07'/%3E%3C/svg%3E");
    --glow:radial-gradient(1000px 320px at 50% -160px,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
}
html[data-theme="dark"]{
    color-scheme:dark;
    --midnight:#0A1220; --midnight-deep:#060C17; --midnight-raise:#16243B;
    --accent:#D8AE4E; --accent2:#EBC873; --accent-hover:#E2BA5E; --accent-ink:#E6BF62; --on-accent:#1B1405;
    --accent-soft:rgba(216,174,78,.14); --accent-ring:rgba(216,174,78,.55);
    --bg:#0C1422; --card:#131D2E; --soft:#0F1827; --soft-2:#1A2537; --line:#222E42; --line-strong:#2F3D54; --field-line:#2C394F;
    --th-bg:#111A2A; --row-hover:rgba(255,255,255,.028);
    --text:#E6EBF2; --muted:#98A4B6; --placeholder:#6E7B8F; --link:#8DB6F2;
    --ok:#4FC994; --ok-bg:rgba(79,201,148,.13); --warn:#EDB45A; --warn-bg:rgba(237,180,90,.13); --bad:#F47C76; --bad-bg:rgba(244,124,118,.13);
    --info:#8DB6F2; --info-bg:rgba(141,182,242,.13); --purple:#C3A6F2; --purple-bg:rgba(195,166,242,.13);
    --chart-1:#D8AE4E; --chart-2:#6F9BE0; --chart-3:#4FC994; --chart-4:#A98BE8; --chart-5:#F47C76; --chart-6:#7C889B;
    --chart-grid:rgba(255,255,255,.07); --chart-text:#98A4B6;
    --brand:#7F9CC7; --brand2:#5F7DA8;
    --sidebar:#0A1220; --sidebar-deep:#070D18; --sidebar-muted:#8390A5; --sidebar-line:rgba(232,237,245,.07);
    --top-bg:rgba(12,20,34,.84);
    --plate-a:#E8ECF1; --plate-b:#B7C0CA; --plate-ink:#1B2430;
    --shadow:0 0 0 1px rgba(255,255,255,.055),0 1px 2px rgba(0,0,0,.35),0 3px 8px -3px rgba(0,0,0,.3);
    --shadow-md:0 0 0 1px rgba(255,255,255,.07),0 14px 30px -14px rgba(0,0,0,.7);
    --shadow-lg:0 0 0 1px rgba(255,255,255,.08),0 32px 64px -24px rgba(0,0,0,.85);
    --ring:0 0 0 3px rgba(216,174,78,.35);
    --focus:rgba(216,174,78,.9);
    --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A4B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
    --mesh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16'%3E%3Cpath d='M0 8L14 0L28 8L14 16Z' fill='none' stroke='%23E8EDF4' stroke-opacity='.045'/%3E%3C/svg%3E");
    --glow:radial-gradient(1000px 320px at 50% -160px,rgba(64,96,148,.22),rgba(64,96,148,0) 70%);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:var(--fs-base);line-height:1.65;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* no letter-spacing on anything that may hold Kurdish or Arabic: spacing a joined script pulls its letters apart */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.4;text-wrap:balance}
h2{font-size:1.35rem}
h3{font-size:1.05rem;font-weight:700;margin:0 0 var(--s3)}
h4{margin:1.25em 0 .5em;font-size:.98rem;font-weight:700}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
bdi{unicode-bidi:isolate}
::selection{background:rgba(212,166,64,.3)}
.muted,.card .muted{color:var(--muted)}
.num,td.num,th.num{direction:ltr;font-variant-numeric:tabular-nums;white-space:nowrap}
[dir="rtl"] .num,[dir="rtl"] td.num,[dir="rtl"] th.num{text-align:left}
[dir="ltr"] .num,[dir="ltr"] td.num,[dir="ltr"] th.num{text-align:right}
.mono{font-family:var(--font-mono);font-size:.86em;font-weight:500;direction:ltr;unicode-bidi:isolate}
/* a figure marked .mono beside .num is an amount, not a code: the UI face, whose digits are all one width */
.num.mono,.num .mono{font-family:var(--font-ui);font-size:inherit;font-weight:inherit}
[dir="rtl"] .mono{text-align:right}
.check-ok{color:var(--ok)}.check-warn{color:var(--warn)}.check-fail{color:var(--bad);font-weight:600}
.profit-pos{color:var(--ok);font-weight:600}.profit-neg{color:var(--bad);font-weight:600}
[id]{scroll-margin-top:84px}
/* one focus ring for everything that can take the keyboard; a field shows it as its own border instead */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:where(input,select,textarea):focus-visible{outline:none}

/* ── Shell ────────────────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:276px minmax(0,1fr);min-height:100vh}

.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;z-index:50;isolation:isolate;color:var(--sidebar-text);
    background:radial-gradient(380px 240px at 50% -90px,rgba(212,166,64,.14),rgba(212,166,64,0) 72%),linear-gradient(180deg,var(--sidebar) 0%,var(--sidebar-deep) 100%)}
.sidebar::after{ /* one gold hairline along the inner edge — the brand's only ornament */
    content:"";position:absolute;inset-block:0;inset-inline-end:0;width:1px;pointer-events:none;
    background:linear-gradient(180deg,rgba(212,166,64,0) 0,rgba(212,166,64,.42) 18%,rgba(212,166,64,.16) 62%,rgba(212,166,64,0) 100%)}
.sidebar-scroll{position:relative;flex:1;overflow-y:auto;padding:16px 12px 14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}

.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 16px;margin-bottom:12px;border-bottom:1px solid var(--sidebar-line);color:inherit}
.brand:hover{text-decoration:none}
.brand .mark{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:#fff;color:var(--midnight);
    font:800 14px/1 var(--font-ui);box-shadow:0 0 0 1px rgba(212,166,64,.55),0 8px 18px -8px rgba(0,0,0,.7)}
.brand .mark img{width:100%;height:100%;object-fit:contain;background:#fff}
.brand-text{min-width:0;display:flex;flex-direction:column}
.brand-text strong{font:700 14.5px/1.4 var(--font-display);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-text small{font-size:12px;line-height:1.5;color:var(--sidebar-muted)}

#sidebar-nav{display:flex;flex-direction:column;gap:2px}
.nav-ico{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;background:transparent;color:#AEB9CA;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:background-color .15s,color .15s,box-shadow .15s}
.area-icon,.nav-ico > svg{width:18px;height:18px;flex:none}
#sidebar-nav .nav-top,
.nav-area > summary{position:relative;display:flex;align-items:center;gap:11px;min-height:42px;padding:5px 8px;border-radius:12px;color:var(--sidebar-text);transition:background-color .15s,color .15s}
#sidebar-nav .nav-top{font-size:14px;font-weight:600}
#sidebar-nav .nav-top:hover,.nav-area > summary:hover{background:var(--sidebar-hover);text-decoration:none}
#sidebar-nav .nav-top:hover .nav-ico,.nav-area > summary:hover .nav-ico{color:#fff}
#sidebar-nav .nav-top.active,.nav-area.is-current > summary{background:var(--sidebar-active)}
#sidebar-nav .nav-top.active::before,.nav-area.is-current > summary::before{
    content:"";position:absolute;inset-inline-start:-12px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent2)}
#sidebar-nav .nav-top.active .nav-ico,.nav-area.is-current > summary .nav-ico{background:rgba(212,166,64,.16);color:var(--accent2);box-shadow:inset 0 0 0 1px rgba(212,166,64,.28)}
.nav-area > summary{list-style:none;cursor:pointer;user-select:none}
.nav-area > summary::-webkit-details-marker{display:none}
.area-text{min-width:0;flex:1;display:flex;flex-direction:column}
.area-label{font-size:14px;font-weight:600;line-height:1.4}
.nav-area .chev{width:16px;height:16px;flex:none;color:var(--sidebar-muted);transition:transform .2s}
.nav-area[open] > summary .chev{transform:rotate(180deg)}
.nav-items{position:relative;display:flex;flex-direction:column;gap:1px;margin:2px 0 8px;padding-inline-start:51px}
.nav-items::before{content:"";position:absolute;inset-inline-start:24px;top:6px;bottom:10px;width:1px;background:rgba(232,237,245,.12)}
.nav-items a{position:relative;display:block;padding:6px 10px;border-radius:9px;font-size:13.5px;line-height:1.5;color:var(--sidebar-sub);transition:background-color .15s,color .15s}
.nav-items a:hover{color:#fff;background:rgba(255,255,255,.045);text-decoration:none}
.nav-items a.active{color:#fff;font-weight:600;background:rgba(255,255,255,.075)}
.nav-items a.active::before{content:"";position:absolute;inset-inline-start:-30.5px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 3px var(--sidebar),0 0 10px rgba(230,192,103,.55)}
.nav-items a.nav-all{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;font-size:12.5px;color:var(--sidebar-muted)}
.nav-items a.nav-all .n{min-width:22px;height:18px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.07);color:#C3CCD9}
.nav-items a.nav-all:hover,.nav-items a.nav-all.active{color:#fff}
#sidebar-nav .nav-inbox .count{margin-inline-start:auto;min-width:24px;height:20px;padding:0 7px;border-radius:999px;display:grid;place-items:center;
    font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;background:rgba(212,166,64,.2);color:var(--accent2)}
/* ★ a person's own shortcuts, above the sections */
.nav-pins{margin:8px 0 12px;padding:8px 6px 6px;border-radius:12px;background:rgba(212,166,64,.06);box-shadow:inset 0 0 0 1px rgba(212,166,64,.17)}
.nav-pins-head{padding:0 8px 4px;font-size:11.5px;font-weight:700;color:var(--accent2)}
.nav-pins a{display:block;padding:6px 10px;border-radius:9px;font-size:13.5px;line-height:1.5;color:#C9D2DE;transition:background-color .15s,color .15s}
.nav-pins a:hover{color:#fff;background:rgba(255,255,255,.05);text-decoration:none}
.nav-pins a.active{color:#fff;font-weight:600;background:rgba(255,255,255,.08)}
#sidebar-nav .guide-link{margin-top:10px;padding-top:10px;border-top:1px solid var(--sidebar-line);border-radius:0 0 12px 12px}
#sidebar-nav .guide-link.active::before{top:20px}

.langs{display:flex;gap:4px;margin:0;padding:10px 12px 12px;border-top:1px solid var(--sidebar-line);background:rgba(0,0,0,.16)}
.langs button{flex:1;height:30px;border-radius:9px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035);color:var(--sidebar-muted);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:all .15s}
.langs button:hover{color:#fff;border-color:rgba(255,255,255,.18)}
.langs button.on{background:rgba(212,166,64,.15);border-color:rgba(212,166,64,.45);color:var(--accent2);font-weight:700}

.nav-backdrop{display:none;position:fixed;inset:0;z-index:45;background:rgba(6,11,20,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

.main-col{position:relative;min-width:0;display:flex;flex-direction:column;isolation:isolate}
.main-col::before{content:"";position:absolute;inset:0 0 auto 0;height:360px;z-index:-1;pointer-events:none;background:var(--glow)}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;height:64px;padding:0 32px;
    background:var(--top-bg);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid var(--line)}
.topbar svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn{position:relative;width:40px;height:40px;flex:none;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);display:grid;place-items:center;cursor:pointer;
    box-shadow:0 1px 2px rgba(15,27,45,.05);transition:border-color .15s,background-color .15s,color .15s}
.icon-btn:hover{border-color:var(--line-strong);background:var(--soft);text-decoration:none}
.menu-toggle{display:none}
.topbar .search{position:relative;flex:1;max-width:540px;display:flex;align-items:center;margin:0}
.topbar .search svg{position:absolute;inset-inline-start:15px;color:var(--muted);pointer-events:none}
.topbar .search input{width:100%;height:42px;border-radius:999px;border:1px solid var(--line);background-color:var(--card);padding-inline:44px 84px;font-size:14px;box-shadow:0 1px 2px rgba(15,27,45,.04)}
.topbar .search input:hover:not(:focus){border-color:var(--line-strong)}
.topbar .search input::-webkit-search-cancel-button,.palette-field input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.kbd{position:absolute;top:50%;transform:translateY(-50%);direction:ltr;pointer-events:none;padding:4px 7px;border-radius:7px;border:1px solid var(--line);border-bottom-width:2px;background:var(--soft);color:var(--muted);font:600 11px/1 var(--font-ui)}
[dir="rtl"] .kbd{left:12px}[dir="ltr"] .kbd{right:12px}
.topbar-tools{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.topbar .context{display:flex;align-items:center;gap:8px;margin:0}
.pill-select{position:relative;display:flex;align-items:center;margin:0}
.pill-select > svg{position:absolute;inset-inline-start:13px;width:17px;height:17px;color:var(--muted);pointer-events:none}
.topbar .pill-select select{height:40px;max-width:210px;border-radius:999px;border-color:var(--line);padding-inline-start:38px;font-size:13.5px;font-weight:600;box-shadow:0 1px 2px rgba(15,27,45,.04)}
.bell .n{position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:grid;place-items:center;
    background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--bg)}
.theme-seg{display:flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--soft)}
.theme-seg button{height:32px;padding:0 12px;border:0;border-radius:999px;background:transparent;display:flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:color .15s,background-color .15s}
.theme-seg button:hover{color:var(--text)}
.theme-seg button svg{width:16px;height:16px}
.theme-seg button.on{background:var(--card);color:var(--text);font-weight:700;box-shadow:0 1px 2px rgba(15,27,45,.12),0 0 0 1px var(--line)}
.user{position:relative}
.user > summary{list-style:none;display:flex;align-items:center;gap:10px;height:44px;padding-inline:4px 12px;border-radius:999px;border:1px solid transparent;cursor:pointer;user-select:none;transition:background-color .15s,border-color .15s}
.user > summary::-webkit-details-marker{display:none}
.user > summary:hover,.user[open] > summary{background:var(--card);border-color:var(--line)}
.user .avatar{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--font-ui);
    background:linear-gradient(150deg,var(--midnight-raise),var(--midnight));color:var(--accent2);box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--accent-ring)}
.user-text{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.user-text strong{font-size:13.5px;font-weight:700;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.user-text small{font-size:11.5px;color:var(--muted);white-space:nowrap}
.user > summary .chev{width:16px;height:16px;color:var(--muted)}
.user-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:240px;padding:6px;border-radius:16px;background:var(--card);box-shadow:var(--shadow-lg);z-index:40}
.user-menu a,.user-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:none;color:var(--text);font:inherit;font-size:14px;text-align:start;cursor:pointer}
.user-menu a:hover,.user-menu button:hover{background:var(--soft);text-decoration:none}
.user-menu form{margin:0}
.user-menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.user-menu .danger{color:var(--bad)}
.menu-context,.menu-theme{display:none}
.menu-context{flex-direction:column;gap:6px;padding:4px 4px 8px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.menu-context select{width:100%}
.menu-theme{gap:4px;padding:4px 4px 8px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.user-menu .menu-theme button{flex:1;justify-content:center;padding:7px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
.user-menu .menu-theme button.on{background:var(--midnight);color:var(--accent2);box-shadow:none;font-weight:700}

/* ── Page ─────────────────────────────────────────────────────────────────── */
.page{width:100%;max-width:1480px;margin-inline:auto;padding:24px 32px 64px}
.page-head{margin:0 0 22px}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:4px;font-size:12.5px;color:var(--muted)}
.crumbs svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
[dir="ltr"] .crumbs svg{transform:scaleX(-1)}
.crumbs a:hover{color:var(--text)}
.crumbs [aria-current]{color:var(--text);font-weight:600}
.page-head h1{margin:0;font-size:var(--fs-2xl);font-weight:800;line-height:1.35}
.page-sub{margin:6px 0 0;max-width:80ch;color:var(--muted)}
.page-title-row{display:flex;align-items:center;gap:8px}
.page-title-row h1{min-width:0}
.pin-form{margin:2px 0 0;flex:none}
.pin-btn{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--placeholder);font-size:20px;line-height:1;cursor:pointer;transition:background-color .15s,color .15s,transform .15s}
.pin-btn:hover{background:var(--accent-soft);color:var(--accent-ink)}
.pin-btn:active{transform:scale(.92)}
.pin-btn.on{color:var(--accent)}

/* A message about what just happened. Inside a page it is a banner; the layout's own messages (saved, posted,
   refused) sit in .toasts — they float over the page, leave by themselves (public/js/app.js) and stay in the
   document for anything that reads it. */
.flash{position:relative;display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;padding:12px 16px;border-radius:var(--radius-sm);background:var(--ok-bg);color:var(--ok);font-weight:500;line-height:1.6;box-shadow:inset 0 0 0 1px rgba(11,117,73,.16)}
.flash::before{content:"";width:18px;height:18px;flex:none;margin-top:3px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.flash.error{background:var(--bad-bg);color:var(--bad);box-shadow:inset 0 0 0 1px rgba(186,48,41,.18)}
.flash.error::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 3 17a2 2 0 0 0 1.7 3h14.6A2 2 0 0 0 21 17L13.7 4.3a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 16.8v.1'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 3 17a2 2 0 0 0 1.7 3h14.6A2 2 0 0 0 21 17L13.7 4.3a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 16.8v.1'/%3E%3C/svg%3E")}
.toasts{position:fixed;z-index:70;top:76px;inset-inline-end:24px;display:flex;flex-direction:column;gap:10px;width:min(440px,calc(100vw - 32px));pointer-events:none}
.toasts .flash{margin:0;padding-block:12px;padding-inline:14px 8px;align-items:center;border-radius:14px;background:var(--card);color:var(--text);pointer-events:auto;
    box-shadow:var(--shadow-lg);border-inline-start:4px solid var(--ok);animation:toast-in .32s cubic-bezier(.2,.8,.2,1);transition:opacity .3s ease,transform .3s ease}
.toasts .flash::before{margin-top:0;background:var(--ok)}
.toasts .flash.error{border-inline-start-color:var(--bad)}
.toasts .flash.error::before{background:var(--bad)}
.flash.warn{background:var(--warn-bg);color:var(--warn);box-shadow:inset 0 0 0 1px rgba(147,91,4,.18)}
.flash.warn::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 3 17a2 2 0 0 0 1.7 3h14.6A2 2 0 0 0 21 17L13.7 4.3a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 16.8v.1'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 3 17a2 2 0 0 0 1.7 3h14.6A2 2 0 0 0 21 17L13.7 4.3a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 16.8v.1'/%3E%3C/svg%3E")}
.toasts .flash.warn{border-inline-start-color:var(--warn);background:var(--card);color:var(--text)}
.toasts .flash.warn::before{background:var(--warn)}
.flash-text{flex:1;min-width:0;overflow-wrap:anywhere}
.flash-x{flex:none;width:30px;height:30px;padding:0;border:0;border-radius:999px;display:grid;place-items:center;background:transparent;color:var(--muted);font:400 20px/1 var(--font-ui);cursor:pointer}
.flash-x:hover{background:var(--soft);color:var(--text)}
.toasts .flash.is-leaving{opacity:0;transform:translateY(-8px)}
.toasts .flash.is-gone{display:none}
@keyframes toast-in{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}

/* ── Surfaces ─────────────────────────────────────────────────────────────── */
.card{position:relative;margin-bottom:18px;padding:22px 24px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.card h3{margin:0 0 14px;font-size:16.5px;font-weight:700}
.card h3 small{font-family:var(--font-ui);font-weight:400}
details > summary{cursor:pointer}
details.card > summary{font-weight:700}
details.card > summary::marker{color:var(--muted)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* A table taller than the screen scrolls inside its own box, with its header held at the top of that box. */
.table-scroll{overflow:auto;max-height:max(440px,calc(100vh - 150px));-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.table-scroll table{min-width:760px}
.table-scroll > table.grid > thead{position:sticky;top:0;z-index:2}
/* a long table that fits across its card keeps its header under the top bar (public/js/app.js marks it) */
.card.pin-head:has(> table.grid){overflow:visible}
.card.pin-head > table.grid > thead{position:sticky;top:64px;z-index:3}
/* a chart draws inside a box of a known height: a canvas that sizes itself from its own card grows forever */
.chart-box{position:relative;height:280px;min-width:0}
.chart-box.sm{height:220px}
.card canvas{max-height:360px}
dl.kv{display:grid;grid-template-columns:160px minmax(0,1fr);gap:8px 16px;margin:0}
dl.kv dt{color:var(--muted);font-size:13.5px}
dl.kv dd{margin:0;min-width:0}
/* the same facts as a list: a label at the start of the line, its figure at the end */
ul.kv{margin:0 0 6px;padding:0;list-style:none}
ul.kv > li{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}
ul.kv > li:last-child{border-bottom:0}
ul.kv > li > span:first-child{min-width:0;color:var(--text)}
ul.kv > li > span:last-child{font-variant-numeric:tabular-nums}
.gallery{display:flex;flex-wrap:wrap;gap:12px}
.gallery figure{margin:0;width:150px}
.gallery img{width:150px;height:110px;object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}
.gallery .doc{display:block;padding:12px;border:1px dashed var(--line-strong);border-radius:12px;font-size:13px}

/* ── Tables ───────────────────────────────────────────────────────────────── */
table.grid{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
table.grid th{padding:10px 12px;text-align:start;vertical-align:bottom;font-size:12.5px;font-weight:600;line-height:1.45;color:var(--muted);background:var(--th-bg);border-bottom:1px solid var(--line);white-space:nowrap}
[dir="rtl"] table.grid thead th:first-child,[dir="ltr"] table.grid thead th:last-child{border-top-right-radius:10px}
[dir="rtl"] table.grid thead th:last-child,[dir="ltr"] table.grid thead th:first-child{border-top-left-radius:10px}
table.grid td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.grid td.mono,table.grid td > .mono,table.grid td > a.mono,table.grid td > small.mono{white-space:nowrap}
.card:has(> table.grid),.card:has(> .table-scroll){overflow-x:auto}
table.grid tbody tr:last-child td{border-bottom:0}
table.grid tbody tr{transition:background-color .12s}
table.grid tbody tr:hover{background:var(--row-hover)}
table.grid tr.total td{font-weight:700;background:var(--th-bg);border-top:1px solid var(--line-strong);border-bottom:0}
table.grid a:not(.btn):not(.tag){color:var(--link);font-weight:500}
table.grid td.muted:only-child{padding:var(--s6) var(--s4);text-align:center;color:var(--muted)}
.fin-summary td:first-child{color:var(--muted)}

.pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:16px;font-size:13px;color:var(--muted)}
.pagination .pg-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pagination a,.pagination span.pg-on,.pagination span.pg-off,.pagination span.pg-gap{min-width:36px;height:36px;padding:0 11px;border-radius:10px;display:inline-grid;place-items:center;font-weight:600;font-variant-numeric:tabular-nums}
.pagination a{color:var(--text);box-shadow:inset 0 0 0 1px var(--line);background:var(--card);transition:box-shadow .15s,background-color .15s}
.pagination a:hover{box-shadow:inset 0 0 0 1px var(--accent-ring);background:var(--accent-soft);text-decoration:none}
.pagination span.pg-on{background:var(--midnight);color:var(--accent2);font-weight:700;box-shadow:0 4px 10px -6px rgba(15,27,45,.6)}
html[data-theme="dark"] .pagination span.pg-on{background:var(--accent);color:var(--on-accent)}
.pagination span.pg-off{opacity:.4}
.pagination svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .pagination .pg-prev svg,[dir="rtl"] .pagination .pg-next svg{transform:scaleX(-1)}

/* ── Forms ────────────────────────────────────────────────────────────────── */
:where(input:not([type="checkbox"],[type="radio"],[type="range"],[type="file"],[type="color"],[type="hidden"])),select,textarea{
    min-width:0;height:40px;padding:0 13px;border-radius:var(--radius-sm);border:1px solid var(--field-line);background-color:var(--card);color:var(--text);
    font-family:var(--font-ui);font-size:14px;font-weight:400;line-height:1.4;transition:border-color .15s,box-shadow .15s,background-color .15s}
textarea{height:auto;min-height:96px;padding:10px 13px;line-height:1.65;resize:vertical}
select{appearance:none;-webkit-appearance:none;padding-inline-end:36px;background-image:var(--chev);background-repeat:no-repeat;background-size:16px;cursor:pointer}
[dir="rtl"] select{background-position:left 11px center}
[dir="ltr"] select{background-position:right 11px center}
select[multiple],select[size]:not([size="1"]){height:auto;padding:6px;background-image:none}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input[type="email"],input[type="url"],input[type="tel"]{direction:ltr}
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="url"],[dir="rtl"] input[type="tel"]{text-align:right}
:where(input,select,textarea):hover:where(:not(:disabled):not(:focus)){border-color:var(--line-strong)}
:where(input,select,textarea):focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
input:disabled,select:disabled,textarea:disabled{opacity:.62;cursor:not-allowed;background-color:var(--soft)}
input[readonly]{background-color:var(--soft)}
input[type="number"]{font-variant-numeric:tabular-nums}
input[type="date"],input[type="datetime-local"],input[type="month"],input[type="time"]{font-variant-numeric:tabular-nums}
input[type="checkbox"],input[type="radio"]{width:17px;height:17px;margin:0;accent-color:var(--accent);vertical-align:-3px}
input[type="range"],progress{accent-color:var(--accent)}
input[type="file"]{font:inherit;font-size:13px;color:var(--muted)}
input[type="file"]::file-selector-button{margin-inline-end:10px;padding:7px 14px;border-radius:10px;border:1px solid var(--field-line);background:var(--soft);color:var(--text);font:inherit;font-weight:600;cursor:pointer}
input[type="color"]{width:44px;height:34px;padding:2px;border:1px solid var(--field-line);border-radius:8px;background:var(--card)}
label{display:block;font-size:13px;font-weight:600;color:var(--muted)}
:where(label) :where(input:not([type="checkbox"],[type="radio"]),select,textarea){display:block;width:100%;margin-top:6px}
label.inline{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--text)}
label.inline input{width:auto;margin:0}

/* ── Buttons & bars ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:var(--radius-sm);border:1px solid var(--field-line);
    background:var(--card);color:var(--text);font-family:var(--font-ui);font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap;cursor:pointer;
    box-shadow:0 1px 2px rgba(15,27,45,.05);text-decoration:none!important;transition:background-color .15s,border-color .15s,box-shadow .15s,color .15s,transform .06s}
.btn:hover{border-color:var(--line-strong);background:var(--soft)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn.primary{border-color:transparent;color:var(--on-accent);background:var(--accent);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 1px 2px rgba(110,78,8,.22),0 8px 18px -10px rgba(212,166,64,.95)}
.btn.primary:hover{background:var(--accent-hover);border-color:transparent}
.btn.danger{color:var(--bad);border-color:rgba(186,48,41,.32);background:transparent;box-shadow:none}
.btn.danger:hover{color:#fff;background:var(--bad);border-color:var(--bad)}
html[data-theme="dark"] .btn.danger:hover{color:#1B0B0A}
.btn-link{padding:0;border:0;background:transparent;color:var(--link);font:inherit;font-weight:600;cursor:pointer}
.btn-link:hover{text-decoration:underline;text-underline-offset:3px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.toolbar :where(input:not([type="checkbox"],[type="radio"]),select){width:auto}
/* a bar of labelled fields lines its buttons up with the fields, not with the labels above them */
.toolbar:has(> label:not(.inline) > :is(input,select)){align-items:flex-end}
.toolbar > label.inline{min-height:40px}
.page > form.toolbar{padding:14px 16px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.pills{display:inline-flex;gap:2px;padding:3px;border-radius:12px;border:1px solid var(--line);background:var(--soft)}
.pills button,.pills a{padding:6px 12px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.pills button:hover,.pills a:hover{color:var(--text);text-decoration:none}
.pills button.on,.pills a.on{background:var(--card);color:var(--text);font-weight:700;box-shadow:0 1px 2px rgba(15,27,45,.12),0 0 0 1px var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chips button{padding:5px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}
.chips button:hover{color:var(--text);border-color:var(--line-strong)}
.chips button.on{background:var(--midnight);border-color:var(--midnight);color:var(--accent2);font-weight:700}
html[data-theme="dark"] .chips button.on{background:var(--accent-soft);border-color:var(--accent-ring);color:var(--accent-ink)}
.bulk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.bulk-bar select{min-width:130px}
.bulk-bar:focus-within{box-shadow:var(--shadow-md),0 0 0 1px var(--accent-ring)}

/* ── Tags ─────────────────────────────────────────────────────────────────── */
/* a status is a pill with a dot; a plain .tag is a label and carries no dot */
.tag{display:inline-flex;align-items:center;gap:6px;padding:1px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:20px;white-space:nowrap;vertical-align:middle;
    color:var(--muted);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.tag.green,.tag.amber,.tag.red,.tag.blue,.tag.purple,.tag.ok,.tag.warn,.tag.bad,.tag.info{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 16%,transparent)}
.tag.green::before,.tag.amber::before,.tag.red::before,.tag.blue::before,.tag.purple::before,
.tag.ok::before,.tag.warn::before,.tag.bad::before,.tag.info::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
.tag.green,.tag.ok{color:var(--ok);background:var(--ok-bg)}
.tag.amber,.tag.warn{color:var(--warn);background:var(--warn-bg)}
.tag.red,.tag.bad{color:var(--bad);background:var(--bad-bg)}
.tag.blue,.tag.info{color:var(--info);background:var(--info-bg)}
.tag.purple{color:var(--purple);background:var(--purple-bg)}

/* ── Empty states ─────────────────────────────────────────────────────────── */
.empty{padding:var(--s6) var(--s4);text-align:center;color:var(--muted)}
.empty .mark{width:56px;height:56px;margin:0 auto var(--s3);border-radius:16px;display:grid;place-items:center;font-size:1.35rem;
    background:linear-gradient(180deg,var(--soft),var(--card));color:var(--muted);box-shadow:inset 0 0 0 1px var(--line),0 6px 14px -8px rgba(15,27,45,.22)}
.empty .mark svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.empty strong{display:block;margin-bottom:var(--s1);color:var(--text);font-size:15px;font-weight:700}
.empty p{max-width:44ch;margin:0 auto;font-size:13.5px;line-height:1.7}
.empty .btn{margin-top:var(--s4)}

/* ── KPIs & dashboards ────────────────────────────────────────────────────── */
.dash-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:18px}
.dash-head h2{margin:0;font-size:22px;font-weight:800}
.dash-head .sub{margin-top:2px;font-size:13.5px;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:18px}
/* the figure is the thing on the card: large, bold, tabular; the label above it and the note under it support it */
.kpi{position:relative;min-width:0;padding:18px 20px 16px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.kpi small{display:block;margin-bottom:8px;font-size:13px;font-weight:600;line-height:1.45;color:var(--muted)}
.kpi strong{display:block;direction:ltr;font-family:var(--font-ui);font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
[dir="rtl"] .kpi strong{text-align:right}
[dir="ltr"] .kpi strong{text-align:left}
/* a figure marked .mono is still a figure: the UI face with tabular digits, a step smaller */
.kpi strong.mono{font-family:var(--font-ui);font-size:24px;letter-spacing:-.015em;line-height:1.25}
.kpi strong .cur,.kpi strong i{margin-inline-start:5px;font-size:13px;font-style:normal;font-weight:600;letter-spacing:0;color:var(--muted)}
.kpi .sub,.kpi .delta{display:block;margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.kpi strong.zero{color:var(--muted);font-weight:600;opacity:.5}
/* an icon badge at the card's top corner; the label leaves room for it */
.kpi-ico{position:absolute;top:16px;inset-inline-end:16px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px rgba(212,166,64,.2)}
.kpi-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kpi-ico.ok{background:var(--ok-bg);color:var(--ok);box-shadow:none}
.kpi-ico.info{background:var(--info-bg);color:var(--info);box-shadow:none}
.kpi-ico.warn{background:var(--warn-bg);color:var(--warn);box-shadow:none}
.kpi-ico.bad{background:var(--bad-bg);color:var(--bad);box-shadow:none}
.kpi-ico.purple{background:var(--purple-bg);color:var(--purple);box-shadow:none}
.kpi:has(> .kpi-ico) > small{min-height:40px;display:flex;align-items:center;margin:-4px 0 6px;padding-inline-end:50px}
/* which way a figure moved since the month before: ▲ up, ▼ down; .inv where up is the bad direction (discounts, debts) */
.trend{display:inline-flex;align-items:center;gap:3px;padding:0 8px;border-radius:999px;direction:ltr;unicode-bidi:isolate;white-space:nowrap;vertical-align:1px;
    font-size:11.5px;font-weight:700;line-height:20px;font-variant-numeric:tabular-nums;color:var(--muted);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.trend::before{font-size:8.5px;line-height:1}
.trend.up::before{content:"▲";content:"▲"/""}
.trend.down::before{content:"▼";content:"▼"/""}
.trend.flat::before{content:"■";content:"■"/"";font-size:6px}
.trend.up,.trend.inv.down{color:var(--ok);background:var(--ok-bg);box-shadow:none}
.trend.down,.trend.inv.up{color:var(--bad);background:var(--bad-bg);box-shadow:none}
.delta .trend{margin-inline-end:4px}
a.kpi{display:block;color:inherit;text-decoration:none;cursor:pointer;transition:box-shadow .18s,transform .18s}
a.kpi::after{ /* a thin accent rail on the leading edge: enough to read as "this goes somewhere" */
    content:"";position:absolute;inset-block:14px;inset-inline-start:0;width:3px;border-radius:0 3px 3px 0;background:var(--accent);opacity:0;transition:opacity .15s ease}
a.kpi:hover::after,a.kpi:focus-visible::after{opacity:1}
a.kpi:hover{text-decoration:none;box-shadow:var(--shadow-md);transform:translateY(-2px)}
a.kpi:hover small{color:var(--accent-ink)}
a.kpi:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.kpi.is-bad{box-shadow:inset 3px 0 0 var(--bad),var(--shadow)}
.kpi.is-warn{box-shadow:inset 3px 0 0 var(--warn),var(--shadow)}
[dir="rtl"] .kpi.is-bad{box-shadow:inset -3px 0 0 var(--bad),var(--shadow)}
[dir="rtl"] .kpi.is-warn{box-shadow:inset -3px 0 0 var(--warn),var(--shadow)}
.kpis-auto{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.kpis-hero{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.kpis-hero .kpi{padding:20px 22px 18px}
.kpis-hero .kpi strong{font-size:28px}
.kpis-hero .kpi strong.mono{font-size:26px}
/* the numbers' freshness and the way into the pages behind them, as one quiet line */
.dash-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px 20px}
.dash-status-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-width:0;font-size:13.5px}
.status-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-bg)}
.dash-status.is-stale .status-dot{background:var(--warn);box-shadow:0 0 0 4px var(--warn-bg)}
.quick-links{display:flex;flex-wrap:wrap;gap:8px}
.quick-links .btn{min-height:36px;padding:6px 13px;font-size:13px}
/* what needs a decision today: one row of actions, each with its count */
.todo-list{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.todo-list .btn{padding-inline:8px 14px;gap:10px}
.todo-list .btn strong{min-width:26px;height:26px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;font-size:12.5px;font-variant-numeric:tabular-nums;background:var(--soft-2);color:var(--text)}
.todo-list .btn.danger strong{background:var(--bad-bg);color:var(--bad)}
.todo-list .btn.danger:hover strong{background:rgba(255,255,255,.2);color:inherit}
/* a card's heading with its note under it and its tags or links at the other end */
.card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px 16px;margin-bottom:14px}
.card-head h3{margin:0}
.card-head .muted{font-size:13px}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px}
.chart-card .big{margin:4px 0 0;direction:ltr;text-align:start;font-size:1.9rem;font-weight:800;line-height:1.25;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
[dir="rtl"] .chart-card .big{text-align:right}
.chart-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.chart-legend i{display:inline-block;width:10px;height:10px;margin-inline-end:6px;border-radius:3px;vertical-align:-1px}
/* the executive overview: ten numbered questions, each a card with its note under the title */
.sec > h3{display:flex;flex-direction:column;gap:2px;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:17px;font-weight:800}
.sec > h3 small{font-size:13px;font-weight:400;color:var(--muted)}
.sec > h4{display:flex;align-items:center;gap:8px;font-size:14.5px}
.sec > h4::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent)}
.sec .toolbar:last-child{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.featured{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center}
.featured .photo{min-height:150px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(160deg,var(--soft),var(--card));box-shadow:inset 0 0 0 1px var(--line)}
.featured .photo img{width:100%;height:170px;object-fit:cover}
.featured .photo svg{width:80%;opacity:.55}
.featured h4{margin:0 0 4px;font-size:1.2rem}
.featured .price{display:inline-block;margin-top:8px;padding:6px 14px;border-radius:10px;direction:ltr;font-size:1.1rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent-ink);background:var(--accent-soft)}
.featured .specs{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:13px;color:var(--muted)}
/* in a narrow card the picture goes on top */
.featured.stack{grid-template-columns:minmax(0,1fr);align-items:start}
.featured.stack .photo{min-height:0;height:124px}
.featured.stack .photo img{height:124px}
.featured.stack .photo svg{width:44%}
dl.kv.tight{grid-template-columns:max-content minmax(0,1fr);gap:8px 14px}
.funnel{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.funnel-row{display:flex;align-items:center;gap:10px}
.funnel-label{width:130px;flex-shrink:0;font-size:13.5px}
.funnel-bar{height:22px;min-width:2px;border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-inline-end:6px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:var(--on-accent);font-size:12px;font-weight:700}
.funnel-drop{flex-shrink:0;font-size:12px;color:var(--muted)}
.notice{border-inline-start:3px solid var(--line)}
.notice:not(.card){padding:12px 16px;border-radius:var(--radius-sm);background:var(--soft)}
.notice.urgent{border-inline-start-color:var(--bad)}
.notice.normal{border-inline-start-color:var(--accent)}
.notice.low{border-inline-start-color:var(--line-strong)}

/* vehicle cards */
.car-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-bottom:18px}
.car-card{display:block;overflow:hidden;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);text-decoration:none!important;color:inherit;transition:box-shadow .18s,transform .18s}
.car-card:hover{box-shadow:var(--shadow-md),0 0 0 1px var(--accent-ring);transform:translateY(-2px)}
.car-card .photo{position:relative;height:150px;display:grid;place-items:center;background:linear-gradient(160deg,var(--soft),var(--card))}
.car-card .photo img{width:100%;height:100%;object-fit:cover}
.car-card .photo svg{width:70%;opacity:.55}
.car-card .photo .tag{position:absolute;top:10px;inset-inline-start:10px}
.car-card .body{padding:12px 14px}
.car-card strong{display:block;font-size:15px}
.car-card .specs{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;font-size:12.5px;color:var(--muted)}
.car-card .price-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.car-card .price{direction:ltr;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent-ink)}

/* the sections guide */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}
.guide-card{padding:20px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.guide-card .area-icon{width:38px;height:38px;padding:9px;margin-bottom:10px;border-radius:12px;color:var(--accent-ink);background:var(--accent-soft)}
.guide-card h3{margin:0 0 4px;font-size:15.5px}
.guide-card p{margin:0 0 10px;font-size:13.5px;line-height:1.65;color:var(--muted)}
.guide-card ul{margin:0;padding-inline-start:18px;font-size:13.5px;line-height:1.9}
.guide-card ul a{color:var(--link)}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.vtabs{margin-top:4px}
.vtabs input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.vtabs-nav{display:flex;flex-wrap:nowrap;gap:4px;margin-bottom:18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;border-bottom:1px solid var(--line)}
.vtabs-nav label{margin-bottom:-1px;padding:10px 14px;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;user-select:none;font-size:14px;font-weight:600;color:var(--muted);transition:color .15s,border-color .15s}
.vtabs-nav label:hover{color:var(--text);border-bottom-color:var(--line-strong)}
.vtabs-panel{display:none}
#vtab-1:checked ~ #vtab-panel-1,#vtab-2:checked ~ #vtab-panel-2,#vtab-3:checked ~ #vtab-panel-3,#vtab-4:checked ~ #vtab-panel-4,#vtab-5:checked ~ #vtab-panel-5,
#vtab-6:checked ~ #vtab-panel-6,#vtab-7:checked ~ #vtab-panel-7,#vtab-8:checked ~ #vtab-panel-8,#vtab-9:checked ~ #vtab-panel-9,#vtab-10:checked ~ #vtab-panel-10{display:block}
#vtab-1:checked ~ .vtabs-nav label[for=vtab-1],#vtab-2:checked ~ .vtabs-nav label[for=vtab-2],#vtab-3:checked ~ .vtabs-nav label[for=vtab-3],
#vtab-4:checked ~ .vtabs-nav label[for=vtab-4],#vtab-5:checked ~ .vtabs-nav label[for=vtab-5],#vtab-6:checked ~ .vtabs-nav label[for=vtab-6],
#vtab-7:checked ~ .vtabs-nav label[for=vtab-7],#vtab-8:checked ~ .vtabs-nav label[for=vtab-8],#vtab-9:checked ~ .vtabs-nav label[for=vtab-9],
#vtab-10:checked ~ .vtabs-nav label[for=vtab-10]{color:var(--text);border-bottom-color:var(--accent)}

.tabs > input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.tabs > .strip{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:var(--s4);border-bottom:1px solid var(--line)}
.tabs > .strip > label{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-bottom:-1px;padding:10px 16px;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;
    font-size:14px;font-weight:600;color:var(--muted);transition:color .15s,border-color .15s}
.tabs > .strip > label:hover{color:var(--text);border-bottom-color:var(--line-strong)}
.tabs > .strip > label .n{padding:0 7px;border-radius:999px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--soft);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.tabs > .panel{display:none}
.tabs > input:nth-of-type(1):checked ~ .strip > label:nth-of-type(1),.tabs > input:nth-of-type(2):checked ~ .strip > label:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ .strip > label:nth-of-type(3),.tabs > input:nth-of-type(4):checked ~ .strip > label:nth-of-type(4){color:var(--text);border-bottom-color:var(--accent)}
.tabs > input:nth-of-type(1):checked ~ .strip > label:nth-of-type(1) .n,.tabs > input:nth-of-type(2):checked ~ .strip > label:nth-of-type(2) .n,
.tabs > input:nth-of-type(3):checked ~ .strip > label:nth-of-type(3) .n,.tabs > input:nth-of-type(4):checked ~ .strip > label:nth-of-type(4) .n{background:var(--midnight);color:var(--accent2);box-shadow:none}
.tabs > input:nth-of-type(1):checked ~ .panel:nth-of-type(1),.tabs > input:nth-of-type(2):checked ~ .panel:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ .panel:nth-of-type(3),.tabs > input:nth-of-type(4):checked ~ .panel:nth-of-type(4){display:block}
.tabs > input:focus-visible ~ .strip > label{outline:none}
.tabs > input:nth-of-type(1):focus-visible ~ .strip > label:nth-of-type(1),.tabs > input:nth-of-type(2):focus-visible ~ .strip > label:nth-of-type(2),
.tabs > input:nth-of-type(3):focus-visible ~ .strip > label:nth-of-type(3),.tabs > input:nth-of-type(4):focus-visible ~ .strip > label:nth-of-type(4){box-shadow:var(--ring);border-radius:var(--radius-xs)}
.vtabs > input:focus-visible ~ .vtabs-nav label{outline:none}

/* click-to-edit fields (vehicle 360) */
.v-edit summary{display:inline-flex;align-items:center;gap:6px;margin:-1px -4px;padding:1px 4px;border-radius:6px;list-style:none;cursor:pointer}
.v-edit summary::-webkit-details-marker{display:none}
.v-edit summary:hover{background:var(--accent-soft)}
.v-edit .v-pen{font-size:.8rem;color:var(--muted);opacity:.4;transition:opacity .15s}
.v-edit summary:hover .v-pen,.v-edit[open] .v-pen{opacity:1;color:var(--accent-ink)}
.v-edit .v-value:empty::after{content:'—';color:var(--muted)}
.v-edit .v-form{display:flex;align-items:center;gap:6px;margin-top:6px}
.v-edit .v-form input,.v-edit .v-form select{min-width:160px}
.kv.kv-inline{display:inline;margin:0}
.kv.kv-inline dd{display:inline;margin:0}


/* ── Lead pages (v1.41 — the lead page; v1.48 — tabs on the lead) ─────────── */
.lead-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s4);align-items:start}
.lead-main{min-width:0}
.lead-aside{position:sticky;top:84px}
.lead-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-bottom:var(--s4);padding:var(--s4) var(--s5);border-radius:var(--radius);
    background:var(--card);box-shadow:var(--shadow);border-inline-start:3px solid var(--accent)}
.lead-head .who{flex:1;min-width:160px}
.lead-head .who strong{display:block;font-size:clamp(1.05rem,.95rem + .4vw,1.25rem);line-height:1.3}
.lead-head .who small{color:var(--muted)}
.lead-head .score{min-width:64px;text-align:center}
.lead-head .score b{display:block;font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.lead-head .score small{font-size:12px;color:var(--muted)}
.lead-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.lead-actions .btn{min-height:44px}
.lead-main .card{margin-bottom:var(--s3)}
.lead-main .card.primary{border-inline-start:3px solid var(--accent);box-shadow:var(--shadow-md)}
.lead-aside .card{margin-bottom:var(--s3);padding:var(--s4)}
.lead-aside h3{font-size:14px;font-weight:600;color:var(--muted)}
.lead-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px var(--s3);margin:0}
.lead-facts dt{white-space:nowrap;font-size:13px;color:var(--muted)}
.lead-facts dd{margin:0;font-size:14px}
.lead-day{position:relative;margin-inline-start:6px;padding-inline-start:var(--s5);padding-bottom:var(--s3);border-inline-start:2px solid var(--line)}
.lead-day::before{content:"";position:absolute;top:4px;inset-inline-start:-6px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--card)}
.lead-day > .date{display:block;margin-bottom:var(--s2);font-size:12.5px;font-weight:600;color:var(--muted)}
.lead-day table.grid td{padding:3px 0;border:0}
.lead-row > td{vertical-align:top;padding-block:10px}
.lead-row .next{max-width:34ch;margin-top:2px;font-size:12.5px;line-height:1.45}
.lead-row.overdue{background:var(--bad-bg);box-shadow:inset -3px 0 0 var(--bad)}
[dir="ltr"] .lead-row.overdue{box-shadow:inset 3px 0 0 var(--bad)}
.lead-row a[href^="tel:"]{color:inherit;border-bottom:1px dashed var(--line-strong)}
.lead-row a[href^="tel:"]:hover{color:var(--accent-ink);border-bottom-color:var(--accent);text-decoration:none}
.lead-row strong{font-weight:600}
.lead-row .tag{padding:0 7px;font-size:11.5px}
.lead-row .pick{width:16px;height:16px;margin-top:4px}

/* ── Buy & sell screens (v1.34 — the buy and sell screens) ────────────────── */
.help-card{padding:0;overflow:hidden}
.help-card > summary{display:flex;align-items:center;gap:12px;padding:14px 20px;list-style:none;font-size:14px;font-weight:700;color:var(--text)}
.help-card > summary::-webkit-details-marker{display:none}
.help-card > summary .hi{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
.help-card > summary .hi svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.help-card > summary::after{content:"";width:16px;height:16px;margin-inline-start:auto;background:var(--chev) center/16px no-repeat;transition:transform .2s}
.help-card[open] > summary::after{transform:rotate(180deg)}
.help-card .help-body{padding:0 20px 18px;padding-inline-start:64px;font-size:13.5px;line-height:1.85;color:var(--muted)}
.help-card .help-body p{margin:0 0 6px}
.help-card .help-body ul{margin:0 0 6px;padding-inline-start:18px}

.qs-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:22px;align-items:start}
.qs-main{position:relative;min-width:0;padding:4px 0;border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow)}
.qs-main > .card{margin:0;border-radius:0;box-shadow:none;background:transparent}
.qs-main > .card + .card{border-top:1px solid var(--line)}
.qs-main > .card.qs-step{position:relative;padding-block:22px 24px;padding-inline:76px 26px}
.qs-step h3{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:34px;margin:0 0 14px;font-size:17px;font-weight:600}
.qs-step h3 small{font-size:12.5px;font-weight:400}
.qs-step .qs-hint{margin:-12px 0 14px;font-size:13px;color:var(--muted)}
.qs-n{position:absolute;top:22px;inset-inline-start:21px;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
    font:700 14px/1 var(--font-ui);color:var(--muted);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line-strong);transition:background-color .2s,box-shadow .2s,color .2s}
.qs-main > .qs-step::before{content:"";position:absolute;top:56px;bottom:-22px;inset-inline-start:37px;width:2px;background:var(--line)}
.qs-main > .qs-step:last-of-type::before,.qs-main > .qs-step:not(:has(~ .qs-step))::before{display:none}
.qs-main > .card:not(.qs-step){padding-inline:26px}
.qs-step:focus-within .qs-n{color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 5px var(--accent-soft)}
.qs-step.done .qs-n{color:transparent;background:var(--midnight);box-shadow:0 0 0 1px rgba(230,192,103,.45)}
.qs-step.done .qs-n::after{content:"";position:absolute;inset:0;background:var(--accent2);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}
.qs-main > .qs-step.done::before{background:linear-gradient(180deg,var(--accent),var(--accent-ring))}
.qs-step > details > summary{display:flex;align-items:center;list-style:none}
.qs-step > details > summary::-webkit-details-marker{display:none}
.qs-step > details > summary::after{content:"";width:16px;height:16px;margin-inline-start:auto;background:var(--chev) center/16px no-repeat;transition:transform .2s}
.qs-step > details[open] > summary::after{transform:rotate(180deg)}
.qs-step > details > summary h3{margin:0!important}

.qs-filter{width:100%;margin-bottom:8px;padding-inline-start:40px!important;background-repeat:no-repeat;background-size:17px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.3-4.3'/%3E%3C/svg%3E")}
[dir="rtl"] .qs-filter{background-position:right 13px center}
[dir="ltr"] .qs-filter{background-position:left 13px center}
.qs-picker{width:100%;border-radius:12px;font-family:inherit}
.qs-picker:empty{display:none}
.qs-picker option{padding:7px 9px;border-radius:7px}
.qs-empty{padding:16px;border-radius:12px;text-align:center;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);background:var(--soft)}
.qs-context{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));margin-top:10px;border-radius:12px;overflow:hidden;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.qs-context > div{padding:10px 14px;min-width:0}
.qs-context > div + div{border-inline-start:1px solid var(--line)}
.qs-context small{display:block;font-size:12px;color:var(--muted)}
.qs-context strong{font-size:14px;font-weight:600}
.qs-enhanced #qs-vehicle-card{display:none!important}
.qs-extras input,.qs-extras select{width:100%}
.qs-unit,.qs-qty{text-align:end}
.qs-step .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.qs-step .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* the rich pickers: a car is a row of facts, not a line of text in a select box */
.pick-list{max-height:340px;overflow-y:auto;padding:6px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);scrollbar-width:thin}
.pick-list[hidden]{display:none}
.pick-empty{padding:18px;text-align:center;font-size:13.5px;color:var(--muted)}
.pick-row{position:relative;display:grid;align-items:center;gap:14px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:transparent;color:var(--text);
    font:inherit;text-align:start;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.pick-row + .pick-row{margin-top:2px}
.pick-row:hover{background:var(--soft)}
.pick-row[aria-selected="true"]{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent-ring)}
.pick-row[hidden]{display:none}
.pick-car{grid-template-columns:18px 24px minmax(0,1fr) auto 140px}
.pick-cust{grid-template-columns:18px 36px minmax(0,1fr) auto}
.pick-radio{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line-strong);transition:all .15s}
.pick-row[aria-selected="true"] .pick-radio{background:var(--accent);box-shadow:none}
.pick-row[aria-selected="true"] .pick-radio::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.pick-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.pick-title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:14.5px;font-weight:600;line-height:1.45}
.pick-year{padding:0 7px;border-radius:6px;font-size:11.5px;font-weight:600;line-height:20px;color:var(--muted);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.pick-facts{display:flex;align-items:center;flex-wrap:wrap;gap:2px 14px;font-size:12.5px;color:var(--muted)}
.pick-end{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:end}
.pick-price{direction:ltr;white-space:nowrap;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}
.avatar-sm{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--font-ui);color:#fff;background:var(--av,#35527A)}
.avatar-sm.co{color:var(--muted);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.avatar-sm svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.paint{display:inline-block;width:24px;height:24px;flex:none;border-radius:50%;vertical-align:middle;
    background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.7),rgba(255,255,255,0) 45%),var(--paint,#9AA3AE);
    box-shadow:inset 0 -2px 3px rgba(0,0,0,.28),0 0 0 1px rgba(15,27,45,.18)}
.age{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.age-bar{display:inline-flex;gap:2px}
.age-bar i{width:8px;height:4px;border-radius:2px;background:var(--line-strong)}
.age[data-b="1"] .age-bar i:nth-child(-n+1){background:var(--ok)}
.age[data-b="2"] .age-bar i:nth-child(-n+2){background:#5E8C2F}
.age[data-b="3"] .age-bar i:nth-child(-n+3){background:var(--warn)}
.age[data-b="4"] .age-bar i{background:var(--bad)}
html[data-theme="dark"] .age[data-b="2"] .age-bar i:nth-child(-n+2){background:#9CC46A}

/* the stamped VIN plate */
.plate{position:relative;display:inline-flex;align-items:center;gap:8px;padding:4px 17px;border-radius:4px;direction:ltr;unicode-bidi:isolate;white-space:nowrap;
    font:500 12.5px/1.4 var(--font-mono);letter-spacing:.11em;color:var(--plate-ink);text-shadow:0 1px 0 rgba(255,255,255,.75);
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,rgba(255,255,255,0) 1px 3px),linear-gradient(180deg,var(--plate-a),var(--plate-b));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(15,27,45,.14),0 0 0 1px rgba(15,27,45,.2)}
.plate::before,.plate::after{content:"";position:absolute;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 30%,#8E98A4 75%);box-shadow:0 0 0 .5px rgba(15,27,45,.35)}
.plate::before{left:6px}
.plate::after{right:6px}
.plate-tag{font-family:var(--font-ui);font-size:9.5px;font-weight:700;letter-spacing:.08em;color:rgba(35,45,58,.55)}
.plate.lg{margin-top:12px;padding:7px 24px;border-radius:5px;font-size:15px;letter-spacing:.15em;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(15,27,45,.16),0 0 0 1px rgba(0,0,0,.35),0 6px 14px -6px rgba(0,0,0,.6)}
.plate.lg::before{left:9px}
.plate.lg::after{right:9px}

/* vehicles on a purchase: one small card of labelled fields per car */
.qp-list{display:flex;flex-direction:column;gap:10px}
.qp-car{position:relative;padding:12px;padding-inline-end:36px;border-radius:12px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .16s}
.qp-car:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
.qp-car:focus-within{box-shadow:inset 0 0 0 1px var(--accent-ring),var(--shadow)}
.qp-car-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.qp-car-grid label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.qp-car-grid input,.qp-car-grid select{width:100%;margin-top:0!important}
.qp-remove{position:absolute;top:8px;inset-inline-end:8px;border:0;background:none;color:var(--bad);font-size:1.2rem;line-height:1;cursor:pointer}

/* the deal sheet: what is about to be posted, assembled as the form fills */
.qs-side{position:sticky;top:84px}
.qs-summary{padding:0;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.deal-head{position:relative;isolation:isolate;padding:16px 22px 18px;color:#E8EDF4;
    background:radial-gradient(360px 200px at 12% -10%,rgba(212,166,64,.22),rgba(212,166,64,0) 70%),linear-gradient(165deg,var(--midnight-raise) 0%,var(--midnight) 55%,var(--midnight-deep) 100%)}
.deal-head::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--mesh-light);-webkit-mask-image:linear-gradient(200deg,#000,transparent 70%);mask-image:linear-gradient(200deg,#000,transparent 70%)}
.deal-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:#8E9BAF}
.deal-bar strong{font-family:var(--font-display);font-size:15px;font-weight:600;color:#fff}
.deal-status{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:20px;color:#C9D2DE;background:rgba(255,255,255,.08)}
.deal-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.deal-status.ready{color:var(--accent2);background:rgba(212,166,64,.16)}
.deal-car{margin-top:12px}
.deal-model{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;color:#fff;font:800 21px/1.3 var(--font-display)}
.deal-year{font-size:13.5px;font-weight:600;color:#8E9BAF}
.deal-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:6px;font-size:13px;color:#C3CCD9}
.deal-facts > span{display:inline-flex;align-items:center;gap:6px}
.deal-facts .paint{width:15px;height:15px;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.deal-facts .tag{box-shadow:none}
.deal-empty{display:flex;align-items:center;gap:14px;padding:8px 0 2px;font-size:13px;color:#8E9BAF}
.deal-empty svg{width:40px;height:40px;flex:none;fill:none;stroke:rgba(232,237,244,.35);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.deal-empty strong{display:block;font-size:14.5px;color:#E8EDF4}
.deal-body{padding:14px 22px 20px}
.deal-party{display:flex;align-items:center;gap:12px;margin-bottom:4px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.deal-party .who{min-width:0;display:flex;flex-direction:column;line-height:1.45}
.deal-party .who strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-party .who small{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.deal-party.empty{font-size:13.5px;color:var(--muted)}
.qs-summary table.grid td{padding:8px 0;border-bottom:1px solid var(--line)}
.qs-summary table.grid tbody tr:hover{background:transparent}
.qs-summary table.grid td:first-child{font-size:13.5px;color:var(--muted)}
.qs-summary table.grid td.num{font-variant-numeric:tabular-nums;font-size:14px;font-weight:600}
.qs-summary table.grid tr.total td{padding-block:12px 10px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.qs-summary table.grid tr.total td:first-child{font-size:14px;font-weight:600;color:var(--text)}
.qs-summary table.grid tr.total td.num{font-size:23px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.qs-summary table.grid tr:last-child td{border-bottom:0}
.qs-summary table.grid tr.total:last-child td.num{font-size:17px}
.qs-side .btn.primary{width:100%;min-height:50px;margin-top:14px;border-radius:13px;font-size:16px}
#qt-cur{direction:ltr;font-size:12.5px;font-variant-numeric:tabular-nums}
[dir="rtl"] #qt-cur{text-align:left}
.deal-note{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.deal-margin{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line-strong)}

/* the confirmation shown before a purchase or a sale is posted */
.confirm-back{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(7,14,25,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.confirm-back[hidden]{display:none}
.confirm-box{width:100%;max-width:460px;padding:24px 26px;border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-lg)}
.confirm-box h3{margin-bottom:12px;font-size:17px}
.confirm-box .grid td{padding:8px 4px}
.confirm-box .grid tr:last-child td{font-weight:600;border-top:1px solid var(--line)}


/* ── Sign-in ──────────────────────────────────────────────────────────────── */
/* Two halves: the brand on a navy panel with a road running into it, and the form on the canvas. The page
   follows the theme last used on this device, like every other page; below 900px the brand folds into a
   band above the form. */
.login-body{min-height:100vh;margin:0;background:var(--bg);color:var(--text)}
.login-shell{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(440px,1fr);min-height:100vh}
.login-brand{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:28px;padding:44px 56px;color:#E8EDF5;
    background:radial-gradient(640px 420px at 78% -12%,rgba(212,166,64,.24),rgba(212,166,64,0) 70%),
               radial-gradient(620px 520px at 8% 112%,rgba(47,94,158,.38),rgba(47,94,158,0) 70%),
               linear-gradient(160deg,#172840 0%,#0F1B2D 46%,#08111E 100%)}
.login-brand::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:1px;background:linear-gradient(180deg,rgba(212,166,64,0),rgba(212,166,64,.55) 40%,rgba(212,166,64,0))}
.login-art{position:absolute;inset:auto 0 0 0;z-index:-1;width:100%;height:56%;pointer-events:none}
.login-logo{display:flex;align-items:center;gap:12px;color:#fff}
.login-logo .mark{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;background:#fff;color:#0F1B2D;font:800 15px/1 var(--font-ui);
    box-shadow:0 0 0 1px rgba(212,166,64,.6),0 12px 26px -12px rgba(0,0,0,.85)}
.login-logo b{font:800 15px/1 var(--font-ui);letter-spacing:.16em;direction:ltr}
.login-copy{max-width:30rem;margin-top:clamp(48px,13vh,150px)}
.login-copy::before{content:"";display:block;width:56px;height:3px;margin-bottom:22px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.login-copy h1{margin:0;direction:ltr;font-size:clamp(34px,3.6vw,50px);font-weight:800;line-height:1.05;letter-spacing:.07em;color:#fff}
[dir="rtl"] .login-copy h1{text-align:right}
.login-copy p{margin:14px 0 0;font-size:clamp(16px,1.35vw,19px);line-height:1.7;color:#C9D3E1}
.login-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;font-size:12.5px;color:#8D9AAE}
.login-foot span{padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);direction:ltr}
.login-panel{display:grid;place-items:center;padding:40px 24px}
.login-card{width:min(420px,100%);padding:34px 32px 28px;border-radius:var(--radius-lg);background:var(--card);color:var(--text);box-shadow:var(--shadow-lg)}
.login-card h2{margin:0;font-size:25px;font-weight:800}
.login-card .login-sub{margin:4px 0 20px;font-size:14px;color:var(--muted)}
.login-card .flash{margin:0 0 6px}
.login-card label{margin-top:14px}
.login-card label.inline{margin-top:16px}
.login-card input:not([type="checkbox"]){height:46px;font-size:15px}
.login-card .btn.primary{width:100%;min-height:48px;margin-top:22px;font-size:15.5px}
.login-note{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;text-align:center;color:var(--muted)}
/* one card alone on the navy page: the public document check (core::verify) */
.login-solo{display:grid;place-items:center;padding:24px;
    background:radial-gradient(900px 520px at 78% -8%,rgba(212,166,64,.2),rgba(212,166,64,0) 70%),linear-gradient(160deg,#172840 0%,#0F1B2D 46%,#08111E 100%)}
.login-solo .login-card{box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}
.login-solo .login-card h2,.login-solo .login-sub{text-align:center}
.login-card .login-mark{width:56px;height:56px;margin:0 auto 12px;border-radius:16px;display:grid;place-items:center;background:var(--midnight);color:var(--accent2);
    font:800 18px/1 var(--font-ui);box-shadow:0 0 0 1px rgba(212,166,64,.45),0 12px 24px -12px rgba(15,27,45,.8)}
@media (max-width:900px){
    .login-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
    .login-brand{gap:16px;padding:22px 20px 44px}
    .login-logo{display:none}
    .login-copy{margin-top:6px}
    .login-copy::before{margin-bottom:12px}
    .login-copy h1{font-size:30px}
    .login-copy p{margin-top:6px;font-size:15px}
    .login-art{height:100%;opacity:.6}
    .login-foot{display:none}
    .login-panel{place-items:start center;padding:0 14px 36px;margin-top:-26px}
    .login-card{padding:26px 20px 22px}
}


/* ── Motion ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
    a.kpi:hover,.car-card:hover{transform:none}
}

/* ── Narrower screens ─────────────────────────────────────────────────────── */
@media (max-width:1320px){
    .app{grid-template-columns:256px minmax(0,1fr)}
    .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
    .page{padding-inline:28px}
    .topbar{padding:0 28px}
    .qs-layout{grid-template-columns:minmax(0,1fr) 330px}
    .pick-car{grid-template-columns:18px 24px minmax(0,1fr) 120px}
    .pick-car .plate{grid-column:3/-1;grid-row:2;justify-self:start;margin-top:-4px}
    .user-text{display:none}
}
@media (max-width:1120px){
    .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
    .kpis[style*="repeat(5"],.kpis[style*="repeat(6"],.kpis[style*="repeat(7"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
    .dash-grid,.lead-grid{grid-template-columns:minmax(0,1fr)}
    .lead-aside{position:static}
    .qs-layout{grid-template-columns:minmax(0,1fr)}
    .qs-side{position:static}
    .theme-seg button span{display:none}
}
@media (max-width:900px){
    .app{grid-template-columns:minmax(0,1fr)}
    .sidebar{position:fixed;inset-block:0;inset-inline-start:0;width:288px;transform:translateX(105%);transition:transform .25s ease}
    [dir="ltr"] .sidebar{transform:translateX(-105%)}
    body.nav-open .sidebar{transform:none}
    body.nav-open .nav-backdrop{display:block}
    .menu-toggle{display:grid}
    .topbar{padding:0 14px;gap:8px}
    .topbar .context,.kbd{display:none}
    .menu-context{display:flex}
    .kpis[style]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .kpi strong,.kpis-hero .kpi strong{font-size:22px}
    .kpi strong.mono,.kpis-hero .kpi strong.mono{font-size:21px}
    .kpis-hero{grid-template-columns:repeat(2,minmax(0,1fr))}
    .topbar .search input{padding-inline-end:14px}
    .page{padding:18px 16px 44px}
    .page-head h1{font-size:24px}
    .toasts{top:70px;inset-inline:16px;width:auto}
    .grid-2,.grid-3,.featured,.qs-step .grid-3,.qs-step .grid-2{grid-template-columns:minmax(0,1fr)}
    .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
    .card{overflow-x:auto}
    table.grid{min-width:560px}
    .qs-summary table.grid,.confirm-box table.grid,.lead-day table.grid{min-width:0}
    .qs-main > .card.qs-step{padding-inline:56px 16px}
    .qs-n{inset-inline-start:11px}
    .qs-main > .qs-step::before{inset-inline-start:27px}
    .qp-car-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lead-row > td:nth-child(n+5){display:none}
    .lead-row .next{max-width:none}
}
@media (max-width:640px){
    .theme-seg{display:none}
    .menu-theme{display:flex}
    .tabs > .strip{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
    .tabs > .strip > label{padding:10px 12px;font-size:13px}
    .pick-car{grid-template-columns:18px 22px minmax(0,1fr)}
    .pick-car .plate{grid-column:3;grid-row:2}
    .pick-car .pick-end{grid-column:3;grid-row:3;flex-direction:row;align-items:baseline;gap:10px}
    .pick-cust{grid-template-columns:18px 36px minmax(0,1fr)}
    .pick-cust .pick-end{grid-column:3;grid-row:2;align-items:flex-start}
    dl.kv{grid-template-columns:minmax(0,1fr)}
    dl.kv dt{margin-top:6px}
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print{
    /* paper is always the light theme, whichever one was on the screen */
    html,html[data-theme="dark"]{color-scheme:light;--bg:#fff;--card:#fff;--soft:#f5f6f8;--soft-2:#edf0f5;--line:#d9dde3;--line-strong:#c4ccd6;--field-line:#d9dde3;
        --th-bg:#f5f6f8;--row-hover:transparent;--text:#111;--muted:#555;--placeholder:#8792A2;--link:#1d4f91;--accent-ink:#86630E;--accent-soft:rgba(212,166,64,.13);
        --ok:#0B7549;--ok-bg:#E3F4EB;--warn:#935B04;--warn-bg:#FCF1D9;--bad:#BA3029;--bad-bg:#FCEAE8;--info:#2356AA;--info-bg:#E6EEFB;--purple:#6842AA;--purple-bg:#EFE9FA}
    body{background:#fff}
    /* .noprint is a hook, not dead weight: a general "hide me when printing" class belongs in the print
   rule whether or not a page uses it today, so the next person finds it rather than inventing a second
   name for the same idea. */
.sidebar,.topbar,.crumbs,.toolbar,.noprint,.nav-backdrop,.help-card,.qs-side .btn,.toasts,.quick-links,.kpi-ico{display:none!important}
    .table-scroll{max-height:none!important;overflow:visible!important}
    .table-scroll > table.grid > thead,.card.pin-head > table.grid > thead{position:static}
    .kpi:has(> .kpi-ico) > small{min-height:0;padding-inline-end:0}
    .app{display:block}
    .main-col::before,.login-art{display:none}
    .page{max-width:none;padding:0}
    .card,.kpi,.qs-main,.qs-summary{box-shadow:none;border:1px solid #d9dde3;break-inside:avoid}
    .kpi strong,.kpi strong.mono{font-size:18px}
    .deal-head{background:#fff;color:#111;border-bottom:1px solid #d9dde3}
    .lead-grid{display:block}
    .lead-aside{position:static}
    .lead-actions,.lead-main form,.lead-main details{display:none}
    .tabs > .strip{display:none}
    .tabs > .panel{display:block !important}
}
.pick-list.is-invalid{box-shadow:inset 0 0 0 1.5px var(--bad),0 0 0 3px var(--bad-bg)}

/* quotation actions that need a word from the person before they run: cancel and delete open a small panel */
.qo-menu{position:relative}
.qo-menu > summary{list-style:none}
.qo-menu > summary::-webkit-details-marker{display:none}
.qo-pop{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:40;width:min(340px,90vw);padding:14px;border-radius:14px;background:var(--card);box-shadow:var(--shadow-lg)}
.qo-pop label{margin-bottom:8px}
.qo-pop p{margin:0 0 10px;font-size:12.5px;line-height:1.6}
.qo-pop .btn{width:100%}

/* the catalogue: model rows group their variants; the row actions stay quiet until the row is hovered */
table.catalogue tr.cat-model td{padding-top:14px;background:var(--soft);font-size:14px}
table.catalogue tr.cat-model:first-child td{padding-top:10px}
.cat-brand{display:inline-block;margin-inline-end:4px;padding:0 7px;border-radius:6px;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft)}
table.catalogue tr.cat-off td{opacity:.55}
.cat-actions{white-space:nowrap;display:inline-flex;gap:10px;align-items:center;margin-inline-start:10px}
td.cat-actions{display:table-cell;margin:0;white-space:normal;min-width:170px;line-height:1.9}
td.cat-actions .btn-link{display:inline-block;margin-inline-end:10px}
.cat-actions .btn-link{font-weight:500;font-size:13px}
.cat-actions .btn-link.danger{color:var(--bad)}
table.catalogue tbody tr:not(.cat-model) .cat-actions{opacity:.35;transition:opacity .15s}
table.catalogue tbody tr:hover .cat-actions,table.catalogue tbody tr:focus-within .cat-actions{opacity:1}
dialog.cat-dialog{width:min(560px,94vw);padding:22px 24px;border:0;border-radius:18px;background:var(--card);color:var(--text);box-shadow:var(--shadow-lg)}
dialog.cat-dialog::backdrop{background:rgba(7,14,25,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.cat-dialog h3{margin:0 0 14px;font-size:17px}
dialog.cat-dialog label{margin-bottom:8px}

/* a table that becomes a list of cards on a phone: each cell names its column, so nothing hides behind a sideways scroll */
@media (max-width: 640px){
  table.stack-sm{min-width:0}
  table.stack-sm thead{display:none}
  table.stack-sm tbody tr{display:block;margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
  table.stack-sm tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border:0;text-align:start;flex-wrap:wrap;overflow-wrap:anywhere;min-width:0}
  table.stack-sm tbody td > *{max-width:100%;min-width:0}
  /* figures stay left-to-right ("7,000 IQD"); in a right-to-left page the row is reversed so the label keeps its side */
  table.stack-sm tbody td.num{text-align:start;direction:ltr;flex-direction:row-reverse}
  [dir="ltr"] table.stack-sm tbody td.num{flex-direction:row}
  /* the first cell is the card's title: its name on top, its detail under it, no label */
  table.stack-sm tbody td:first-child{display:block;padding:0 0 8px;margin-bottom:4px;border-bottom:1px solid var(--line);font-weight:600}
  table.stack-sm tbody td:first-child::before{content:none}
  table.stack-sm tbody td:first-child > *{text-align:start}
  /* a row that starts with a checkbox: the checkbox floats at the corner and the next cell is the title */
  table.stack-sm tbody td:first-child:has(> input[type=checkbox]){float:inline-start;padding:0;margin:0;border:0;width:auto}
  table.stack-sm tbody td:first-child:has(> input[type=checkbox]) + td{display:block;padding:0 0 8px;margin-bottom:4px;border-bottom:1px solid var(--line);font-weight:600}
  table.stack-sm tbody td:first-child:has(> input[type=checkbox]) + td::before{content:none}
  table.stack-sm tbody td::before{content:attr(data-label);flex:0 0 auto;color:var(--muted);font-size:12px;font-weight:500}
  table.stack-sm tbody td[data-label=""]::before{content:none}
  table.stack-sm tbody td > *:not(br){text-align:end}
  table.stack-sm tbody td.cat-actions{justify-content:flex-start;flex-wrap:wrap;gap:16px;padding-top:9px;margin-top:4px;border-top:1px dashed var(--line);opacity:1}
  table.stack-sm tbody td.cat-actions .btn-link{font-size:14px;padding:6px 0}
  table.stack-sm tbody tr td[colspan]{display:block}
  /* the totals row of a stacked table is a line of its own, not a row of columns */
  table.stack-sm tfoot{display:block}
  table.stack-sm tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:10px 12px;margin-top:6px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-weight:600}
  table.stack-sm tfoot td{display:block;border:0;padding:0}
  table.stack-sm tbody tr td[colspan]::before{content:none}
  .table-scroll:has(> table.stack-sm){overflow:visible;max-height:none}
}

/* what a phone sees and what a desk sees */
.only-sm{display:none}
@media (max-width: 640px){
  .only-sm{display:block}
  .only-lg{display:none !important}
  .kpis[style*="repeat(5"]{grid-template-columns:repeat(2,1fr) !important}
  /* one card per lead, built for a thumb */
  .lead-cards{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
  .lead-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
  .lead-card.late{border-inline-start:4px solid var(--bad)}
  .lead-card header{display:flex;align-items:center;gap:10px}
  .lead-card header input[type=checkbox]{width:20px;height:20px;margin:0;flex:0 0 auto}
  .lead-card .lead-name{flex:1 1 auto;font-weight:700;font-size:1.05rem;color:var(--text);text-decoration:none}
  .lead-card .lead-meta{color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;gap:4px 6px}
  .lead-card .lead-next{font-size:.92rem;line-height:1.6}
  .lead-card footer{display:flex;gap:8px;flex-wrap:wrap;padding-top:8px;border-top:1px dashed var(--line)}
  .lead-card footer .btn{flex:1 1 auto;justify-content:center;min-height:42px}
  /* the sticky bar sits above the phone's home indicator and never covers the last card */
  .sticky-actions{position:fixed;inset-inline:0;bottom:0;display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);z-index:30}
  .sticky-actions .btn{flex:1 1 0;justify-content:center;min-height:46px;font-weight:600}
  body:has(.sticky-actions) main, body:has(.sticky-actions) .content{padding-bottom:84px}
}

/* a telephone number is a left-to-right run; inside a right-to-left line its groups would otherwise swap */
a[href^="tel:"], .phone, td[data-label] a[href^="tel:"]{direction:ltr;unicode-bidi:isolate}

/* A finger is not a mouse pointer. On a phone every action a person can tap is at least 44px tall — the
   inline row actions included, which were 20px links squeezed between table cells. */
@media (max-width: 640px){
  .btn, button.btn, a.btn{min-height:44px;padding-block:11px}
  .btn-link{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:10px}
  td.cat-actions, .cat-actions{display:flex;flex-wrap:wrap;gap:6px}
  td.cat-actions .btn-link, .cat-actions .btn-link{border:1px solid var(--line);background:color-mix(in srgb,var(--card) 92%,transparent)}
  .toolbar{gap:8px}
  .toolbar .btn{flex:1 1 auto;justify-content:center}
  /* a link list on a reports page is a stack of rows, not a wrapped paragraph of small links */
  .card .btn-link + .btn-link{margin-inline-start:0}
  input[type=checkbox], input[type=radio]{min-width:22px;min-height:22px}
  select, input:not([type=checkbox]):not([type=radio]), textarea{min-height:44px;font-size:16px}
}

/* ── Row actions ────────────────────────────────────────────────────────────
   Edit and delete on the row itself. They existed on the controller from the start and had no way in:
   the only route to a correction was opening the lead, and the only route to a deletion was the
   database. A salesperson who mistypes a phone number needs one click, not a support request.

   Quiet by default and coloured only on hover, because a delete button that shouts sits next to every
   row of a list somebody scans sixty times a morning — and a red row-end is how people learn to stop
   reading the row. */
.btn.sm{min-height:32px;padding:5px 10px;font-size:.82rem;border-radius:8px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--field);border-color:var(--field-line);color:var(--ink)}
.btn.ghost.danger{color:var(--muted)}
.btn.ghost.danger:hover{background:color-mix(in srgb,var(--bad) 10%,transparent);
    background:rgba(203,68,74,.10);border-color:var(--bad);color:var(--bad)}

/* the column stays as narrow as its content and the buttons never wrap onto two lines */
.row-actions{white-space:nowrap;text-align:end}
.row-actions .btn{margin-inline-start:2px}

/* a row's actions appear on hover on a pointer device, and are always visible on touch, where there
   is no hover to reveal them */
@media (hover:hover){
    .lead-row .row-actions .btn{opacity:.55;transition:opacity .12s ease}
    .lead-row:hover .row-actions .btn,
    .lead-row .row-actions .btn:focus-visible{opacity:1}
}

/* ── Form actions ───────────────────────────────────────────────────────────
   The submit sits at the end of the form rather than inside it. Anything below a submit button reads
   as optional whether it is or not. */
.form-actions{display:flex;justify-content:flex-end;gap:8px;
    margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}


/* ── Capture form ───────────────────────────────────────────────────────────
   The lead form was a `.toolbar`, which is flex with wrap: every field sized itself to its own
   content, so "name" and "phone" came out different widths for no reason a person could see, and the
   wrap point moved as the labels changed. A grid gives every field the same column and keeps the rows
   aligned down the page.

   Three across on a desktop, two on a tablet, one on a phone — a field narrower than about 200px
   cannot hold an Iraqi phone number without scrolling inside itself. */
.capture-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
    align-items:start;margin-bottom:0}
.capture-grid > input,.capture-grid > select,.capture-grid > label{min-width:0;width:100%}

/* a field that spans the row: notes, address */
.capture-grid .span-all{grid-column:1/-1}

/* ── Toolbar separation ─────────────────────────────────────────────────────
   A print button and a delete button do not belong shoulder to shoulder at the same weight. The gap
   pushes the destructive end away from the hand that is reaching for "sell"; the ghost treatment keeps
   it legible without shouting, because a red button on every vehicle page is a red button people stop
   reading. */
.toolbar-gap{flex:1 1 24px;min-width:16px}

/* ═══════════════════════════════════════════════════════════════════════════
   CRM v1.73 — cockpit, board, 360
   Every colour here is a variable that both themes already define, so nothing
   below needs a second rule for the dark chassis.
   ═══════════════════════════════════════════════════════════════════════════ */

/* a segmented control: two or three views of the same page, side by side */
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:999px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.seg > a,.seg > button{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:0;border-radius:999px;
    background:none;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;text-decoration:none}
.seg > a:hover,.seg > button:hover{color:var(--text)}
.seg > a.on,.seg > button.on{background:var(--card);color:var(--text);box-shadow:var(--shadow)}



/* response time, on a line of its own */
.pulse-row{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:18px}
.pulse-row small{display:block;font-size:12px;color:var(--muted)}
.pulse-row strong{display:block;font-size:1.5rem;line-height:1.3;font-variant-numeric:tabular-nums}
.pulse-row span{font-size:12px}
.pulse-bar{height:10px;border-radius:999px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.pulse-bar i{display:block;height:100%;border-radius:999px;transition:width .3s ease}

/* the page: the working columns on one side, what needs attention on the other */
.work-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:var(--s4);align-items:start}
.work-split > div{min-width:0}
.sub-head{margin:14px 0 6px;font-size:13px;font-weight:700;color:var(--muted)}
.sub-head:first-of-type{margin-top:4px}

/* a labelled bar: stage velocity, channel share — anything measured against the biggest of its kind */
.stat-rows{display:grid;gap:6px}
.stat-row{display:grid;grid-template-columns:minmax(90px,150px) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px}
.stat-row i{display:block;height:9px;border-radius:999px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.stat-row i b{display:block;height:100%;border-radius:999px;background:var(--accent)}

/* a short list of names with a note at the end of each — used all over the cockpit */
.mini-list{margin:0;padding:0;list-style:none}
.mini-list li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px}
.mini-list li:last-child{border-bottom:0}
.mini-list li span{flex-shrink:0;font-size:12px}

/* ── The timeline ───────────────────────────────────────────────────────────
   One column down the page with a rail beside it. A table of the same rows reads as a ledger; a
   customer's history is a story, and it should look like one. */
.tl{position:relative;margin:0;padding:0;list-style:none}
.tl::before{content:"";position:absolute;inset-block:6px;inset-inline-start:78px;width:1px;background:var(--line)}
.tl > li{position:relative;display:grid;grid-template-columns:70px minmax(0,1fr);gap:18px;padding:8px 0}
.tl > li::before{content:"";position:absolute;inset-inline-start:74px;top:15px;width:9px;height:9px;border-radius:50%;
    background:var(--card);box-shadow:0 0 0 2px var(--line-strong)}
.tl > li.is-late::before,.tl > li.ev-bad::before{box-shadow:0 0 0 2px var(--bad)}
.tl > li.ev-good::before{box-shadow:0 0 0 2px var(--ok)}
.tl .tl-time{padding-top:2px;font-size:12px;color:var(--muted);text-align:end}
.tl p{margin:3px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.tl strong{font-size:14px}
.tl .tl-empty{display:block;padding:10px 0;color:var(--muted);font-size:13px}
.tl .tl-empty::before{display:none}
.tl-360 > li{padding:10px 0;border-bottom:1px dashed var(--line)}
.tl-360 > li:last-child{border-bottom:0}

/* ── The pipeline board ─────────────────────────────────────────────────────
   Columns scroll sideways as one surface; each column scrolls on its own inside. A board that grows
   the page downwards stops being a board at about thirty cards. */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}
.board-col{display:flex;flex-direction:column;flex:0 0 268px;min-width:0;scroll-snap-align:start;
    border-radius:var(--radius);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.board-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.board-head strong{font-size:13.5px}
.board-head .n{justify-self:end;align-self:center;padding:1px 8px;border-radius:999px;background:var(--card);
    font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.board-head .n.crowded{background:var(--warn-bg);color:var(--warn)}
.board-head small{grid-column:1/-1;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.board-head.is-won{border-bottom-color:var(--ok)}
.board-drop{flex:1;min-height:80px;max-height:66vh;overflow-y:auto;padding:10px;display:grid;gap:10px;align-content:start}
.board-drop.over{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent-ring)}
.board-empty{margin:0;padding:12px 0;text-align:center;font-size:12px;color:var(--placeholder)}

.deal{padding:10px;border-radius:var(--radius-sm);background:var(--card);box-shadow:var(--shadow);cursor:grab}
.deal:active{cursor:grabbing}
.deal.dragging{opacity:.45}
.deal.saving{box-shadow:var(--shadow),inset 0 0 0 1.5px var(--accent-ring)}
.deal.saved{box-shadow:var(--shadow),inset 0 0 0 1.5px var(--ok)}
.deal.is-late{box-shadow:var(--shadow),inset 3px 0 0 var(--bad)}
.deal.is-hot{box-shadow:var(--shadow),inset 3px 0 0 var(--accent)}
.deal-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.deal-name{font-size:13.5px;font-weight:600;text-decoration:none}
.deal-meta{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:4px;font-size:11.5px;color:var(--muted)}
.deal-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.deal-next{margin-top:6px;font-size:12px;line-height:1.5}
.deal-foot{display:flex;justify-content:space-between;gap:8px;margin-top:8px;padding-top:6px;
    border-top:1px dashed var(--line);font-size:11px;color:var(--muted)}
.deal-do{display:flex;gap:6px;margin-top:8px}
.deal-do .btn{flex:1;justify-content:center}
.deal-move{display:flex;gap:4px;margin-top:6px}
.deal-move select{flex:1;min-width:0;height:30px;padding:0 8px;font-size:12px}

/* ── Labels on a lead ───────────────────────────────────────────────────── */
.lead-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.lead-tags .tag-x{margin-inline-start:4px;padding:0;border:0;background:none;color:inherit;font:inherit;
    line-height:1;opacity:.6;cursor:pointer}
.lead-tags .tag-x:hover{opacity:1}
.tag-add{display:flex;gap:4px;align-items:center}
.tag-add select,.tag-add input{height:30px;padding:0 8px;font-size:12px;width:130px}
.row-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}

/* ── Ready-made messages, on the lead's aside ───────────────────────────── */
.msg-card{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.msg-card h3{margin:0 0 8px;font-size:13px}
.msg{padding:6px 0;border-bottom:1px dashed var(--line)}
.msg:last-of-type{border-bottom:0}
.msg > summary{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;cursor:pointer}
.msg-body{margin:6px 0 8px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--soft);
    font-size:12.5px;line-height:1.7;white-space:pre-line;color:var(--text)}

/* ── The workspace: templates and labels ───────────────────────────────── */
.tpl{margin-bottom:8px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.tpl.off{opacity:.62}
.tpl > summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.tpl-form{margin-top:10px}
.tpl-form textarea{width:100%;font-family:var(--font-ui);line-height:1.7}
.tpl-del{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.ph-list{margin:6px 0 0;padding-inline-start:18px;font-size:12.5px;line-height:1.9}

/* ── Customer 360 ──────────────────────────────────────────────────────── */
.ribbon{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-bottom:var(--s4);
    border-radius:var(--radius);background:var(--line);overflow:hidden;box-shadow:var(--shadow)}
.ribbon > div{padding:12px 14px;background:var(--card)}
.ribbon small{display:block;font-size:11.5px;color:var(--muted)}
.ribbon strong{display:block;margin:2px 0;font-size:1.25rem;font-variant-numeric:tabular-nums}
.ribbon strong i{font-size:.72rem;font-style:normal;color:var(--muted)}
.ribbon > div > span{font-size:11.5px;color:var(--muted)}
.c360-next{border-inline-start:3px solid var(--accent)}
.next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.next-item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--soft)}
.next-item p{margin:0;font-size:13px;line-height:1.6}
.next-item .dot{flex:0 0 8px;height:8px;margin-top:6px;border-radius:50%;background:var(--muted)}
.next-item.tone-money .dot{background:var(--warn)}
.next-item.tone-complaint .dot,.next-item.tone-document .dot{background:var(--bad)}
.next-item.tone-service .dot{background:var(--info)}
.next-item.tone-lapsed .dot{background:var(--purple)}

@media (max-width:1120px){
    .work-split{grid-template-columns:minmax(0,1fr)}
    .pulse-row{grid-template-columns:minmax(0,1fr);gap:10px}
}
@media (max-width:640px){
    .board-col{flex-basis:84vw}
    .board-drop{max-height:none}
    .tl::before{inset-inline-start:54px}
    .tl > li{grid-template-columns:48px minmax(0,1fr);gap:12px}
    .tl > li::before{inset-inline-start:50px}
    .ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}
    .tag-add select,.tag-add input{width:110px}
}
@media (prefers-reduced-motion:reduce){
    .pulse-bar i{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Purchase v1.74 — ageing, comparison
   ═══════════════════════════════════════════════════════════════════════════ */

/* the ageing of a balance as one bar: how much of what we owe is late, and how late */
.aging-bar{display:flex;height:12px;margin:2px 0 14px;border-radius:999px;overflow:hidden;background:var(--soft);
    box-shadow:inset 0 0 0 1px var(--line)}
.aging-bar i{display:block;height:100%}

/* the quote comparison: one column per supplier, the cheapest cell on each row marked */
table.grid.compare th,table.grid.compare td{vertical-align:top}
table.grid.compare thead th.is-won{box-shadow:inset 0 2px 0 var(--ok)}
table.grid.compare td.best{background:var(--ok-bg)}
table.grid.compare td.best::after{content:"✓";margin-inline-start:6px;font-size:11px;color:var(--ok)}
table.grid.compare tfoot td{border-top:1px solid var(--line-strong)}
table.grid.compare tfoot tr.total td{font-size:14px}

/* ═══════════════════════════════════════════════════════════════════════════
   Finance v1.75 — check dots, the entry workbench
   ═══════════════════════════════════════════════════════════════════════════ */

/* a reconciliation's verdict as one dot: fifteen rows of "ok / warn / fail" read faster as colour than
   as a word, and the word stays in the row for anybody who cannot tell the colours apart */
.dot-ok,.dot-warn,.dot-fail{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok)}
.dot-warn{background:var(--warn)}
.dot-fail{background:var(--bad)}

/* visible to a screen reader, not on the page */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* the manual-journal form: a template bar above the lines, and a running balance that has to read as
   the most important number on the screen — because a journal that does not balance cannot be posted */
.tpl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;margin-bottom:12px;
    border-radius:var(--radius-sm);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.tpl-bar strong{font-size:13px}
.tpl-bar .btn{white-space:nowrap}
.je-balance{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:10px;padding:10px 12px;
    border-radius:var(--radius-sm);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);
    font-variant-numeric:tabular-nums}
.je-balance b{font-size:1.05rem}
.je-balance .je-diff{margin-inline-start:auto;font-weight:700}

/* ═══════════════════════════════════════════════════════════════════════════
   v2.1.0 — daily operations
   ═══════════════════════════════════════════════════════════════════════════ */


.inbox-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.inbox-group h3 .tag{margin-inline-start:6px}
.inbox-dot{display:inline-block;width:8px;height:8px;margin-inline-end:8px;border-radius:50%;background:var(--info);vertical-align:middle}
.inbox-dot.urgent{background:var(--bad);box-shadow:0 0 0 3px var(--bad-bg)}
.inbox-dot.low{background:var(--line-strong)}
.inbox-detail{font-size:12.5px;font-weight:400;margin-top:2px;overflow-wrap:anywhere}
table.grid tr.inbox-row.urgent td:first-child{font-weight:600}
.inbox-notices > summary{display:flex;align-items:center;gap:8px}
.inbox-notices .ph-list{margin:10px 0}


/* ── the command palette (Ctrl/⌘-K) ───────────────────────────────────────── */
dialog.palette{width:min(680px,94vw);max-height:min(580px,84vh);padding:0;border:0;border-radius:var(--radius-lg);background:var(--card);color:var(--text);
    box-shadow:var(--shadow-lg);margin-top:11vh;overflow:hidden}
dialog.palette[open]{animation:palette-in .18s cubic-bezier(.2,.8,.2,1)}
dialog.palette::backdrop{background:rgba(6,11,20,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@keyframes palette-in{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.palette-box{display:flex;flex-direction:column;max-height:inherit}
.palette-field{position:relative;display:flex;align-items:center;gap:12px;padding:8px 18px;border-bottom:1px solid var(--line)}
.palette-field svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--accent-ink);stroke-width:1.9;stroke-linecap:round}
.palette-field input{flex:1;min-width:0;height:50px;border:0;background:transparent;font-size:16.5px;box-shadow:none;padding:0}
.palette-field input:focus{outline:none;box-shadow:none}
.palette-esc{padding:4px 7px;border-radius:7px;border:1px solid var(--line);border-bottom-width:2px;background:var(--soft);color:var(--muted);font:600 11px/1 var(--font-ui);direction:ltr}
.palette-list{list-style:none;margin:0;padding:8px;overflow-y:auto;flex:1;scrollbar-width:thin}
.palette-list > li:not(.palette-item){padding:24px;text-align:center}
/* the page's name first, its section as a small pill at the end of the line, a detail under the name */
.palette-item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l g" "s g";column-gap:12px;align-items:center;
    padding:9px 12px;border-radius:12px;cursor:pointer;min-height:46px}
.palette-item.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-ring)}
.palette-group{grid-area:g;justify-self:end;max-width:170px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:20px;color:var(--muted);
    background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palette-group:empty{display:none}
.palette-label{grid-area:l;font-weight:600;overflow-wrap:anywhere}
.palette-sub{grid-area:s;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.palette-sub:empty{display:none}
.palette-item.is-new .palette-group{color:var(--ok);background:var(--ok-bg);box-shadow:none}
.palette-item.is-record .palette-label{font-family:var(--font-mono);font-size:.92em;direction:ltr;unicode-bidi:isolate}
.palette-hint{margin:0;padding:9px 18px;border-top:1px solid var(--line);font-size:12px;background:var(--th-bg)}
.palette-open{display:none}

/* ── public document check ───────────────────────────────────────────────── */
.verify-card{width:min(520px,100%)}
.verify-card h2{text-align:center;margin:6px 0 2px}
.verify-ar{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.verify-state{margin:14px 0;padding:12px 14px;border-radius:12px;font-weight:600;background:var(--ok-bg);color:var(--ok)}
.verify-state.warn{background:var(--warn-bg);color:var(--warn)}
.verify-state.bad{background:var(--bad-bg);color:var(--bad)}
.verify-card dl.kv{grid-template-columns:110px minmax(0,1fr)}

/* ── Phones in the yard and the workshop (≤ 640 px, and the narrow end ≤ 420 px) ──
   The shell already folds the sidebar into a drawer below 900 px. What was missing: the page behind the
   drawer still scrolled, one wide element (a pasted VIN, a fixed-width input, a 760-px table outside a
   scroller) pushed the whole page sideways, and the chrome was sized for a mouse. Fixed here, centrally —
   no module screen was edited. */
img,video,canvas,svg{max-width:100%}
.main-col{overflow-x:clip}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:900px){
    body.nav-open{overflow:hidden;touch-action:none}
    body.nav-open .sidebar{touch-action:pan-y}
    .sidebar{width:min(300px,86vw);box-shadow:0 0 60px rgba(0,0,0,.45)}
    .palette-open{display:grid}
    .topbar .search{max-width:none}
    .page-head h1{overflow-wrap:anywhere}
}
@media (max-width:640px){
    .topbar{height:58px;padding:0 10px;gap:6px;padding-top:env(safe-area-inset-top)}
    .card.pin-head > table.grid > thead{top:58px}
    .icon-btn{width:44px;height:44px}
    .topbar .search input{height:44px;font-size:16px;padding-inline:38px 10px}
    .topbar .search svg{inset-inline-start:12px}
    .user > summary{padding-inline:2px}
    .user > summary .chev{display:none}
    .user-menu{position:fixed;top:64px;inset-inline:10px;min-width:0}
    .page{padding:14px 12px calc(40px + env(safe-area-inset-bottom))}
    .card{padding:16px}
    .kpi{padding:14px 14px 12px}
    .kpi-ico{top:12px;inset-inline-end:12px;width:34px;height:34px;border-radius:10px}
    .kpi-ico svg{width:18px;height:18px}
    .kpi:has(> .kpi-ico) > small{min-height:34px;padding-inline-end:40px}
    .toasts{top:66px;inset-inline:10px}
    .dash-status{padding:12px 14px}
    .sec > h3{font-size:16px}
    .page-head{margin-bottom:14px}
    .page-head h1{font-size:21px}
    .crumbs{font-size:12px}
    /* nothing wider than the screen: fixed-width inputs, inline widths and toolbars give way */
    input,select,textarea{max-width:100%}
    input[style*="width"],select[style*="width"]{max-width:100%}
    .toolbar{flex-wrap:wrap}
    .toolbar > *{max-width:100%;min-width:0}
    .toolbar form{flex-wrap:wrap}
    #sidebar-nav .nav-top,.nav-area > summary{min-height:48px}
    .nav-items a{padding-block:10px}
    .langs button{height:40px}
    /* a stacked table's cards: an empty cell says nothing, the actions sit on their own line */
    table.stack-sm tbody td:empty{display:none}
    table.stack-sm tbody td.row-actions{justify-content:flex-start;gap:8px;padding-top:9px;margin-top:4px;border-top:1px dashed var(--line);white-space:normal}
    table.stack-sm tbody td.row-actions .btn{flex:1 1 auto;justify-content:center}
    table.stack-sm tbody td > select,table.stack-sm tbody td > input:not([type=checkbox]):not([type=radio]){flex:1 1 55%;min-width:0}
    .card:has(> .table-scroll > table.stack-sm),.card:has(> table.stack-sm){overflow:visible}
    .inbox-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
    .inbox-kpis .kpi{padding:12px}
    .inbox-kpis .kpi strong{font-size:19px}
    dialog.palette{margin-top:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
    .palette-item{grid-template-areas:"l g" "s s"}
    .palette-group{max-width:40vw}
    .palette-hint{display:none}
}
@media (max-width:420px){
    .topbar .search input::placeholder{font-size:13px}
    .kpis,.kpis[style]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .inbox-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
    .kpi strong{font-size:17px}
    .kpi strong.mono{font-size:15px}
    .card h3{font-size:15px}
    .grid-2,.grid-3{gap:10px}
    .btn{padding-inline:12px}
    table.grid{font-size:13px}
    dl.kv{grid-template-columns:minmax(0,1fr)}
}
@media print{
    dialog.palette,.palette-open{display:none!important}
}

/* ── A VIN read from the camera (app.js §6) ──────────────────────────────── */
.vin-wrap{display:flex;align-items:center;gap:6px}
label .vin-wrap{margin-top:6px}
.vin-wrap > input{flex:1 1 auto;margin-top:0}
.vin-cam{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border-radius:var(--radius-sm);border:1px solid var(--field-line);background:var(--card);color:var(--text);cursor:pointer}
.vin-cam:hover{border-color:var(--line-strong);background:var(--soft)}
.vin-cam svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
dialog.vin-scan{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:0;border:0;border-radius:16px;overflow:hidden;background:#0B0F16;color:#fff}
dialog.vin-scan::backdrop{background:rgba(6,9,14,.72)}
.vin-scan .vin-view{position:relative;aspect-ratio:4/3;background:#000}
.vin-scan video{display:block;width:100%;height:100%;object-fit:cover}
.vin-scan .vin-aim{position:absolute;inset:34% 7%;border:2px solid rgba(255,255,255,.85);border-radius:10px;box-shadow:0 0 0 999px rgba(0,0,0,.3)}
.vin-scan .vin-aim::after{content:"";position:absolute;inset-inline:6%;top:50%;height:2px;background:var(--accent);animation:vin-line 1.6s ease-in-out infinite}
.vin-scan .vin-msg{margin:0;padding:12px 16px;font-size:14px;line-height:1.6;color:#DFE6F1}
.vin-scan .vin-msg.bad{color:#FFB4A8}
.vin-scan .vin-bar{display:flex;justify-content:flex-end;gap:8px;padding:0 16px 14px}
.vin-got{animation:vin-got 1.4s ease-out}
@keyframes vin-line{0%,100%{transform:translateY(-16px)}50%{transform:translateY(16px)}}
@keyframes vin-got{0%{border-color:var(--accent);box-shadow:var(--ring)}100%{box-shadow:none}}
@media (prefers-reduced-motion:reduce){.vin-scan .vin-aim::after,.vin-got{animation:none}}
@media print{.vin-cam{display:none}}


/* ── the sections guide: every page of a section by tier, each with its ★ ─────── */
.hub-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.hub-tabs a{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.hub-tabs a:hover{color:var(--text);text-decoration:none}
.hub-tabs a.on{color:var(--accent2);background:var(--midnight);box-shadow:none}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.hub-card{padding:16px 16px 10px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.hub-card h3{margin:0 0 8px;font-size:15px}
.hub-card h3 small{font-weight:500;color:var(--muted)}
.hub-list{margin:0;padding:0;list-style:none}
.hub-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid var(--line)}
.hub-list li:last-child{border-bottom:0}
.hub-list a{color:var(--link);font-size:14px;line-height:1.6}
.hub-list form{margin:0}
.hub-list .pin-btn{width:30px;height:30px;font-size:17px}
@media print{.pin-form,.hub-list .pin-btn{display:none}}


/* ── The sample company (v2.3) ──────────────────────────────────────────────────
   While the company in use is «کۆمپانیای نمونە», the top bar says so twice: a gold-and-violet stripe along its lower
   edge and a pill at the start of its tools. The bar is sticky, so both stay in sight while the page scrolls; on a
   phone the pill keeps only its first words. Below: the sample company's own page (progress, counts, actions). */
.topbar.is-demo::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:3px;pointer-events:none;
    background:repeating-linear-gradient(135deg,var(--accent) 0 12px,var(--purple) 12px 24px)}
.demo-pill{display:inline-flex;align-items:center;gap:8px;flex:none;height:34px;padding-inline:12px 14px;border-radius:999px;
    font-size:12.5px;font-weight:700;white-space:nowrap;color:var(--purple);background:var(--purple-bg);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--purple) 32%,transparent)}
.demo-pill::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
a.demo-pill:hover{text-decoration:none;box-shadow:inset 0 0 0 1px var(--purple)}
.demo-facts{margin:0 0 12px;padding-inline-start:20px;line-height:1.9}
.demo-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.demo-progress{height:10px;border-radius:999px;overflow:hidden;background:var(--soft-2);box-shadow:inset 0 0 0 1px var(--line)}
.demo-progress > span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--purple));transition:width .4s ease}
.demo-now{margin:8px 0 0}
.demo-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}
.demo-counts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:16px}
.demo-counts > div{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.demo-counts strong{font-size:20px;font-weight:800}
.demo-counts small{font-size:12px;color:var(--muted)}
@media (max-width:900px){.demo-pill-more{display:none}.demo-pill{height:30px;padding-inline:10px 12px}}
@media print{.demo-pill{box-shadow:none}.topbar.is-demo::after{display:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.1 — a colour for each of the four busiest sections. Gold stays the colour of the action; the section colour
   says where you are: the mark before a page's title, the section's icon in the sidebar, and its home page.
   The layout sets data-section on .app from the page's section (see layouts/app.blade.php).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
    --c-sales:#2563EB; --c-sales-ink:#1D4ED8; --c-sales-soft:rgba(37,99,235,.11); --c-sales-glow:rgba(37,99,235,.5); --c-sales-side:#7FA6F8;
    --c-buying:#E8741C; --c-buying-ink:#B45309; --c-buying-soft:rgba(232,116,28,.12); --c-buying-glow:rgba(232,116,28,.5); --c-buying-side:#F5A969;
    --c-finance:#0E9F6E; --c-finance-ink:#047857; --c-finance-soft:rgba(14,159,110,.12); --c-finance-glow:rgba(14,159,110,.5); --c-finance-side:#5FD3A6;
    --c-crm:#7C4DDB; --c-crm-ink:#6D28D9; --c-crm-soft:rgba(124,77,219,.12); --c-crm-glow:rgba(124,77,219,.52); --c-crm-side:#B79CF5;
    --section:var(--accent); --section-ink:var(--accent-ink); --section-soft:var(--accent-soft); --section-glow:rgba(212,166,64,.38);
}
html[data-theme="dark"]{
    --c-sales:#6E9BF5; --c-sales-ink:#9DBBFA; --c-sales-soft:rgba(110,155,245,.15); --c-sales-glow:rgba(79,131,240,.5);
    --c-buying:#F29A52; --c-buying-ink:#F7B57E; --c-buying-soft:rgba(242,154,82,.15); --c-buying-glow:rgba(232,116,28,.45);
    --c-finance:#43C997; --c-finance-ink:#6FDDB3; --c-finance-soft:rgba(67,201,151,.14); --c-finance-glow:rgba(14,159,110,.45);
    --c-crm:#A487EE; --c-crm-ink:#C4AEF6; --c-crm-soft:rgba(164,135,238,.15); --c-crm-glow:rgba(124,77,219,.5);
}
[data-section="sales"]{--section:var(--c-sales);--section-ink:var(--c-sales-ink);--section-soft:var(--c-sales-soft);--section-glow:var(--c-sales-glow)}
[data-section="buying"]{--section:var(--c-buying);--section-ink:var(--c-buying-ink);--section-soft:var(--c-buying-soft);--section-glow:var(--c-buying-glow)}
[data-section="finance"]{--section:var(--c-finance);--section-ink:var(--c-finance-ink);--section-soft:var(--c-finance-soft);--section-glow:var(--c-finance-glow)}
[data-section="crm"]{--section:var(--c-crm);--section-ink:var(--c-crm-ink);--section-soft:var(--c-crm-soft);--section-glow:var(--c-crm-glow)}

/* the mark before a page's title in those sections */
:is([data-section="sales"],[data-section="buying"],[data-section="finance"],[data-section="crm"]) .page-title-row h1::before{
    content:"";display:inline-block;width:6px;height:.82em;margin-inline-end:11px;border-radius:4px;vertical-align:-.04em;
    background:linear-gradient(180deg,var(--section),color-mix(in srgb,var(--section) 55%,transparent))}
/* and each one's icon in the sidebar wears its colour; the section you are in, a little more */
.nav-area[data-area="sales"]{--side:var(--c-sales-side)} .nav-area[data-area="buying"]{--side:var(--c-buying-side)}
.nav-area[data-area="finance"]{--side:var(--c-finance-side)} .nav-area[data-area="crm"]{--side:var(--c-crm-side)}
.nav-area:is([data-area="sales"],[data-area="buying"],[data-area="finance"],[data-area="crm"]) > summary .nav-ico{color:var(--side)}
.nav-area.is-current:is([data-area="sales"],[data-area="buying"],[data-area="finance"],[data-area="crm"]) > summary .nav-ico{
    color:#fff;background:color-mix(in srgb,var(--side) 30%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--side) 45%,transparent)}