/* ==========================================================
   billWright app — design system + shell + components
   Drop-in vanilla CSS. White-label via --accent + --logo-url.
   ========================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Tenant-overridable accent (default = billWright forest green) */
  --accent: #1F7A3D;
  --accent-deep: #15532A;
  --accent-soft: #E6EFE7;
  --accent-darker: #0F3D1F;

  /* Neutrals */
  --ink: #1A1A1A;
  --ink-soft: #2D2D2A;
  --muted: #6B6862;
  --cream: #ECEAE3;
  --cream-deep: #E4E1D7;
  --surface: #FFFFFF;
  --surface-2: #FBFAF5;
  --hair: #DDD8CB;
  --hair-strong: #C7C1B0;

  /* Signal */
  --red: #B23A2F;
  --red-soft: #FCEFEE;
  --amber: #B68B1E;

  --amber-deep: #6E5314;
  --amber-soft: #FAF1DC;
  --blue: #2A6FDB;
  --blue-soft: #E5EEFB;
  /* A fixed "live/now" green, independent of brand --accent (which a tenant can set to any color,
     incl. dark). Used for the schedule "today" line so it stays green on every tenant. */
  --green: #1F7A3D;
  --green-soft: #E6EFE7;

  /* Type */
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Geom */
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 0 rgba(20,20,20,.04), 0 14px 30px -22px rgba(20,20,20,.18);
  --shadow-pop: 0 1px 0 rgba(20,20,20,.05), 0 30px 70px -28px rgba(20,20,20,.4);

  --sidebar-w: 240px;
  --sidebar-collapsed-w: 64px;
  --topbar-h: 60px;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
/* App-wide anti-flash: while an in-place re-render is swapping the DOM (a save, status change, or
   notification refreshing the current screen), suppress entry animations + transitions for the
   couple of frames the swap takes, so slide/fade/pop animations do not replay = no flash. The
   router toggles body.bw-rerender around the swap and clears it on the next frame. Navigation does
   not get this class, so a freshly opened screen still animates in normally. */
body.bw-rerender *, body.bw-rerender *::before, body.bw-rerender *::after {
  animation-duration: 1ms !important;
  animation-delay: 0s !important;
  transition: none !important;
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -0.018em; line-height: 1.18; }
p { margin: 0; }
img { max-width: 100%; display: block; }
.mono { font-family: var(--mono); }
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ==========================================================
   APP SHELL — sidebar + topbar + content
   ========================================================== */
.app {
  display: grid;
  /* minmax(0, 1fr): the content column must be allowed to SHRINK below its content
     size, or wide children (tables, grids) blow the column past the viewport and the
     whole page scrolls horizontally. This keeps every screen viewport-bounded. */
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
  transition: grid-template-columns .25s ease;
}
.app.collapsed { grid-template-columns: var(--sidebar-collapsed-w) minmax(0, 1fr); }

/* ---------- Sidebar ---------- */
.sidebar {
  grid-area: sidebar;
  background: var(--ink);
  color: #ECEAE3;
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 20;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 14px;
  position: relative;
}
.sidebar .brand .logo {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 6px;
  background: var(--logo-url, none) center/contain no-repeat, var(--accent);
  display: grid; place-items: center;
  color: #fff; font-family: var(--serif); font-style: italic; font-size: 18px;
  text-transform: lowercase;
}
.sidebar .brand .logo[data-letter]::after {
  content: attr(data-letter);
  font-family: var(--serif); font-style: italic;
}
.sidebar .brand .biz {
  display: flex; flex-direction: column; min-width: 0;
}
.sidebar .brand .biz b {
  font-weight: 700; font-size: 14px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar .brand .biz span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: #8C887E; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app.collapsed .sidebar .brand .biz { display: none; }
.app.collapsed .sidebar .brand { padding: 18px 0 14px; justify-content: center; }
.app.collapsed .sidebar .collapse-btn { justify-content: center; padding: 14px 0; }

.sidebar nav {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 14px;
  /* Themed scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #3a3a37 transparent;
}
.sidebar nav::-webkit-scrollbar { width: 8px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb {
  background: #2a2a27;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.sidebar nav::-webkit-scrollbar-thumb:hover { background: #3a3a37; background-clip: padding-box; border: 2px solid transparent; }
.nav-group {
  margin-top: 18px;
}
.nav-group:first-child { margin-top: 6px; }
.nav-group .label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: #6B6862; text-transform: uppercase;
  padding: 6px 12px 8px;
}
.app.collapsed .nav-group .label { opacity: 0; pointer-events: none; height: 0; padding: 0; }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  color: #C7C1B0;
  font-weight: 500; font-size: 13.5px;
  position: relative;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.nav-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-link:focus-visible { outline: none; background: rgba(255,255,255,.08); color: #fff; }
.nav-link.active {
  background: rgba(31,122,61,.15);
  color: #fff;
}
.nav-link.active::before {
  content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px;
  background: var(--accent); border-radius: 3px;
}
.nav-link .ic {
  width: 18px; height: 18px; flex: 0 0 18px;
  stroke: currentColor; fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .9;
}
.nav-link .badge {
  margin-left: auto;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 10px; padding: 1px 6px; border-radius: 999px;
  font-weight: 600; letter-spacing: .04em;
}
/* Nested (level-3) items inside a hub - e.g. Status board/Safety under Schedule.
   Indented + lighter + smaller icon so they read as children of the row above. */
.nav-link.deep { padding-left: 34px; font-size: 13px; color: #ADA796; }
.nav-link.deep .ic { width: 15px; height: 15px; flex: 0 0 15px; opacity: .7; }
.app.collapsed .nav-link.deep { padding-left: 12px; }

/* Section tabs - a page-level strip linking sibling screens presented as one
   section (e.g. Expenses <-> Bank & Reconcile). Underline style, route links. */
.section-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hair); margin: 0 0 18px; }
.section-tabs a { padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.section-tabs a:hover { color: var(--ink); }
.section-tabs a.on { color: var(--accent-deep); border-bottom-color: var(--accent); }

/* Job costing (WO-30) */
.jc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 16px 0; }
.jc-stats .card-body { text-align: center; }
.jc-stat-n { font-size: 24px; font-weight: 600; }
.jc-good { color: var(--accent-deep); }
.jc-warn { color: var(--amber-deep, #6E5314); }
.jc-bad { color: var(--red); }
.jc-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.jc-block { background: var(--cream, #faf9f6); border: 1px solid var(--hair); border-radius: 10px; padding: 12px 14px; }
.jc-block h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.jc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; font-size: 13.5px; }
.jc-line + .jc-line { border-top: 1px solid var(--hair); }
.jc-line span:last-child { font-weight: 600; }
@media (max-width: 720px) { .jc-stats { grid-template-columns: repeat(2, 1fr); } .jc-detail { grid-template-columns: 1fr; } }

/* Collapsible sidebar categories — click the .label to toggle the whole .nav-group.
   State persists per-category in localStorage; init lives at the bottom of index-new.html. */
.sidebar .nav-group .label.collapsible {
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  user-select: none;
  /* Override the base .nav-group .label so the category reads as a clickable row,
     not a tiny ALL-CAPS subheader. Padding + radius match .nav-link below; a subtle
     pill background sits raised against the sidebar, and hover brightens the row. */
  padding: 9px 12px;
  margin: 2px 0;
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(255,255,255,.42);
  text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
}
.sidebar .nav-group .label.collapsible:hover {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.85);
}
.sidebar .nav-group .label .caret {
  display: inline-flex; align-items: center;
  margin-left: 8px; flex-shrink: 0;
  color: rgba(255,255,255,.4);
  transition: transform .18s ease, color .15s ease;
}
.sidebar .nav-group .label.collapsible:hover .caret { color: rgba(255,255,255,.7); }
.sidebar .nav-group.collapsed .label .caret { transform: rotate(-90deg); }
.sidebar .nav-group.collapsed .nav-link { display: none; }
/* When the group is collapsed but holds the active route, keep the active item visible
   so the user always sees where they are. */
.sidebar .nav-group.collapsed .nav-link.active { display: flex; }
.app.collapsed .nav-link .lbl,
.app.collapsed .nav-link .badge { display: none; }
.app.collapsed .nav-link { justify-content: center; }

.sidebar .collapse-btn {
  background: transparent; border: 0; color: #8C887E;
  padding: 14px 20px; text-align: left; font-size: 12px;
  font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase;
  border-top: 1px solid #2a2a27;
  display: flex; align-items: center; gap: 10px;
  transition: color .15s ease;
}
.sidebar .collapse-btn:hover { color: #fff; }
.app.collapsed .collapse-btn .lbl { display: none; }
.collapse-btn svg { transition: transform .2s ease; }
.app.collapsed .collapse-btn svg { transform: rotate(180deg); }

/* Theme toggle — sits at the very bottom of the sidebar, below the collapse button.
   Visually it's a near-twin of .collapse-btn so the two read as a single footer block.
   The icon shown depends on the current theme: dark mode shows the sun ("switch to light"),
   light mode shows the moon ("switch to dark") — driven by the data-theme attribute that
   the toggle script writes on <html>. When the sidebar is collapsed, the label hides like
   the collapse-btn label. State + behaviour live in the inline init script in index-new.html. */
.sidebar .theme-toggle {
  background: transparent; border: 0; color: #8C887E; cursor: pointer;
  padding: 14px 20px; text-align: left; font-size: 12px;
  font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase;
  border-top: 1px solid #2a2a27;
  display: flex; align-items: center; gap: 10px;
  transition: color .15s ease;
}
.sidebar .theme-toggle:hover { color: #fff; }
.sidebar .theme-toggle svg { stroke: currentColor; flex: 0 0 14px; }
.app.collapsed .sidebar .theme-toggle { justify-content: center; padding: 14px 0; }
.app.collapsed .sidebar .theme-toggle .lbl { display: none; }
/* Show exactly one icon at a time. Dark default: show the sun (“switch to light”).
   Light: show the moon (“switch to dark”). */
.theme-toggle .ic-moon { display: none; }
.theme-toggle .ic-sun  { display: inline-block; }
html[data-theme="light"] .theme-toggle .ic-moon { display: inline-block; }
html[data-theme="light"] .theme-toggle .ic-sun  { display: none; }

/* ---------- Job status pill (inline selector on the Jobs table) ----------
   The Jobs table renders each row's status as a small pill containing a coloured
   dot + a transparent <select>. Active rows glow with a soft pulsing halo around
   the green dot; completed rows show a flat grey dot. Clicking anywhere on the
   pill opens the native dropdown — the <select> is sized to fill the pill so
   anywhere is a hit target. Hover lightly tints the pill background. */
.job-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: var(--surface);
  cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
  position: relative;
}
.job-status:hover { background: var(--surface-2); }
.job-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 8px;
  display: inline-block;
  position: relative;
}
/* Active: green dot with a soft pulsing glow ring. The keyframes scale a same-coloured
   box-shadow ring out from the dot. Color matches --accent. */
.job-status-active { color: var(--accent-deep); border-color: rgba(31,122,61,.35); }
.job-status-active .job-status-dot {
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(31,122,61,.55);
  animation: job-status-pulse 1.8s ease-out infinite;
}
@keyframes job-status-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(31,122,61,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(31,122,61,0);   }
  100% { box-shadow: 0 0 0 0   rgba(31,122,61,0);   }
}
/* Complete: flat grey dot, no glow. */
.job-status-done { color: var(--muted); }
.job-status-done .job-status-dot { background: var(--muted); opacity: .7; }

/* The <select> sits on top, transparent, sized to fill the pill so the whole
   pill is clickable. The label text comes through the select — we just kill
   the native chrome so it inherits the pill's typography. */
.job-status-sel {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: transparent; border: 0; padding: 0 14px 0 0;
  font: inherit; color: inherit; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 7px) 50%,
    calc(100% - 3px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.job-status-sel:focus { outline: none; }
.job-status:focus-within { box-shadow: 0 0 0 3px rgba(31,122,61,.18); border-color: var(--accent); }

/* ---------- Topbar ---------- */
.topbar {
  grid-area: topbar;
  background: rgba(236,234,227,0.92);
  backdrop-filter: blur(8px) saturate(1.2);
  border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; gap: 18px;
  padding: 0 22px; position: sticky; top: 0; z-index: 15;
}
.topbar .crumbs {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  letter-spacing: .04em;
}
.topbar .crumbs b { color: var(--ink); font-weight: 500; }
.topbar .crumbs .sep { opacity: .4; }

.week-pill {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--hair); border-radius: 10px;
  background: var(--surface); margin-left: 14px;
  position: relative;
}
.week-pill .wp-nav {
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 9px; color: var(--ink-soft);
  display: grid; place-items: center;
  border-right: 1px solid var(--hair);
  transition: background .15s, color .15s;
}
.week-pill .wp-nav:first-child { border-radius: 10px 0 0 10px; }
.week-pill .wp-nav:hover { background: var(--cream); color: var(--ink); }
.week-pill .wp-val {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; cursor: pointer;
  padding: 7px 12px; color: var(--ink); font: inherit; font-weight: 600;
  border-right: 1px solid var(--hair);
  transition: background .15s;
}
.week-pill .wp-val:hover { background: var(--cream); }
.week-pill .wp-val .cal { color: var(--muted); flex: none; }
.week-pill .wp-val .lbl { font-size: 13px; white-space: nowrap; }
.week-pill .wp-val .range {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: .02em; white-space: nowrap;
}
.week-pill .wp-val .car { color: var(--muted); flex: none; transition: transform .18s ease; }
.week-pill .wp-val[aria-expanded="true"] .car { transform: rotate(180deg); }
.week-pill .wp-today {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; color: var(--accent-deep);
  padding: 8px 12px; border-radius: 0 10px 10px 0;
  transition: background .15s;
}
.week-pill .wp-today:hover { background: var(--accent-soft); }

/* Themed week dropdown (replaces the native <select> popup) */
.week-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 240px; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 12px; box-shadow: var(--shadow-pop);
  padding: 6px; display: none;
}
.week-pop.open { display: block; }
.week-pop-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: 8px 10px; border-radius: 8px; color: var(--ink); font: inherit;
  transition: background .12s;
}
.week-pop-item:hover { background: var(--cream); }
.week-pop-item.on { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.week-pop-item .d { flex: 1; font-size: 13px; white-space: nowrap; }
.week-pop-item .cur {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-soft);
  border: 1px solid rgba(31,122,61,.3); border-radius: 999px; padding: 1px 6px;
}
.week-pop-item.on .cur { background: var(--surface); }
.week-pop-item .chk { color: var(--accent); flex: none; }
.week-pop-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 13px; }

