/* 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: #1a73e8;
  --action-blue-dark: #1666c8;

  /* 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);
}

/* ============================================================
   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(26, 115, 232, 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(26, 115, 232, 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;
  }
}
@media (max-width: 720px) {
  .sidebar {
    position: fixed;
    left: -100%;
    width: 240px;
    transition: left 0.18s ease;
  }
  .sidebar.open {
    left: 0;
  }
  .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;  /* search moves to a slide-out in a future commit */
  }
}

/* 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; }
}

/* ============================================================
   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: #1565c0; }
.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: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
  }
  /* 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: #1565c0; }
.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; }

/* 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: #1a73e8; }
.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: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
}

@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-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;
}
#cal-search {
  width: 280px;
  padding-right: 30px;   /* extra room for the clear button */
}
#cal-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(26, 115, 232, 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: #1a73e8;
  color: #fff;
}
.cal-mode-btn.active:hover { background: #1666c8; }
/* 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: #1a73e8; color: #1a73e8; }
.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: #1a73e8; 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: #1565c0; }
.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: #1a73e8;
  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: #1a73e8;
  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: #1a73e8;
  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 #1a73e8; 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: #1565c0; color: #fff; border-left: 3px solid #0d47a1; 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: #1565c0; color: #fff; }
.status-delivered { background: #f3e5f5; color: #6a1b9a; }
.status-completed { background: #f3e5f5; color: #6a1b9a; }

.jobs-controls, .weekly-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.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: #1a73e8;
  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: #1a73e8;
  color: #fff;
  border: 1px solid #1a73e8;
  border-radius: var(--r-md);
  cursor: pointer;
  font-weight: 600;
  margin-right: 4px;
}
.header-action-btn:hover { background: #1666c8; border-color: #1666c8; }

/* 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: #1565c0;
  color: #0d47a1;
}
.quick-action-btn.quick-install:hover:not(:disabled) { background: #1565c0; 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: #1a73e8; color: #1a73e8; }
.address-shortcut.active {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #1a73e8;
}
/* 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; }
/* 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: #1a73e8;
  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: #1a73e8; box-shadow: 0 0 0 3px rgba(26,115,232,0.15); }
.shi-label { font-weight: 600; color: #1f2329; }
.status-history-item.current .shi-label { color: #1a73e8; }
.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: #1a73e8; color: #1a73e8; }
.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: #1a73e8; color: #1a73e8; }
.ics-link { float: right; font-size: 12px; font-weight: 600; color: #1a73e8; 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: #1a73e8; 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; }
.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%;
  min-width: 0;
  box-sizing: border-box;
}
.grid input:focus, .grid select:focus, .grid textarea:focus {
  outline: none;
  border-color: #1a73e8;
  /* 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(26, 115, 232, 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 #1565c0; background: #1565c0; color: #fff;
  font-weight: 600; font-size: 13px; border-radius: 8px; padding: 7px 14px; cursor: pointer;
}
.pcc-mark-btn:hover { background: #0d47a1; border-color: #0d47a1; }
.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: #1a73e8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: #0d47a1; 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; }

/* 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 {
  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; }

/* 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: #1a73e8; color: #1a73e8; }
.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: #1a73e8; 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 */
  }

  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; }

  /* 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;
}
.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; }
.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.pending-hidden.parked-hidden.schedule-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: #1565c0;
}
.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: #1565c0;
  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: #1a73e8;
}
/* 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 #1565c0; }
.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: #1a73e8;
  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: #1565c0;
  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: #0d47a1;
}

/* =====================================================================
   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: #0d47a1; }
.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: #0d47a1;
}
.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;
}
.kanban-section-active .kanban-section-header h3 { color: #1a73e8; }
.kanban-section-active .kanban-section-count { background: #e3f2fd; color: #1565c0; }
.kanban-section-parked .kanban-section-header h3 { color: #e65100; }
.kanban-section-parked .kanban-section-count { background: #fff3e0; color: #e65100; }
/* 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;
}
.kanban-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  align-items: flex-start;
}
.kanban-row .kanban-col {
  flex: 1 1 0;
  min-width: 180px;
  max-height: calc(50vh - 100px);
  overflow-y: auto;
}
/* Below this width the 6-col rows start cramping; let them scroll
   horizontally instead of squishing cards illegibly. */
@media (max-width: 1300px) {
  .kanban-row .kanban-col { flex: 0 0 200px; min-width: 200px; }
}
/* Parked sub-stage columns share the amber band of the parked widget.
   Awaiting Payment uses deep red — it's the AR concern column, the
   eye should land there first. */
