/* UI-02-B: Inter variable, self-hosted. Variable axis gives us every
   weight 100-900 from a single ~344KB file (vs. 4-6 individual files
   for static cuts). font-display:swap so we never block first paint
   waiting on the font — system font shows first, Inter swaps in.
   Files live under /fonts/, served by express.static. Source: rsms.me/inter. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2-variations"),
       url("/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2-variations"),
       url("/fonts/InterVariable-Italic.woff2") format("woff2");
}

* { box-sizing: border-box; }
:root {
  /* Signarama brand */
  --brand-red: #E11B22;        /* UI-02-A: brighter Signarama red (was #C8102E) */
  --brand-red-dark: #B0151B;
  --brand-ink: #1F2937;        /* UI-02-A: charcoal — better contrast on slate bg */
  /* Action color stays blue so it doesn't collide with PRIORITY red */
  --action-blue: #16C7C9;
  --action-blue-dark: #12B6B8;

  /* UI-02-A: semantic palette — use these for status meaning, not the
     brand red. Brand red is reserved for active nav / primary actions. */
  --semantic-green:   #10B981;  /* success, completed, on-track */
  --semantic-amber:   #F59E0B;  /* warning, in-progress, attention */
  --semantic-purple:  #8B5CF6;  /* scheduled, future-looking */
  --semantic-rose:    #F43F5E;  /* overdue, critical */

  /* UI-02-A: surface + text tokens. Page is slate-50, surfaces are pure
     white. Headings/body/muted form a 3-step text ladder. */
  --bg-page:      #F8FAFC;       /* slate-50 — app background */
  --bg-surface:   #FFFFFF;       /* cards, panels, modals */
  --bg-elevated:  #FFFFFF;       /* alias — explicit "this is raised" */
  --border-soft:  #E2E8F0;       /* slate-200 — default card borders */
  --border-strong: #CBD5E1;      /* slate-300 — emphasized borders */
  --text-heading: #0F172A;       /* slate-900 — h1/h2 */
  --text-body:    #1F2937;       /* charcoal — paragraph + values */
  --text-muted:   #64748B;       /* slate-500 — labels, meta, captions */
  --text-faint:   #94A3B8;       /* slate-400 — placeholder, empty */

  /* POLISH-01: design tokens (font / radius / shadow scales).
     Goal — one consistent ladder across the app. Pre-existing
     hardcoded values can migrate to these over time; new code
     should consume the tokens. See UI-REVIEW.md for the rationale. */

  /* Font scale — 6 steps. Anything outside this scale is an orphan. */
  --fs-xs:  11px;  /* labels, meta, badges, table headers */
  --fs-sm:  13px;  /* body small, controls, secondary text */
  --fs-md:  14px;  /* body, inputs, default button text */
  --fs-lg:  18px;  /* section headers */
  --fs-xl:  22px;  /* modal hero title + amount */
  --fs-2xl: 26px;  /* dashboard metric numbers */

  /* Radius scale — 4 steps + pill. UI-02-A added --r-xl for hero cards
     (KPI tiles, calendar surface) — distinct from --r-lg modal chrome. */
  --r-sm:   4px;   /* chips, dots, mini elements */
  --r-md:   8px;   /* default — cards, panels, inputs, buttons */
  --r-lg:   12px;  /* modal surfaces, larger panels */
  --r-xl:   16px;  /* hero cards — KPI tiles, calendar surface */
  --r-pill: 999px;

  /* Shadow scale — 4 steps. UI-02-A softened md/lg for the modern SaaS
     "barely there, but present" elevation look. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.22);

  /* Empty-state color — for "no value yet" cells. */
  --cell-empty: #94a3b8;
}
body {
  /* UI-02-B: Inter is the primary face; system fallback covers the
     swap window. cv11/ss01 are stylistic-set features Inter ships —
     cv11 picks the single-storey 'a' that scans better on dashboards. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  background: var(--bg-page);   /* UI-02-A: slate-50 (was #f5f6f8) */
  color: var(--text-body);
  /* Prevent any inner grid/table from pushing the page wider than the
     viewport on phones. Each scrollable region handles its own
     overflow internally instead. */
  overflow-x: hidden;
}
/* ============================================================
   UI-03-A: app shell — sidebar + main column layout.
   The whole app lives inside .app-shell. On desktop the sidebar
   sits left at 240px; on tablet collapses to icon-only (72px);
   on mobile hides entirely and reveals via #mobile-nav-toggle.
   ============================================================ */
.app-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
}
.app-main {
  flex: 1;
  min-width: 0;          /* prevents flex children from forcing horizontal scroll */
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0;
  z-index: 50;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
}
.sidebar-brand .brand-logo {
  height: 36px;
  width: auto;
  display: block;
}
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-body);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-item:hover {
  background: var(--bg-page);
  color: var(--text-heading);
}
.sidebar-item.active {
  background: rgba(225, 27, 34, 0.08);  /* brand red 8% */
  color: var(--brand-red);
  font-weight: 600;
}
.sidebar-icon {
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.sidebar-label { flex: 1; }
.sidebar-tenant {
  padding: 14px 16px;
  border-top: 1px solid var(--border-soft);
}
.sidebar-tenant-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--brand-red);
  line-height: 1.2;
}
.sidebar-tenant-loc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 10px;
}
.sidebar-switch {
  width: 100%;
  border: 1px solid var(--border-soft);
  background: transparent;
  border-radius: var(--r-md);
  padding: 7px 10px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sidebar-switch:hover {
  background: var(--bg-page);
  color: var(--text-heading);
  border-color: var(--border-strong);
}

/* BRAND: segmented Signarama / Fully Promoted switch in the sidebar. */
.brand-switch {
  display: flex;
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.brand-switch .brand-opt {
  flex: 1;
  border: none;
  background: transparent;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.brand-switch .brand-opt + .brand-opt { border-left: 1px solid var(--border-soft); }
.brand-switch .brand-opt:hover { background: var(--bg-page); color: var(--text-heading); }
.brand-switch .brand-opt.active { background: var(--brand-red); color: #fff; }

/* BRAND-THEME: Fully Promoted turns the whole site blue so it's obvious which
   side you're on. Overriding the brand-accent variables recolors active nav,
   primary buttons, headers, the brand switch, etc.; a light-blue wash on the
   chrome reinforces it. (Exact blue can match the FP logo once it's provided.) */
body.brand-fp {
  --brand-red: #0E76BC;       /* Fully Promoted deep blue (matches the logo) */
  --brand-red-dark: #0A5A8F;
}
body.brand-fp .sidebar,
body.brand-fp .topbar { background: #eef6fc; }
body.brand-fp .sidebar { border-right-color: #cfe4f7; }
body.brand-fp .topbar { border-bottom: 3px solid #29ABE2; } /* bright azure accent */
/* FP-INTAKE: on the Fully Promoted brand, focus the nav on job-process
   tracking — hide the calendar/install/stats/survey surfaces. Signarama is
   unaffected because the rule is scoped to body.brand-fp. */
body.brand-fp .fp-nav-hidden { display: none !important; }
/* FP-INTAKE: install/delivery SCHEDULING fields tagged .fp-hide-field are
   hidden on Fully Promoted job forms. We hide via this dedicated .fp-hidden
   marker (toggled by syncBrandFields) rather than the shared .hidden class,
   because several tagged elements (#job-ics-link, #linked-install-panel,
   #spawn-install-panel) carry their own independent .hidden logic — reusing
   .hidden would force-show them on the Signarama form. .fp-hidden is only ever
   present on FP, so Signarama's markup/behaviour is untouched. */
.fp-hidden { display: none !important; }

/* ============================================================
   Top bar — segmented tabs + search + actions
   Replaces the old body > header chrome. Wider, lighter, cleaner.
   ============================================================ */
.topbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-soft);
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.topbar-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.topbar-tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--r-md);
  position: relative;
  transition: color 0.12s ease, background 0.12s ease;
}
.topbar-tabs .tab:hover {
  color: var(--text-heading);
  background: var(--bg-page);
}
/* UI-03-A5: topbar active-tab treatment — clean Linear/GitHub/Notion
   style. No background block (the legacy POLISH-04 rule at line ~885
   tried to paint the whole tab red, which looked heavy). Instead:
   - Brand-red text, bolder weight
   - Brand-red icon tint
   - Slim 2px underline indicator flush with the topbar's bottom border
   Explicit !important on background + border because the legacy
   `button.tab.active` rule below is co-specific. */
.topbar-tabs .tab.active {
  color: var(--brand-red) !important;
  font-weight: 600;
  background: transparent !important;
  border: 0 !important;
}
.topbar-tabs .tab.active .tab-icon {
  opacity: 1;
}
/* The underline indicator — sits flush with the topbar's bottom border. */
.topbar-tabs .tab.active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -13px;
  height: 2px;
  background: var(--brand-red);
  border-radius: 2px;
}
/* Hover for inactive tabs gets a soft slate pill so there's still
   a visible "I'm clickable" affordance without competing with
   the active red treatment. */
.topbar-tabs .tab:not(.active):hover {
  background: var(--bg-page);
}
.topbar-tabs .tab .tab-icon {
  font-size: 14px;
  opacity: 0.85;
}

/* UI-03-A12/A14: search bar styled as an unmistakable search affordance —
   pill shape, magnifier icon + larger placeholder, distinct from
   rectangular form inputs. UI-03-A14 scopes selectors to #global-search
   (was input[type="search"], which broke after we switched type to
   "text" for autofill avoidance — left the field rendering as an
   unstyled default input). */
.topbar-search {
  flex: 1;
  min-width: 280px;    /* don't let the bar squish below readable width */
  max-width: 480px;
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;          /* <form> defaults */
  padding: 0;
}
/* UI-03-A15: contenteditable div styled to render identically to the
   old <input> it replaced. CSS-only placeholder via ::before + the
   :empty pseudo. min-height keeps the bar at consistent height even
   when empty. white-space:nowrap prevents wrap when typing. */
.topbar-search #global-search {
  width: 100%;
  min-height: 38px;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.4;
  padding: 9px 14px 9px 38px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  background: var(--bg-page);
  color: var(--text-body);
  outline: none;
  cursor: text;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.topbar-search #global-search:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-style: italic;
  opacity: 1;
  pointer-events: none;
}
.topbar-search #global-search:focus {
  border-color: var(--action-blue);
  background: var(--bg-surface);
  box-shadow: 0 0 0 3px rgba(22,199,201, 0.12);
}
.topbar-search-icon {
  position: absolute;
  left: 14px;
  font-size: 14px;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}
.topbar-search #global-search {
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.4;
  padding: 9px 14px 9px 38px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);   /* unmistakably a search bar */
  background: var(--bg-page);
  color: var(--text-body);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  height: auto;
}
.topbar-search #global-search::placeholder {
  color: var(--text-muted);
  font-style: italic;            /* further differentiates from form fields */
  opacity: 1;                    /* Firefox dims placeholders by default */
}
.topbar-search #global-search:focus {
  outline: none;
  border-color: var(--action-blue);
  background: var(--bg-surface);
  box-shadow: 0 0 0 3px rgba(22,199,201, 0.12);
}
/* Hide the native search-clear ✕ that some browsers add on the right —
   it nudges the placeholder around mid-type, looks inconsistent. */
.topbar-search #global-search::-webkit-search-cancel-button { display: none; }

/* UI-03-A13: honeypot fields — Chrome/Safari/1Password autofill these
   instead of the real search input. They must be in-tree (not
   display:none) so password managers see them as fillable, but
   positioned off-screen and zero-size so users never see them. */
.autofill-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* Right-side action cluster */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.topbar-manage-btn,
.topbar-new-btn {
  font-size: var(--fs-sm);
}
.topbar-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
}

/* User chip — avatar + name stacked */
.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid var(--border-soft);
}
.topbar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--action-blue), var(--brand-red));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}
.topbar-user-name {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-size: var(--fs-sm);
}
.topbar-user-name .current-user {
  font-weight: 600;
  color: var(--text-heading);
}
.topbar-user-name .topbar-signout {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}
.topbar-user-name .topbar-signout:hover {
  color: var(--brand-red);
  text-decoration: underline;
}

/* Hide the legacy bottom red bar — the active tab's red underline now
   carries the brand accent. */
body > header {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  display: block;
}

/* ============================================================
   Responsive — collapse the sidebar on narrow viewports
   ============================================================ */
@media (max-width: 1024px) {
  .sidebar {
    width: 72px;
  }
  .sidebar-label,
  .sidebar-tenant-name,
  .sidebar-tenant-loc,
  .sidebar-switch span:not([aria-hidden]) {
    display: none;
  }
  .sidebar-item {
    justify-content: center;
    padding: 12px 8px;
  }
  .sidebar-icon { width: auto; }
  .sidebar-tenant {
    padding: 10px 8px;
    text-align: center;
  }
  .sidebar-switch {
    padding: 6px 8px;
  }
  /* Keep the action buttons inside the visible top bar on tablets and
     narrower browser windows. Search is still available inside Calendar;
     the header search returns once there is room for it. */
  .topbar-search { display: none; }
  .ai-insights-btn-label { display: none; }
  .ai-insights-btn { width: 36px; justify-content: center; padding: 6px; }
  .topbar-user-name .current-user { display: none; }
  /* Dropdowns are viewport-anchored at this breakpoint so neither the
     collapsed sidebar nor a narrow top bar can clip them. The phone rule
     below expands them to near full width. */
  .topbar-actions .dropdown-menu {
    position: fixed;
    top: 64px;
    right: 16px;
    left: auto;
    max-height: min(70vh, 480px);
    overflow-y: auto;
  }
}
/* Secondary views (Jobs/Tasks/Materials/Time Off) live in the topbar
   "More ▾" on desktop — their drawer rows only exist on phones. */
.sidebar-item.sidebar-mobile-only { display: none; }
@media (max-width: 720px) {
  .sidebar-item.sidebar-mobile-only { display: flex; }
  .sidebar {
    position: fixed;
    left: -100%;
    width: 240px;
    transition: left 0.18s ease;
  }
  .sidebar.open {
    left: 0;
    /* A later, unscoped `@media (max-width: 1024px) { .sidebar { width:
       72px } }` rule (meant for the tablet collapsed-rail state) also
       matches phone widths and otherwise wins the cascade on `width` since
       plain `.sidebar` there has the same specificity but comes later in
       the file. Re-assert the full drawer width here at higher specificity
       so the open drawer isn't squeezed into the 72px rail. */
    width: 240px;
  }
  .sidebar.open .sidebar-label,
  .sidebar.open .sidebar-tenant-name,
  .sidebar.open .sidebar-tenant-loc,
  .sidebar.open .sidebar-switch span:not([aria-hidden]) {
    display: inline;
  }
  .sidebar.open .sidebar-item {
    justify-content: flex-start;
    padding: 10px 12px;
  }
  .sidebar.open .sidebar-icon { width: 20px; }
  .topbar {
    padding: 10px 16px;
  }
  .topbar-search { display: none; }
}

/* Mobile nav toggle button — only shows on narrow viewports. */
.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--text-heading);
  cursor: pointer;
  padding: 4px 8px;
}
@media (max-width: 720px) {
  .mobile-nav-toggle { display: inline-flex; }
}

/* ── Field Mode ────────────────────────────────────────────────────────
   Phones open the field workflow in the same calendar app.  JobShot remains
   a self-contained capture surface so its camera, offline queue and PWA
   caching continue to work exactly as they do when opened directly. */
.field-mode[hidden] { display: none; }
.field-mode {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}
.field-mode-bar {
  flex: 0 0 auto;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  background: #172033;
  color: #fff;
}
.field-mode-title { display: flex; flex: 1; min-width: 0; flex-direction: column; line-height: 1.1; }
.field-mode-title strong { font-size: 14px; }
.field-mode-title span { margin-top: 3px; color: #b9c3d2; font-size: 11px; }
.field-mode-back, .field-mode-jobs {
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  color: #fff;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
}
.field-mode-jobshot { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
#field-mode-notif { position: relative; }

/* The bell/Manage buttons in Field Mode's bar forward clicks to the real
   topbar buttons underneath (see app.js). The real notif panel / manage
   menu live inside .topbar, which is its own stacking context (position:
   sticky + z-index:40) — a fixed-position descendant can't out-rank Field
   Mode's overlay (z-index:10000) via its own z-index alone, because it's
   confined to .topbar's context first. Lift .topbar itself above Field
   Mode, but only while one of its menus is actually open, and only paint
   that menu — everything else in the bar stays invisible so the real
   topbar doesn't flash on top of Field Mode's own header.
   Scoped to the same breakpoint Field Mode itself uses (not just the
   body.field-mode-open class) — that class can outlive an actual viewport
   change (e.g. resizing past 720px without tapping "Calendar" first), and
   without this guard these rules would blank out the desktop topbar too. */
@media (max-width: 720px) {
  body.field-mode-open .topbar:has(.dropdown-menu:not(.hidden)) {
    z-index: 10001;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    pointer-events: none;
  }
  body.field-mode-open .topbar:has(.dropdown-menu:not(.hidden)) > * {
    visibility: hidden;
  }
  body.field-mode-open .dropdown-menu:not(.hidden) {
    visibility: visible;
    pointer-events: auto;
    z-index: 10001;
  }
  /* Manage-menu items (Team, Users & logins, Audit log, Scan for
     duplicates, Import .ics, Corebridge...) each open their own top-level
     .modal — those are plain children of <body>, not nested in .topbar,
     so they only need a z-index bump above Field Mode to become visible. */
  body.field-mode-open .modal:not(.hidden) {
    z-index: 10001;
  }
}

@media (min-width: 721px) {
  .field-mode { display: none !important; }
}

/* ============================================================
   DASH-02: Week in Review block.
   Two side-by-side stat cards inside one hero surface — new sales
   and completed jobs, each with a primary "this week" tier and a
   secondary "month to date" line.
   ============================================================ */
.week-in-review {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.wir-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
/* DASH-10: title + date chip live side-by-side so the week being
   reviewed is immediately obvious without a second eye-sweep. */
.wir-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.wir-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-heading);
}
.wir-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(225, 27, 34, 0.08);   /* brand-red 8% */
  color: var(--brand-red);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wir-date-chip > span[aria-hidden="true"] { font-size: 13px; }
.wir-sub {  /* legacy fallback — keep so nothing else that selects on it breaks */
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.wir-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.wir-stat {
  background: var(--bg-page);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
/* Per-card accent stripe along the top */
.wir-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
#wir-new-sales::before  { background: var(--action-blue); }
#wir-completed::before  { background: var(--semantic-green); }

.wir-stat-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wir-stat-icon {
  font-size: 16px;
  display: inline-flex;
}
.wir-stat-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.wir-stat-week {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.wir-stat-num {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1;
}
.wir-stat-meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.wir-stat-mtd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
}
.wir-stat-mtd-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.wir-stat-mtd-num {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-body);
}
@media (max-width: 720px) {
  .wir-grid { grid-template-columns: 1fr; }
}

/* DASH-17: source badge under the New Sales card — tells Mark whether
   the number came from live Corebridge, the 5-min cache, or local DB
   fallback. Empty when no source info available so it doesn't show. */
.wir-source-badge {
  margin-top: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}
.wir-source-badge:empty { display: none; }
.wir-source-badge.wir-source-pipeline { color: var(--text-muted); font-style: italic; }
.wir-source-badge.wir-source-live   { color: var(--semantic-green); }
.wir-source-badge.wir-source-cached { color: var(--text-muted); }
.wir-source-badge.wir-source-local  { color: var(--semantic-amber); }
.wir-source-badge.wir-source-error  { color: var(--semantic-rose); }

/* DASH-04: drill-down — the big numbers are now buttons that open
   the underlying job list when clicked. Subtle hover so it reads as
   interactive without competing with the giant numeric value. */
button.wir-drilldown {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: var(--r-sm);
  transition: background 0.12s ease;
}
button.wir-drilldown:hover { background: rgba(225, 27, 34, 0.06); }
button.wir-drilldown:focus-visible { outline: 2px solid var(--action-blue); outline-offset: 2px; }
button.wir-stat-num.wir-drilldown { padding: 4px 8px; margin: -4px -8px; }
button.wir-stat-mtd-num.wir-drilldown { padding: 2px 6px; margin: -2px -6px; }

/* Drill-down modal */
#wir-drill-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10500;
  padding: 16px;
}
#wir-drill-modal.active { display: flex; }
#wir-drill-modal .wir-drill-card {
  background: var(--bg-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  padding: 24px 28px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
}
#wir-drill-modal .wir-drill-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
#wir-drill-modal .wir-drill-close:hover { background: var(--bg-page); color: var(--text-heading); }
#wir-drill-modal .wir-drill-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-heading);
}
#wir-drill-modal .wir-drill-sub {
  margin: 4px 0 16px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
#wir-drill-modal .wir-drill-list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
#wir-drill-modal .wir-drill-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
#wir-drill-modal .wir-drill-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.12s ease;
}
#wir-drill-modal .wir-drill-row:last-child { border-bottom: 0; }
#wir-drill-modal .wir-drill-row:hover { background: var(--bg-page); }
#wir-drill-modal .wir-drill-row-when {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
#wir-drill-modal .wir-drill-row-co {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-heading);
  min-width: 0;
}
#wir-drill-modal .wir-drill-src {
  background: var(--action-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  margin-right: 6px;
  vertical-align: middle;
}
#wir-drill-modal .wir-drill-inv {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-left: 6px;
}
#wir-drill-modal .wir-drill-row-amt {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   UI-03-A3: Upcoming Installs panel.
   ============================================================ */
.installs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.installs-title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-heading);
}
.installs-sub {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.installs-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.installs-filters select {
  font: inherit;
  font-size: var(--fs-sm);
  padding: 7px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--text-body);
}
.installs-show-done {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.installs-list { display: flex; flex-direction: column; gap: 20px; }
.installs-empty {
  background: var(--bg-surface);
  border: 1px dashed var(--border-soft);
  border-radius: var(--r-xl);
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-md);
}
.installs-group {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.installs-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-soft);
}
.installs-group-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-heading);
}
.installs-group-count {
  background: var(--brand-red);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--r-pill);
}
.installs-rows { display: flex; flex-direction: column; }
.install-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.12s ease;
}
.install-row:last-child { border-bottom: 0; }
.install-row:hover { background: var(--bg-page); }
.install-row.is-done { opacity: 0.62; }
.install-row.is-done .install-row-company { text-decoration: line-through; }