.topbar .spacer { flex: 1; }

.topbar .search {
  position: relative;
  width: 320px; max-width: 36vw;
}
.topbar .search input {
  width: 100%; background: var(--surface); border: 1px solid var(--hair);
  border-radius: 999px; padding: 8px 14px 8px 36px;
  font-size: 13px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.topbar .search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,122,61,.12); }
.topbar .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.topbar .search .kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  border: 1px solid var(--hair); border-radius: 4px; padding: 1px 5px;
  background: var(--cream);
}

.topbar .acct {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--hair); border-radius: 999px;
  background: var(--surface); padding: 4px 10px 4px 4px;
  cursor: pointer; position: relative;
  transition: border-color .15s, background .15s;
}
.topbar .acct:hover { border-color: var(--accent); }
.topbar .acct .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.topbar .acct .nm { font-size: 13px; font-weight: 600; }
.topbar .acct .car { color: var(--muted); }

.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--surface); border: 1px solid var(--hair); border-radius: 12px;
  box-shadow: var(--shadow-pop);
  min-width: 220px; padding: 6px; z-index: 30;
  display: none;
}
.acct-menu.open { display: block; }
.acct-menu a, .acct-menu button {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 0; background: transparent;
  width: 100%; text-align: left; color: var(--ink); border-radius: 8px;
  font-size: 13.5px;
}
.acct-menu a:hover, .acct-menu button:hover { background: var(--cream); }
.acct-menu .sep { height: 1px; background: var(--hair); margin: 4px 6px; }
.acct-menu .who {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 11px; border-bottom: 1px solid var(--hair); margin-bottom: 4px;
}
.acct-menu .who-av {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.acct-menu .who-id { min-width: 0; }
.acct-menu .who b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-menu .who span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.acct-menu .mic { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: color .15s; }
.acct-menu a:hover .mic, .acct-menu button:hover .mic { color: var(--accent); }
.acct-menu .lbl { flex: 1; }
.acct-menu .ext { width: 11px; height: 11px; flex: 0 0 11px; color: var(--muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-left: auto; }
.acct-menu .acct-ver {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--muted);
  text-align: center; padding: 9px 6px 3px; margin-top: 4px; border-top: 1px solid var(--hair);
}

/* ---------- Main ---------- */
.main {
  grid-area: main;
  padding: 26px 32px 60px;
  min-width: 0;
  overflow-x: hidden;
}
@media (max-width: 880px) {
  .main { padding: 18px 16px 60px; }
}

/* Hamburger base style: hidden on desktop. This MUST come BEFORE the <=880 block
   below, or (equal specificity) its display:none wins on source order and the
   hamburger never shows - leaving a mid-width band with no sidebar AND no menu. */
.topbar .hamb { display: none; background: transparent; border: 0; padding: 6px; color: var(--ink); margin-right: 6px; }

/* Mobile: sidebar slides over */
@media (max-width: 880px) {
  /* include .app.collapsed or its 2-class specificity beats this and the mobile
     layout never engages when the sidebar was collapsed (no sidebar + no menu). */
  .app, .app.collapsed { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform .25s ease; }
  .app.mobile-open .sidebar { transform: none; }
  .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 19; }
  .app.mobile-open .mobile-overlay { display: block; }
  .topbar .hamb { display: inline-flex; }
}

/* ==========================================================
   SCREEN HEAD + COMMON
   ========================================================== */
.screen-head {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.screen-head h1 {
  font-size: 28px; letter-spacing: -0.022em;
}
.screen-head h1 .accent { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent-deep); }
.screen-head .sub { color: var(--muted); margin-top: 4px; font-size: 14px; max-width: 580px; }
.screen-head .head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Section card */
.card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hair);
  background: var(--surface-2);
}
.card-head h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.005em; }
.card-head .meta { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.card-body { padding: 20px; }

/* Reusable collapsible card: add "collapsible" to a .card + a .card-chev caret in its head.
   The body hides until the card has "open"; clicking the head toggles it (wired in screens-core,
   ignoring clicks on head controls). Keeps long pages compact. */
.card.collapsible > .card-head { cursor: pointer; justify-content: flex-start; gap: 8px; }
/* Caret sits at the FAR LEFT, tight to the title; the title pushes everything else right. */
.card.collapsible > .card-head > h3 { margin-right: auto; }
.card.collapsible > .card-head > .card-chev { order: -1; }
.card.collapsible > .card-head > .drag-grip { order: -2; }
.card-chev { flex: 0 0 auto; color: var(--muted); transition: transform .15s ease; }
.card.collapsible.open > .card-head .card-chev { transform: rotate(90deg); }
.card.collapsible:not(.open) > :not(.card-head) { display: none; }

/* Job section drag-reorder (the grip handle + drop indicators) */
.drag-grip { display: inline-flex; align-items: center; color: var(--muted); cursor: grab; opacity: .5; flex: 0 0 auto; margin-right: 2px; }
.drag-grip:active { cursor: grabbing; }
.card-head:hover .drag-grip { opacity: .9; }
#jobSections > [data-section].dragging { opacity: .45; }
#jobSections > [data-section].drop-above { box-shadow: 0 -3px 0 var(--accent); }
#jobSections > [data-section].drop-below { box-shadow: 0 3px 0 var(--accent); }

/* ---- Office notifications: top-bar bell + dropdown inbox (injected by router.js) ---- */
/* The bell sits on the dark topbar, so it follows the existing topbar-link chrome (white-on-dark
   rgba), not the per-tenant accent. The dropdown panel below uses design tokens. */
.topbar-bell { position: relative; background: transparent; border: none; color: var(--ink); width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; flex: 0 0 auto; }
.topbar-bell:hover { background: var(--surface-2); color: var(--ink); }
.topbar-bell .notif-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; line-height: 16px; border-radius: 9px; text-align: center; font-family: var(--mono); box-sizing: border-box; }
.notif-panel { position: fixed; top: 60px; right: 16px; width: 360px; max-width: calc(100vw - 32px); max-height: 72vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--shadow-lg, 0 12px 40px rgba(20,40,25,.18)); z-index: 300; }
.notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--hair); position: sticky; top: 0; background: var(--surface); }
.notif-panel-head h4 { margin: 0; font-size: 14px; font-family: var(--sans); color: var(--ink); }
.notif-markall { background: none; border: none; color: var(--accent-deep); font-size: 10.5px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; padding: 4px; }
.notif-markall:hover { color: var(--accent-darker); }
.notif-row { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hair); cursor: pointer; transition: background .12s; }
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--surface-2); }
.notif-row.unread { background: var(--accent-soft); }
.notif-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 5px; visibility: hidden; }
.notif-row.unread .notif-dot { visibility: visible; }
.notif-row .nr-main { min-width: 0; flex: 1; }
.notif-row .nr-title { font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.notif-row .nr-body { font-size: 12px; color: var(--ink-soft); margin-top: 2px; overflow-wrap: anywhere; }
.notif-row .nr-time { font-size: 10.5px; color: var(--muted); margin-top: 4px; font-family: var(--mono); }
.notif-empty { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* The in-job Schedule breakdown timeline (.spg-*) moved to app/job-schedule-card.css
   (.jsc-*) when the card was redesigned + extracted to app/job-schedule-card.js. */

/* Pill color picker (Job Calendar drawer): the chosen color FILLS the whole pill - no inner
   rectangle. Style the native swatch pseudo-elements (can't be done via an inline style attr). */
input.jc-color-pill { width: 56px; height: 30px; padding: 0; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; }
input.jc-color-pill::-webkit-color-swatch-wrapper { padding: 0; }
input.jc-color-pill::-webkit-color-swatch { border: none; border-radius: 999px; }
input.jc-color-pill::-moz-color-swatch { border: none; border-radius: 999px; }

/* Two-col grid helpers */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .row-4 { grid-template-columns: repeat(2, 1fr); } .row-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .row-2, .row-3, .row-4 { grid-template-columns: 1fr; } }

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 600; font-size: 13.5px;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
  white-space: nowrap;
  background: transparent;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-darker); }
.btn-primary:disabled { background: var(--hair-strong); cursor: not-allowed; }
.btn-ghost { color: var(--ink); border-color: var(--hair-strong); background: var(--surface); }
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-quiet { color: var(--ink-soft); }
.btn-quiet:hover { background: var(--cream); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #8E2C24; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-lg { padding: 11px 18px; font-size: 14.5px; }
.btn .ic { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn .spin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.6px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Truss loader (the "build the truss" motif) ----------
   Big centered loader = app boot + per-screen fetches (animated SVG draws itself).
   Button submit spinner reuses the same truss silhouette via a CSS mask so it
   tints to currentColor (white on a green primary button). */
.bw-load {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 60px 20px; min-height: 200px; text-align: center;
}
.bw-load .bw-load-truss { width: 72px; height: auto; display: block; }
.bw-load .bw-load-lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.btn .spin {
  width: 15px; height: 15px; border: 0; border-radius: 0;
  background-color: currentColor;
  -webkit-mask: url('../assets/truss-mask.svg') center / contain no-repeat;
  mask: url('../assets/truss-mask.svg') center / contain no-repeat;
  animation: trussPulse 1.15s ease-in-out infinite;
}
@keyframes trussPulse { 0%, 100% { opacity: .4; transform: scale(.9); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .btn .spin { animation: none; opacity: .8; } }

/* ==========================================================
   KPI tile
   ========================================================== */
.kpi {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  min-width: 0;   /* shrink within the grid track instead of forcing it wider */
  transition: border-color .15s ease, transform .15s ease;
}
.kpi:hover { border-color: var(--hair-strong); transform: translateY(-1px); }
.kpi .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.kpi .val {
  font-size: clamp(20px, 2.2vw, 30px); font-weight: 800; letter-spacing: -0.025em; margin-top: 6px;
  font-family: var(--mono); color: var(--ink);
  overflow-wrap: anywhere;   /* a long figure scales down, then wraps, before it ever clips */
}
.kpi .val small { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.kpi .delta { margin-top: 4px; font-size: 12px; color: var(--muted); font-family: var(--mono); }
.kpi .delta.up { color: var(--accent-deep); }
.kpi .delta.dn { color: var(--red); }
.kpi .accent-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent);
}
.kpi.accent-warn .accent-bar { background: var(--amber); }
.kpi.accent-red .accent-bar { background: var(--red); }

/* ==========================================================
   TABLE
   ========================================================== */
.tbl {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: 13.5px;
}
.tbl thead th {
  text-align: left;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  padding: 12px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hair);
  white-space: nowrap;
}
.tbl thead th.sortable { cursor: pointer; }
.tbl thead th.sortable:hover { color: var(--ink); }
.tbl tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hair);
  vertical-align: middle;
}
.tbl tbody tr { transition: background .15s ease; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.num, .tbl th.num { text-align: right; font-family: var(--mono); }
.tbl td .row-actions {
  display: inline-flex; gap: 4px;
  opacity: 0; transition: opacity .15s ease;
}
.tbl tr:hover .row-actions { opacity: 1; }
.tbl td .row-actions button {
  background: transparent; border: 0; padding: 5px;
  border-radius: 6px; color: var(--muted);
}
.tbl td .row-actions button:hover { color: var(--ink); background: var(--cream); }

.tbl-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hair);
  background: var(--surface);
  flex-wrap: wrap;
}
.tbl-toolbar .filters { display: flex; gap: 6px; flex-wrap: wrap; }
.tbl-toolbar .spacer { flex: 1; }

