/* ============================================================================
   BADASS Freight CRM - the lead engine's look, ported.

   The CRM is a separate deployable and cannot import the engine's Python, so
   these are the engine's own values copied across: the same three type faces,
   the same palette, the same graph-paper background, the same collapsible
   icon-rail sidebar, and the same jet-black stat band. Anything changed here
   should be changed in webui.py / manager_page.py too, or the two tools start
   to look like different products again.
   ========================================================================= */

:root{
  --ink:#141414; --ink2:#3a3a3a;
  --yellow:#f4bd0b; --yellow2:#e0a800;
  --display:Anton,Barlow,sans-serif;
  --body:Barlow,ui-sans-serif,system-ui,sans-serif;
  --hand:"Architects Daughter","Comic Sans MS",cursive;
  --cream:#faf3ce; --cream2:#f6edc2; --white:#fffdf3;
  --line:rgba(20,20,20,.13);
  --shadow:5px 5px 0 var(--ink); --radius:4px;
  --field-bg:#fffdf6; --field-border:rgba(20,20,20,.22);
  --grid-bg:#faf2cc;
  --grid-img:linear-gradient(rgba(20,20,20,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,20,20,.08) 1px,transparent 1px),
    linear-gradient(rgba(20,20,20,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,20,20,.14) 1px,transparent 1px);
  --grid-size:26px 26px,26px 26px,130px 130px,130px 130px;
}
:root[data-theme=dark]{
  --white:#14141b; --cream:#1e1e28; --cream2:#282833;
  --ink:#f1f0e8; --ink2:#b6b6c6;
  --line:rgba(240,240,230,.14); --shadow:5px 5px 0 #05050a;
  --field-bg:#181820; --field-border:rgba(240,240,230,.16);
  --grid-bg:#0f0f0f;
  --grid-img:linear-gradient(rgba(250,243,206,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(250,243,206,.06) 1px,transparent 1px),
    linear-gradient(rgba(250,243,206,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(250,243,206,.10) 1px,transparent 1px);
}

*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-size:14px;font-family:var(--body);
  background-color:var(--grid-bg);background-image:var(--grid-img);
  background-size:var(--grid-size);background-attachment:fixed}

/* ── layout ───────────────────────────────────────────────────────────── */
.layout{display:flex;align-items:flex-start;min-height:100vh}
.main{flex:1 1 auto;min-width:0;padding:14px 34px 46px;background:transparent}

/* ── sidebar: fixed rail, collapses to icons ─────────────────────────── */
.side{width:216px;flex:none;background:#141414;color:#f1f0e8;
  min-height:100vh;position:sticky;top:0;padding:14px 10px 12px;
  display:flex;flex-direction:column;gap:2px;
  transition:width .16s ease;overflow:hidden}
.sbrand{display:flex;align-items:center;gap:9px;padding:4px 6px 14px;
  margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.13)}
.bmark{display:none;width:34px;height:34px;flex:none;align-items:center;
  justify-content:center;color:var(--yellow);font-family:var(--display);
  font-size:28px;line-height:1}
.sbword{display:flex;flex-direction:column;white-space:nowrap;color:#faf2cc;
  font-family:var(--display);font-size:21px;font-weight:400;letter-spacing:.5px;
  line-height:1.34;min-width:0;overflow:hidden}
.sbword span{color:var(--yellow)}
.snav{display:flex;align-items:center;gap:11px;padding:8px 10px;
  border-radius:8px;color:rgba(241,240,232,.82);text-decoration:none;
  font-size:13.5px;font-weight:600;cursor:pointer;background:none;border:none;
  font-family:var(--body);text-align:left;width:100%;letter-spacing:0}