.kanban-full .kanban-col-parked[data-target="Awaiting Payment"]   { border-top: 3px solid #c62828; }
.kanban-full .kanban-col-parked[data-target="Design"]             { border-top: 3px solid #e65100; }
.kanban-full .kanban-col-parked[data-target="Proof Out"]          { border-top: 3px solid #f9a825; }
.kanban-full .kanban-col-parked[data-target="In Permit"]          { border-top: 3px solid #388e3c; }
.kanban-full .kanban-col-parked[data-target="Vended"]             { border-top: 3px solid #6a1b9a; }
.kanban-full .kanban-col-parked[data-target="Materials on Order"] { border-top: 3px solid #1565c0; }
.kanban-full .kanban-col-parked[data-target="On Hold"]            { border-top: 3px solid #00695c; }
/* Active stages use blue → green progression so the eye reads
   left-to-right as "more done" */
.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 #1a73e8; }
.kanban-full .kanban-col-active[data-target="ready_for_pickup"]  { border-top: 3px solid #0891b2; }
.kanban-full .kanban-col-active[data-target="ready_for_install"] { border-top: 3px solid #0e7490; }
.kanban-full .kanban-col-active[data-target="delivered"]         { border-top: 3px solid #15803d; }
.kanban-full .kanban-col-active[data-target="completed"]         { border-top: 3px solid #4ade80; }
/* Subtle background tint to separate the two bands */
.kanban-full .kanban-col-parked { background: #fffaf3; }
.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 #1a73e8;
  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: #1565c0;
  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: #1a73e8; }
.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: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
}
.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). */
.kanban-full .kanban-col-active[data-target="cancelled"]         { border-top: 3px solid #94a3b8; }

/* 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;
}

/* 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 #1565c0; }
.mark-waiting-final .mark-waiting-opt-label    { color: #1565c0; }
.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: #1a73e8;
}
.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 #1a73e8; }
.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: #1a73e8; }
.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); }
.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 #1a73e8;
  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: #1a73e8;
}
.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: #1a73e8;
}
.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: #1a73e8; }
.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; }
}

/* ============================================================
   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-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; }
.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;
}
.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: #1565c0; }
.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, #1565c0);
  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;
}
#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);
}

/* AI-01: daily attention briefing card */
.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; }

/* AI-02: weekly narrative card */
.ai-narrative-card {
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.ai-narrative-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px;
}
.ai-narrative-label { font-size: 0.85rem; font-weight: 600; color: #1f3a5f; }
.ai-narrative-body { font-size: 0.92rem; color: #2a3742; line-height: 1.5; }

/* 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; }
@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 "add to this day" popover */
.mini-cal-hint { color: #8a95a0; font-size: 0.72rem; }
.minical-day-menu {
  position: absolute; z-index: 200; background: #fff;
  border: 1px solid #c7d6ea; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16,40,80,0.18); padding: 6px; min-width: 168px;
}
.minical-day-menu .mdm-head {
  font-size: 0.74rem; color: #8a95a0; font-weight: 600;
  padding: 4px 8px 6px; border-bottom: 1px solid #f0f3f8; margin-bottom: 4px;
}
.minical-day-menu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 0.88rem; color: #2a3742;
}
.minical-day-menu 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, #1a73e8); }
.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-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; 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: #1a73e8; box-shadow: 0 0 0 2px rgba(26,115,232,0.15); }
.jshot-alljobs { max-width: 220px; border: 1px solid var(--border); border-radius: 6px; padding: 7px 8px; font-size: 0.88rem; background: #fff; color: var(--text); cursor: pointer; }
.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: #1565c0; color: #fff; border: none; border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.jshot-archive-btn:hover { background: #0d47a1; }
/* Table header row mirrors CompanyCam's project-list columns */
.jshot-table-header {
  display: grid;
  grid-template-columns: 1fr 160px 160px 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: 1fr 160px 160px 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-addr { font-size: 0.8rem; 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: #0d47a1; }
.jshot-status-badge.status-ready_for_install { background: #d4f1d0; color: #1b5e20; }

.jshot-row-updated { font-size: 0.82rem; 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: #1a73e8; text-decoration: none; }
.jshot-d-addr:hover { text-decoration: underline; }
.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: #1565c0; border-color: #1565c0; color: #fff; }
.jshot-d-btn.primary:hover { background: #0d47a1; }
.jshot-d-btn.active { background: #1a73e8; border-color: #1a73e8; color: #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 #1a73e8; outline-offset: -3px; }
.jshot-d-tile.sel::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: #1a73e8; 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; }

@media (max-width: 900px) {
  .jshot-table-header { display: none; }
  .jshot-row { grid-template-columns: 1fr; gap: 8px; }
  .jshot-row-photos { flex-wrap: wrap; }
}