/* Segmented tabs */
.seg {
  display: inline-flex; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--hair);
  border-radius: 8px;
  gap: 2px;
}
.seg button {
  background: transparent; border: 0; padding: 5px 10px;
  border-radius: 6px; color: var(--muted);
  font-size: 12.5px; font-weight: 500;
}
.seg button.on { background: var(--ink); color: #fff; }
.seg button:hover:not(.on) { color: var(--ink); }

/* Compact trade filter (price book + calculators) - a dropdown, so any number of
   trades fits without overflowing the toolbar. */
.trade-filter {
  font-family: var(--sans); font-size: 12.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--hair); border-radius: 8px;
  padding: 6px 10px; max-width: 240px; cursor: pointer;
}
.trade-filter:hover { border-color: var(--hair-strong); }

/* Themed compact select (category filters and similar). Matches the design-system field
   look with a token chevron so it never renders as a raw browser control. The chevron is a
   data-URI (CSS vars cannot live inside url()); its stroke #6B6862 is the --muted value, the
   same encoding used by .perm-role-sel and the rates/period selects. */
.seg-select {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--ink);
  background-color: var(--surface-2); border: 1px solid var(--hair); border-radius: 8px;
  padding: 6px 30px 6px 12px; min-height: 32px; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%236B6862' stroke-width='1.6' stroke-linecap='round'><path d='M3.5 5.5L7 9l3.5-3.5'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 11px;
}
.seg-select:hover { border-color: var(--hair-strong); }
.seg-select:focus { outline: none; border-color: var(--accent); }

/* Status pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  background: var(--cream); color: var(--ink-soft);
  border: 1px solid var(--hair);
  white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.pill.ok { background: var(--accent-soft); color: var(--accent-deep); border-color: rgba(31,122,61,.3); }
.pill.ok::before { background: var(--accent); }
.pill.warn { background: var(--amber-soft); color: var(--amber-deep, #6E5314); border-color: rgba(182,139,30,.35); }
.pill.warn::before { background: var(--amber); }
.pill.bad { background: var(--red-soft); color: #7B2920; border-color: rgba(178,58,47,.35); }
.pill.bad::before { background: var(--red); }
.pill.info { background: var(--blue-soft); color: #1D4F9A; border-color: rgba(42,111,219,.3); }
.pill.info::before { background: var(--blue); }
.pill.draft { background: var(--cream); color: var(--muted); }
.pill.draft::before { background: var(--muted); }

/* ==========================================================
   FORMS
   ========================================================== */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.field label .opt {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
}
.field input:not([type]), .field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=password], .field input[type=number], .field input[type=date],
.field input[type=time], .field input[type=datetime-local],
.field input[type=url], .field input[type=search], .field select, .field textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--ink);
  font-size: 13.5px;
  accent-color: var(--accent);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(31,122,61,.12);
}
.field textarea { resize: vertical; min-height: 80px; }

/* File inputs: theme the native picker to match the field box. The control reads as a themed
   field; ::file-selector-button is restyled as a ghost button (with a -webkit- fallback for
   older Safari) so "Choose files" looks like the app, not the raw browser widget. */
.field input[type=file] {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.field input[type=file]:hover { border-color: var(--hair-strong); }
.field input[type=file]:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(31,122,61,.12);
}
.field input[type=file]::file-selector-button {
  margin-right: 10px; padding: 5px 10px;
  border-radius: 6px; border: 1px solid var(--hair-strong);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-weight: 600; font-size: 12.5px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.field input[type=file]::file-selector-button:hover {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.field input[type=file]::-webkit-file-upload-button {
  margin-right: 10px; padding: 5px 10px;
  border-radius: 6px; border: 1px solid var(--hair-strong);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-weight: 600; font-size: 12.5px;
  cursor: pointer; -webkit-appearance: none;
}
.field input[type=file]::-webkit-file-upload-button:hover {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
/* Time inputs: render as siblings of the themed <select> — cream field (rule above) plus a
   muted picker glyph instead of the stark default clock, themed segment text, and no OS spin
   buttons or blue inner-selection highlight. */
.field input[type=time]::-webkit-datetime-edit { color: var(--ink); padding: 0; }
.field input[type=time]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.field input[type=time]::-webkit-inner-spin-button,
.field input[type=time]::-webkit-clear-button { display: none; -webkit-appearance: none; }
.field input[type=time]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  /* knock the default solid-black clock down to the muted ink used elsewhere */
  filter: grayscale(1);
  opacity: .45;
  transition: opacity .15s ease;
}
.field input[type=time]:hover::-webkit-calendar-picker-indicator { opacity: .8; }
.field input[type=time]:focus::-webkit-calendar-picker-indicator { opacity: .8; }
.field .err { display: none; color: var(--red); font-family: var(--mono); font-size: 11.5px; }
.field.error .err { display: block; }
.field.error input, .field.error select, .field.error textarea { border-color: var(--red); background: var(--red-soft); }
.field .hint { color: var(--muted); font-size: 12px; }

.money {
  position: relative;
}
.money::before {
  /* Overlay a band the height of the input (the field's last child), anchored to the
     field's bottom, and flex-center the $ within it. Robust to the label height above. */
  content: "$"; position: absolute; left: 12px; bottom: 0; height: 40px;
  display: inline-flex; align-items: center;
  color: var(--muted); font-family: var(--mono); font-size: 13px; pointer-events: none;
}
.money input { padding-left: 24px !important; font-family: var(--mono); }

/* ==========================================================
   TOAST
   ========================================================== */
.toast-host { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--ink); color: #ECEAE3;
  padding: 10px 16px; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.ok .ck { background: var(--accent); }
.toast.err .ck { background: var(--red); }
.toast .ck {
  width: 14px; height: 14px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 14px;
}
.toast .ck svg { width: 8px; height: 8px; stroke: #fff; stroke-width: 2.5; fill: none; }

/* ==========================================================
   MODAL / DRAWER
   ========================================================== */
.modal-host {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: rgba(20,20,20,.45);
  padding: 24px;
}
.modal-host.open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  width: 560px; max-width: 100%;
  max-height: calc(100vh - 48px);
  overflow: auto;
  animation: pop .25s cubic-bezier(.2,.7,.2,1);
}
.modal.wide { width: 920px; }
.modal.xwide { width: 1160px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--hair);
}
.modal-head h3 { font-size: 17px; }
.modal-head .x {
  background: transparent; border: 0; padding: 6px;
  border-radius: 6px; color: var(--muted);
}
.modal-head .x:hover { color: var(--ink); background: var(--cream); }
.modal-body { padding: 22px; }
.modal-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 22px; border-top: 1px solid var(--hair);
  background: var(--surface-2);
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Drawer variant (right-edge) */
.drawer-host {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20,20,20,.35);
  display: none;
}
.drawer-host.open { display: block; }
.drawer-pane {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: 560px; max-width: 100%;
  background: var(--surface);
  box-shadow: -30px 0 60px -30px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  animation: drwrIn .25s cubic-bezier(.2,.7,.2,1);
}
.drawer-pane.wide { width: 760px; }
@keyframes drwrIn { from { transform: translateX(20px); opacity: .8; } to { transform: none; opacity: 1; } }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 20px; border-bottom: 1px solid var(--hair);
}
.drawer-body { flex: 1; overflow: auto; padding: 20px; }
.drawer-foot { padding: 14px 20px; border-top: 1px solid var(--hair); background: var(--surface-2); display: flex; gap: 10px; justify-content: flex-end; }

/* ==========================================================
   DROPZONE
   ========================================================== */
.dropzone {
  border: 1.5px dashed var(--hair-strong);
  border-radius: 12px;
  padding: 22px;
  background: var(--surface-2);
  display: grid; place-items: center; gap: 8px; text-align: center;
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone svg { color: var(--accent-deep); }
.dropzone .ttl { font-weight: 600; }
.dropzone .hint { color: var(--muted); font-size: 12.5px; }

/* ==========================================================
   EMPTY / LOADING / ERROR
   ========================================================== */
.empty {
  text-align: center; padding: 60px 30px;
}
.empty .truss { width: 80px; height: 80px; margin: 0 auto 14px; opacity: .45; }
.empty .truss path, .empty .truss line { stroke: var(--ink); stroke-width: 1.2; fill: none; }
.empty h3 { font-size: 18px; margin-bottom: 6px; }
.empty h3 .accent { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent-deep); }
.empty p { color: var(--muted); max-width: 380px; margin: 0 auto 14px; font-size: 13.5px; }

.loading-row {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  padding: 16px;
}
.skel {
  height: 12px; border-radius: 4px;
  background: linear-gradient(90deg, var(--hair) 0%, var(--hair-strong) 50%, var(--hair) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  font-size: 13.5px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.alert .ic {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 11px; flex: 0 0 18px;
}
.alert.err { background: var(--red-soft); color: #7B2920; border-color: rgba(178,58,47,.35); }
.alert.err .ic { background: var(--red); color: #fff; }
.alert.info { background: var(--accent-soft); color: var(--accent-deep); border-color: rgba(31,122,61,.3); }
.alert.info .ic { background: var(--accent); color: #fff; }
.alert.warn { background: var(--amber-soft); color: var(--amber-deep, #6E5314); border-color: rgba(182,139,30,.35); }
.alert.warn .ic { background: var(--amber); color: #fff; }

/* ==========================================================
   PIPELINE / KANBAN (Work view)
   ========================================================== */
.pipeline {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px; align-items: start;
}
@media (max-width: 1200px) { .pipeline { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .pipeline { grid-template-columns: 1fr; } }
.pipeline .col {
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 12px;
  min-height: 200px;
  padding: 10px;
}
.pipeline .col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.pipeline .col-head b { font-weight: 600; color: var(--ink); }
.pipeline .ticket {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  position: relative;
}
.pipeline .ticket:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.pipeline .ticket .id {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase;
}
.pipeline .ticket .ttl { font-weight: 600; margin: 4px 0 8px; font-size: 13.5px; }
.pipeline .ticket .meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.pipeline .ticket .amt { font-family: var(--mono); font-weight: 600; color: var(--ink); margin-left: auto; }

/* ==========================================================
   Misc utilities
   ========================================================== */
.hr-dash { border: 0; border-top: 1px dashed var(--hair-strong); margin: 16px 0; }
.muted { color: var(--muted); }
.accent-text { color: var(--accent-deep); }
.tag {
  display: inline-flex; padding: 2px 7px;
  background: var(--cream); border: 1px solid var(--hair); border-radius: 4px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--ink-soft);
}
.tag.accent { background: var(--accent-soft); color: var(--accent-deep); border-color: rgba(31,122,61,.3); }

.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.w-full { width: 100%; }
.text-r { text-align: right; }

/* Truss decorative SVG glyph */
.truss-glyph path, .truss-glyph line { stroke: currentColor; stroke-width: 1.2; fill: none; }

/* PDF/document-style preview (invoices, quotes) */
.doc {
  background: #fff; border: 1px solid var(--hair); border-radius: 10px;
  padding: 36px;
  font-size: 13px; color: var(--ink);
  box-shadow: 0 20px 60px -30px rgba(0,0,0,.2);
}
.doc .doc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; gap: 24px; }
.doc .doc-head .biz b { display: block; font-size: 20px; }
.doc .doc-head .biz span { color: var(--muted); font-size: 12px; line-height: 1.5; display: block; }
.doc .doc-head .doc-meta {
  text-align: right;
}
.doc .doc-head .doc-meta .nm {
  font-family: var(--serif); font-style: italic; font-size: 28px;
  color: var(--accent-deep);
}
.doc .doc-head .doc-meta .nbr { font-family: var(--mono); color: var(--muted); margin-top: 6px; font-size: 12px; }
.doc .to { margin-bottom: 24px; }
.doc .to .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.doc .to b { font-size: 14px; display: block; margin-top: 4px; }
.doc .lines { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.doc .lines th, .doc .lines td { padding: 10px 8px; border-bottom: 1px solid var(--hair); text-align: left; font-size: 12.5px; }
.doc .lines th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--ink); }
.doc .lines td.num, .doc .lines th.num { text-align: right; font-family: var(--mono); }
.doc .totals { margin-left: auto; width: 280px; }
.doc .totals .ln { display: flex; justify-content: space-between; padding: 6px 0; font-family: var(--mono); font-size: 12.5px; }
.doc .totals .ln.total { border-top: 1px solid var(--ink); font-weight: 700; font-size: 15px; padding-top: 10px; }
.doc .stripe { height: 4px; background: var(--accent); border-radius: 2px; margin: -36px -36px 28px; }

/* ============================================================
   PIPELINE SCREEN  (deal-centric quote→paid view)
   Drop-in from design handoff. Uses existing tokens only.
   ============================================================ */

.pipeline-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(20,20,20,.04), 0 14px 30px -22px rgba(20,20,20,.18);
  overflow: hidden;
}

/* ---------- Header strip + overview ---------- */
.pl-head {
  padding: 22px 24px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hair);
}
.pl-head h3 {
  font-size: 19px; letter-spacing: -0.012em;
  display: flex; align-items: baseline; gap: 12px;
}
.pl-head h3 .serif-it {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--accent-deep);
}
.pl-head h3 .meta {
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--muted); font-weight: 400;
}
.pl-overview {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-top: 14px;
}
@media (max-width: 720px) { .pl-overview { grid-template-columns: repeat(2, 1fr); } }
.pl-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 10px;
  position: relative;
}
.pl-tile .lbl {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.pl-tile .val {
  font-family: var(--mono); font-size: 22px;
  font-weight: 700; letter-spacing: -0.015em; color: var(--ink);
}
.pl-tile .val.bad { color: var(--red); }
.pl-tile .delta { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.pl-tile .stripe {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); border-radius: 10px 0 0 10px;
}
.pl-tile.warn .stripe { background: var(--amber); }
.pl-tile.red  .stripe { background: var(--red); }

/* ---------- Filter / group toolbar ---------- */
.pl-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 24px;
  border-bottom: 1px solid var(--hair);
  background: var(--surface);
}
.pl-toolbar .seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--hair);
  border-radius: 8px;
}
.pl-toolbar .seg button {
  background: transparent; border: 0; padding: 5px 12px;
  border-radius: 6px; color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.pl-toolbar .seg button.on { background: var(--ink); color: #fff; }
.pl-toolbar .seg button:hover:not(.on) { color: var(--ink); }
.pl-toolbar .seg button .count {
  margin-left: 6px; font-family: var(--mono);
  font-size: 10.5px; opacity: .8;
}
/* Awaiting-payment tab glows amber when there's money still owed on completed work */
@keyframes pl-awaitglow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(182,139,30,.35); }
  50%      { box-shadow: 0 0 0 3px rgba(182,139,30,.20), 0 0 9px 1px rgba(182,139,30,.42); }
}
.pl-toolbar .seg button.glow:not(.on) {
  color: var(--amber-deep, #6E5314); background: rgba(182,139,30,.10);
  animation: pl-awaitglow 1.8s ease-in-out infinite;
}
.pl-toolbar .seg button.glow .count { color: var(--amber); opacity: 1; font-weight: 700; }
.pl-toolbar .spacer { flex: 1; }
.pl-toolbar .search-mini {
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 6px;
  font: inherit; font-size: 12.5px;
  width: 200px;
}

/* ---------- Deal row ---------- */
.deals { display: flex; flex-direction: column; }
.deals .group-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px 10px;
  background: var(--cream);
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.deals .group-head b { color: var(--ink); font-weight: 500; }
.deals .group-head .group-total { margin-left: auto; color: var(--ink); font-weight: 500; }

.deal {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  gap: 24px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--hair);
  align-items: center;
  position: relative;
  transition: background .15s ease;
}
.deal:hover { background: var(--surface-2); }
.deal:last-child { border-bottom: 0; }

