/* ══ The bridge: the pages' own class names, drawn the kit's way ═════════════

   Every office page was built from the same copy of the same classes — .btn
   .btn-p .btn-s .btn-sm, .badge .b-*, .tbar .sbox .fsel .mf-btn, .page-title,
   table/thead/td/tr.lr, .mo .mo-box .mbox .mh .mt .mx — and each page restyles
   them a little differently. This sheet is linked AFTER a page's own <style>,
   so these rules win ties, and restyles those names to the rules in ui.css:
   one face, 48px rows, colour only for state, facts quiet, nothing glows.

   It is a bridge, not a home: as a page is rewritten to .ui-* classes its
   rules here stop matching anything, and when the last page has crossed the
   file goes. Nothing in here invents a token — every value is a var() from
   ui.css. */

/* ── Type: the terminal look is gone ───────────────────────────────────── */
body { font-family: var(--font); }
body .page-title, body .page-head h1, body h1.title { font-family: var(--font); font-weight: 700; font-size: 20px; letter-spacing: 0; }
body .page-count { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--tx3); background: transparent; border: 0; padding: 0; font-variant-numeric: tabular-nums; }

/* ── Tables: a 40px header of quiet labels, 48px rows ──────────────────── */
body table thead th { height: 40px; padding: 0 12px; font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--tx3); background: var(--s1); border-bottom: 1px solid var(--b1); }
body .twrap > table thead th { padding: 0 12px; }
body table tbody td, body .twrap > table tbody td { height: var(--row); padding: 0 12px; font-size: 13px; color: var(--tx2); border-bottom: 1px solid var(--b1); font-variant-numeric: tabular-nums; }
body td.tp { color: var(--tx1); font-weight: 700; font-size: 14px; }
body td.tm { font-size: 13px; color: var(--tx2); }
body tr.lr:hover td { background: var(--s1); }
body tr.lr.active td { background: var(--s2) !important; }
body tr.lr.active td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
body tr.lr.overdue td:first-child { border-left: 0; box-shadow: inset 3px 0 0 var(--bad); }
body tr.lr.transferred td:first-child { border-left: 0; box-shadow: inset 3px 0 0 var(--warn); }
body tr.lr.bookback-hot td:first-child, body tr.lr.conv-ai-row td:first-child { border-left: 0; box-shadow: inset 3px 0 0 var(--ai); animation: none; }
body tr.lr.h2h-row td:first-child { border-left: 0; box-shadow: inset 3px 0 0 var(--warn); }
body tr.lr.bookback-hot, body tr.lr.conv-ai-row, body tr.lr.h2h-row, body tr.lr.transferred { background: transparent; animation: none; }
body tr.lr.conv-ai-row:hover, body tr.lr.h2h-row:hover { background: transparent; }
body td.empty { text-align: center; color: var(--tx3); padding: 40px 12px; }