.snav:hover{background:rgba(255,255,255,.09);color:#fff}
.snav.on{background:var(--yellow);color:#141414;font-weight:700}
.snav.on .sico{color:#141414}
.sico{width:18px;height:18px;flex:none;color:currentColor}
.slbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdiv{height:1px;background:rgba(255,255,255,.13);margin:8px 8px}
.sgrp{font-size:9.5px;text-transform:uppercase;letter-spacing:1.6px;
  color:rgba(241,240,232,.45);padding:10px 10px 4px;font-weight:700}
/* The theme row is pushed to the bottom, so the rule above it is the one
   that separates it from the nav - the footer then needs its own. */
.themewrap{margin-top:auto;padding-top:8px;
  border-top:1px solid rgba(255,255,255,.13)}
.sfoot{padding-top:8px;border-top:1px solid rgba(255,255,255,.13)}
.swho{padding:6px 10px 2px;font-weight:700;color:var(--yellow);font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srole{padding:0 10px 8px;font-size:9.5px;text-transform:uppercase;
  letter-spacing:1.6px;color:rgba(241,240,232,.55)}

body.sidehid .side{width:48px}
body.sidehid .sbword,body.sidehid .sgrp,body.sidehid .slbl,
body.sidehid .swho,body.sidehid .srole{display:none}
body.sidehid .sdiv{margin:6px 12px}
body.sidehid .sbrand{justify-content:center;padding:12px 0 10px;margin-bottom:2px}
body.sidehid .snav{justify-content:center;width:34px;height:34px;padding:0;
  margin:0 auto}
body.sidehid .sico{width:17px;height:17px}
body.sidehid .bmark{display:inline-flex}
body.sidehid .sfoot,body.sidehid .themewrap{padding-top:8px}

/* the pane toggle, top-left of every page */
.topbar{display:flex;align-items:center;gap:12px;padding:6px 0 10px}
.paneltg{width:36px;height:36px;display:inline-flex;align-items:center;
  justify-content:center;background:transparent;border:none;border-radius:8px;
  color:var(--ink);cursor:pointer;padding:0}
.paneltg svg{width:21px;height:21px}
.paneltg:hover{background:rgba(20,20,20,.08)}
:root[data-theme=dark] .paneltg:hover{background:rgba(255,255,255,.10)}
.crumb{font-size:13px;color:var(--ink2)}

/* tooltip while the rail is collapsed */
.stip{position:fixed;z-index:200;background:#141414;color:#fff;font-size:12px;
  font-weight:600;padding:5px 9px;border-radius:6px;pointer-events:none;
  white-space:nowrap;opacity:0;transition:opacity .12s ease}
.stip.on{opacity:1}

/* ── type ─────────────────────────────────────────────────────────────── */
h1,.pgtitle{font-family:var(--display);font-size:34px;line-height:1;margin:0;
  letter-spacing:-.01em;color:var(--ink);text-transform:uppercase}
.pgsub{font-family:var(--hand);font-size:15px;color:var(--ink2);margin:6px 0 20px}
h2,.sechead{font-family:var(--display);font-size:22px;margin:0 0 2px;
  letter-spacing:-.01em;color:var(--ink);text-transform:uppercase}
.secsub{font-family:var(--hand);font-size:14px;color:var(--ink2);margin:0 0 14px}

/* ── the jet-black stat band, same as Manager Leads ──────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));
  gap:3px;background:#000;border:3px solid var(--ink);border-radius:14px;
  overflow:hidden;margin-bottom:26px}
.kpi{background:#000;padding:16px 18px;
  box-shadow:3px 0 0 rgba(255,255,255,.14),0 3px 0 rgba(255,255,255,.14)}
.kpi .n{font-size:34px;font-weight:800;line-height:1.1;color:var(--yellow);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.kpi .l{font-size:12px;text-transform:uppercase;letter-spacing:.7px;
  font-weight:800;color:#fff;margin-top:7px}
.kpi .s{font-size:13px;color:#c9c6bc;margin-top:5px}
.kpi .up{color:#5fd483;font-weight:700}
.kpi .warn{color:#f0a463;font-weight:700}

/* ── black panels (charts, breakdowns) ───────────────────────────────── */
.panel{background:#000;border:3px solid var(--ink);border-radius:14px;
  padding:18px 20px;margin-bottom:26px;color:#fff}
.panel h3,.panel .ptitle{font-family:var(--display);font-size:17px;margin:0 0 3px;
  color:#fff;text-transform:uppercase;letter-spacing:.3px}
.panel .psub{font-family:var(--hand);font-size:13px;color:#c9c6bc;margin:0 0 14px}
.panel .mut,.panel .opacity-70,.panel .opacity-60{color:#c9c6bc;opacity:1}
/* Nothing inside a black panel may inherit a theme-flipping colour: in light
   mode var(--ink) is near-black and the text vanished. Same trap that hit the
   engine's Seasonal demand block. */
.panel,.panel *{color:#fff}
.panel .mut,.panel .text-xs.font-hand{color:#c9c6bc}
/* Links inside a black panel are yellow - but a BUTTON that happens to be a
   link keeps its own colour. Without this exception the yellow .bbtn inside a
   panel drew yellow text on a yellow fill and read as an empty block. */
.panel a:not(.bbtn){color:var(--yellow)}
.panel a.bbtn{color:#141414}
.panel a.bbtn-ghost{color:var(--ink)}
.panel a.bbtn-black{color:var(--yellow)}
.panel .n,.panel .num,.panel strong.n{color:var(--yellow)}
.panel table th{background:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.18)}
.panel table td{color:#fff;border-bottom:1px solid rgba(255,255,255,.10)}

/* ── tables, matching the engine's ───────────────────────────────────── */
.btab{width:100%;border-collapse:collapse;font-size:13px;background:transparent}
.btab th{background:#000;color:#fff;text-align:left;padding:11px 12px;
  font-family:var(--display);font-size:12px;text-transform:uppercase;
  letter-spacing:.6px;font-weight:400}
.btab th:first-child{border-radius:10px 0 0 10px}
.btab th:last-child{border-radius:0 10px 10px 0}
.btab td{padding:11px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--ink)}
.btab tr:hover td{background:rgba(20,20,20,.05)}
:root[data-theme=dark] .btab tr:hover td{background:rgba(255,255,255,.05)}

/* A table rendered as one black slab. The engine uses a black header over
   graph paper; these three blocks were asked for fully black, so the rule
   lives here once rather than as inline styles on each. */
.tblack{background:#000;border:3px solid var(--ink);border-radius:14px;
  overflow:hidden}
.tblack .btab{background:transparent}
.tblack .btab th{background:#000;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.20)}
.tblack .btab th:first-child,.tblack .btab th:last-child{border-radius:0}
.tblack .btab td{color:#fff;border-bottom:1px solid rgba(255,255,255,.10)}
.tblack .btab tr:hover td{background:rgba(255,255,255,.05)}
.tblack .btab .mut,.tblack .btab .opacity-60,.tblack .btab .opacity-70{
  color:#c9c6bc;opacity:1}
.tblack .btab strong,.tblack .btab b{color:#fff}
.tblack .btab .num,.tblack .btab .n{color:var(--yellow)}
.tblack a:not(.bbtn){color:var(--yellow)}
/* The engine's row styles assume a cream page: company name, business type and
   the row number are all var(--ink). On the black slab that is black on black.
   Everything the row draws gets a light value here, once. */
.tblack .colink{color:#fff}
.tblack .colink:hover{color:var(--yellow)}
.tblack .bcat{color:#fff}
.tblack .brate,.tblack .cowhen,.tblack .rn{color:#c9c6bc}
/* Address and email are muted in the engine because there they sit on cream,
   where a dark grey still reads strongly. On the black table the same class
   came out washed out next to the white phone number, so one row showed three
   different weights. On black they read as white like everything else - the
   second line is what separates the email from the phone, not the colour. */
/* The engine's .mtab draws cells in var(--ink), which is near-black. On the
   black slab every plain cell has to be light. This lived in one page's inline
   styles, so the other page's phone numbers rendered black on black. */
.tblack .mtab td,.tblack .mtab th{color:#fff}
.tblack .mtab td.mut,.tblack .mtab td .mut{color:#fff}
.tblack .mtab td .mut{opacity:.88}
/* Only the yellow-filled chip wants dark text; .mid and .lo are already dark
   with white type, and blanketing them made 42 and 48 read as black on black. */
.tblack .sc2.hi{color:#141414}
.tblack a.bbtn{color:#141414}
/* Chips and pills were drawn for the cream page. On the black slab a black
   pill and an ink-bordered chip both disappear, so they get light versions. */
.tblack .chip{border-color:rgba(255,255,255,.55);color:#fff}
.tblack .pill{background:#2a2a2a;color:#fff;
  border:1px solid rgba(255,255,255,.35)}

/* ============================================================================
   The lead engine's Manager Leads table, verbatim: row layout, score chip,
   CRM badge, company link, and the thirteen status colours. Copied rather
   than re-invented so a lead reads identically in both tools - the status
   tones especially, since a manager learns them by colour.
   ========================================================================= */
/* table */
.mtab{width:100%;border-collapse:collapse;font-size:13px;background:transparent}
.mtab th{text-align:left;font-size:12px;text-transform:uppercase;
 letter-spacing:.6px;font-weight:800;color:#fff;padding:13px 10px;
 border-bottom:none;background:#000}
.mtab td{padding:11px 10px;border-bottom:1px solid var(--field-border);
 vertical-align:top}
.mtab tr:hover td{background:rgba(20,20,20,.06)}
.rn{width:34px;color:var(--ink2);font-variant-numeric:tabular-nums;font-size:12px}
.cbx{width:30px}
.cbx input{width:15px;height:15px;padding:0;margin:0;border:none;
 accent-color:var(--yellow2);cursor:pointer;background:none;box-shadow:none}
.co{font-weight:700;color:var(--ink)}
.cowhen{font-size:11px;font-weight:600;color:var(--ink2);margin-top:3px;
 -webkit-user-select:none;user-select:none;
 white-space:nowrap}
.mut{color:var(--ink2);font-size:12px}
.empty{color:var(--ink2);font-size:14px;padding:22px 0}
.sc2{display:inline-block;min-width:32px;text-align:center;font-weight:800;
 font-size:12px;padding:3px 7px;border-radius:6px;font-variant-numeric:tabular-nums}
.sc2.hi{background:var(--yellow);color:#141414}
.sc2.mid{background:#0d0d0d;color:#fff;border:1px solid rgba(255,255,255,.22)}
.sc2.lo{background:#0d0d0d;color:#fff;border:1px solid rgba(255,255,255,.22)}
.oc{font-size:12px;font-weight:700;padding:6px 8px;border-radius:8px;
 border:2px solid var(--field-border);background:var(--field-bg);
 color:var(--ink);cursor:pointer;max-width:172px;box-shadow:none}
/* Inside a table the control fills its own column and no more. Left to size
   itself it was as wide as its widest option - so a row whose list had been
   filled in on first click grew to twice its neighbours and ran into the
   next column. */
.mtab .oc{width:100%;max-width:none}
.mtab td:has(>.oc){padding-right:16px}
.oc.s-new{background:#eceada;color:#4a4636;border-color:#b8b39a}
.oc.s-int{background:#ddf2e3;color:#12662c;border-color:#4a9c60}
.oc.s-mail{background:#dceafa;color:#14508f;border-color:#5b93d6}
.oc.s-noans{background:#fde8d4;color:#8a4a08;border-color:#d99a4a}
.oc.s-no{background:#9b1c1c;color:#fff;border-color:#7a1414}
.oc.s-notnow{background:#f5e0e8;color:#8a1d4a;border-color:#c97a9c}
.oc.s-cb{background:#fdf2c9;color:#7a5a06;border-color:#d9bd4a}
.oc.s-nfrb{background:#e8dcf7;color:#5b2a8a;border-color:#9a73d1}
.oc.s-fut{background:#d6f0ef;color:#0d5f5c;border-color:#4fa8a4}
.oc.s-quote{background:#d9f0f7;color:#0d5570;border-color:#4f9fc0}
.oc.s-quoted{background:#dde0f7;color:#2a2f8a;border-color:#7a80d1}
.oc.s-won{background:#12662c;color:#fff;border-color:#0b4a1f}
.oc.s-dead{background:#3a3a45;color:#f2f1f5;border-color:#22222c}
[data-theme=dark] .oc.s-new{background:#26251d;color:#cfcbb4;border-color:#4d4a3a}
[data-theme=dark] .oc.s-int{background:#12301f;color:#7fe0a0;border-color:#2c6b45}
[data-theme=dark] .oc.s-mail{background:#122438;color:#8dc2f5;border-color:#2c5480}
[data-theme=dark] .oc.s-noans{background:#33230f;color:#f0b978;border-color:#6b4a20}
[data-theme=dark] .oc.s-no{background:#a52323;color:#fff;border-color:#c94545}
[data-theme=dark] .oc.s-notnow{background:#331622;color:#f0a3c2;border-color:#6b2c45}
[data-theme=dark] .oc.s-cb{background:#33290d;color:#f0d67a;border-color:#6b5620}
[data-theme=dark] .oc.s-nfrb{background:#241a38;color:#c4a3f5;border-color:#4d3a7a}
[data-theme=dark] .oc.s-fut{background:#0f2b2a;color:#7fd8d4;border-color:#256b67}
[data-theme=dark] .oc.s-quote{background:#0f2733;color:#7fc8e0;border-color:#255f7a}
[data-theme=dark] .oc.s-quoted{background:#1a1c38;color:#a8adf5;border-color:#3a3f80}
[data-theme=dark] .oc.s-won{background:#12662c;color:#fff;border-color:#1c8a3c}
[data-theme=dark] .oc.s-dead{background:#2c2c36;color:#d5d3e0;border-color:#5a5866}
.weblink{text-decoration:none;font-weight:600;word-break:break-all}
.weblink:hover{text-decoration:none;color:var(--ink)}
.bcat{font-weight:600;color:var(--ink);font-size:13px}
.brate{color:var(--ink2);font-size:11px}
.crm{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.4px;
 padding:2px 7px;border-radius:5px;vertical-align:2px;margin-right:7px;
 /* Never let the three letters wrap - in a squeezed column the chip broke
    into a "CR / M" block two lines tall. */
 white-space:nowrap}
/* Fixed column widths. With auto layout the browser sizes each column from
   whatever rows happen to be in the table, so the SAME lead rendered at a
   different height on Manager Leads (45 rows) and in the Lead bank (98) even
   though every style matched. Pinned, the two are identical row for row. */
.mtab{table-layout:fixed}
.mtab th:nth-child(1),.mtab td:nth-child(1){width:34px}
.mtab th:nth-child(2),.mtab td:nth-child(2){width:32px}
.mtab th:nth-child(3),.mtab td:nth-child(3){width:52px}
.mtab th:nth-child(4),.mtab td:nth-child(4){width:62px}
.mtab th:nth-child(5),.mtab td:nth-child(5){width:16%}
.mtab th:nth-child(6),.mtab td:nth-child(6){width:15%}
.mtab th:nth-child(7),.mtab td:nth-child(7){width:17%}
.mtab th:nth-child(8),.mtab td:nth-child(8){width:200px}
.mtab th:nth-child(9),.mtab td:nth-child(9){width:13%}
.mtab th:nth-child(10),.mtab td:nth-child(10){width:110px}
.mtab td:nth-child(4){white-space:nowrap}
/* Phone / Email on one line each. Left to wrap it broke mid-address
   ("goodmanufacturi / ng.com"), and how it broke depended on the window and
   sidebar width - so the same lead read differently on two pages. The table
   already scrolls sideways when it needs to. */
.mtab td:nth-child(8){white-space:nowrap}
.crm.yes{background:#3fb862;color:#141414;border:1px solid #2b8f47}
.crm.no{background:#e04a4a;color:#141414;border:1px solid #b32e2e}
[data-theme=dark] .crm.yes{background:#3fb862;color:#141414;border-color:#59d67d}
[data-theme=dark] .crm.no{background:#e04a4a;color:#141414;border-color:#f06a6a}
.colink{background:none;background-color:transparent;border:none;padding:0;
 font:inherit;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;
 text-decoration:none;box-shadow:none;text-transform:none;letter-spacing:0}
.colink:hover,.colink:focus{background:none;background-color:transparent;
 color:var(--yellow2)}
.colink:focus-visible{outline:2px solid var(--yellow2);outline-offset:2px}

/* ============================================================================
   The lead engine's lead drawer, verbatim. The CRM had a lookalike with its
   own class names, sizes and a different set of controls; this is the real
   thing, so the panel that opens in the CRM is the panel that opens in the
   engine. Scoped under #pane, which is the CRM's drawer shell.
   ========================================================================= */
#pane{--ink:#fff;--ink2:#c9c6bc;--white:#0d0d0d;--field-bg:#16161a;
  --field-border:rgba(255,255,255,.20);--line:rgba(255,255,255,.14);
  background:#0d0d0d;color:#fff;font-family:var(--body)}

/* ---- lead detail pane (right side, split-screen) ---- */
#pane{--ink:#fff;--ink2:#c9c6bc;--white:#0d0d0d;--field-bg:#16161a;
 --field-border:rgba(255,255,255,.20);--line:rgba(255,255,255,.14);
 position:fixed;top:0;right:0;height:100vh;
 width:min(560px,46vw);background:#0d0d0d;border-left:3px solid rgba(255,255,255,.22);
 z-index:70;display:flex;flex-direction:column;overflow:hidden;
 transform:translateX(102%);transition:transform .22s ease;
 overscroll-behavior:contain;box-shadow:-10px 0 28px rgba(0,0,0,.16)}
#pane.on{transform:translateX(0)}
body.dopen .mainX{padding-right:min(580px,48vw)}
.dhead{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
 border-bottom:3px solid var(--ink);background:var(--field-bg);
 position:relative;z-index:2;flex:none;
 box-shadow:0 6px 12px -6px rgba(0,0,0,.22)}
.dhead h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em;
 line-height:1.25;color:var(--yellow)}
.dmeta{font-size:12px;color:var(--ink2);margin-top:4px}
.dx{margin-left:auto;display:inline-flex;align-items:center;
 justify-content:center;padding:0;width:34px;height:34px;
 border:2px solid var(--ink);background:transparent;color:var(--ink);
 border-radius:7px;width:30px;height:30px;font-size:17px;font-weight:800;
 cursor:pointer;flex:none;line-height:1;padding:0;box-shadow:none}
.dbody{padding:14px 16px 40px;overflow-y:auto;flex:1;min-height:0;
 overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.dsec{color:var(--yellow);font-size:11px;font-weight:800;letter-spacing:.8px;
 text-transform:uppercase;
 border-bottom:2px solid var(--yellow);padding-bottom:6px;margin:0 0 10px}
.dsec.mt{margin-top:22px}
.dhinfo{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dfld.wide{grid-column:1 / -1}
.dfld label{display:block;font-size:11px;font-weight:800;letter-spacing:.6px;
 text-transform:uppercase;color:var(--yellow);margin-bottom:4px}
.dro{background:var(--white);border:2px solid var(--line);border-radius:7px;
 padding:8px 9px;font-size:13px;font-weight:600;color:var(--ink2);
 cursor:default}
.dadd{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
 border:2px dashed var(--ink);border-radius:11px;background:transparent;
 color:var(--ink);padding:14px;font-family:var(--body);font-size:15px;
 font-weight:700;cursor:pointer;box-shadow:none;text-transform:none;
 letter-spacing:0}
.dadd svg{flex:none;stroke-width:2.6}
.dadd:hover{background:var(--field-bg);border-style:solid}
.dbtn{margin-top:10px;background:var(--yellow);border:2px solid var(--ink);
 border-radius:8px;padding:9px 18px;font-size:13px;font-weight:800;color:#141414;
 cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:0}
.dbtn:hover{background:var(--yellow2)}
.dsaved{font-size:12px;font-weight:800;color:#12662c;margin-left:10px}
.dnote{width:100%;min-height:82px;background:#0d0d0d;color:#fff;
 border:2px solid var(--yellow);
 border-radius:9px;padding:10px;font:inherit;font-size:13px;line-height:1.55;resize:vertical}
[data-theme=dark] .dnote{background:#33290d;border-color:#6b5620}
.dlogs{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.dlog{background:#fdf6d8;border-left:4px solid var(--yellow);border-radius:0 8px 8px 0;
 padding:9px 12px;position:relative}
.dnacts{position:absolute;top:4px;right:4px;display:flex;gap:2px;opacity:0;
 transition:opacity .15s}
.dlog:hover .dnacts,.dnacts:focus-within{opacity:1}
.dnbtn{width:22px;height:22px;line-height:1;border:none;background:transparent;
 color:var(--ink2);font-size:13px;font-weight:800;cursor:pointer;border-radius:5px;
 padding:0;box-shadow:none;text-transform:none;letter-spacing:0}
.dnbtn:hover{background:rgba(20,20,20,.10);color:var(--ink)}
.dnbtn.del:hover{background:#fbdcdc;color:#9b1c1c}
[data-theme=dark] .dnbtn:hover{background:rgba(255,255,255,.12)}
[data-theme=dark] .dnbtn.del:hover{background:#3a1414;color:#f5a3a3}
.dlog p{padding-right:52px}
.dedit{font-weight:700;font-style:italic;opacity:.75}
[data-theme=dark] .dlog{background:#33290d}
.dwhen{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
 color:var(--ink2);margin-bottom:4px}
.dlog p{margin:0;font-size:13px;line-height:1.5}
.dnonote{font-size:13px;color:var(--ink2);padding:6px 0}
.dempty{padding:20px;font-size:13px;color:var(--ink2)}
body.dopen .mainX{padding-right:30px}

.dstatus{font-size:12px;font-weight:800;padding:5px 9px;border-radius:7px;
 border:2px solid var(--field-border);background:var(--field-bg);color:var(--ink);
 cursor:pointer;box-shadow:none;max-width:190px;text-transform:none;letter-spacing:0}
.dstatus.s-new{background:#eceada;color:#4a4636;border-color:#b8b39a}
.dstatus.s-int{background:#ddf2e3;color:#12662c;border-color:#4a9c60}
.dstatus.s-mail{background:#dceafa;color:#14508f;border-color:#5b93d6}
.dstatus.s-noans{background:#fde8d4;color:#8a4a08;border-color:#d99a4a}
.dstatus.s-no{background:#9b1c1c;color:#fff;border-color:#7a1414}
.dstatus.s-notnow{background:#f5e0e8;color:#8a1d4a;border-color:#c97a9c}
.dstatus.s-cb{background:#fdf2c9;color:#7a5a06;border-color:#d9bd4a}
.dstatus.s-nfrb{background:#e8dcf7;color:#5b2a8a;border-color:#9a73d1}
.dstatus.s-fut{background:#d6f0ef;color:#0d5f5c;border-color:#4fa8a4}
.dstatus.s-quote{background:#d9f0f7;color:#0d5570;border-color:#4f9fc0}
.dstatus.s-quoted{background:#dde0f7;color:#2a2f8a;border-color:#7a80d1}
.dstatus.s-won{background:#12662c;color:#fff;border-color:#0b4a1f}
.dstatus.s-dead{background:#3a3a45;color:#f2f1f5;border-color:#22222c}
[data-theme=dark] .dstatus.s-new{background:#26251d;color:#cfcbb4;border-color:#4d4a3a}
[data-theme=dark] .dstatus.s-int{background:#12301f;color:#7fe0a0;border-color:#2c6b45}
[data-theme=dark] .dstatus.s-mail{background:#122438;color:#8dc2f5;border-color:#2c5480}
[data-theme=dark] .dstatus.s-noans{background:#33230f;color:#f0b978;border-color:#6b4a20}
[data-theme=dark] .dstatus.s-no{background:#a52323;color:#fff;border-color:#c94545}
[data-theme=dark] .dstatus.s-notnow{background:#331622;color:#f0a3c2;border-color:#6b2c45}
[data-theme=dark] .dstatus.s-cb{background:#33290d;color:#f0d67a;border-color:#6b5620}
[data-theme=dark] .dstatus.s-nfrb{background:#241a38;color:#c4a3f5;border-color:#4d3a7a}
[data-theme=dark] .dstatus.s-fut{background:#0f2b2a;color:#7fd8d4;border-color:#256b67}
[data-theme=dark] .dstatus.s-quote{background:#0f2733;color:#7fc8e0;border-color:#255f7a}
[data-theme=dark] .dstatus.s-quoted{background:#1a1c38;color:#a8adf5;border-color:#3a3f80}
[data-theme=dark] .dstatus.s-won{background:#12662c;color:#fff;border-color:#1c8a3c}
[data-theme=dark] .dstatus.s-dead{background:#2c2c36;color:#d5d3e0;border-color:#5a5866}
.dinp{width:100%;background:var(--field-bg);border:2px solid var(--field-border);
 border-radius:7px;padding:8px 9px;font:inherit;font-size:13px;font-weight:600;
 color:var(--ink)}
.dinp:focus{outline:none;border-color:var(--yellow2);
 box-shadow:0 0 0 3px rgba(245,190,11,.28)}
.dcard{border:2px solid var(--ink);border-radius:9px;background:var(--field-bg);
 padding:10px;margin-bottom:9px;display:flex;flex-direction:column;gap:8px}
.dctop{display:flex;gap:7px;align-items:center}
.dctop .nm{flex:1.2;font-weight:800}
.dctop .rl{flex:1}
.ddel{margin-left:auto;background:transparent;border:none;color:#9b1c1c;
 font-size:11px;font-weight:800;cursor:pointer;padding:3px 5px;box-shadow:none;
 white-space:nowrap;text-transform:none;letter-spacing:0}

/* The old lookalike's rules, neutralised so they cannot win by coming later. */
#pane .panehead,#pane .panebody,#pane .panesec,#pane .panelabel{all:unset}

/* The profile drawer, matched to the engine's: yellow Anton section rules,
   yellow labels, dark fields, white values. The CRM had its own sizes here. */
#pane{font-family:var(--body)}
/* Notes sit on a cream card inside a black drawer, so they are the one place
   that must NOT inherit the drawer's white text - it was white on cream and
   unreadable. The engine gets this for free by not setting a colour at all;
   the CRM's shell does, so the exception is spelled out here. */
#pane .dlog,#pane .dlog p,#pane .dlog .dntext,#pane .dlog textarea{color:#141414}
#pane .dlog .dwhen{color:#6f6a58}
#pane .dlog textarea{background:#fffdf3;border-color:rgba(20,20,20,.25)}
#pane .dnbtn{color:#3a3a3a}
#pane .dnbtn:hover{color:#141414;background:rgba(20,20,20,.10)}
#pane .panehead h2{font-family:var(--display);font-size:20px;line-height:1.25;
  color:var(--yellow);text-transform:none;letter-spacing:-.01em}
#pane .panesec{font-family:var(--display);font-size:13px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--yellow)}
#pane .panelabel{font-family:var(--display);font-size:11px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--yellow)}
#pane .binput{background:#16161a;color:#fff;border:1.5px solid rgba(255,255,255,.20);
  border-radius:8px;font-size:13px;padding:9px 11px}
#pane .binput::placeholder{color:#8f8b80}
#pane .bbtn{font-size:13px;padding:8px 15px}
/* Status select in the drawer wears the same colour as the row behind it. */
#pane .oc{font-size:13px;font-weight:700;padding:8px 10px;border-radius:8px;
  border:1.5px solid;font-family:var(--body);min-width:180px}

/* the CRM's one extra header control - who holds the lead */
#pane .dassign{margin-left:7px;font-size:12px;font-weight:700;padding:5px 9px;
  border-radius:8px;border:2px solid rgba(255,255,255,.22);background:#16161a;
  color:#fff;font-family:var(--body)}

/* the "their time" chip in the lead drawer */
.tzchip{display:inline-block;background:#12662c;color:#d9f5e1;border-radius:999px;
  padding:2px 10px;font-size:11px;font-weight:800;margin-left:8px;
  font-variant-numeric:tabular-nums;vertical-align:1px}

/* ── controls ─────────────────────────────────────────────────────────── */
.bbtn{background:var(--yellow);color:#141414;border:2px solid var(--ink);
  border-radius:var(--radius);font-family:var(--display);font-weight:400;
  letter-spacing:.6px;text-transform:uppercase;box-shadow:3px 3px 0 var(--ink);
  padding:9px 16px;font-size:14px;cursor:pointer;display:inline-block;
  text-decoration:none}
.bbtn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.bbtn-ghost{background:var(--white);color:var(--ink)}
.bbtn-black{background:#0d0d0d;color:var(--yellow);border-color:var(--ink);
  font-size:17px;padding:13px 24px;letter-spacing:.8px}
.bbtn-black:hover{background:#000;color:#fff}
.binput,select.binput,input.binput,textarea.binput{
  background:#0d0d0d;color:#fff;border:1.5px solid rgba(255,255,255,.22);
  border-radius:10px;font-family:var(--body);font-size:15px;padding:11px 13px}
.binput::placeholder{color:#8f8b80;opacity:1}
select.binput{font-weight:600;cursor:pointer}
/* The Commodities guide arrives from the engine with the engine's markup but
   not the engine's page CSS, so its search box needs the engine's own input
   rule - otherwise it renders as a pale browser default next to black pills. */
.csearch,input.csearch{width:100%;padding:13px 14px;
  border:1.5px solid rgba(255,255,255,.22);border-radius:10px;
  background:#0d0d0d;color:#fff;font-size:15px;font-family:var(--body)}
.csearch::placeholder{color:#8f8b80;opacity:1}

.chip{display:inline-block;padding:2px 9px;border:2px solid var(--ink);
  border-radius:999px;font-size:11px;font-weight:700;color:var(--ink)}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;
  font-weight:800;letter-spacing:.4px;background:#000;color:#fff}
.mut{color:var(--ink2)}
.hand{font-family:var(--hand)}

/* Cards: flat on the graph paper, exactly like the engine's. The CRM used
   white boxes with drop shadows, which read as a different product. */
.bcard{background:transparent;border:none;box-shadow:none;padding:0}
.card2{background:var(--white);border:2px solid var(--ink);
  border-radius:10px;box-shadow:4px 4px 0 var(--ink);padding:18px 20px}

@media(max-width:820px){
  .main{padding:12px 16px 40px}
  .side{width:48px}
  .sbword,.sgrp,.slbl,.swho,.srole{display:none}
  /* The rail auto-collapses here without the sidehid class, so the B has to
     be revealed too - otherwise the brand corner is simply empty. */
  .bmark{display:inline-flex}
  .sbrand{justify-content:center;padding:12px 0 10px}
  .snav{justify-content:center;width:34px;height:34px;padding:0;margin:0 auto}
}

/* ── activity feed ─────────────────────────────────────────────────────
   The feed grows forever. It gets a fixed window and scrolls inside itself,
   so the page below it stays where you left it. */
.feedbox{max-height:430px;overflow-y:auto;padding-right:10px;
  overscroll-behavior:contain}
.feedbox::-webkit-scrollbar{width:10px}
.feedbox::-webkit-scrollbar-track{background:rgba(255,255,255,.06);
  border-radius:6px}
.feedbox::-webkit-scrollbar-thumb{background:rgba(245,190,11,.55);
  border-radius:6px;border:2px solid transparent;background-clip:padding-box}
.feedbox::-webkit-scrollbar-thumb:hover{background:var(--yellow);
  background-clip:padding-box;border:2px solid transparent}
.feedbox{scrollbar-width:thin;scrollbar-color:rgba(245,190,11,.55) rgba(255,255,255,.06)}
/* the last row should not look cut off mid-scroll */
.feedbox > li:last-child{padding-bottom:2px}

/* ── sideways scrolling ────────────────────────────────────────────────
   A wide table has to be as easy to move on a desktop mouse as it is on a
   trackpad. A trackpad swipes sideways on its own; a mouse has neither a
   sideways wheel nor an obvious grip, so: a thick visible scrollbar, drag
   anywhere in the table to pan, and shift+wheel. */
.tblack.overflow-x-auto,.overflow-x-auto{
  scrollbar-width:auto;scrollbar-color:var(--yellow) rgba(128,128,128,.22)}
.overflow-x-auto::-webkit-scrollbar{height:14px}
.overflow-x-auto::-webkit-scrollbar-track{background:rgba(128,128,128,.22);
  border-radius:8px}
.overflow-x-auto::-webkit-scrollbar-thumb{background:var(--yellow);
  border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#ffd034;
  background-clip:padding-box;border:3px solid transparent}
/* grabbing state while dragging to pan */
.panning{cursor:grabbing!important;user-select:none}
.panning *{cursor:grabbing!important}
/* a quiet nudge on any table that actually has more to the right */
.scrollhint{font-family:var(--hand);font-size:13px;color:var(--ink2);
  margin:8px 0 0;display:none}
.scrollhint.on{display:block}

/* ── page head with the four zone clocks ──────────────────────────────────
   Three columns of 1fr / auto / 1fr put the clock strip on the page's true
   centre line rather than merely halfway between the title and the button,
   so it stays centred however wide either of those grows. Any page-subtitle
   spans the full width on a second row, which keeps the clocks level with
   the title's own line. */
.pghead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:6px 14px;margin-bottom:22px}
.pghead .pgtitle{margin:0}
.pghead .pgsub{grid-column:1/-1;margin:0}
.pghead .zbtn{justify-self:end}
.zbar{display:flex;justify-content:center;align-items:center;gap:7px;
  flex-wrap:wrap}
.zblk{display:inline-flex;align-items:baseline;justify-content:center;
  gap:10px;background:#000;border:2px solid var(--ink);border-radius:7px;
  padding:6px 17px;box-shadow:2px 2px 0 var(--ink);white-space:nowrap;
  min-width:150px}
/* Zone name in the brand yellow, clock in white. The glow is deliberately
   tight: at 10px a wide halo smears the letterforms instead of lighting them. */
.zl{font-family:var(--display);font-size:10px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--yellow);
  text-shadow:0 0 4px rgba(244,189,11,.60),0 0 10px rgba(244,189,11,.30)}
.zd{color:rgba(255,255,255,.32);font-size:10px}
.zt{font-family:var(--display);font-size:13px;font-weight:700;
  color:#fff;font-variant-numeric:tabular-nums}
/* Too narrow for three columns: the strip drops to its own centred row rather
   than squeezing the title or shunting the button off the edge. */
@media (max-width:1080px){
  .pghead{display:flex;flex-wrap:wrap;align-items:center}
  .pghead .pgtitle{margin-right:auto}
  .pghead .pgsub{flex:1 0 100%;order:4}
  .zbar{order:3;flex:1 0 100%;margin-top:2px}
}
@media (max-width:520px){
  .zblk{padding:5px 12px;gap:8px;min-width:132px}
  .zl{font-size:9px} .zt{font-size:12px}
}

/* ── lead tables: filter bar, bulk bar, and the cells inside a row ────────
   Lived in my_leads.html until My Leads needed every one of them. Shared here
   rather than pasted, so the two lead tables cannot drift apart. Only the
   per-page column widths stay with their own template. */
.flash{border:2px solid #2b8f47;background:#e8f7ec;color:#14401f;
  border-radius:8px;padding:10px 14px;margin-bottom:16px;font-weight:600}
:root[data-theme=dark] .flash{background:#12301c;color:#bff0cd}
.flash.bad{border-color:#b32e2e;background:#fdeaea;color:#5b1414}
:root[data-theme=dark] .flash.bad{background:#3a1414;color:#f6c9c9}
.flash.warn{border-color:#c78a05;background:#fdf3d9;color:#4d3800}
:root[data-theme=dark] .flash.warn{background:#332703;color:#f5e3a8}
.bdel{background:#e04a4a;color:#fff}
.mtab .tzchip{white-space:nowrap}
.cline{display:block;white-space:nowrap}
.cbtn{background:transparent;border:1px solid rgba(255,255,255,.28);
  border-radius:6px;color:#c9c4b4;font-family:var(--body);font-size:10px;
  font-weight:800;text-transform:uppercase;padding:1px 5px;margin-left:5px;
  cursor:pointer;vertical-align:middle}
.cbtn:hover{background:var(--yellow);border-color:var(--yellow);color:#141414}
.cbtn.done{background:#5fd483;border-color:#5fd483;color:#141414}
.due{display:inline-block;font-size:11px;font-weight:800;white-space:nowrap;
  padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.14);color:#f1f0e8}
.due.late{background:#f5be0b;color:#141414}
.ago{display:block;font-size:11px;opacity:.6}
/* A shut office dims its own clock. Keyed off a class, not a column number -
   the two tables put Their time in different positions. */
.mtab tr.shut .tzcell{opacity:.45}
.fbar{margin-bottom:16px}
.fpills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.fpill{display:inline-block;background:transparent;border:2px solid var(--ink);
  border-radius:999px;padding:7px 15px;font-size:13px;font-weight:700;
  cursor:pointer;color:var(--ink);font-family:var(--body);text-decoration:none}
.fpill b{opacity:.65;margin-left:3px}
.fpill.on{background:var(--yellow);border-color:var(--yellow);color:#141414}
.frow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.frow .binput{padding:9px 12px;font-size:14px}
.fsearch{min-width:280px;flex:1 1 280px}
.bulkbar{display:none;gap:8px;flex-wrap:wrap;align-items:center;
  background:#0d0d0d;border:3px solid var(--ink);border-radius:12px;
  padding:10px 14px;margin-bottom:12px;position:sticky;top:8px;z-index:20}
.bulkbar.on{display:flex}
.bcount{color:#fff;font-weight:700;font-size:14px;margin-right:4px}
.bcount b{color:var(--yellow);font-size:17px}
.bulkbar .bsel{padding:7px 10px;font-size:13px;min-width:150px}
.bsm{padding:7px 13px;font-size:12px;box-shadow:2px 2px 0 var(--ink)}