/* Left identity column */
.deal-id .title { font-weight: 700; font-size: 15px; line-height: 1.25; letter-spacing: -0.008em; margin-bottom: 4px; }
.deal-id .client {
  font-size: 13px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.deal-id .client::before {
  content: ""; width: 6px; height: 6px; background: var(--accent);
  border-radius: 50%; display: inline-block;
}
.deal-id .refs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.deal-id .ref {
  font-family: var(--mono); font-size: 10.5px;
  background: var(--surface-2); border: 1px solid var(--hair);
  padding: 2px 8px; border-radius: 4px; color: var(--ink-soft);
}
.deal-id .ref.accent { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); }
.deal-id .ref.muted { color: var(--muted); border-style: dashed; }

/* Center: progress flow */
.flow {
  display: grid; grid-template-columns: repeat(6, 1fr);
  position: relative; padding: 6px 0 10px;
}
.flow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 16px;
  height: 2px; background: var(--hair); z-index: 0;
}
.flow.p-1::before { background: linear-gradient(to right, var(--accent) 10%, var(--hair) 10%); }
.flow.p-2::before { background: linear-gradient(to right, var(--accent) 30%, var(--hair) 30%); }
.flow.p-3::before { background: linear-gradient(to right, var(--accent) 50%, var(--hair) 50%); }
.flow.p-4::before { background: linear-gradient(to right, var(--accent) 70%, var(--hair) 70%); }
.flow.p-5::before { background: linear-gradient(to right, var(--accent) 90%, var(--hair) 90%); }
.flow.p-6::before { background: var(--accent); }
.flow.lost::before { background: linear-gradient(to right, var(--accent) var(--lost-pct, 30%), var(--red) var(--lost-pct, 30%), var(--red) 100%); }

.flow .step {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; position: relative; z-index: 1; min-width: 0;
}
.flow .dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--hair-strong);
  position: relative; transition: all .2s ease;
}
.flow .step .lbl {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  text-align: center; line-height: 1.3;
  max-width: 70px; word-wrap: break-word;
}
.flow .step .sub {
  font-family: var(--mono); font-size: 9.5px; color: var(--muted);
  text-align: center; line-height: 1.2;
}
.flow .step.done .dot { background: var(--accent); border-color: var(--accent); }
.flow .step.done .dot::after {
  content: ""; position: absolute; inset: 3px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M2 6l2.5 2.5L10 3" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}
.flow .step.done .lbl { color: var(--accent-deep); }
.flow .step.current .dot {
  background: var(--surface);
  border: 3px solid var(--accent);
  width: 18px; height: 18px;
  box-shadow: 0 0 0 4px var(--accent-soft);
  animation: pl-pulse 2.2s ease-in-out infinite;
}
.flow .step.current .lbl { color: var(--accent-deep); font-weight: 600; }
@keyframes pl-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); }
  50%      { box-shadow: 0 0 0 6px rgba(31,122,61,.12); }
}
.flow .step.skipped .dot { background: var(--surface); border-style: dashed; border-color: var(--hair-strong); }
.flow .step.skipped .lbl { color: var(--hair-strong); text-decoration: line-through; }
.flow .step.lost .dot { background: var(--red); border-color: var(--red); }
.flow .step.lost .dot::after {
  content: ""; position: absolute; inset: 3px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M3 3l6 6M9 3l-6 6" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>') center/contain no-repeat;
}
.flow .step.lost .lbl { color: var(--red); font-weight: 600; }
.flow .step.stalled .dot { background: var(--amber); border-color: var(--amber); }
.flow .step.stalled .lbl { color: var(--amber-deep, #6E5314); font-weight: 600; }

/* Right: money + actions */
.deal-right { display: grid; gap: 10px; }
/* ===== pipeline lifecycle track — ported from the Pipeline Visualizer design ===== */
.pl-track { width: 100%; }
.pl-track .track { display: flex; align-items: flex-start; position: relative; }
.pl-track .track > .step { flex: 1 1 0; min-width: 0; }
.pl-track .step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 4px; }
.pl-track .step::before, .pl-track .step::after { content: ""; position: absolute; top: 18.5px; height: 3px; z-index: 0; background: var(--hair); }
.pl-track .step::before { left: 0; right: 50%; }
.pl-track .step::after  { left: 50%; right: 0; }
.pl-track .step:first-child::before { display: none; }
.pl-track .step.done::before, .pl-track .step.done::after,
.pl-track .step.current::before { background: var(--accent); }
.pl-track .step.skipped::before, .pl-track .step.skipped::after { background: repeating-linear-gradient(90deg, var(--hair-strong) 0 5px, transparent 5px 9px); }
.pl-track .step.current::after {
  left: 50%; right: -50%;
  background-image: linear-gradient(90deg, var(--hair) 0 42%, var(--accent) 50%, var(--hair) 58% 100%);
  background-size: 260% 100%; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, #000 0 52%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0 52%, transparent 100%);
  animation: plt-segflow 1.6s linear infinite;
}
.pl-track .step.current + .step::before { display: none; }
.pl-track .step:last-child::after { display: none; }
@keyframes plt-segflow { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.pl-track .node {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface);
  border: 2px solid var(--hair); color: var(--muted); transition: all .25s ease;
}
.pl-track .node svg { width: 15px; height: 15px; }
.pl-track .node .num { font-family: var(--mono); font-size: 12px; font-weight: 700; }
.pl-track .step.done .node { background: var(--accent); border-color: var(--accent); color: #fff; }
.pl-track .step.upcoming .node { background: var(--surface); border-color: var(--hair-strong); color: var(--hair-strong); }
.pl-track .step.skipped .node { border-style: dashed; opacity: .6; }
.pl-track .step.lost .node { background: var(--red); border-color: var(--red); color: #fff; }
.pl-track .step.current .node {
  background: #fff; border-color: var(--accent); color: var(--accent-deep);
  box-shadow: 0 0 0 0 rgba(31,122,61,.45);
  animation: plt-pulse 2.1s cubic-bezier(.4,0,.6,1) infinite;
}
.pl-track .step.current .node .num { color: var(--accent-deep); }
.pl-track .step.current .node .core { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); animation: plt-corebreathe 2.1s ease-in-out infinite; }
@keyframes plt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,122,61,.42), 0 0 14px 1px rgba(31,122,61,.30); }
  70%  { box-shadow: 0 0 0 12px rgba(31,122,61,0), 0 0 16px 2px rgba(31,122,61,.18); }
  100% { box-shadow: 0 0 0 0 rgba(31,122,61,0), 0 0 14px 1px rgba(31,122,61,.30); }
}
@keyframes plt-corebreathe { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .82; } }
.pl-track .lbl { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); margin-top: 8px; line-height: 1.2; }
.pl-track .step.upcoming .lbl { color: var(--muted); font-weight: 500; }
.pl-track .step.skipped .lbl { color: var(--hair-strong); font-weight: 500; text-decoration: line-through; }
.pl-track .step.current .lbl { color: var(--accent-deep); font-weight: 700; }
.pl-track .step.lost .lbl { color: var(--red); font-weight: 700; }
.pl-track .sub { font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
/* closed / paid / lost deals dim out of the way of active work */
/* Grey only fully-closed deals (paid / lost / completed+paid). Awaiting-pay deals stay full-strength. */
.deal.is-closed { opacity: .55; }
.deal.is-closed:hover { opacity: .9; }
.deal-money {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 8px; overflow: hidden;
}
.deal-money .ln { background: var(--surface-2); padding: 6px 10px; text-align: center; }
.deal-money .ln .l {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 2px;
}
.deal-money .ln .v {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--ink);
}
.deal-money .ln.out .v { color: var(--red); }
.deal-money .ln.paid .v { color: var(--accent-deep); }
.deal-action { display: flex; gap: 6px; }
.btn-action {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 12px;
  background: var(--accent); color: #fff;
  border: 0; border-radius: 8px;
  font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.btn-action:hover { background: var(--accent-darker); transform: translateY(-1px); }
.btn-action.secondary {
  background: transparent; color: var(--ink);
  border: 1px solid var(--hair-strong);
}
.btn-action.secondary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-action.muted {
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--hair); cursor: default;
}
.btn-action.muted:hover { background: var(--surface-2); transform: none; }
.btn-action .ic { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.btn-expand {
  background: transparent; border: 0; color: var(--muted);
  width: 32px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 6px;
  transition: color .15s, background .15s, transform .15s;
}
.btn-expand:hover { color: var(--ink); background: var(--cream); }
.deal.open .btn-expand { transform: rotate(180deg); color: var(--accent-deep); }

/* Expanded timeline */
.deal-timeline {
  grid-column: 1 / -1;
  display: none;
  padding-top: 16px;
  margin-top: 12px;
  border-top: 1px dashed var(--hair-strong);
}
.deal.open .deal-timeline { display: block; }
.timeline {
  display: grid; position: relative; padding: 0 0 0 22px;
}
.tl-evt {
  display: grid; grid-template-columns: 110px 1fr auto;
  gap: 14px; padding: 8px 0;
  position: relative; align-items: center;
}
/* Connector drawn per-row from each dot down to the next, so the rail begins and ends
   exactly on a dot (no stray line above the first / below the last) and the dots sit
   dead-centre on it. */
.tl-evt::after {
  content: ""; position: absolute; left: -15px; top: 50%;
  height: calc(100% + 1px); width: 2px; background: var(--hair); z-index: 0;
}
.tl-evt:last-child::after { display: none; }
.tl-evt::before {
  content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; z-index: 1;
  background: var(--surface); border: 2px solid var(--hair-strong);
}
.tl-evt.ok::before  { background: var(--accent); border-color: var(--accent); }
.tl-evt.bad::before { background: var(--red);   border-color: var(--red); }
.tl-evt .date {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: .04em;
  display: flex; flex-direction: column; gap: 1px; line-height: 1.3;
}
.tl-evt .date .tl-time { font-size: 10px; color: var(--hair-strong); letter-spacing: .02em; }
.tl-evt .desc { color: var(--ink); font-size: 13px; }
.tl-evt .amt { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.tl-evt .amt.pos { color: var(--accent-deep); }
.tl-evt .amt.neg { color: var(--red); }
.tl-actions {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--hair);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.tl-actions button {
  background: var(--surface); border: 1px solid var(--hair-strong);
  padding: 6px 12px; border-radius: 6px;
  font: inherit; font-size: 12.5px; color: var(--ink-soft); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.tl-actions button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Stalled tag */
.deal .stalled-tag {
  position: absolute; top: 12px; right: 12px;
  background: var(--amber-soft); color: var(--amber-deep, #6E5314);
  border: 1px solid var(--amber);
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 1100px) {
  .deal { grid-template-columns: 1fr; gap: 14px; padding: 18px 20px; }
  .deal-id { padding-bottom: 6px; border-bottom: 1px dashed var(--hair); }
}
@media (max-width: 640px) {
  .pl-toolbar { padding: 10px 14px; }
  .pl-toolbar .seg { width: 100%; flex-wrap: wrap; }
  .pl-toolbar .seg button { flex: 1; }
  .pl-toolbar .search-mini { width: 100%; }
  .deal { padding: 16px 14px; }
  .deal-money { grid-template-columns: 1fr 1fr 1fr; }
  .flow .step .lbl { font-size: 9px; }
}

/* ==========================================================
   QUOTES & PROPOSALS — proposal funnel board
   (ported from Claude-design "Quotes & Proposals" mockup)
   ========================================================== */
.quotes-board {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}

/* ---------- Header strip + overview ---------- */
.qb-head {
  padding: 22px 24px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hair);
}
.qb-head h3 {
  font-size: 19px; letter-spacing: -0.012em;
  display: flex; align-items: baseline; gap: 12px;
  margin: 0;
}
.qb-head h3 .serif-it {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--accent-deep);
}
.qb-head h3 .meta {
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--muted); font-weight: 400;
}
.qb-overview {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-top: 14px;
}
@media (max-width: 900px) { .qb-overview { grid-template-columns: repeat(2, 1fr); } }
.qb-tile {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 8px;
}
.qb-tile .stripe {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); border-radius: 8px 0 0 8px;
}
.qb-tile.warn .stripe { background: var(--amber); }
.qb-tile .lbl {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.qb-tile .val {
  font-family: var(--mono); font-size: 22px;
  font-weight: 700; letter-spacing: -0.015em; color: var(--ink);
}
.qb-tile .delta { font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* ---------- Lanes ---------- */
.qb-lanes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  background: var(--surface);
}
.q-lane {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--hair);
  min-width: 0;
}
.q-lane:last-child { border-right: 0; }
.qln-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hair);
}
.qln-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.qln-title b { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.qln-title .qln-hint {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .04em; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qln-count {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--hair);
  padding: 1px 8px; border-radius: 10px;
}
.qln-banner {
  margin: 10px 14px 0;
  padding: 8px 12px;
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  color: var(--amber-deep, #6E5314);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
}
.qln-body {
  flex: 1;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 120px;
}
.qln-empty {
  color: var(--muted); font-size: 12.5px;
  padding: 24px 6px; text-align: center;
}
.qln-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--hair);
  background: var(--surface-2);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.qln-foot .mono { color: var(--ink); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 13px; }

/* ---------- Quote card ---------- */
.q-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 10px 12px 10px 14px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column; gap: 4px;
}
.q-card::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent;
  border-radius: 8px 0 0 8px;
}
.q-card.win::before { background: var(--accent); }
.q-card.loss::before { background: var(--red); opacity: .55; }
.q-card.loss { background: var(--surface-2); }
.q-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.qc-top { display: flex; align-items: center; gap: 6px; }

