/* Cobalt HUD styles, split from docs/AutoTrans.html (visual reference). Demo-only rules removed with their markup. */
:root {
  /* Refined Cobalt (docs/design/SCHEDULE_HUD_VISUAL_SPEC.md §3). Flat light ground, navy chrome, colour only for positions and status. */
  --bg: #eef1f7;
  --bg-card: #ffffff;
  --bg-sunken: #f6f8fc;
  --chrome: #0b1120;
  --chrome-2: #131b30;
  --chrome-line: #1c2740;
  --chrome-text: #c0cbe2;
  --chrome-mute: #8aa0c8;
  --ink: #0e1526;
  --ink-soft: #414f6e;
  --ink-mute: #8793ad;
  --ink-faint: #a7b1c6;
  --line: #edf0f6;
  --line-strong: #e3e8f1;
  --line-input: #d5dce9;
  --accent: #2f6bff;
  --accent-2: #22d3ee;
  --accent-deep: #1d4fd7;
  --accent-soft: #eef2fb;
  --good: #0c9d61;
  --good-soft: #d6f4e6;
  --good-dot: #22c55e;
  --warn: #d97a08;
  --warn-soft: #fdeed3;
  --warn-ink: #8a4b00;
  --warn-paper: #fff7e8;
  --bad: #e5484d;
  --bad-soft: #fde3e4;
  --info: #0aa5c2;
  --info-soft: #d9f3f8;
  --info-ink: #0a6f85;
  --pos-csa: #2f6bff;
  --pos-css: #0aa5c2;
  --pos-admin: #7c5cff;
  --pos-care: #d97a08;
  --pos-content: #db2777;
  --pos-seo: #0c9d61;
  --pos-other: #64748b;
  --shadow-sm: 0 1px 2px rgba(14,21,38,0.04);
  --shadow-md: 0 12px 32px rgba(14,21,38,0.12);
  --radius: 9px;
  --radius-lg: 14px;
  --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --font-display: 'Jost', 'Century Gothic', 'Futura', sans-serif;
  --font-body: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Menlo, Consolas, monospace;
  /* Theme surfaces: every theme redefines these; components never name a colour directly. */
  --surface: #ffffff;
  --hover: #f3f7ff;
  --selected: #e9f0ff;
  --ink-on-accent: #ffffff;
  --page-glow-1: #dde7fb;
  --page-glow-2: #e3eefb;
  --hero-from: #ffffff; --hero-mid: #f1f5ff; --hero-to: #e6edfd;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: var(--font-body); color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  background: radial-gradient(1100px 480px at 75% -12%, var(--page-glow-1) 0%, transparent 62%),
              radial-gradient(900px 420px at -8% 108%, var(--page-glow-2) 0%, transparent 55%),
              var(--bg); }