/* ── Pills: state gets a dot and a soft ground; the words stay the text colour ── */
body .badge { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--muted-soft); color: var(--tx1); font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; border: 0; box-shadow: none; text-shadow: none; white-space: nowrap; }
body .badge::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--dot, var(--tx3)); flex-shrink: 0; }
/* leads */
body .b-fresh    { --dot: var(--good); background: var(--good-soft); }
body .b-nys      { --dot: var(--warn); background: var(--warn-soft); }
body .b-fu       { --dot: var(--warn); background: var(--warn-soft); }
body .b-consult  { --dot: var(--info); background: var(--info-soft); }
body .b-ai-re    { --dot: var(--ai);   background: var(--ai-soft); }
body .b-conv-ai  { --dot: var(--ai);   background: var(--ai-soft); border: 0; }
body .b-conv     { background: var(--good); color: #08130C; font-weight: 700; }
body .b-conv::before { display: none; }
body .b-irrel, body .b-irr { --dot: var(--tx3); background: var(--muted-soft); color: var(--tx2); }
/* priority */
body .b-hi  { --dot: var(--bad);  background: var(--bad-soft); }
body .b-med { --dot: var(--warn); background: var(--warn-soft); }
body .b-lo  { --dot: var(--tx3);  background: var(--muted-soft); color: var(--tx2); border: 0; }
/* jobs */
body .b-submitted, body .st-submitted { --dot: var(--info); background: var(--info-soft); }
body .b-inprogress, body .st-inprogress, body .st-in-progress { --dot: var(--warn); background: var(--warn-soft); }
body .b-deposit, body .st-deposit { --dot: var(--ai); background: var(--ai-soft); }
body .b-pending, body .st-pending { --dot: var(--tx3); background: var(--muted-soft); color: var(--tx2); }
body .b-done, body .st-done { background: var(--good); color: #08130C; font-weight: 700; }
body .b-done::before, body .st-done::before { display: none; }
body .b-cancelled, body .st-cancelled { background: var(--bad); color: #fff; font-weight: 700; }
body .b-cancelled::before, body .st-cancelled::before { display: none; }
/* facts — office, timezone, source — are quiet chips */
body .badge[class*="off-"] { background: transparent; border: 1px solid var(--b2); color: var(--tx2); }
body .badge[class*="off-"]::before { display: none; }
body .badge.quiet, body .chip-quiet { background: transparent !important; border: 1px solid var(--b2) !important; color: var(--tx2) !important; font-size: 12px !important; }
body .badge.quiet::before, body .chip-quiet::before { display: none; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
body .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r); font-family: var(--font); font-size: 13px; font-weight: 600; background: var(--s3); color: var(--tx1); border: 1px solid var(--b2); box-shadow: none; text-shadow: none; }
body .btn:hover { background: var(--b1); border-color: var(--b2); }
body .btn.btn-p { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
body .btn.btn-p:hover { background: var(--acc2); border-color: var(--acc2); }
/* the yellow button some pages used for "Create new" is the primary */
body .btn.btn-y { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); font-weight: 600; }
body .btn.btn-y:hover { background: var(--acc2); border-color: var(--acc2); }
body .btn.btn-s { background: transparent; color: var(--tx1); border-color: var(--b2); }
body .btn.btn-s:hover { background: var(--s2); }
body .btn.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
body .btn.btn-d, body .btn.btn-danger { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
/* Claim is the one thing to do on a Fresh row, so it wears the primary and a soft ring: as an outline it sat level with every quiet control beside it */
body .claim-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r); background: var(--acc); color: var(--acc-ink); border: 1px solid var(--acc); font-family: var(--font); font-size: 12.5px; font-weight: 600; box-shadow: 0 0 0 3px var(--adim); text-shadow: none; animation: none; }
body .claim-btn:hover { background: var(--acc2); border-color: var(--acc2); box-shadow: 0 0 0 4px var(--adim); }
body .claim-btn:active { transform: translateY(1px); }
body .claimed-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--muted-soft); color: var(--tx1); font-size: 12px; font-weight: 600; border: 0; }
body .unclaim-btn { font-family: var(--font); }

/* ── Toolbar: search, filters, selects ─────────────────────────────────── */
@media (min-width: 769px) { body .tbar { gap: 10px; padding: 12px 20px; background: var(--bg); border-bottom: 1px solid var(--b1); } }
body .sbox { height: 36px; padding: 0 12px; background: var(--s2); border: 1px solid var(--b1); border-radius: var(--r); }
body .sbox:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--adim); }
body .sbox input { font-family: var(--font); font-size: 13px; }
@media (min-width: 769px) { body .sbox input { width: 220px; } }
body .fsel, body .mf-btn { height: 36px; padding: 0 12px; border-radius: var(--r); background: var(--s2); border: 1px solid var(--b1); color: var(--tx1); font-family: var(--font); font-size: 13px; font-weight: 600; }
body .mf-btn.active { background: var(--adim); border-color: var(--acc); color: var(--tx1); }
body .role-badge, body .role-badge[class*="role-"], body .topbar-role { display: inline-flex; text-transform: capitalize; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; background: transparent; border: 1px solid var(--b2); color: var(--tx2); box-shadow: none; text-shadow: none; font-family: var(--font); font-weight: 600; letter-spacing: 0; }