/* Doc-type micro-badge — Quote vs Proposal */
.qc-doctype {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 3px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  background: var(--cream); color: var(--ink-soft);
  border: 1px solid var(--hair);
  flex-shrink: 0;
}
.qc-doctype.proposal {
  background: var(--accent-soft);
  border-color: rgba(31,122,61,.3);
  color: var(--accent-deep);
  font-family: var(--serif); font-style: italic;
  font-size: 12px; font-weight: 400;
}

.qc-num {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.qc-dot { width: 3px; height: 3px; background: var(--hair-strong); border-radius: 50%; }
.qc-age {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); letter-spacing: .04em;
}
.qc-amt {
  margin-left: auto;
  font-family: var(--mono); font-size: 13px;
  font-weight: 700; color: var(--ink);
  letter-spacing: -0.005em;
}
.qc-ttl {
  font-weight: 600; font-size: 13.5px;
  line-height: 1.3; color: var(--ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.qc-client {
  font-size: 12.5px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qc-client::before {
  content: ""; width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%; display: inline-block;
  flex-shrink: 0;
}
.q-card.loss .qc-client::before { background: var(--muted); }
.qc-foot {
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed var(--hair);
}
.qc-sig {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-soft);
  font-family: var(--mono); letter-spacing: .01em;
}
.qc-sig.muted { color: var(--muted); }
.qc-sig.warn  { color: #8A6510; }
.qc-sig.win   { color: var(--accent-deep); font-weight: 600; }
.qc-sig.loss  { color: var(--muted); }

@media (max-width: 1100px) {
  .qb-lanes { grid-template-columns: 1fr; }
  .q-lane { border-right: 0; border-bottom: 1px solid var(--hair); }
  .q-lane:last-child { border-bottom: 0; }
}

/* ---------- Finalize button on decided cards ---------- */
.qc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qc-fin {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: var(--surface); border: 1px solid var(--hair);
  border-radius: 5px; padding: 2px 8px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.qc-fin:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.qc-fin:disabled { opacity: .5; cursor: default; }

/* ---------- History (finalized) ---------- */
.qh-blank { padding: 28px 24px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.qh-group { border-bottom: 1px solid var(--hair); }
.qh-group:last-child { border-bottom: 0; }
.qh-ghead {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px; background: var(--surface-2);
  border-bottom: 1px solid var(--hair);
}
.qh-ghead b { font-size: 13px; font-weight: 600; }
.qh-ghead .qh-gtotal { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.qh-row {
  display: grid;
  grid-template-columns: 18px 96px minmax(0,1fr) 150px 130px 92px auto;
  align-items: center; gap: 12px;
  padding: 9px 22px; border-bottom: 1px solid var(--hair);
  cursor: pointer; font-size: 12.5px;
  transition: background .12s;
}
.qh-row:last-child { border-bottom: 0; }
.qh-row:hover { background: var(--surface-2); }
.qh-row.qh-done { opacity: .5; }
.qh-row.qh-done:hover { opacity: .72; }
.tbl tbody tr.job-done td { opacity: .5; }
.tbl tbody tr.job-done:hover td { opacity: .72; }
.qh-row .qc-doctype { width: 16px; height: 16px; }
.qh-num { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qh-ttl { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qh-client { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qh-when { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.qh-amt { text-align: right; font-weight: 700; color: var(--ink); }
.qh-restore {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: var(--surface); border: 1px solid var(--hair);
  border-radius: 5px; padding: 2px 8px; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.qh-restore:hover { border-color: var(--accent); color: var(--accent-deep); }
.qh-restore:disabled { opacity: .5; cursor: default; }

@media (max-width: 820px) {
  .qh-row { grid-template-columns: 16px minmax(0,1fr) auto auto; }
  .qh-num, .qh-when { display: none; }
}

/* ---------- Quote/Proposal detail — facts strip + linked invoice ---------- */
.qd-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.qd-fact {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; min-width: 120px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 8px;
}
.qd-fact-l { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.qd-fact-v { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.qd-invrow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--hair); border-radius: 8px;
  background: var(--surface-2); text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s;
}
.qd-invrow:hover { border-color: var(--accent); background: var(--surface); }
.qd-invrow .qd-invamt { margin-left: auto; font-weight: 700; color: var(--ink); }

/* ---- Quote / proposal line-item editor (quoteEditor modal) ---- */
.qe-tbl { width: 100%; }
.qe-tbl thead th { font-size: 10.5px; }
.qe-tbl tbody td { padding: 5px 7px; vertical-align: middle; }
.qe-tbl tbody tr:hover { background: transparent; }
.qe-tbl td input { width: 100%; padding: 7px 9px; border: 1px solid var(--hair); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 13.5px; }
.qe-tbl td input:focus { outline: none; border-color: var(--accent); }
.qe-tbl td input.qe-qty, .qe-tbl td input.qe-price { font-family: var(--mono); text-align: right; }
.qe-tbl td.qe-amt { font-family: var(--mono); white-space: nowrap; color: var(--ink); font-weight: 600; }
.qe-del { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 7px; border-radius: 6px; transition: color .15s, background .15s; }
.qe-del:hover { color: var(--red); background: var(--red-soft); }
.qe-totals { display: grid; gap: 4px; justify-content: end; margin: 16px 0 4px; }
.qe-totals > div { display: flex; gap: 24px; justify-content: space-between; min-width: 230px; font-size: 13.5px; color: var(--muted); }
.qe-totals > div b { color: var(--ink); font-family: var(--mono); }
.qe-totals .qe-grand { border-top: 1px solid var(--hair); padding-top: 7px; margin-top: 3px; font-size: 15px; }
.qe-totals .qe-grand span, .qe-totals .qe-grand b { color: var(--ink); font-weight: 700; }
.qe-secs { border: 1px solid var(--hair); border-radius: 9px; padding: 8px 12px 4px; margin-bottom: 14px; background: var(--surface-2); }
.qe-secs > summary { cursor: pointer; font-size: 10.5px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 4px 0; list-style: none; }
.qe-secs > summary::-webkit-details-marker { display: none; }
.qe-secs > summary .opt { margin-left: 6px; }
.qe-sec { padding: 11px 0; border-bottom: 1px solid var(--hair); }
.qe-sec:last-child { border-bottom: 0; }
.qe-sec-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.qe-sec-h input[type=checkbox] { width: auto; }
.qe-sec-body { margin-top: 8px; display: grid; gap: 8px; }
.qe-sec-body textarea, .qe-sec-body input[type=text] { width: 100%; padding: 7px 9px; border: 1px solid var(--hair); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 13px; font-family: inherit; }
.qe-sec-body textarea:focus, .qe-sec-body input[type=text]:focus { outline: none; border-color: var(--accent); }
.qe-sec-body textarea { resize: vertical; min-height: 58px; }
.qe-sec-body .qe-inl { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.qe-sec-body .qe-inl input[type=checkbox] { width: auto; }

/* ---- payment schedule builder (quoteEditor: deposit + milestones) ---- */
.qe-sched { margin-bottom: 14px; }
.qe-sched-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.qe-sched-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.qe-sched-tbl { width: 100%; }
.qe-sched-tbl thead th { font-size: 10.5px; }
.qe-sched-tbl tbody td { padding: 5px 7px; vertical-align: middle; }
.qe-sched-tbl tbody tr:hover { background: transparent; }
.qe-sched-tbl td input, .qe-sched-tbl td select { width: 100%; padding: 7px 9px; border: 1px solid var(--hair); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 13px; }
.qe-sched-tbl td input:focus, .qe-sched-tbl td select:focus { outline: none; border-color: var(--accent); }
.qe-sched-tbl td input.qe-s-val { font-family: var(--mono); text-align: right; }
.qe-sched-tbl td input.qe-s-cond { font-size: 12px; color: var(--ink-soft); }
.qe-sched-tbl td.qe-s-amt { font-family: var(--mono); white-space: nowrap; color: var(--ink); font-weight: 600; }
.qe-sched-sum { display: flex; align-items: baseline; gap: 10px; justify-content: flex-end; margin-top: 12px; font-size: 13.5px; }
.qe-sched-sum b { color: var(--ink); }
.qe-sched-rem { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.qe-sched-rem.over { color: var(--red); }

/* ==========================================================
   WEEK VIEW  (Timesheet → Week View tab)
   Columnized day-by-day timeline. Employee submissions render as
   positioned blocks on the hour grid; owner/admin entries (hours
   only) sit in the untimed strip below. Ported from the standalone
   week-view.html design. --row-h / --timeline-h are set by JS.
   ========================================================== */
.wv-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
.wv-head h1 { font-size:24px; letter-spacing:-0.022em; line-height:1.1; }
.wv-head h1 .accent { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent-deep); }
.wv-head .sub { color:var(--muted); font-size:13.5px; margin-top:4px; }

.wv-step { display:inline-flex; align-items:center; background:var(--surface); border:1px solid var(--hair); border-radius:10px; overflow:hidden; }
.wv-step button { background:transparent; border:0; cursor:pointer; padding:9px 12px; color:var(--ink-soft); display:grid; place-items:center; border-right:1px solid var(--hair); }
.wv-step button:last-child { border-right:0; }
.wv-step button:hover { background:var(--cream); color:var(--ink); }
.wv-step .val { padding:9px 18px; font-size:13px; font-weight:600; border-right:1px solid var(--hair); min-width:210px; text-align:center; }
.wv-step .val .range { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em; margin-left:6px; }
.wv-step .today-btn { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--accent-deep); padding:9px 14px; }

.wv-toolbar { display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.wv-chips { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--hair); border-radius:999px; padding:4px; flex-wrap:wrap; }
.wv-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:transparent; border:0; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-soft); transition:background .15s, color .15s; }
.wv-chip.on { background:var(--accent-soft); color:var(--accent-deep); }
.wv-chip .av { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--mono); font-size:9.5px; font-weight:700; }
.wv-chip .ct { font-family:var(--mono); font-size:11px; background:var(--cream); color:var(--muted); padding:1px 6px; border-radius:6px; margin-left:2px; }
.wv-chip.on .ct { background:rgba(31,122,61,.15); color:var(--accent-deep); }

.wv-summary { display:flex; gap:10px; margin-left:auto; align-items:stretch; flex-wrap:wrap; }
.wv-stat { background:var(--surface); border:1px solid var(--hair); border-radius:10px; padding:8px 16px; display:flex; align-items:baseline; gap:8px; }
.wv-stat .l { font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.wv-stat .v { font-family:var(--mono); font-size:16px; font-weight:700; }

.wv-grid { --row-h:44px; --timeline-h:616px; background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg); overflow-x:auto; overflow-y:hidden; }
.wv-empty { padding:60px 24px; text-align:center; }
.wv-empty .ic { width:56px; height:56px; margin:0 auto 16px; background:var(--surface-2); border-radius:50%; display:grid; place-items:center; color:var(--muted); }
.wv-empty .ic svg { stroke:currentColor; }
.wv-empty h3 { font-size:18px; }
.wv-empty p { color:var(--muted); font-size:14px; margin-top:6px; max-width:340px; margin-inline:auto; }
.wv-grid-head { display:grid; grid-template-columns:56px repeat(7, minmax(132px, 1fr)); min-width:calc(56px + 132px * 7); border-bottom:1px solid var(--hair); background:var(--surface-2); }
.wv-grid-head .corner { border-right:1px solid var(--hair); }
.wv-day-head { padding:14px 14px 12px; border-right:1px solid var(--hair); text-align:left; }
.wv-day-head:last-child { border-right:0; }
.wv-day-head.today { background:var(--accent-soft); border-bottom:2px solid var(--accent); margin-bottom:-1px; }
.wv-day-head .dow { font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; font-weight:600; }
.wv-day-head.today .dow { color:var(--accent-deep); }
.wv-day-head .dnum { font-size:22px; font-weight:700; letter-spacing:-0.022em; margin-top:2px; display:flex; align-items:baseline; gap:8px; }
.wv-day-head .dnum .hrs { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted); margin-left:auto; }
.wv-day-head.today .dnum .hrs { color:var(--accent-deep); }
.wv-day-head.empty .dnum, .wv-day-head.empty .dow { opacity:.5; }

.wv-grid-body { display:grid; grid-template-columns:56px repeat(7, minmax(132px, 1fr)); min-width:calc(56px + 132px * 7); position:relative; }
.wv-hours { border-right:1px solid var(--hair); background:var(--surface-2); position:relative; }
.wv-hours .hr-label { position:absolute; right:8px; transform:translateY(-50%); font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.wv-col { border-right:1px solid var(--hair); position:relative; min-height:var(--timeline-h); background-image:linear-gradient(to bottom, transparent calc(var(--row-h) - 1px), var(--hair) calc(var(--row-h) - 1px), var(--hair) var(--row-h), transparent var(--row-h)); background-size:100% calc(var(--row-h) * 2); background-position:0 0; }
.wv-col:last-child { border-right:0; }
.wv-col.today { background-color:rgba(230,239,231,.4); }
.wv-col.weekend { background-color:var(--surface-2); }
.wv-col::before { content:""; position:absolute; inset:0; background-image:linear-gradient(to bottom, transparent calc(var(--row-h) - 1px), rgba(0,0,0,.04) calc(var(--row-h) - 1px), rgba(0,0,0,.04) var(--row-h), transparent var(--row-h)); background-size:100% var(--row-h); background-position:0 calc(var(--row-h) / 2); pointer-events:none; }

.wv-block { position:absolute; left:6px; right:6px; border-radius:8px; padding:8px 10px; overflow:hidden; color:var(--ink); cursor:pointer; transition:transform .12s ease, box-shadow .15s, z-index 0s linear .12s; z-index:1; font-size:12px; line-height:1.4; box-shadow:0 1px 0 rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.04); background:var(--bg, var(--accent-soft)); border-left:3px solid var(--accent); display:flex; flex-direction:column; gap:2px; min-height:20px; }
.wv-block:hover { transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.06); z-index:10; transition-delay:0s; }
.wv-block.lane-2 { left:calc(50% + 3px); right:6px; }
.wv-block.lane-1-of-2 { left:6px; right:calc(50% + 3px); }
.wv-block.lane-1-of-3 { left:6px; right:calc(66.6% + 3px); }
.wv-block.lane-2-of-3 { left:calc(33.3% + 3px); right:calc(33.3% + 3px); }
.wv-block.lane-3-of-3 { left:calc(66.6% + 3px); right:6px; }
.wv-block.pending { opacity:.92; }
.wv-block.rejected { background-image:repeating-linear-gradient(135deg, transparent 0 6px, rgba(178,58,47,.08) 6px 12px); border-left-color:var(--red) !important; }
.wv-block.short { padding:4px 8px; flex-direction:row; align-items:center; gap:6px; font-size:11px; }
.wv-block.short .blk-job, .wv-block.short .blk-task, .wv-block.short .blk-meta { display:none; }
.wv-block.short .blk-times { font-size:10.5px; }
.wv-block .blk-head { display:flex; align-items:center; gap:6px; min-width:0; }
.wv-block .blk-emp { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--mono); font-size:9px; font-weight:700; flex:0 0 18px; background:var(--accent); }
.wv-block .blk-emp.admin { background:var(--ink-soft); }
.wv-block .blk-times { font-family:var(--mono); font-weight:600; font-size:11px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wv-block .blk-times .hrs { color:var(--muted); font-weight:500; margin-left:4px; }
.wv-block .blk-job { font-weight:700; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.wv-block .blk-task { color:var(--ink-soft); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wv-block .blk-meta { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; font-weight:600; margin-top:2px; }
.wv-block .src-pill { display:inline-flex; align-items:center; gap:3px; padding:1px 5px; border-radius:4px; background:rgba(255,255,255,.6); color:var(--ink-soft); font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(0,0,0,.06); }
.wv-block .src-pill svg { width:8px; height:8px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.wv-block .status-pill { display:inline-flex; align-items:center; gap:3px; padding:1px 5px; border-radius:4px; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; background:rgba(182,139,30,.18); color:var(--amber-deep, #6E5314); border:1px solid rgba(182,139,30,.3); }
.wv-block .status-pill.ok { background:rgba(31,122,61,.15); color:var(--accent-deep); border-color:rgba(31,122,61,.3); }
.wv-block .status-pill.bad { background:rgba(178,58,47,.12); color:#7B2920; border-color:rgba(178,58,47,.35); }

.wv-now { position:absolute; left:-3px; right:0; height:0; border-top:1.5px solid var(--red); z-index:4; pointer-events:none; }
.wv-now::before { content:""; position:absolute; left:-4px; top:-5px; width:9px; height:9px; border-radius:50%; background:var(--red); }

.wv-untimed { display:grid; grid-template-columns:56px repeat(7, minmax(132px, 1fr)); min-width:calc(56px + 132px * 7); border-top:1px solid var(--hair); background:var(--surface-2); min-height:80px; }
.wv-untimed-rail { border-right:1px solid var(--hair); padding:14px 8px 0; text-align:right; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; font-weight:600; line-height:1.3; }
.wv-untimed-col { border-right:1px solid var(--hair); padding:10px 8px; display:flex; flex-direction:column; gap:6px; max-height:240px; overflow-y:auto; }
.wv-untimed-col:last-child { border-right:0; }
.wv-untimed-col.today { background-color:rgba(230,239,231,.5); }
.wv-untimed-blk { border-left:3px solid var(--ink-soft); background:var(--surface); border-radius:6px; padding:7px 9px; font-size:11.5px; cursor:pointer; transition:transform .12s, box-shadow .15s; display:flex; flex-direction:column; gap:3px; text-align:left; width:100%; }
.wv-untimed-blk:hover { transform:translateY(-1px); box-shadow:0 6px 14px -8px rgba(0,0,0,.15); }
.wv-untimed-blk .ut-hd { display:flex; align-items:center; gap:6px; font-weight:700; }
.wv-untimed-blk .ut-emp { width:16px; height:16px; border-radius:50%; background:var(--ink-soft); color:#fff; font-family:var(--mono); font-size:8px; font-weight:700; display:grid; place-items:center; flex:0 0 16px; }
.wv-untimed-blk .ut-hrs { margin-left:auto; font-family:var(--mono); font-weight:700; }
.wv-untimed-blk .ut-job { font-size:11px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wv-untimed-blk .ut-task { font-size:10.5px; color:var(--muted); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.wv-legend { margin-top:18px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.wv-legend .swatch { display:inline-flex; align-items:center; gap:6px; }
.wv-legend .swatch i { display:inline-block; width:18px; height:12px; border-radius:3px; border-left:3px solid; }

@media (max-width: 1100px) {
  .wv-grid-head, .wv-grid-body, .wv-untimed { grid-template-columns:48px repeat(7, minmax(130px, 1fr)); min-width:1000px; }
  .wv-grid { overflow-x:auto; }
}

/* ── Week View: per-day expand button, view toggle, hint, horizontal grid view ── */
.wv-day-head { position:relative; }
.wv-day-head .dnum { padding-right:24px; }
.wv-expand { position:absolute; top:8px; right:8px; width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--hair); border-radius:6px; background:var(--surface); color:var(--muted); cursor:pointer; padding:0; opacity:.5; transition:opacity .15s, background .15s, color .15s, border-color .15s; }
.wv-day-head:hover .wv-expand { opacity:1; }
.wv-expand svg { width:13px; height:13px; }
.wv-expand:hover { background:var(--accent-soft); color:var(--accent-deep); border-color:var(--accent); }
.wv-expand.on { opacity:1; background:var(--accent); color:#fff; border-color:var(--accent); }
.wv-day-head.expanded { background:var(--accent-soft); }

.wv-viewseg { display:inline-flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--hair); border-radius:9px; padding:3px; align-self:center; }
.wv-viewseg button { width:30px; height:28px; display:grid; place-items:center; border:0; background:transparent; color:var(--muted); border-radius:6px; cursor:pointer; padding:0; transition:background .15s, color .15s; }
.wv-viewseg button svg { width:16px; height:16px; }
.wv-viewseg button:hover { color:var(--ink); background:var(--surface-2); }
.wv-viewseg button.on { background:var(--accent-soft); color:var(--accent-deep); }

.wv-hint { margin-top:10px; font-size:11.5px; color:var(--muted); }

.wvg-wrap { background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg); overflow-x:auto; }
.wvg { display:grid; }
.wvg-dhead { padding:12px 12px 10px; border-bottom:1px solid var(--hair); border-right:1px solid var(--hair); background:var(--surface-2); display:flex; align-items:baseline; gap:7px; }
.wvg-dhead:last-child { border-right:0; }
.wvg-dhead.today { background:var(--accent-soft); }
.wvg-dhead.weekend { background:var(--cream); }
.wvg-dhead .dow { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.wvg-dhead .dnum { font-size:16px; font-weight:700; letter-spacing:-0.02em; }
.wvg-phead { padding:12px; border-bottom:1px solid var(--hair); border-right:1px solid var(--hair); background:var(--surface-2); display:flex; align-items:center; gap:8px; position:sticky; left:0; z-index:2; }
.wvg-phead.corner { z-index:3; }
.wvg-phead .av { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--mono); font-size:10px; font-weight:700; flex:none; }
.wvg-phead .nm { font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wvg-phead .ph-h { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted); font-weight:600; }
.wvg-cell { border-bottom:1px solid var(--hair); border-right:1px solid var(--hair); padding:8px; display:flex; flex-direction:column; gap:6px; min-height:62px; min-width:0; }
.wvg-cell:last-child { border-right:0; }
.wvg-cell.today { background-color:rgba(230,239,231,.35); }
.wvg-none { color:var(--muted); font-family:var(--mono); font-size:12px; opacity:.5; }
.wvg-chip { text-align:left; border:1px solid var(--hair); border-left:3px solid var(--accent); background:var(--bg, var(--surface)); border-radius:7px; padding:7px 9px; cursor:pointer; display:flex; flex-direction:column; gap:2px; transition:transform .1s, box-shadow .15s; width:100%; }
.wvg-chip:hover { transform:translateY(-1px); box-shadow:0 6px 14px -8px rgba(0,0,0,.18); }
.wvg-chip.pending { opacity:.9; }
.wvg-chip.rejected { background-image:repeating-linear-gradient(135deg, transparent 0 6px, rgba(178,58,47,.08) 6px 12px); border-left-color:var(--red); }
.wvg-chip-h { display:flex; align-items:baseline; gap:6px; }
.wvg-chip-h .t { font-family:var(--mono); font-weight:700; font-size:11.5px; color:var(--ink); }
.wvg-chip-h .h { margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--muted); font-weight:600; }
.wvg-chip-j { font-weight:700; font-size:12px; color:var(--ink); line-height:1.3; }
.wvg-chip-k { font-size:11px; color:var(--ink-soft); line-height:1.3; }
.wvg-chip-r { font-family:var(--mono); font-size:9.5px; letter-spacing:.03em; color:var(--muted); text-transform:uppercase; font-weight:600; margin-top:1px; }

/* ── Time Log: batch-select bar ── */
.entries-batch { display:flex; align-items:center; gap:14px; padding:4px 2px 12px; flex-wrap:wrap; }
.entries-batch .le-all-lbl { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); cursor:pointer; user-select:none; }
.entries-batch .le-all-lbl input { width:15px; height:15px; cursor:pointer; }
.entries-batch #leDelSel { margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.entries-batch #leDelSel svg { width:13px; height:13px; }
.entries-batch #leDelSel:not(:disabled) { color:var(--red); border-color:var(--red); }
.entries-batch #leDelSel:disabled { opacity:.5; cursor:default; }
.le-check { width:15px; height:15px; cursor:pointer; vertical-align:middle; }

/* ── Verify: batch-approve bar + per-submission checkbox ── */
.verify-batch { display:flex; align-items:center; gap:14px; padding:2px 2px 14px; flex-wrap:wrap; }
.verify-batch .le-all-lbl { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); cursor:pointer; user-select:none; }
.verify-batch .le-all-lbl input { width:15px; height:15px; cursor:pointer; }
.verify-batch #vApproveSel { margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.verify-batch #vApproveSel svg { width:13px; height:13px; }
.verify-batch #vApproveSel:disabled { opacity:.5; cursor:default; }
.v-check { width:16px; height:16px; cursor:pointer; flex:none; }

/* ==========================================================
   REPORTS HUB — Profit by job / Cash flow / Tax estimate
   (Section O — ported from Claude Design. All classes below are
    net-new; they don't exist elsewhere in this stylesheet, so
    appending here is conflict-free.)
   ========================================================== */
.ts-tabs { display: flex; align-items: stretch; flex: 1; }
.ts-tab {
  position: relative;
  background: transparent; border: 0;
  padding: 16px 22px;
  font-size: 14px; font-weight: 600;
  color: var(--muted);
  letter-spacing: -0.005em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  cursor: pointer;
}
.ts-tab:hover { color: var(--ink); }
.ts-tab.on { color: var(--accent-deep); border-bottom-color: var(--accent); }

.rep-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hair); }

.rep-tbl { width: 100%; border-collapse: collapse; }
.rep-tbl thead th {
  text-align: left; padding: 11px 16px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--hair); font-weight: 600; white-space: nowrap;
}
.rep-tbl thead th.num { text-align: right; }
.rep-tbl tbody td { padding: 12px 16px; border-bottom: 1px solid var(--hair); font-size: 13.5px; vertical-align: top; }
.rep-tbl tbody td.num { text-align: right; vertical-align: middle; }
.rep-tbl tbody tr:hover { background: var(--surface-2); }
.rep-tbl tfoot td { padding: 13px 16px; font-size: 13.5px; border-top: 2px solid var(--hair-strong); }
.rep-tbl tfoot td.num { text-align: right; }
.rep-tbl .rep-total { background: var(--surface-2); }

/* revenue-vs-cost mini bar under each job name */
.rep-bar { display: flex; gap: 2px; margin-top: 7px; height: 5px; max-width: 220px; }
.rep-bar span { border-radius: 2px; min-width: 2px; }
.rep-bar .rep-bar-rev { background: var(--accent); }
.rep-bar .rep-bar-cost { background: var(--amber); }

/* cash-flow chart */
.cf-chart {
  display: flex; align-items: flex-end; gap: 10px; height: 200px;
  padding: 8px 4px 0; border-bottom: 1px solid var(--hair); margin-bottom: 12px;
}
.cf-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; height: 100%; }
.cf-bars { flex: 1; display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.cf-bars span { width: 38%; max-width: 22px; border-radius: 3px 3px 0 0; min-height: 2px; }
.cf-in { background: var(--accent); }
.cf-out { background: var(--amber); }
.cf-x { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 8px; text-transform: uppercase; letter-spacing: .04em; }
.cf-run { font-size: 11px; font-weight: 700; margin-top: 3px; color: var(--ink); }
.cf-run.neg { color: var(--red); }
.cf-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--ink-soft); align-items: center; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.cf-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* cash-flow trend chart (running balance, green↑ / red↓) */
.cf-trend { width: 100%; height: auto; max-height: 280px; display: block; margin-bottom: 12px; }
.cf-trend .cf-axis { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
.cf-trend .cf-pt { font-family: var(--mono); font-size: 11px; font-weight: 700; }
/* ===== end Reports Hub (Section O) ===== */

/* ===== Pipeline ref links + invoice dropdown (Section O) ===== */
.deal-id .ref-link { cursor: pointer; text-decoration: none; }
.deal-id .ref-link:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.deal-id .ref-invsel {
  font-family: var(--mono); font-size: 10.5px;
  background: var(--surface-2); border: 1px solid var(--hair);
  padding: 2px 8px; border-radius: 4px; color: var(--ink-soft);
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.deal-id .ref-invsel:hover { border-color: var(--accent); }
/* ===== end Pipeline ref links ===== */

/* ==========================================================
   ESTIMATING — runner + builder (+ dormant price book)
   Added to wire screens-estimating.js into the cream theme.
   Vars (--surface/--hair/--accent/--muted/--red/--radius/etc.)
   already exist above, so these inherit the live theme.
   ========================================================== */
.est-pickrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.est-pick-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.est-pick { background: var(--surface); border: 1px solid var(--hair); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-weight: 600; min-width: 240px; }
.est-pick:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,122,61,.12); }

.est-grid { display: grid; grid-template-columns: 1fr 400px; gap: 24px; align-items: start; }
.est-out { position: sticky; top: 16px; }

.est-break .est-sub-h { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
.est-break .est-sub-h:not(:first-child) { margin-top: 16px; }
.est-rows { display: grid; gap: 0; }
.est-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--hair); font-size: 13.5px; }
.est-row:last-child { border-bottom: 0; }
.est-row.qty { color: var(--muted); }
.est-row.qty .est-row-v { font-size: 12.5px; }
.est-row.err .est-row-v { color: var(--red); font-size: 12px; font-family: var(--mono); text-align: right; }
.est-row-l { min-width: 0; }
.est-u { color: var(--muted); font-size: 11px; }
.est-totals { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); display: grid; gap: 8px; }
.est-trow { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; }
.est-trow.muted { color: var(--muted); font-size: 12.5px; }
.est-trow.est-total { padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--hair); font-size: 16px; font-weight: 700; }
.est-trow.est-total .mono { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.est-calib { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--hair); line-height: 1.5; }
.est-actions { margin-top: 16px; }
.est-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.est-toggle input { width: 16px; height: 16px; accent-color: var(--accent); }

/* builder */
.cb-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--hair); cursor: pointer; transition: background .12s; }
.cb-row:last-child { border-bottom: 0; }
.cb-row:hover { background: var(--surface-2); }
.cb-row > :first-child { flex: 1; min-width: 0; }
.cb-row-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cb-row-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.cb-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cb-template { text-align: left; background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--radius); padding: 14px; cursor: pointer; transition: border-color .12s, transform .12s; }
.cb-template:hover { border-color: var(--accent); transform: translateY(-1px); }
.cb-template-name { font-weight: 700; font-size: 13.5px; }
.cb-template-desc { color: var(--muted); font-size: 12px; margin: 4px 0 8px; line-height: 1.4; }
.cb-template-meta { font-size: 10.5px; color: var(--muted); }

.cb-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
.cb-preview { position: sticky; top: 16px; }
.cb-preview-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.cb-item { position: relative; padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--radius); margin-bottom: 10px; background: var(--surface); }
.cb-item:last-child { margin-bottom: 0; }
.cb-item.has-err { border-color: var(--red); background: var(--red-soft); }
.cb-item-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr .8fr; gap: 10px; }
.cb-formula-grid { display: grid; grid-template-columns: 1.4fr 1fr auto auto; gap: 10px; align-items: end; }
.cb-item .field { margin-bottom: 0; }
.cb-item .field label { font-size: 10.5px; }
.cb-item .field input, .cb-item .field select {
  background: var(--surface-2); border: 1px solid var(--hair); border-radius: 8px;
}
.cb-item .field input:focus, .cb-item .field select:focus {
  border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(31,122,61,.12);
}
.cb-item .field input, .cb-item .field select { padding: 7px 9px; font-size: 12.5px; }
.cb-expr-field { margin-top: 10px; }
.cb-expr { font-size: 13px !important; }
.cb-rm { position: absolute; top: 8px; right: 8px; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 5px; line-height: 0; }
.cb-rm:hover:not(:disabled) { color: var(--red); background: var(--surface); }
.cb-rm:disabled { opacity: .3; cursor: not-allowed; }
.cb-rm.sm { position: static; padding: 2px; }
.cb-row-tools { display: flex; gap: 4px; position: absolute; top: 8px; right: 8px; }
.cb-mv { background: none; border: 1px solid var(--hair); color: var(--muted); cursor: pointer; width: 22px; height: 22px; border-radius: 5px; font-size: 12px; line-height: 1; }
.cb-mv:hover:not(:disabled) { color: var(--ink); border-color: var(--hair-strong); }
.cb-mv:disabled { opacity: .3; cursor: not-allowed; }
.cb-row-tools + .cb-err { margin-right: 70px; }