.install-row-when {
  flex-shrink: 0;
  width: 92px;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.install-row-date {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-heading);
}
.install-row-time {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.install-row-meta {
  flex: 1;
  min-width: 0;
}
.install-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.install-row-verb {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.install-row-verb.verb-install { background: #e3f2fd; color: #16C7C9; }
.install-row-verb.verb-removal { background: #efebe9; color: #5d4037; }
.install-row-verb.verb-pickup  { background: #fff8e1; color: #ef6c00; }
.install-row-daychip {
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--bg-page);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.install-row-company {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-heading);
}
.install-row-addr {
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.install-row-done {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--semantic-green);
}
.install-row-side {
  flex-shrink: 0;
}
.install-row-assignee {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.install-row-assignee.unassigned {
  background: var(--bg-page);
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 720px) {
  .install-row-when { width: 76px; }
  .install-row-addr { white-space: normal; }
}

/* ============================================================
   UI-03-A2: desktop sidebar collapse toggle.
   Click the chevron to hide the sidebar entirely; click again to
   bring it back. Preference persists in localStorage so it
   survives reloads. On mobile the existing mobile-nav-toggle
   handles the drawer pattern, so this button hides below 720px.
   ============================================================ */
.sidebar-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.sidebar-collapse-btn:hover {
  background: var(--bg-page);
  color: var(--text-heading);
  border-color: var(--border-strong);
}
.sidebar-collapse-icon {
  font-size: 11px;
  line-height: 1;
  transition: transform 0.18s ease;
}
/* When the sidebar is hidden, flip the chevron so it reads as
   "click to bring it back". */
.app-shell.sidebar-hidden .sidebar-collapse-icon {
  transform: rotate(180deg);
}
/* When the sidebar is hidden, drop it from the layout entirely so the
   main column claims the full width. */
.app-shell.sidebar-hidden .sidebar {
  display: none;
}
/* On mobile the dedicated mobile-nav-toggle owns the drawer pattern —
   no need to also show the desktop collapse button. */
@media (max-width: 720px) {
  .sidebar-collapse-btn { display: none; }
}

/* ============================================================
   END UI-03-A. The block below is the LEGACY body > header rule —
   kept so the modal <header> elements don't get the page-header
   treatment. (Modals use plain <header> tags internally.)
   ============================================================ */
body > header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-mark {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-red);
  letter-spacing: 0.2px;
}
.brand-loc {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
/* Default nav layout (desktop). Mobile @media query later overrides these. */
nav {
  display: flex;
  gap: 8px;
  flex: 1;
  align-items: center;
}
.nav-items {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mobile-nav-toggle {
  display: none;
  background: #fff;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  font-size: 22px;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
  margin-right: 4px;
}
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 90;
}
.mobile-nav-backdrop.hidden { display: none; }

@media (max-width: 768px) {
  .brand-loc { display: none; }
  .brand-logo { height: 32px; }
  header {
    padding: 8px 14px;
    gap: 10px;
    flex-wrap: wrap; /* allow drawer below */
    position: relative;
  }
  .brand-mark { font-size: 15px; }
  /* Hamburger appears on mobile */
  .mobile-nav-toggle { display: inline-block; order: -1; }
  /* Nav layout: top row stays compact, drawer drops below the header
     row when open. No fixed-position fanciness — just a plain inline
     block, more reliable on touch. */
  nav#main-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  nav#main-nav .nav-items {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    order: 99; /* push below + New / sign out row */
    margin-top: 8px;
    padding: 10px 0 4px;
    border-top: 1px solid #e1e4e8;
  }
  nav#main-nav .nav-items.open { display: flex; }
  nav#main-nav .nav-items > .tab,
  nav#main-nav .nav-items > .dropdown > .tab-dropdown-btn,
  nav#main-nav .nav-items > .dropdown > #manage-btn,
  nav#main-nav .nav-items .dropdown-menu button {
    width: 100%;
    text-align: left;
    font-size: 15px;
    padding: 13px 16px;
    background: #fff;
    border: 1px solid #d0d4da;
    border-radius: var(--r-md);
    cursor: pointer;
  }
  nav#main-nav .nav-items > .tab.active {
    background: #16C7C9;
    color: #fff;
    border-color: #16C7C9;
  }
  /* Views / Manage become non-interactive section headers */
  nav#main-nav .nav-items #views-btn,
  nav#main-nav .nav-items #manage-btn {
    pointer-events: none;
    font-size: 11px !important;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: transparent !important;
    border: none !important;
    padding: 14px 6px 4px !important;
    cursor: default;
  }
  /* Sub-menus auto-expand as a list of full-width tappable buttons */
  nav#main-nav .nav-items .dropdown { width: 100%; }
  nav#main-nav .nav-items .dropdown-menu {
    position: static;
    display: block !important;
    box-shadow: none;
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    z-index: auto;
  }
  nav#main-nav .nav-items .dropdown-menu button {
    background: #f8f9fa;
    margin-bottom: 4px;
  }
  /* + New stays compact in the top row */
  nav#main-nav .nav-new { margin-left: auto; order: 1; }
  nav#main-nav .nav-new .primary { margin-left: 0; padding: 8px 12px; font-size: 13px; }
  /* User pill / sign-out compact in the top row */
  .header-user {
    border-left: none;
    margin-left: 4px;
    padding-left: 0;
    gap: 4px;
    order: 2;
  }
  .current-user { display: none; }
  #logout-btn { padding: 8px 10px; font-size: 12px; }
}
button {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: 1px solid #d0d4da;
  background: #fff;
  cursor: pointer;
}
button:hover { background: #f0f1f3; }
/* POLISH-05: brand red on active state + primary CTAs. The default
   action-blue stays for non-active interactive surfaces — we just
   need the brand color to be present where the eye lands most. */
button.tab.active {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
}
/* POLISH-11 (M12): Calendar button is the most-used view — keep the
   subtle accent, but soften it so the active state (brand-red) is
   clearly distinct. Was a saturated blue tint that competed with the
   active state; now it's a quiet gray-blue. */
button.tab-calendar:not(.active) {
  background: #f5f7fa;
  border-color: #d8e0ea;
  color: var(--action-blue);
  font-weight: 600;
}
button.tab-calendar:not(.active):hover { background: #ebf0f6; }
button.primary {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
  margin-left: auto;
}
button.primary:hover { background: var(--brand-red-dark); }
button.danger {
  background: #d93025;
  color: #fff;
  border-color: #d93025;
}
button.danger:hover { background: #b2271f; }

main { padding: 24px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Dashboard metric strip (above calendar) */
.dashboard-metrics {
  /* UI-02-C: a touch more breathing room between hero cards. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.metric-card {
  /* UI-02-C: hero card chrome — pure white surface, 16px radius, soft
     elevated shadow. Border drops to slate-200 for less visual noise
     since the shadow now does the "lift" job. Padding bumped to read
     more "spacious dashboard" than "compact tile". */
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: 20px 22px;
  border-top: 3px solid #d0d4da;
  box-shadow: var(--shadow-md);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* POLISH-12 (M1): remove the hover lift on metric cards since clicking
   them doesn't navigate anywhere — the lift was hinting clickability
   that doesn't exist. Keep the cards visually static. */
.metric-card:hover {
  box-shadow: var(--shadow-lg);
}
.metric-card.metric-installs { border-top-color: #16C7C9; }
.metric-card.metric-in-prod { border-top-color: #212121; }
.metric-card.metric-scheduled { border-top-color: #ffa000; }
.metric-card.metric-completed { border-top-color: #ab47bc; }
.metric-label {
  font-size: 11px;
  font-weight: 700;
  color: #56606b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.metric-value {
  font-size: 26px;
  font-weight: 700;
  color: #1f2329;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.metric-sub {
  font-size: 12px;
  color: #56606b;
  margin-top: 6px;
}
@media (max-width: 768px) {
  .dashboard-metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .metric-value { font-size: 22px; }
}
@media (max-width: 480px) {
  .dashboard-metrics { grid-template-columns: 1fr; }
}

.last-sync-line {
  font-size: 12px;
  color: #56606b;
  margin-bottom: 8px;
  text-align: right;
}
.last-sync-line.hidden { display: none; }
.last-sync-line .auto-on { color: #2e7d32; font-weight: 600; }

/* JobShot quick-access banner on the dashboard */
.jobshot-dash-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  text-decoration: none;
  transition: background 0.15s;
}
.jobshot-dash-banner:hover { background: #1e293b; }
.jobshot-dash-icon { font-size: 1.6rem; flex-shrink: 0; }
.jobshot-dash-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jobshot-dash-text strong { font-size: 0.95rem; color: #fff; }
.jobshot-dash-text span { font-size: 0.8rem; color: #94a3b8; }
.jobshot-dash-arrow { margin-left: auto; font-size: 1.3rem; color: #60a5fa; flex-shrink: 0; }
.pulse-banner { background: #14532d; }
.pulse-banner:hover { background: #166534; }
.pulse-banner .jobshot-dash-arrow { color: #86efac; }

/* Pending Review banner */
/* Pending-review banner + modal removed — see .pending-sidebar below
   for the single source of truth. */

/* Dashboard mini-calendar — shows time off and surveys at a glance */
.mini-cal-card {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.mini-cal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.mini-cal-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}
.mini-cal-nav {
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid #d0d4da;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.mini-cal-nav:hover { background: #eef0f3; }
.mini-cal-legend {
  font-size: 11px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini-cal-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 3px;
}
.mini-cal-dot-timeoff { background: #ef6c00; }
.mini-cal-dot-survey { background: #6a1b9a; }
.mini-cal {
  display: grid;
  /* minmax(0, 1fr) lets the cells shrink below their content's intrinsic
     width — required so chip text inside doesn't push the cells (and
     the whole page) wider than the viewport on phones. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  font-size: 12px;
}
.mini-cal-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  padding: 4px 0;
  min-width: 0;
}
.mini-cal-day {
  background: #fafbfc;
  border: 1px solid #eef0f3;
  border-radius: var(--r-sm);
  padding: 4px 5px;
  min-height: 56px;
  min-width: 0; /* allow cell to shrink with the column */
  overflow: hidden; /* clip overflowing chip text */
  position: relative;
  cursor: pointer;
}
.mini-cal-day:hover { background: #f0f6ff; border-color: #16C7C9; }
.mini-cal-day.other-month { background: #fff; color: #c4c8cd; }
.mini-cal-day.today { background: #fff8dc; border-color: #f9a825; }
.mini-cal-daynum {
  font-size: 11px;
  font-weight: 600;
  color: #1f2329;
}
.mini-cal-day.other-month .mini-cal-daynum { color: #c4c8cd; }
.mini-cal-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 3px;
  min-width: 0;
}
.mini-cal-evt {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  font-weight: 500;
  min-width: 0;
  max-width: 100%;
}
.mini-cal-evt-timeoff { background: #ef6c00; }
.mini-cal-evt-survey { background: #6a1b9a; }

/* Dashboard "Today" and "Coming up" lists */
.dashboard-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.dashboard-lists.three-col { grid-template-columns: 1fr 1fr 1fr; }
.dashboard-list-card {
  /* UI-02-C: dashboard list cards get the same hero chrome — 16px
     radius, slate-200 border, soft elevation. */
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: 20px 22px;
  position: relative;
}
/* POLISH-10 (M10): "Today" card gets a brand-red accent stripe so it
   reads as the most important of the three cards. The "Today" card is
   identified by being the first card in the .dashboard-lists row. */
.dashboard-lists .dashboard-list-card:first-child {
  border-top: 3px solid var(--brand-red);
  padding-top: 16px;  /* compensate for thicker top border */
}
/* PIPE-INSTALL: at-risk install alert card (install scheduled, prod not done) */
.dashboard-alert-card {
  background: var(--bg-surface);
  border: 1px solid #f3c2c2;
  border-left: 4px solid #dc2626;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.dashboard-alert-card h3 { margin: 0 0 10px 0; font-size: 15px; color: #991b1b; }
.dashboard-alert-card .alert-count { color: #dc2626; font-weight: 700; }
.dashboard-alert-card .dl-date { min-width: 84px; display: inline-block; }
.dashboard-alert-card .dl-date.due-now { color: #fff; background: #dc2626; border-radius: 4px; padding: 0 6px; font-weight: 700; }
.dashboard-alert-card .dl-date.due-3 { color: #9a3412; font-weight: 700; }
/* PIPE-INSTALL: install countdown badge on Project Pipeline cards */
.kanban-card-countdown {
  display: inline-block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #1e40af;
  background: #e0ecff;
  border-radius: 4px;
  padding: 1px 6px;
}
.kanban-card-countdown.due-7  { color: #92700e; background: #fef3c7; }
.kanban-card-countdown.due-3  { color: #9a3412; background: #ffedd5; }
.kanban-card-countdown.due-now { color: #fff;    background: #dc2626; }
/* REWORK: calendar chip */
.cal-event.rework { background: #ede9fe; color: #5b21b6; border-left: 3px solid #7c3aed; }
.cal-event.rework.install { background: #f3e8ff; }
/* REWORK: dashboard tally card */
.rework-card {
  background: var(--bg-surface); border: 1px solid var(--border-soft);
  border-left: 4px solid #7c3aed; border-radius: var(--r-xl);
  box-shadow: var(--shadow-md); padding: 16px 20px; margin-bottom: 16px;
}
.rework-card-head { display: flex; align-items: baseline; justify-content: space-between; }
.rework-card-head h3 { margin: 0; font-size: 15px; color: #5b21b6; }
.rework-card-hint { font-size: 11px; color: #94a3b8; }
.rework-card-periods { display: flex; gap: 10px; margin: 12px 0 6px; }
.rework-period {
  flex: 1; background: #faf8ff; border: 1px solid #e9e2fb; border-radius: 10px;
  padding: 10px; cursor: pointer; text-align: center; transition: background .12s;
}
.rework-period:hover { background: #f1ebfe; }
.rework-period .rp-num { display: block; font-size: 24px; font-weight: 700; color: #6d28d9; font-variant-numeric: tabular-nums; }
.rework-period .rp-lbl { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }
.rework-card-depts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.rcd-label { font-size: 11px; color: #64748b; }
.rcd-chip { font-size: 11px; background: #ede9fe; color: #5b21b6; border-radius: 4px; padding: 1px 7px; }
.rcd-chip b { font-weight: 700; }
.rcd-empty { font-size: 12px; color: #94a3b8; }
.rework-install-field.hidden { display: none; }
.rework-list-row { cursor: pointer; }
.rework-list-row:hover { background: #faf8ff; }
/* REWORK: "+ Log rework" button + open-reworks list + job picker */
.log-rework-btn {
  border: 1px solid #c4b5fd; background: #f5f3ff; color: #6d28d9;
  font-weight: 600; font-size: 12px; border-radius: 8px; padding: 5px 12px; cursor: pointer;
}
.log-rework-btn:hover { background: #ede9fe; }
.rework-open-wrap { margin-top: 10px; }
.rework-open-head { font-size: 12px; font-weight: 600; color: #5b21b6; margin-bottom: 4px; }
.rework-open-list { display: flex; flex-direction: column; gap: 1px; }
.rework-open-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 5px 8px; font-size: 13px; border-radius: 6px; cursor: pointer;
}
.rework-open-row:hover { background: #faf8ff; }
.rework-open-row .ror-co { font-weight: 600; color: #1f2329; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rework-open-row .ror-dept { font-size: 11px; background: #ede9fe; color: #5b21b6; border-radius: 4px; padding: 1px 7px; }
.rework-open-row .ror-sched { font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; }
.rework-pick-body { padding: 6px 2px; }
#rework-pick-search { width: 100%; padding: 9px 12px; font-size: 14px; box-sizing: border-box; }
.rework-pick-results { margin-top: 8px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.rework-pick-hint { font-size: 13px; color: #94a3b8; padding: 10px 4px; }
.rework-pick-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-align: left; width: 100%; background: #fff; border: 1px solid #eef1f4;
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
.rework-pick-item:hover { background: #f5f3ff; border-color: #c4b5fd; }
.rework-pick-item .rpi-co { font-weight: 600; color: #1f2329; }
.rework-pick-item .rpi-meta { font-size: 11px; color: #64748b; }
/* REWORK: the job-modal padding rules are scoped to #modal/#job-form, so these
   rework modals were rendering tight against the edges. Give them the same
   comfortable margins. */
#rework-modal .modal-content > header.modal-hero,
#rework-list-modal .modal-content > header.modal-hero {
  padding: 22px 28px 16px;
}
#rework-form .form-section { padding: 22px 28px; border-bottom: none; }
#rework-form .form-section .grid { gap: 18px 22px; }
#rework-form > footer { padding: 18px 28px 24px; margin-top: 0; }
.rework-pick-body { padding: 18px 26px 24px; }
#rework-list-modal .modal-content { width: min(1040px, 95vw); }
#rework-list-modal .table-wrap { padding: 8px 24px 24px; border: none; }
/* Fixed layout so the long Job/Needs columns truncate instead of pushing the
   Scheduled/Status columns off the right edge. */
#rework-list-table { table-layout: fixed; width: 100%; }
#rework-list-table th, #rework-list-table td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#rework-list-table th:nth-child(1), #rework-list-table td:nth-child(1) { width: 104px; }  /* Logged */
#rework-list-table th:nth-child(2), #rework-list-table td:nth-child(2) { width: 26%; }     /* Job */
#rework-list-table th:nth-child(3), #rework-list-table td:nth-child(3) { width: 116px; }   /* Department */
#rework-list-table th:nth-child(4), #rework-list-table td:nth-child(4) { width: auto; }     /* Needs */
#rework-list-table th:nth-child(5), #rework-list-table td:nth-child(5) { width: 130px; }   /* Scheduled */
#rework-list-table th:nth-child(6), #rework-list-table td:nth-child(6) { width: 78px; }     /* Status */
.dashboard-list-card h3 {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 700;
  color: #1f2329;
}
.dashboard-list { display: flex; flex-direction: column; gap: 6px; }
.dashboard-list .empty { color: #888; font-size: 13px; font-style: italic; }
.dashboard-list .dl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 13px;
}
.dashboard-list .dl-item:hover { background: #f5f7fa; }
.dashboard-list .dl-date {
  font-weight: 600;
  color: #56606b;
  font-size: 12px;
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.dashboard-list .dl-label { flex: 1; font-weight: 500; }
.dashboard-list .dl-meta { color: #888; font-size: 12px; }
.dashboard-list-card h3 .dl-count {
  font-weight: 400;
  color: #888;
  font-size: 13px;
  margin-left: 4px;
}

/* Views dropdown trigger styling */
.tab-dropdown-btn {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: 1px solid #d0d4da;
  background: #fff;
  cursor: pointer;
}
.tab-dropdown-btn:hover { background: #f0f1f3; }
.tab-dropdown-btn.active {
  background: #16C7C9;
  color: #fff;
  border-color: #16C7C9;
}

@media (max-width: 1024px) {
  .dashboard-lists.three-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .dashboard-lists,
  .dashboard-lists.three-col { grid-template-columns: 1fr; }
}

/* Calendar */
.cal-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 10px 14px;
  background: #f8f9fa;
  border: 1px solid #e1e4e8;
  border-radius: var(--r-md);
  flex-wrap: wrap;
  font-size: 13px;
}
.cal-toolbar-label {
  font-weight: 600;
  color: #56606b;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: -4px;
}
.cal-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
/* POLISH-08 (H5): unified search-input chrome. All three search
   inputs (calendar / kanban / jobs-controls) now share base
   dimensions; only the right-padding (for #cal-search's clear button)
   and width differ per usage. */
#cal-search,
#kanban-search,
.kanban-controls input[type="search"],
.jobs-controls input[type="search"] {
  padding: 7px 12px;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-family: inherit;
  background: #fff;
}
/* #kanban-search is a contenteditable div standing in for an <input>
   (autofill defense) — mimic single-line input behavior, like #cal-search. */
#kanban-search {
  min-width: 220px;
  cursor: text;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 1.4;
}
#kanban-search:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}
#cal-search {
  width: 280px;
  padding-right: 30px;   /* extra room for the clear button */
  /* Contenteditable div standing in for an <input> (autofill defense) —
     mimic single-line input behavior. */
  cursor: text;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 1.4;
}
#cal-search:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}
#cal-search:focus,
#kanban-search:focus,
.kanban-controls input[type="search"]:focus,
.jobs-controls input[type="search"]:focus {
  outline: none;
  border-color: var(--action-blue);
  box-shadow: 0 0 0 2px rgba(22,199,201, 0.15);
}
.cal-search-count {
  position: absolute;
  right: 32px;
  font-size: 11px;
  font-weight: 600;
  color: #56606b;
  background: #fff3e0;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  pointer-events: none;
}
.cal-search-count.clickable {
  pointer-events: auto;
  cursor: pointer;
}
.cal-search-count.clickable:hover {
  background: #ffe0b2;
  color: #1f2937;
}
.cal-search-clear {
  position: absolute;
  right: 6px;
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.cal-search-clear:hover { color: #1f2329; background: #eef0f3; }
.cal-mode-toggle {
  display: inline-flex;
  background: #fff;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  overflow: hidden;
}
.cal-mode-btn {
  border: none;
  background: #fff;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #56606b;
  cursor: pointer;
  font-family: inherit;
  border-right: 1px solid #e1e4e8;
}
.cal-mode-btn:last-child { border-right: none; }
.cal-mode-btn:hover { background: #f0f1f3; }
.cal-mode-btn.active {
  background: #16C7C9;
  color: #fff;
}
.cal-mode-btn.active:hover { background: #12B6B8; }
/* When a search is active, dim the toolbar's other toggles to draw the
   eye to the search box — but keep them clickable. */
.cal-toolbar.searching .toggle { opacity: 0.45; }
@media (max-width: 768px) {
  #cal-search { width: 200px; }
}
.legend-toggle {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 12px;
  color: #56606b;
  background: #fff;
  border: 1px solid #d0d4da;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.legend-toggle:hover { border-color: #16C7C9; color: #16C7C9; }
.legend.hidden { display: none; }
.legend {
  width: 100%;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed #e1e4e8;
  margin-left: 0 !important;
}
.cal-controls h2 {
  margin: 0;
  font-size: 18px;
  min-width: 200px;
  text-align: center;
}
.cal-views {
  display: inline-flex;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-left: 12px;
}
.cal-view-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 0;
  background: #fff;
  font-size: 13px;
  border-right: 1px solid #d0d4da;
}
.cal-view-btn:last-child { border-right: none; }
.cal-view-btn.active { background: #16C7C9; color: #fff; }
.cal-view-btn:hover:not(.active) { background: #f0f1f3; }
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #56606b;
  cursor: pointer;
  user-select: none;
}
.toggle input { margin: 0; cursor: pointer; }
.legend {
  margin-left: auto;
  font-size: 13px;
  color: #56606b;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.dot.prod-due { background: #56606b; }
.dot.install { background: #16C7C9; }
.dot.pickup { background: #ffa000; }
.dot.completed { background: #ab47bc; }
.dot.priority { background: #e53935; }

#calendar {
  /* UI-02-C: calendar is the hero surface — bump to 16px radius,
     elevated shadow, slate-200 border. */
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
}
.cal-header > div {
  padding: 8px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: #56606b;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e4e8;
  text-align: center;
}
.cal-day {
  padding: 4px 4px 6px 4px;
  padding-top: calc(30px + var(--lanes, 0) * 22px);
  border-right: 1px solid #e1e4e8;
  border-bottom: 1px solid #e1e4e8;
  position: relative;
  background: #fff;
  overflow: hidden;
  cursor: cell;
}
.cal-day:hover { background: #f8fafe; }
.cal-day.today:hover { background: #fff4c4; }
.cal-day.other-month:hover { background: #f0f1f3; }
.cal-day::after {
  content: "+";
  position: absolute;
  top: 4px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16C7C9;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.1s;
  pointer-events: none;
}
.cal-day:hover::after { opacity: 1; }
/* Per-view fixed week heights */
/* Row heights chosen so the per-cell chip limit (15 / 20 / 30 in
   VIEW_CHIP_LIMIT) actually fits without needing the "+N more" overflow
   button until you exceed the limit. Each chip is ~17px tall + 3px gap,
   so 15 chips need ~300px plus header. Cells overflow-y:auto so busy
   days scroll inside the cell — calendar layout stays grid-aligned. */
#calendar.view-month .cal-week { height: 320px; overflow: hidden; }
#calendar.view-2week .cal-week { height: 440px; overflow: hidden; }
#calendar.view-week .cal-week { height: 700px; overflow: hidden; }
#calendar .cal-day { height: 100%; overflow-y: auto; overflow-x: hidden; }
/* Hide scrollbars unless hovering, so quiet days look clean */
#calendar .cal-day::-webkit-scrollbar { width: 6px; }
#calendar .cal-day::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--r-sm); }
#calendar .cal-day:hover::-webkit-scrollbar-thumb { background: #c4c8cd; }
.cal-day:nth-child(7n) { border-right: none; }
.cal-day.other-month { background: #fafbfc; color: #aaa; }
.cal-day.today { background: #fff8dc; }
.cal-day .day-number {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #56606b;
}
.cal-day.today .day-number {
  background: #16C7C9;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 4px;
  left: 4px;
}
.cal-event {
  display: block;
  font-size: 11px;
  padding: 2px 6px;
  margin-top: 3px;
  border-radius: var(--r-sm);
  background: #e8f0fe;
  color: #16C7C9;
  cursor: grab;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event:active, .span-bar:active { cursor: grabbing; }
.cal-event.dragging, .span-bar.dragging { opacity: 0.4; }
.cal-day.drag-over { background: #e3f2fd !important; outline: 2px solid #16C7C9; outline-offset: -2px; }
.cal-event.prod-due { background: #eceff1; color: #1f2329; border-left: 3px solid #1f2329; font-weight: 600; }
.cal-event.in-prod { background: #212121; color: #fff; border-left: 3px solid #000; font-weight: 600; cursor: default; }
.cal-event.install { background: #16C7C9; color: #fff; border-left: 3px solid #0E9799; font-weight: 600; }
.cal-event.removal { background: #6d4c41; color: #fff; border-left: 3px solid #4e342e; font-weight: 600; }
.cal-event.pickup { background: #fff8e1; color: #e65100; border-left: 3px solid #ffa000; font-weight: 600; }
.cal-event.completed { background: #f3e5f5; color: #6a1b9a; border-left: 3px solid #ab47bc; font-weight: 600; text-decoration: line-through; }
.cal-event.priority, .span-bar.priority-chip {
  background: #ffebee; color: #b71c1c; border-left: 3px solid #e53935; font-weight: 600;
}
/* Parked + priority: still red so it's obviously flagged, but with a
   dashed border and slight dim so you can see it's been set aside. */
.cal-event.priority.parked {
  border-left-style: dashed;
  background: repeating-linear-gradient(
    -45deg,
    #ffebee, #ffebee 6px,
    #fff5f5 6px, #fff5f5 12px
  );
  opacity: 0.92;
}
/* CAL-24: install/pickup/removal chip for a job that's OFF-CALENDAR (parked).
   The install still shows, but a dashed border + faint stripe signals the
   production side is set aside. */
.cal-event.install.parked,
.cal-event.pickup.parked,
.cal-event.removal.parked {
  border-style: dashed;
  opacity: 0.9;
}
.cal-event.install.parked::before,
.cal-event.pickup.parked::before,
.cal-event.removal.parked::before {
  content: "⏸ ";
  opacity: 0.8;
}
.cal-event.install.done, .cal-event.pickup.done {
  text-decoration: line-through;
  opacity: 0.7;
  border-left-color: #2e7d32;
}
.cal-event.install.done::before, .cal-event.pickup.done::before {
  content: "✓ ";
  color: #2e7d32;
  text-decoration: none;
  display: inline-block;
  font-weight: 700;
}

/* Production span bars (Gantt-style) */
.bars-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.span-bar {
  position: absolute;
  height: 19px;
  font-size: 11px;
  font-weight: 600;
  padding: 0 8px;
  border-radius: var(--r-sm);
  cursor: grab;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  display: flex;
  align-items: center;
  margin-left: 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
.span-bar.in-prod { background: #212121; color: #fff; }
.span-bar.in-prod:hover { background: #000; }
.span-bar.completed { background: #ab47bc; color: #fff; }
.span-bar.completed:hover { background: #9c27b0; }
.span-bar.priority { background: #e53935; color: #fff; }
.span-bar.priority:hover { background: #c62828; }

/* Subtle marker: jobs not linked to a Corebridge order */
.span-bar.not-cb {
  border-bottom: 2px dashed rgba(255, 255, 255, 0.65);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.cal-event.not-cb {
  border-bottom: 1px dashed currentColor;
}
/* Highlight mode (when toggle is on) makes them pop */
.cal-highlight-not-cb .span-bar.not-cb {
  outline: 2px dashed #ffeb3b;
  outline-offset: -2px;
}
.cal-highlight-not-cb .cal-event.not-cb {
  outline: 1px dashed #f57f17;
}
.span-bar.custom { color: #fff; }
.span-bar.time-off {
  background: repeating-linear-gradient(
    45deg,
    rgba(120, 130, 145, 0.85),
    rgba(120, 130, 145, 0.85) 6px,
    rgba(160, 170, 180, 0.85) 6px,
    rgba(160, 170, 180, 0.85) 12px
  );
  color: #fff;
  font-style: italic;
}
.span-bar.time-off:hover { filter: brightness(0.95); }
.span-bar.pending {
  background: repeating-linear-gradient(45deg, #e8eaed, #e8eaed 4px, #f5f6f8 4px, #f5f6f8 8px);
  color: #56606b;
  border: 1px dashed #aaa;
}
.span-bar.continues-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.span-bar.continues-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.bar-legend {
  display: inline-block;
  width: 22px;
  height: 8px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.bar-legend.in-prod { background: #212121; }
.bar-legend.completed { background: #ab47bc; }
.bar-legend.priority { background: #e53935; }
.bar-legend.pending {
  background: repeating-linear-gradient(45deg, #e8eaed, #e8eaed 3px, #fff 3px, #fff 6px);
  border: 1px dashed #aaa;
  height: 6px;
}

/* Tables */
.table-wrap {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: var(--r-md);
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f1f3;
  white-space: nowrap;
}
th {
  background: #f8f9fa;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: #56606b;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
}
th[data-sort]:hover { background: #eef0f2; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #f5f7fa; }
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-lg);
  font-size: 12px;
  font-weight: 600;
}
.status-parked { background: #fff3e0; color: #e65100; border: 1px dashed #ef6c00; padding: 1px 7px; }
.status-pending { background: #f0f1f3; color: #56606b; }
.status-in_production { background: #212121; color: #fff; }
.status-ready_for_pickup { background: #fff8e1; color: #e65100; }
.status-ready_for_install { background: #16C7C9; color: #fff; }
.status-delivered { background: #f3e5f5; color: #6a1b9a; }
.status-completed { background: #f3e5f5; color: #6a1b9a; }
.status-cancelled { background: #eef0f2; color: #667085; text-decoration: line-through; }

.jobs-controls, .weekly-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.jobs-view-title { width: 100%; margin: 0 0 2px; font-size: 1.2rem; color: var(--text-heading); }
.filter-count {
  font-size: 12px;
  color: #56606b;
  margin-left: 6px;
  white-space: nowrap;
}
/* POLISH-08: search-input chrome shared with #cal-search above. */
.jobs-controls input[type="search"] {
  flex: 1;
  min-width: 240px;
}
.jobs-controls select, .weekly-controls select, .weekly-controls input {
  padding: 8px 10px;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  font-size: 14px;
  background: #fff;
}

/* Weekly summary */
#weekly-table { table-layout: fixed; width: 100%; }
#weekly-table .col-week { width: 18%; }
#weekly-table th.num, #weekly-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-right: 16px;
  width: 16.4%;
}
#weekly-table th, #weekly-table td { vertical-align: middle; }
#weekly-table td small { color: #888; font-weight: 400; margin-left: 2px; }
#weekly-table .variance-pos { color: #2e7d32; }
#weekly-table .variance-neg { color: #d93025; }
#weekly-table tfoot td { font-weight: 600; background: #f8f9fa; border-top: 2px solid #d0d4da; }
#weekly-table tr.month-subtotal td {
  background: #f0f4f8;
  font-weight: 600;
  border-top: 1px solid #d0d4da;
  border-bottom: 1px solid #d0d4da;
}

#weekly-table tr.partial-week td:first-child { color: #555; }
/* Week rows are clickable to drill into the scheduled jobs */
#weekly-table tbody tr:not(.month-subtotal) { cursor: pointer; }
#weekly-table tbody tr:not(.month-subtotal):hover td { background: #f0f6ff; }
#weekly-table tbody tr.month-subtotal { cursor: default; }
.week-jobs-summary {
  padding: 10px 14px;
  background: #f8f9fa;
  border: 1px solid #e1e4e8;
  border-radius: var(--r-md);
  margin-bottom: 14px;
  font-size: 14px;
}
#week-jobs-table tbody tr { cursor: pointer; }
#week-jobs-table tbody tr:hover td { background: #f0f6ff; }
#week-jobs-table tr.flagged td { opacity: 0.6; }
#week-jobs-table .wjt-flag { width: 18px; height: 18px; cursor: pointer; }
#week-jobs-table .wjt-open {
  font-size: 12px; padding: 4px 10px;
}
#weekly-table .partial-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 500;
  background: #fff3e0;
  color: #e65100;
  border-radius: var(--r-sm);
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal.hidden { display: none; }
.modal-content {
  background: #fff;
  border-radius: var(--r-lg);
  width: min(900px, 92vw);
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.modal-content.small { width: min(560px, 92vw); }
#task-modal .modal-content { width: min(860px, 92vw); }
#material-modal .modal-content { width: min(860px, 92vw); }
#survey-modal .modal-content { width: min(860px, 92vw); }
#timeoff-modal .modal-content { width: min(820px, 92vw); }
#team-modal .modal-content,
#statuses-modal .modal-content,
#import-modal .modal-content { width: min(860px, 92vw); }
/* POLISH-06: shared modal header chrome — was 32px 56px (huge), now
   matches the CAL-14 hero rhythm (22px 32px). Quieter, more SaaS-like.
   The CAL-14 #modal hero overrides this with its own padding. */
#task-modal .modal-content > header,
#material-modal .modal-content > header,
#survey-modal .modal-content > header,
#timeoff-modal .modal-content > header,
#team-modal .modal-content > header,
#statuses-modal .modal-content > header,
#import-modal .modal-content > header,
#day-modal .modal-content > header,
#modal .modal-content > header {
  padding: 22px 32px;
}
/* Unified modal close × button — applies wherever a modal close
   button has the .modal-close-x class. Replaces the per-modal
   close button sizing variance. */
.modal-close-x {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 24px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background 0.1s, color 0.1s;
}
.modal-close-x:hover {
  background: #f1f3f5;
  color: var(--brand-ink);
}
/* Hover preview card for jobs */
.hover-popup {
  position: fixed;
  z-index: 200;
  background: #fff;
  border: 1px solid #d0d4da;
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 14px 18px;
  width: 340px;
  /* Cap the height so a job with a long description/notes scrolls
     inside the card instead of sprawling over the whole calendar. */
  max-height: 70vh;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.45;
  pointer-events: none;
  color: #1f2329;
}
/* Long imported notes get a sensible cap inside the card */
.hover-popup .hp-notes {
  max-height: 160px;
  overflow-y: auto;
  font-size: 12px;
}
.hover-popup.hidden { display: none; }
.hover-popup .hp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.hover-popup .hp-amount {
  margin-left: auto;
  font-weight: 700;
  font-size: 15px;
}
.hover-popup .hp-priority {
  background: #d93025;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  letter-spacing: 0.05em;
}
.hover-popup h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.hover-popup .hp-meta { color: #56606b; font-size: 12px; margin-bottom: 8px; }
.hover-popup .hp-description {
  font-style: italic;
  color: #56606b;
  margin-bottom: 8px;
  border-left: 3px solid #e1e4e8;
  padding-left: 10px;
}
.hover-popup .hp-section {
  border-top: 1px solid #f0f1f3;
  padding-top: 8px;
  margin-top: 8px;
}
.hover-popup .hp-row { display: flex; gap: 6px; margin-bottom: 2px; }
.hover-popup .hp-row strong { color: #56606b; font-weight: 600; min-width: 78px; }
.hover-popup .hp-assignee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0f1f3;
  padding: 3px 10px 3px 6px;
  border-radius: var(--r-lg);
  font-weight: 600;
  font-size: 12px;
}

.day-list { padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 6px; }
.day-list .cal-event { font-size: 13px; padding: 6px 10px; }
.cal-more {
  display: block;
  font-size: 11px;
  margin-top: 3px;
  padding: 2px 6px;
  color: #16C7C9;
  cursor: pointer;
  font-weight: 600;
  background: none;
  border: none;
  text-align: left;
}
.cal-more:hover { background: #f0f1f3; border-radius: var(--r-sm); }
.modal-content > header {
  background: #fff;
  /* Soft divider that doesn't extend to the absolute edges — looks
     consistent with the inset form padding below. */
  border-bottom: 1px solid #eef0f3;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-content > header h2 { margin: 0; font-size: 18px; flex: 1; }
.header-action-btn {
  font-size: 13px;
  padding: 7px 14px;
  background: #16C7C9;
  color: #fff;
  border: 1px solid #16C7C9;
  border-radius: var(--r-md);
  cursor: pointer;
  font-weight: 600;
  margin-right: 4px;
}
.header-action-btn:hover { background: #12B6B8; border-color: #12B6B8; }

/* Quick-action button cluster in the job form header — green tones
   for "mark complete" semantics. Always visible (view + edit modes). */
.quick-actions {
  display: flex;
  gap: 6px;
  margin-right: 8px;
}
/* POLISH-07 (H4): quick-action chrome now uses design tokens for
   consistent dimensions across all 5 buttons. Semantic accent colors
   are preserved (production = purple, install = blue, job-complete =
   green-filled, pending = orange, waiting = red dashed) — the report
   noted these carry meaning. Only the dimensions/font/radius are
   unified, so they no longer look hand-styled. */
.quick-action-btn {
  font-size: var(--fs-sm);
  padding: 6px 12px;
  border-radius: var(--r-md);
  border: 1px solid;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.1s;
}
.quick-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.quick-action-btn.quick-prod {
  background: #fff;
  border-color: #ab47bc;
  color: #6a1b9a;
}
.quick-action-btn.quick-prod:hover:not(:disabled) { background: #ab47bc; color: #fff; }
.quick-action-btn.quick-install {
  background: #fff;
  border-color: #16C7C9;
  color: #0E9799;
}
.quick-action-btn.quick-install:hover:not(:disabled) { background: #16C7C9; color: #fff; }
.quick-action-btn.quick-job {
  background: #137333;
  border-color: #137333;
  color: #fff;
}
.quick-action-btn.quick-job:hover:not(:disabled) { background: #0e5e29; border-color: #0e5e29; }
.quick-action-btn.quick-pending {
  background: #fff;
  border-color: #ef6c00;
  color: #8d3b00;
}
.quick-action-btn.quick-pending:hover:not(:disabled) { background: #ef6c00; color: #fff; }
/* CAL-13: + $ Waiting quick action — red theme matching the
   Kanban-card +$ button. Dashed border like its Kanban cousin to
   signal "tag this state" vs the solid-border "complete this work"
   buttons. */
.quick-action-btn.quick-waiting {
  background: #fff;
  border: 1px dashed #c62828;
  color: #c62828;
}
.quick-action-btn.quick-waiting:hover:not(:disabled) {
  background: #c62828;
  color: #fff;
  border-style: solid;
}
/* Already done — show a check + dim */
.quick-action-btn.done {
  background: #e6f4ea;
  border-color: #2e7d32;
  color: #2e7d32;
  cursor: default;
}
.quick-action-btn.done:hover { background: #e6f4ea; }
@media (max-width: 768px) {
  .quick-actions { flex-wrap: wrap; }
  .quick-action-btn { font-size: 11px; padding: 5px 8px; }
}

/* Address row: input + "In Shop" shortcut button side by side */
.address-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.address-row input {
  flex: 1;
  min-width: 0;
}
.address-shortcut {
  flex-shrink: 0;
  padding: 0 12px;
  border: 1px solid #d0d4da;
  background: #fff;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
  color: #1f2329;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.address-shortcut:hover { background: #eef0f3; border-color: #16C7C9; color: #16C7C9; }
.address-shortcut.active {
  background: #e8f0fe;
  border-color: #16C7C9;
  color: #16C7C9;
}
/* In view mode the button is irrelevant — hide it */
#job-form.view-mode .address-shortcut { display: none; }

/* === Job form: view mode (read-only display) === */
#job-form.view-mode .grid input:not([type="checkbox"]):not([type="file"]),
#job-form.view-mode .grid select,
#job-form.view-mode .grid textarea {
  border-color: transparent !important;
  background: #f5f7fa !important;
  pointer-events: none;
  box-shadow: none !important;
}
#job-form.view-mode .grid input[type="checkbox"] { pointer-events: none; opacity: 0.7; }
/* CREW: view mode — chips stay visible, editing controls hide */
#job-form.view-mode .crew-chip .crew-remove,
#job-form.view-mode #crew-add-select { display: none !important; }
/* Hide everything that's an explicit edit-only action */
#job-form.view-mode #save-btn,
#job-form.view-mode #delete-btn,
#job-form.view-mode #mark-not-complete-btn,
#job-form.view-mode #add-install-2-section,
#job-form.view-mode .install-2-field:has(#remove-install-2-btn),
#job-form.view-mode #spawn-install-panel,
#job-form.view-mode .upload-btn,
#job-form.view-mode #upload-btn-label,
#job-form.view-mode #has-install-toggle {
  display: none !important;
}
#modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #56606b;
  padding: 0 8px;
}
/* CAL-14: job-form padding is now handled per form-section + per
   trailing block (extra-installs / attachments / footer) because the
   form is divided into discrete sections rather than one big padded
   block. The non-job forms keep their original padding. */
#job-form { padding: 0 0 28px 0; }
/* POLISH-06: form padding aligned to CAL-14 rhythm. */
#task-form, #material-form, #survey-form, #timeoff-form { padding: 24px 32px; }
#job-form > .extra-installs-section,
#job-form > .linked-panel,
#job-form > .attachments-section {
  margin-left: 32px;
  margin-right: 32px;
}
#job-form > footer { padding-left: 32px; padding-right: 32px; }
@media (max-width: 760px) {
  #job-form > .extra-installs-section,
  #job-form > .linked-panel,
  #job-form > .attachments-section { margin-left: 22px; margin-right: 22px; }
  #job-form > footer { padding-left: 22px; padding-right: 22px; }
}

/* Additional install days (INST-04) */
.extra-installs-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e1e4e8;
}
.extra-installs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
}
.extra-installs-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.extra-installs-hint { font-size: 12px; color: #888; }
.extra-installs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.extra-install-row {
  display: grid;
  grid-template-columns: 110px 110px 110px 1fr 130px 30px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #e1e4e8;
  border-radius: var(--r-md);
  background: #fafbfc;
}
.extra-install-row.completed { background: #f0f6f0; border-color: #bcdcbc; }
.extra-install-row label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 600;
  color: #56606b;
  gap: 2px;
  margin: 0;
}
.extra-install-row input,
.extra-install-row select {
  width: 100%;
  padding: 5px 6px;
  font-size: 12px;
  border: 1px solid #d0d4da;
  border-radius: var(--r-sm);
  background: #fff;
}
.extra-install-row .install-day-num {
  font-weight: 700;
  font-size: 13px;
  color: #16C7C9;
  align-self: center;
  text-align: center;
}
.extra-install-row .remove-day {
  background: transparent;
  border: 0;
  font-size: 18px;
  color: #888;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: var(--r-sm);
}
.extra-install-row .remove-day:hover { background: #ffe5e5; color: #C8102E; }
.extra-install-row .install-notes-row {
  grid-column: 1 / -1;
}
.extra-install-row .install-notes-row input {
  font-size: 12px;
}

/* Attachments */
.attachments-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e1e4e8;
}
/* PIPE-AGE: pipeline status history timeline inside the job modal. */
.status-history-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e1e4e8;
}
.status-history-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.status-history-header h3 { margin: 0; font-size: 15px; }
.status-history-hint { font-size: 12px; color: #64748b; }
.status-history-list { display: flex; flex-direction: column; gap: 2px; }
.status-history-empty { font-size: 13px; color: #94a3b8; padding: 4px 0; }
.status-history-item {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed #eef1f4;
  font-size: 13px;
}
.status-history-item:last-child { border-bottom: none; }
.shi-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #cbd5e1; justify-self: center;
}
.status-history-item.current .shi-dot { background: #16C7C9; box-shadow: 0 0 0 3px rgba(22,199,201,0.15); }
.shi-label { font-weight: 600; color: #1f2329; }
.status-history-item.current .shi-label { color: #16C7C9; }
.shi-span { color: #475569; font-variant-numeric: tabular-nums; }
.shi-date { color: #94a3b8; font-size: 11px; font-variant-numeric: tabular-nums; }
.attachments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.attachments-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.upload-btn {
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  font-weight: 500;
}
.upload-btn:hover { background: #f0f1f3; border-color: #16C7C9; color: #16C7C9; }
.jobshot-open-btn {
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  color: #1f2329;
}
.jobshot-open-btn:hover { background: #f0f1f3; border-color: #16C7C9; color: #16C7C9; }
.ics-link { float: right; font-size: 12px; font-weight: 600; color: #16C7C9; text-decoration: none; }
.ics-link:hover { text-decoration: underline; }
.attachments-hint { font-size: 12px; color: #888; margin: 0; }
.attachments-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.attachment-card {
  position: relative;
  border: 1px solid #e1e4e8;
  border-radius: var(--r-md);
  padding: 8px;
  background: #fafbfc;
  text-align: center;
  font-size: 11px;
  cursor: pointer;
  word-break: break-word;
  line-height: 1.3;
  overflow: hidden;
}
.attachment-card:hover { border-color: #16C7C9; background: #fff; }
.attachment-thumb {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  display: block;
}
.attachment-icon {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #d93025;
  background: #fff;
  border: 1px dashed #e1e4e8;
  border-radius: var(--r-sm);
  margin-bottom: 6px;
}
.attachment-name {
  font-weight: 500;
  color: #1f2329;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attachment-size { color: #888; font-size: 10px; margin-top: 1px; }
.attachment-date-header {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #888;
  margin: 10px 0 -2px;
  padding-top: 8px;
  border-top: 1px solid #e1e4e8;
}
.attachment-date-header:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.attachment-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #d0d4da;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  padding: 0;
  color: #56606b;
  opacity: 1;
  transition: background 0.1s, border-color 0.1s;
}
.attachment-delete:hover { background: #d93025; color: #fff; border-color: #d93025; }
.reminder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e1e4e8;
  border-radius: var(--r-md);
  padding: 8px 10px;
  background: #fafbfc;
  font-size: 12px;
  margin-bottom: 6px;
}
.reminder-row.is-sent { opacity: 0.55; }
.reminder-row-main { flex: 1; min-width: 0; }
.reminder-row-when { font-weight: 600; color: #1f2329; }
.reminder-row-note { color: #56606b; margin-top: 1px; word-break: break-word; }
.reminder-delete {
  background: #fff;
  border: 1px solid #d0d4da;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  padding: 0;
  color: #56606b;
  flex: none;
}
.reminder-delete:hover { background: #d93025; color: #fff; border-color: #d93025; }
.reminder-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.reminder-form select,
.reminder-form input[type="datetime-local"] {
  padding: 6px 8px;
  border: 1px solid #d0d4da;
  border-radius: var(--r-sm);
  font-size: 12px;
}
.reminder-form input[type="text"] {
  flex: 1;
  min-width: 140px;
  padding: 6px 8px;
  border: 1px solid #d0d4da;
  border-radius: var(--r-sm);
  font-size: 12px;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 22px;
}
.grid .full { grid-column: 1 / -1; }
.grid label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 600;
  color: #56606b;
  gap: 4px;
}
.grid input, .grid select, .grid textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 11px 14px;
  border: 1px solid #b8bec8;
  border-radius: var(--r-md);
  background: #fff;
  font-weight: normal;
  color: #1f2329;
  transition: border-color 0.1s, box-shadow 0.1s;
  /* Constrain to the grid column — without these, native form
     controls (especially <select> and <input type="date">) size
     themselves by content/user-agent and can spill past the column
     boundary, making the dropdown popup render absurdly wide. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Long option text (job company names run 80+ characters) shouldn't be
   able to widen the closed box past the column above — truncate instead. */
.grid select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid input:focus, .grid select:focus, .grid textarea:focus {
  outline: none;
  border-color: #16C7C9;
  /* Softer focus indicator — was 3px @ 18% alpha which read as a hard
     blue stripe across full-width inputs and made the form look
     unbalanced when the field auto-focused on open. */
  box-shadow: 0 0 0 2px rgba(22,199,201, 0.10);
}
.grid input:hover:not(:focus), .grid select:hover:not(:focus), .grid textarea:hover:not(:focus) {
  border-color: #8a92a0;
}
.grid textarea { resize: vertical; }
.grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
}
.checkbox-row {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  font-weight: 600;
  color: #1f2329 !important;
}
#job-form.no-install .install-field { display: none; }
#job-form.no-production .production-field { display: none; }
.hint-inline { font-size: 11px; color: #6b7280; margin-left: 8px; font-weight: 400; }

/* PROD-BTN: button-driven production-completed control */
.prod-complete-control { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.prod-complete-control .pcc-label { font-size: 12px; font-weight: 600; color: #56606b; width: 100%; }
.pcc-mark-btn {
  border: 1px solid #16C7C9; background: #16C7C9; color: #fff;
  font-weight: 600; font-size: 13px; border-radius: 8px; padding: 7px 14px; cursor: pointer;
}
.pcc-mark-btn:hover { background: #0E9799; border-color: #0E9799; }
.pcc-done { font-size: 13px; font-weight: 600; color: #1b7a1b; display: inline-flex; align-items: center; gap: 8px; }
.pcc-done strong { color: #1f2329; }
.pcc-none { font-size: 13px; color: #94a3b8; }
.pcc-pick { font-size: 12px; color: #56606b; display: inline-flex; align-items: center; gap: 6px; }
.pcc-pick input[type="date"] { padding: 4px 6px; }

/* Inline action button (e.g. "Mark not complete" next to a date input) */
.input-with-action {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-with-action input { flex: 1; }
.link-btn {
  background: none;
  border: none;
  color: #16C7C9;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: #0E9799; background: #f0f1f3; border-radius: var(--r-sm); }
.link-btn-danger { color: #d93025; }
.link-btn-danger:hover { color: #b71c1c; }

/* Linked-job panel (production ↔ install) */
/* POLISH-13 (M3): linked-panel chrome now uses the same blue family
   as the rest of the app (action-blue) instead of Google Material's
   light-blue-100/300 palette. */
.linked-panel {
  grid-column: 1 / -1;
  background: #eef4fc;
  border: 1px solid #c9dcf3;
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-top: 4px;
  font-size: var(--fs-sm);
}
.linked-panel-header {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--action-blue);
  margin-bottom: 6px;
}
.linked-panel-info { margin-bottom: 6px; line-height: 1.5; }
#parent-panel { background: #f3e5f5; border-color: #ce93d8; }
#parent-panel .linked-panel-header { color: #6a1b9a; }

.checkpoint-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.check-done { background: #2e7d32; color: #fff; }
.check-pending { background: #fff; color: #56606b; border: 2px solid #b8bec8; font-weight: 400; }
.money-note {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
}
.money-counted { background: #e8f5e9; color: #1b5e20; }
.money-pending { background: #fff8e1; color: #856404; }
#job-form footer, #task-form footer, #material-form footer, #survey-form footer, #timeoff-form footer, #rework-form footer {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  padding-top: 22px;
  /* Soft divider — matches the header style above */
  border-top: 1px solid #eef0f3;
  align-items: center;
}
.spacer { flex: 1; }
.hidden { display: none !important; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: var(--r-md);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  min-width: 160px;
  padding: 4px;
  z-index: 50;
}
.dropdown-menu button {
  display: block;
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
}
.dropdown-menu button:hover { background: #f0f1f3; }
.dropdown-menu button.menu-danger { color: #d93025; border-top: 1px solid #f0f1f3; margin-top: 4px; padding-top: 12px; }
.dropdown-menu button.menu-danger:hover { background: #fce8e6; }

/* CREW: "Also assigned" picker in the job modal */
.crew-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crew-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.crew-chips:empty { display: none; }
.crew-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 2px 6px 2px 6px;
  border-radius: var(--r-lg);
  background: #f0f1f3;
  color: #1f2329;
}
.crew-chip .crew-remove {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  color: #6b7280;
}
.crew-chip .crew-remove:hover { color: #d93025; }

/* Assignee badges */
.assignee-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 2px 8px 2px 4px;
  border-radius: var(--r-lg);
  background: #f0f1f3;
  color: #1f2329;
}
.assignee-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #888;
  flex-shrink: 0;
}
.assignee-stripe {
  display: inline-block;
  width: 6px;
  height: 14px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.span-bar .assignee-stripe {
  height: 100%;
  width: 4px;
  border-radius: var(--r-sm) 0 0 4px;
  margin-right: 6px;
  margin-left: -8px;
}

/* Task chips on calendar */
.cal-event.material-ordered {
  background: #ffe0b2;
  color: #e65100;
  border-left: 3px solid #fb8c00;
  font-weight: 600;
}
.cal-event.material-delivery {
  background: #b2dfdb;
  color: #004d40;
  border-left: 3px solid #00897b;
  font-weight: 600;
}
.cal-event.material-cancelled {
  text-decoration: line-through;
  opacity: 0.6;
}
.cal-event.survey {
  background: #fce4ec;
  color: #880e4f;
  border-left: 3px solid #ec407a;
  font-weight: 600;
}
.cal-event.survey.cancelled, .cal-event.survey.completed {
  text-decoration: line-through;
  opacity: 0.7;
}

/* Surveys weekly view */
.surv-day {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: var(--r-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.surv-day-header {
  background: #f8f9fa;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e1e4e8;
}
.surv-day-header .surv-day-count {
  font-weight: 400;
  color: #56606b;
}
.surv-day.today .surv-day-header { background: #fff8dc; }
.surv-day-empty { padding: 14px 16px; color: #888; font-style: italic; font-size: 13px; }
.surv-row {
  display: grid;
  grid-template-columns: 90px 1fr 180px 120px 110px 1fr;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f1f3;
  font-size: 13px;
  cursor: pointer;
  align-items: center;
}
.surv-row:last-child { border-bottom: none; }
.surv-row:hover { background: #f5f7fa; }
.surv-row .surv-time { font-weight: 600; }
.surv-row .surv-customer { font-weight: 600; }
.surv-row .surv-address { color: #56606b; font-size: 12px; }
.surv-row .surv-assignee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.cal-event.task {
  background: #f1f5fb;
  color: #1f2329;
  border-left: 3px solid #888;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cal-event.task::before {
  content: "☐";
  font-size: 11px;
  color: #56606b;
}
.cal-event.task.completed::before { content: "☑"; }
.cal-event.task.completed { text-decoration: line-through; opacity: 0.7; }

/* Tasks table */
#tasks-table .task-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
#tasks-table tr.completed .task-title { text-decoration: line-through; color: #888; }

/* Manage Team modal */
.team-body { padding: 24px 28px; }
.team-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.team-table th { background: #f8f9fa; padding: 8px 10px; text-align: left; font-size: 11px; text-transform: uppercase; color: #56606b; border-bottom: 1px solid #e1e4e8; }
.team-table td { padding: 8px 10px; border-bottom: 1px solid #f0f1f3; }
.team-color-input {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #d0d4da;
  border-radius: 50%;
  cursor: pointer;
  background: none;
}
.team-name-input {
  border: 1px solid transparent;
  background: transparent;
  font-size: 14px;
  padding: 4px 6px;
  width: 100%;
  font-family: inherit;
}
.team-name-input:hover, .team-name-input:focus {
  border-color: #d0d4da;
  background: #fff;
  outline: none;
}
.team-type-select,
.team-position-select {
  border: 1px solid #d0d4da;
  border-radius: var(--r-sm);
  padding: 4px 6px;
  font-size: 13px;
  background: #fff;
}
.team-add {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.team-add input { flex: 1; padding: 8px 10px; border: 1px solid #d0d4da; border-radius: var(--r-md); font-size: 14px; font-family: inherit; }
.team-add select { padding: 8px 10px; border: 1px solid #d0d4da; border-radius: var(--r-md); font-size: 14px; background: #fff; }
.add-heading { font-size: 13px; text-transform: uppercase; color: #56606b; margin: 24px 0 4px; letter-spacing: 0.04em; }
#team-modal footer,
#statuses-modal footer { display: flex; padding: 16px 28px; border-top: 1px solid #e1e4e8; }

/* Corebridge tool modals (dated import, audit-by-invoice, WIP reconcile)
   share .person-body, which had no padding at all — content ran edge to
   edge. Matches the .import-body rhythm used elsewhere. */
.person-body { padding: 24px 28px; }
#dated-import-modal footer,
#audit-modal footer,
#wip-reconcile-modal footer {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-top: 1px solid #e1e4e8;
}
/* WIP reconcile has the widest table (7 columns) and is the tool people
   spend the most time in — give it more room on a large screen instead
   of capping at the same 900px as a simple form modal. */
#wip-reconcile-modal .modal-content.modal-wide { width: min(1200px, 94vw); max-height: 88vh; }
#wip-reconcile-modal .preview-table th,
#wip-reconcile-modal .preview-table td { padding: 8px 12px; }

/* Import modal */
.import-body { padding: 24px 28px; }
.import-body p { margin: 0 0 14px 0; line-height: 1.5; }
.import-body code { background: #f0f1f3; padding: 1px 5px; border-radius: var(--r-sm); font-size: 12px; }
.file-drop {
  display: block;
  border: 2px dashed #d0d4da;
  border-radius: var(--r-md);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  background: #fafbfc;
  font-weight: 600;
  color: #56606b;
}
.file-drop:hover { background: #f0f1f3; border-color: #16C7C9; color: #16C7C9; }
.error { color: #d93025; font-size: 13px; min-height: 18px; margin-top: 10px; }
.hint { font-size: 12px; color: #56606b; }
.preview-wrap {
  max-height: 320px;
  overflow: auto;
  border: 1px solid #e1e4e8;
  border-radius: var(--r-md);
  margin-top: 10px;
}
.preview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.preview-table th, .preview-table td { padding: 6px 10px; border-bottom: 1px solid #f0f1f3; text-align: left; }
.preview-table th { background: #f8f9fa; position: sticky; top: 0; font-size: 11px; text-transform: uppercase; }
.preview-table td:first-child, .preview-table th:first-child { width: 30px; text-align: center; }
#import-modal footer {
  display: flex;
  gap: 10px;
  padding: 16px 28px;
  border-top: 1px solid #e1e4e8;
  align-items: center;
}

/* Action button cell */
td.actions { width: 1%; }
.icon-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #56606b;
  padding: 4px 8px;
}
.icon-btn:hover { color: #16C7C9; background: #f0f1f3; border-radius: var(--r-sm); }

/* ====================================================================
   Mobile / responsive
   ==================================================================== */
@media (max-width: 768px) {
  body { font-size: 14px; }

  /* Header — wraps; nav becomes a horizontal-scroll strip */
  header {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  header h1 { font-size: 16px; flex: 0 0 auto; }
  nav {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  nav button, nav .tab {
    font-size: 13px;
    padding: 7px 12px;
    flex-shrink: 0;
    min-height: 40px;  /* touch-target */
  }

  /* The nav's overflow-x:auto scroll strip clips absolutely-positioned
     children, so the bell / Manage / + New dropdowns opened invisibly.
     Fixed positioning escapes the scroll box — pin them just under the
     header row, near full-width. */
  .topbar-actions .dropdown-menu {
    position: fixed;
    top: 72px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: min(70vh, 480px);
    overflow-y: auto;
  }
  /* The notif panel is itself a .dropdown-menu, so its small head
     buttons (⚙ / + Send / Mark all read) inherit width:100% from
     .dropdown-menu button and flex-shrink:0 from the nav touch-target
     rule above — each ballooning to full width and forcing the panel
     to scroll sideways. Restore their compact inline size. */
  .notif-panel-head button {
    width: auto;
    flex-shrink: 1;
    min-height: 0;
    padding: 4px 8px;
    font-size: 12px;
    white-space: nowrap;
  }

  main { padding: 12px; }

  /* Calendar controls */
  .cal-controls { flex-wrap: wrap; gap: 8px; }
  .cal-controls h2 { font-size: 16px; min-width: 0; flex: 1; text-align: center; }
  .cal-views { margin-left: 0; }
  .cal-view-btn { padding: 8px 14px; min-height: 38px; }
  .legend { width: 100%; margin-left: 0; font-size: 11px; gap: 8px; }
  .toggle { font-size: 12px; }

  /* Calendar cells on small screens — shorter than desktop but tall
     enough to show several events. Each cell still scrolls internally
     when it has more, and the overflow button takes over past 15. */
  #calendar.view-month .cal-week { height: 200px; }
  #calendar.view-2week .cal-week { height: 320px; }
  #calendar.view-week .cal-week { height: 70vh; min-height: 420px; }
  .cal-header > div { padding: 6px 2px; font-size: 10px; }
  .cal-day {
    padding: 2px;
    padding-top: calc(22px + var(--lanes, 0) * 18px);
  }
  .cal-day .day-number { font-size: 11px; top: 3px; left: 4px; }
  .cal-day.today .day-number { width: 20px; height: 20px; font-size: 10px; }
  .cal-event { font-size: 10px; padding: 1px 4px; line-height: 1.25; }
  .span-bar { height: 16px; font-size: 10px; padding: 0 6px; }
  /* No hover affordance on touch */
  .cal-day::after { display: none; }
  .cal-day { cursor: default; }

  /* Hover popup is desktop-only */
  .hover-popup { display: none !important; }

  /* Squeezing 7 columns into a phone width left each ~50px wide — event
     chips truncated to 3-4 characters ("291...", "Co...") and were
     unreadable without opening every job. Give each day a real minimum
     width instead and let the whole grid scroll horizontally; the header
     row and every week row are siblings inside #calendar, so scrolling
     that one container keeps them all in sync. Span-bar positions are
     percentages of the row's own width (see renderCalendar in app.js), so
     they stay correct at any column width without JS changes. */
  /* Without an explicit cap, the fixed 924px-wide grid below pulls both
     #calendar and .cal-main out to its own min-content width instead of
     clipping/scrolling — overflow:auto alone didn't stop it in testing. */
  .cal-main { max-width: 100%; }
  #calendar { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .cal-header, .cal-week { grid-template-columns: repeat(7, 132px); width: max-content; }

  /* Modals: keep them centered with breathing room on narrow desktop
     / split-screen windows. Only true phones (<480px below) go
     full-screen. Padding matches the desktop look (40/56 split) so a
     narrow-window user still gets the same visual breathing room. */
  .modal-content > header { padding: 32px 56px; }
  /* CAL-14: keep the per-section model on narrow screens too —
     restore only the non-job-form padding here. */
  /* POLISH-06: form padding aligned to CAL-14 rhythm. */
#task-form, #material-form, #survey-form, #timeoff-form { padding: 24px 32px; }
  .team-body, .import-body { padding: 28px 36px; }
  #modal-close,
  #task-modal-close, #material-modal-close, #survey-modal-close,
  #timeoff-modal-close,
  #team-modal-close, #statuses-modal-close, #day-modal-close, #import-close {
    font-size: 32px; padding: 4px 12px;
  }
  .grid { grid-template-columns: 1fr; gap: 14px; }
  /* iOS zooms inputs when font-size < 16px — bump to prevent that jolt */
  .grid input, .grid select, .grid textarea { font-size: 16px; }

  /* Form footer buttons: bigger touch targets */
  #job-form footer button,
  #task-form footer button,
  #material-form footer button,
  #survey-form footer button,
  #timeoff-form footer button { min-height: 42px; padding: 10px 18px; }

  /* Tables become horizontally scrollable; slimmer rows */
  .table-wrap { overflow-x: auto; }
  table { font-size: 12px; }
  th, td { padding: 8px 10px; }

  /* Surveys: stack the row layout into label / value pairs */
  .surv-row {
    grid-template-columns: 80px 1fr;
    gap: 4px 12px;
  }
  .surv-row > div:nth-child(1) { grid-column: 1; }
  .surv-row > div:nth-child(2) { grid-column: 2; grid-row: 1 / span 5; }
  .surv-row > div:nth-child(n+3) { grid-column: 1 / -1; }
}

/* Tighter still for phones */
@media (max-width: 480px) {
  header h1 { display: none; } /* save horizontal space; tabs are clear enough */
  .cal-controls h2 { font-size: 14px; }
  #calendar.view-month .cal-week { height: 80px; }
  .cal-event { font-size: 9px; }
  .legend { gap: 6px; }
  .legend > * { font-size: 10px; }
  /* True phones: modals go full-screen (the centered card pattern
     doesn't have room to breathe at this size). */
  .modal { padding: 0; align-items: stretch; justify-content: stretch; }
  .modal-content,
  #task-modal .modal-content,
  #material-modal .modal-content,
  #survey-modal .modal-content,
  #timeoff-modal .modal-content,
  #team-modal .modal-content,
  #statuses-modal .modal-content,
  #import-modal .modal-content,
  .modal-content.small {
    width: 100% !important;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .modal-content > header { padding: 18px 22px; }
  #job-form, #task-form, #material-form, #survey-form, #timeoff-form { padding: 22px; }
}

/* ---------- Calendar layout with pending sidebar ---------- */
.cal-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.cal-main { flex: 1; min-width: 0; }
/* Right column that holds both the Pending and Parked sidebars,
   stacked vertically. The column sticks; each sidebar scrolls
   internally. */
.cal-side-column {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.pending-sidebar {
  /* UI-02-C: match calendar chrome — 16px radius, soft shadow, slate
     border. Keeps the pending rail feeling like a sibling surface
     rather than a flat utility panel. */
  width: 100%;
  flex-shrink: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Parked sidebar = same shape, orange accent so it's visually distinct */
.pending-sidebar.parked-sidebar > header {
  background: #fff8e1;
  border-bottom-color: #ffe0b2;
}
.parked-side-count {
  background: #fff3e0 !important;
  color: #e65100 !important;
}
.parked-side-count.zero { background: #eef0f3 !important; color: #6b7280 !important; }

/* Pending-install-schedule sidebar — green accent (ready-for-install vibe) */
.pending-sidebar.schedule-sidebar > header {
  background: #e6f4ea;
  border-bottom-color: #b7dfbf;
}
.schedule-side-count {
  background: #e6f4ea !important;
  color: #137333 !important;
}
.schedule-side-count.zero { background: #eef0f3 !important; color: #6b7280 !important; }
.show-schedule-sidebar-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-md);
  border: 1px solid #137333;
  background: #e6f4ea;
  color: #0e5e29;
  cursor: pointer;
  font-family: inherit;
}
.show-schedule-sidebar-btn:hover { background: #c8e6c9; }
.show-schedule-sidebar-btn #show-schedule-sidebar-count {
  display: inline-block;
  background: #137333;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  margin-left: 4px;
}

/* Install-whenever sidebar — blue accent (ready, but no committed date) */
.pending-sidebar.anytime-sidebar > header {
  background: #e8f0fe;
  border-bottom-color: #c6dafc;
}
.anytime-side-count {
  background: #e8f0fe !important;
  color: #1a56c4 !important;
}
.anytime-side-count.zero { background: #eef0f3 !important; color: #6b7280 !important; }
.show-anytime-sidebar-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-md);
  border: 1px solid #16C7C9;
  background: #e8f0fe;
  color: #174ea6;
  cursor: pointer;
  font-family: inherit;
}
.show-anytime-sidebar-btn:hover { background: #d2e3fc; }
.show-anytime-sidebar-btn #show-anytime-sidebar-count {
  display: inline-block;
  background: #16C7C9;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  margin-left: 4px;
}
/* "Waiting Nd" age on the install-whenever card — neutral by default,
   amber past a week, red past a month so stale jobs stand out. */
.psc-wait {
  display: inline-block;
  margin: 4px 0 2px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: #e8f0fe;
  color: #174ea6;
}
.psc-wait.psc-wait-aging { background: #fef3d7; color: #96590a; }
.psc-wait.psc-wait-old { background: #fce8e6; color: #b3261e; }
.pending-sidebar > header {
  padding: 12px 14px;
  border-bottom: 1px solid #eef0f3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: #fafbfc;
  border-radius: var(--r-lg) 10px 0 0;
}
.pending-sidebar h3 { margin: 0; font-size: 14px; font-weight: 600; flex: 1; }
/* Drag-to-reorder: the header is the grab handle. A grip glyph hints it, and
   the panel dims while it's being dragged. */
.pending-sidebar > header.panel-drag-handle { cursor: grab; }
.pending-sidebar > header.panel-drag-handle:active { cursor: grabbing; }
.pending-sidebar > header.panel-drag-handle::before {
  content: "⠿";
  color: #b0b6be;
  font-size: 15px;
  line-height: 1;
  cursor: grab;
  flex: 0 0 auto;
}
.pending-sidebar.panel-dragging { opacity: 0.45; }
.pending-sidebar-hide {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.pending-sidebar-hide:hover { background: #eef0f3; color: #1f2329; }
/* Per-sidebar hide. When BOTH are hidden, drop the whole column so the
   calendar gets the full width. */
.cal-layout.pending-hidden #pending-sidebar { display: none; }
.cal-layout.parked-hidden #parked-sidebar { display: none; }
.cal-layout.schedule-hidden #schedule-sidebar { display: none; }
.cal-layout.anytime-hidden #anytime-sidebar { display: none; }
.cal-layout.pending-hidden.parked-hidden.schedule-hidden.anytime-hidden .cal-side-column { display: none; }
.show-pending-sidebar-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-md);
  border: 1px solid #f0c869;
  background: #fff8e1;
  color: #8d6708;
  cursor: pointer;
  font-family: inherit;
}
.show-pending-sidebar-btn:hover { background: #ffecb3; }
.show-pending-sidebar-btn #show-pending-sidebar-count {
  display: inline-block;
  background: #f9a825;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  margin-left: 4px;
}
.show-parked-sidebar-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-md);
  border: 1px solid #ef6c00;
  background: #fff3e0;
  color: #8d3b00;
  cursor: pointer;
  font-family: inherit;
}
.show-parked-sidebar-btn:hover { background: #ffe0b2; }
.show-parked-sidebar-btn #show-parked-sidebar-count {
  display: inline-block;
  background: #ef6c00;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  margin-left: 4px;
}
.pending-sidebar-count {
  background: #fff3e0;
  color: #e65100;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--r-pill);
}
.pending-sidebar-count.zero { background: #eef0f3; color: #6b7280; }
.pending-sidebar-empty {
  padding: 18px 16px;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}
.pending-sidebar-empty p { margin: 0 0 6px 0; }
.pending-sidebar-list {
  overflow-y: auto;
  padding: 8px;
  flex: 1;
}
.pending-sidebar-card {
  background: #fff8e1;
  border: 1px solid #f0c869;
  border-left: 3px solid #f9a825;
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 13px;
}
.pending-sidebar-card.from-corebridge {
  background: #e3f2fd;
  border-color: #90caf9;
  border-left-color: #16C7C9;
}
.psc-company {
  font-weight: 600;
  color: #1f2329;
  margin-bottom: 4px;
  line-height: 1.25;
  word-break: break-word;
}
.psc-meta {
  font-size: 11px;
  color: #56606b;
  margin-bottom: 8px;
}
.psc-meta .dot-sep { margin: 0 4px; color: #b0b6bd; }
.psc-source {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: #16C7C9;
  color: #fff;
  margin-left: 6px;
}
.psc-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.psc-actions button {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid #d0d4da;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}
.psc-confirm {
  background: #137333 !important;
  color: #fff !important;
  border-color: #137333 !important;
}
.psc-confirm:hover { background: #0e5e29 !important; }
.psc-edit:hover { background: #f0f1f3; }
.psc-discard {
  color: #c5221f;
  margin-left: auto;
}
.psc-discard:hover { background: #fce8e6; }

@media (max-width: 900px) {
  .cal-layout { flex-direction: column; }
  .pending-sidebar {
    width: 100%;
    position: static;
    max-height: 400px;
  }
}

/* ---------- Parked-jobs toolbar button + modal ---------- */
.parked-list-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-md);
  border: 1px solid #ef6c00;
  background: #fff3e0;
  color: #e65100;
  cursor: pointer;
  font-family: inherit;
}
.parked-list-btn:hover { background: #ffe0b2; }
.parked-list-btn #parked-list-count {
  display: inline-block;
  background: #ef6c00;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  margin-left: 4px;
}
.parked-list-count-pill {
  display: inline-block;
  background: #fff3e0;
  color: #e65100;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  margin-left: 8px;
  vertical-align: middle;
}
#parked-table .parked-reason { color: #6b7280; font-style: italic; }
#parked-table .parked-row-actions { white-space: nowrap; text-align: right; }
.parked-promote-btn {
  background: #137333; color: #fff; border-color: #137333;
  font-size: 12px; padding: 4px 10px;
}
.parked-promote-btn:hover { background: #0e5e29; border-color: #0e5e29; }

/* ---------- Parked kanban (below the calendar grid) ---------- */
.parked-kanban {
  /* UI-02-C: hero surface chrome to match calendar + dashboard cards. */
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.parked-kanban.hidden { display: none; }
.parked-kanban.collapsed .kanban-columns { display: none; }
.kanban-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.kanban-header h3 { margin: 0; font-size: 15px; font-weight: 600; }
.kanban-total {
  display: inline-block;
  background: #fff3e0;
  color: #e65100;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  margin-left: 8px;
}
/* CAL-17: switch from a fixed 6-column grid to a horizontal flex row
   so all parked columns stay in ONE row regardless of how many we
   have (7 after CAL-16: Awaiting Payment + 6 workflow stages). Wider
   screens stretch the columns; narrower screens scroll horizontally
   inside the card. */
.kanban-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
}
.kanban-col {
  flex: 1 1 180px;
  min-width: 180px;
  background: #fafbfc;
  border: 1px solid #eef0f3;
  border-radius: var(--r-md);
  padding: 10px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kanban-col h4 {
  margin: 0 0 4px 0;
  font-size: 12px;
  font-weight: 700;
  color: #56606b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* POLISH-02: dollar total now dominant, count quietly parenthetical. The
   owner cares about column $ weight more than count of cards — the
   prior weights had it backwards. See UI-REVIEW.md H7. */
.kanban-col-count {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #6b7280;
  background: transparent;
  padding: 0 2px;
}
.kanban-col-total {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-ink);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.kanban-col h4 {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.kanban-col.dragover {
  background: #e3f2fd;
  border-color: #16C7C9;
}
/* Per-column accent (top border) so the columns are visually distinct.
   Awaiting * Payment columns share the red theme — these are AR
   concerns, the eye should land there first. Deposit darkest, Final
   lightest. */
.kanban-col[data-reason="Awaiting Deposit"]         { border-top: 3px solid #b71c1c; }
.kanban-col[data-reason="Awaiting Progress Payment"]{ border-top: 3px solid #d84315; }
.kanban-col[data-reason="Awaiting Final Payment"]   { border-top: 3px solid #ef5350; }
.kanban-col[data-reason="Awaiting Payment"]         { border-top: 3px solid #c62828; } /* legacy */
.kanban-col[data-reason="Design"] { border-top: 3px solid #e65100; }
.kanban-col[data-reason="Proof Out"] { border-top: 3px solid #f9a825; }
.kanban-col[data-reason="In Permit"] { border-top: 3px solid #388e3c; }
.kanban-col[data-reason="Vended"] { border-top: 3px solid #6a1b9a; }
.kanban-col[data-reason="Materials on Order"] { border-top: 3px solid #16C7C9; }
.kanban-col[data-reason="On Hold"] { border-top: 3px solid #00695c; }
.kanban-col[data-reason="Other"] { border-top: 3px solid #6b7280; }
.kanban-card {
  background: #fff;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  padding: 8px 10px;
  font-size: 12px;
  cursor: grab;
  transition: transform 0.06s, box-shadow 0.06s;
}
.kanban-card:hover {
  border-color: #16C7C9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.kanban-card.dragging { opacity: 0.4; cursor: grabbing; }
.kanban-card-company {
  font-weight: 600;
  color: #1f2329;
  margin-bottom: 3px;
  line-height: 1.25;
}
.kanban-card-meta {
  font-size: 11px;
  color: #6b7280;
}
.kanban-empty {
  font-size: 11px;
  color: #b0b6bd;
  text-align: center;
  padding: 8px 0;
  font-style: italic;
}
/* CAL-17: dropped the responsive grid-template-columns overrides —
   the parent .kanban-columns is now flex-based and scrolls horizontally
   on narrow screens, so wrapping to fewer-columns-per-row is no longer
   the desired behavior. Owner wants one row always. */

/* ---------- CAL-02: Full lifecycle Kanban (own tab) ----------
   Reuses .kanban-col / .kanban-card / .kanban-empty / .dragover from
   the parked-kanban widget above. Adds:
     - .kanban-full          horizontal-scrolling 12-column row
     - .kanban-col-parked    amber top accent for parked sub-stages
     - .kanban-col-active    blue top accent for active workflow
     - .kanban-controls      search / filter strip
     - priority + assignee chrome on cards
*/
.kanban-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e4e8;
  flex-wrap: wrap;
}
/* POLISH-08: search-input chrome shared with #cal-search above. */
.kanban-controls input[type="search"] {
  min-width: 220px;
}
.kanban-controls select {
  padding: 6px 10px;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.kanban-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #56606b;
  cursor: pointer;
}
.kanban-summary {
  margin-left: auto;
  font-size: 12px;
  color: #6b7280;
}
.kanban-full {
  padding: 14px 16px 24px;
}

/* CAL-08: Awaiting Payment banner — prominent strip at the top of
   the Kanban tab. Deep red border + tinted background so the AR
   pile is impossible to miss when the page first loads. Acts as a
   drop target (data-kind + data-target on the wrapper). */
.kanban-banner {
  background: linear-gradient(to bottom, #fff5f5, #fff);
  border: 2px solid #c62828;
  border-radius: var(--r-lg);
  padding: 12px 14px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(198, 40, 40, 0.08);
}
.kanban-banner.dragover {
  background: #ffebee;
  border-style: dashed;
}
/* Empty state: smaller, quieter — drop hint only, no urgency. */
.kanban-banner.kanban-banner-empty {
  background: #fafbfc;
  border: 2px dashed #d0d4da;
  box-shadow: none;
}
.kanban-banner.kanban-banner-empty .kanban-banner-header h3 { color: #94a3b8; }
.kanban-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.kanban-banner-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #b71c1c;
  letter-spacing: 0.02em;
}
.kanban-banner-sub {
  font-size: 11px;
  color: #56606b;
  margin-top: 2px;
}
/* CAL-10: per-payment-type breakdown line under the banner header.
   Three small pills showing "Deposit: 3 · $1,200", "Progress: 2 ·
   $4,500", "Final: 5 · $8,200" so the owner can size up the AR
   mix without counting cards. */
.kanban-banner-breakdowns {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.kanban-banner-breakdown {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid;
}
.kanban-banner-breakdown-critical {
  background: #ffebee;
  color: #b71c1c;
  border-color: #ef9a9a;
}
.kanban-banner-breakdown-warning {
  background: #fff8e1;
  color: #b54708;
  border-color: #fde68a;
}
.kanban-banner-breakdown-normal {
  background: #e3f2fd;
  color: #16C7C9;
  border-color: #bbdefb;
}

/* CAL-12: same payment chip rendered inside the job modal header,
   next to the title. Same tone-class names as the Kanban card chip
   so visual continuity holds (the chip you saw on the card matches
   the chip you see in the modal). Slightly larger here because the
   modal header has more room than a Kanban card. */
.modal-payment-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-md);
  margin-left: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: middle;
  white-space: nowrap;
}
.modal-payment-chip.hidden { display: none; }
.modal-payment-chip-critical {
  background: #b71c1c;
  color: #fff;
}
.modal-payment-chip-warning {
  background: #fde68a;
  color: #92400e;
}
.modal-payment-chip-normal {
  background: #bbdefb;
  color: #0E9799;
}

/* =====================================================================
   CAL-14: job modal redesign — hero header + toolbar + sectioned form.

   The redesign replaces the cramped single-row title+amount+button-grid
   header with three stacked zones:

     1) modal-hero      — company name, meta line, big amount, close (×)
     2) modal-toolbar   — quick-action buttons get their own row
     3) form-section[s] — Customer / Money / Description / Production /
                           Status & Flags / Install / Notes

   We use a higher-specificity selector (`#modal .modal-content >
   header.modal-hero`) to override the generic header rules above. */

#modal .modal-content > header.modal-hero {
  background: #fff;
  border-bottom: 1px solid #eef0f3;
  padding: 22px 32px 18px 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
@media (max-width: 760px) {
  #modal .modal-content > header.modal-hero { padding: 18px 22px 14px 22px; }
}
.modal-hero-main {
  flex: 1 1 auto;
  min-width: 0;
}
.modal-hero-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#modal .modal-content > header.modal-hero h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: #1f2329;
  flex: 0 1 auto;
  word-break: break-word;
}
.modal-hero-meta {
  font-size: 13px;
  color: #56606b;
  margin-top: 6px;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.modal-hero-meta:empty { display: none; }
.modal-hero-meta-sep {
  color: #b8bec8;
  font-weight: 600;
}
.modal-hero-status-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: #f0f1f3;
  color: #56606b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.modal-hero-status-pill.status-pending { background: #f4e3b8; color: #6d4c12; }
.modal-hero-status-pill.status-in_production { background: #c5e1ff; color: #0E9799; }
.modal-hero-status-pill.status-ready_for_install { background: #d4f1d0; color: #1b5e20; }
.modal-hero-status-pill.status-ready_for_pickup { background: #d4f1d0; color: #1b5e20; }
.modal-hero-status-pill.status-completed { background: #d8d8d8; color: #424242; }
.modal-hero-status-pill.status-cancelled { background: #ffcdd2; color: #b71c1c; }
.modal-hero-status-pill.status-parked { background: #ffe0b2; color: #5d4037; }
.modal-hero-side {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}
.modal-hero-amount {
  font-size: 22px;
  font-weight: 700;
  color: #1f2329;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}
.modal-hero-amount:empty { display: none; }
/* Reset the modal-payment-chip margin when it lives in the hero
   title row — the old layout had it sit next to a small h2 with a
   12px gutter; the new hero uses gap on the title row instead. */
.modal-hero-title-row .modal-payment-chip { margin-left: 0; }
/* Close button styling inside the hero — keep the existing
   #modal-close behavior, but make sure it sits flush with the
   amount in the side column. */
#modal .modal-content > header.modal-hero #modal-close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  color: #56606b;
  align-self: flex-start;
}
#modal .modal-content > header.modal-hero #modal-close:hover { color: #1f2329; }

/* Toolbar row — quick-action buttons get a calm gray strip so they
   don't compete with the title or the form. Edit button right-aligned. */
.modal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 32px;
  background: #f8f9fa;
  border-bottom: 1px solid #eef0f3;
}
.modal-toolbar.hidden { display: none; }
.modal-toolbar-spacer { flex: 1 1 auto; }
@media (max-width: 760px) {
  .modal-toolbar { padding: 10px 22px; }
}

/* Form sections — replace the old single 40px/56px form padding with
   per-section padding. Each section has a small uppercase header and
   a soft divider underneath. */
/* POLISH-09 (M9): symmetric vertical padding so sections breathe
   evenly above and below their divider. Was 18px/6px (top-heavy). */
#job-form .form-section {
  padding: 22px 32px 22px 32px;
  border-bottom: 1px solid #eef0f3;
}
#job-form .form-section:last-of-type { border-bottom: none; }
#job-form .form-section-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 14px;
}
#job-form .form-section .grid { gap: 16px 22px; }
@media (max-width: 760px) {
  #job-form .form-section { padding: 16px 22px 4px 22px; }
}
/* Label-less wrapper used in the Notes section where we don't want
   "Notes" repeated above the textarea (the section header already
   says it). Hides only the label text but keeps the input layout. */
.no-label-text { font-size: 0; }
.no-label-text > input,
.no-label-text > textarea,
.no-label-text > select { font-size: 14px; }

/* CAL-10: per-card chip distinguishing Deposit / Progress / Final
   on banner cards. Sits inline with the company name. */
.kanban-card-paychip {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.kanban-card-paychip-critical {
  background: #b71c1c;
  color: #fff;
}
.kanban-card-paychip-warning {
  background: #fde68a;
  color: #92400e;
}
.kanban-card-paychip-normal {
  background: #bbdefb;
  color: #0E9799;
}
.kanban-banner-cards {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  align-items: stretch;
  padding-bottom: 4px;
}
.kanban-banner-cards .kanban-card {
  flex: 0 0 220px;
  min-width: 220px;
}
.kanban-banner-cards .kanban-empty {
  flex: 1;
  padding: 14px;
  text-align: center;
}

/* CAL-04: each kanban section is its own labeled row of columns.
   Two of them are stacked vertically — On-Calendar on top
   (active workflow), Off-Calendar below (parked queue). */
.kanban-section {
  margin-bottom: 18px;
}
.kanban-section:last-child { margin-bottom: 0; }
.kanban-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
}
.kanban-section-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #56606b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kanban-section-count {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: #f1f3f5;
}
/* Active band = branded/energetic (teal). Parked band = the quiet holding
   queue, so a calm graphite header reads more sophisticated than the old loud
   orange. Count pills tint to match — fixes the leftover blue pill (#e3f2fd)
   that lingered under the teal header after the blue→teal sweep. */
.kanban-section-active .kanban-section-header h3 { color: #0E9799; }
.kanban-section-active .kanban-section-count { background: #E6F7F7; color: #0E9799; }
.kanban-section-parked .kanban-section-header h3 { color: #64748B; }
.kanban-section-parked .kanban-section-count { background: #EEF1F5; color: #64748B; }
/* CAL-19: section dollar total — bold, tabular-numbered, sits to the
   right of the count pill so the section header reads "On Calendar
   active workflow · 47 jobs · $312,450". */
.kanban-section-total {
  font-size: 14px;
  font-weight: 700;
  color: #1f2329;
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
}
/* CHAT/PIPE: the pipeline wraps into as many rows as needed (≈2 for the
   Fully Promoted board's stages) so EVERY stage stays visible, instead of a
   single row that scrolls sideways and hides the trailing stages. auto-fill
   packs as many ≥200px columns per row as fit and wraps the rest, left-aligned
   and evenly sized — and collapses to fewer-per-row on narrow screens. */
.kanban-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  align-items: start;
}
.kanban-row .kanban-col {
  min-width: 0;
  max-height: calc(50vh - 100px);
  overflow-y: auto;
}
/* Parked sub-stages are a holding queue, not a progression — so they get
   muted, desaturated tones that harmonize with the brand instead of the old
   saturated rainbow (bright orange / vivid purple / primary green). Each keeps
   its original hue family so learned columns stay recognizable, just calmer.
   Awaiting Payment uses Signal Coral — the brand's alert color — so the AR
   concern is where the eye lands first. */
.kanban-full .kanban-col-parked[data-target="Awaiting Payment"]   { border-top: 3px solid #FF6B4A; }
.kanban-full .kanban-col-parked[data-target="Design"]             { border-top: 3px solid #8778D0; }
.kanban-full .kanban-col-parked[data-target="Proof Out"]          { border-top: 3px solid #D6973A; }
.kanban-full .kanban-col-parked[data-target="In Permit"]          { border-top: 3px solid #5E86B8; }
.kanban-full .kanban-col-parked[data-target="Vended"]             { border-top: 3px solid #7D8AA3; }
.kanban-full .kanban-col-parked[data-target="Materials on Order"] { border-top: 3px solid #16C7C9; }
.kanban-full .kanban-col-parked[data-target="On Hold"]            { border-top: 3px solid #9AA5B1; }
/* Active stages: one cohesive slate→teal→green "progress ramp" anchored on
   the Alignment Teal brand color. Reads left-to-right as "more done" without
   the muddy triple-cyan of before — each step is a distinct, evenly-spaced
   stop in a single cool family. */
.kanban-full .kanban-col-active[data-target="pending"]           { border-top: 3px solid #94a3b8; }
.kanban-full .kanban-col-active[data-target="in_production"]     { border-top: 3px solid #16C7C9; }
.kanban-full .kanban-col-active[data-target="ready_for_pickup"]  { border-top: 3px solid #0D9488; }
.kanban-full .kanban-col-active[data-target="ready_for_install"] { border-top: 3px solid #1FA06B; }
.kanban-full .kanban-col-active[data-target="delivered"]         { border-top: 3px solid #16A34A; }
.kanban-full .kanban-col-active[data-target="completed"]         { border-top: 3px solid #15803D; }
/* Whisper-subtle band tints — enough to separate active from parked without
   the loud cream/gray split that used to chop the board in half. */
.kanban-full .kanban-col-parked { background: #fbfaf8; }
.kanban-full .kanban-col-active { background: #fafbfc; }
/* Priority card + ★ badge */
.kanban-card.priority {
  border-color: #f9a825;
  background: linear-gradient(to right, #fff8e1 0%, #ffffff 8%);
}
.kanban-card-priority {
  color: #f9a825;
  font-size: 12px;
  margin-right: 4px;
  font-weight: 900;
}
/* CAL-03: same yellow "pending" chip the calendar uses on
   pending-review jobs (those synced from Corebridge but not yet
   approved by the owner). Pending-review cards also get a dashed
   left border so they're scannable in a busy column. */
.kanban-card.pending-review {
  border-left: 3px dashed #f9a825;
}
.kanban-card-pending {
  display: inline-block;
  font-size: 10px;
  background: #fff3e0;
  color: #e65100;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  margin-left: 6px;
  font-weight: 600;
  vertical-align: middle;
}
.kanban-card-assignee {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* PIPE-AGE: time-in-current-stage badge. Neutral by default; ramps to amber
   then red as a card goes stale so backed-up jobs are obvious at a glance. */
.kanban-card-age {
  display: inline-block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 4px;
  padding: 1px 6px;
}
.kanban-card-age.stale-1 { color: #92700e; background: #fef3c7; }
.kanban-card-age.stale-2 { color: #9a3412; background: #ffedd5; }
.kanban-card-age.stale-3 { color: #fff; background: #dc2626; }
/* CB-03: suggestion badge + popover. The 💡 icon sits inline with
   the card title; clicking it opens a popover with the apply/dismiss
   buttons. The has-suggestion card class adds a subtle blue tint to
   the entire card so it's easy to scan a column for "what needs
   attention". */
.kanban-card.has-suggestion {
  border-left: 3px solid #16C7C9;
  background: linear-gradient(to right, #e3f2fd 0%, #ffffff 8%);
}
.kanban-card-suggestion {
  display: inline-block;
  font-size: 12px;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: var(--r-lg);
  background: #e3f2fd;
  color: #16C7C9;
  cursor: pointer;
  font-weight: 600;
  vertical-align: middle;
  user-select: none;
}
.kanban-card-suggestion:hover { background: #bbdefb; }

.suggestion-popover {
  background: #fff;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 0;
  min-width: 280px;
  max-width: 360px;
  font-size: 13px;
}
.suggestion-row {
  padding: 12px 14px;
  border-bottom: 1px solid #eef0f3;
}
.suggestion-row:last-child { border-bottom: none; }
.suggestion-reason {
  font-size: 11px;
  color: #56606b;
  margin-bottom: 6px;
}
.suggestion-change {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
}
.suggestion-current {
  color: #6b7280;
  text-decoration: line-through;
  text-decoration-color: rgba(107, 114, 128, 0.4);
}
.suggestion-arrow { color: #94a3b8; }
.suggestion-suggested { color: #16C7C9; }
.suggestion-actions {
  display: flex;
  gap: 6px;
}
.suggestion-actions button {
  flex: 1;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: var(--r-md);
  border: 1px solid #d0d4da;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}
.suggestion-actions button.primary {
  background: #16C7C9;
  color: #fff;
  border-color: #16C7C9;
}
.suggestion-actions button:hover { filter: brightness(1.05); }

/* CB-03: cancelled column gets a muted gray accent. Same hidden-
   by-default behaviour as Completed (controlled by the "Show
   Completed column" toggle). A lighter, faded gray than Pending's
   slate so the two neutral columns read distinctly — cancelled as
   "retired/archived", pending as "not started". */
.kanban-full .kanban-col-active[data-target="cancelled"]         { border-top: 3px solid #C2C8D0; }

/* CAL-09: quick-note button + popover for Awaiting Payment cards.
   The button sits at the top-right of the card and only appears on
   awaiting-payment cards. The latest note preview shows at the
   bottom of the card so the owner can scan "what did I do last
   time" without expanding anything. */
.kanban-card.awaiting-payment {
  position: relative;
}
.kanban-card-note-btn,
.kanban-card-mark-waiting-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  font-weight: 600;
  background: #fff;
  color: #c62828;
  border: 1px solid #c62828;
  border-radius: var(--r-lg);
  padding: 1px 8px;
  cursor: pointer;
  font-family: inherit;
  z-index: 1;
  line-height: 1.4;
}
.kanban-card-note-btn:hover,
.kanban-card-mark-waiting-btn:hover {
  background: #c62828;
  color: #fff;
}
/* CAL-11: subtle styling difference — mark-as-waiting button is
   dashed-border (less commit, more "tag this") vs the solid-border
   note button (a "do this routine thing" action). */
.kanban-card-mark-waiting-btn {
  border-style: dashed;
}
/* Cards aren't relative-positioned by default — the AP-card class
   adds it for the +Note button. Add it for any card with the
   mark-waiting button too. */
.kanban-card:has(.kanban-card-mark-waiting-btn) {
  position: relative;
}

/* MOBILE: "⇄ Move" replaces drag-and-drop on touch — hidden on desktop
   where dragging already works. Sits in normal flow (not absolutely
   positioned) so it doesn't need the position:relative dance above. */
.kanban-card-move-btn { display: none; }
@media (max-width: 768px) {
  .kanban-card-move-btn {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 6px 0;
    font-size: 11px;
    font-weight: 600;
    color: #16C7C9;
    background: #f0f6ff;
    border: 1px solid #cfe0fb;
    border-radius: var(--r-md);
    cursor: pointer;
    font-family: inherit;
  }
}
.move-popover-title {
  padding: 12px 14px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #56606b;
}
.move-popover-list {
  display: flex;
  flex-direction: column;
  max-height: 50vh;
  overflow-y: auto;
}
.move-popover-option {
  padding: 10px 14px;
  text-align: left;
  font-size: 13px;
  border: none;
  border-top: 1px solid #eef0f3;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}
.move-popover-option:hover { background: #f0f6ff; }
.move-popover-cancel {
  width: 100%;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #56606b;
  border: none;
  border-top: 1px solid #eef0f3;
  background: #fafbfc;
  border-radius: 0 0 var(--r-md) var(--r-md);
  cursor: pointer;
  font-family: inherit;
}
/* On phones a small anchored popover risks going off-screen (up to a
   dozen destinations) — pin it as a bottom sheet instead, matching the
   .topbar-actions .dropdown-menu mobile fix elsewhere in this file. */
@media (max-width: 768px) {
  .move-popover {
    position: fixed !important;
    left: 10px !important;
    right: 10px;
    top: auto !important;
    bottom: 10px;
    width: auto;
    max-width: none;
  }
}

/* Picker popover for "Mark as waiting on" → Deposit / Progress / Final. */
.mark-waiting-popover {
  min-width: 280px;
  max-width: 320px;
}
.mark-waiting-body {
  padding: 12px 14px;
}
.mark-waiting-title {
  font-size: 11px;
  font-weight: 600;
  color: #56606b;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mark-waiting-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mark-waiting-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 12px;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.04s, box-shadow 0.04s;
}
.mark-waiting-opt:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.mark-waiting-opt-label {
  font-size: 13px;
  font-weight: 600;
}
.mark-waiting-opt-hint {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}
/* Color tone per option matches the BANNER_CHIP_META tones —
   Deposit critical red, Progress amber, Final blue — so the
   picker is consistent with the chip the card will get afterward. */
.mark-waiting-deposit  { border-left: 4px solid #b71c1c; }
.mark-waiting-deposit .mark-waiting-opt-label  { color: #b71c1c; }
.mark-waiting-progress { border-left: 4px solid #d84315; }
.mark-waiting-progress .mark-waiting-opt-label { color: #d84315; }
.mark-waiting-final    { border-left: 4px solid #16C7C9; }
.mark-waiting-final .mark-waiting-opt-label    { color: #16C7C9; }
.kanban-card-latest-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #e1e4e8;
  font-size: 10px;
  color: #6b7280;
  font-style: italic;
  line-height: 1.4;
  /* Truncate to one line with ellipsis if too long. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Note popover reuses the suggestion-popover base styling but adds
   note-specific bits. */
.note-popover {
  min-width: 320px;
  max-width: 420px;
}
.note-popover-body {
  padding: 12px 14px;
}
.note-popover-title {
  font-size: 13px;
  font-weight: 600;
  color: #1f2329;
  margin-bottom: 10px;
}
.note-popover-history-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.note-popover-history {
  background: #f8f9fa;
  border-radius: var(--r-sm);
  padding: 6px 8px;
  margin-bottom: 10px;
  max-height: 100px;
  overflow-y: auto;
}
.note-popover-history-line {
  font-size: 11px;
  color: #56606b;
  line-height: 1.5;
  white-space: pre-wrap;
}
.note-popover-input {
  width: 100%;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 50px;
  box-sizing: border-box;
}
.note-popover-input:focus {
  outline: none;
  border-color: #16C7C9;
}
.note-popover-hint {
  font-size: 10px;
  color: #94a3b8;
  margin: 4px 0 10px;
}

/* CAL-05: truncation note shown at the bottom of the Completed
   column when the cap has hidden older completed jobs. Quiet,
   italic, not pretending to be a card. */
.kanban-col-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e1e4e8;
  font-size: 10px;
  color: #94a3b8;
  font-style: italic;
  text-align: center;
}

/* ---------- Duplicates scanner ---------- */
#duplicates-modal .modal-content { width: min(960px, 94vw); max-height: 90vh; }
.duplicates-summary {
  padding: 12px 14px;
  background: #f8f9fa;
  border: 1px solid #e1e4e8;
  border-radius: var(--r-md);
  margin-bottom: 14px;
  font-size: 14px;
}
.duplicates-list { display: flex; flex-direction: column; gap: 14px; }
.dup-group {
  border: 1px solid #e1e4e8;
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
}
.dup-group.tier-cb_id { border-left: 4px solid #d93025; }
.dup-group.tier-invoice { border-left: 4px solid #f9a825; }
.dup-group.tier-soft,
.dup-group.tier-soft_due,
.dup-group.tier-soft_amount,
.dup-group.tier-soft_delivery { border-left: 4px solid #16C7C9; }
.dup-group.merged { opacity: 0.5; }
.dup-group-header {
  padding: 10px 14px;
  background: #fafbfc;
  border-bottom: 1px solid #eef0f3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.dup-tier-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 6px;
}
.dup-tier-badge.tier-cb_id { background: #fce8e6; color: #c5221f; }
.dup-tier-badge.tier-invoice { background: #fff3e0; color: #e65100; }
.dup-tier-badge.tier-soft,
.dup-tier-badge.tier-soft_due,
.dup-tier-badge.tier-soft_amount,
.dup-tier-badge.tier-soft_delivery { background: #e8f0fe; color: #16C7C9; }
.dup-group-body { padding: 0; }
.dup-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dup-table th, .dup-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f1f3;
  text-align: left;
  vertical-align: top;
}
.dup-table th { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; background: #fafbfc; }
.dup-table tr.is-primary { background: #e8f5e9; }
.dup-table tr.is-primary td:first-child::before {
  content: '★ ';
  color: #2e7d32;
}
.dup-row-radio { cursor: pointer; }
.dup-actions { padding: 10px 14px; display: flex; gap: 8px; justify-content: flex-end; background: #fafbfc; border-top: 1px solid #eef0f3; }

/* ---------- Corebridge hub modal ---------- */
#corebridge-hub-modal .modal-content { width: min(640px, 92vw); }
/* PHASE 3: Corebridge connection panel at the top of the hub. */
.cb-conn-status { font-weight: 600; font-size: 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cb-conn-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cb-conn-dot.ok { background: #2e7d32; }
.cb-conn-dot.off { background: #c5221f; }
.cb-conn-label { display: block; font-size: 12px; font-weight: 600; color: #56606b; margin-bottom: 10px; }
.cb-conn-label input {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px;
  border: 1px solid #d0d4da; border-radius: 8px; font-size: 14px; font-family: inherit;
}
.cb-conn-label input:focus { outline: none; border-color: var(--action-blue); box-shadow: 0 0 0 2px rgba(22,199,201,0.15); }
.cb-conn-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.cb-conn-actions button { padding: 8px 14px; border-radius: 8px; border: 1px solid #d0d4da; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.cb-conn-actions button.primary { background: var(--action-blue, #16C7C9); color: #fff; border-color: transparent; font-weight: 600; }
.cb-conn-actions button:disabled { opacity: .6; cursor: default; }
.cb-conn-msg { margin-top: 10px; font-size: 13px; min-height: 18px; }
.cb-conn-msg.ok { color: #137333; }
.cb-conn-msg.error { color: #c5221f; }
.cb-conn-rule { margin: 18px 0; border: none; border-top: 1px solid #e1e4e8; }
.cb-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cb-hub-action {
  text-align: left;
  background: #fff;
  border: 1px solid #d0d4da;
  border-left: 3px solid #16C7C9;
  border-radius: var(--r-md);
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s;
}
.cb-hub-action:hover {
  background: #f0f6ff;
  border-color: #16C7C9;
}
.cb-hub-action.cb-hub-warn {
  border-left-color: #f9a825;
}
.cb-hub-action.cb-hub-warn:hover {
  background: #fff8e1;
  border-color: #f9a825;
}
.cb-hub-action.cb-hub-danger {
  border-left-color: #d93025;
}
.cb-hub-action.cb-hub-danger:hover {
  background: #fdf3f2;
  border-color: #d93025;
}
.cb-hub-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: #1f2329;
}
.cb-hub-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.35;
}
@media (max-width: 600px) {
  .cb-hub-grid { grid-template-columns: 1fr; }
}

/* ---------- Users & logins / Audit log ---------- */
.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid #e1e4e8;
}
.header-user #logout-btn {
  font-size: 12px;
  padding: 6px 12px;
}
.current-user {
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: var(--r-pill);
  padding: 4px 10px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.current-user.role-admin { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
/* Manage menu is admin-only — hidden in markup by default and revealed
   in JS via loadCurrentUser() once the user is known to be admin. */
.admin-only.hidden { display: none; }
@media (max-width: 768px) {
  .header-user {
    margin-left: 4px;
    padding-left: 6px;
  }
  .current-user { max-width: 100px; }
}
.modal-wide { width: min(900px, 92vw); }
.users-add {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.users-add h3 { margin: 0 0 10px 0; font-size: 14px; }
.users-add-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1.2fr 100px 80px;
  gap: 8px;
  align-items: center;
}
.users-add-row input, .users-add-row select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  font-size: 14px;
  font-family: inherit;
}
.users-add-hint { margin-top: 8px; font-size: 12px; color: #6b7280; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #eef0f3;
  vertical-align: middle;
}
.data-table th {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f9fafb;
}
.data-table tr.disabled td { opacity: 0.5; }
.role-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: #e8f0fe;
  color: #16C7C9;
}
.role-pill.admin { background: #fff3e0; color: #e65100; }
.audit-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.audit-action {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--r-sm);
}
.audit-action-create { background: #e6f4ea; color: #137333; }
.audit-action-update { background: #e8f0fe; color: #16C7C9; }
.audit-action-delete { background: #fce8e6; color: #c5221f; }
.audit-action-login  { background: #f3e8fd; color: #6b21a8; }
.audit-action-system { background: #fff3e0; color: #e65100; }
@media (max-width: 768px) {
  .users-add-row { grid-template-columns: 1fr; }
}

/* WIP reconcile modal — long Corebridge company names get clipped so
   the table stays inside the modal instead of forcing a sideways scroll. */
#wipr-results .preview-table td:nth-child(2) {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   NOTIF-07: bell button + notification panel. */
.notif-btn {
  position: relative;
  background: transparent;
  border: 1px solid #d8e0ea;
  border-radius: var(--r-md);
  padding: 6px 10px;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.notif-btn:hover { background: #f5f7fa; }
.notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--brand-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  min-width: 18px;
  text-align: center;
  border: 2px solid #fff;
}
.notif-badge.hidden { display: none; }
.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 380px;
  max-width: calc(100vw - 20px); /* never hang off a narrow window */
  max-height: 480px;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.notif-panel.hidden { display: none; }
/* Phones: the fix for the panel opening off-screen lives in the mobile
   media block with the other topbar dropdowns — see the
   `.topbar-actions .dropdown-menu` position:fixed rule, which covers the
   bell panel, Manage and + New Job menus in one place. */
.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #eef0f3;
}
.notif-panel-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--brand-ink);
}
.notif-mark-all {
  background: transparent;
  border: none;
  color: var(--action-blue);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list {
  overflow-y: auto;
  max-height: 420px;
}
.notif-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--cell-empty);
  font-size: var(--fs-sm);
  font-style: italic;
}
.notif-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f1f3;
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
}
.notif-item:hover { background: #fafbfc; }
.notif-item.unread {
  background: #f0f6ff;
  border-left: 3px solid var(--action-blue);
  padding-left: 13px;
}
.notif-item.unread:hover { background: #e6efff; }
.notif-item-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-ink);
  line-height: 1.3;
}
.notif-item-body {
  font-size: var(--fs-xs);
  color: #6b7280;
  margin-top: 4px;
  line-height: 1.4;
}
.notif-item-time {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 4px;
}

/* ---------- CHAT-02: team-chat button, panel, messages ---------- */
.chat-btn { position: relative; cursor: pointer; line-height: 1; }
.chat-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--brand-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  min-width: 18px;
  text-align: center;
  border: 2px solid #fff;
}
.chat-badge.hidden { display: none; }
.chat-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 380px;
  max-width: calc(100vw - 20px);
  max-height: 480px;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.chat-panel.hidden { display: none; }
.chat-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #eef0f3;
  flex-shrink: 0;
}
.chat-panel-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--brand-ink);
}
.chat-list {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}
.chat-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--cell-empty);
  font-size: var(--fs-sm);
  font-style: italic;
}
.chat-msg {
  padding: 6px 16px;
  line-height: 1.4;
}
.chat-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.chat-msg-sender {
  font-size: var(--fs-sm);
  font-weight: 700;
}
.chat-msg-time {
  font-size: 10px;
  color: #94a3b8;
}
.chat-msg-body {
  font-size: var(--fs-sm);
  color: var(--brand-ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px;
  border-top: 1px solid #eef0f3;
  flex-shrink: 0;
}
.chat-input {
  flex: 1 1 auto;
  resize: none;
  max-height: 96px;
  border: 1px solid #d8e0ea;
  border-radius: var(--r-md);
  padding: 8px 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--brand-ink);
}
.chat-input:focus {
  outline: none;
  border-color: var(--action-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.chat-send {
  flex-shrink: 0;
  border: none;
  border-radius: var(--r-md);
  background: var(--action-blue);
  color: #fff;
  font-weight: 650;
  font-size: var(--fs-sm);
  padding: 8px 14px;
  cursor: pointer;
}
.chat-send:hover { filter: brightness(0.95); }
/* The chat panel reuses the .dropdown-menu class, whose menu-item rule
   `.dropdown-menu button { display:block; width:100% }` (specificity 0,1,1) was
   overriding .chat-send (0,1,0) — stretching Send full-width and crushing the
   input to a sliver. Re-scope it back (0,2,0 wins). */
.chat-compose .chat-send {
  display: inline-flex;
  align-items: center;
  width: auto;
  flex: 0 0 auto;
}

/* CHAT-04: in-modal job discussion thread. Reuse the .chat-* look but frame the
   list as a bordered box inside the job form and constrain its scroll height. */
.job-thread-list {
  max-height: 260px;
  border: 1px solid #eef0f3;
  border-radius: var(--r-md);
  background: #fff;
}
.job-thread-list.hidden,
.job-thread-compose.hidden { display: none; }
.job-thread-compose {
  padding: 10px 0 0;
  border-top: none;
}
/* CHAT-05: per-job unread discussion dot on pipeline cards. */
.job-chat-dot {
  margin-left: 6px;
  font-size: 11px;
  line-height: 1;
  vertical-align: middle;
}

/* CHAT-06: own-message edit/delete affordances + soft-delete tombstone. */
.chat-msg-actions {
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
}
.chat-msg-actions button {
  border: none;
  background: none;
  color: #94a3b8;
  font-size: 10px;
  cursor: pointer;
  padding: 0;
}
.chat-msg-actions button:hover {
  color: var(--action-blue);
  text-decoration: underline;
}
.chat-msg-edited {
  font-size: 10px;
  color: #94a3b8;
  font-style: italic;
}
.chat-msg-tombstone {
  color: #94a3b8;
  font-style: italic;
}
.notif-item-kind {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  margin-bottom: 4px;
}
.notif-item-kind.kind-job_assigned       { background: #e3f2fd; color: #16C7C9; }
.notif-item-kind.kind-install_tomorrow   { background: #fff3e0; color: #ef6c00; }
.notif-item-kind.kind-sync_failed        { background: #ffebee; color: #c62828; }
.notif-item-kind.kind-overdue_payment    { background: #fce4ec; color: #c2185b; }
.notif-item-kind.kind-corebridge_completed { background: #e8f5e9; color: #2e7d32; }
.notif-item-kind.kind-manual             { background: #ede7f6; color: #4527a0; }
.notif-item-kind.kind-broadcast          { background: #fff8e1; color: #6d4c00; }
.notif-item-kind.kind-production_complete { background: #e0f2f1; color: #00695c; }
.notif-item-kind.kind-survey_scheduled   { background: #f3e5f5; color: #6a1b9a; } /* purple — matches calendar survey chips */
.notif-item-kind.kind-survey_today       { background: #f3e5f5; color: #6a1b9a; }

/* NOTIF-09: composer modal — recipient picker, title, body. Compact and
   shares modal-v2 chrome with the rest of the app. */
.notif-compose-row { margin-bottom: 12px; }
.notif-compose-row label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #666);
  margin-bottom: 4px;
}
.notif-compose-row input[type="text"],
.notif-compose-row select,
.notif-compose-row textarea {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: var(--r-md);
  background: var(--surface, #fff);
  box-sizing: border-box;
}
.notif-compose-row textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}
.notif-compose-mode {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: var(--r-md);
  padding: 2px;
  background: var(--cell-empty, #fafbfc);
}
.notif-compose-mode button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  color: var(--text-muted, #555);
}
.notif-compose-mode button.active {
  background: var(--surface, #fff);
  color: var(--text, #222);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  font-weight: 600;
}
.notif-compose-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted, #666);
  margin-top: -8px;
  margin-bottom: 12px;
}

/* Bell panel "Send notification" button */
.notif-compose-btn {
  border: 0;
  background: transparent;
  color: var(--action-blue, #16C7C9);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.notif-compose-btn:hover { background: rgba(21, 101, 192, 0.08); }

/* ============================================================
   POLISH-03: universal polish — focus rings, empty-state cells,
   sortable header affordance. Picks up everything outside the
   .grid form inputs (which keep their existing border+shadow
   focus treatment). See UI-REVIEW.md Top-5 #4, M4, H2. */

/* Keyboard-accessible focus rings — :focus-visible only fires on
   actual keyboard nav, so mouse clicks don't get the outline.
   Form inputs keep their existing 2px box-shadow treatment. */
:focus-visible {
  outline: 2px solid var(--action-blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
button:focus-visible,
a:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
[role="button"]:focus-visible {
  outline-offset: 2px;
}
/* Form grid inputs already define their own focus treatment — opt out. */
.grid input:focus-visible,
.grid select:focus-visible,
.grid textarea:focus-visible {
  outline: none;
}

/* Labeled empty-state cell — replaces literal "—" placeholders. Used in
   table cells, kanban empty columns, and metric fallbacks. Italic +
   muted color clearly reads "no value yet" rather than "broken data". */
.cell-empty {
  color: var(--cell-empty);
  font-style: italic;
  font-size: var(--fs-sm);
}

/* Sortable header affordance — only show the click cursor on TH cells
   that are actually sortable (have data-sort). Plain TH stays default
   cursor. See UI-REVIEW.md M4. */
th { cursor: default; }
th[data-sort] { cursor: pointer; }
th[data-sort]:hover { background: #eef0f2; }

/* ============================================================
   POLISH-04: toast + confirm modal — replaces native alert() /
   confirm() / prompt(). Fixed bottom-right toast stack with
   auto-dismiss; centered confirm dialog reuses .modal patterns.
   See UI-REVIEW.md Top-5 #1, H1. */

#toast-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  background: #fff;
  border-left: 4px solid var(--action-blue);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  font-size: var(--fs-sm);
  color: var(--brand-ink);
  pointer-events: auto;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: toast-in 180ms ease-out;
}
.toast.toast-success { border-left-color: #16a34a; }
.toast.toast-error   { border-left-color: var(--brand-red); }
.toast.toast-info    { border-left-color: var(--action-blue); }
.toast.toast-leaving { animation: toast-out 160ms ease-in forwards; }
.toast .toast-msg { flex: 1; line-height: 1.4; word-break: break-word; }
.toast .toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 16px;
  padding: 0 0 0 4px;
  line-height: 1;
}
.toast .toast-close:hover { color: var(--brand-ink); }
@keyframes toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateY(8px); opacity: 0; }
}

/* Confirm modal — sits on top of every other modal, blocks interaction
   until the user picks Cancel or Confirm. Promise-based API in app.js. */
#confirm-modal,
#notif-compose-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}
#confirm-modal.active,
#notif-compose-modal.active { display: flex; }
/* The compose modal shares button + card chrome with #confirm-modal. */
#notif-compose-modal .confirm-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  padding: 24px;
  animation: toast-in 160ms ease-out;
}
#notif-compose-modal .confirm-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--brand-ink);
  margin: 0 0 16px;
}
#notif-compose-modal .confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
#notif-compose-modal .confirm-actions button {
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r-md);
  border: 1px solid #d0d4da;
  background: #fff;
  cursor: pointer;
}
#notif-compose-modal .confirm-actions button.confirm-primary {
  background: var(--action-blue);
  color: #fff;
  border-color: var(--action-blue);
}
#notif-compose-modal .confirm-actions button.confirm-primary:hover {
  background: var(--action-blue-dark);
}
#notif-compose-modal .confirm-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* NOTIF-12: broadcast popup. Pops up over everything when a new team
   announcement arrives — user has to click the X or "Got it" to
   dismiss. Backdrop clicks are intentionally NOT a dismiss path. */
#broadcast-popup-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 11000; /* above #confirm-modal so it always wins */
  padding: 16px;
  animation: broadcast-fade-in 200ms ease-out;
}
#broadcast-popup-modal.active { display: flex; }
@keyframes broadcast-fade-in {
  from { background: rgba(15, 23, 42, 0); }
  to   { background: rgba(15, 23, 42, 0.62); }
}
#broadcast-popup-modal .broadcast-card {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  padding: 28px 28px 20px;
  border-top: 6px solid #f59e0b; /* amber accent — matches broadcast chip */
  animation: broadcast-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes broadcast-pop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
#broadcast-popup-modal .broadcast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #475569;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#broadcast-popup-modal .broadcast-close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--brand-ink, #0f172a);
}
#broadcast-popup-modal .broadcast-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #b45309; /* deeper amber for contrast */
  margin-bottom: 8px;
}
#broadcast-popup-modal .broadcast-title {
  font-size: var(--fs-xl, 20px);
  font-weight: 700;
  color: var(--brand-ink, #0f172a);
  margin: 0 0 12px;
  line-height: 1.3;
}
#broadcast-popup-modal .broadcast-body {
  font-size: var(--fs-md, 15px);
  color: #334155;
  line-height: 1.55;
  margin: 0 0 16px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
#broadcast-popup-modal .broadcast-body:empty { display: none; }
#broadcast-popup-modal .broadcast-meta {
  font-size: var(--fs-xs);
  color: #94a3b8;
  margin-bottom: 16px;
}
#broadcast-popup-modal .broadcast-meta:empty { display: none; }
#broadcast-popup-modal .broadcast-actions {
  display: flex;
  justify-content: flex-end;
}
#broadcast-popup-modal .broadcast-ack {
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--r-md);
  border: 0;
  background: var(--action-blue);
  color: #fff;
  cursor: pointer;
}
#broadcast-popup-modal .broadcast-ack:hover {
  background: var(--action-blue-dark);
}
#broadcast-popup-modal .broadcast-ack:focus-visible {
  outline: 2px solid var(--action-blue-dark);
  outline-offset: 2px;
}
#confirm-modal .confirm-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 420px;
  padding: 24px;
  animation: toast-in 160ms ease-out;
}
#confirm-modal .confirm-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--brand-ink);
  margin: 0 0 8px;
}
#confirm-modal .confirm-msg {
  font-size: var(--fs-sm);
  color: #475569;
  line-height: 1.5;
  margin: 0 0 20px;
  white-space: pre-wrap;
}
/* Optional date row (completion quick-actions: "Completed on" picker so a
   job can be completed as of a past date). */
#confirm-modal .confirm-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -8px 0 20px;
  font-size: var(--fs-sm);
  color: #475569;
  font-weight: 600;
}
#confirm-modal .confirm-date-input {
  padding: 6px 10px;
  border: 1px solid #d0d4da;
  border-radius: var(--r-md);
  font: inherit;
  color: var(--text-body);
}
#confirm-modal .confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
#confirm-modal .confirm-actions button {
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r-md);
  border: 1px solid #d0d4da;
  background: #fff;
  cursor: pointer;
}
#confirm-modal .confirm-actions button.confirm-primary {
  background: var(--action-blue);
  color: #fff;
  border-color: var(--action-blue);
}
#confirm-modal .confirm-actions button.confirm-primary:hover {
  background: var(--action-blue-dark);
}
#confirm-modal .confirm-actions button.confirm-danger {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
}
#confirm-modal .confirm-actions button.confirm-danger:hover {
  background: var(--brand-red-dark);
}

/* FP-STAGES: Fully Promoted stage manager */
#manage-stages-btn {
  border: 1px solid var(--brand-red);
  color: var(--brand-red);
  background: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
}
#manage-stages-btn:hover { background: var(--brand-red); color: #fff; }
.stages-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 4px 2px 8px;
}
@media (max-width: 720px) { .stages-editor { grid-template-columns: 1fr; } }
.stages-group h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--brand-red);
}
.stages-list { list-style: none; margin: 0 0 12px; padding: 0; }
.stages-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid #e3e8ee;
  border-radius: 8px;
  margin-bottom: 6px;
  background: #fff;
}
.stages-row.stage-inactive { opacity: 0.55; background: #f6f8fa; }
.stages-reorder { display: flex; flex-direction: column; gap: 2px; }
.stages-reorder button {
  border: none; background: #eef2f6; color: #4a5763;
  width: 22px; height: 16px; line-height: 14px; font-size: 9px;
  border-radius: 4px; cursor: pointer; padding: 0;
}
.stages-reorder button:disabled { opacity: 0.3; cursor: default; }
.stage-label {
  flex: 1; min-width: 0; padding: 6px 8px;
  border: 1px solid #d4dbe2; border-radius: 6px; font-size: 0.9rem;
}
.stage-rename {
  border: 1px solid #cbd5dd; background: #f6f8fa; color: #44525e;
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 0.82rem;
}
.stage-rename:hover { background: #e9eef2; }
.stage-toggle {
  border: 1px solid #cbd5dd; background: #f6f8fa; color: #44525e;
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 0.82rem; white-space: nowrap;
}
.stage-toggle:hover { background: #e9eef2; }
.stage-reactivate {
  border: 1px solid var(--brand-red); background: #fff; color: var(--brand-red);
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 0.82rem; white-space: nowrap;
}
.stage-reactivate:hover { background: var(--brand-red); color: #fff; }
.stage-remove {
  border: none; background: transparent; color: #b54a4a;
  font-size: 1rem; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.stage-remove:hover { background: #fbeaea; }
.stages-empty { color: #8a95a0; font-size: 0.85rem; padding: 6px 2px; }
.stages-add { display: flex; gap: 8px; }
.stages-add input {
  flex: 1; padding: 8px 10px;
  border: 1px solid #d4dbe2; border-radius: 6px; font-size: 0.9rem;
}
.stages-add button {
  border: 1px solid var(--brand-red); background: var(--brand-red); color: #fff;
  border-radius: 6px; padding: 8px 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.stages-add button:hover { background: var(--brand-red-dark); }

/* FP-VENDORS: vendor-management panel — reuses the stage-manager row styles. */
.manage-vendors-link {
  border: 1px solid var(--brand-red);
  color: var(--brand-red);
  background: #fff;
  border-radius: 6px;
  padding: 3px 10px;
  margin-left: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.manage-vendors-link:hover { background: var(--brand-red); color: #fff; }
.vendor-row.vendor-inactive { opacity: 0.55; background: #f6f8fa; }

/* BRAND: Fully Promoted "Jobs in progress" dashboard card */
.fp-jobs-card {
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(16, 118, 188, 0.06);
}
.fp-jobs-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--brand-red);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fp-jobs-count { color: #8a95a0; font-weight: 500; font-size: 0.85rem; }
.fp-jobs-list { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; }
.fp-job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.fp-job-row:hover { background: #eef6fc; }
.fp-job-company { font-weight: 600; color: #2a3742; }
.fp-job-stage {
  font-size: 0.8rem;
  color: #0A5A8F;
  background: #e3f1fb;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.fp-jobs-card .empty { color: #8a95a0; font-size: 0.88rem; padding: 8px 2px; }

/* FP-ESTIMATES: "New estimate requests" review section — shown on the FP
   dashboard (card) and atop the Project Pipeline board (banner). Amber accent
   signals "needs review", matching the calendar pending-review cards. */
.fp-estimates-card {
  background: #fff;
  border: 1px solid #e3e8ee;
  border-left: 3px solid #f9a825;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(16, 118, 188, 0.06);
}
.fp-estimates-card h3,
.fp-estimates-banner-head h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--brand-red);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fp-estimates-count { color: #8a95a0; font-weight: 500; font-size: 0.85rem; }
.fp-estimates-banner {
  background: #fffdf7;
  border: 1px solid #f0e2c0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.fp-estimates-banner-head h3 { margin-bottom: 10px; }
.fp-estimates-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.fp-estimates-list .empty { color: #8a95a0; font-size: 0.88rem; padding: 6px 2px; }
.fp-estimate-card {
  background: #fff8e1;
  border: 1px solid #f0c869;
  border-left: 3px solid #f9a825;
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 13px;
}
.fp-estimate-card.is-rush { border-left-color: #c5221f; background: #fdecea; }
.fer-company { font-weight: 600; color: #1f2329; margin-bottom: 4px; line-height: 1.25; word-break: break-word; }
.fer-rush-flag { color: #c5221f; font-weight: 700; margin-left: 6px; font-size: 11px; }
.fer-meta { font-size: 11px; color: #56606b; margin-bottom: 8px; }
.fer-meta .dot-sep { margin: 0 4px; color: #b0b6bd; }
.fer-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.fer-actions button {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid #d0d4da;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}
.fer-accept { background: #137333 !important; color: #fff !important; border-color: #137333 !important; }
.fer-accept:hover { background: #0e5e29 !important; }
.fer-edit:hover { background: #f0f1f3; }
.fer-discard { color: #c5221f; margin-left: auto; }
.fer-discard:hover { background: #fce8e6; }

/* AI-01: daily attention briefing card */
.ai-insights-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid #c7d6ea;
  border-radius: 8px;
  background: #fff;
  color: #285b91;
  padding: 6px 10px;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.ai-insights-btn:hover { background: #eef6fc; border-color: #9db9dc; }
.ai-briefing-modal-content { width: min(780px, 94vw); max-height: min(88vh, 820px); overflow: auto; }
#ai-briefing-modal .ai-briefing-modal-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 72px 20px 28px;
  background: linear-gradient(135deg, #eef4ff 0%, #f8faff 58%, #fff 100%);
  border-bottom: 1px solid #dfe8f4;
}
#ai-briefing-modal-close { position: absolute; top: 18px; right: 18px; }
.ai-briefing-modal-hero > div { min-width: 0; }
.ai-briefing-eyebrow { display: block; margin-bottom: 5px; color: #2a5a8f; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#ai-briefing-modal .ai-briefing-modal-hero h2 { margin: 0; color: #183b62; font-size: 1.35rem; line-height: 1.25; }
.ai-briefing-modal-hero p { margin: 6px 0 0; color: #64748b; font-size: .86rem; }
.ai-briefing-modal-body { display: grid; gap: 14px; padding: 20px 24px; }
.ai-briefing-modal-body .ai-briefing-card { margin: 0; }
.ai-briefing-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px 18px; border-top: 1px solid #eef0f3; }
.ai-briefing-modal-footer span { color: #7a8794; font-size: .76rem; }
.ai-briefing-modal-footer button { border: 1px solid #16C7C9; border-radius: 7px; background: #16C7C9; color: #fff; padding: 8px 20px; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.ai-briefing-modal-footer button:hover { background: #0E9799; }
.ai-briefing-card {
  background: linear-gradient(135deg, #f5f8ff 0%, #eef3fb 100%);
  border: 1px solid #d9e4f5;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.ai-briefing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ai-briefing-head h3 { margin: 0; font-size: 1rem; color: #1f3a5f; }
.ai-briefing-actions { display: flex; align-items: center; gap: 10px; }
.ai-briefing-meta { font-size: 0.75rem; color: #8a95a0; }
.ai-briefing-refresh {
  border: 1px solid #c7d6ea; background: #fff; color: #2a5a8f;
  border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 0.95rem; line-height: 1;
}
.ai-briefing-refresh:hover { background: #eef6fc; }
.ai-briefing-body { display: flex; flex-direction: column; gap: 5px; }
.ai-briefing-line {
  font-size: 0.9rem; color: #2a3742; line-height: 1.45;
  padding-left: 2px;
}
.ai-briefing-loading, .ai-briefing-empty { font-size: 0.88rem; color: #8a95a0; font-style: italic; }

@media (max-width: 720px) {
  .ai-insights-btn-label { display: none; }
  .ai-insights-btn { width: 36px; justify-content: center; padding: 6px; font-size: 1rem; }
  #ai-briefing-modal .ai-briefing-modal-hero { padding: 20px 64px 16px 18px; }
  .ai-briefing-modal-body { padding: 14px; }
  .ai-briefing-modal-footer { align-items: stretch; flex-direction: column; padding: 12px 16px 18px; }
  .ai-briefing-modal-footer button { width: 100%; min-height: 44px; }
  .ai-briefing-head { align-items: flex-start; }
  .ai-briefing-actions { flex-direction: column-reverse; align-items: flex-end; gap: 4px; }
}

/* AI-03: pending-inbox triage suggestion */
.psc-suggestion:empty { display: none; }
.psc-suggestion {
  margin: 4px 0 2px; font-size: 0.8rem; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.psc-suggest-text { color: #2a5a8f; }
.psc-suggest-text em { color: #8a95a0; font-style: normal; font-size: 0.72rem; }
.psc-suggest-loading, .psc-suggest-err { color: #8a95a0; font-style: italic; }
.psc-suggest-apply {
  border: 1px solid #2e7d32; background: #2e7d32; color: #fff;
  border-radius: 5px; padding: 2px 8px; font-size: 0.75rem; cursor: pointer;
}
.psc-suggest-apply:hover { background: #266a2b; }
.psc-suggest {
  border: 1px solid #c7d6ea; background: #f5f8ff; color: #2a5a8f;
  border-radius: 5px; cursor: pointer;
}

/* Topbar refresh-data button */
.refresh-data-btn {
  border: 1px solid #c7d6ea; background: #fff; color: #2a5a8f;
  border-radius: 8px; width: 36px; height: 36px; cursor: pointer;
  font-size: 1.1rem; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center;
}
.refresh-data-btn:hover { background: #eef6fc; }
.refresh-data-btn:disabled { opacity: 0.6; cursor: default; }
.refresh-data-btn.spinning { animation: refresh-spin 0.8s linear infinite; }

/* Corebridge freshness is operationally critical, so stale/offline state is
   visible above every workspace rather than buried on the dashboard. */
.corebridge-sync-alert {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 12px 24px 0;
  padding: 11px 13px;
  border: 1px solid #e4a11b;
  border-left-width: 5px;
  border-radius: 9px;
  background: #fff8e7;
  color: #5f4100;
  box-shadow: 0 2px 8px rgba(95, 65, 0, .08);
}
.corebridge-sync-alert.hidden { display: none; }
.corebridge-sync-alert.is-stale { border-color: #c62828; background: #fff0f0; color: #7f1d1d; }
.corebridge-sync-alert.is-unknown { border-color: #64748b; background: #f8fafc; color: #334155; }
.corebridge-sync-alert-icon { font-size: 1.2rem; flex: 0 0 auto; }
.corebridge-sync-alert-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.corebridge-sync-alert-copy strong { font-size: .88rem; }
.corebridge-sync-alert-copy span { font-size: .78rem; line-height: 1.35; }
.corebridge-sync-now {
  flex: 0 0 auto;
  border: 0;
  border-radius: 7px;
  background: #b91c1c;
  color: #fff;
  padding: 8px 13px;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.corebridge-sync-alert:not(.is-stale) .corebridge-sync-now { background: #9a6700; }
.corebridge-sync-now:disabled { opacity: .65; cursor: wait; }
@media (max-width: 720px) {
  .corebridge-sync-alert { margin: 8px 12px 0; align-items: flex-start; flex-wrap: wrap; }
  .corebridge-sync-alert-copy { min-width: calc(100% - 40px); }
  .corebridge-sync-now { margin-left: 31px; }
}
@keyframes refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* small inline hint inside form labels */
.field-hint { font-weight: 400; color: #8a95a0; font-size: 0.78rem; }

/* CUST-AUTOCOMPLETE: customer suggestions under the Company field */
.company-field { position: relative; }
.cust-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: #fff; border: 1px solid #c7d6ea; border-top: none;
  border-radius: 0 0 8px 8px; box-shadow: 0 6px 16px rgba(16,40,80,0.12);
  max-height: 260px; overflow-y: auto;
}
.cust-suggest-item {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid #f0f3f8;
  padding: 7px 10px; cursor: pointer;
}
.cust-suggest-item:hover { background: #eef6fc; }
.cust-co { font-weight: 600; color: #2a3742; font-size: 0.9rem; }
.cust-meta { color: #8a95a0; font-size: 0.78rem; }

.mini-cal-hint { color: #8a95a0; font-size: 0.72rem; }

/* Sidebar "Admin" section label */
.sidebar-section-label {
  margin: 14px 12px 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a95a0;
}
.sidebar-section-label.hidden { display: none; }

/* BRIEF-LINK: clickable job names inside Today's Briefing lines */
.ai-job-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ai-job-link:hover { text-decoration-style: solid; color: #16C7C9; }

/* PULSE-MODAL: Business Pulse in-app (same content as /pulse, no navigation) */
.pm-hero-card { border-left: 4px solid var(--action-blue); cursor: pointer; }
.pm-tap { cursor: pointer; }
.pm-meter { height: 10px; border-radius: var(--r-sm); background: #DBEAFE; overflow: hidden; }
.pm-meter-fill { height: 100%; border-radius: var(--r-sm); background: var(--action-blue); width: 0; transition: width 0.4s; }
#pm-drill-list .dl-item { cursor: pointer; align-items: flex-start; }
#pm-drill-list .dl-item.dimmed { opacity: 0.55; }
#pm-drill-list .dl-label { display: flex; flex-direction: column; }
#pm-drill-list .dl-meta { display: block; margin-top: 2px; }
#pm-drill-list .dl-date { white-space: nowrap; }

/* ADMIN: admin dashboard tab */
#admin-pulse-card { cursor: pointer; }
#admin-pulse-card:hover { background: #f8fafc; }
#admin-pulse-card .admin-tile { pointer-events: none; }
.admin-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
#tab-admin > .dashboard-list-card { margin-top: 16px; }
#admin-audit-list .dl-item { cursor: default; }
#admin-audit-list .dl-meta { margin-left: auto; color: #8a95a0; font-size: 12px; }

/* ATTEND: Team attendance card + record modal */
#attendance-card { margin-top: 16px; }
#attendance-card.att-flash {
  outline: 2px solid #16C7C9;
  outline-offset: 2px;
  transition: outline-color 0.3s ease;
}
.att-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 4px;
}
.att-head h3 { margin: 0; }
.att-controls { display: flex; align-items: center; gap: 6px; }
.att-year-label { font-weight: 600; color: #56606b; font-size: 13px; min-width: 38px; text-align: center; }
.att-controls select {
  padding: 4px 8px; border: 1px solid var(--border-soft); border-radius: 8px;
  font-size: 13px; color: #2a3742; background: #fff; cursor: pointer;
}
.att-row .dl-label { display: inline-flex; align-items: center; gap: 6px; }
.att-row .dl-meta { flex: 1; color: #8a95a0; font-size: 12px; text-align: right; }
.att-row .att-days { min-width: 56px; text-align: right; }
.att-year-head {
  padding: 10px 10px 4px;
  font-size: 12px;
  color: #56606b;
  border-bottom: 1px solid #f0f3f8;
  margin-bottom: 4px;
}
.att-year-head:not(:first-child) { margin-top: 10px; }

/* Day-view modal footer: add-to-this-day + open-in-calendar actions */
.day-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 24px 20px;
}
.day-actions button {
  flex: 1; min-width: 130px;
  background: #f5f7fa; border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 10px 12px; cursor: pointer; font-size: 0.88rem; color: #2a3742;
}
.day-actions button:hover { background: #eef6fc; }

/* Notification settings panel */
.notif-settings-body { padding: 4px 2px 2px; }
.ns-group { padding: 10px 0; border-bottom: 1px solid #f0f3f8; }
.ns-group:last-of-type { border-bottom: none; }
.ns-row { display: flex; align-items: center; gap: 9px; padding: 5px 2px; font-size: 0.92rem; color: #2a3742; cursor: pointer; }
.ns-row input { width: 16px; height: 16px; cursor: pointer; }
.ns-row em { color: #8a95a0; font-style: normal; font-size: 0.78rem; }
.ns-master { margin-bottom: 2px; }
.ns-sub { margin-left: 24px; }
.ns-sub.ns-disabled { opacity: 0.5; }
.ns-note { color: #8a95a0; font-size: 0.78rem; margin: 4px 2px 0; }
.ns-enable-btn { margin-top: 8px; border: 1px solid #2a5a8f; background: #2a5a8f; color: #fff; border-radius: 6px; padding: 5px 12px; font-size: 0.82rem; cursor: pointer; }
.ns-enable-btn:hover { background: #234d79; }
.ns-saved { color: #2e7d32; font-size: 0.8rem; height: 1.1em; margin-top: 8px; text-align: right; }

/* Weekly Stats: highlight the current week's row */
#weekly-table tr.current-week > td { background: #fff7e0; }
#weekly-table tr.current-week > td:first-child { box-shadow: inset 3px 0 0 #f0a500; }
.this-week-tag {
  display: inline-block; margin-left: 6px; background: #f0a500; color: #fff;
  border-radius: 999px; padding: 1px 7px; font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle;
}

/* Top-bar global search results */
.global-search-results {
  position: absolute; z-index: 300; background: #fff;
  border: 1px solid #c7d6ea; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16,40,80,0.18); max-height: 380px; overflow-y: auto; padding: 4px;
}
.gsr-item {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  background: none; border: none; padding: 7px 10px; border-radius: 7px; cursor: pointer;
}
.gsr-item:hover { background: #eef6fc; }
.gsr-co { font-weight: 600; color: #2a3742; font-size: 0.9rem; }
.gsr-meta { color: #8a95a0; font-size: 0.78rem; }
.gsr-empty { padding: 10px 12px; color: #8a95a0; font-size: 0.85rem; font-style: italic; }

/* Manage menu: link item (Install crew app) matches the button items */
.manage-menu-link {
  display: block; width: 100%; box-sizing: border-box; text-decoration: none;
  padding: 9px 14px; font: inherit; color: inherit; cursor: pointer;
  border-top: 1px solid #eef2f7;
}
.manage-menu-link:hover { background: #eef6fc; }

/* CompanyCam link in the job-modal attachments header */
.attachments-header-actions { display: flex; align-items: center; gap: 10px; }
.companycam-link {
  font-size: 0.82rem; font-weight: 600; color: #2a5a8f; text-decoration: none;
  border: 1px solid #c7d6ea; border-radius: 7px; padding: 5px 10px; background: #eef6fc;
}
.companycam-link:hover { background: #e0eefb; }

/* CompanyCam "link existing project" picker */
.companycam-search-panel { margin-top: 8px; border: 1px solid #c7d6ea; border-radius: 8px; background: #f7fafd; padding: 8px; }
.cc-search-row { display: flex; gap: 6px; align-items: center; }
.cc-search-row input { flex: 1; padding: 7px 9px; border: 1px solid #c7d6ea; border-radius: 6px; font-size: 0.9rem; }
.cc-search-row button { border: none; background: none; font-size: 1.2rem; color: #8a95a0; cursor: pointer; line-height: 1; }
.cc-search-results { margin-top: 6px; max-height: 220px; overflow-y: auto; }
.cc-hint { color: #8a95a0; font-size: 0.82rem; padding: 6px 4px; }
.cc-result { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; background: #fff; border: 1px solid #e3e8ee; border-radius: 6px; padding: 7px 10px; margin-bottom: 5px; cursor: pointer; }
.cc-result:hover { background: #eef6fc; }
.cc-result-name { font-weight: 600; color: #2a3742; font-size: 0.9rem; }
.cc-result-addr { color: #8a95a0; font-size: 0.78rem; }
.cc-unlink { background: none; border: none; color: #c0392b; font-size: 0.82rem; cursor: pointer; padding: 6px 4px; text-decoration: underline; }

/* ===== Job Photos gallery tab ===== */
#tab-photos.active { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.photos-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; flex-shrink: 0; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap; }
.photos-title { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--text); }
.photos-toolbar { display: flex; align-items: center; gap: 8px; }
.photos-search { padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; width: 220px; background: var(--surface); color: var(--text); }
.photos-search:focus { outline: none; border-color: var(--primary); }
.photos-refresh-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 1rem; cursor: pointer; color: var(--text-muted); }
.photos-refresh-btn:hover { border-color: var(--primary); color: var(--primary); }
.photos-empty { color: var(--text-muted); text-align: center; padding: 48px 0; font-size: 0.95rem; }
.photos-list { flex: 1; overflow-y: auto; }
.photos-load-more-wrap { flex-shrink: 0; text-align: center; padding: 12px; }
.photos-load-more-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 24px; font-size: 0.9rem; cursor: pointer; color: var(--text); }
.photos-load-more-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Job row (project list style) */
.pjob-row { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; }
.pjob-row:hover { background: var(--hover-bg, #f8f9fa); }
.pjob-row.expanded { background: var(--hover-bg, #f8f9fa); }
.pjob-cover { width: 80px; height: 60px; border-radius: 8px; overflow: hidden; background: #e8eaed; flex-shrink: 0; }
.pjob-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pjob-cover-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #bbb; }
.pjob-info { min-width: 0; }
.pjob-name { font-weight: 600; font-size: 0.95rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjob-addr { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjob-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.78rem; color: var(--text-muted); }
.pjob-count { font-weight: 600; color: var(--primary, #16C7C9); }
.pjob-strip { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.pjob-strip-img { width: 52px; height: 40px; border-radius: 5px; overflow: hidden; cursor: pointer; flex-shrink: 0; }
.pjob-strip-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pjob-strip-img:hover img { opacity: 0.85; }
.pjob-strip-more { width: 52px; height: 40px; border-radius: 5px; background: #e8eaed; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }

/* Expanded photo grid for a job */
.pjob-expand { background: #f3f5f7; border-bottom: 2px solid var(--border); padding: 14px 20px 14px 116px; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.pjob-expand-loading { grid-column: 1/-1; color: var(--text-muted); font-size: 0.88rem; padding: 12px 0; }
.pjob-expand-thumb { position: relative; aspect-ratio: 4/3; border-radius: 7px; overflow: hidden; background: #dde0e4; cursor: pointer; }
.pjob-expand-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.15s; }
.pjob-expand-thumb:hover img { transform: scale(1.05); }
.pgallery-delete { position: absolute; top: 4px; right: 4px; background: rgba(255,255,255,0.9); border: 1px solid #ccc; border-radius: 50%; width: 22px; height: 22px; font-size: 13px; line-height: 20px; cursor: pointer; padding: 0; color: #555; z-index: 2; text-align: center; }
.pgallery-delete:hover { background: #d93025; color: #fff; border-color: #d93025; }

/* Lightbox */
.photos-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 9000; display: flex; align-items: center; justify-content: center; }
.photos-lightbox.hidden { display: none; }
.photos-lb-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.photos-lb-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; opacity: 0.8; }
.photos-lb-close:hover { opacity: 1; }
.photos-lb-prev, .photos-lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 2rem; cursor: pointer; padding: 10px 16px; border-radius: 6px; line-height: 1; }
.photos-lb-prev { left: 16px; }
.photos-lb-next { right: 16px; }
.photos-lb-prev:hover, .photos-lb-next:hover { background: rgba(255,255,255,0.25); }
.photos-lb-caption { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.85); font-size: 0.9rem; background: rgba(0,0,0,0.45); padding: 5px 14px; border-radius: 20px; white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; }

/* ─── JobShot Tab ───────────────────────────────────────────────────────────── */
#tab-jobshot.active { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.jshot-office-dashboard { padding: 18px 24px 16px; border-bottom: 1px solid var(--border); background: #f8fafc; flex-shrink: 0; }
.jshot-office-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.jshot-office-head > div { display: flex; flex-direction: column; gap: 3px; }
.jshot-office-head strong { font-size: 1rem; color: var(--text); }
.jshot-office-head span { font-size: .82rem; color: var(--text-muted); }
.jshot-office-refresh { border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); padding: 7px 10px; font: inherit; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.jshot-office-stats { display: grid; grid-template-columns: repeat(4, minmax(112px, 1fr)); gap: 10px; }
.jshot-office-stat { padding: 10px 12px; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.jshot-office-stat strong { display: block; font-size: 1.2rem; color: var(--text); }
.jshot-office-stat span { display: block; margin-top: 2px; color: var(--text-muted); font-size: .75rem; }
.jshot-office-stat.attention { border-color: #f3c46b; background: #fffaf0; }
.jshot-office-queue { display: flex; gap: 10px; overflow-x: auto; padding-top: 12px; }
.jshot-office-card { width: 220px; min-width: 220px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.jshot-office-photo { display: block; width: 100%; height: 112px; border: 0; padding: 0; background: #e8eaed; cursor: pointer; }
.jshot-office-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jshot-office-card-body { padding: 9px 10px 10px; }
.jshot-office-company { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); font-weight: 700; font-size: .83rem; }
.jshot-office-meta { margin-top: 3px; color: var(--text-muted); font-size: .74rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jshot-office-actions { display: flex; gap: 6px; margin-top: 8px; }
.jshot-office-actions button { flex: 1; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); padding: 6px 7px; font: inherit; font-size: .74rem; cursor: pointer; }
.jshot-office-actions .reviewed { border-color: #83c58a; color: #23752e; }
.jshot-office-empty, .jshot-office-loading { color: var(--text-muted); font-size: .84rem; padding: 4px 0; }
.jshot-recent { margin-top: 16px; }
.jshot-recent-head > div { display: flex; flex-direction: column; gap: 2px; }
.jshot-recent-head strong { color: var(--text); font-size: .9rem; }
.jshot-recent-head span { color: var(--text-muted); font-size: .75rem; }
.jshot-recent-line { display: flex; gap: 10px; overflow-x: auto; padding: 9px 1px 4px; scrollbar-width: thin; }
.jshot-recent-card { display: grid; grid-template-columns: 78px 1fr; width: 292px; min-width: 292px; min-height: 96px; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.jshot-recent-card:hover { border-color: #9ebce8; box-shadow: 0 2px 8px rgba(29,78,216,.1); }
.jshot-recent-cover { display: flex; align-items: center; justify-content: center; min-height: 96px; background: #e8eaed; font-size: 1.45rem; color: #94a3b8; }
.jshot-recent-cover img { width: 100%; height: 100%; min-height: 96px; object-fit: cover; display: block; }
.jshot-recent-body { min-width: 0; padding: 9px 10px; }
.jshot-recent-company { overflow: hidden; color: var(--text); font-size: .82rem; font-weight: 750; white-space: nowrap; text-overflow: ellipsis; }
.jshot-recent-ref, .jshot-recent-address, .jshot-recent-foot { overflow: hidden; color: var(--text-muted); font-size: .7rem; white-space: nowrap; text-overflow: ellipsis; }
.jshot-recent-ref { margin-top: 2px; color: #475569; }
.jshot-recent-address { margin-top: 5px; }
.jshot-recent-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; }
.jshot-map-card { margin-top: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.jshot-map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.jshot-map-head > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.jshot-map-head strong { color: var(--text); font-size: .9rem; }
.jshot-map-head span { color: var(--text-muted); font-size: .75rem; }
.jshot-map-head button { border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); padding: 6px 9px; font: inherit; font-size: .75rem; cursor: pointer; white-space: nowrap; }
.jshot-map-controls { display: flex; align-items: center; gap: 7px; }
/* min-width:0 is the actual fix — a <select> flex item defaults to
   min-width:auto, which resolves to its widest OPTION's intrinsic text
   width (job company names can run 80+ characters) and won't shrink
   below that no matter what `width` says, pushing the row wider than the
   viewport. Truncate the closed-box display with ellipsis so a long name
   doesn't just get abruptly clipped by overflow:hidden. */
.jshot-map-controls select {
  width: min(280px, 34vw); max-width: 100%; min-width: 0;
  border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text);
  padding: 6px 26px 6px 8px; font: inherit; font-size: .75rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jshot-photo-map { width: 100%; height: 360px; background: #e9eef3; }
.jshot-map-empty { padding: 28px 18px; color: var(--text-muted); text-align: center; font-size: .84rem; }
.jshot-map-empty.hidden { display: none; }
#jshot-map-expand { font-size: .95rem; line-height: 1; padding: 5px 8px; }
/* Enlarge: the card itself becomes a fullscreen flex column (header stays
   on top, map fills the rest) instead of moving the live Leaflet instance
   to a different container — Leaflet doesn't like being reparented, and
   this way invalidateSize() is the only thing the map needs to know. */
.jshot-map-card.is-expanded {
  position: fixed; inset: 0; z-index: 9500; margin: 0; border: none; border-radius: 0;
  display: flex; flex-direction: column;
}
.jshot-map-card.is-expanded .jshot-photo-map { flex: 1; height: auto; min-height: 0; }
.jshot-map-card.is-expanded .jshot-map-empty { flex: 1; }
.jshot-map-popup { width: 240px; max-height: 280px; overflow-y: auto; }
.jshot-map-popup-title { margin-bottom: 7px; font-weight: 700; font-size: .83rem; }
.jshot-map-popup-photo { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid #e5e7eb; color: #1f2937; text-decoration: none; }
.jshot-map-popup-photo img { width: 58px; height: 48px; border-radius: 5px; object-fit: cover; }
.jshot-map-popup-photo strong, .jshot-map-popup-photo span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jshot-map-popup-photo strong { font-size: .75rem; }
.jshot-map-popup-photo span { margin-top: 3px; color: #64748b; font-size: .68rem; }
.jshot-map-popup-job { margin-bottom: 7px; }
.jshot-map-popup-job strong, .jshot-map-popup-job span { display: block; }
.jshot-map-popup-job strong { color: #1e293b; font-size: .82rem; }
.jshot-map-popup-job span { margin-top: 2px; color: #64748b; font-size: .7rem; }
.jshot-map-open { width: 100%; margin: 8px 0 2px; border: 0; border-radius: 6px; background: #16C7C9; color: #fff; padding: 7px 9px; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
.jshot-map-marker { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #e3212d; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); font-size: 11px; font-weight: 800; }
.jshot-map-marker span { transform: rotate(45deg); }
@media (max-width: 720px) {
  .jshot-office-dashboard { padding: 14px 16px; }
  .jshot-office-stats { grid-template-columns: repeat(2, 1fr); }
  .jshot-photo-map { height: 300px; }
  .jshot-map-head { align-items: stretch; flex-direction: column; }
  .jshot-map-controls select { width: 100%; max-width: 100%; min-width: 0; flex: 1; }
  .jshot-recent-card { width: 270px; min-width: 270px; }
}
.jshot-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.jshot-header-text { display: flex; align-items: baseline; gap: 12px; }
.jshot-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--text); }
.jshot-subtitle { font-size: 0.85rem; color: var(--text-muted); }
.jshot-search { flex: 1; min-width: 0; max-width: 320px; border: 1px solid var(--border); border-radius: 6px; padding: 7px 12px; font-size: 0.9rem; background: #fff; color: var(--text); }
.jshot-search:focus { outline: none; border-color: #16C7C9; box-shadow: 0 0 0 2px rgba(22,199,201,0.15); }
/* min-width:0 is the real fix (see .jshot-map-controls select above) —
   without it this flex item won't shrink below its widest OPTION's
   intrinsic text width (job company names run 80+ characters), which
   pushes .jshot-header wider than the viewport. */
.jshot-alljobs {
  max-width: 220px; min-width: 0;
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 8px; font-size: 0.88rem;
  background: #fff; color: var(--text); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jshot-header-actions { display: flex; align-items: center; gap: 10px; }
.jshot-refresh-btn { background: none; border: 1px solid var(--border); border-radius: 6px; width: 32px; height: 32px; font-size: 1rem; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jshot-refresh-btn:hover { background: var(--hover-bg, #f1f3f4); color: var(--text); }
.jshot-archive-wrap { display: flex; align-items: center; gap: 6px; }
.jshot-archive-year { border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 0.85rem; background: #fff; color: var(--text); cursor: pointer; }
.jshot-archive-btn { background: #16C7C9; color: #fff; border: none; border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.jshot-archive-btn:hover { background: #0E9799; }
/* Table header row mirrors CompanyCam's project-list columns */
.jshot-table-header {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 190px 180px 220px;
  gap: 16px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.jshot-grid { flex: 1; overflow-y: auto; }
.jshot-empty { color: var(--text-muted); font-size: 0.93rem; padding: 40px 24px; text-align: center; }

.jshot-row {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 190px 180px 220px;
  gap: 16px;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.jshot-row:hover { background: var(--hover-bg, #f8f9fa); }

.jshot-row-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.jshot-cover { width: 56px; height: 56px; border-radius: 8px; background: #e8eaed; overflow: hidden; flex-shrink: 0; }
.jshot-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jshot-cover-empty { display: flex; align-items: center; justify-content: center; }
.jshot-cover-icon { font-size: 1.4rem; opacity: 0.35; }
.jshot-row-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.jshot-company { font-size: 0.95rem; font-weight: 700; color: var(--text); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jshot-job-ref { font-size: .77rem; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jshot-addr { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jshot-description { max-width: 520px; font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jshot-status-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; align-self: flex-start; }
.jshot-status-badge.status-in_production { background: #c5e1ff; color: #0E9799; }
.jshot-status-badge.status-ready_for_install { background: #d4f1d0; color: #1b5e20; }
.jshot-status-badge.status-completed { background: #dcfce7; color: #166534; }

.jshot-row-schedule { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jshot-schedule-line { color: #334155; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jshot-row-updated { font-size: 0.72rem; color: var(--text-muted); }

.jshot-row-stats { display: flex; flex-direction: column; gap: 3px; font-size: 0.82rem; color: var(--text-muted); }
.jshot-stat { display: flex; align-items: center; gap: 5px; }
.jshot-stat-icon { margin-right: 5px; }

.jshot-row-photos { display: flex; gap: 6px; overflow: hidden; }
.jshot-photo-thumb { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: #e8eaed; flex-shrink: 0; }
.jshot-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jshot-photo-more { width: 44px; height: 44px; border-radius: 6px; background: #eceff1; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Project detail — CompanyCam-style photo page for one job */
/* Defensive: the list/detail elements set their own display (flex/grid),
   which would otherwise beat the UA's [hidden]{display:none} default. */
#tab-jobshot [hidden] { display: none !important; }
.jshot-detail { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.jshot-detail-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  flex-wrap: wrap;
}
.jshot-back-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font-size: 0.88rem; cursor: pointer; color: var(--text); white-space: nowrap; }
.jshot-back-btn:hover { background: var(--hover-bg, #f1f3f4); }
.jshot-detail-info { flex: 1; min-width: 200px; }
.jshot-detail-info h2 { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.25; }
.jshot-detail-sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-muted); }
.jshot-d-addr { color: #16C7C9; text-decoration: none; }
.jshot-d-addr:hover { text-decoration: underline; }
.jshot-d-jobmeta { display: flex; gap: 7px 14px; flex-wrap: wrap; margin-top: 8px; color: var(--text-muted); font-size: .78rem; }
.jshot-d-jobmeta span { white-space: nowrap; }
.jshot-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jshot-d-btn { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; cursor: pointer; color: var(--text); white-space: nowrap; }
.jshot-d-btn:hover { background: var(--hover-bg, #f1f3f4); }
.jshot-d-btn.primary { background: #16C7C9; border-color: #16C7C9; color: #fff; }
.jshot-d-btn.primary:hover { background: #0E9799; }
.jshot-d-btn.active { background: #16C7C9; border-color: #16C7C9; color: #fff; }
.jshot-d-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 10px 24px; border-bottom: 1px solid var(--border); background: #fafbfc; }
.jshot-d-filter-label { font-size: 0.76rem; color: var(--text-muted); font-weight: 700; margin-right: 2px; }
.jshot-d-filter { appearance: none; border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 999px; padding: 5px 10px; font-size: 0.78rem; cursor: pointer; }
.jshot-d-filter:hover { border-color: #16C7C9; color: #0E9799; }
.jshot-d-filter.active { background: #e8f0fe; border-color: #16C7C9; color: #0E9799; font-weight: 700; }
.jshot-d-filter.user { background: #fff; }
.jshot-d-grid {
  padding: 18px 24px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; align-content: start;
}
.jshot-d-date { grid-column: 1 / -1; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); margin: 8px 0 -4px; padding-top: 10px; border-top: 1px solid var(--border); }
.jshot-d-date:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.jshot-d-tile { position: relative; border-radius: 10px; overflow: hidden; background: #e8eaed; cursor: pointer; border: 1px solid var(--border); }
.jshot-d-tile img { width: 100%; height: 170px; object-fit: cover; display: block; }
.jshot-d-tile .jshot-d-meta { padding: 6px 10px; font-size: 0.75rem; color: var(--text-muted); background: #fff; display: flex; justify-content: space-between; gap: 6px; }
.jshot-d-tile.sel { outline: 3px solid #16C7C9; outline-offset: -3px; }
.jshot-d-tile.sel::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: #16C7C9; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.jshot-d-avatar { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(15,23,42,0.8); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.jshot-d-tag { position: absolute; top: 8px; right: 8px; border-radius: 999px; padding: 3px 7px; font-size: 0.68rem; text-transform: capitalize; font-weight: 700; background: rgba(15,23,42,0.86); color: #fff; }
.jshot-d-tag.tag-before { background: #6d28d9; }.jshot-d-tag.tag-after { background: #15803d; }.jshot-d-tag.tag-damage, .jshot-d-tag.tag-issue { background: #b91c1c; }.jshot-d-tag.tag-materials { background: #a16207; }.jshot-d-tag.tag-progress { background: #0369a1; }

/* JobShot review lightbox: the office can describe, classify, download, or
   remove a photo without sending someone back to the phone. */
#jshot-lb { align-items: center; justify-content: center; padding: 32px 20px 184px; box-sizing: border-box; }
#jshot-lb .photos-lb-img { max-height: calc(100vh - 250px); }
.jshot-lb-panel { position: fixed; z-index: 2; bottom: 0; left: 50%; transform: translateX(-50%); width: min(720px, calc(100vw - 24px)); background: #fff; color: var(--text); border-radius: 12px 12px 0 0; padding: 12px 16px 16px; box-shadow: 0 -8px 30px rgba(0,0,0,.32); }
.jshot-lb-meta { font-size: .78rem; color: var(--text-muted); margin-bottom: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jshot-lb-edit { display: flex; gap: 8px; }
.jshot-lb-edit input { min-width: 0; flex: 1; border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; font: inherit; }
.jshot-lb-edit button, .jshot-lb-actions button, .jshot-lb-actions a { border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); padding: 8px 10px; font: inherit; font-size: .82rem; cursor: pointer; text-decoration: none; }
.jshot-lb-edit button { background: #16C7C9; border-color: #16C7C9; color: #fff; }
.jshot-lb-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.jshot-lb-tags button { border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text-muted); padding: 4px 9px; cursor: pointer; font-size: .76rem; }
.jshot-lb-tags button.active { background: #e8f0fe; border-color: #16C7C9; color: #0E9799; font-weight: 700; }
.jshot-lb-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.jshot-lb-actions .danger { color: #b91c1c; border-color: #fecaca; margin-left: auto; }
@media (max-width: 640px) { .jshot-lb-actions { flex-wrap: wrap; } #jshot-lb { padding-bottom: 230px; } #jshot-lb .photos-lb-img { max-height: calc(100vh - 295px); } }

@media (max-width: 900px) {
  .jshot-table-header { display: none; }
  .jshot-row { grid-template-columns: 1fr; gap: 8px; }
  .jshot-row-photos { flex-wrap: wrap; }
  /* Header stacks on phones: title + actions on the first row, then the
     search and the job-jump dropdown each get a full-width row instead of
     all four fighting for one line. */
  .jshot-header { flex-wrap: wrap; gap: 10px; }
  .jshot-header-text { order: 1; flex: 1; min-width: 0; }
  .jshot-title { white-space: nowrap; }
  .jshot-header-actions { order: 2; }
  /* max-width:none here used to remove the only thing capping these —
     on a phone that let .jshot-alljobs grow to its widest OPTION's
     intrinsic text width (job company names run 80+ characters) and
     push the whole header wider than the viewport. min-width:0 lets the
     flex item actually shrink; max-width:100% keeps it inside the row
     the sibling .jshot-header-text (line above) already respects. */
  .jshot-search { order: 3; flex: 1 1 100%; max-width: 100%; min-width: 0; }
  .jshot-alljobs { order: 4; flex: 1 1 100%; max-width: 100%; min-width: 0; padding: 10px 8px; }
  .jshot-row-updated, .jshot-row-stats { font-size: 0.85rem; }
}

/* ============================================================
   MOBILE READABILITY (≤720px) — the app was designed desktop-dense;
   on a phone the 10–12px text is hard to read. This block bumps the
   most-read surfaces and, critically, keeps every form control at
   16px so iOS stops auto-zooming the page on focus.
   ============================================================ */
@media (max-width: 720px) {
  /* iOS zooms the viewport when a focused control is under 16px. */
  input, select, textarea { font-size: 16px !important; }

  /* Dashboard */
  .metric-label { font-size: 13px; }
  .metric-sub { font-size: 13px; }
  .metric-value { font-size: 26px; }
  .dashboard-list .dl-item { font-size: 14px; padding: 10px 10px; }
  .dashboard-list .dl-meta, .dashboard-list .dl-date { font-size: 13px; }
  .dashboard-list .empty { font-size: 14px; }
  .ai-briefing-line, .ai-briefing-empty { font-size: 14px; line-height: 1.5; }
  .wir-stat-label, .wir-stat-meta { font-size: 13px; }

  /* Calendar chips — 10px is unreadable on glass */
  .cal-event { font-size: 12px; padding: 3px 6px; line-height: 1.3; }
  /* Day-view modal: phone-sized tap targets so events are easy to hit */
  .day-list .cal-event { font-size: 15px; padding: 12px 12px; }
  .day-actions button { padding: 12px; font-size: 15px; }

  /* Pipeline cards */
  .kanban-card { font-size: 14px; }
  .kanban-card .kc-meta, .kanban-card small { font-size: 13px; }
  .kanban-col-title { font-size: 14px; }

  /* Tables (Jobs, Weekly Stats, Time Off) */
  table td, table th { font-size: 14px; }

  /* Job form / modals */
  .modal-content label { font-size: 14px; }
  .form-section-header { font-size: 15px; }
  .attachments-hint, .hint-inline { font-size: 13px; }
  .attachment-name { font-size: 12px; }
  .modal-hero-sub { font-size: 14px; }

  /* Sidebar drawer + topbar */
  .sidebar-label { font-size: 15px; }
  .topbar-manage-btn, .tab-dropdown-btn { font-size: 14px; }

  /* Toasts & pending sidebar */
  .toast { font-size: 14px; }
  .pending-sidebar { font-size: 14px; }
}

/* ====================================================================
   PRODUCT COHESION PASS — July 2026
   One visual language for the shell, navigation, dashboard and calendar.
   This block intentionally sits last while the older screens are migrated
   onto the shared token system over time.
   ==================================================================== */
:root {
  --brand-navy: #172033;
  --brand-navy-soft: #26344d;
  --surface-muted: #f5f7fb;
  --surface-tint: #f8fafc;
  --focus-ring: rgba(22,199,201, .2);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
  --shadow-float: 0 16px 40px rgba(15, 23, 42, .14);
}

body { line-height: 1.45; }
button, input, select, textarea { transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; }
button:focus-visible,
[role="button"]:focus-visible,
[role="searchbox"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.app-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.sidebar-icon,
.button-icon,
.inline-icon,
.metric-card-icon svg,
.wir-stat-icon svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.inline-icon { width: 14px; height: 14px; }
.button-caret { margin-left: 1px; color: currentColor; font-size: 13px; opacity: .72; }

/* App shell */
.sidebar {
  width: 224px;
  border-right-color: #dce3ec;
  box-shadow: 1px 0 0 rgba(15, 23, 42, .02);
}
.sidebar-brand {
  min-height: 72px;
  justify-content: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border-bottom-color: #edf1f6;
}
.sidebar-brand .brand-logo {
  width: 62px;
  height: auto;
  flex: 0 0 auto;
}
.sidebar-brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.15;
}
.sidebar-brand-copy strong {
  color: var(--text-heading);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}
.sidebar-brand-copy span {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
}
.sidebar-nav { gap: 3px; padding: 10px; }
.sidebar-section-label {
  margin: 13px 10px 5px;
  padding: 12px 2px 0;
  color: #8b98a9;
  font-size: 10px;
  letter-spacing: .12em;
}
.sidebar-workspace-label { margin-top: 0; padding-top: 3px; border-top: 0; }
.sidebar-item {
  position: relative;
  min-height: 42px;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 10px;
  color: #455468;
  font-size: 13px;
  font-weight: 550;
}
.sidebar-item:hover { background: #f4f6fa; color: var(--text-heading); }
.sidebar-item.active {
  background: linear-gradient(90deg, rgba(225, 27, 34, .11), rgba(225, 27, 34, .055));
  color: #c9151c;
  font-weight: 700;
}
.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--brand-red);
}
.sidebar-icon { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.9; }
.sidebar-tenant {
  position: relative;
  padding: 13px 16px 14px 34px;
  border-top-color: #edf1f6;
  background: #fbfcfe;
}
.sidebar-tenant::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--semantic-green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}
.sidebar-tenant-name { color: var(--text-heading); font-size: 12px; }
.sidebar-tenant-loc { margin: 2px 0 0; font-size: 10px; }

.topbar {
  min-height: 64px;
  padding: 10px 20px;
  border-bottom-color: rgba(203, 213, 225, .75);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .025);
  backdrop-filter: blur(12px);
}
.topbar-nav { gap: 14px; }
.topbar-actions { gap: 8px; }
.topbar-search #global-search {
  min-height: 40px;
  border-color: #dce3ec;
  background: #f6f8fb;
  color: var(--text-heading);
  font-style: normal;
}
.topbar-search #global-search:empty::before { color: #8491a3; font-style: normal; }
.topbar-search #global-search:hover { border-color: #c4ceda; background: #fff; }
.topbar-search #global-search:focus { border-color: var(--action-blue); background: #fff; box-shadow: 0 0 0 3px var(--focus-ring); }
.tab-dropdown-btn,
.topbar-manage-btn,
.ai-insights-btn,
.refresh-data-btn,
.chat-btn,
.notif-btn {
  min-height: 38px;
  border: 1px solid #d8e0ea;
  border-radius: 9px;
  background: #fff;
  color: #42526a;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .025);
}
.topbar-manage-btn,
.ai-insights-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.refresh-data-btn,
.chat-btn,
.notif-btn { display: inline-flex; width: 38px; height: 38px; padding: 0; align-items: center; justify-content: center; }
.refresh-data-btn:hover,
.chat-btn:hover,
.notif-btn:hover,
.topbar-manage-btn:hover,
.ai-insights-btn:hover,
.tab-dropdown-btn:hover { border-color: #b8c4d2; background: #f6f8fb; color: var(--text-heading); }
.topbar-new-btn {
  min-height: 40px;
  gap: 7px;
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 5px 14px rgba(225, 27, 34, .18);
}
.topbar-new-btn:hover { box-shadow: 0 7px 18px rgba(176, 21, 27, .22); }
.refresh-data-btn.spinning { animation: none; }
.refresh-data-btn.spinning .button-icon { animation: refresh-spin .8s linear infinite; }
.topbar-user { gap: 8px; margin-left: 3px; padding-left: 12px; }
.topbar-user-avatar {
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  background: var(--brand-navy);
  box-shadow: 0 0 0 1px #d8e0ea;
  font-size: 12px;
}
.topbar-user-name .current-user { font-size: 12px; }
.topbar-user-name .topbar-signout { font-size: 10px; }
.dropdown-menu {
  margin-top: 4px;
  border-color: #dce3ec;
  border-radius: 11px;
  box-shadow: var(--shadow-float);
  padding: 6px;
}
.dropdown-menu button { border-radius: 7px; color: #334155; font-size: 13px; }

/* Main content and page hierarchy */
main { padding: 28px 32px 40px; }
main > .tab-panel { width: 100%; max-width: 1600px; margin: 0 auto; }
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 22px;
}
.page-heading-copy { min-width: 0; }
.page-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--brand-red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-heading h1 {
  margin: 0;
  color: var(--text-heading);
  font-size: 26px;
  font-weight: 760;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.page-heading p { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; }
.page-heading-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid #dce3ec;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.page-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--semantic-green); box-shadow: 0 0 0 3px rgba(16,185,129,.11); }
.last-sync-line { margin: 0; padding-left: 8px; border-left: 1px solid #e2e8f0; text-align: left; font-size: 11px; }
.page-heading-status .last-sync-line { display: none; }
.page-heading-compact { margin-bottom: 18px; }
.page-heading-compact h1 { font-size: 24px; }

.corebridge-sync-alert {
  margin: 14px 32px 0;
  padding: 12px 15px;
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
}
.corebridge-sync-now { min-height: 34px; border-radius: 8px; }

/* Dashboard */
.dashboard-metrics { gap: 14px; margin-bottom: 18px; }
.metric-card {
  --metric-color: var(--action-blue);
  min-height: 138px;
  padding: 17px 18px;
  border: 1px solid #dfe6ef;
  border-top: 1px solid #dfe6ef;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.metric-card:hover { box-shadow: var(--shadow-card); }
.metric-card.metric-installs { --metric-color: #16C7C9; border-top-color: #dfe6ef; }
.metric-card.metric-in-prod { --metric-color: #475569; border-top-color: #dfe6ef; }
.metric-card.metric-scheduled { --metric-color: #d97706; border-top-color: #dfe6ef; }
.metric-card.metric-completed { --metric-color: #7c3aed; border-top-color: #dfe6ef; }
.metric-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.metric-card-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--metric-color) 11%, white);
  color: var(--metric-color);
}
.metric-card-icon svg { width: 16px; height: 16px; }
.metric-card .metric-label { margin: 0; color: #657386; font-size: 10px; }
.metric-card .metric-value { color: var(--text-heading); font-size: 28px; letter-spacing: -.02em; }
.metric-card .metric-sub { color: #718096; font-size: 11px; }
.week-in-review,
.dashboard-list-card,
.mini-cal-card,
.rework-card,
.dashboard-alert-card {
  border-color: #dfe6ef;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.week-in-review { padding: 19px 20px; margin-bottom: 18px; }
.wir-title { font-size: 17px; letter-spacing: -.01em; }
.wir-date-chip { padding: 5px 10px; background: #fff1f2; font-size: 11px; }
.wir-stat { border-color: #e2e8f0; border-radius: 12px; background: #f8fafc; }
.wir-stat::before { height: 2px; }
.wir-stat-icon {
  display: inline-flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eaf2ff;
  color: #12B6B8;
}
#wir-completed .wir-stat-icon { background: #e9f9f2; color: #078455; }
.wir-stat-icon svg { width: 14px; height: 14px; }
.dashboard-alert-card,
.rework-card { border-left-width: 3px; }
.mini-cal-card { padding: 17px 18px; }
.dashboard-list-card { padding: 18px 19px; }
.dashboard-list .dl-item { border: 1px solid transparent; }
.dashboard-list .dl-item:hover { border-color: #e5eaf1; background: #f7f9fc; }

/* Calendar */
.calendar-page-heading { margin-bottom: 17px; }
.cal-layout { gap: 20px; }
.cal-controls,
.cal-toolbar {
  border: 1px solid #dfe6ef;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.cal-controls {
  min-height: 58px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
}
.cal-controls h2 { color: var(--text-heading); font-size: 17px; font-weight: 720; letter-spacing: -.01em; }
.cal-controls > button { min-height: 36px; border-color: #d9e1ea; border-radius: 8px; }
.cal-controls #cal-prev,
.cal-controls #cal-next { width: 36px; padding: 0; font-size: 19px; }
.cal-views { margin-left: auto; border-color: #d9e1ea; border-radius: 8px; background: #f6f8fb; }
.cal-view-btn { min-height: 34px; border-right-color: #d9e1ea; background: transparent; color: #5a687a; font-size: 12px; font-weight: 650; }
.cal-view-btn.active { background: var(--brand-navy); color: #fff; }
.cal-toolbar {
  gap: 8px;
  margin-bottom: 14px;
  padding: 11px 12px;
  border-radius: 12px;
}
#cal-search { min-height: 36px; border-color: #d9e1ea; border-radius: 8px; background: #f8fafc; }
.cal-mode-toggle { border-color: #d9e1ea; border-radius: 8px; background: #f6f8fb; }
.cal-mode-btn { min-height: 34px; background: transparent; color: #5d697a; }
.cal-mode-btn.active { background: var(--action-blue); }
.cal-toolbar-label { margin: 0 1px 0 5px; font-size: 10px; color: #8491a3; }
.toggle {
  gap: 5px;
  padding: 5px 7px;
  border-radius: 7px;
  color: #576579;
  font-size: 12px;
}
.toggle:hover { background: #f3f6fa; color: var(--text-heading); }
.toggle input { width: 14px; height: 14px; accent-color: var(--action-blue); }
.legend-toggle { min-height: 32px; border-color: #d9e1ea; border-radius: 7px; }
#calendar {
  border-color: #dce3ec;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.cal-header > div { padding: 10px 8px; border-bottom-color: #dce3ec; background: #f6f8fb; color: #657386; font-size: 10px; letter-spacing: .06em; }
.cal-day { border-right-color: #e6ebf1; border-bottom-color: #e6ebf1; }
.cal-day.other-month { background: #fafbfd; }
.cal-day.today { background: #fffaf0; }
.cal-day.today .day-number { background: var(--brand-red); }
.cal-day::after { background: var(--brand-navy); box-shadow: 0 2px 6px rgba(15,23,42,.2); }
.cal-side-column { width: 280px; top: 80px; max-height: calc(100vh - 100px); gap: 12px; }
.pending-sidebar { border-color: #dfe6ef; border-radius: 14px; box-shadow: var(--shadow-card); }
.pending-sidebar > header { padding: 13px 14px; border-radius: 13px 13px 0 0; background: #f7f9fc; }
.pending-sidebar h3 { color: #334155; font-size: 13px; font-weight: 700; }
.pending-sidebar-empty { color: #7c8999; }

@media (max-width: 1400px) {
  .topbar-user-name .current-user { display: none; }
}

@media (max-width: 1200px) {
  main { padding: 24px; }
  .corebridge-sync-alert { margin-right: 24px; margin-left: 24px; }
}

@media (max-width: 1024px) {
  .sidebar { width: 72px; }
  .sidebar-brand { justify-content: center; padding: 14px 8px; }
  .sidebar-brand .brand-logo { width: 46px; }
  .sidebar-brand-copy,
  .sidebar-workspace-label { display: none; }
  .sidebar-item.active::before { left: -10px; }
  .sidebar-tenant { padding: 14px 8px; }
  .sidebar-tenant::before { left: 31px; top: 18px; }
  .page-heading-status { display: none; }
}

@media (max-width: 900px) {
  .cal-layout { flex-direction: column; }
  .cal-side-column { position: static; width: 100%; max-height: none; overflow: visible; }
  .pending-sidebar { width: 100%; max-height: 420px; }
  .cal-views { margin-left: 0; }
}

@media (max-width: 720px) {
  main { padding: 18px 12px 28px; }
  .corebridge-sync-alert { margin: 8px 12px 0; }
  .sidebar.open .sidebar-brand { justify-content: flex-start; padding: 14px 16px; }
  .sidebar.open .sidebar-brand .brand-logo { width: 58px; }
  .sidebar.open .sidebar-brand-copy { display: flex; }
  .sidebar.open .sidebar-workspace-label { display: block; }
  .topbar { min-height: 60px; padding: 9px 12px; }
  .topbar-actions { gap: 6px; }
  .topbar-manage-btn,
  .topbar-new-btn,
  .ai-insights-btn {
    width: 38px;
    min-width: 38px;
    padding: 0;
    justify-content: center;
  }
  .topbar-manage-btn > span,
  .topbar-new-btn > span { display: none; }
  .topbar-user { display: none; }
  .mobile-signout-item {
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .11);
    border-radius: 0;
    color: #fecaca;
  }
  .page-heading { align-items: flex-start; margin-bottom: 16px; }
  .page-heading h1,
  .page-heading-compact h1 { font-size: 22px; }
  .page-heading p { font-size: 12px; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .metric-card { min-height: 126px; padding: 14px; }
  .metric-card-head { align-items: flex-start; gap: 7px; margin-bottom: 11px; }
  .metric-card .metric-label { font-size: 9px; line-height: 1.3; }
  .metric-card .metric-value { font-size: 24px; }
  .week-in-review { padding: 16px; }
  .wir-grid { grid-template-columns: 1fr; }
  .cal-controls { gap: 7px; padding: 9px; }
  .cal-controls h2 { min-width: 0; font-size: 15px; }
  .cal-controls #cal-today { order: 5; }
  .cal-views { order: 6; width: 100%; }
  .cal-view-btn { flex: 1; }
  .cal-toolbar { align-items: stretch; padding: 10px; }
  .cal-search-wrap, #cal-search { width: 100%; }
  .cal-mode-toggle { width: 100%; }
  .cal-mode-btn { flex: 1; }
  .legend-toggle { margin-left: 0; }
}

/* ===================================================================== */
/* Phase 9 — Fully Promoted in-app intake (timeline / pricing / shipping */
/* / product cards / live job ticket). Built on the existing CSS-variable */
/* system; no framework, no new colours beyond the shared tokens.        */
/* ===================================================================== */

/* Display-only computed markup readout under the Pricing & Margins grid. */
.fp-markup-readout {
  font-size: 13px;
  color: var(--text-muted);
  padding: 2px 0;
}
.fp-markup-readout:empty { display: none; }

/* FP-INTAKE parity: item-category tick grid + steer note. */
.fp-cats-label { display: block; margin-bottom: 6px; }
.fp-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 4px 14px;
  margin-bottom: 12px;
}
.fp-category-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 400;
  cursor: pointer;
  padding: 2px 0;
}
.fp-category-grid input { width: auto; margin: 0; }
.fp-cat-pref { margin-bottom: 14px; }

/* Repeatable product line-item cards inside the FP intake form. */
.fp-products-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.fp-product-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-page);
  padding: 14px 16px;
}
.fp-product-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.fp-product-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.fp-product-remove {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.fp-product-remove:hover { background: var(--bg-surface); color: var(--text-heading); }
.fp-product-grid { gap: 14px 18px; }
/* View mode: product cards read-only (matches the shared .grid view-mode rules
   so an existing job's products only become editable after clicking Edit). */
#job-form.view-mode .fp-product-remove,
#job-form.view-mode #fp-add-product-btn { display: none !important; }

/* Live monospace job ticket — read-only running summary of the FP intake. */
.fp-job-ticket {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-page);
  color: var(--text-body);
}
.fp-job-ticket:empty { display: none; }

/* ========================================================================
   SIGN PRICING TOOL (admin-only). Uses the shared CSS-var design system —
   no new tokens. Scoped under #tab-pricing / .pricing-* to avoid collisions.
   ======================================================================== */
#tab-pricing { padding: 4px 2px 40px; }
.pricing-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.pricing-title { font-size: var(--fs-2xl); color: var(--text-heading); margin: 0; }
.pricing-sub { color: var(--text-muted); font-size: var(--fs-sm); margin: 4px 0 0; max-width: 640px; }
.pricing-nav { display: flex; gap: 4px; background: var(--bg-page); padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--border-soft); }
.pricing-navbtn {
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  padding: 7px 16px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
}
.pricing-navbtn.active { background: var(--bg-surface); color: var(--text-heading); box-shadow: var(--shadow-sm); }

.pricing-view { display: none; }
.pricing-view.active { display: block; }
.pricing-toolbar { margin-bottom: 12px; }

/* Buttons */
.pricing-btn {
  border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-body);
  padding: 8px 14px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.pricing-btn:hover { background: var(--bg-page); }
.pricing-btn-sm { padding: 4px 10px; font-size: var(--fs-xs); }
.pricing-btn-primary { background: var(--action-blue); border-color: var(--action-blue); color: #fff; }
.pricing-btn-primary:hover { filter: brightness(0.95); background: var(--action-blue); }
.pricing-btn-danger { color: var(--semantic-rose); border-color: var(--border-soft); }
.pricing-btn-danger:hover { background: rgba(244,63,94,0.08); }

/* Tables */
.pricing-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pricing-table th {
  text-align: left; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 10px; border-bottom: 1px solid var(--border-soft);
}
.pricing-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text-body); vertical-align: middle; }
.pricing-table tbody tr:hover { background: var(--bg-page); }
.pricing-cell-name { font-weight: 600; color: var(--text-heading); }
.pricing-cell-price { font-weight: 700; color: var(--semantic-green); }
.pricing-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.pricing-empty, .pricing-line-empty td { color: var(--text-faint); text-align: center; padding: 20px; font-style: italic; }

/* Editor */
.pricing-editor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pricing-editor-actions { display: flex; gap: 8px; }
.pricing-meta { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 20px; }
.pricing-field { display: flex; flex-direction: column; gap: 4px; }
.pricing-field > span { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
.pricing-input, .pricing-field input, .pricing-field textarea, .pricing-field select {
  border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 8px 10px;
  font-size: var(--fs-sm); color: var(--text-body); background: var(--bg-surface); width: 100%; font-family: inherit;
}
.pricing-input:focus { outline: none; border-color: var(--action-blue); box-shadow: 0 0 0 3px rgba(22,199,201,0.12); }
.pricing-notes { margin: 16px 0; }

.pricing-section { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.pricing-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pricing-section-head h3 { margin: 0; font-size: var(--fs-md); color: var(--text-heading); }
.pricing-section-sub { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.pricing-section-tools { display: flex; align-items: center; gap: 12px; }
.pricing-toggle { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-body); white-space: nowrap; }

.pricing-lines { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pricing-lines th { text-align: left; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; padding: 4px 8px; }
.pricing-lines td { padding: 4px 8px; vertical-align: middle; }
.pricing-lines .pl-num { text-align: right; }
.pricing-lines .pl-num input { text-align: right; }
.pl-item { min-width: 180px; }
.pl-num input { max-width: 110px; }
.pl-line { font-weight: 600; color: var(--text-heading); white-space: nowrap; }
.pl-unit-label { color: var(--text-muted); font-size: var(--fs-xs); }
.pricing-x { border: 0; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: var(--r-sm); }
.pricing-x:hover { color: var(--semantic-rose); background: rgba(244,63,94,0.08); }
.pricing-dim { opacity: 0.45; }

/* Footer / totals */
.pricing-footer {
  position: sticky; bottom: 0; margin-top: 18px;
  display: grid; grid-template-columns: 1fr 1.2fr 1.4fr; gap: 20px; align-items: center;
  background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  padding: 16px 20px; box-shadow: var(--shadow-lg);
}
.pricing-total-row { display: flex; flex-direction: column; gap: 2px; }
.pricing-total-row span { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pricing-total-row strong { font-size: var(--fs-lg); color: var(--text-heading); }
.pricing-mode { display: flex; flex-direction: column; gap: 8px; }
.pricing-mode-switch { display: inline-flex; gap: 4px; background: var(--bg-page); padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--border-soft); }
.pricing-modebtn { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; }
.pricing-modebtn.active { background: var(--bg-surface); color: var(--action-blue); box-shadow: var(--shadow-sm); }
.pricing-mode-value input { max-width: 120px; }
.pricing-price-out { text-align: right; }
.pricing-price-big { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; }
.pricing-price-big span { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pricing-price-big strong { font-size: var(--fs-2xl); color: var(--semantic-green); }
.pricing-price-metrics { display: flex; gap: 16px; justify-content: flex-end; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
.pricing-price-metrics b { color: var(--text-heading); }

/* Libraries */
.pricing-lib-intro { color: var(--text-muted); font-size: var(--fs-sm); max-width: 680px; margin: 0 0 16px; }
.pricing-lib-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.pricing-lib-table .pricing-input { max-width: 160px; }
.pricing-lib-add td { border-top: 2px solid var(--border-soft); padding-top: 10px; }

@media (max-width: 760px) {
  .pricing-meta { grid-template-columns: 1fr; }
  .pricing-footer { grid-template-columns: 1fr; gap: 12px; text-align: left; }
  .pricing-price-out, .pricing-price-big, .pricing-price-metrics { text-align: left; justify-content: flex-start; }
}

/* Sign Pricing — Market check panel */
.pricing-market { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 16px 18px; margin: 16px 0 140px; box-shadow: var(--shadow-sm); }
.pricing-market-head { margin-bottom: 12px; }
.pricing-market-head h3 { margin: 0; font-size: var(--fs-md); color: var(--text-heading); display: inline-flex; align-items: center; gap: 8px; }
.pricing-badge-ai { font-size: var(--fs-xs); font-weight: 700; color: var(--semantic-purple); background: rgba(139,92,246,0.12); padding: 2px 8px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: 0.04em; }
.pricing-market-hint { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.pricing-market-inputs { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; margin-bottom: 12px; }
.pricing-market-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pricing-market-status { color: var(--text-muted); font-size: var(--fs-sm); }

.pricing-market-range { margin: 14px 0 6px; }
.pmr-scale { position: relative; height: 10px; margin: 8px 4px; }
.pmr-bar { position: absolute; inset: 0; background: linear-gradient(90deg, var(--semantic-amber), var(--semantic-green), var(--semantic-amber)); border-radius: var(--r-pill); opacity: 0.55; }
.pmr-typ { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--text-heading); transform: translateX(-1px); }
.pmr-you { position: absolute; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--action-blue); border: 2px solid var(--bg-surface); transform: translateX(-8px); top: -3px; box-shadow: var(--shadow-sm); }
.pmr-you-below { background: var(--semantic-amber); }
.pmr-you-above { background: var(--semantic-rose); }
.pmr-you-within { background: var(--semantic-green); }
.pmr-labels { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-muted); margin: 0 4px; }
.pmr-labels span:nth-child(2) { color: var(--text-heading); font-weight: 600; }

.pricing-market-verdict { font-size: var(--fs-sm); color: var(--text-body); margin: 10px 0 4px; }
.pmv-within b:last-of-type { color: var(--semantic-green); }
.pmv-below b:last-of-type { color: var(--semantic-amber); }
.pmv-above b:last-of-type { color: var(--semantic-rose); }
.pricing-conf { color: var(--text-muted); text-transform: capitalize; }
.pricing-market-basis { font-size: var(--fs-sm); color: var(--text-muted); margin: 4px 0 10px; }
.pricing-market-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pricing-market-cols h4, .pricing-market-sources h4 { margin: 6px 0 4px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.pricing-market-cols ul { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--text-body); }
.pricing-market-cols li { margin-bottom: 3px; }
.pricing-market-sources { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.pricing-market-sources a { color: var(--action-blue); font-size: var(--fs-sm); text-decoration: none; }
.pricing-market-sources a:hover { text-decoration: underline; }
.pms-note { color: var(--text-muted); }
.pricing-market-disclaim { margin-top: 12px; font-size: var(--fs-xs); color: var(--text-faint); font-style: italic; }

@media (max-width: 760px) {
  .pricing-market-inputs, .pricing-market-cols { grid-template-columns: 1fr; }
}

/* Sign Pricing — substrate materials with variants (library) */
.pricing-sub-mat { border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 12px; background: var(--bg-page); }
.pricing-sub-mat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pricing-sub-mat-name { max-width: 240px; font-weight: 600; }
.pricing-sub-mat-waste { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.pricing-sub-mat-waste input { max-width: 90px; }
.pricing-sub-vartable { width: 100%; }
.pricing-sub-vartable th { font-size: var(--fs-xs); }
.pricing-sub-vartable .pricing-input { max-width: 130px; }
.pricing-sub-perft { font-weight: 600; color: var(--semantic-green); white-space: nowrap; }
.pricing-sub-addmat { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.pricing-sub-addmat #pricing-newmat-name { max-width: 260px; }
.pricing-sub-addmat #pricing-newmat-waste { max-width: 110px; }
/* substrate quote line: two selects (material + variant) */
.pricing-lines[data-cat="substrate"] .pl-item { min-width: 150px; }

/* Sign Pricing — material categories (library) */
.pricing-cat-name { font-weight: 600; font-size: var(--fs-md); color: var(--text-heading); }
input.pricing-cat-name { max-width: 240px; }
.pricing-mat-updated { color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap; }
.pricing-mat-cat { max-width: 130px; }
.pricing-sub-vartable .pricing-row-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* ==================================================================
   SIGNMETRY DESIGN SYSTEM — Slice 1: tokens + shell
   Appended last so the :root token overrides win by source order.
   Each store keeps its own name/logo; this is the shared Signmetry look.
   ================================================================== */
:root {
  --bg-page: #F5F7FA;              /* Cloud */
  --text-heading: #10233F;        /* Midnight */
  --text-body: #26313D;           /* Graphite */
  /* Midnight carries solid buttons/badges (keeps existing white button text
     legible) + nav; teal is the lead accent (links, active, focus). */
  --brand-red: #10233F;
  --brand-red-dark: #0B1A30;
  --action-blue: #16C7C9;
  --action-blue-dark: #12B6B8;
  --sm-midnight: #10233F;
  --sm-teal: #16C7C9;
  --sm-teal-dark: #12B6B8;
  --sm-coral: #FF6B4A;
  --sm-sidebar-line: #1C3555;
}
/* Manrope for headings / nav / primary controls; Inter stays for data + body. */
h1, h2, h3, .page-eyebrow, .sidebar-item, .sidebar-brand-copy strong,
.sidebar-tenant-name, button.primary, .topbar-new-btn, .topbar-manage-btn {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
}
/* Teal leads on the eyebrow accent. */
.page-eyebrow { color: var(--sm-teal-dark); }
/* Hero CTAs on white surfaces — Midnight with white text (teal reads muddy on
   white; teal is kept for the dark sidebar's active state instead). */
button.primary, .topbar-new-btn {
  background: var(--sm-midnight); color: #ffffff;
  border-color: transparent; box-shadow: 0 6px 16px rgba(16,35,63,.18);
}
button.primary:hover, .topbar-new-btn:hover { background: #0B1A30; color: #ffffff; }
/* Signature Signmetry shell — dark Midnight sidebar with teal active item. */
.sidebar { background: var(--sm-midnight); border-right-color: var(--sm-sidebar-line); }
.sidebar-brand { border-bottom-color: var(--sm-sidebar-line); }
.sidebar-brand-copy strong { color: #ffffff; }
.sidebar-brand-copy span { color: #8FA1BB; }
.sidebar-section-label { color: #74869F; }
.sidebar-item { color: #C7D3E2; }
.sidebar-item:hover { background: rgba(255,255,255,.07); color: #ffffff; }
.sidebar-item.active { background: rgba(22,199,201,.16); color: var(--sm-teal); font-weight: 600; }
.sidebar-tenant { border-top-color: var(--sm-sidebar-line); }
.sidebar-tenant-name { color: #EEF2F8; }
.sidebar-tenant-loc { color: #8FA1BB; }

/* Sign Pricing — AI draft panel + custom (AI-estimated) lines */
.pricing-ai { background: var(--bg-surface); border: 1px solid var(--semantic-purple); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.pricing-ai-head h3 { margin: 0; font-size: var(--fs-md); color: var(--text-heading); display: inline-flex; align-items: center; gap: 8px; }
.pricing-ai #pricing-ai-desc { margin: 10px 0; resize: vertical; }
.pricing-ai-actions { display: flex; align-items: center; gap: 12px; }
.pricing-ai-status { color: var(--text-muted); font-size: var(--fs-sm); }
.pricing-ai-result { margin-top: 12px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
.pricing-ai-summary { font-size: var(--fs-sm); color: var(--text-body); margin: 0 0 6px; }
.pricing-ai-flag { color: var(--semantic-amber); font-weight: 600; }
.pricing-ai-assumptions h4 { margin: 6px 0 4px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.pricing-ai-assumptions ul { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--text-body); }
.pricing-ai-assumptions li { margin-bottom: 3px; }
.pricing-ai-empty { color: var(--text-faint); font-size: var(--fs-sm); font-style: italic; margin: 10px 0 0; }

.pl-custom { display: flex; align-items: center; gap: 8px; }
.pricing-custom-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--semantic-amber); background: rgba(245,158,11,0.14); padding: 2px 6px; border-radius: var(--r-pill); white-space: nowrap; }
.pricing-custom-line { background: rgba(245,158,11,0.05); }

/* ==================================================================
   SIGNMETRY DESIGN SYSTEM — Slice 2: surfaces
   Blue accents were swept to teal above; these keep teal legible and
   bring warning states onto the coral (attention) brand color.
   ================================================================== */
/* Teal-background controls need Midnight text — white on teal fails contrast. */
nav#main-nav .nav-items > .tab.active,
.tab-dropdown-btn.active,
.cal-mode-btn.active,
.cal-view-btn.active,
.status-ready_for_install,
.header-action-btn,
.quick-action-btn.quick-install:hover:not(:disabled),
.pcc-mark-btn,
.suggestion-actions button.primary,
.ai-briefing-modal-footer button,
.jshot-map-open,
.jshot-archive-btn,
.jshot-d-btn.primary,
.jshot-d-btn.active,
.jshot-lb-edit button,
.cal-day.today .day-number {
  color: var(--sm-midnight) !important;
}
/* Attention state → Signal Coral (was red), per the brand guide. */
.corebridge-sync-alert.is-stale {
  border-color: var(--sm-coral); background: #FFF2EE; color: #7A2E1A;
}
.corebridge-sync-alert.is-stale .corebridge-sync-now { background: #E8502E; color: #fff; }
/* Signmetry mark in the sidebar brand (replaces the old app wordmark). */
.sidebar-brand .sidebar-mark { height: 34px; width: 34px; flex: 0 0 auto; }

/* ==================================================================
   CALENDAR CATEGORY COLORS — editable via the calendar "Colors" panel.
   Defaults below match the built-in palette, so nothing changes until a
   color is customized (saved per browser; applied as CSS vars on :root).
   ================================================================== */
:root {
  --cal-install:#16C7C9; --cal-pickup:#F59E0B; --cal-removal:#6D4C41;
  --cal-production:#212121; --cal-completed:#AB47BC; --cal-priority:#E53935;
  --cal-materials:#FB8C00; --cal-survey:#EC407A; --cal-task:#64748B;
}
.span-bar.in-prod { background: var(--cal-production); color: var(--cal-production-text, #fff); }
.span-bar.in-prod:hover { background: var(--cal-production); filter: brightness(1.25); }
.span-bar.completed { background: var(--cal-completed); color: var(--cal-completed-text, #fff); }
.span-bar.completed:hover { background: var(--cal-completed); filter: brightness(.92); }
.span-bar.priority { background: var(--cal-priority); color: var(--cal-priority-text, #fff); }
.span-bar.priority:hover { background: var(--cal-priority); filter: brightness(.92); }
/* Month-view chips for the same statuses (span bars are the week view). */
.cal-event.in-prod { background: var(--cal-production); color: var(--cal-production-text, #fff); border-left-color: color-mix(in srgb, var(--cal-production) 55%, #000); }
.cal-event.completed { background: color-mix(in srgb, var(--cal-completed) 16%, #fff); color: color-mix(in srgb, var(--cal-completed) 80%, #000); border-left-color: var(--cal-completed); }
.dot.install { background: var(--cal-install); }
/* Event chips use a light tint + colored border + dark text so they stay
   readable for ANY category color the user picks (solid bg + white text
   breaks for light colors). */
.cal-event.install { background: color-mix(in srgb, var(--cal-install) 16%, #fff); color: color-mix(in srgb, var(--cal-install) 82%, #000); border-left: 3px solid var(--cal-install); }
.cal-event.removal { background: color-mix(in srgb, var(--cal-removal) 16%, #fff); color: color-mix(in srgb, var(--cal-removal) 82%, #000); border-left: 3px solid var(--cal-removal); }
.dot.pickup { background: var(--cal-pickup); }
.cal-event.pickup { background: color-mix(in srgb, var(--cal-pickup) 16%, #fff); border-left-color: var(--cal-pickup); color: color-mix(in srgb, var(--cal-pickup) 82%, #000); }
.cal-event.priority, .span-bar.priority-chip { background: color-mix(in srgb, var(--cal-priority) 14%, #fff); border-left-color: var(--cal-priority); color: color-mix(in srgb, var(--cal-priority) 76%, #000); }
.cal-event.material-ordered, .cal-event.material-delivery { background: color-mix(in srgb, var(--cal-materials) 18%, #fff); border-left-color: var(--cal-materials); color: color-mix(in srgb, var(--cal-materials) 82%, #000); }
.cal-event.survey { background: color-mix(in srgb, var(--cal-survey) 14%, #fff); border-left-color: var(--cal-survey); color: color-mix(in srgb, var(--cal-survey) 80%, #000); }
.cal-event.task { border-left-color: var(--cal-task); }
/* The colors panel */
.cal-colors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 4px 0 6px; }
.cal-color-row { display: flex; align-items: center; gap: 10px; }
.cal-color-row input[type="color"] { width: 34px; height: 30px; border: 1px solid var(--border-soft); border-radius: 8px; padding: 0; background: none; cursor: pointer; flex: 0 0 auto; }
.cal-color-row label { font-size: 13px; color: var(--text-body); }
/* Materials to order — dashboard card + order-form price memory */
.mto-card h3 .mto-count { display:inline-block; background:#fff3e0; color:#e65100; font-size:12px; font-weight:700; padding:1px 8px; border-radius:20px; margin-left:6px; }
.mto-card h3 .mto-count.zero { background:#eef0f3; color:#6b7280; }
.mto-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid #eef0f3; }
.mto-item:last-child { border-bottom:none; }
.mto-main { min-width:0; }
.mto-meta { color:#6b7280; font-size:12px; margin-left:6px; }
.mto-actions { display:flex; gap:6px; flex:0 0 auto; }
.mto-actions button { font-size:12px; padding:5px 10px; border-radius:7px; border:1px solid #d0d4da; background:#fff; cursor:pointer; }
.mto-order { border-color:#a5d6a7; color:#137333; font-weight:600; }
.dl-empty { color:#6b7280; font-size:13px; padding:6px 0; }
.material-price-hint { background:#f6f8fb; border:1px solid #e1e4e8; border-radius:8px; padding:8px 11px; font-size:13px; color:#26313d; }
.mph-label { color:#6b7280; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.03em; margin-right:6px; }
.mph-v { white-space:nowrap; }
.mph-range { color:#8592a0; font-size:12px; }
.mph-sep { color:#c4ceda; margin:0 7px; }