button { font-family: var(--font-body); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

.h1 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- Arch layout ---------- */
.hud { display: grid; height: 100vh; width: 100vw; grid-template-columns: 210px 1fr 290px; grid-template-rows: auto 1fr auto; transition: grid-template-columns 240ms cubic-bezier(0.4,0,0.2,1); }

/* When an order is open, the side menu and chat rail minimize so the order gets the canvas */
.hud.order-focus { grid-template-columns: 46px 1fr 46px; }
.hud.order-focus.menu-open { grid-template-columns: 210px 1fr 46px; }
.hud.order-focus.chat-open { grid-template-columns: 46px 1fr 290px; }
.hud.order-focus.menu-open.chat-open { grid-template-columns: 210px 1fr 290px; }

.rail-toggle { display: none; width: 30px; height: 30px; flex: none; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
  font-size: 14px; line-height: 1; cursor: pointer; transition: background 130ms, color 130ms, transform 130ms; }
.rail-toggle:hover { background: var(--bg-sunken); color: var(--ink); }
.hud.order-focus .rail-toggle { display: flex; }

/* collapsed left menu */
.hud.order-focus .leftmenu { padding: 12px 7px; align-items: center; }
.hud.order-focus:not(.menu-open) .leftmenu > a { display: none; }
.hud.order-focus.menu-open .leftmenu { align-items: stretch; padding: 14px 12px; }
.hud.order-focus.menu-open .rt-menu { align-self: flex-end; margin-bottom: 8px; transform: rotate(180deg); }

/* collapsed chat rail */
.hud.order-focus .chat { align-items: center; }
.hud.order-focus:not(.chat-open) .chat > .chat-head,
.hud.order-focus:not(.chat-open) .chat > .chat-body,
.hud.order-focus:not(.chat-open) .chat > .chat-foot { display: none; }
.hud.order-focus .rt-chat { margin-top: 13px; }
.hud.order-focus.chat-open .chat { align-items: stretch; }
.hud.order-focus.chat-open .rt-chat { align-self: flex-start; margin: 12px 0 0 12px; transform: rotate(180deg); }

/* Top chrome: deep ink, tabs truly centered */
.topmenu { grid-column: 1 / -1; background: linear-gradient(180deg, #101a32, var(--chrome)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--chrome-line); }
.brand { display: flex; align-items: center; gap: 10px; justify-self: start; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; box-shadow: 0 0 16px rgba(47,107,255,0.45); }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: #fff; }

.tabs { display: flex; align-items: center; gap: 3px; justify-self: center; }
.tab { display: flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; color: var(--chrome-text); font-size: 13px; font-weight: 500; padding: 8px 13px; border-radius: 8px; white-space: nowrap; position: relative; transition: background 140ms, color 140ms; }
.tab:hover { background: rgba(255,255,255,0.06); color: #e6ebf5; }
.tab.active { background: var(--chrome-2); color: #fff; box-shadow: inset 0 0 0 1px var(--chrome-line); }
.tab.active::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; background: var(--grad); border-radius: 2px; box-shadow: 0 0 8px rgba(34,211,238,0.55); }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff4d5c; color: #fff; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(255,77,92,0.18); }
.badge.empty { display: none; }
.tab-plus { width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--chrome-line); background: var(--chrome-2); color: var(--chrome-text); font-size: 12px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tab-plus:hover { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 10px rgba(47,107,255,0.5); }

.agent-bubble { justify-self: end; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 0 0 2px var(--chrome), 0 0 0 3.5px rgba(47,107,255,0.5); transition: box-shadow 140ms; }
.agent-bubble:hover { box-shadow: 0 0 0 2px var(--chrome), 0 0 0 3.5px var(--accent-2), 0 0 18px rgba(34,211,238,0.5); }

/* Left menu */
.leftmenu { background: rgba(255,255,255,0.72); backdrop-filter: blur(6px); border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; }
.leftmenu a { position: relative; padding: 10px 13px; margin-bottom: 8px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); text-decoration: none; cursor: pointer; transition: background 130ms, color 130ms, box-shadow 130ms; }
.leftmenu a:not(:last-child)::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: -4.5px; height: 1px; background: rgba(14,21,38,0.07); }
.leftmenu a:hover { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.leftmenu a.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }

/* Center */
.center { overflow: auto; padding: 26px 30px 42px; }
.pane { display: none; max-width: 1280px; margin: 0 auto; }
.pane.active { display: block; animation: rise 220ms ease; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Chat rail */
.chat { background: rgba(255,255,255,0.72); backdrop-filter: blur(6px); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.chat-head { padding: 15px 18px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.chat-head::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 8px rgba(34,211,238,0.6); }
.chat-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; color: var(--ink-mute); font-size: 13px; text-align: center; }
.chat-foot { padding: 12px; border-top: 1px solid var(--line); }
.chat-input { width: 100%; padding: 10px 13px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-family: var(--font-body); font-size: 13px; }

/* ---------- Bottom chrome: DialPad call strip ---------- */
.bottombar { grid-column: 1 / -1; background: linear-gradient(0deg, #101a32, var(--chrome)); border-top: 1px solid var(--chrome-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 20px; min-height: 58px; }
.call-status { display: flex; align-items: center; gap: 13px; background: none; border: 1px solid transparent; border-radius: 10px; padding: 4px 10px 4px 6px; margin-left: -6px; cursor: pointer; text-align: left; font-family: var(--font-body); }
.call-status:hover { border-color: var(--chrome-line); background: var(--chrome-2); }
.call-text { display: flex; flex-direction: column; }
.call-dot { width: 10px; height: 10px; border-radius: 50%; background: #3d4a6b; flex-shrink: 0; }
.call-dot.incoming { background: #ff4d5c; animation: pulse 1s infinite; }
.call-dot.active { background: #2ee59d; box-shadow: 0 0 10px rgba(46,229,157,0.6); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,77,92,0.5); } 50% { box-shadow: 0 0 0 8px rgba(255,77,92,0); } }
.call-primary { display: block; color: #fff; font-size: 13px; font-weight: 600; }
.call-secondary { display: block; color: var(--chrome-text); font-size: 11.5px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.call-actions { display: flex; align-items: center; gap: 8px; }

/* Incoming-call popup (bottom corner) */
.call-popup { position: fixed; right: 18px; bottom: 72px; width: 330px; z-index: 60; background: var(--surface); border-radius: 18px; box-shadow: 0 20px 56px rgba(14,21,38,0.28), 0 0 0 1px var(--line), 0 0 0 4px rgba(255,77,92,0.16); padding: 18px 20px 16px; display: none; }
.call-popup.open { display: block; animation: popup-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.1); }
@keyframes popup-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.call-popup-head { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: #ff4d5c; margin-bottom: 9px; }
.call-popup-head::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #ff4d5c; animation: pulse 1s infinite; }
.call-popup-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.call-popup-number { font-family: var(--font-mono); font-size: 14px; color: var(--ink-soft); margin: 3px 0 2px; font-variant-numeric: tabular-nums; }
.call-popup-match { font-size: 12.5px; color: var(--ink-mute); margin-bottom: 14px; }
.call-popup-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.call-popup-actions .btn { padding: 11px 0; font-size: 14px; font-weight: 700; border-radius: 11px; }

/* ---------- Shared components ---------- */
.btn { padding: 7px 15px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 130ms, box-shadow 130ms, border-color 130ms; }
.btn:hover { background: var(--bg-sunken); }
.btn.accent { background: linear-gradient(180deg, #3d78ff, var(--accent)); border-color: var(--accent-deep); color: #fff; box-shadow: 0 2px 10px rgba(47,107,255,0.35); }
.btn.accent:hover { background: var(--accent-deep); }
.btn.answer { background: linear-gradient(180deg, #12b874, var(--good)); border-color: var(--good); color: #fff; box-shadow: 0 2px 10px rgba(12,157,97,0.35); }
.btn.decline { background: linear-gradient(180deg, #f05a5f, var(--bad)); border-color: var(--bad); color: #fff; box-shadow: 0 2px 10px rgba(229,72,77,0.3); }
.bottombar .btn { background: var(--chrome-2); border-color: var(--chrome-line); color: var(--chrome-text); }
.bottombar .btn:hover { color: #fff; border-color: #33456e; }
.bottombar .btn.answer { background: linear-gradient(180deg, #12b874, var(--good)); border-color: var(--good); color: #fff; }
.bottombar .btn.decline { background: linear-gradient(180deg, #f05a5f, var(--bad)); border-color: var(--bad); color: #fff; }

.card { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 22px; }
.stat { position: relative; overflow: hidden; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 16px 18px 15px; }
.stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); font-weight: 700; margin-bottom: 5px; }
.stat-value { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--bg-sunken); color: var(--ink-soft); white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(14,21,38,0.05); }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.accent { background: var(--accent-soft); color: var(--accent-deep); }

.empty { text-align: center; padding: 58px 24px; color: var(--ink-mute); background: linear-gradient(180deg, #fff, #fafbfe); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }

.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px 26px; border-radius: var(--radius-lg); background: linear-gradient(115deg, #ffffff 0%, #eef3ff 62%, #e5ecfd 100%); box-shadow: var(--shadow-md); margin-bottom: 4px; }
.hero-sub { margin: 4px 0 0; color: var(--ink-mute); font-size: 13.5px; }
.hero-date { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ink-soft); background: var(--surface); padding: 8px 15px; border-radius: 999px; box-shadow: var(--shadow-sm); white-space: nowrap; }

.section-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-top: 6px; letter-spacing: -0.01em; }
.section-title::before { content: ''; width: 4px; height: 17px; border-radius: 3px; background: var(--grad); box-shadow: 0 0 8px rgba(47,107,255,0.4); }

/* ---------- Data grid (shared by Orders + Past VAD) ---------- */
.grid-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 12px; }
.grid-hint { font-size: 12px; color: var(--ink-mute); }
.grid-wrap { overflow: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--bg-card); }
table.grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; min-width: 100%; }
.grid th { position: relative; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-mute); font-weight: 700; padding: 11px 13px; border-bottom: 1px solid var(--line-strong); background: linear-gradient(180deg, #fbfcff, #f4f7fd); user-select: none; cursor: grab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid th.drag-over { background: var(--accent-soft); }
.grid th .sort-ind, .grid th .filt-ind { color: var(--accent); margin-left: 4px; }
.grid th .grip { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; }
.grid th .grip:hover { background: var(--accent-soft); }
.grid td { padding: 10px 13px; border-bottom: 1px solid var(--line); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid tr:hover td { background: var(--hover); }
.grid td.mono { font-size: 12px; }
/* Price-check ownership: your own orders flagged red (thin outline around the whole entry) */
.grid tr.row-mine td { background: var(--bad-soft); box-shadow: inset 0 1px 0 var(--bad), inset 0 -1px 0 var(--bad); }
.grid tr.row-mine td:first-child { box-shadow: inset 0 1px 0 var(--bad), inset 0 -1px 0 var(--bad), inset 1px 0 0 var(--bad); }
.grid tr.row-mine td:last-child { box-shadow: inset 0 1px 0 var(--bad), inset 0 -1px 0 var(--bad), inset -1px 0 0 var(--bad); }
.grid tr.row-mine:hover td { background: #fbd5d7; }

/* Pending Price Check banner (order detail): solid red bar */
#pane-order .pc-banner { display: none; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px;
  background: var(--bad); color: #fff; border-radius: 10px; padding: 12px 16px;
  box-shadow: 0 2px 10px rgba(229,72,77,0.35); }
#pane-order .pc-banner.show { display: flex; }
#pane-order .pc-banner-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.3); animation: pcpulse 1.6s ease-in-out infinite; }
#pane-order .pc-banner-text { font-weight: 700; font-size: 13.5px; letter-spacing: 0.02em; }
@keyframes pcpulse { 0%,100% { box-shadow: 0 0 0 3px rgba(255,255,255,0.3); } 50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
.days-past { color: var(--bad); font-weight: 700; }

/* Context menu + column picker */
.ctx { position: fixed; z-index: 50; min-width: 212px; background: var(--surface); border-radius: 13px; box-shadow: 0 16px 44px rgba(14,21,38,0.18), 0 0 0 1px var(--line); padding: 6px; display: none; }
.ctx.open { display: block; animation: rise 140ms ease; }
.ctx-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-mute); font-weight: 700; padding: 7px 10px 4px; }
.ctx-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; }
.ctx-item:hover { background: var(--accent-soft); color: var(--accent-deep); }
.ctx-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.ctx-filter { padding: 6px 10px; display: flex; flex-direction: column; gap: 6px; }
.ctx-filter select, .ctx-filter input { padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 8px; font-family: var(--font-body); font-size: 12.5px; background: var(--surface); }
.colpicker { position: fixed; z-index: 50; width: 242px; max-height: 340px; overflow: auto; background: var(--surface); border-radius: 13px; box-shadow: 0 16px 44px rgba(14,21,38,0.18), 0 0 0 1px var(--line); padding: 8px; display: none; }
.colpicker.open { display: block; animation: rise 140ms ease; }
.colpicker label { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.colpicker label:hover { background: var(--accent-soft); }
.colpicker input { accent-color: var(--accent); }

/* Tasks */
.task-add-row { display: flex; gap: 8px; margin: 18px 0 14px; }
.task-add-input { flex: 1; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-family: var(--font-body); font-size: 13px; }
.task-add-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,0.18); }

/* ---------- New Quote form ---------- */
.qform { max-width: 760px; margin: 18px auto 0; display: flex; flex-direction: column; gap: 14px; }
.qcard { padding: 18px 20px 20px; }
.qcard-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.qcard-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.qf { display: flex; flex-direction: column; gap: 5px; position: relative; }
.qf.full { grid-column: 1 / -1; }
.qf label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.qf input, .qf select { padding: 10px 13px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-family: var(--font-body); font-size: 13.5px; color: var(--ink); width: 100%; }
.qf input:focus, .qf select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,0.18); }
.qf input::placeholder { color: var(--ink-mute); }
.qf .hint { font-size: 11.5px; color: var(--ink-mute); }

/* typeahead dropdown */
.sugg { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; background: var(--surface); border-radius: 11px;
  box-shadow: var(--shadow-md); border: 1px solid var(--line); max-height: 218px; overflow: auto; display: none; }
.sugg.open { display: block; }
.sugg-item { padding: 9px 13px; font-size: 13px; cursor: pointer; display: flex; align-items: baseline; gap: 8px; }
.sugg-item:hover, .sugg-item.hot { background: var(--accent-soft); }
.sugg-item .s2 { color: var(--ink-mute); font-size: 12px; margin-left: auto; }
.sugg-empty { padding: 10px 13px; font-size: 12.5px; color: var(--ink-mute); }

/* vehicle blocks */
.vwrap { display: flex; flex-direction: column; gap: 12px; }
.vcard { border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 16px 16px; background: var(--bg-sunken); position: relative; }
.vcard-head { display: flex; align-items: center; margin-bottom: 12px; }
.vcard-num { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--accent-deep); background: var(--accent-soft); border-radius: 999px; padding: 2px 11px; }
.vcard-remove { margin-left: auto; border: none; background: none; color: var(--ink-mute); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 7px; }
.vcard-remove:hover { background: var(--bad-soft); color: var(--bad); }
.vgrid { display: grid; grid-template-columns: 90px 1fr 1fr 130px; gap: 12px 14px; }
.vgrid .qf.cond { grid-column: 1 / -1; }
.addveh { align-self: flex-start; border: 1px dashed var(--line-strong); background: none; color: var(--accent-deep); font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: 11px; cursor: pointer; transition: background 130ms, border-color 130ms; }
.addveh:hover { background: var(--accent-soft); border-color: var(--accent); }

/* condition segmented toggle */
.seg { display: inline-flex; background: var(--bg-sunken); border-radius: 10px; padding: 3px; gap: 3px; width: max-content; }
.seg button { border: none; background: none; padding: 7px 16px; border-radius: 8px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg button.on.bad { color: var(--bad); }

.qform-foot { display: flex; align-items: center; gap: 10px; }
.qform-foot .spacer { flex: 1; }

/* ---------- Search ---------- */
.topsearch { width: 165px; margin-left: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--chrome-line);
  background: var(--chrome-2); color: #fff; font-family: var(--font-body); font-size: 12.5px; transition: width 160ms, border-color 140ms, box-shadow 140ms; }
.topsearch::placeholder { color: var(--chrome-text); }
.topsearch:focus { outline: none; width: 210px; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,0.28); }

.search-bar { display: flex; gap: 10px; margin: 16px auto 0; max-width: 860px; }
.search-bar input { flex: 1; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface);
  font-family: var(--font-body); font-size: 14.5px; box-shadow: var(--shadow-sm); }
.search-bar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,0.18); }
.search-bar .btn { height: auto; }
.search-bar .btn.adv-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }

.advpanel { display: none; max-width: 860px; margin: 12px auto 0; padding: 16px 18px 18px; }
.advpanel.open { display: block; }
.advpanel .qgrid { grid-template-columns: repeat(3, 1fr); }
.adv-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.adv-foot input { padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line-strong); font-family: var(--font-body); font-size: 12.5px; width: 180px; }
.adv-foot input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,0.18); }
.saved-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.saved-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.schip { display: inline-flex; align-items: center; gap: 7px; background: var(--accent-soft); color: var(--accent-deep);
  font-size: 12.5px; font-weight: 600; padding: 5px 7px 5px 12px; border-radius: 999px; cursor: pointer; }
.schip:hover { background: #d2e0ff; }
.schip .x { font-size: 11px; opacity: 0.65; padding: 1px 5px; border-radius: 50%; }
.schip .x:hover { background: rgba(229,72,77,0.18); color: var(--bad); opacity: 1; }

.stabs { display: flex; gap: 4px; margin: 18px auto 12px; border-bottom: 2px solid var(--line); max-width: 860px; }
.stab { border: none; background: none; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  padding: 9px 16px 11px; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 7px; }
.stab:hover { color: var(--ink); }
.stab.active { color: var(--accent-deep); }
.stab.active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -2px; height: 2px; background: var(--grad); border-radius: 2px; }
.stab .cnt { min-width: 19px; padding: 0 6px; height: 18px; border-radius: 9px; background: var(--bg-sunken); color: var(--ink-soft);
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.stab.active .cnt { background: var(--accent-soft); color: var(--accent-deep); }
.search-results-wrap { max-width: 860px; margin: 0 auto; overflow: hidden; }
.sresult-empty { padding: 34px 20px; text-align: center; color: var(--ink-mute); font-size: 13px; }
#pane-search .h1 { max-width: 860px; margin: 0 auto; }
#pane-newquote .h1 { max-width: 760px; margin: 0 auto; }
.task-row { display: flex; align-items: center; gap: 12px; padding: 12px 17px; border-bottom: 1px solid var(--line); }
.task-row:last-child { border-bottom: none; }
.task-check { width: 19px; height: 19px; border-radius: 6px; cursor: pointer; border: 1.5px solid var(--line-strong); background: var(--surface); flex-shrink: 0; position: relative; transition: background 130ms, border-color 130ms, box-shadow 130ms; }
.task-check:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,0.14); }
.task-check.done { background: var(--good); border-color: var(--good); }
.task-check.done::after { content: '✓'; color: #fff; font-size: 12px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.task-title.done { text-decoration: line-through; color: var(--ink-mute); }
.task-meta { margin-left: auto; font-size: 11.5px; color: var(--ink-mute); }

.plain-table { width: 100%; border-collapse: collapse; }
.plain-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-mute); font-weight: 700; padding: 11px 15px; border-bottom: 1px solid var(--line-strong); background: linear-gradient(180deg, #fbfcff, #f4f7fd); }
.plain-table td { padding: 10px 15px; border-bottom: 1px solid var(--line); font-size: 13px; }
.plain-table tr:last-child td { border-bottom: none; }
#pane-order {
  /* Tokens of the order-page mockup (docs/reference/AutoTrans.html #pane-order). Scoped here on Oct 19:
     as a second :root they overrode the Refined Cobalt tokens above for the whole HUD. */
  /* the colour tokens are inherited from the theme (they used to be hard-coded light values here, which blocked
     Midnight, Harbor and Ember on this one page). Only the page's own geometry and shadows stay scoped. */
  --shadow-sm:0 1px 2px rgba(14,21,38,.06),0 0 0 1px var(--line);
  --shadow-md:0 1px 2px rgba(14,21,38,.05),0 10px 28px rgba(14,21,38,.08),0 0 0 1px var(--line);
  --rl:16px; --grad:linear-gradient(90deg,var(--accent),var(--accent-2));
  --fd: var(--font-display); --fb: var(--font-body); --fm: var(--font-body);
}
#pane-order .mono{font-family:var(--fm);font-size:12px;font-variant-numeric:tabular-nums}

/* ============ HIGHLIGHTS PANEL (Salesforce-style) ============ */
#pane-order .hl{background:var(--bg-card);border-radius:var(--rl);box-shadow:var(--shadow-md);padding:18px 22px 16px;margin-bottom:14px}
#pane-order .hl-top{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start}
#pane-order .hl-id{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#pane-order .hl-num{font-family:var(--fm);font-size:23px;font-weight:500}
#pane-order .cust{position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:600;font-size:15.5px}
#pane-order .cust .car{font-size:10px;color:var(--ink-mute);transition:transform 150ms}
#pane-order .cust.open .car{transform:rotate(180deg)}
#pane-order .cust-panel{display:none;position:absolute;z-index:40;top:30px;left:0;width:330px;background: var(--surface);border-radius:14px;box-shadow:0 16px 44px rgba(14,21,38,.2),0 0 0 1px var(--line);padding:16px 18px;font-weight:400}
#pane-order .cust.open .cust-panel{display:block}
#pane-order .cust-panel .row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
#pane-order .cust-panel .row:last-child{border-bottom:none}
#pane-order .cust-panel .row .k{color:var(--ink-mute)}
#pane-order .cust-panel .row .v{text-align:right;font-weight:500}
#pane-order .cust-panel a{color:var(--accent);font-weight:600;text-decoration:none;font-size:12.5px}
#pane-order .chip{display:inline-flex;align-items:center;gap:6px;background: var(--bg-sunken);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--ink-soft);height:29px}
#pane-order .chip b{color:var(--ink);font-weight:600}
#pane-order .chip.ok{background:var(--good-soft);border-color:#bfe8d4;color:var(--good)}
#pane-order .chip.ok b{color:var(--good)}
#pane-order .chip.alert{background:var(--bad-soft);border-color:#f5c2c4;color:var(--bad)}
#pane-order .chip.alert b{color:var(--bad)}
#pane-order .chip.pending{opacity:.45}
#pane-order .actions{display:flex;gap:8px;align-items:center}
#pane-order .btn{padding:8px 15px;border-radius:9px;border:1px solid var(--line-strong);background: var(--surface);color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer;height:35px}
#pane-order .btn:hover{background:var(--bg-sunken)}
#pane-order .btn.accent{background:linear-gradient(180deg,#3d78ff,var(--accent));border-color:var(--accent-deep);color:#fff;box-shadow:0 2px 10px rgba(47,107,255,.35)}
#pane-order .btn.ghost{border-color:transparent;background:none;color:var(--ink-soft)}
#pane-order .btn.sm{height:28px;padding:3px 11px;font-size:12px}
#pane-order .contact-wrap{position:relative}
#pane-order .cmenu{display:none;position:absolute;z-index:40;top:41px;right:0;min-width:150px;background: var(--surface);border-radius:12px;box-shadow:0 16px 44px rgba(14,21,38,.2),0 0 0 1px var(--line);padding:6px}
#pane-order .contact-wrap.open .cmenu{display:block}
#pane-order .cmenu button{display:block;width:100%;text-align:left;border:none;background:none;padding:8px 11px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;color:var(--ink)}
#pane-order .cmenu button:hover{background:var(--accent-soft);color:var(--accent-deep)}

/* key-field strip (compact layout fields) */
#pane-order .hl-fields{display:flex;gap:26px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line);flex-wrap:wrap}
#pane-order .hf .k{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mute);font-weight:700;margin-bottom:2px}
#pane-order .hf .v{font-size:13.5px;font-weight:600}
#pane-order .hf .v.mono{font-size:12.5px}
#pane-order .hf .v.bad{color:var(--bad)}

#pane-order .pill{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--bg-sunken);color:var(--ink-soft)}
#pane-order .pill.good{background:var(--good-soft);color:var(--good)}
#pane-order .pill.warn{background:var(--warn-soft);color:var(--warn)}
#pane-order .pill.info{background:var(--info-soft);color:var(--info)}
#pane-order .pill.bad{background:var(--bad-soft);color:var(--bad)}

/* ============ PATH (Salesforce chevrons) ============ */
#pane-order .pathbar{display:flex;align-items:center;gap:12px;margin-top:14px}
#pane-order .path{display:flex;flex:1;gap:3px}
#pane-order .pstep{flex:1;position:relative;height:30px;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:600;color:var(--ink-soft);background:var(--bg-sunken);
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%);}
#pane-order .pstep:first-child{clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);border-radius:6px 0 0 6px}
#pane-order .pstep:last-child{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%);border-radius:0 6px 6px 0}
#pane-order .pstep.done{background:var(--accent);color:#fff}
#pane-order .pstep.now{background:linear-gradient(90deg,var(--accent),#1ab6d8);color:#fff;box-shadow:0 0 12px rgba(34,211,238,.45)}
#pane-order .pstep .pdate{font-family:var(--fm);font-weight:400;font-size:10px;opacity:.85;margin-left:5px}

/* ============ 3-COLUMN BODY (HubSpot-style) ============ */
#pane-order .body3{display:grid;grid-template-columns:280px minmax(0,1fr) 280px;gap:16px;align-items:start}

#pane-order .card{background:var(--bg-card);border-radius:var(--rl);box-shadow:var(--shadow-md);margin-bottom:12px;overflow:visible}
#pane-order .card-head{display:flex;align-items:center;gap:9px;padding:13px 16px;cursor:pointer;user-select:none}
#pane-order .card-head:hover{background: var(--bg-sunken);border-radius:var(--rl)}
#pane-order .card-title{font-family:var(--fd);font-size:14px;font-weight:600}
#pane-order .card-meta{color:var(--ink-mute);font-size:11.5px;margin-left:2px}
#pane-order .card-right{margin-left:auto;display:flex;align-items:center;gap:8px}
#pane-order .card-chev{color:var(--ink-mute);transition:transform 160ms;font-size:11px}
#pane-order .card.open .card-chev{transform:rotate(90deg)}
#pane-order .card-body{display:none;padding:2px 16px 15px}
#pane-order .card.open .card-body{display:block}

/* left rail */
#pane-order .quickacts{display:flex;justify-content:space-between;padding:13px 16px 14px}
#pane-order .qa{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;font-size:10.5px;color:var(--ink-soft);font-weight:600;border:none;background:none}
#pane-order .qa .ic{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;font-size:15px;transition:background 130ms}
#pane-order .qa:hover .ic{background:var(--accent);color:#fff}
#pane-order .prop{display:flex;flex-direction:column;padding:7px 0;border-bottom:1px solid var(--line)}
#pane-order .prop:last-child{border-bottom:none}
#pane-order .prop .k{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-mute);font-weight:700}
#pane-order .prop .v{font-size:13px;font-weight:600;margin-top:1px}
#pane-order .prop .v.empty{color:var(--ink-mute);font-weight:400}
#pane-order .datechips{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}

/* middle tabs */
#pane-order .midtabs{display:flex;gap:2px;background:var(--bg-sunken);border-radius:11px;padding:3px;margin-bottom:12px;width:max-content}
#pane-order .midtab{border:none;background:none;padding:7px 16px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer}
#pane-order .midtab.active{background: var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(14,21,38,.08),0 0 0 1px var(--line)}
#pane-order .midpane{display:none} #pane-order .midpane.active{display:block}

#pane-order .cols2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
#pane-order .mini{background: var(--bg-sunken);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
#pane-order .mini-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-mute);font-weight:700;margin-bottom:4px}
#pane-order .mini b{font-size:13px}
#pane-order .mini .sub{color:var(--ink-soft);font-size:12px}

#pane-order table{width:100%;border-collapse:collapse;margin-top:10px}
#pane-order th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-mute);font-weight:700;padding:7px 9px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
#pane-order td{padding:8px 9px;border-bottom:1px solid var(--line);font-size:12.5px;vertical-align:top}
#pane-order tr:last-child td{border-bottom:none}
#pane-order td.num,#pane-order th.num,.cp-table td.num,.cp-table th.num{font-family:var(--fm, var(--font-body));font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
#pane-order th.num,.cp-table th.num{font-family:var(--fb, var(--font-body));font-size:10px}
#pane-order .vnotes td{background: var(--bg-sunken)}
#pane-order .vnotes textarea{width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:8px 11px;font:12px var(--fb);color:var(--ink);resize:vertical;min-height:50px;background:#fff}
#pane-order .linkish{color:var(--accent);font-weight:600;cursor:pointer;white-space:nowrap;font-size:12.5px}
#pane-order .ledger-sum{display:flex;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:2px solid var(--accent-soft);font-size:13px}
#pane-order .ledger-sum b{font-family:var(--fm);font-weight:500;color:var(--bad)}

/* composer (Salesforce/HubSpot style) */
#pane-order .composer{background: var(--bg-sunken);border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;margin-bottom:14px}
#pane-order .ctabs{display:flex;gap:2px;margin-bottom:9px}
#pane-order .ctab{border:none;background:none;padding:6px 13px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
#pane-order .ctab.active{background: var(--surface);color:var(--accent-deep);box-shadow:0 1px 2px rgba(14,21,38,.08),0 0 0 1px var(--line)}
#pane-order .composer textarea{width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:9px 12px;font:13px var(--fb);min-height:52px;resize:vertical;background:#fff}
#pane-order .composer-foot{display:flex;justify-content:flex-end;margin-top:8px}

/* timeline */
#pane-order .tfilters{display:flex;gap:7px;margin:2px 0 13px;flex-wrap:wrap}
#pane-order .tfilter{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line-strong);background: var(--surface);color:var(--ink-soft);cursor:pointer}
#pane-order .tfilter.active{background:var(--ink);border-color:var(--ink);color:#fff}
#pane-order .tl{position:relative;padding-left:19px}
#pane-order .tl::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
#pane-order .tl-item{position:relative;padding:0 0 15px}
#pane-order .tl-item::before{content:'';position:absolute;left:-19px;top:5px;width:12px;height:12px;border-radius:50%;background: var(--surface);border:3px solid var(--accent)}
#pane-order .tl-item[data-t="comm"]::before{border-color:var(--info)} #pane-order .tl-item[data-t="note"]::before{border-color:var(--ink-mute)}
#pane-order .tl-item[data-t="field"]::before{border-color:var(--warn)}
#pane-order .tl-head{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--ink-mute)}
#pane-order .tl-head b{color:var(--ink);font-size:13px}
#pane-order .tl-body{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
#pane-order .tl-item.hide{display:none}

/* right rail association cards */
#pane-order .assoc .prop{border-bottom:none;padding:4px 0}
#pane-order .assoc .open-link{display:inline-block;margin-top:8px}
#pane-order .body3{grid-template-columns:280px minmax(0,1fr) 280px}   /* spec §2: equal rails */
#pane-order .card-body{overflow-x:auto}
#pane-order .back{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;margin-bottom:12px}


/* ---------- Shell additions (Phase 0) ---------- */
[hidden] { display: none !important; }
.agent-wrap { justify-self: end; position: relative; }
.agent-menu { position: absolute; right: 0; top: 44px; z-index: 70; min-width: 230px; background: var(--surface); border-radius: 13px;
  box-shadow: 0 16px 44px rgba(14,21,38,0.18), 0 0 0 1px var(--line); padding: 8px; display: none; }
.agent-wrap.open .agent-menu { display: block; animation: rise 140ms ease; }
.agent-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.agent-who b { display: block; font-size: 13.5px; }
.agent-who span { font-size: 12px; color: var(--ink-mute); }
.agent-menu a, .agent-menu button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 8px 10px;
  border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; text-decoration: none; font-family: var(--font-body); }
.agent-menu a:hover, .agent-menu button:hover { background: var(--accent-soft); color: var(--accent-deep); }
/* Dialpad's own window is about 440 x 760; the panel matches it and can grow to the viewport. */
.dialer-panel { position: fixed; left: 18px; bottom: 72px; z-index: 55; width: 440px; height: min(780px, calc(100vh - 96px));
  background: var(--surface); border-radius: 16px; box-shadow: 0 20px 56px rgba(14,21,38,0.28), 0 0 0 1px var(--line); overflow: hidden;
  display: none; flex-direction: column; }
.dialer-panel.open { display: flex; }
.dialer-panel.max { width: min(640px, calc(100vw - 36px)); height: calc(100vh - 96px); }
.dialer-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; background: var(--chrome); color: #fff; font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.dialer-head .spacer { flex: 1; }
.dialer-head button { background: var(--chrome-2); border: 1px solid var(--chrome-line); color: var(--chrome-text); border-radius: 7px; padding: 4px 9px; font-size: 12px; cursor: pointer; font-family: var(--font-body); }
.dialer-head button:hover { color: #fff; }
.dialer-panel iframe { width: 100%; flex: 1; min-height: 0; border: 0; }
.shell-error { max-width: 760px; margin: 0 auto 16px; padding: 12px 16px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.chat-body a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* Login */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { width: 360px; padding: 28px 30px 30px; }
.login-card .brand { margin-bottom: 20px; }
.login-card .brand-name { color: var(--ink); }
.login-card .qf { margin-bottom: 12px; }
.login-card .btn { width: 100%; padding: 11px 0; font-size: 14px; }
.login-error { color: var(--bad); font-size: 12.5px; margin-bottom: 12px; }

/* ---------- New Quote with the rate calculator (rates step 7) ---------- */
#pane-newquote .nq-head, #pane-newquote .nq-results, #pane-newquote .nq-notes { max-width: 760px; margin: 0 auto; }
#pane-newquote .nq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
#pane-newquote .nq-vgrid { display: grid; grid-template-columns: minmax(170px, 0.7fr) 1fr 1fr; gap: 12px 14px; }
#pane-newquote .qf select { appearance: none; -webkit-appearance: none; padding: 10px 13px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--surface); font-family: var(--font-body); font-size: 13.5px; color: var(--ink); width: 100%; }
#pane-newquote .qf input:disabled { background: var(--bg-sunken); color: var(--ink-mute); }
#pane-newquote .nq-results { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
#pane-newquote .nq-rate-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
#pane-newquote .nq-rate { padding: 16px 18px 15px; border-radius: 12px; background: var(--bg-sunken); box-shadow: 0 0 0 1px var(--line); }
#pane-newquote .nq-amount { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#pane-newquote .nq-amount.struck { font-size: 20px; color: var(--ink-mute); text-decoration: line-through; }
#pane-newquote .nq-sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
#pane-newquote .nq-sub.mute { color: var(--ink-mute); margin-top: 0; }
#pane-newquote .nq-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; font-size: 13px; }
#pane-newquote .nq-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
#pane-newquote .nq-row span:first-child { color: var(--ink-mute); }
#pane-newquote .nq-row span:last-child { font-weight: 500; text-align: right; }
#pane-newquote .nq-message { font-size: 14px; color: var(--ink-soft); }
#pane-newquote .nq-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; margin-top: 14px; border-top: 1px solid var(--line); }
#pane-newquote .nq-log { font-size: 11.5px; color: var(--ink-mute); }
#pane-newquote .nq-actions { display: flex; gap: 8px; }
#pane-newquote .nq-override { display: grid; grid-template-columns: 170px 1fr auto auto; gap: 10px; align-items: end; margin-top: 14px; }
#pane-newquote .nq-override-done { margin-top: 14px; padding: 10px 13px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 600; }
#pane-newquote .nq-error { grid-column: 1 / -1; color: var(--bad); font-size: 12.5px; font-weight: 600; }
#pane-newquote .nq-notes { display: flex; gap: 12px; margin-top: 16px; font-size: 11.5px; color: var(--ink-mute); line-height: 1.5; }
#pane-newquote .nq-notes > div { flex: 1; padding: 10px 13px; background: var(--surface); border-radius: 9px; box-shadow: var(--shadow-sm); }
#pane-newquote .nq-notes b { color: var(--ink-soft); font-weight: 600; }

/* ---- Dialpad through the HUD: click-to-call, caller context, Communications pane ---- */
.dial-form { display: flex; align-items: center; gap: 6px; }
.bottombar .dial-form input { width: 150px; background: var(--chrome-2); border: 1px solid var(--chrome-line); color: #fff; border-radius: 9px; padding: 7px 10px; font-family: var(--font-mono); font-size: 12.5px; }
.bottombar .dial-form input::placeholder { color: var(--chrome-text); }
.call-popup-context { font-size: 12.5px; color: var(--ink-soft); margin: -8px 0 14px; min-height: 1em; }
.comms-actions { display: flex; align-items: center; gap: 8px; }
.comms-actions input { width: 220px; }
.sms-form { display: grid; grid-template-columns: 220px 1fr auto; gap: 12px; align-items: end; }
.sms-form .nq-error, .sms-form .sms-done { grid-column: 1 / -1; }
.sms-done { font-size: 12.5px; color: var(--good); }
.comms-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.comms-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 12px 16px; }
.comms-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.comms-meta { grid-column: 1; display: flex; gap: 14px; font-size: 12px; color: var(--ink-mute); flex-wrap: wrap; }
.comms-row-actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.comms-row .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.comms-row .mute { color: var(--ink-mute); font-size: 12px; }
.comms-row a { color: var(--accent); }

/* ---- Phase 1: lead card, lists, home grid, queue ---- */
.queue-badge { background: #ff4d5c; color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; margin-right: 10px; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 18px; }
.task-row, .queue-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.queue-row input { width: 140px; }
.lead-card { margin-top: 18px; }
.lead-head { display: flex; align-items: flex-start; gap: 14px; }
.lead-head > div:first-child { flex: 1; }
.lead-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.lead-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.lead-meta, .lead-price-lines { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; }
.lead-price { margin-top: 12px; }
.lead-form-status { margin-top: 10px; font-size: 12.5px; }
.lead-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.lead-row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lead-row-actions input, .lead-row-actions select { max-width: 170px; }
.lead-row-actions .check { font-size: 12px; color: var(--ink-mute); }
.lead-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.lead-row { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; cursor: pointer; font-family: var(--font-body); font-size: 13px; color: var(--ink); }
.lead-row:hover { border-color: var(--accent); }
.lead-row .mono { font-family: var(--font-mono); } .lead-row .mute { color: var(--ink-mute); font-size: 12px; }

/* ---- Phase 2: carrier card, blocks, lists ---- */
.carrier-card { margin-top: 12px; }
.carrier-blocks { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.block-line { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; background: var(--bad-soft); color: var(--bad); }
.block-line.manual { background: #1b1b1b; color: #fff; }
.block-line .mute { color: inherit; opacity: 0.7; }
.carrier-card .ok { color: var(--good); font-weight: 600; } .carrier-card .warn, .lead-meta .warn { color: #b45309; font-weight: 600; }
.list-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.list-row .pill.bad { background: #1b1b1b; color: #fff; } .list-row .pill.warn { background: #fde68a; color: #92400e; }
.list-row .mono { font-family: var(--font-mono); } .list-row .mute { color: var(--ink-mute); font-size: 12px; }

/* Phase 3: order lists and the order page (3ab, 3gh, 3gl3). */
.order-list .order-row { display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line, #2a3348); border-radius:8px; margin-bottom:6px; cursor:pointer; }
.order-list .order-row:hover { background: var(--bg-sunken); }
.order-page { margin-top: 16px; }
.order-fields { display:grid; grid-template-columns: 1fr; gap:8px; margin: 12px 0; }
.chevrons { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.chev { padding:4px 10px; border-radius:4px; background: rgba(255,255,255,0.06); color: var(--mute, #8a94a6); font-size:12px; }
.chev.done { background: rgba(80,160,255,0.18); color: inherit; }
.chev.current { background: var(--accent, #3b82f6); color:#fff; font-weight:700; }
.chev.exception { background:#b45309; }
.readiness { margin:10px 0; padding:10px; border-radius:8px; border:1px solid var(--line, #2a3348); }
.readiness.ready b { color:#16a34a; } .readiness.blocked b { color:#dc2626; }
.offer-line, .doc-line, .claim-line { display:flex; gap:10px; align-items:center; padding:6px 0; }

/* Scheduling: My Schedule, Team, Builder, Approvals, Punches, the bottom-bar clock. */
.schedule-tabs { display:flex; gap:6px; }
.schedule-tabs .badge { margin-left:6px; background:#dc2626; color:#fff; border-radius:10px; padding:1px 7px; font-size:11px; }
.schedule-mine { display:grid; grid-template-columns: 1fr 280px; gap:16px; }
.schedule-rail { border-left:1px solid var(--line); padding-left:16px; }
.shift-line, .request-line, .balance-line, .approval-line, .punch-line { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); }
.swatch { width:10px; height:10px; border-radius:3px; display:inline-block; }
.timeoff-form { display:grid; gap:6px; margin:10px 0; }
.schedule-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.schedule-grid { border-collapse:collapse; width:100%; font-size:12px; }
.schedule-grid th, .schedule-grid td { border:1px solid var(--line); padding:4px; vertical-align:top; min-width:86px; }
.schedule-grid th { background: var(--bg-sunken); text-align:left; }
.schedule-grid td.cell { height:44px; cursor:pointer; }
.schedule-grid td.off { background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0,0,0,0.05) 6px, rgba(0,0,0,0.05) 12px); }
.schedule-grid td.over { outline: 2px dashed var(--accent); }
.shift-chip { border:2px solid var(--accent); border-radius:6px; padding:2px 6px; margin:2px 0; background: var(--surface); cursor:grab; }
.shift-chip.warn { background:#fff7e6; }
.palette { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; align-items:center; }
.template-chip { border:2px solid var(--accent); border-radius:999px; padding:3px 10px; background: var(--surface); cursor:pointer; font-size:12px; }
.template-chip.selected { background: var(--accent-soft); font-weight:700; }
.builder-status { display:flex; gap:10px; align-items:center; margin:6px 0; }
.coverage-strip, .warnings-panel { margin-top:12px; padding:10px; border:1px solid var(--line); border-radius:8px; }
.coverage-line { display:flex; gap:12px; }
.clock-big { font-size:20px; padding:22px 40px; border-radius:14px; }
.clock-status { margin:10px 0; color: var(--ink-mute); }
.bottombar .clock-btn { margin-left:12px; display:flex; gap:8px; align-items:center; }
.clock-dot { width:8px; height:8px; border-radius:50%; background:#8793ad; display:inline-block; }
.bottombar .clock-btn.on .clock-dot { background:#16a34a; box-shadow:0 0 6px #16a34a; }

.call-dot.dnd { background:#f59e0b; box-shadow:0 0 6px #f59e0b; }

/* Scheduling v2: My Schedule list, month grid, builder layout, availability shading, coverage strip, Users pane, scheduling-only logins. */
.hud.scheduling-only .leftmenu a:not([data-pane="schedule"]):not([data-pane="punches"]) { display:none; }
.hud.scheduling-only .topmenu .tabs, .hud.scheduling-only .queue-badge, .hud.scheduling-only #btn-dialer, .hud.scheduling-only .rightrail { visibility:hidden; }
.today-card { padding:14px 16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:12px; }
.today-shift { font-size:18px; font-weight:600; }
.week-list .day-row { display:grid; grid-template-columns:110px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); align-items:center; }
.day-cell .shift-line { border:none; padding:2px 0; }
.off-block { display:inline-block; background:#e5e7eb; color:#374151; border-radius:6px; padding:2px 8px; font-size:12px; }
.shift-chip { display:inline-block; border:1px solid; border-left-width:4px; border-radius:6px; padding:2px 6px; margin:1px 0; font-size:12px; background: var(--surface); cursor:default; }
.shift-chip.offered { outline:2px dashed var(--warn); }
.shift-chip.warn { box-shadow: inset 0 0 0 2px var(--warn); }
.small { font-size:11px; }
.timeoff-form, .availability-form { display:flex; flex-direction:column; gap:6px; margin:8px 0 14px; }
.month-grid td { width:14%; height:64px; }
.month-grid td.outside { opacity:0.35; }
.builder-layout { display:grid; grid-template-columns: 1fr 230px; gap:14px; align-items:start; }
.builder-rail { position:sticky; top:8px; }
.builder-grid td.cell.focus { outline:2px solid var(--accent); outline-offset:-2px; }
.builder-grid td.unavailable { background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 5px, #e5e7eb 5px, #e5e7eb 10px); }
.builder-grid td.pending-avail { background: #fff7e0; }
.builder-grid td.window { background: var(--bg-sunken); }
.builder-grid th.gap { color: var(--bad); }
.builder-filters { display:inline-flex; gap:6px; align-items:center; margin-left:auto; }
.week-tabs { display:inline-flex; gap:4px; }
.week-tabs .tab { color: var(--ink-soft); padding:4px 10px; font-size:12px; }
.week-tabs .tab.active { background: var(--accent-soft); color: var(--accent-deep); box-shadow:none; }
.week-tabs .tab.active::after { display:none; }
.palette { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.template-chip { text-align:left; border:1px solid; border-left-width:4px; border-radius:6px; padding:5px 8px; cursor:grab; font-size:12px; }
.template-chip.selected { box-shadow: 0 0 0 2px var(--accent); }
.coverage-strip { margin-top:10px; font-size:12px; }
.coverage-line { display:grid; grid-template-columns:100px 1fr; gap:8px; align-items:center; padding:1px 0; }
.coverage-cells { display:flex; gap:2px; }
.coverage-cell { min-width:22px; text-align:center; background: var(--bg-sunken); border-radius:3px; font-family: var(--font-mono); }
.coverage-cell.gap { background: var(--bad-soft); color: var(--bad); font-weight:700; }
.warnings-panel .block-line.gap { color: var(--bad); }
.chip-menu { position:absolute; z-index:5; background: var(--surface); border:1px solid var(--line-strong); border-radius:8px; box-shadow: var(--shadow-md); display:flex; flex-direction:column; padding:4px; }
.builder-grid td.cell { position:relative; }
.export-links { display:inline-flex; gap:4px; }
.btn.sm { padding:3px 9px; font-size:12px; }
.users-table { width:100%; border-collapse:collapse; font-size:12.5px; margin-top:12px; }
.users-table th, .users-table td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:middle; }
.users-table tr.inactive { opacity:0.55; }
.users-table tr.error td { color: var(--bad); }
.users-table tr.match td { color: var(--ink-mute); }
.row-actions { white-space:nowrap; }
.row-actions .btn { margin-right:4px; }
.user-form { margin:10px 0 18px; }
.invite-box { padding:12px 14px; margin:10px 0; display:flex; flex-direction:column; gap:6px; }
.invite-box input { width:100%; }
.options-panel { padding:14px 16px; margin:10px 0; }
.options-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:10px 0; }
.option-line { display:flex; gap:6px; align-items:center; padding:4px 0; border-bottom:1px solid var(--line); }
.option-line.inactive { opacity:0.55; }
.option-add { display:flex; gap:6px; margin-top:8px; }
.form-error { color: var(--bad); background: var(--bad-soft); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: 12.5px; }
/* Week view with several departments, month overview, range report. */
.dept-chips { display:inline-flex; gap:6px; flex-wrap:wrap; }
.dept-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; border:1px solid var(--line-strong); font-size:12px; cursor:pointer; background: var(--surface); }
.dept-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.week-nav { display:inline-flex; gap:6px; align-items:center; }
.week-nav b { min-width:190px; text-align:center; }
.builder-grid tr.dept-row th { background: var(--chrome); color:#fff; text-align:left; padding:6px 8px; }
.builder-grid tr.dept-row .pill { margin-left:8px; }
.dept-actions { display:inline-flex; gap:4px; flex-wrap:wrap; margin-left:12px; vertical-align:middle; }
.dept-actions .btn { background: var(--chrome-2); border-color: var(--chrome-line); color: var(--chrome-text); }
.dept-actions .btn.accent { color:#fff; }
.builder-layout.readonly { grid-template-columns: 1fr; }
.overview-line { font-size:11px; line-height:1.3; margin-top:2px; }
.range-table tr.total td { font-weight:700; border-top:2px solid var(--line-strong); }
.modal-overlay { position:fixed; inset:0; background:rgba(14,21,38,0.45); display:flex; align-items:flex-start; justify-content:center; padding:48px 16px; z-index:50; overflow:auto; }
.modal-card { width:min(760px, 100%); padding:16px 20px 20px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.modal-close { font-size:16px; line-height:1; }
/* Week grid: square cells, everything centered; department dropdown; department toolbar above the column labels. */
.builder-grid { table-layout: fixed; }
.builder-grid th:first-child { width: 150px; text-align:left; }
.builder-grid th, .builder-grid td.cell { text-align:center; vertical-align:middle; }
.builder-grid td.cell { height: 104px; padding: 4px; }
.builder-grid td.cell .shift-chip { display:block; margin: 2px auto; max-width: 96%; text-align:center; }
.builder-grid td.cell .off-block { display:inline-block; }
.builder-grid tr.dept-row th:first-child { width:auto; }
.dept-dropdown { position: relative; display:inline-block; }
.dept-menu { position:absolute; top: 110%; left: 0; z-index: 20; background: var(--surface); border:1px solid var(--line-strong); border-radius:10px; box-shadow: var(--shadow-md); padding:8px 10px; min-width: 200px; display:flex; flex-direction:column; gap:4px; }
.dept-quick { display:flex; gap:6px; margin-bottom:4px; }
.dept-option { display:flex; gap:6px; align-items:center; font-size:12.5px; white-space:nowrap; cursor:pointer; }
.dept-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin: 6px 0 8px; }
.dept-toolbar .dept-actions { margin-left:0; }
.dept-toolbar .dept-actions .btn { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.dept-toolbar .dept-actions .btn.accent { background: linear-gradient(180deg, #3d78ff, var(--accent)); border-color: var(--accent-deep); color:#fff; }
.shift-card { width: min(560px, 100%); }
.week-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin: 6px 0 6px; }
.week-status { display:flex; gap:14px; flex-wrap:wrap; margin: 0 0 8px; font-size:12px; }
.week-status .status-item { display:inline-flex; gap:6px; align-items:center; }
.builder-grid tr.open-row th { font-style: italic; }
/* Headings and grey text used across the Schedule and Users panes (previously unstyled there). */
.h3 { font-family: var(--font-display); font-size: 14px; font-weight: 600; margin: 14px 0 6px; letter-spacing: -0.01em; }
.mute { color: var(--ink-mute); font-size: 12px; }


/* ===== Refined Cobalt (docs/design/SCHEDULE_HUD_VISUAL_SPEC.md). Overrides the Cobalt rules above; keep this block last. ===== */
/* §2 type */
html, body { background: var(--bg); font-family: var(--font-body); font-variant-numeric: tabular-nums; line-height: 1.45; }
h1, .h1, .tabs .tab, .brand, .brand-name, .schedule-tabs .tab { font-family: var(--font-display); }
.h1 { font-size: 22px; letter-spacing: -0.01em; }
.h2, .h3 { font-family: var(--font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin: 16px 0 8px; }
.mute { color: var(--ink-mute); font-size: 12px; }
.small { font-size: 11.5px; }
.mono { font-family: var(--font-body); }
.qf label { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; }
/* §4 frame: no washes, no blur, no fade */
.hud { grid-template-rows: 56px 1fr 54px; }
.topmenu { background: var(--chrome); border-bottom: 1px solid var(--chrome-line); }
.brand-mark { width: 26px; height: 26px; box-shadow: none; }
.brand-name { font-weight: 600; }
.topmenu .tab { font-size: 13px; font-weight: 500; padding: 7px 12px; }
.topmenu .tab.active { background: var(--chrome-2); color: #fff; box-shadow: none; }
.topmenu .tab.active::after { display: none; }
.leftmenu { background: var(--bg-card); backdrop-filter: none; border-right: 1px solid var(--line-strong); padding: 16px 12px; }
.leftmenu a { padding: 8px 12px; margin-bottom: 4px; }
.leftmenu a::after { display: none; }
.leftmenu a:hover { background: var(--bg-sunken); box-shadow: none; }
.leftmenu a.active { background: var(--accent-soft); color: var(--ink); font-weight: 600; box-shadow: none; }
.leftmenu a[data-pane="punches"] { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line-strong); border-radius: 0 0 9px 9px; }
.center { padding: 22px 28px 36px; }
.pane.active { animation: none; }
.chat { background: var(--bg-card); backdrop-filter: none; border-left: 1px solid var(--line-strong); }
.chat-head::before { box-shadow: none; }
.bottombar { background: var(--chrome); border-top: 1px solid var(--chrome-line); min-height: 54px; padding: 7px 20px; }
.bottombar .btn { background: var(--chrome-2); border: 1px solid var(--chrome-line); color: var(--chrome-text); }
.bottombar .clock-btn { border-color: var(--good); color: #fff; }
.clock-dot { background: var(--chrome-mute); }
.bottombar .clock-btn.on .clock-dot { background: var(--good-dot); box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
/* §5 controls */
.btn { padding: 6px 11px; border: 1px solid var(--line-input); color: var(--ink-soft); font-size: 12.5px; font-weight: 600; box-shadow: none; }
.btn:hover { background: var(--bg-sunken); }
.btn.accent { background: var(--accent); border-color: var(--accent-deep); color: #fff; box-shadow: 0 1px 2px rgba(47,107,255,0.3); }
.btn.accent:hover { background: var(--accent-deep); }
.btn.answer { background: var(--good); border-color: var(--good); color: #fff; box-shadow: none; }
.btn.decline { background: var(--bad); border-color: var(--bad); color: #fff; box-shadow: none; }
.btn.sm { padding: 5px 11px; font-size: 12px; }
.qf input, .qf select, .schedule-bar input, .schedule-bar select, .week-toolbar input, .week-toolbar select, .timeoff-form input, .timeoff-form select, .availability-form input, .availability-form select, .option-add input, .option-add select {
  padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line-input); font-size: 12.5px; background: var(--surface); font-family: var(--font-body); color: var(--ink); }
.qf input:focus, .qf select:focus, .schedule-bar input:focus, .week-toolbar input:focus, .timeoff-form input:focus, .availability-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,0.18); }
.schedule-tabs { background: var(--bg-sunken); padding: 3px; border-radius: 10px; gap: 2px; }
.schedule-tabs .tab { font-size: 13px; font-weight: 500; color: var(--ink-soft); padding: 6px 12px; border-radius: 8px; background: transparent; box-shadow: none; }
.schedule-tabs .tab:hover { background: rgba(255,255,255,0.6); color: var(--ink); }
.schedule-tabs .tab.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(14,21,38,0.08); }
.schedule-tabs .tab.active::after { display: none; }
.schedule-tabs .badge { background: var(--bad); box-shadow: none; padding: 0 6px; }
.schedule-tabs .badge.soft { background: var(--warn-soft); color: var(--warn-ink); }
.pill { font-size: 11.5px; }
.pill.warn { background: var(--warn-soft); color: var(--warn-ink); }
.pill.info { background: var(--info-soft); color: var(--info-ink); }
.pill.good { background: var(--good-soft); color: var(--good); }
.badge { box-shadow: none; }
.dept-toggle { background: var(--surface); border: 1px solid var(--line-input); border-radius: 9px; padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.dept-toggle .pos-dot { width: 8px; height: 8px; }
.dept-toggle .chev { font-size: 12px; color: var(--ink-mute); }
.week-nav { gap: 10px; }
.week-nav .nav-group { display: inline-flex; align-items: stretch; border: 1px solid var(--line-input); border-radius: 9px; overflow: hidden; background: var(--surface); }
.week-nav .nav-group .btn { border: none; border-radius: 0; width: 32px; padding: 0; justify-content: center; display: inline-flex; align-items: center; }
.week-nav .nav-group b { font-size: 13px; font-weight: 600; min-width: 190px; text-align: center; border-left: 1px solid var(--line-input); border-right: 1px solid var(--line-input); padding: 6px 12px; }
.week-nav .jump-label { font-size: 12px; color: var(--ink-mute); }
.week-status { font-size: 12.5px; }
.week-status b { font-weight: 600; }
.modal-overlay { padding-top: 48px; }
.modal-card { border-radius: 14px; box-shadow: var(--shadow-md); border: 1px solid var(--line-strong); }
.modal-close { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.empty { border: 1px dashed var(--line-input); border-radius: 14px; color: var(--ink-mute); padding: 48px 24px; background: var(--surface); }
.card { border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); border-radius: 14px; }
.nq-error, .form-error { color: var(--bad); background: var(--bad-soft); border-radius: 9px; padding: 8px 12px; font-size: 12.5px; }
/* §6 the grid */
.grid-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; }
.grid-card .grid-scroll { overflow-x: auto; }
.builder-grid { min-width: 980px; border-collapse: collapse; }
.builder-grid th, .builder-grid td { border: none; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.builder-grid th:first-child, .builder-grid td:first-child { border-left: none; }
.builder-grid tr:first-child th { background: var(--bg-sunken); padding: 8px 6px; }
.builder-grid th.employee-head { width: 172px; text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); padding-left: 14px; }
.builder-grid th.day-head .wd { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.builder-grid th.day-head .dt { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.builder-grid th.day-head.today .dt { color: var(--accent); }
.builder-grid td.cell { height: 84px; padding: 4px; vertical-align: middle; }
.builder-grid td.cell.has-warning { background: #fffaf0; }
.builder-grid tr.open-row th, .builder-grid tr.open-row td { background: var(--bg-sunken); height: 46px; }
.builder-grid tr.open-row th { font-style: italic; color: var(--ink-mute); font-weight: 500; }
.builder-grid tr:not(:first-child) th { text-align: left; padding: 6px 10px 6px 12px; background: var(--surface); }
.row-head { display: flex; align-items: center; gap: 10px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; background: color-mix(in srgb, var(--pos) 14%, white); color: var(--pos); }
.row-name { font-size: 12.5px; font-weight: 600; }
.row-sub { font-size: 11px; color: var(--ink-mute); }
.pos-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pos, var(--pos-other)); flex: none; }
.shift-chip { display: block; max-width: 118px; margin: 2px auto; text-align: left; border: 1px solid color-mix(in srgb, var(--pos, var(--pos-other)) 35%, white); background: color-mix(in srgb, var(--pos, var(--pos-other)) 10%, white); border-radius: 8px; padding: 6px 8px; cursor: default; box-shadow: none; }
.shift-chip .chip-name { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink); }
.shift-chip .chip-times { display: block; font-size: 11px; color: var(--ink-soft); margin-left: 13px; }
.shift-chip .chip-flag { display: inline-block; margin: 4px 0 0 13px; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-ink); }
.shift-chip.offered { background: var(--warn-paper); border-color: var(--warn); outline: none; }
.shift-chip.warn { box-shadow: none; }
.shift-chip.open-chip { border: 1px dashed var(--warn); background: var(--warn-paper); color: var(--warn-ink); font-size: 11.5px; font-weight: 600; padding: 6px 8px; text-align: center; }
.cell-block { display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 8px; font-size: 11.5px; font-weight: 600; margin: 0 auto; max-width: 118px; text-align: center; }
.cell-block.timeoff { background: #e6e9f0; color: var(--ink-soft); }
.cell-block.unavailable { background: repeating-linear-gradient(135deg, #e9edf4 0 4px, #f6f8fc 4px 8px); color: var(--ink-mute); }
.cell-block.pending { background: #fff7e0; color: var(--warn-ink); }
.cell-block.window { background: #f3f5f9; color: var(--ink-soft); }
.builder-grid td.off, .builder-grid td.unavailable, .builder-grid td.pending-avail, .builder-grid td.window { background: var(--surface); }
.builder-grid td.cell.focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.builder-grid td.over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.builder-grid tr.dept-row th { background: var(--chrome); color: #fff; font-size: 12px; font-weight: 600; padding: 7px 12px; }
.grid-key { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-soft); }
.grid-key .key-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-mute); }
.grid-key .key-item { display: inline-flex; align-items: center; gap: 6px; }
.grid-key .swatch { width: 14px; height: 10px; border-radius: 3px; }
.grid-key .swatch.offered { background: var(--warn-paper); border: 1px dashed var(--warn); }
.grid-key .swatch.unavailable { background: repeating-linear-gradient(135deg, #e9edf4 0 3px, #f6f8fc 3px 6px); }
.grid-key .swatch.timeoff { background: #e6e9f0; }
.grid-key .swatch.warning { background: var(--warn-soft); border: 1px solid var(--warn); }
/* §7 builder rail */
.builder-layout { gap: 18px; }
.builder-rail { width: 230px; }
.rail-head { display: flex; align-items: baseline; justify-content: space-between; }
.rail-head a { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; cursor: pointer; }
.palette { gap: 6px; }
.template-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px 11px; background: var(--surface); cursor: pointer; font-size: 12.5px; }
.template-chip .t-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); }
.template-chip .t-meta { font-size: 11.5px; color: var(--ink-soft); font-weight: 400; }
.template-chip.selected { background: var(--accent-soft); border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: none; }
.template-chip.custom { border-style: dashed; justify-content: center; color: var(--ink-soft); }
.rail-help { font-size: 11.5px; color: var(--ink-mute); margin: 6px 0 14px; }
.warnings-panel .warn-card { display: block; border: 1px solid #f6dcb0; background: var(--warn-paper); border-radius: 9px; padding: 9px 11px; margin-bottom: 6px; text-decoration: none; color: var(--ink); cursor: pointer; }
.warnings-panel .warn-card .wc-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.warnings-panel .warn-card .wc-head::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.warnings-panel .warn-card .wc-rule { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
/* §8 my schedule */
.today-card { background: var(--chrome); color: #fff; border: none; border-radius: 14px; padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; box-shadow: none; }
.today-card .today-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chrome-mute); }
.today-card .today-time { font-size: 30px; font-weight: 700; line-height: 1.1; margin: 4px 0; }
.today-card .today-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--chrome-text); }
.today-card .today-state { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--chrome-text); }
.today-card .state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chrome-mute); }
.today-card .state-dot.on { background: var(--good-dot); box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
.today-card .today-actions { display: flex; gap: 8px; }
.today-card .btn { padding: 11px 16px; border-radius: 10px; font-size: 13px; }
.today-card .btn.dark { background: var(--chrome-2); border-color: var(--chrome-line); color: #fff; }
.week-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-sm); margin-top: 14px; overflow: hidden; }
.week-card .card-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 18px 8px; }
.week-card .card-head .h3 { margin: 0; }
.week-card .card-head .total { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.week-list .day-row { grid-template-columns: 64px 1fr auto; padding: 12px 18px; border-top: 1px solid var(--line); gap: 14px; }
.week-list .day-row.today { background: #f6f8fd; }
.week-list .day-row.today .wd { color: var(--accent); }
.day-row .date-block .wd { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.day-row .date-block .dt { display: block; font-size: 18px; font-weight: 600; }
.day-row .day-cell { display: flex; flex-direction: column; gap: 6px; }
.day-row .list-chip { display: inline-flex; align-items: center; gap: 8px; }
.day-row .list-chip .chip-name { font-size: 13px; font-weight: 600; }
.day-row .list-chip .chip-times { font-size: 12.5px; color: var(--ink-soft); }
.day-row .list-chip .chip-loc { font-size: 12px; color: var(--ink-mute); }
.day-row .row-actions { display: inline-flex; gap: 6px; align-items: center; }
.day-row .off { color: var(--ink-faint); font-size: 12.5px; }
.day-row .timeoff-block { display: inline-flex; align-items: center; gap: 8px; background: #e6e9f0; color: var(--ink-soft); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; }
.day-row .timeoff-block .state { font-weight: 400; color: var(--ink-mute); }
.schedule-rail { border-left: none; padding-left: 0; }
.schedule-mine { gap: 22px; }
.bal-card { border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; background: var(--surface); }
.bal-card .bal-head { display: flex; justify-content: space-between; align-items: baseline; }
.bal-card .bal-name { font-size: 13px; font-weight: 600; }
.bal-card .bal-hours { font-size: 16px; font-weight: 700; }
.bal-card .bar { height: 6px; border-radius: 3px; background: var(--bg-sunken); margin: 8px 0 6px; overflow: hidden; }
.bal-card .bar span { display: block; height: 100%; background: var(--pos, var(--accent)); border-radius: 3px; }
.bal-card .bal-sub { font-size: 11.5px; color: var(--ink-mute); }
.rail-primary { width: 100%; margin: 6px 0 4px; }
.req-card { border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.req-card .cancel-link { color: var(--bad); background: none; border: none; font-weight: 600; cursor: pointer; font-size: 12px; }
.mini-week { display: grid; grid-template-columns: repeat(7, 30px); gap: 4px; margin: 6px 0; }
.mini-week .mini-cell { height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-strong); }
.mini-week .mini-cell.available { background: var(--good-soft); border-color: transparent; color: var(--good); }
.mini-week .mini-cell.window { background: #f3f5f9; border-color: transparent; }
.mini-week .mini-cell.unavailable { background: repeating-linear-gradient(135deg, #e9edf4 0 3px, #f6f8fc 3px 6px); border-color: transparent; }
.mini-week .mini-cell.pending { background: #fff7e0; border: 1px dashed var(--warn); color: var(--warn-ink); }
.mini-labels { display: grid; grid-template-columns: repeat(7, 30px); gap: 4px; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); text-align: center; }
.mini-key { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--ink-soft); margin: 6px 0 8px; }
.mini-key .swatch { width: 12px; height: 10px; border-radius: 3px; }
.ics-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--accent); text-decoration: none; margin-top: 10px; }
.timeoff-form, .availability-form { gap: 6px; }
/* §9 month, range, users, punches */
.month-grid td { height: 64px; vertical-align: top; text-align: left; padding: 6px; }
.month-grid td .daynum { font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; }
.month-grid td.outside { opacity: 0.35; }
.overview-line { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.users-table th, .range-table th { background: var(--bg-sunken); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); padding: 8px 10px; }
.users-table td, .range-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.range-table tr.total td { font-weight: 600; border-top: 2px solid var(--line-strong); }
.users-table tr.inactive { opacity: 0.55; }
.schedule-grid th { background: var(--bg-sunken); }
.punch-today { margin-bottom: 14px; }
/* column headers white with a cobalt outline; the Open shifts row styled on its own, not like the headers. */
.builder-grid tr:first-child th { background: var(--surface); border-bottom: 2px solid var(--accent); }
.builder-grid th.day-head { box-shadow: inset 0 0 0 1px var(--accent-soft); }
.builder-grid th.day-head.today { background: var(--accent-soft); }
.builder-grid tr.open-row th, .builder-grid tr.open-row td { background: var(--warn-paper); height: 52px; border-bottom: 1px dashed var(--warn); }
.builder-grid tr.open-row th { font-style: normal; color: var(--warn-ink); font-weight: 600; }
.builder-grid tr.open-row th .row-name { color: var(--warn-ink); }
.builder-grid tr.open-row th .row-name::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px dashed var(--warn); margin-right: 8px; vertical-align: middle; }
/* Open shifts row plain white; the cell dividers stay the light hairlines (the black lines were tried and rolled back). */
.builder-grid tr.open-row th, .builder-grid tr.open-row td { background: var(--surface); border-bottom: 1px solid var(--line); }
.builder-grid tr.open-row th { color: var(--ink); font-weight: 600; }
.builder-grid tr.open-row th .row-name { color: var(--ink); }
.builder-grid tr.open-row th .row-name::before { display: none; }
/* Week picker: click the week label for a Monday-start calendar; a whole week is one row. */
.week-label-wrap { position: relative; display: inline-flex; }
.week-nav .nav-group .week-label-btn { border: none; border-left: 1px solid var(--line-input); border-right: 1px solid var(--line-input); border-radius: 0; background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; min-width: 190px; padding: 6px 12px; cursor: pointer; color: var(--ink); }
.week-nav .nav-group .week-label-btn:hover { background: var(--bg-sunken); }
.week-picker { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 30; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-md); padding: 10px 12px 12px; width: 268px; }
.wp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13px; }
.wp-head .btn { width: 28px; padding: 0; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.wp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wp-wd { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); text-align: center; padding: 2px 0 4px; }
.wp-week { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; border-radius: 8px; cursor: pointer; padding: 1px; }
.wp-week:hover { background: var(--accent-soft); }
.wp-week.current { background: var(--accent); }
.wp-week.current .wp-day { color: #fff; }
.wp-week.current .wp-day.outside { color: rgba(255,255,255,0.6); }
.wp-day { text-align: center; font-size: 12.5px; padding: 5px 0; border-radius: 6px; color: var(--ink); }
.wp-day.outside { color: var(--ink-faint); }
.wp-day.today { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.grid-note { text-align: center; color: var(--ink-mute); font-size: 12.5px; padding: 18px 14px; }
.chip-menu { position: fixed; z-index: 60; min-width: 150px; }
.chip-menu .btn { text-align: left; border: none; border-radius: 6px; background: none; }
.chip-menu .btn:hover { background: var(--accent-soft); color: var(--accent-deep); }
/* The × on a builder chip. */
.shift-chip { position: relative; }
.shift-chip .chip-x { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-input); background: var(--surface); color: var(--ink-soft); font-size: 11px; line-height: 1; padding: 0; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(14,21,38,0.12); }
.shift-chip:hover .chip-x, .shift-chip .chip-x:focus { display: inline-flex; }
.shift-chip .chip-x:hover { background: var(--bad); border-color: var(--bad); color: #fff; }
/* the × sits in the upper right corner of the cell, smaller. */
.shift-chip { position: static; }
.builder-grid td.cell { position: relative; }
.shift-chip .chip-x { position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; font-size: 9px; border: none; box-shadow: none; background: transparent; color: var(--ink-mute); }
.builder-grid td.cell:hover .chip-x { display: inline-flex; }
.shift-chip .chip-x:hover { background: var(--bad); color: #fff; }
.cancel-card { width: min(440px, 100%); }
.cancel-card p { margin: 4px 0 8px; font-size: 13px; }
.cancel-reason { width: 100%; border: 1px solid var(--line-input); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 12.5px; resize: vertical; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.list-row.dir-row { cursor: pointer; }
.list-row.dir-row:hover { background: var(--bg-sunken); }
.qcard.fold .fold-title { cursor: pointer; user-select: none; }
.qcard.fold .fold-title::before { content: '\25B8'; display: inline-block; width: 14px; color: var(--ink-mute); }
.qcard.fold.open .fold-title::before { content: '\25BE'; }

/* Carrier page pop-up */
.carrier-modal .modal-card { width: min(1040px, 100%); }
.cp-name { font-size: 20px; margin: 0; }
.cp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.cp-badge { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg-sunken); color: var(--ink-soft); font-family: var(--font-body); }
.cp-badge.good { background: #dcfce7; color: #166534; } .cp-badge.warn { background: #fde68a; color: #92400e; } .cp-badge.bad { background: #fee2e2; color: #991b1b; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin-bottom: 12px; }
.cp-field { display: flex; flex-direction: column; font-size: 13px; } .cp-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); } .cp-value { word-break: break-word; }
.cp-section { margin: 10px 0; } .cp-tabs { margin: 12px 0 8px; } .cp-panel { padding-top: 6px; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; } .cp-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--ink-mute); padding: 4px 6px; border-bottom: 1px solid var(--line); } .cp-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cp-cert { padding: 8px 0; border-bottom: 1px solid var(--line); } .cp-note { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .cp-note.pinned { background: #fffaf0; padding: 8px; border-radius: 8px; }
.cp-checklist { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cp-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); } .cp-form input, .cp-form select { padding: 6px 8px; } .cp-form .qcard-title { width: 100%; }

.pill, .cp-badge { text-align: center; justify-content: center; line-height: 1.2; }
.col-table-wrap { max-height: 70vh; overflow: auto; margin-top: 8px; }
.col-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; position: sticky; top: 0; background: var(--surface); }
.col-table th.sorted { color: var(--ink); }
.col-table tbody tr { cursor: pointer; } .col-table tbody tr:hover { background: rgba(0,0,0,0.03); } .col-table tbody tr.selected { background: var(--accent-soft, #e8eefc); }
.carrier-lists { margin: 6px 0 12px; }

/* Punches and Timesheets (spec Oct 14): CSS grids so rows can expand inline */
.leftmenu .menu-badge { background: var(--bad); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 6px; }
.period-stepper { display: inline-flex; align-items: center; gap: 8px; } .period-label { font-weight: 600; font-size: 13px; }
.punches-layout { margin-top: 14px; }
.period-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.total-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; } .total-card.attention { border-color: var(--warn-ink, #92400e); }
.total-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); } .total-value { font-size: 20px; font-weight: 700; } .total-card.warn .total-value { color: var(--warn-ink, #92400e); }
.days-grid, .review-grid, .employee-grid { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.days-row { display: grid; grid-template-columns: 64px 1fr 80px 1fr 80px 1.4fr 120px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; gap: 8px; }
.days-row.head, .review-row.head, .employee-row.head { background: var(--bg-sunken); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); font-weight: 600; }
.days-row.flagged, .review-row.flagged { background: #fffaf0; } .days-row.focus { outline: 2px solid var(--accent); }
.cell.day .wd { font-size: 10px; letter-spacing: 0.08em; color: var(--ink-mute); } .cell.day .dn { font-size: 18px; font-weight: 700; line-height: 1; }
.cell.off { color: var(--warn-ink, #92400e); } .cell .note { font-size: 11px; color: var(--warn-ink, #92400e); } .cell.hours { font-weight: 700; } .mute.faint { color: var(--ink-faint, #94a3b8); }
.rail-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.fix-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; } .fix-col { border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.fix-col.recorded { background: var(--bg-sunken); color: var(--ink-soft); } .fix-col.proposed { background: var(--accent-soft, #e8eefc); color: var(--accent); }
.fix-col .fix-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .fix-col label { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin: 3px 0; }
.fix-form textarea { width: 100%; box-sizing: border-box; margin: 6px 0; } .fix-actions { display: flex; gap: 8px; align-items: center; }
.ts-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; } .ts-bar .ts-filter { width: 160px; }
.dept-pick { display: inline-flex; gap: 10px; } .dept-opt { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.review-row { display: grid; grid-template-columns: 1.4fr 64px 1.3fr 1.6fr 140px 2fr; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; gap: 8px; }
.review-row.selected { box-shadow: inset 3px 0 0 var(--accent); background: #f6f8ff; }
.cell.who { display: flex; align-items: center; gap: 8px; } .cell.who .name { font-weight: 600; }
.avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pos, var(--pos-other)); color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.cell.recorded { color: var(--ink-soft); } .cell .proposed { color: var(--accent); font-weight: 600; } .cell .quote { font-size: 12px; }
.flag-pill { background: var(--warn-soft, #fde68a); color: var(--warn-ink, #92400e); }
.cell.actions { display: flex; gap: 6px; align-items: center; position: relative; flex-wrap: wrap; }
.btn.good.primary { background: var(--good, #16a34a); color: #fff; border-color: transparent; } .btn.secondary { background: var(--surface); }
.more-menu { position: absolute; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; z-index: 5; box-shadow: var(--shadow-md, 0 8px 24px rgba(14,21,38,0.12)); }
.inline-editor, .reason-form, .punch-detail { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; background: var(--bg-sunken); border-bottom: 1px solid var(--line); font-size: 13px; }
.inline-editor label { display: inline-flex; align-items: center; gap: 4px; } .punch-detail { flex-direction: column; align-items: flex-start; gap: 4px; }
.employee-row { display: grid; grid-template-columns: 28px 1.4fr 2fr 80px 80px 80px 80px 130px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; gap: 8px; cursor: pointer; }
.day-strip { display: flex; gap: 3px; } .day-strip .sq { width: 14px; height: 14px; border-radius: 4px; background: #e5e7eb; display: inline-block; }
.day-strip .sq.approved { background: #22c55e; } .day-strip .sq.review { background: #f59e0b; } .day-strip .sq.pto { background: #9ca3af; } .day-strip .sq.off { background: #f1f5f9; } .day-strip .sq.future { background: transparent; border: 1px dashed var(--accent); box-sizing: border-box; }
.cell.ot { color: var(--warn-ink, #92400e); font-weight: 600; }
.employee-days { padding: 8px 12px 12px; background: var(--bg-sunken); border-bottom: 1px solid var(--line); }
.log-filters input, .log-filters select { padding: 6px 8px; } .log-table th.sortable { cursor: pointer; } .btn.disabled { opacity: 0.5; pointer-events: none; }

.builder td.painting { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* Record panel (7b) */
.record-panel { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.record-tabs { margin-bottom: 8px; } .record-tab { max-height: 420px; overflow: auto; }
.tl-item { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.tl-when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); min-width: 92px; } .tl-title.link { color: var(--accent); cursor: pointer; } .tl-body { width: 100%; color: var(--ink-soft); font-size: 12.5px; white-space: pre-wrap; }
.note-form { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; } .note-form textarea { flex: 1; }
.search-row { cursor: pointer; }
.email-form { display: grid; gap: 6px; } .email-form select, .email-form input, .email-form textarea { width: 100%; box-sizing: border-box; }
.list-tools { margin-top: 12px; display: grid; gap: 6px; } .order-row .row-pick { margin-right: 4px; } .home-lead, .home-order { cursor: pointer; } b.done { text-decoration: line-through; color: var(--ink-mute); }
.fields-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; } .fields-form .cp-field input, .fields-form .cp-field select { width: 100%; box-sizing: border-box; }

/* 7fa: usable on a phone or tablet: the menu becomes a strip, grids stack, tables scroll, the right rail folds under. */
@media (max-width: 820px) {
  .hud { grid-template-columns: 1fr !important; grid-template-rows: auto auto 1fr auto !important; }
  .leftmenu { flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 8px; border-right: none; border-bottom: 1px solid var(--line); }
  .leftmenu a { padding: 6px 10px; font-size: 13px; }
  .rightrail, .chat { display: none; }
  .topmenu .tabs { overflow-x: auto; white-space: nowrap; }
  .home-grid, .period-totals, .cp-grid, .fields-form, .schedule-mine { grid-template-columns: 1fr !important; display: grid; }
  .schedule-rail { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .center { padding: 10px; }
  .days-row, .review-row, .employee-row { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .days-row.head, .review-row.head, .employee-row.head { display: none; }
  .modal-overlay { padding: 8px; } .modal-card, .carrier-modal .modal-card, .list-modal .modal-card { width: 100%; padding: 12px; }
  .col-table-wrap, .cp-table { max-width: 100%; overflow-x: auto; display: block; }
  .lookup-form input, #search-input { width: 100% !important; }
  .bulk-bar, .dir-filters, .ts-bar { flex-wrap: wrap; }
}

/* ---------- Column tables shared by the carrier, order and customer grids ---------- */
.col-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; position: relative; }
.colpicker-inline { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 10px; background: var(--surface); border-radius: 10px; box-shadow: 0 0 0 1px var(--line); width: 100%; }
.colpicker-inline label { font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.col-table th.pick, .col-table td.pick { width: 28px; }
.col-table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.order-grid .col-table-wrap { max-height: calc(100vh - 260px); }
.list-tools .bulk-bar { flex-wrap: wrap; }
/* order pane: pills in the grid and page share the tokens; the back link hides the list it came from */
#pane-order .hl-fields .pill { font-size: 11.5px; }
#pane-order .cust-panel .row .v { max-width: 190px; word-break: break-word; }
#pane-order .pstep.plain { opacity: 1; }
#pane-order .path.cancelled .pstep { opacity: .45; }
#pane-order .quickacts .qa:disabled { opacity: .4; cursor: default; }
#pane-order .card-body .lead-actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px; align-items: center; margin-top: 8px; }
#pane-order .card-body .lead-actions input, #pane-order .card-body .lead-actions select { padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; font: 12.5px var(--fb); }
#pane-order .readiness { margin: 8px 0; font-size: 12.5px; } #pane-order .readiness.ready b { color: var(--good); } #pane-order .readiness.blocked b { color: var(--bad); }
#pane-order .block-line { color: var(--ink-soft); font-size: 12px; }
#pane-order .offer-actions { display: flex; gap: 6px; }
#pane-order .record-panel { margin-top: 18px; }
/* customer page pop-up */
.customer-modal .cp-leads td.num { text-align: right; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.col-table td { white-space: nowrap; }
.col-table td.mono, .col-table th.mono { font-variant-numeric: tabular-nums; }
.cp-leads td { white-space: nowrap; }

/* Home notifications card: compact rows, grouped, scrolls instead of growing the dashboard */
.note-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.note-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.note-chip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.note-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.note-list.scroll { max-height: 280px; overflow: auto; }
.note-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.note-row:last-child { border-bottom: none; }
.note-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-age { font-size: 11px; flex: none; }
.note-x { border: none; background: none; color: var(--ink-mute); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; flex: none; }
.note-x:hover { color: var(--bad); }
.note-more { margin-top: 8px; }
.home-grid .empty { padding: 18px 16px; font-size: 13px; }


/* ===== Polish pass: even spacing, no clipped text, consistent controls. Keep after the Refined Cobalt block. ===== */
/* Toolbars built in JS (orders, carriers, communications, timesheets, users, search) used bare inputs and selects. */
.comms-actions input, .comms-actions select, .ts-bar input, .ts-bar select, .log-filters input, .log-filters select,
.lookup-form input, .users-table input, .users-table select, .user-form input, .user-form select, .cp-form input, .cp-form select,
.email-form input, .email-form select, .email-form textarea, .note-form textarea, .fix-form textarea, .queue-row input, .lead-row-actions input, .lead-row-actions select {
  padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line-input); font-size: 12.5px; background: var(--surface); font-family: var(--font-body); color: var(--ink); min-height: 32px; }
.comms-actions input:focus, .comms-actions select:focus, .ts-bar input:focus, .ts-bar select:focus, .lookup-form input:focus, .cp-form input:focus, .cp-form select:focus,
.email-form input:focus, .email-form textarea:focus, .note-form textarea:focus, .lead-row-actions input:focus, .lead-row-actions select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,0.18); }
.comms-actions input::placeholder, .lookup-form input::placeholder { color: var(--ink-mute); }
.comms-actions label, .ts-bar label, .dept-opt, .builder-filters label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.comms-actions input[type="checkbox"], .ts-bar input[type="checkbox"] { min-height: 0; width: 15px; height: 15px; padding: 0; margin: 0; accent-color: var(--accent); }
.comms-actions { flex-wrap: wrap; gap: 8px; }
.comms-actions .mute { white-space: nowrap; }
/* Buttons never wrap or underline, whether they are <button> or <a class="btn">. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; text-decoration: none; line-height: 1.2; min-height: 32px; }
.btn.sm { min-height: 28px; }
.bottombar .btn, #pane-order .btn.sm, .call-popup-actions .btn, .today-card .btn { min-height: 0; }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: default; }
/* Destructive actions read as such. */
.btn[data-action="cancel"], .btn[data-action="deactivate"], .btn.danger { color: var(--bad); border-color: #f5c2c4; }
.btn[data-action="cancel"]:hover, .btn[data-action="deactivate"]:hover, .btn.danger:hover { background: var(--bad-soft); }
/* Keyboard focus is visible on every control (SLDS: focus ring, never outline:0 without a replacement). */
.btn:focus-visible, .tab:focus-visible, .leftmenu a:focus-visible, .qa:focus-visible, .midtab:focus-visible, .ctab:focus-visible, .tfilter:focus-visible,
.stab:focus-visible, .note-chip:focus-visible, .template-chip:focus-visible, .fold-title:focus-visible, .card-head:focus-visible, .cust:focus-visible, .agent-bubble:focus-visible, .rail-toggle:focus-visible, .col-table tbody tr:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.topmenu .tab:focus-visible, .agent-bubble:focus-visible { outline-color: var(--accent-2); }
/* Home: cards keep their own height instead of stretching to the tallest one in the row. */
.home-grid { align-items: start; }
/* Empty-state headings were the 12px uppercase label style. */
.empty .h2 { font-family: var(--font-display); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: -0.01em; color: var(--ink-soft); margin: 0 0 4px; }
.empty p { margin: 0; }
/* Error and notice boxes render as an empty pink blob when they have no text. */
.nq-error:empty, .form-error:empty, .sms-done:empty, .shell-error:empty { display: none; }
/* Order page: card heads keep to one line; the meta truncates, the title and buttons never wrap. */
#pane-order .card-head { min-width: 0; }
#pane-order .card-title { white-space: nowrap; flex: none; }
#pane-order .card-meta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pane-order .card-right { flex: none; }
#pane-order .card-right .btn { white-space: nowrap; }
#pane-order .hl-num, #pane-order .cust { white-space: nowrap; }
#pane-order .hf .v { overflow-wrap: anywhere; }
/* "Commission paid on" and similar empty values were drawn as a full empty-state box inside a 280px rail. */
#pane-order .prop .empty, #pane-order .assoc .empty { padding: 10px 12px; font-size: 12.5px; text-align: left; border: none; background: none; }
/* Blocked-reason lines keep one capitalisation and wrap cleanly. */
#pane-order .block-line, .block-line { overflow-wrap: anywhere; }
/* Carrier page pop-up: the name is a title, not an uppercase label. */
.cp-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; text-transform: none; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.modal-head .modal-close { flex: none; }
/* Column grids: cells clip with an ellipsis instead of being cut mid-letter; the first column stays readable. */
.col-table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.col-table th.sortable { background: var(--bg-sunken); }
.col-table tbody tr:hover { background: var(--hover); }
/* Users table: names and emails do not wrap; the scheduling membership list clips with a tooltip-ready ellipsis. */
.users-table td:nth-child(-n+3), .users-table td.row-actions { white-space: nowrap; }
.users-table td:nth-child(7) { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.users-table th { white-space: nowrap; }
/* Preset filter buttons on the carrier directory were three lines tall. */
.dir-filters .btn { white-space: nowrap; }
/* Page headers: the same top gap and a single alignment for every pane (the New Quote title was centred). */
#pane-newquote .h1 { margin: 0; }
.nq-head { margin-bottom: 12px; }
.nq-head .pill { align-self: center; }
/* New Quote breakdown: both columns keep the same row rhythm when a value wraps. */
#pane-newquote .nq-row { align-items: baseline; }
#pane-newquote .nq-row span:last-child { overflow-wrap: anywhere; }
/* Notification group chips: one row of chips, scrolling rather than stacking four deep. */
.note-groups { gap: 6px; }
#pane-order .btn[data-action="cancel"] { color: var(--bad); border-color: #f5c2c4; }
#pane-order .btn[data-action="cancel"]:hover { background: var(--bad-soft); }

/* ===== Filter row and search row: one labelled control style for the carrier and customer tabs ===== */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 4px 0 10px; }
.ff { display: inline-flex; flex-direction: column; gap: 4px; min-width: 0; }
.ff-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.ff select, .ff input, .filter-bar select, .filter-bar input, .search-row input, .search-row select {
  padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line-input); font-size: 12.5px; background: var(--surface); font-family: var(--font-body); color: var(--ink); min-height: 32px; }
.ff select { padding-right: 26px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238793ad' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; }
.ff select:focus, .ff input:focus, .search-row input:focus, .search-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,0.18); }
.ff select.ff-views { font-weight: 600; color: var(--accent-deep); border-color: #c9d8ff; background-color: var(--accent-soft); }
.ff input[type="date"] { width: 138px; }
.ff-spacer { flex: 1; }
.filter-bar .btn { align-self: flex-end; }
.search-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.search-row .search-q { flex: 1 1 260px; min-width: 200px; font-size: 13.5px; padding: 8px 12px; }
.search-row .btn.accent { align-self: flex-end; min-height: 34px; }

/* ===== Reports pane and management dashboard ===== */
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 14px; }
.rp-tile { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px 11px; min-width: 0; }
.rp-tile-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.rp-tile-value { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-tile-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-tile.bad .rp-tile-value { color: var(--bad); }
.rp-grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 12px; }
.rp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.rp-chart { padding: 14px 16px 12px; min-width: 0; }
.rp-chart-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.rp-svg { width: 100%; height: auto; display: block; }
.rp-grid { stroke: var(--line); stroke-width: 1; }
.rp-axis { font-size: 10px; fill: var(--ink-mute); font-family: var(--font-body); }
.rp-bar-leads { fill: #c7d4f2; } .rp-bar-quoted { fill: #7ea0ee; } .rp-bar-orders { fill: var(--accent); } .rp-bar-cancelled { fill: var(--bad); }
.rp-key { display: flex; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--ink-soft); flex-wrap: wrap; }
.rp-key-item { display: inline-flex; align-items: center; gap: 6px; }
.rp-swatch { display: inline-block; width: 12px; height: 10px; border-radius: 3px; }
.rp-swatch.rp-bar-leads { background: #c7d4f2; } .rp-swatch.rp-bar-quoted { background: #7ea0ee; } .rp-swatch.rp-bar-orders { background: var(--accent); } .rp-swatch.rp-bar-cancelled { background: var(--bad); }
.rp-bars { display: flex; flex-direction: column; gap: 7px; }
.rp-bar-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.rp-bar-label { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-track { height: 10px; background: var(--bg-sunken); border-radius: 5px; overflow: hidden; }
.rp-fill { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.rp-bar-val { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }
.rp-top td, .rp-top th { white-space: nowrap; } .rp-top td:first-child { white-space: normal; }
#reports-table .col-table tbody tr { cursor: default; }
#reports-table tr.rp-total td { font-weight: 700; border-top: 2px solid var(--line-strong); background: var(--bg-sunken); }
@media (max-width: 1100px) { .rp-grid2, .rp-grid3 { grid-template-columns: 1fr; } }
/* Reports polish: five tiles to a row, even top tables, readable grid */
.rp-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rp-tiles.rp-tiles-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1280px) { .rp-tiles, .rp-tiles.rp-tiles-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rp-tiles, .rp-tiles.rp-tiles-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-tile { padding: 12px 16px 11px; }
.rp-tile-value { font-size: 23px; }
.rp-top { table-layout: fixed; }
.rp-top th, .rp-top td { padding: 7px 6px; }
.rp-top th:first-child, .rp-top td:first-child { width: 36%; }
.rp-top th { font-size: 10.5px; letter-spacing: 0.04em; }
.rp-top td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-top tbody tr { height: 34px; }
.rp-top th.num, .rp-top td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rp-grid3 .rp-chart { display: flex; flex-direction: column; }
.rp-bar-row { grid-template-columns: 150px 1fr auto; }
#reports-table .col-table th { white-space: nowrap; }
#reports-table .col-table td { max-width: 240px; }
#reports-table .col-table td:first-child { font-weight: 600; }
#reports-table .col-table-wrap { max-height: none; }
#reports-table .col-table th:first-child, #reports-table .col-table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: inset -1px 0 0 var(--line); }
#reports-table .col-table th:first-child { z-index: 2; background: var(--bg-sunken); }
#reports-table tr.rp-total td:first-child { background: var(--bg-sunken); }
#reports-tools .ff-views { min-width: 210px; }
#reports-tools .ff input[type="date"] { width: 132px; }
.rp-top th:first-child, .rp-top td:first-child { width: 33%; }
.rp-top th.num, .rp-top td.num { width: 13.4%; padding-left: 4px; padding-right: 4px; }
.rp-top th { letter-spacing: 0.02em; }

/* ===== Customer page: readable like the order page, editable in place, opens in its own window ===== */
.customer-modal .modal-card { width: min(1120px, 100%); padding: 18px 22px 20px; }
.cust-page { margin-top: 4px; }
.cust-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cust-id { min-width: 0; }
.cust-id .back { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; margin-bottom: 8px; }
.cust-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cust-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.cust-company { font-size: 14px; color: var(--ink-soft); }
.cust-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cust-chips .chip { display: inline-flex; align-items: center; gap: 6px; background: #f8fafe; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 11px; font-size: 12px; color: var(--ink-soft); }
.cust-chips .chip.ok { background: var(--good-soft); border-color: #bfe8d4; color: var(--good); }
.cust-chips .chip.pending { opacity: 0.55; }
.cust-actions { display: flex; gap: 8px; flex: none; align-items: center; }
.cust-actions .modal-close { width: 32px; padding: 0; justify-content: center; }
.cust-error { margin: 10px 0 0; }
.cust-strip { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 14px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cust-strip .hf .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); font-weight: 700; margin-bottom: 2px; }
.cust-strip .hf .v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cust-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 12px; margin-top: 14px; }
.cust-card { padding: 0; }
.cust-card-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cust-card-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.cust-card-meta { color: var(--ink-mute); font-size: 11.5px; }
.cust-card-right { margin-left: auto; display: flex; gap: 8px; }
.cust-card-body { padding: 6px 16px 12px; }
.cprop { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cprop:last-child { border-bottom: none; }
.cprop .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-mute); font-weight: 700; margin-bottom: 3px; }
.cprop .v { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.cprop .v.empty { color: var(--ink-mute); font-weight: 400; }
.cust-list { display: flex; flex-direction: column; gap: 4px; }
.cust-line { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cust-line .mute { font-weight: 400; }
.cust-form { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.cust-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cust-form .ff input { width: 100%; }
.cust-edit-list { display: flex; flex-direction: column; gap: 6px; }
.cust-edit-rows { display: flex; flex-direction: column; gap: 6px; }
.cust-edit-row { display: flex; align-items: center; gap: 8px; }
.cust-fields { display: flex; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; }
.cust-fields input, .cust-fields select { padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line-input); font-size: 12.5px; background: var(--surface); font-family: var(--font-body); color: var(--ink); min-height: 32px; }
.cust-fields input:focus, .cust-fields select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,0.18); }
.cust-fields input { flex: 1 1 140px; min-width: 100px; }
.cust-fields-addr input.cust-state { flex: 0 0 56px; min-width: 56px; text-transform: uppercase; }
.cust-fields-addr input.cust-zip { flex: 0 0 96px; min-width: 96px; }
.cust-remove { flex: none; color: var(--bad); border-color: #f5c2c4; }
.cust-remove:hover { background: var(--bad-soft); }
.cust-form-foot { display: flex; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.cust-tabs { margin-top: 14px; display: flex; gap: 2px; background: var(--bg-sunken); border-radius: 11px; padding: 3px; width: max-content; }
.cust-tabs .midtab { border: none; background: none; padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.cust-tabs .midtab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(14,21,38,.08), 0 0 0 1px var(--line); }
.cust-page .cp-panel, .cust-modal .cp-panel { padding-top: 10px; }
.cust-page .cp-leads, .cust-modal .cp-leads { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.cust-page .cp-leads th { background: var(--bg-sunken); padding: 8px 10px; }
.cust-page .cp-leads td, .cust-modal .cp-leads td { padding: 8px 10px; }
@media (max-width: 1000px) { .cust-body { grid-template-columns: 1fr; } .cust-form-grid { grid-template-columns: 1fr; } }
.cprop .v.blank { color: var(--ink-mute); font-weight: 400; }
#pane-customers.cust-paged > :not(#customer-page) { display: none; }

/* ===== Order page: windows and driver on the carrier card; imported readiness; More menu ===== */
#pane-order .mini .late { color: var(--bad); }
#pane-order .mini .pill.sm { font-size: 10px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
#pane-order .mini-edit { display: inline-block; margin-top: 4px; font-size: 11.5px; }
#pane-order .mini-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin-top: 4px; }
#pane-order .mini-form input { min-width: 0; width: 140px; }
#pane-order .mini-form .ff { display: flex; flex-direction: column; gap: 2px; }
#pane-order .readiness.imported { border-style: dashed; color: var(--ink-soft); font-size: 12px; }
#pane-order .readiness.imported .block-line { margin-top: 4px; }
#pane-order .mini .mini-edit { margin-left: 6px; }

/* Speed-to-lead badge on lead rows */
.lead-row .touch { white-space: nowrap; }

/* Timeline filters and the system fold */
.tl-filters { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 10px; }
.tl-filter { font: inherit; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.tl-filter.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tl-filter:disabled { opacity: .45; cursor: default; }
.tl-fold { font: inherit; font-size: 11.5px; color: var(--accent); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.tl-item[data-group="system"] .tl-title { color: var(--ink-soft); }

/* ===== Command palette ===== */
.cp-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .38); z-index: 1200; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.cp-card { width: min(640px, 92vw); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, .25); overflow: hidden; }
.cp-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); outline: none; }
.cp-list { max-height: 52vh; overflow: auto; padding: 6px; }
.cp-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.cp-item.on { background: var(--bg-sunken); }
.cp-kind { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.cp-label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-hint { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; }
.cp-empty { padding: 14px; color: var(--ink-mute); font-size: 13px; }
.cp-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-mute); }
.cp-foot kbd { font: inherit; font-size: 10.5px; padding: 1px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; margin-right: 3px; background: var(--surface); }
.cp-item { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 44%); }
.cp-item .cp-label { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink); font-family: var(--font-body); }
.cp-item .cp-hint { max-width: none; text-align: right; text-transform: none; letter-spacing: 0; }
.cp-item.on { background: var(--selected); }
.cp-input { font-family: var(--font-body); color: var(--ink); }


/* Carrier page mode shares the customer page scaffold */
#pane-carrier.cust-paged > :not(#carrier-page) { display: none; }
#carrier-page.carrier-page { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 18px 20px; }
#carrier-page .modal-head { align-items: flex-start; }
#carrier-page .back { display: inline-block; font-size: 12.5px; margin-bottom: 6px; }
.carrier-modal .cust-actions { display: flex; gap: 8px; align-items: center; }

/* ===== Left menu: Task List with its dropdown ===== */
.leftmenu .menu-group { position: relative; margin-bottom: 8px; }
.leftmenu .menu-group > a { margin-bottom: 0; padding-right: 34px; display: block; }
.leftmenu .menu-group > a::after { display: none; }
.leftmenu .menu-group::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: -4.5px; height: 1px; background: rgba(14,21,38,0.07); }
.leftmenu .menu-caret { position: absolute; top: 7px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-mute); font-size: 12px; cursor: pointer; transition: transform 140ms, background 130ms; }
.leftmenu .menu-caret:hover { background: var(--bg-sunken); color: var(--ink); }
.leftmenu .menu-caret.open { transform: rotate(180deg); }
.leftmenu .menu-sub { margin: 4px 4px 2px 10px; padding-left: 8px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.leftmenu .menu-sub-empty { font-size: 12px; color: var(--ink-mute); padding: 4px 6px; }
.leftmenu .menu-task { display: flex; align-items: center; gap: 4px; }
.leftmenu .menu-task-main { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; font: inherit; font-size: 12.5px; text-align: left; background: none; border: 0; border-radius: 6px; padding: 5px 6px; color: var(--ink-soft); cursor: pointer; }
.leftmenu .menu-task-main:hover { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.leftmenu .menu-task-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leftmenu .menu-task-due { flex: none; font-size: 11px; color: var(--ink-mute); }
.leftmenu .menu-task.overdue .menu-task-due { color: var(--bad); font-weight: 600; }
.leftmenu .menu-task-done { flex: none; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink-mute); font-size: 11px; cursor: pointer; }
.leftmenu .menu-task-done:hover { color: var(--good); border-color: var(--good); }
.leftmenu .menu-task-more { font: inherit; font-size: 11.5px; color: var(--accent); background: none; border: 0; text-align: left; padding: 4px 6px; cursor: pointer; }
.hud:not(.menu-open) .leftmenu .menu-caret, .hud:not(.menu-open) .leftmenu .menu-sub { display: none; }

/* ===== Home: notifications in their own column ===== */
.home-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; margin-top: 18px; align-items: start; }
.home-cols .home-grid { margin-top: 0; }
.home-side { position: sticky; top: 0; }
@media (max-width: 1180px) { .home-cols { grid-template-columns: 1fr; } .home-side { position: static; } }

/* Login card */
.login-page { background: radial-gradient(1200px 600px at 20% -10%, #dfe8ff 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #e7edff 0%, transparent 55%), var(--bg); }
.login-card { width: 380px; padding: 30px 32px 26px; border-radius: 16px; box-shadow: 0 18px 50px rgba(15, 23, 42, .10), 0 1px 0 rgba(255,255,255,.8) inset; }
.login-card .brand { margin-bottom: 18px; }
.login-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 2px; color: var(--ink); }
.login-sub { margin: 0 0 18px; font-size: 13px; color: var(--ink-soft); }
.login-card .qf input { padding: 10px 12px; font-size: 14px; }
.login-card .btn { margin-top: 4px; border-radius: 10px; }
.login-foot { margin: 14px 0 0; font-size: 12px; color: var(--ink-mute); text-align: center; }

/* ===== Orders toolbar on the shared filter row ===== */
.list-tools .search-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.list-tools .search-row .search-input { flex: 1 1 220px; min-width: 180px; }
.list-tools .search-row .search-scope { width: 128px; }
.list-tools .search-range { display: inline-flex; align-items: center; gap: 6px; }
.list-tools .search-range input[type="date"] { width: 138px; }
.list-tools .filter-bar { margin-bottom: 8px; }
.list-tools .save-view { display: inline-flex; align-items: center; gap: 6px; }
.list-tools .save-view input { width: 150px; }
.list-tools .tools-notice { margin: 6px 0 0; }
.list-tools .bulk-bar { margin-top: 0; }

/* ===== Sheen pass: a modern-CRM finish on top of Refined Cobalt. Elevation is soft and layered, controls share one height, headers carry a tint, rows lift on hover. Nothing here changes layout. ===== */
:root { --shadow-sm: 0 1px 2px rgba(14,21,38,0.05), 0 1px 1px rgba(14,21,38,0.03); --shadow-card: 0 1px 2px rgba(14,21,38,0.05), 0 6px 20px rgba(14,21,38,0.045); --shadow-md: 0 14px 40px rgba(14,21,38,0.14), 0 2px 6px rgba(14,21,38,0.06); --ring: 0 0 0 3px rgba(47,107,255,0.16); }
.card { box-shadow: var(--shadow-card); border-color: #e6eaf3; }
.card:where(.qcard, .cust-page, .carrier-page) { background: linear-gradient(180deg, #ffffff 0%, #ffffff 70%, #fbfcfe 100%); }
.hero { background: linear-gradient(118deg, var(--hero-from) 0%, var(--hero-mid) 55%, var(--hero-to) 100%); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.9); border: 1px solid var(--line-strong); }
.hero .h1 { letter-spacing: -0.02em; }
.hero-date { box-shadow: var(--shadow-sm); border: 1px solid #e3e9f6; }

/* controls: one 34px height everywhere they sit in a row */
.btn { min-height: 34px; padding: 6px 14px; border-radius: 9px; box-shadow: 0 1px 1px rgba(14,21,38,0.04); }
.btn.sm { min-height: 30px; padding: 4px 11px; }
.btn:hover { background: var(--bg-sunken); border-color: #cfd8e8; }
.btn:active { transform: translateY(0.5px); }
.btn.accent { background: linear-gradient(180deg, #3f7bff 0%, var(--accent) 60%, #2a62f2 100%); border-color: var(--accent-deep); box-shadow: 0 1px 2px rgba(29,79,215,0.35), inset 0 1px 0 rgba(255,255,255,0.22); }
.btn.accent:hover { background: linear-gradient(180deg, #3a74ff 0%, var(--accent-deep) 100%); }
.ff select, .ff input, .filter-bar select, .filter-bar input, .search-row input, .search-row select, .list-tools input, .list-tools select, .comms-actions input, .comms-actions select, .nq-form input, .nq-form select, .qf input, .qf select, .cust-form input, .cust-form select, .mini-form input { height: 34px; border-radius: 9px; border: 1px solid var(--line-input); background: var(--surface); box-shadow: inset 0 1px 2px rgba(14,21,38,0.03); font-size: 13px; }
.ff select:focus, .ff input:focus, .filter-bar select:focus, .filter-bar input:focus, .search-row input:focus, .search-row select:focus, .list-tools input:focus, .list-tools select:focus, .qf input:focus, .qf select:focus, .cust-form input:focus, .cust-form select:focus, .mini-form input:focus, .nq-form input:focus, .nq-form select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.ff select.ff-views { box-shadow: inset 0 1px 2px rgba(47,107,255,0.06); }
.ff-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
textarea { border-radius: 9px; border: 1px solid var(--line-input); } textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* grids: tinted sticky header, calm hover, aligned numerics */
.col-table { border-collapse: separate; border-spacing: 0; }
.col-table th, .col-table th.sortable { background: var(--bg-sunken); color: var(--ink-mute); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; z-index: 1; }
.col-table th.sorted { color: var(--accent-deep); box-shadow: inset 0 -2px 0 var(--accent); }
.col-table td { border-bottom: 1px solid var(--line); }
.col-table tbody tr:last-child td { border-bottom: 0; }
.col-table tbody tr:hover { background: var(--hover); }
.col-table tbody tr.selected { background: var(--selected); }
.col-table tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* pills and chips: a hairline so they read on white */
.pill { box-shadow: inset 0 0 0 1px rgba(14,21,38,0.04); }
.pill.good { box-shadow: inset 0 0 0 1px rgba(12,157,97,0.14); } .pill.warn { box-shadow: inset 0 0 0 1px rgba(217,122,8,0.16); } .pill.bad { box-shadow: inset 0 0 0 1px rgba(229,72,77,0.16); } .pill.info { box-shadow: inset 0 0 0 1px rgba(10,165,194,0.16); } .pill.accent { box-shadow: inset 0 0 0 1px rgba(47,107,255,0.16); }
.chip { border: 1px solid var(--line-strong); background: var(--surface); }

/* lists and rows */
.lead-row, .task-row, .queue-row, .list-row, .customer-row, .dir-row { transition: background 120ms; }
.lead-row:hover, .task-row:hover, .queue-row:hover, .list-row:hover { background: var(--hover); }
.empty { border: 1px dashed #d9e0ee; background: #fbfcfe; color: var(--ink-mute); border-radius: 12px; }

/* modals and windows */
.modal-overlay { background: rgba(10, 16, 32, 0.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.modal-card { box-shadow: var(--shadow-md); border-radius: 16px; }

/* top chrome: the active tab gets a quiet underline instead of a boxed inset */
.topmenu .tab { border-radius: 8px; }
.topmenu .tab.active { background: rgba(255,255,255,0.08); box-shadow: none; }
.topmenu .tab.active::after { display: block; left: 13px; right: 13px; bottom: 2px; height: 2px; background: var(--accent-2); box-shadow: 0 0 10px rgba(34,211,238,0.6); border-radius: 2px; }

/* left menu: active entry carries the accent bar */
.leftmenu a.active { box-shadow: var(--shadow-sm), inset 3px 0 0 var(--accent); }

/* headings inside cards */
.qcard-title { letter-spacing: 0.08em; font-size: 11.5px; }
.h1 { letter-spacing: -0.015em; }

/* bottom bar buttons keep their own compact size */
.bottombar .btn { min-height: 0; }
/* fixed-height controls: selects and inputs keep their text centred (no vertical padding fighting the height) */
.ff select, .filter-bar select, .search-row select, .list-tools select, .comms-actions select, .nq-form select, .qf select, .cust-form select, .mini-form select { padding-top: 0; padding-bottom: 0; line-height: 32px; }
.ff input, .filter-bar input, .search-row input, .list-tools input, .comms-actions input, .nq-form input, .qf input, .cust-form input, .mini-form input { padding-top: 0; padding-bottom: 0; }
.qf input[type="date"], .ff input[type="date"] { padding-right: 6px; }
/* left menu: the active bar is a straight pill, not a curve around the corner */
.leftmenu a.active { box-shadow: var(--shadow-sm); }
.leftmenu a.active::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--accent); }
.grid-more { display: flex; justify-content: center; padding: 10px 0 4px; }
/* grids sit in a framed card; the last column never hides under the scrollbar */
.col-table-wrap { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-card); }
.col-table { width: 100%; min-width: max-content; }
.col-table th:first-child, .col-table td:first-child { padding-left: 14px; }
.col-table th:last-child, .col-table td:last-child { padding-right: 18px; }
.col-table th { padding-top: 9px; padding-bottom: 9px; }
.col-table td { padding-top: 8px; padding-bottom: 8px; }
.list-tools .bulk-bar [data-count][data-zero] { display: none; }
.col-table-shell { margin-top: 8px; }
.col-table-shell .col-tools { margin-bottom: 8px; }
.col-table-shell .col-table-wrap { margin-top: 0; }

/* Users grid in the same frame as the other grids */
.users-wrap { margin-top: 12px; max-height: none; }
.users-table { margin-top: 0; min-width: max-content; border-collapse: separate; border-spacing: 0; }
.users-table th { background: var(--bg-sunken); color: var(--ink-mute); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; position: sticky; top: 0; padding: 9px 10px; border-bottom: 1px solid var(--line-strong); }
.users-table td { padding: 8px 10px; white-space: nowrap; }
.users-table th:first-child, .users-table td:first-child { padding-left: 14px; } .users-table th:last-child, .users-table td:last-child { padding-right: 16px; }
.users-table tbody tr:hover td { background: var(--hover); }
.users-table td .btn { margin-right: 4px; }

/* Communications: filter row, call cards with direction colour */
#comms-tools { margin: 6px 0 12px; }
#comms-count:empty { display: none; }
.comms-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; margin-bottom: 8px; }
.comms-row .comms-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.comms-row .comms-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.comms-row .mono { font-variant-numeric: tabular-nums; }
.comms-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions" "meta actions"; align-items: center; row-gap: 2px; }
.comms-row .comms-main { grid-area: main; } .comms-row .comms-meta { grid-area: meta; } .comms-row .comms-row-actions { grid-area: actions; }

/* Task List pane */
#tasks-count:empty { display: none; }
.task-new { margin: 6px 0 12px; padding-bottom: 16px; }
.task-new-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.task-new-row input[type="text"], .task-new-row #task-new-title { flex: 1 1 320px; min-width: 220px; }
.task-new-row input, .task-new-row select { height: 34px; border-radius: 9px; border: 1px solid var(--line-input); padding: 0 12px; font: inherit; font-size: 13px; }
.task-new-row input:focus, .task-new-row select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
#tasks-list .task-body { font-size: 12px; white-space: normal; max-width: 420px; }
#tasks-list .col-table td { white-space: normal; }
#hunting-count:empty { display: none; }
#hunting-tools { margin-top: 8px; }

/* Search pane: heading and card share one width */
#pane-search .h1 { max-width: none; margin: 0 0 12px; }
#pane-search .search-results-wrap { max-width: none; }
/* Customer window: the orders table scrolls inside its card */
.cp-leads-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; }
.cust-page .cp-leads, .cust-modal .cp-leads { border: 0; border-radius: 0; min-width: max-content; width: 100%; }
.cust-modal .modal-card { overflow: hidden; }
.cp-field { min-width: 0; } .cp-field .cp-value { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud.order-focus:not(.menu-open) .leftmenu > .menu-group { display: none; }
/* selects at the fixed control height: no vertical padding anywhere (a select cannot wrap, so this is safe) */
.hud select, .login-card select, .modal-card select { padding-top: 0 !important; padding-bottom: 0 !important; height: 34px; line-height: 32px; }
.hud .qf input:not([type="checkbox"]):not([type="radio"]), .hud .ff input:not([type="checkbox"]):not([type="radio"]) { height: 34px; padding-top: 0 !important; padding-bottom: 0 !important; }
.hud select, .modal-card select { appearance: none; -webkit-appearance: none; padding-right: 28px !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%238793ad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-color: var(--surface); }
.hud select.ff-views { background-color: var(--accent-soft); }
.col-table th.loading { opacity: .6; }

/* ===== Themes. html[data-theme] swaps the tokens; the default (no attribute) is Cobalt. ===== */
html[data-theme="midnight"] {
  --bg: #0e1321; --bg-card: #151b2c; --bg-sunken: #1a2135; --surface: #151b2c; --hover: #1b2338; --selected: #22304f;
  --chrome: #070b15; --chrome-2: #111828; --chrome-line: #1f2940; --chrome-text: #b8c3dc; --chrome-mute: #7f8db0;
  --ink: #e9edf7; --ink-soft: #b4bdd3; --ink-mute: #7d88a6; --ink-faint: #5d678a;
  --line: #1f2740; --line-strong: #283152; --line-input: #334064;
  --accent: #5b8cff; --accent-2: #38e0ff; --accent-deep: #3f6fe6; --accent-soft: #1b2a4e;
  --good: #2fd38b; --good-soft: #0f2d22; --warn: #f5a524; --warn-soft: #3a2a0c; --warn-ink: #ffd27a; --warn-paper: #2a200c;
  --bad: #ff6b70; --bad-soft: #3a1518; --info: #3fc9e6; --info-soft: #0e2a33; --info-ink: #9fe6f5;
  --page-glow-1: #16203a; --page-glow-2: #121a2e; --hero-from: #1a2238; --hero-mid: #161e33; --hero-to: #141b2e;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35); --shadow-md: 0 16px 48px rgba(0,0,0,0.6);
  color-scheme: dark;
}
html[data-theme="midnight"] .card:where(.qcard, .cust-page, .carrier-page) { background: var(--surface); }
html[data-theme="midnight"] .hero { border-color: var(--line-strong); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.04); }
html[data-theme="midnight"] .hero .h1, html[data-theme="midnight"] .hero-date { color: var(--ink); }
html[data-theme="midnight"] .btn { color: var(--ink); border-color: var(--line-input); }
html[data-theme="midnight"] .btn.accent { color: #fff; }
html[data-theme="midnight"] .pill { color: var(--ink-soft); }
html[data-theme="midnight"] .pill.good { color: var(--good); } html[data-theme="midnight"] .pill.bad { color: var(--bad); } html[data-theme="midnight"] .pill.warn { color: var(--warn-ink); } html[data-theme="midnight"] .pill.info { color: var(--info-ink); } html[data-theme="midnight"] .pill.accent { color: #9db9ff; }
html[data-theme="midnight"] .leftmenu a.active, html[data-theme="midnight"] .leftmenu a:hover { background: var(--surface); }
html[data-theme="midnight"] .leftmenu .menu-task-main:hover { background: var(--surface); }
html[data-theme="midnight"] .col-table th { color: var(--ink-mute); }
html[data-theme="midnight"] .empty { background: var(--bg-sunken); border-color: var(--line-strong); }
html[data-theme="midnight"] .modal-overlay { background: rgba(0,0,0,0.6); }
html[data-theme="midnight"] .cp-card, html[data-theme="midnight"] .cp-input { background: var(--surface); color: var(--ink); }
html[data-theme="midnight"] .cp-item.on { background: var(--selected); } html[data-theme="midnight"] .cp-foot kbd { background: var(--bg-sunken); }
html[data-theme="midnight"] .hud select, html[data-theme="midnight"] .modal-card select { background-color: var(--surface); color: var(--ink); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%237d88a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
html[data-theme="midnight"] input, html[data-theme="midnight"] textarea { background: var(--surface); color: var(--ink); border-color: var(--line-input); }
html[data-theme="midnight"] .login-card { background: var(--surface); }
html[data-theme="midnight"] .note-chip.on, html[data-theme="midnight"] .tl-filter.on { background: var(--accent); color: #fff; }
html[data-theme="midnight"] .today-card { background: #0b1020; }

html[data-theme="harbor"] {
  --bg: #edf2f3; --bg-card: #ffffff; --bg-sunken: #f3f7f7; --hover: #eef6f6; --selected: #dcefee;
  --chrome: #0c1d22; --chrome-2: #132a30; --chrome-line: #1d3a41; --chrome-text: #bfd3d6; --chrome-mute: #86a3a8;
  --ink: #0f1d21; --ink-soft: #3f5559; --ink-mute: #7f949a;
  --line: #e6edee; --line-strong: #d9e4e6; --line-input: #c9d8db;
  --accent: #0f8b8d; --accent-2: #4fd1c5; --accent-deep: #0b6c6e; --accent-soft: #e0f2f1;
  --page-glow-1: #d9ecec; --page-glow-2: #e1f0ee; --hero-from: #ffffff; --hero-mid: #eef7f7; --hero-to: #e1f0ef;
  --info: #0f8b8d; --info-soft: #dff3f2; --info-ink: #0b6c6e;
}
html[data-theme="harbor"] .btn.accent { background: linear-gradient(180deg, #19a0a2 0%, var(--accent) 60%, #0c7f81 100%); border-color: var(--accent-deep); box-shadow: 0 1px 2px rgba(11,108,110,0.35), inset 0 1px 0 rgba(255,255,255,0.22); }
html[data-theme="harbor"] .pill.accent { color: var(--accent-deep); }
html[data-theme="harbor"] .ff select:focus, html[data-theme="harbor"] .ff input:focus, html[data-theme="harbor"] .search-row input:focus, html[data-theme="harbor"] .qf input:focus, html[data-theme="harbor"] .qf select:focus { box-shadow: 0 0 0 3px rgba(15,139,141,0.18); }

html[data-theme="ember"] {
  --bg: #f6f2ec; --bg-card: #ffffff; --bg-sunken: #f9f5f0; --hover: #fbf3ec; --selected: #f8e6d8;
  --chrome: #1c1310; --chrome-2: #2a1c17; --chrome-line: #3a2922; --chrome-text: #e3d2c8; --chrome-mute: #a89388;
  --ink: #1f1613; --ink-soft: #5a4a43; --ink-mute: #9a8a82;
  --line: #efe7e0; --line-strong: #e5dbd2; --line-input: #d8cabf;
  --accent: #d9541e; --accent-2: #f5a623; --accent-deep: #b4411a; --accent-soft: #fbe8de;
  --page-glow-1: #f6e4d6; --page-glow-2: #f7ebe0; --hero-from: #ffffff; --hero-mid: #fcf3ec; --hero-to: #f8e8dc;
  --info: #c2611f; --info-soft: #fbeadc; --info-ink: #8f4512;
}
html[data-theme="ember"] .btn.accent { background: linear-gradient(180deg, #e8622a 0%, var(--accent) 60%, #c64a18 100%); border-color: var(--accent-deep); box-shadow: 0 1px 2px rgba(180,65,26,0.35), inset 0 1px 0 rgba(255,255,255,0.22); }
html[data-theme="ember"] .pill.accent { color: var(--accent-deep); }
html[data-theme="ember"] .ff select:focus, html[data-theme="ember"] .ff input:focus, html[data-theme="ember"] .search-row input:focus, html[data-theme="ember"] .qf input:focus, html[data-theme="ember"] .qf select:focus { box-shadow: 0 0 0 3px rgba(217,84,30,0.18); }

/* ===== Signature touches: the route line behind the hero, numerals in a real mono, the brand mark ===== */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='760' height='160' viewBox='0 0 760 160'><path d='M30 120 C 180 40, 300 150, 440 70 S 640 20, 740 60' fill='none' stroke='%232f6bff' stroke-opacity='.22' stroke-width='2' stroke-dasharray='6 7' stroke-linecap='round'/><circle cx='30' cy='120' r='4' fill='%232f6bff' fill-opacity='.45'/><circle cx='740' cy='60' r='4' fill='%2322d3ee' fill-opacity='.7'/><circle cx='440' cy='70' r='2.5' fill='%232f6bff' fill-opacity='.35'/></svg>");
  background-repeat: no-repeat; background-position: right -40px top 8px; }
.hero > * { position: relative; }
html[data-theme="harbor"] .hero::before { filter: hue-rotate(-30deg) saturate(.8); }
html[data-theme="ember"] .hero::before { filter: hue-rotate(160deg) saturate(1.1); }
html[data-theme="midnight"] .hero::before { opacity: .8; }
.mono, .col-table td.mono, .hl-number, .cp-value.mono, .chip.mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -0.01em; }
.brand-mark { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); }
.topmenu { background: linear-gradient(180deg, color-mix(in srgb, var(--chrome) 85%, #ffffff 0%) 0%, var(--chrome) 100%); }
.topmenu .tab.active::after { background: var(--accent-2); box-shadow: 0 0 10px color-mix(in srgb, var(--accent-2) 60%, transparent); }
.qcard-title::after { background: linear-gradient(90deg, var(--line-strong), transparent); }
.col-table th.sorted { box-shadow: inset 0 -2px 0 var(--accent); }

/* theme picker in the agent menu */
.theme-row { display: flex; gap: 6px; padding: 8px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; flex-wrap: wrap; }
.theme-row .theme-label { width: 100%; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px; }
.theme-swatch { width: 44px; height: 30px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative; overflow: hidden; }
.theme-swatch::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 40%; }
.theme-swatch[data-theme="cobalt"] { background: #eef1f7; } .theme-swatch[data-theme="cobalt"]::before { background: #0b1120; } .theme-swatch[data-theme="cobalt"]::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 10px; height: 10px; border-radius: 50%; background: #2f6bff; }
.theme-swatch[data-theme="midnight"] { background: #151b2c; } .theme-swatch[data-theme="midnight"]::before { background: #070b15; } .theme-swatch[data-theme="midnight"]::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 10px; height: 10px; border-radius: 50%; background: #5b8cff; }
.theme-swatch[data-theme="harbor"] { background: #edf2f3; } .theme-swatch[data-theme="harbor"]::before { background: #0c1d22; } .theme-swatch[data-theme="harbor"]::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 10px; height: 10px; border-radius: 50%; background: #0f8b8d; }
.theme-swatch[data-theme="ember"] { background: #f6f2ec; } .theme-swatch[data-theme="ember"]::before { background: #1c1310; } .theme-swatch[data-theme="ember"]::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 10px; height: 10px; border-radius: 50%; background: #d9541e; }
.theme-swatch.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--surface) inset; }
.theme-swatch:focus-visible { outline: none; border-color: var(--accent); }

/* Billing: the queue switcher */
.bill-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.bill-tabs .tab-btn { border: 1px solid var(--line-input); background: var(--bg-card); color: var(--ink-soft); border-radius: 9px; padding: 6px 14px; font: inherit; cursor: pointer; }
.bill-tabs .tab-btn:hover { background: var(--bg-sunken); }
.bill-tabs .tab-btn.active { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); font-weight: 600; }

/* Communications: the number is a link to its order; the Messages tab */
.comms-number { color: var(--accent-deep); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.comms-number.no-link { color: inherit; cursor: default; text-decoration: none; }
.comms-order { cursor: pointer; margin-left: 6px; }
.msg-body { margin: 6px 0 2px; white-space: pre-wrap; color: var(--ink); }
.msg-row.outbound { border-left: 3px solid var(--accent); }
.msg-row.inbound { border-left: 3px solid var(--line-strong); }