.cb-opts { margin-top: 10px; padding: 10px; background: var(--surface); border: 1px solid var(--hair); border-radius: 8px; }
.cb-opts-h { font-size: 11px; color: var(--ink-soft); font-weight: 600; margin-bottom: 8px; }
.cb-opt-row { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; margin-bottom: 6px; align-items: center; }
.cb-opt-row input { padding: 6px 9px; font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 6px; }

.cb-err { color: var(--red); font-size: 11.5px; font-family: var(--mono); margin-top: 6px; line-height: 1.4; }
.cb-err:empty { display: none; }
.cb-err-block { padding: 0 18px 14px; margin-top: -4px; }
.cb-err-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.cb-err-list li { font-size: 12.5px; }

.seg-sm button { padding: 6px 12px; font-size: 12px; }

/* ---- price book (dormant: no route yet) ---- */
.pb-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.pb-cart { position: sticky; top: 16px; }
.pb-search { flex: 1; min-width: 160px; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.pb-search:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(31,122,61,.12); }

.pb-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--hair); }
.pb-row:last-child { border-bottom: 0; }
.pb-row-main { flex: 1; min-width: 0; cursor: pointer; }
.pb-price { font-weight: 700; font-size: 14px; white-space: nowrap; }
.pb-unit { color: var(--muted); font-weight: 400; font-size: 11px; }
.pb-row-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.pb-cart-card .card-body { padding-top: 14px; }
.pb-cart-lines { display: grid; gap: 10px; }
.pb-cart-line { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px dashed var(--hair); }
.pb-cl-main { min-width: 0; }
.pb-cl-main b { font-size: 12.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-cl-amt { font-size: 13px; min-width: 56px; text-align: right; }
.pb-qty { display: flex; align-items: center; gap: 2px; }
.pb-qty button { width: 22px; height: 26px; border: 1px solid var(--hair); background: var(--surface-2); cursor: pointer; font-size: 14px; color: var(--ink-soft); }
.pb-qty button:first-child { border-radius: 6px 0 0 6px; }
.pb-qty button:last-child { border-radius: 0 6px 6px 0; }
.pb-qty button:hover { background: var(--cream); }
.pb-qty input { width: 42px; height: 26px; border: 1px solid var(--hair); border-left: 0; border-right: 0; text-align: center; font-family: var(--mono); font-size: 12px; background: var(--surface); }
.pb-totals { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); display: grid; gap: 7px; }
.pb-trow { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.pb-trow.muted { color: var(--muted); font-size: 12px; }
.pb-trow.pb-total { padding-top: 9px; margin-top: 2px; border-top: 1px solid var(--hair); font-size: 15px; font-weight: 700; }
.pb-trow.pb-total .mono { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }

@media (max-width: 1000px) {
  .pb-grid { grid-template-columns: 1fr; }
  .pb-cart { position: static; }
}

@media (max-width: 1000px) {
  .est-grid, .cb-grid { grid-template-columns: 1fr; }
  .est-out, .cb-preview { position: static; }
  .cb-item-grid { grid-template-columns: 1fr 1fr; }
  .cb-formula-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================
   MATERIAL TRENDS (Insights) — cards grid
   ========================================================== */
.mat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px; margin-top: 20px;
}
.mat-card {
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg);
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mat-card:hover { border-color: var(--hair-strong); box-shadow: var(--shadow-card); }
.mat-card.watched { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,122,61,.08); }
.mat-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mat-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.mat-spec { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.mat-watch { background: none; border: 0; cursor: pointer; color: var(--hair-strong); padding: 2px; line-height: 0; flex: 0 0 auto; transition: color .12s, transform .12s; }
.mat-watch svg { width: 18px; height: 18px; }
.mat-watch:hover { color: var(--amber); transform: scale(1.1); }
.mat-watch.on { color: var(--amber); }

.mat-price-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mat-price { font-family: var(--mono); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.mat-delta { font-size: 12px; margin-top: 3px; }
.mat-delta .mono { font-weight: 700; }
.mat-delta.up .mono { color: var(--amber); }
.mat-delta.down .mono { color: var(--accent-deep); }
.mat-delta.flat .mono { color: var(--muted); }
.mat-lean { flex: 0 0 auto; margin-top: 4px; }

.mat-chart { width: 100%; height: auto; display: block; }

.mat-reason { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

.mat-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--hair); flex-wrap: wrap; }
.mat-conf { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); font-family: var(--mono); }
.mat-conf-bar { display: inline-block; width: 46px; height: 5px; border-radius: 3px; background: var(--cream); overflow: hidden; }
.mat-conf-bar > span { display: block; height: 100%; border-radius: 3px; }
.mat-meta { font-size: 10.5px; color: var(--muted); text-align: right; }