/* ── Modals ─────────────────────────────────────────────────────────────── */
body .mo-box, body .mbox { background: var(--s2); border: 1px solid var(--b2); border-radius: 12px; box-shadow: var(--shadow); font-family: var(--font); }
body .mh { padding: 14px 16px; border-bottom: 1px solid var(--b1); }
body .mt { font-family: var(--font); font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--tx1); }
body .mx { width: 30px; height: 30px; border-radius: var(--r); color: var(--tx3); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
body .mx:hover { background: var(--s3); color: var(--tx1); }

/* ── Due: the action pills the office acts on breathe (see ui.css) ──────── */
body .nyst.ov, body .dep-overdue, body .fu-overdue, body .ip-overdue, body .task-overdue, body .find-ctr-btn, body .unassigned-flag, body tr.date-divider .dd-attn, body .tk-attn { animation: ui-breathe 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body .nyst.ov, body .dep-overdue, body .fu-overdue, body .ip-overdue, body .task-overdue, body .find-ctr-btn, body .unassigned-flag, body tr.date-divider .dd-attn, body .tk-attn { animation: none; } }

/* ── Nothing glows ──────────────────────────────────────────────────────── */
body [class*="glow"], body .pulse, body .blink { animation: none !important; box-shadow: none !important; text-shadow: none !important; }

/* ── Inbox panels: each module inline-styled its filter row as 10px caps ── */
body [id$="-filters"] button, body .sms-panel .sms-filters button { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600; border-radius: var(--r) !important; padding: 4px 10px !important; }
body [id$="-filters"] input[type="text"], body [id$="-search-input"] { font-size: 12.5px !important; border-radius: var(--r) !important; padding-top: 7px !important; padding-bottom: 7px !important; }
body [id$="-filters"] button { white-space: nowrap; }

/* ── Day mode (2026-10-02): inline colours written for a dark ground ────
   The pages' <style> sheets are rewritten by /shared/theme.js; these are
   the style="" attributes, which a sheet can only reach by matching the
   text. Text colours only ("color:" — a background colour of the same hue
   is left alone: the [style*] match on "color:#x" also catches
   "background-color:#x", where a darker word on that ground still reads). */
[data-theme="day"] [style*="color:#FBBF24" i],
[data-theme="day"] [style*="color: #FBBF24" i],
[data-theme="day"] [style*="color:#F59E0B" i],
[data-theme="day"] [style*="color: #F59E0B" i],
[data-theme="day"] [style*="color:#FCD34D" i],
[data-theme="day"] [style*="color: #FCD34D" i],
[data-theme="day"] [style*="color:#FDE68A" i],
[data-theme="day"] [style*="color: #FDE68A" i],
[data-theme="day"] [style*="color:#FB923C" i],
[data-theme="day"] [style*="color: #FB923C" i] { color: var(--warn) !important; }
[data-theme="day"] [style*="color:#A78BFA" i],
[data-theme="day"] [style*="color: #A78BFA" i],
[data-theme="day"] [style*="color:#C084FC" i],
[data-theme="day"] [style*="color: #C084FC" i],
[data-theme="day"] [style*="color:#C4B5FD" i],
[data-theme="day"] [style*="color: #C4B5FD" i],
[data-theme="day"] [style*="color:#8B5CF6" i],
[data-theme="day"] [style*="color: #8B5CF6" i] { color: var(--ai) !important; }
[data-theme="day"] [style*="color:#60A5FA" i],
[data-theme="day"] [style*="color: #60A5FA" i],
[data-theme="day"] [style*="color:#22D3EE" i],
[data-theme="day"] [style*="color: #22D3EE" i],
[data-theme="day"] [style*="color:#93C5FD" i],
[data-theme="day"] [style*="color: #93C5FD" i],
[data-theme="day"] [style*="color:#06B6D4" i],
[data-theme="day"] [style*="color: #06B6D4" i],
[data-theme="day"] [style*="color:#38BDF8" i],
[data-theme="day"] [style*="color: #38BDF8" i],
[data-theme="day"] [style*="color:#5EE6CE" i],
[data-theme="day"] [style*="color: #5EE6CE" i],
[data-theme="day"] [style*="color:#7FAAFF" i],
[data-theme="day"] [style*="color: #7FAAFF" i] { color: var(--info) !important; }
[data-theme="day"] [style*="color:#F87171" i],
[data-theme="day"] [style*="color: #F87171" i],
[data-theme="day"] [style*="color:#FCA5A5" i],
[data-theme="day"] [style*="color: #FCA5A5" i],
[data-theme="day"] [style*="color:#FF7A7A" i],
[data-theme="day"] [style*="color: #FF7A7A" i],
[data-theme="day"] [style*="color:#FECDD3" i],
[data-theme="day"] [style*="color: #FECDD3" i] { color: var(--bad) !important; }
[data-theme="day"] [style*="color:#10B981" i],
[data-theme="day"] [style*="color: #10B981" i],
[data-theme="day"] [style*="color:#34D399" i],
[data-theme="day"] [style*="color: #34D399" i],
[data-theme="day"] [style*="color:#4ADE80" i],
[data-theme="day"] [style*="color: #4ADE80" i],
[data-theme="day"] [style*="color:#7BE399" i],
[data-theme="day"] [style*="color: #7BE399" i] { color: var(--good) !important; }
[data-theme="day"] [style*="color:#E8ECF4" i],
[data-theme="day"] [style*="color: #E8ECF4" i],
[data-theme="day"] [style*="color:#EAEDF5" i],
[data-theme="day"] [style*="color: #EAEDF5" i],
[data-theme="day"] [style*="color:#E2E8F0" i],
[data-theme="day"] [style*="color: #E2E8F0" i] { color: var(--tx1) !important; }
[data-theme="day"] [style*="color:#9AA4B8" i],
[data-theme="day"] [style*="color: #9AA4B8" i],
[data-theme="day"] [style*="color:#9AA3B8" i],
[data-theme="day"] [style*="color: #9AA3B8" i],
[data-theme="day"] [style*="color:#94A3B8" i],
[data-theme="day"] [style*="color: #94A3B8" i],
[data-theme="day"] [style*="color:#C9CCD3" i],
[data-theme="day"] [style*="color: #C9CCD3" i] { color: var(--tx2) !important; }
/* A closed drawer sits off the right edge with its shadow still showing on white. */
[data-theme="day"] .panel-drawer:not(.open), [data-theme="day"] .ql-drawer:not(.open), [data-theme="day"] .fin-side:not(.open) { box-shadow: none !important; }
[data-theme="day"] .panel-drawer.open, [data-theme="day"] .ql-drawer.open, [data-theme="day"] .fin-side.open, [data-theme="day"] .detail.over-map { box-shadow: -12px 0 32px rgba(18,22,32,.14) !important; }

/* ── Day mode: around the Google maps (2026-10-02) ───────────────────────
   The maps themselves turn light through GDQTheme.trackMap; these are the
   pieces the pages draw over and around them, and Google's address
   suggestions dropdown, all written for night. */
[data-theme="day"] .ctr-map-wrap, [data-theme="day"] .sa-map-wrap, [data-theme="day"] #j-map { background: var(--s3) !important; }
[data-theme="day"] .ctr-legend, [data-theme="day"] .area-edit-banner, [data-theme="day"] #ctr-addr-search-box {
  background: var(--s1) !important; border-color: var(--b2) !important; box-shadow: var(--shadow) !important; color: var(--tx2) !important; }
[data-theme="day"] #ctr-addr-search-box input { color: var(--tx1) !important; }
[data-theme="day"] .pac-container { background: var(--s1) !important; border-color: var(--b2) !important; box-shadow: var(--shadow) !important; }
[data-theme="day"] .pac-item { color: var(--tx2) !important; border-top-color: var(--b1) !important; }
[data-theme="day"] .pac-item:hover, [data-theme="day"] .pac-item-selected { background: var(--s3) !important; }
[data-theme="day"] .pac-item-query { color: var(--tx1) !important; }
[data-theme="day"] .pac-matched { color: var(--acc) !important; }
[data-theme="day"] .pac-icon { filter: none !important; }
/* Google's info bubbles: the pages paint their content with the tokens;
   the bubble itself stays Google's white by day. */
[data-theme="day"] .gm-style .gm-style-iw-c, [data-theme="day"] .gm-style .gm-style-iw-d { background: #fff !important; color: var(--tx1) !important; }
[data-theme="day"] .gm-style .gm-style-iw-tc::after { background: #fff !important; }