@media (max-width: 560px) { .mat-grid { grid-template-columns: 1fr; } }

/* ===== Service agreements (N3) ===== */
.agr-summary { display:flex; gap:12px; margin:14px 0 18px; flex-wrap:wrap; }
.agr-stat { flex:1 1 180px; background:var(--cream); border:1px solid var(--hair); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:2px; }
.agr-stat-n { font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.agr-stat-l { font-size:12px; color:var(--muted); }
.agr-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.agr-card { background:var(--surface); border:1px solid var(--hair); border-radius:12px; padding:14px 16px; cursor:pointer; display:flex; flex-direction:column; gap:8px; transition:box-shadow .12s, border-color .12s; }
.agr-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.08); border-color:var(--hair-strong); }
.agr-card.is-inactive { opacity:.62; }
.agr-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.agr-card-title { font:700 14.5px/1.25 var(--sans); color:var(--ink); }
.agr-card-client { font-size:12.5px; color:var(--ink-soft); margin-top:-3px; }
.agr-card-meta { display:flex; gap:6px; flex-wrap:wrap; }
.agr-card-foot { display:flex; gap:18px; margin-top:4px; padding-top:10px; border-top:1px solid var(--hair); }
.agr-card-foot > div { display:flex; flex-direction:column; gap:1px; }
.agr-k { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.agr-v { font-size:13.5px; font-weight:600; color:var(--ink); }
.agr-form { display:flex; flex-direction:column; gap:14px; }
.agr-active { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); cursor:pointer; }
.agr-active input { accent-color:var(--accent); }
.agr-preview { border:1px solid var(--hair); border-radius:10px; padding:12px 14px; background:var(--cream); }
.agr-preview-head { display:flex; gap:20px; flex-wrap:wrap; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--hair); }
.agr-preview-head > div { display:flex; flex-direction:column; gap:1px; }
.agr-preview-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.agr-sub { font:700 10.5px/1 var(--sans); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; }
.agr-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.agr-list li { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink-soft); padding:3px 0; border-bottom:1px dashed var(--hair); }
.agr-list li:last-child { border-bottom:0; }
.agr-list li.muted { color:var(--muted); font-style:italic; border-bottom:0; }
@media (max-width: 680px) { .agr-preview-cols { grid-template-columns:1fr; gap:12px; } }

/* ==========================================================
   JOB LIBRARY media (.fm-*) + tap-to-expand viewer (SCREENS.library)
   Thumbnail grid for field photos/posts and a lightbox that shares
   the modal scrim language. Tokens only, so it holds in either theme.
   ========================================================== */
.fm-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.fm-tile {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  display: flex; flex-direction: column; gap: 7px;
}
button.fm-tile { cursor: pointer; }
.fm-thumb {
  position: relative; width: 104px; height: 104px;
  border-radius: 11px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--hair);
  transition: border-color .12s, box-shadow .12s;
}
button.fm-tile:hover .fm-thumb { border-color: var(--hair-strong); box-shadow: var(--shadow-card); }
.fm-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  cursor: zoom-in; transition: transform .2s ease;
}
.fm-thumb:hover img { transform: scale(1.04); }
.fm-tile[aria-pressed="true"] .fm-thumb { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.fm-badge {
  position: absolute; top: 5px; right: 5px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(20,20,20,.3);
}
.fm-meta { display: flex; flex-direction: column; gap: 1px; max-width: 104px; line-height: 1.35; }
.fm-meta b { font-size: 12px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-meta .muted { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13px; }

.lib-lightbox {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  padding: 28px; background: rgba(20,20,20,.62);
  cursor: zoom-out; animation: pop .2s cubic-bezier(.2,.7,.2,1);
}
.lib-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); cursor: default; }
.lib-lightbox-x {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.12); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .12s;
}
.lib-lightbox-x:hover { background: rgba(255,255,255,.24); }
.lib-lightbox-x svg { width: 18px; height: 18px; }

/* ==========================================================
   PERMISSIONS + AUDIT (WO-24) and the pill switch (.bk-switch)
   Ported from the design stylesheet - these classes were referenced
   by screens-admin.js but never landed in the live sheet, so the role
   dropdowns, the override toggles, and the audit rows rendered unstyled.
   ========================================================== */
.bk-toggle { display: inline-flex; align-items: center; gap: 8px; }
.bk-toggle .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.bk-switch { width: 36px; height: 20px; border-radius: 999px; background: var(--hair-strong); position: relative; cursor: pointer; transition: background .15s; border: 0; flex: none; }
.bk-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s cubic-bezier(.2,.7,.2,1); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.bk-switch.on { background: var(--accent); }
.bk-switch.on::after { transform: translateX(16px); }

.perm-grid { display: grid; gap: 18px; }
.perm-who { display: flex; align-items: center; gap: 10px; }
.perm-av { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; background: var(--accent-soft); color: var(--accent-deep); font-family: var(--mono); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; }
.perm-role-sel { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--hair); border-radius: 8px; padding: 6px 28px 6px 10px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%236B6862' stroke-width='1.6' stroke-linecap='round'><path d='M3.5 5.5L7 9l3.5-3.5'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; background-size: 11px; }
.perm-role-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,122,61,.12); }
.perm-dim { color: var(--muted); }
.perm-matrix th.pm-role, .perm-matrix td.pm-role { text-align: center; width: 72px; }
.perm-matrix .pm-yes { color: var(--accent); }
.perm-matrix .pm-no { color: var(--hair-strong); }
.perm-ov-lede { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.perm-ov-lede b { color: var(--ink-soft); }
.perm-ov-list { display: flex; flex-direction: column; }
.perm-ov-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--hair); }
.perm-ov-row:last-child { border-bottom: 0; }
.perm-ov-main { flex: 1; min-width: 0; }
.perm-ov-main b { font-size: 13.5px; display: block; }
.perm-ov-base { font-size: 11.5px; color: var(--muted); margin-top: 2px; display: block; }

.aud-filters { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
.aud-filters .field { margin: 0; min-width: 140px; }
.aud-filters .field label { margin-bottom: 4px; }
.aud-row { cursor: pointer; }
.aud-action { font-family: var(--mono); font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--hair); color: var(--ink-soft); }
.aud-action.sensitive { background: var(--accent-soft); border-color: rgba(31,122,61,.25); color: var(--accent-deep); }
.aud-action.warn { background: #FBF3DC; border-color: rgba(182,139,30,.35); color: var(--amber-deep, #6E5314); }
.aud-ent { font-size: 11.5px; color: var(--muted); }
.aud-empty { padding: 28px; text-align: center; color: var(--muted); font-size: 13.5px; }
.aud-detail { display: flex; flex-direction: column; gap: 2px; }
.aud-kv { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.aud-kv span { flex: 0 0 70px; color: var(--muted); font-size: 12px; padding-top: 1px; }
.aud-meta-cap { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.aud-meta { font-family: var(--mono); font-size: 12px; line-height: 1.6; background: var(--ink); color: #D9E8DC; border-radius: 10px; padding: 14px 16px; overflow-x: auto; white-space: pre; }

/* ==========================================================
   JOB DOCS BOARD (WO-08) - also reused by incidents/safety/daily-reports
   ========================================================== */
.docs-jobpick { max-width: 380px; margin-bottom: 16px; }
.docs-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.docs-row:last-child { border-bottom: 0; }
.docs-row.arch { opacity: .6; }
.docs-ic { color: var(--muted); flex: 0 0 auto; }
.docs-main { flex: 1; min-width: 0; }
.docs-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.docs-ver { font-size: 10.5px; font-weight: 600; color: var(--accent-deep); background: var(--accent-soft); border-radius: 5px; padding: 2px 7px; }
.docs-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.docs-ackcell { flex: 0 0 auto; }
.docs-ack { display: flex; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 8px; font-size: 12px; color: var(--ink-soft); }
.docs-ack:hover { background: var(--surface-2); }
.docs-ack-bar { width: 64px; height: 6px; border-radius: 6px; background: var(--cream-deep); overflow: hidden; display: inline-block; }
.docs-ack-bar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.docs-ack-bar.big { width: 100%; height: 8px; margin-top: 8px; }
.docs-ack-ok { color: var(--accent-deep); font-weight: 600; }
.docs-actions { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.docs-danger { color: var(--red); }
.docs-dim { color: var(--muted); font-size: 12px; }
.docs-hist { background: var(--surface-2); border-bottom: 1px solid var(--hair); padding: 6px 16px 10px 46px; }
.docs-hist-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--hair); font-size: 12px; }
.docs-hist-row:last-child { border-bottom: 0; }
.docs-arch-cap { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 12px 16px 6px; border-bottom: 1px solid var(--hair); background: var(--surface-2); }
.docs-empty { padding: 36px 24px; text-align: center; color: var(--muted); font-size: 13.5px; }
.docs-hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 10px; }
.docs-ack-head { margin-bottom: 16px; font-size: 13px; }
.docs-ack-cap { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; }

/* Safety talk reader: the full inline talk sheet, readable in a drawer */
.docs-read-body { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.docs-read-body p { margin: 0 0 12px; }
.docs-read-body p:last-child { margin-bottom: 0; }
.docs-read-list { margin: 0 0 12px; padding-left: 20px; }
.docs-read-list li { margin: 0 0 6px; }

/* Daily-report drawer: the day's linked incidents + field reports */
.dr-linked { display: flex; flex-direction: column; gap: 8px; }
.dr-inc {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--hair); border-left: 3px solid #B3261E;
  border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--ink);
  transition: border-color .12s, background .12s;
}
.dr-inc:hover { background: var(--cream); border-color: var(--hair-strong, var(--hair)); }
.dr-linked-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dr-linked-main b { font-size: 13.5px; }
.dr-linked-main .muted { font-size: 12px; }
.dr-chev { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); }
.dr-fr {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px;
}
.dr-fr-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.dr-fr-body { font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.docs-ack-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.docs-ack-row:last-child { border-bottom: 0; }
.docs-ack-row b { flex: 1; }
@media (max-width: 760px) { .docs-row { flex-wrap: wrap; } .docs-ackcell { order: 3; } .docs-actions { width: 100%; justify-content: flex-start; } }

/* ==========================================================
   STATUS BOARD (WO-13)
   ========================================================== */
.sb-bar { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 16px; }
.sb-bar .spacer { flex: 1; }
.sb-tick { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.sb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sb-tick.flash .sb-dot { animation: sbPulse 1s ease; }
@keyframes sbPulse { 0% { box-shadow: 0 0 0 0 rgba(31,122,61,.5); } 100% { box-shadow: 0 0 0 8px rgba(31,122,61,0); } }
.sb-banner { display: flex; align-items: center; gap: 9px; background: #FBF3DC; border: 1px solid rgba(182,139,30,.35); color: var(--amber-deep, #6E5314); border-radius: 10px; padding: 11px 14px; font-size: 13px; margin-bottom: 16px; }
.sb-rollup { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.sb-stat { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 14px 16px; }
.sb-stat .n { font-size: 26px; font-weight: 600; line-height: 1; }
.sb-stat .l { font-size: 11.5px; color: var(--muted); margin-top: 6px; font-weight: 600; }
.sb-stat.warn { border-color: rgba(182,139,30,.4); }
.sb-stat.warn .n { color: #8A6914; }
.sb-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.sb-job.collapsed .sb-empty-row { display: flex; align-items: center; gap: 12px; font-size: 13px; padding: 12px 16px; }
.sb-person { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border-radius: 8px; font-size: 13.5px; }
.sb-person + .sb-person { border-top: 1px solid var(--hair); border-radius: 0; }
.sb-person.absent { opacity: .75; }
.sb-av { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; background: var(--accent-soft); color: var(--accent-deep); font-family: var(--mono); font-size: 10px; font-weight: 600; display: grid; place-items: center; }
.sb-elapsed { font-size: 12px; color: var(--accent-deep); font-weight: 600; }
.sb-flag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10px; color: var(--amber-deep, #6E5314); background: #FBF3DC; border: 1px solid rgba(182,139,30,.35); border-radius: 5px; padding: 2px 7px; }
.sb-reports { font-size: 10.5px; color: var(--muted); padding: 10px 8px 4px; border-top: 1px dashed var(--hair); margin-top: 4px; }
@media (max-width: 900px) { .sb-rollup { grid-template-columns: repeat(2, 1fr); } }