/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== App-like mobile behavior ===== */
html {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  -webkit-user-select: none; user-select: none;
  overscroll-behavior-y: none;
  /* `user-select: none` on the scroll surface makes some Android browsers
     (Samsung Internet, certain Chrome builds) treat a one-finger drag as a
     text-selection/drag gesture instead of a scroll — the symptom is "you
     need two fingers to scroll." Declaring touch-action: manipulation tells
     the browser this surface pans (scrolls) and pinch-zooms on a single
     finger, resolving the ambiguity. (manipulation still allows the
     horizontal pan used by the filter/tab strips.) */
  touch-action: manipulation;
}
/* Allow text selection in content areas. .calls-page opts in wholesale so
   transcripts, AI summaries, and phone numbers can be copied; user-select
   inherits, and the toggle label re-disables it for itself below.
   .dashboard-grid/.dash-page and .chat-panel-body opt in the same way so
   dashboard metrics and Budget Assistant chat replies can be copied. */
.modal-body, .hub-main, .form-group input, .form-group textarea, .form-group select,
input, textarea, select, [contenteditable="true"], .calls-page,
.dashboard-grid, .dash-page, .chat-panel-body {
  -webkit-user-select: text; user-select: text;
}
/* .dash-page hosts drag-and-drop kanban cards (Sales lead board and the AP
   bill board both render .lead-card elements with card.draggable = true).
   Since .dash-page just opted text back into selectable, explicitly
   re-disable it on the draggable cards themselves so selecting text doesn't
   fight starting an HTML5 drag. */
.dash-page .lead-card {
  -webkit-user-select: none; user-select: none;
}
/* Safe area padding for notched devices.
   Note: #app already pads top by nav-height + safe-area-inset-top, so any
   page that renders inside #app should NOT add the inset again — that's
   what was pushing home-screen content way below the nav and leaving a
   stretch of empty gray-50 above the tiles. The login screen is the
   exception (rendered without the nav), so it carries its own safe-area. */
@supports (padding-top: env(safe-area-inset-top)) {
  .top-nav { padding-top: env(safe-area-inset-top); }
  .login-wrapper { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

:root {
  --blue: #1e3fa3;
  --blue-dark: #162e7a;
  --blue-light: #e8edf8;
  --yellow: #F5EA08;
  --yellow-dark: #d4ca00;
  --white: #ffffff;
  --gray-50: #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #868e96;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --red: #e03131;
  --orange: #e8590c;
  --green: #2f9e44;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --font: 'Barlow', -apple-system, sans-serif;
  --font-heading: 'Barlow Condensed', 'Barlow', sans-serif;
  --nav-height: 64px;
}

html { font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--gray-50);
  color: #1a1a2e;
  font-size: 17px !important;
  line-height: 1.5;
  min-height: 100vh;
}

/* ===== Typography ===== */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: #111827; }
h1 { font-size: 32px !important; }

/* Global typography tokens */
.section-header {
  font-family: var(--font-heading); font-size: 18px !important; font-weight: 700;
  text-transform: uppercase; color: var(--blue); letter-spacing: .5px;
  border-bottom: 2px solid #e5e7eb; padding-bottom: 6px; margin-bottom: 12px;
}
h2 { font-size: 24px !important; }
h3 { font-size: 20px !important; }

/* ===== Loading ===== */
.loading-screen {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; background: var(--gray-50);
  /* Prevent layout shift: loading screen fills viewport regardless of nav state */
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 5000;
}
.loader {
  width: 40px; height: 40px;
  border: 4px solid var(--gray-200);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-inline {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--gray-300); border-top-color: var(--blue);
  border-radius: 50%; animation: spin .6s linear infinite;
  vertical-align: middle; margin-right: 6px;
}

/* ===== Top Nav =====
   Height grows with the safe-area inset so the brand mark and hamburger
   keep their full 64px content area under the notch instead of being
   squeezed by border-box padding. */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
  background: var(--blue); color: var(--white); z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.top-nav.hidden { display: none; }
.nav-inner {
  max-width: 1400px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; padding: 0 16px; gap: 16px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark {
  width: 36px; height: 36px; background: var(--yellow); color: var(--blue);
  font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.brand-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.35rem; }

.nav-links {
  display: flex; align-items: center; gap: 4px; flex: 1;
}
.nav-links a {
  color: rgba(255,255,255,.85); text-decoration: none;
  padding: 8px 14px; border-radius: var(--radius);
  font-family: var(--font-heading); font-weight: 700; font-size: 17px !important;
  transition: all .15s; white-space: nowrap; position: relative;
}
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,.12); }
.nav-links a.active { color: var(--yellow); background: rgba(255,255,255,.1); }

/* Nav badges */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #dc2626; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 9px; line-height: 1;
  position: absolute; top: -4px; right: -6px;
}
@media (max-width: 768px) {
  .nav-badge {
    position: static; margin-left: 8px;
  }
}

.nav-user {
  font-size: .85rem; color: rgba(255,255,255,.7);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.nav-user .user-name { font-weight: 500; color: var(--white); }
/* ===== Nav Search ===== */
.nav-search {
  position: relative; display: flex; align-items: center; flex-shrink: 0;
}
.nav-search-btn {
  background: none; border: none; color: rgba(255,255,255,.8);
  cursor: pointer; padding: 6px; border-radius: var(--radius);
  display: flex; align-items: center; transition: all .15s;
}
.nav-search-btn:hover { color: var(--white); background: rgba(255,255,255,.12); }
.nav-search-input {
  width: 220px; padding: 6px 12px; border: none; border-radius: var(--radius);
  font-family: var(--font); font-size: .85rem; background: rgba(255,255,255,.15);
  color: var(--white); margin-left: 6px; outline: none;
  transition: width .2s;
}
.nav-search-input::placeholder { color: rgba(255,255,255,.5); }
.nav-search-input:focus { background: rgba(255,255,255,.2); width: 280px; }
.nav-search-input.hidden { display: none; }
@media (min-width: 769px) {
  .nav-search-input, .nav-search-input.hidden { display: block !important; }
  .nav-search-btn { display: none; }
}

.search-dropdown {
  position: absolute; top: 100%; left: 0; right: auto;
  width: 380px; max-height: 420px; overflow-y: auto;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200);
  z-index: 4000; margin-top: 4px;
}
.search-dropdown.hidden { display: none; }
.search-loading { padding: 16px; font-size: .85rem; color: var(--gray-500); }
.search-category {
  padding: 8px 14px 4px; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500);
  border-top: 1px solid var(--gray-100);
}
.search-category:first-child { border-top: none; }
.search-result {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
  min-height: 52px; cursor: pointer; transition: background .1s;
  border-bottom: 1px solid var(--gray-50);
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: #f0f4ff; }
.search-type-badge {
  flex-shrink: 0; padding: 2px 6px; border-radius: 4px;
  font-size: .65rem; font-weight: 700; color: var(--white);
  text-transform: uppercase; margin-top: 2px;
}
.search-result-info { flex: 1; min-width: 0; }
.search-result-title {
  font-weight: 500; font-size: .875rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.search-result-snippet {
  font-size: .75rem; color: var(--gray-500); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-no-results { padding: 20px; text-align: center; color: var(--gray-500); font-size: .9rem; }

@media (max-width: 768px) {
  .nav-search-input { width: 150px; }
  .nav-search-input:focus { width: 180px; }
  .search-dropdown { width: calc(100vw - 32px); left: -60px; }
}

.nav-new-task-btn {
  background: var(--yellow); color: var(--blue); border: none;
  padding: 5px 14px; border-radius: var(--radius); cursor: pointer;
  font-family: var(--font); font-weight: 600; font-size: .8rem;
  transition: background .15s; white-space: nowrap;
}
.nav-new-task-btn:hover { background: var(--yellow-dark); }
.nav-user .btn-logout {
  background: rgba(255,255,255,.12); border: none; color: var(--white);
  padding: 4px 10px; border-radius: var(--radius); cursor: pointer;
  font-size: .8rem; font-weight: 500; transition: background .15s;
}
.nav-user .btn-logout:hover { background: rgba(255,255,255,.2); }

/* Hamburger */
.hamburger {
  display: none; background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 8px;
}
.hamburger span {
  display: block; width: 26px; height: 3px; background: var(--white);
  border-radius: 2px; transition: all .2s;
}

@media (max-width: 768px) {
  /* Drawer shell only. Sizing, flatten-overflow, and item styling are owned
     by the canonical "Mobile nav panel" blocks lower in this file so there's
     a single source of truth (avoids the !important/source-order conflicts
     that made pinned vs overflow items render at different sizes). */
  .hamburger { display: flex; }
  .nav-links {
    display: none; position: fixed;
    top: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
    left: 0; right: 0;
    background: var(--blue-dark); flex-direction: column;
    padding: 8px 0; box-shadow: var(--shadow-md); gap: 0;
  }
  .nav-links.open { display: flex; }
  .nav-user .user-name { display: none; }
}

/* ===== Content area =====
   Match the nav's actual rendered height (base + safe-area) so page
   content never slides up underneath the brand/hamburger row. */
#app {
  padding-top: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
  min-height: 100vh; overflow-x: hidden;
}
.top-nav.hidden + #app { padding-top: 0; }

.page { padding: 20px 16px; max-width: 1400px; margin: 0 auto; overflow-x: hidden; box-sizing: border-box; }
.page-header { margin-bottom: 14px; }
.page-header h1 { color: var(--blue); }

/* ===== Login ===== */
.login-wrapper {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  padding: 20px;
}
.login-card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 40px 32px; width: 100%; max-width: 400px;
}
.login-brand {
  text-align: center; margin-bottom: 28px;
}
.login-brand .brand-mark-lg {
  width: 56px; height: 56px; background: var(--blue); color: var(--yellow);
  font-family: var(--font-heading); font-weight: 700; font-size: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; margin-bottom: 12px;
}
.login-brand h1 { color: var(--blue); font-size: 1.5rem; margin-bottom: 4px; }
.login-brand p { color: var(--gray-600); font-size: .9rem; }

/* Resume-session banner: shown when a saved email is present */
.login-resume {
  background: #f3f7fd;
  border: 1px solid #c7d7ef;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  text-align: center;
}
.login-resume-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-600);
  font-weight: 600;
}
.login-resume-email {
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  word-break: break-all;
  margin: 2px 0 6px;
}
.login-switch-btn {
  background: none;
  border: none;
  color: var(--gray-700);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.login-switch-btn:hover { color: var(--blue); }

/* Internal-line contact footer on the login card */
.login-contact {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-200);
  text-align: center;
}
.login-contact-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-600);
  font-weight: 600;
}
.login-contact-phone {
  display: inline-block;
  margin-top: 4px;
  color: var(--blue);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.login-contact-phone:hover { text-decoration: underline; }
.login-contact-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--gray-600);
}

/* Remember me */
.remember-me {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; cursor: pointer; user-select: none;
  font-size: .85rem; color: var(--gray-700);
}
.remember-me input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer;
}

/* ===== Forms ===== */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-weight: 500; font-size: .85rem;
  color: var(--gray-700); margin-bottom: 4px;
}
/* Apply the full-width bar styling only to text/select-like inputs.
   Checkboxes and radios are sized individually by their toggle wrappers
   (.shop-toggle, .d8-flag, .rte-toggle-label, etc). */
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
  width: 100%; padding: 10px 12px; height: 40px;
  border: 1px solid #d1d5db; border-radius: 8px;
  font-family: var(--font); font-size: .875rem;
  transition: border-color .15s, box-shadow .15s;
  background: var(--white);
}
.form-group textarea { height: auto; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,63,163,.08);
}
@media (max-width: 768px) {
  .form-group input:not([type="checkbox"]):not([type="radio"]),
  .form-group select { height: 44px; }
  /* iOS Safari auto-zooms when focusing an input with font-size < 16px.
     Forcing 16px on mobile prevents the viewport shift that follows. */
  .form-group input, .form-group select, .form-group textarea,
  input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="date"], input[type="datetime-local"],
  input[type="url"], input[type="tel"], input[type="search"], textarea, select {
    font-size: 16px !important;
  }
}
.form-group textarea { resize: vertical; min-height: 80px; }

.form-error {
  background: #fef2f2; color: var(--red); padding: 10px 12px;
  border-radius: var(--radius); font-size: .875rem; margin-bottom: 16px;
  border: 1px solid #fecaca; display: none;
}
.form-error.visible { display: block; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 16px; height: 40px; border-radius: 6px;
  font-family: var(--font-heading); font-weight: 700; font-size: 16px !important;
  border: none; cursor: pointer; transition: all .15s;
  text-decoration: none; white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: #1e3fa3; color: var(--white); }
.btn-primary:hover:not(:disabled) { background: #172f7a; }
.btn-secondary { background: var(--white); color: #1e3fa3; border: 1px solid #1e3fa3; }
.btn-secondary:hover:not(:disabled) { background: #f0f2ff; }
.btn-yellow { background: var(--yellow); color: var(--blue); }
.btn-yellow:hover:not(:disabled) { background: var(--yellow-dark); }
.btn-danger { background: var(--red); color: var(--white); }
.btn-danger:hover:not(:disabled) { background: #c92a2a; }
.btn-sm { padding: 6px 16px; font-size: 16px !important; }
.btn-block { width: 100%; }

/* ===== Cards ===== */
.card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); border: 1px solid var(--gray-200);
  overflow: hidden;
}
.card-header {
  padding: 14px 16px; border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-header h2, .card-header h3 { margin: 0; }
.card-body { padding: 16px; }

/* ===== Priority Badges ===== */
.priority-badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-family: var(--font-heading); font-size: 14px !important; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.priority-urgent { background: #dc2626; color: #fff; }
.priority-high { background: #ea580c; color: #fff; }
.priority-medium { background: #1e3fa3; color: #fff; }
.priority-low { background: #4b5563; color: #fff; }

/* Status badges */
.status-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px;
  font-family: var(--font-heading); font-size: 14px !important; font-weight: 700;
  text-transform: uppercase; white-space: nowrap;
}
.status-open { background: #374151; color: #fff; }
.status-in_progress { background: #92400e; color: #fff; }
.status-complete { background: #166534; color: #fff; }
.status-expired { background: #991b1b; color: #fff; }

/* Order-specific status colors */
.status-requested { background: #e5e7eb; color: #374151; }
.status-approved { background: #dbeafe; color: #1e40af; }
.status-ordered { background: #fef3c7; color: #92400e; }
.status-shipped { background: #fed7aa; color: #9a3412; }
.status-received { background: #d1fae5; color: #065f46; }
.status-closed { background: #dcfce7; color: #166534; }
.status-installed { background: #dcfce7; color: #166534; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
.status-rejected { background: #fee2e2; color: #991b1b; }

/* Order type colors */
.otype-part { background: #1d4ed8; color: #fff; }
.otype-material { background: #16a34a; color: #fff !important; }
.otype-equipment { background: #ea580c; color: #fff; }
.otype-warranty { background: #7c3aed; color: #fff; }

/* ===== Dashboard Layout ===== */
.dash-page { background: #3d4552; }
.dash-page .page-header h1 { color: var(--white); }
/* Paint the viewport behind the centered .page so nothing of the default
   light body color shows at the dashboard edges. */
body:has(.dash-page), #app:has(.dash-page) { background: #3d4552; }
/* Two-column work-through board: Live Feed left, 10-7/10-8 right. Wide
   enough to actually use an office monitor; stacks on narrow screens. */
.dashboard-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  align-items: start;
  max-width: 1240px; margin: 0 auto; width: 100%;
}
.col-count {
  margin-left: 10px; padding: 1px 10px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: var(--white);
  font-size: .85rem; font-weight: 600; vertical-align: 3px;
}
/* Each queue scrolls independently on desktop so one long column can't
   bury the other. Natural page flow on small screens. */
@media (min-width: 901px) {
  .dash-col-scroll { max-height: calc(100vh - 230px); overflow-y: auto; padding-right: 4px; }
}
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; max-width: 760px; }
}
/* Dispatch (10-7/10-8) cards — same card language as the feed, colored by
   event state: blue arrival, green complete, orange return-needed. */
.dispatch-card { border-left: 4px solid var(--blue); cursor: pointer; }
.dispatch-card.d8-ok { border-left-color: var(--green); }
.dispatch-card.d8-warn { border-left-color: var(--orange); }
.dispatch-badge {
  padding: 2px 8px; border-radius: 4px; font-size: .7rem;
  font-weight: 700; color: #fff; background: var(--blue);
}
.d8-ok .dispatch-badge { background: var(--green); }
.d8-warn .dispatch-badge { background: var(--orange); }
.column-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.column-header h2 {
  font-family: var(--font-heading); font-size: 28px !important; font-weight: 700;
  color: var(--white); letter-spacing: .5px;
}
.live-dot {
  width: 8px; height: 8px; background: var(--green);
  border-radius: 50%; display: inline-block; margin-right: 8px;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ===== Task Board ===== */
.task-group { margin-bottom: 8px; }
.task-group:first-child .task-group-header { padding-top: 0; }
.task-group-header {
  display: flex; align-items: center; gap: 8px;
  padding-top: 6px; margin-bottom: 6px; padding-left: 2px;
}
.task-group-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.task-group-name {
  font-family: var(--font-heading); font-weight: 700; font-size: 18px !important;
  text-transform: uppercase; letter-spacing: .05em; color: var(--gray-800);
}
.task-group-count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  font-size: .78rem; font-weight: 700; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Task Card V2 */
.task-card-v2 {
  background: var(--white); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .15s ease, transform .15s ease;
}
.task-card-v2:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.tc-removing {
  opacity: 0; transform: translateY(-8px);
  max-height: 0; padding: 0 16px; margin: 0; overflow: hidden;
  transition: all .3s ease;
}
/* Order card with accent bar */
.order-card-wrap {
  display: flex; border-radius: 10px; overflow: hidden;
  margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .15s ease, transform .15s ease; cursor: pointer;
}
.order-card-wrap:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); transform: translateY(-1px); }
.order-card-accent { width: 4px; flex-shrink: 0; }
.order-card-accent.otype-part { background: #1d4ed8; }
.order-card-accent.otype-material { background: #16a34a; }
.order-card-accent.otype-equipment { background: #ea580c; }
.order-card-accent.otype-warranty { background: #7c3aed; }
.order-card-body {
  flex: 1; background: var(--white); padding: 12px 14px; min-width: 0;
}
.tc-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.tc-id { font-family: 'Courier New', monospace; font-size: 15px; color: #9ca3af; letter-spacing: .02em; }
.tc-title {
  font-family: var(--font); font-weight: 700; font-size: 21px !important;
  color: #111827; margin-bottom: 3px; line-height: 1.3;
}
.tc-desc {
  font-size: 16px; color: #6b7280; line-height: 1.35; margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-card-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; align-items: center; }
.assignee-chip {
  display: inline-block; padding: 3px 10px; border-radius: 10px;
  font-size: .78rem; font-weight: 500;
  background: var(--blue-light); color: var(--blue); border: 1px solid rgba(30,63,163,.2);
}
/* Order detail line — make unit cost and vendor pop out of the muted meta row. */
.line-cost {
  font-weight: 700; color: #166534; font-size: 14px;
  background: #dcfce7; border-radius: 8px; padding: 2px 10px;
}
.line-vendor {
  font-weight: 600; color: #334155; font-size: 14px;
  background: #f1f5f9; border: 1px solid #cbd5e1;
  border-radius: 8px; padding: 2px 10px;
}
.assignee-chip.group-chip {
  background: var(--blue); color: #fff; text-transform: uppercase; letter-spacing: .04em;
  font-family: var(--font-heading); font-weight: 700; font-size: .7rem;
  padding: 3px 10px; border: none;
}
.tc-type-pill {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
  background: #7c3aed; color: #fff;
}
.tc-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 14px !important; color: #4b5563; margin-bottom: 6px;
}
.tc-meta .ack-count { font-weight: 600; }
.tc-exp { font-size: 14px !important; font-weight: 600; }
.tc-exp-expired { color: var(--red); }
.tc-exp-soon { color: #d97706; }
.tc-actions { display: flex; gap: 6px; margin-top: 4px; }
.tc-btn { height: 34px; font-size: .85rem; }
.rte-toggle-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-weight: 500; font-size: .9rem; cursor: pointer;
}
.rte-toggle-label input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer;
}

/* ===== Feed Cards ===== */
.feed-card {
  background: var(--white); border-radius: 10px; padding: 14px;
  margin-bottom: 10px; position: relative;
  border-left: 4px solid var(--gray-300);
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .15s, transform .15s;
}
.feed-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); transform: translateY(-1px); }
.feed-card.priority-urgent-border { border-left-color: #dc2626; }
.feed-card.priority-high-border { border-left-color: #ea580c; }
.feed-card.priority-medium-border { border-left-color: #2563eb; }
.feed-card.priority-low-border { border-left-color: #9ca3af; }
.feed-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.feed-card-title { font-weight: 700; font-size: 1.2rem; }
.feed-card-source {
  font-size: .95rem; color: var(--gray-600);
  font-weight: 500; text-transform: uppercase; letter-spacing: .03em;
}
.feed-card-body { font-size: 1rem; color: var(--gray-700); margin-bottom: 8px; }
.feed-card-signal {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px;
  margin-left: 8px; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  background: #e5e7eb; color: #374151;
}
.feed-card-signal.signal-followup { background: #fef3c7; color: #92400e; }
.feed-card-contact {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 8px 0; padding: 6px 10px; border-radius: 8px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  font-size: .95rem;
}
.feed-card-contact .feed-contact-name { font-weight: 600; }
.feed-card-contact a { color: var(--blue); font-weight: 600; text-decoration: none; }
.feed-card-contact a:hover { text-decoration: underline; }
.da-detail-row a { color: var(--blue); font-weight: 600; text-decoration: none; }
.da-detail-row a:hover { text-decoration: underline; }
.return-reason-label { color: var(--orange); font-weight: 700; }
.feed-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.feed-card-time { font-size: .9rem; color: var(--gray-500); }
/* Dashboard board sits on dark slate with white cards — the default light
   gray timestamp washed out. Darken + slightly bolden for readability. */
.dash-page .feed-card-time { color: var(--gray-700); font-weight: 600; }
.feed-close-form {
  display: none; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--gray-200);
}
.feed-close-form.open { display: block; }
.feed-close-form textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--gray-300);
  border-radius: var(--radius); font-family: var(--font); font-size: .85rem;
  resize: vertical; min-height: 60px; margin-bottom: 8px;
}
.feed-close-form textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,63,163,.12);
}

/* ===== Assignment Toggle + User Checklist ===== */
.assign-toggle {
  display: flex; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--gray-300);
}
.assign-toggle-btn {
  flex: 1; padding: 10px 12px; border: none; background: var(--white);
  font-family: var(--font); font-size: .875rem; font-weight: 500;
  color: var(--gray-600); cursor: pointer; transition: all .15s;
  text-align: center; min-height: 44px;
}
.assign-toggle-btn + .assign-toggle-btn { border-left: 1px solid var(--gray-300); }
.assign-toggle-btn:hover { background: var(--gray-50); }
.assign-toggle-btn.active {
  background: var(--blue); color: var(--white);
}
.user-checklist {
  max-height: 240px; overflow-y: auto; border: 1px solid var(--gray-300);
  border-radius: var(--radius); background: var(--white);
}
.user-check-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer; transition: background .1s;
  border-bottom: 1px solid var(--gray-100); min-height: 44px;
}
.user-check-item:last-child { border-bottom: none; }
.user-check-item:hover { background: var(--gray-50); }
.user-check-cb {
  width: 18px; height: 18px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--blue);
}
.user-check-name { flex: 1; font-weight: 500; font-size: .9rem; }

/* ===== My Assignments (mobile-first) ===== */
.my-task-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200); margin-bottom: 10px;
  box-shadow: var(--shadow); overflow: hidden;
  cursor: pointer; transition: box-shadow .15s;
}
.my-task-card:hover { box-shadow: var(--shadow-md); }
.my-task-card-main { padding: 14px 16px; }
.my-task-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.my-task-card-title { font-weight: 700; font-size: 21px !important; }
.my-task-card-info {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 10px;
}
.my-task-card-expanded {
  display: none; padding: 0 16px 16px;
  border-top: 1px solid var(--gray-200);
}
.my-task-card.expanded .my-task-card-expanded { display: block; padding-top: 12px; }
.my-task-card .btn-ack {
  min-height: 44px; min-width: 44px;
  padding: 10px 20px; font-size: .95rem;
}
.my-task-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px;
}
.my-task-status-actions {
  display: inline-flex; gap: 6px;
}
.complete-note-form {
  width: 100%; margin-top: 8px;
}
.ack-badge-green {
  display: inline-block; padding: 4px 10px; border-radius: 4px;
  font-size: .8rem; font-weight: 600;
  background: #e6f9ee; color: var(--green); border: 1px solid #b2e2c8;
}
.note-list { margin-top: 12px; }
.note-item {
  padding: 8px 0; border-bottom: 1px solid var(--gray-100);
  font-size: 16px;
}
.note-item:last-child { border-bottom: none; }
.note-author { font-weight: 600; color: var(--blue); font-size: 14px !important; }
.note-time { font-size: 14px !important; color: #4b5563; }
.note-text { margin-top: 2px; color: #111827; font-size: 16px; }
.note-edited-badge {
  font-size: .7rem; color: var(--gray-500); font-style: italic;
  cursor: help;
}

/* ===== Hub Layout ===== */
.hub-layout {
  display: flex; min-height: calc(100vh - var(--nav-height));
}
.hub-sidebar {
  width: 240px; flex-shrink: 0; background: var(--white);
  border-right: 1px solid var(--gray-200); padding: 16px 0;
  overflow-y: auto;
}
.hub-sidebar-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 20px;
  height: 36px; box-sizing: border-box;
  cursor: pointer; font-size: .9rem; font-weight: 500; color: var(--gray-700);
  transition: all .12s; border-left: 3px solid transparent;
}
.hub-sidebar-item:hover { background: var(--gray-50); }
.hub-sidebar-item.active {
  background: var(--blue); color: var(--white); border-left-color: var(--yellow);
}
.hub-sidebar-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--blue); color: var(--white); border-radius: 10px;
  font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.hub-sidebar-item.active .hub-sidebar-badge { background: rgba(255,255,255,.25); }
.hub-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.hub-main { flex: 1; padding: 16px 20px; min-width: 0; }
.hub-topbar {
  display: flex; gap: 12px; align-items: center; margin-bottom: 20px;
}
.hub-search {
  flex: 1; padding: 10px 14px; border: 1px solid var(--gray-300);
  border-radius: var(--radius); font-family: var(--font); font-size: .9rem;
  background: var(--white);
}
.hub-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,63,163,.1); }
.hub-new-btn { flex-shrink: 0; }
.hub-fab {
  display: none; position: fixed; bottom: 24px; left: 24px; z-index: 3000;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--yellow); color: var(--blue); font-size: 1.8rem; font-weight: 700;
  box-shadow: var(--shadow-lg); cursor: pointer;
}

/* Hub card grid v2 */
.hub-grid-v2 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.hub-card-v2 {
  display: flex; background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--gray-200); box-shadow: var(--shadow);
  cursor: pointer; transition: transform .15s, box-shadow .15s;
  overflow: hidden;
}
.hub-card-v2:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hub-card-accent { width: 4px; flex-shrink: 0; }
.hub-card-body-v2 { flex: 1; padding: 14px 16px; position: relative; min-width: 0; }
.hub-card-title-v2 {
  font-family: var(--font-heading); font-weight: 700; font-size: 18px !important;
  margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hub-card-meta-v2 { font-size: .75rem; color: var(--gray-500); }
.hub-unread-dot {
  position: absolute; top: 10px; right: 10px; width: 10px; height: 10px;
  background: var(--blue); border-radius: 50%;
}
.hub-read-check {
  position: absolute; bottom: 10px; right: 10px;
  font-size: .75rem; color: var(--green); font-weight: 700;
}

/* Hub viewer v2 */
.hub-viewer-overlay { padding: 0; }
.hub-viewer-modal {
  max-width: 860px; width: 100%; max-height: 100vh;
  border-radius: 0; height: 100%; display: flex; flex-direction: column;
}
@media (min-width: 769px) {
  .hub-viewer-overlay { padding: 20px; }
  .hub-viewer-modal { border-radius: var(--radius-lg); height: auto; max-height: 88vh; }
}
.hub-v-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0;
}
.hub-v-header-left { display: flex; align-items: center; gap: 10px; }
.hub-v-header-right { display: flex; align-items: center; gap: 6px; }
.hub-v-cat-pill {
  padding: 3px 10px; border-radius: 12px; font-size: .7rem; font-weight: 700;
  color: var(--white); text-transform: uppercase; letter-spacing: .03em;
}
.hub-v-close {
  background: none; border: none; font-size: 1.5rem; color: var(--gray-500);
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.hub-v-close:hover { color: var(--gray-800); }
.hub-v-body {
  flex: 1; overflow-y: auto; padding: 28px 32px; max-width: 800px; margin: 0 auto; width: 100%;
}
.hub-v-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem;
  color: var(--gray-900); margin-bottom: 8px;
}
.hub-v-meta { font-size: .8rem; color: var(--gray-500); margin-bottom: 20px; }
.hub-v-content {
  font-family: var(--font); font-size: 1rem; line-height: 1.65; color: var(--gray-800);
}
.hub-v-content h1, .hub-v-content h2, .hub-v-content h3 {
  font-family: var(--font-heading); margin: 20px 0 8px;
}
.hub-v-content ul, .hub-v-content ol { margin: 8px 0; padding-left: 24px; }
.hub-v-content p { margin: 8px 0; }
.hub-v-content hr { border: none; border-top: 1px solid var(--gray-200); margin: 20px 0; }

.hub-v-ack-area { margin-top: 24px; }
.hub-v-mark-read-btn {
  width: 100%; padding: 14px; background: var(--blue); color: var(--white);
  border: none; border-radius: var(--radius); font-family: var(--font);
  font-weight: 600; font-size: 1rem; cursor: pointer; transition: background .15s;
}
.hub-v-mark-read-btn:hover { background: var(--blue-dark); }
.hub-v-acked-banner {
  width: 100%; padding: 14px; background: #e6f9ee; color: var(--green);
  border: 1px solid #b2e2c8; border-radius: var(--radius);
  font-weight: 600; font-size: .95rem; text-align: center;
}

/* Hub ack section */
.hub-ack-section {
  padding: 16px; background: var(--gray-50); border-radius: var(--radius);
  border: 1px solid var(--gray-200);
}
.hub-history-item { padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.hub-history-item:last-child { border-bottom: none; }
.hub-history-meta { font-size: .8rem; color: var(--gray-600); font-weight: 600; margin-bottom: 4px; }
.hub-history-preview { font-size: .85rem; color: var(--gray-500); }

/* Hub editor v2 */
.hub-editor-modal { display: flex; flex-direction: column; }
.hub-ed-top { padding: 16px 20px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.hub-ed-fields { display: flex; gap: 12px; margin-bottom: 10px; }
.hub-ed-title-input {
  flex: 2; padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius);
  font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem;
}
.hub-ed-cat-input {
  flex: 1; padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius);
  font-family: var(--font); font-size: .9rem;
}
.hub-ed-title-input:focus, .hub-ed-cat-input:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,63,163,.1);
}
.rte-toolbar {
  display: flex; gap: 2px; padding: 6px 8px; background: var(--gray-50);
  border: 1px solid var(--gray-300); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0; position: sticky; top: 0; z-index: 1;
}
.rte-toolbar button {
  background: var(--white); border: 1px solid var(--gray-300); border-radius: 4px;
  padding: 4px 10px; cursor: pointer; font-family: var(--font); font-size: .8rem;
  color: var(--gray-700); min-height: 32px; transition: all .1s;
}
.rte-toolbar button:hover { background: var(--gray-100); }
.rte-editor-v2 {
  flex: 1; border: 1px solid var(--gray-300); border-top: none;
  padding: 20px 24px; min-height: 400px; overflow-y: auto;
  font-family: var(--font); font-size: 1rem; line-height: 1.6;
  background: var(--white); outline: none;
}
.rte-editor-v2:focus { box-shadow: inset 0 0 0 2px rgba(30,63,163,.08); }
.rte-editor-v2:empty::before {
  content: attr(data-placeholder); color: var(--gray-400); pointer-events: none;
}
.rte-editor-v2 h1, .rte-editor-v2 h2 { font-family: var(--font-heading); margin: 12px 0 4px; }
.rte-editor-v2 ul, .rte-editor-v2 ol { padding-left: 20px; margin: 4px 0; }
.hub-ed-footer {
  padding: 12px 20px; border-top: 1px solid var(--gray-200);
  display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0;
}

/* Mobile Hub */
@media (max-width: 768px) {
  .hub-layout { flex-direction: column; }
  .hub-sidebar {
    width: 100%; border-right: none; border-bottom: 1px solid var(--gray-200);
    padding: 8px 12px; display: flex; overflow-x: auto; gap: 6px;
    flex-shrink: 0;
  }
  .hub-sidebar-item {
    padding: 6px 14px; border-radius: 20px; border-left: none;
    white-space: nowrap; font-size: .8rem;
    background: var(--gray-100); flex-shrink: 0;
  }
  .hub-sidebar-item.active { border-left: none; border-radius: 20px; }
  .hub-main { padding: 12px; }
  .hub-grid-v2 { grid-template-columns: 1fr; }
  .hub-new-btn { display: none; }
  .hub-fab { display: flex; align-items: center; justify-content: center; }
  .hub-ed-fields { flex-direction: column; }
  .hub-v-body { padding: 20px 16px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .hub-grid-v2 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Chat Widget ===== */
.chat-bubble {
  position: fixed; bottom: 24px; right: 24px; z-index: 3000;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--blue); color: var(--white);
  border: none; cursor: pointer; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.chat-bubble:hover { transform: scale(1.08); background: var(--blue-dark); }
.chat-bubble-active { background: var(--blue-dark); }

.chat-panel {
  position: fixed; bottom: 92px; right: 24px; z-index: 3000;
  width: 400px; height: 500px;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200);
  display: flex; flex-direction: column; overflow: hidden;
  transition: all .2s;
}
.chat-panel.hidden { display: none; }
.chat-panel-header {
  padding: 12px 16px; background: var(--blue); color: var(--white);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.chat-panel-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
}
.chat-panel-close {
  background: none; border: none; color: var(--white);
  font-size: 1.4rem; cursor: pointer; padding: 0 4px; line-height: 1;
  opacity: .8; transition: opacity .15s;
}
.chat-panel-close:hover { opacity: 1; }
.chat-notice {
  flex-shrink: 0; padding: 10px 14px;
  background: #fff8e1; border-bottom: 1px solid #f5e7a8;
  color: #6b5a08; font-size: .78rem; line-height: 1.4;
}
.chat-notice strong { color: #4a3c00; font-weight: 700; }
.chat-notice em { font-style: normal; font-weight: 600; color: var(--blue); }
.chat-panel-body {
  flex: 1; overflow-y: auto; display: flex;
  flex-direction: column;
}
.chat-placeholder {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px; color: var(--gray-600);
}
.chat-placeholder-icon { margin-bottom: 16px; opacity: .5; }
.chat-placeholder p { margin: 4px 0; font-size: .9rem; }

.chat-messages {
  flex: 1; overflow-y: auto; padding: 12px; display: flex;
  flex-direction: column; gap: 8px; background: var(--bg-2, #f7f7f9);
}
.chat-msg { display: flex; }
.chat-msg-user { justify-content: flex-end; }
.chat-msg-agent { justify-content: flex-start; }
.chat-msg-bubble {
  max-width: 80%; padding: 8px 12px; border-radius: 14px;
  font-size: .92rem; line-height: 1.35; white-space: pre-wrap; word-wrap: break-word;
}
.chat-msg-user .chat-msg-bubble {
  background: var(--blue); color: var(--white); border-bottom-right-radius: 4px;
}
.chat-msg-agent .chat-msg-bubble {
  background: var(--white); color: var(--gray-900);
  border: 1px solid var(--gray-200); border-bottom-left-radius: 4px;
}
.chat-input-row {
  display: flex; gap: 8px; padding: 10px;
  border-top: 1px solid var(--gray-200); background: var(--white); flex-shrink: 0;
}
.chat-input {
  flex: 1; padding: 8px 12px; border: 1px solid var(--gray-300);
  border-radius: 18px; font-size: .95rem; outline: none;
}
.chat-input:focus { border-color: var(--blue); }
.chat-input:disabled { background: var(--gray-100); }
.chat-send-btn {
  padding: 8px 16px; background: var(--blue); color: var(--white);
  border: none; border-radius: 18px; cursor: pointer; font-weight: 600;
  font-size: .9rem; transition: background .15s;
}
.chat-send-btn:hover:not(:disabled) { background: var(--blue-dark); }
.chat-send-btn:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 768px) {
  .chat-panel {
    width: calc(100vw - 16px); right: 8px; bottom: 88px;
    height: 60vh; max-height: 500px;
  }
  .chat-bubble { bottom: 16px; right: 16px; }
}

/* ===== Admin ===== */
.admin-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 2px solid var(--gray-200); padding-bottom: 0;
}
.admin-tab {
  padding: 8px 16px; cursor: pointer; font-weight: 700;
  font-family: var(--font-heading); font-size: 15px !important; color: var(--gray-600);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all .15s; background: none; border-top: none;
  border-left: none; border-right: none; font-family: var(--font);
}
.admin-tab:hover { color: var(--gray-800); }
.admin-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.user-table { width: 100%; border-collapse: collapse; }
.user-table th, .user-table td {
  padding: 10px 14px; text-align: left; font-size: 16px !important; color: #111827;
  border-bottom: 1px solid var(--gray-100); max-height: 44px;
}
.user-table th {
  font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 14px !important;
  text-transform: uppercase; letter-spacing: .5px;
  background: var(--blue);
}
.user-table th:first-child { border-radius: 8px 0 0 0; }
.user-table th:last-child { border-radius: 0 8px 0 0; }
.user-table tbody tr:nth-child(even) td { background: #f9fafb; }
.user-table tbody tr:hover td { background: #f0f4ff; }

/* Action cells inside .user-table — desktop right-aligns and keeps
   buttons inline; the mobile media query below lets them wrap. */
.user-table th.cell-actions, .user-table td.cell-actions {
  text-align: right;
  white-space: nowrap;
}
.user-table td.cell-actions .btn { margin-left: 4px; }

/* Commission status badges: paid-awaiting (financing not yet collected)
   is amber; payroll_paid is darker green than 'paid'; cancelled/denied
   is muted red so the table reads as "blocked, do not chase". */
.status-paid-awaiting {
  background: #fef3c7 !important;
  color: #92400e !important;
}
.status-payroll-paid {
  background: #166534 !important;
  color: #fff !important;
}
.status-cancelled {
  background: #fee2e2 !important;
  color: #991b1b !important;
}
.role-badge {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
  background: var(--blue); color: #fff;
}
.scope-chip {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  background: #2e7d32; color: #fff;
  margin-right: 3px;
}
.scope-checkboxes {
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* Task creation modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  z-index: 5000; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 520px;
  max-height: 90vh; display: flex; flex-direction: column;
}
.modal-header {
  padding: 16px 20px; border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal-header h2 { margin: 0; }
.modal-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: #f3f4f6; color: #374151; font-size: 18px; font-weight: 300;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; transition: background .15s; flex-shrink: 0;
}
.modal-close:hover { background: #e5e7eb; }
.modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-footer {
  padding: 12px 20px; border-top: 1px solid var(--gray-200);
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
}
.modal-footer:empty { display: none; }

/* Sale Detail modal footer: Deny/Cancel/Delete group left, Done + the
   workflow stage buttons group right, so a long row of stage buttons at
   1440px doesn't blow past the modal edge. */
.sale-detail-footer { row-gap: 8px; }
.sale-footer-secondary {
  margin-right: auto; display: flex; gap: 6px; flex-wrap: wrap;
}
.sale-footer-primary { display: flex; gap: 8px; flex-wrap: wrap; }

/* Modal header layout */
.modal-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.modal-header-left h2 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.modal-display-id {
  font-family: monospace; font-size: .72rem; color: var(--gray-500);
  background: var(--gray-100); padding: 2px 8px; border-radius: 4px;
  white-space: nowrap;
}

/* Action menu button */
.modal-action-btn {
  background: var(--gray-100); border: 1px solid var(--gray-200);
  border-radius: var(--radius); cursor: pointer; padding: 4px 10px;
  font-size: 1.2rem; line-height: 1; color: var(--gray-600);
  transition: background .15s;
}
.modal-action-btn:hover { background: var(--gray-200); }

/* Action dropdown */
.modal-action-dropdown {
  position: absolute; top: 100%; right: 0; min-width: 220px;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  z-index: 100; margin-top: 4px;
}
.modal-action-dropdown.hidden { display: none; }
.modal-action-item {
  padding: 10px 14px; cursor: pointer; font-size: .875rem;
  border-bottom: 1px solid var(--gray-100); transition: background .1s;
}
.modal-action-item:last-child { border-bottom: none; }
.modal-action-item:hover { background: var(--gray-50); }
.modal-action-expand { padding: 10px 0 4px; }
.modal-action-expand.hidden { display: none; }

/* Make header-right position:relative for dropdown */
.modal-header-right { position: relative; }

/* ===== Link Pill Bar ===== */
.link-pill-bar { padding: 10px 20px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.link-pill-bar.hidden { display: none; }
.link-pills { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.link-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 12px;
  border: none; color: #fff;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: opacity .15s;
}
.link-pill:hover { opacity: .85; }
.link-pill.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
.link-pill-id { font-family: monospace; font-size: .75rem; color: #fff; }
.link-pill-status { font-size: .65rem; text-transform: uppercase; opacity: .85; color: #fff; margin-left: 2px; }

/* Color dot indicator (used in linked section headers and notes) */
.link-pill-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* ===== Linked Sections ===== */
.linked-section {
  border-left: 4px solid var(--gray-300); padding: 12px 16px;
  margin-bottom: 12px; border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--white);
}
.linked-section-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius);
  font-size: .8rem; font-weight: 600; margin-bottom: 8px;
}
.linked-section-id { font-family: monospace; font-size: .72rem; }
.linked-section-body { font-size: .85rem; }

/* Link management */
.link-manage-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 6px 0; border-bottom: 1px solid var(--gray-100);
}
.link-manage-row:last-child { border-bottom: none; }

/* ===== Order Quick Filter Pills ===== */
.order-quick-filters {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 12px; padding: 0;
}
.order-filter-pill {
  padding: 5px 14px; border-radius: 14px; border: 2px solid transparent;
  font-family: var(--font-heading); font-size: 15px !important; font-weight: 700;
  cursor: pointer; transition: all 150ms ease; height: 34px;
  display: inline-flex; align-items: center;
  box-shadow: none;
}
.order-filter-pill:hover { opacity: .95; }

/* ===== Empty / status states ===== */
.empty-state {
  text-align: center; padding: 24px 16px; color: #4b5563;
}
.empty-state-icon { font-size: 2rem; margin-bottom: 8px; opacity: .4; }
.empty-state p { font-size: 15px; color: #4b5563; margin: 0; }

/* ===== DA Cards & Timeline ===== */
.da-section-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem;
  color: var(--red); margin-bottom: 12px; text-transform: uppercase;
  letter-spacing: .03em;
}
.da-action-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid #fecaca; border-left: 4px solid var(--red);
  padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.da-action-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.da-action-title { font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.da-action-issuer { font-size: .85rem; color: var(--gray-600); margin-bottom: 8px; }
.da-action-desc {
  font-size: .9rem; color: var(--gray-700); margin-bottom: 12px;
  padding: 10px; background: var(--gray-50); border-radius: var(--radius);
}
.da-subject-info {
  padding: 10px 12px; background: var(--gray-50); border-radius: var(--radius);
  margin-bottom: 10px; font-size: .9rem;
}
.da-emp-ack-section {
  margin: 10px 0; padding: 12px; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: var(--radius); border-left: 3px solid var(--green);
}
.da-emp-ack-label {
  font-weight: 600; font-size: .8rem; color: var(--green); text-transform: uppercase;
  margin-bottom: 6px;
}
.sig-line-inline {
  font-size: .8rem; color: var(--gray-600); font-style: italic; margin-bottom: 6px;
}
.da-emp-ack-text {
  font-size: .9rem; color: var(--gray-800); white-space: pre-wrap; line-height: 1.5;
}
.da-ack-form { margin-top: 8px; }
.da-ack-textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--gray-300);
  border-radius: var(--radius); font-family: var(--font); font-size: .9rem;
  resize: vertical; min-height: 80px; margin-bottom: 8px;
}
.da-ack-textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,63,163,.12);
}
.da-ack-result { margin-top: 8px; }

/* DA Detail Modal */
.da-detail-info {
  background: var(--gray-50); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 0;
}
/* Generic detail row used in applicant, ticket, stock-request, sale, etc.
   modals. Mirrors .da-detail-row but uses the .da-info-row class name that
   has been showing up across the codebase without styling. */
.da-info-row {
  display: grid; grid-template-columns: 140px 1fr; column-gap: 16px;
  padding: 6px 0; align-items: baseline; font-size: 14px;
  border-bottom: 1px solid var(--gray-200);
}
.da-info-row:last-child { border-bottom: none; }
.da-info-label {
  font-family: var(--font-heading); font-weight: 700; color: #4b5563;
  font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
}
.da-info-row > span:nth-child(2) { color: #111827; word-break: break-word; }
@media (max-width: 540px) {
  .da-info-row { grid-template-columns: 1fr; gap: 2px; }
  .da-info-label { font-size: 11px; }
}
.da-detail-row {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 0; font-size: 15px; color: #111827;
  border-bottom: 1px solid var(--gray-200);
  min-height: 40px;
}
.da-detail-row:last-child { border-bottom: none; }
.da-detail-label {
  font-family: var(--font-heading); font-weight: 700; color: #4b5563;
  width: 130px; min-width: 130px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .8px; flex-shrink: 0;
}
.da-detail-value {
  font-weight: 500; color: #111827; font-size: 15px;
  flex: 1; min-width: 0; word-break: break-word;
}
.da-detail-desc {
  font-size: 15px; color: #111827; margin: 12px 0;
  padding: 12px; background: var(--gray-50); border-radius: var(--radius);
  white-space: pre-wrap; line-height: 1.55;
}

/* ── Ticket detail modal ──────────────────────────────────────────
   Cohesive styling for the ticket detail view (openTicketDetail).
   Replaces the scattered inline styles the modal used to carry, and
   gives a clean desktop + mobile layout. */
.ticket-detail-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.ticket-detail-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; font-size: 1.15rem; color: #111827; letter-spacing: .5px;
}
.ticket-detail-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ticket-detail-h {
  margin: 16px 0 6px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px; color: var(--gray-600);
  font-family: var(--font-heading);
}
.ticket-detail-title { font-size: 1.05rem; font-weight: 600; color: #111827; line-height: 1.4; }
.ticket-detail-desc { white-space: pre-wrap; line-height: 1.55; color: #111827; }

/* Notes list */
.ticket-notes { display: flex; flex-direction: column; gap: 8px; }
.ticket-note {
  padding: 10px 12px; border-radius: var(--radius);
  background: var(--gray-50); border: 1px solid var(--gray-200);
}
.ticket-note.system { background: #f8fafc; border-style: dashed; }
.ticket-note-meta { font-size: .78rem; color: var(--gray-600); margin-bottom: 3px; }
.ticket-note-body { white-space: pre-wrap; line-height: 1.5; color: #111827; }
.ticket-note.system .ticket-note-body { font-style: italic; color: var(--gray-600); }

/* Management controls (assign / follow-up) + add-note.
   Bare inputs here aren't .form-group, so mirror that bar styling. */
.ticket-mgmt {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px;
  padding: 12px; background: var(--gray-50);
  border: 1px solid var(--gray-200); border-radius: var(--radius);
}
.ticket-mgmt-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.ticket-mgmt-field > label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--gray-600);
}
.ticket-mgmt-field select,
.ticket-mgmt-field input,
.ticket-addnote textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #d1d5db;
  border-radius: 8px; font-family: var(--font); font-size: .875rem;
  background: var(--white); transition: border-color .15s, box-shadow .15s;
}
.ticket-mgmt-field select, .ticket-mgmt-field input { height: 40px; }
.ticket-mgmt-field select:focus,
.ticket-mgmt-field input:focus,
.ticket-addnote textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,63,163,.08);
}
.ticket-addnote { margin-top: 14px; }
.ticket-addnote textarea { resize: vertical; min-height: 56px; }
.ticket-addnote .btn { margin-top: 8px; }

@media (max-width: 540px) {
  .ticket-mgmt { flex-direction: column; gap: 10px; }
  .ticket-mgmt-field { flex: 1 1 auto; }
  .ticket-detail-id { font-size: 1.05rem; }
  .ticket-mgmt-field select, .ticket-mgmt-field input { height: 44px; }
}

/* Inline edit for order fields */
.inline-edit-btn {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  color: var(--gray-400); font-size: 13px; opacity: 0; transition: opacity .15s;
  flex-shrink: 0; line-height: 1;
}
.da-detail-row:hover .inline-edit-btn,
.da-info-row:hover .inline-edit-btn { opacity: 1; }
.inline-edit-input {
  font-family: var(--font); font-size: 14px; font-weight: 500; color: #111827;
  padding: 4px 8px; border: 1px solid var(--blue); border-radius: 4px;
  background: #fff; outline: none; flex: 1; min-width: 0;
  height: 32px;
}
.inline-edit-actions { display: flex; gap: 4px; flex-shrink: 0; }
.inline-edit-actions button {
  padding: 4px 10px; font-size: 12px; border-radius: 4px; border: none;
  cursor: pointer; font-family: var(--font-heading); font-weight: 700;
  height: 28px;
}
.inline-edit-save { background: var(--blue); color: #fff; }
.inline-edit-cancel { background: var(--gray-200); color: var(--gray-700); }
@media (max-width: 768px) {
  .da-detail-label { width: 100px; min-width: 100px; font-size: 11px; }
  .da-detail-row { padding: 5px 0; }
}

/* Inventory module — card-style list w/ sticky filter bar. Designed for
   touch: large tap targets, search input lives at the top and sticks on
   scroll so users don't scroll up to retype. */
.inv-filter-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 0; margin-bottom: 8px;
  position: sticky; top: 0; z-index: 4;
  background: var(--bg, #fff);
  border-bottom: 1px solid var(--gray-200);
}
.inv-search-input {
  flex: 1 1 240px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--gray-300); border-radius: 6px;
  font-size: 15px; background: #fff;
}
.inv-filter-select {
  padding: 9px 10px; border: 1px solid var(--gray-300); border-radius: 6px;
  background: #fff; font-size: 14px; min-width: 140px;
}
.inv-filter-toggle {
  display: flex; align-items: center; gap: 6px; font-size: 14px;
  padding: 6px 4px; user-select: none; white-space: nowrap;
}
/* Bulk "Update Stock" tab */
.bulk-stock-wrap { overflow-x: auto; }
.bulk-stock-table { width: 100%; border-collapse: collapse; }
.bulk-stock-table thead th {
  text-align: left; font-size: 12px; font-weight: 700; color: var(--gray-600, #4b5563);
  padding: 8px 10px; border-bottom: 2px solid var(--gray-200); white-space: nowrap;
}
.bulk-stock-table tbody td {
  padding: 8px 10px; border-bottom: 1px solid var(--gray-100); vertical-align: middle;
}
.bulk-stock-table tr.is-dirty td { background: #fffbeb; }
.bulk-stock-name { min-width: 160px; }
.bulk-stock-title { font-weight: 600; }
.bulk-stock-current { font-variant-numeric: tabular-nums; color: var(--gray-500); white-space: nowrap; }
.bulk-stock-input {
  width: 84px; padding: 8px 10px; border: 1px solid var(--gray-300);
  border-radius: 6px; font-size: 15px; background: #fff;
}
.bulk-stock-note {
  width: 100%; min-width: 140px; padding: 8px 10px; border: 1px solid var(--gray-300);
  border-radius: 6px; font-size: 14px; background: #fff;
}
.bulk-stock-savebar {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 12px 0; margin-top: 8px;
  background: var(--bg, #fff); border-top: 1px solid var(--gray-200);
}
.inv-section-title {
  margin: 12px 0 8px; font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--gray-500);
}
.inv-row {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 8px;
}
.inv-row-top {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
}
.inv-row-name { flex: 1 1 auto; min-width: 0; }
.inv-row-title { font-weight: 700; font-size: 15px; }
.inv-row-meta { margin-top: 2px; }
.inv-row-stock {
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 12px; border-radius: 6px; background: var(--gray-100);
  min-width: 64px; flex-shrink: 0;
}
.inv-row-stock-num { font-weight: 700; font-size: 18px; line-height: 1.1; }
.inv-row-stock-label { font-size: 10px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.6px; }
.inv-row-stock.is-low { background: #fee2e2; }
.inv-row-stock.is-low .inv-row-stock-num { color: var(--red); }
.inv-row-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--gray-200); flex-shrink: 0;
}
.inv-thumb-sm {
  width: 32px; height: 32px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--gray-200); vertical-align: middle;
}

/* HWI board cards: office staff work this screen all day — readable sizes,
   not the app-wide .text-sm smallprint. */
.hwi-card { font-size: 16.5px; }
.hwi-card .text-sm { font-size: 15.5px; }
.hwi-card strong { font-size: 16.5px; }
.hwi-card .btn.btn-sm { font-size: 14.5px; }

/* HWI intake photo thumbnails (Google Drive links) on expanded board cards. */
.hwi-photo-thumb {
  width: 88px; height: 88px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--gray-200); display: block;
}

/* Stock-request line action cell — wraps on narrow screens so buttons
   never horizontal-scroll. Inline qty input gets its own compact width. */
.stk-line-actions {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  align-items: center;
}
.stk-line-actions .btn { flex: 0 0 auto; }
.stk-line-qty {
  width: 64px; padding: 4px 6px; text-align: center;
  border: 1px solid var(--gray-300); border-radius: 4px;
  font-size: 14px;
}
.stk-from-stock { background: rgba(234, 88, 12, 0.04); }
.btn-warn {
  background: #ea580c; color: #fff; border: 1px solid #ea580c;
}
.btn-warn:hover:not(:disabled) { background: #c2410c; border-color: #c2410c; }

@media (max-width: 540px) {
  .stk-line-actions { justify-content: flex-start; }
  .stk-line-actions .btn { flex: 1 1 auto; min-width: 100px; }
  .stk-line-qty { width: 80px; }
}

/* From Stock / To Order split chooser — each option is a self-contained
   labeled box so the label never separates from its input on wrap, and
   the box that carries quantity is tinted (orange = pulled from stock,
   blue = going to a vendor order) so the active selection is obvious. */
.stk-split-row { display: flex; gap: 8px; flex-wrap: wrap; }
.stk-split-field {
  display: flex; flex-direction: column; gap: 2px; cursor: text;
  border: 2px solid var(--gray-200); border-radius: 8px;
  padding: 4px 8px; min-width: 96px; background: var(--white);
}
.stk-split-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--gray-500);
}
.stk-split-field input {
  width: 100%; border: none; background: transparent; text-align: center;
  font-size: 16px; font-weight: 700; padding: 2px 0;
}
.stk-split-field input:focus { outline: none; }
.stk-split-from.is-active { border-color: #ea580c; background: #fff7ed; }
.stk-split-from.is-active .stk-split-label { color: #9a3412; }
.stk-split-to.is-active { border-color: #1d4ed8; background: #eff6ff; }
.stk-split-to.is-active .stk-split-label { color: #1e3a8a; }
@media (max-width: 540px) {
  .stk-split-row { width: 100%; }
  .stk-split-field { flex: 1 1 0; min-width: 0; }
}
.inv-row-notes { margin-top: 8px; }
.inv-row-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px;
}
.inv-row-actions .btn { flex: 0 0 auto; }
@media (max-width: 540px) {
  .inv-row-actions .btn {
    flex: 1 1 calc(50% - 6px); padding: 10px 12px; font-size: 14px;
  }
  .inv-search-input { font-size: 16px; /* prevents iOS zoom on focus */ }
}

/* DA Timeline */
.da-timeline { border-left: 2px solid var(--gray-300); margin-left: 8px; }
.da-timeline-item {
  padding: 12px 16px; margin-left: 8px; position: relative;
  border-bottom: 1px solid var(--gray-100);
}
.da-timeline-item:last-child { border-bottom: none; }
.da-timeline-item::before {
  content: ''; position: absolute; left: -14px; top: 16px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--gray-400); background: var(--white);
}
.da-timeline-item.completed::before {
  background: var(--green); border-color: var(--green);
}
.da-timeline-item.pending::before {
  background: var(--yellow); border-color: var(--yellow-dark);
}
.da-timeline-step-label {
  font-weight: 600; font-size: .9rem; margin-bottom: 2px;
}
.da-timeline-assigned {
  font-size: .8rem; color: var(--gray-500);
}
.da-timeline-completed {
  font-size: .8rem; color: var(--green); font-weight: 500; margin-top: 4px;
}
.da-timeline-note {
  font-size: .875rem; color: var(--gray-700); margin-top: 4px;
  padding: 8px 10px; background: var(--gray-50); border-radius: var(--radius);
}
.da-timeline-pending-label {
  font-size: .8rem; color: var(--orange); font-weight: 500; margin-top: 4px;
}

/* ===== Reports ===== */
.report-filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 16px; padding: 12px 14px;
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--gray-200);
}
.rpt-label { font-size: .8rem; font-weight: 600; color: var(--gray-600); }
.rpt-date {
  padding: 6px 10px; border: 1px solid var(--gray-300); border-radius: var(--radius);
  font-family: var(--font); font-size: .85rem;
}
.rpt-search { min-width: 220px; }
#recall-tab-count { font-weight: 600; color: var(--orange); }
.assign-pill {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  background: var(--gray-100); color: var(--gray-700);
  border: 1px solid var(--gray-300);
}
.assign-pill.assign-due-soon { background: #fff4e6; color: #e8590c; border-color: #ffd8a8; }
.assign-pill.assign-overdue { background: #fef2f2; color: #e03131; border-color: #ffc9c9; }
.report-summary-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.report-summary-card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 16px; text-align: center;
  box-shadow: var(--shadow);
}
.rpt-card-value { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; }
.rpt-card-label { font-size: .8rem; color: var(--gray-600); font-weight: 500; text-transform: uppercase; margin-top: 2px; }

.rpt-progress {
  width: 80px; height: 8px; background: var(--gray-200);
  border-radius: 4px; display: inline-block; vertical-align: middle;
  margin-right: 6px; overflow: hidden;
}
.rpt-progress-fill {
  height: 100%; background: var(--green); border-radius: 4px;
  transition: width .3s;
}

/* ===== Display IDs ===== */
.display-id { font-size: .75rem; color: var(--gray-500); font-family: monospace; white-space: nowrap; }

/* ===== Print Modal ===== */
.print-modal-overlay {
  padding: 0; z-index: 5500;
  display: flex; align-items: center; justify-content: center;
}
.print-modal {
  width: 95vw; height: 92vh; max-width: 95vw; max-height: 92vh;
  border-radius: var(--radius-lg); display: flex; flex-direction: column;
  overflow: hidden;
}
.print-modal-header {
  padding: 8px 16px; border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; background: var(--gray-50);
}
.print-modal-body {
  flex: 1; overflow: hidden; background: var(--white); padding: 0;
}
.archive-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 4000; display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.archive-modal {
  width: min(760px, 95vw); height: auto; max-height: 85vh;
  border-radius: var(--radius-lg); display: flex; flex-direction: column;
  overflow: hidden; z-index: 4001; background: var(--white);
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
@media (max-width: 768px) {
  .archive-modal { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }
}

/* Archive toolbar — search + range select + status line, shared across tabs */
.arc-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 16px 8px;
}
.arc-search {
  flex: 1 1 200px; min-width: 0; padding: 9px 12px; border: 1px solid #d1d5db;
  border-radius: 8px; font-size: .875rem;
}
.arc-range {
  flex: 0 0 auto; padding: 9px 10px; border: 1px solid #d1d5db;
  border-radius: 8px; font-size: .82rem; background: var(--white); color: inherit;
}
.arc-status {
  flex: 0 0 100%; font-size: .74rem; color: var(--gray-500);
}

/* Archive day group headers */
.arc-day {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--gray-500); margin: 16px 0 6px;
}
.arc-day:first-child { margin-top: 0; }

/* Archive cards */
.arc-card {
  display: flex; background: var(--white); border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  margin-bottom: 6px; cursor: pointer; overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.arc-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); transform: translateY(-1px); }
.arc-accent { width: 4px; flex-shrink: 0; }
.arc-body { flex: 1; display: flex; gap: 10px; padding: 8px 12px; min-width: 0; }
.arc-time-col {
  flex: 0 0 auto; width: 54px; font-weight: 700; font-size: .85rem;
  color: var(--gray-700); padding-top: 1px;
}
.arc-main { flex: 1; min-width: 0; }
.arc-line1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.arc-title { font-weight: 600; font-size: .88rem; color: #212529; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.arc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.arc-chip {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: .68rem; font-weight: 500; background: var(--gray-100); color: var(--gray-700);
}
.arc-ttc {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: .68rem; font-weight: 600; background: #dcfce7; color: #166534;
}
.arc-note {
  margin-top: 5px; font-size: .76rem; color: var(--gray-500);
  line-height: 1.4; padding: 5px 8px; background: var(--gray-50);
  border-radius: 6px;
}
.print-header { text-align: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 3px solid var(--blue); }
.print-company { font-size: .85rem; color: var(--gray-600); }
.print-doc-id { font-size: .9rem; color: var(--gray-500); margin-top: 4px; font-family: monospace; }

.print-frame {
  width: 100%; height: 100%; border: none; display: block;
}
@media print {
  body > *:not(.print-modal-overlay) { display: none !important; }
  .print-modal-overlay { position: static !important; padding: 0 !important; background: none !important; }
  .print-modal { max-width: none !important; max-height: none !important; height: auto !important; box-shadow: none !important; border: none !important; }
  .print-modal-header.no-print { display: none !important; }
  .print-modal-body { overflow: visible !important; padding: 0 !important; }

  /* Print-only takeover for the Commissions report. When the Print
     Report button adds .printing-commissions to body, hide everything
     except the .commissions-print-region so the print preview shows
     just the per-person sections without app chrome. */
  body.printing-commissions > * { display: none !important; }
  body.printing-commissions #app,
  body.printing-commissions #app *,
  body.printing-commissions .commissions-print-region,
  body.printing-commissions .commissions-print-region * {
    display: revert !important;
  }
  body.printing-commissions #app > *:not(:has(.commissions-print-region)) {
    display: none !important;
  }
  body.printing-commissions .no-print { display: none !important; }
  body.printing-commissions .commissions-print-region {
    color: #000 !important;
    background: #fff !important;
  }
  /* Strip the centered max-width + padding the app/page layout imposes so
     the printed report uses the full paper width instead of a narrow
     centered column. */
  body.printing-commissions #app,
  body.printing-commissions .page {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.printing-commissions .commissions-print-region,
  body.printing-commissions .commissions-print-region .report-table-wrap,
  body.printing-commissions .commissions-print-region table {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  /* 11-column report is dense — shrink type so every column fits the
     page width without clipping. */
  body.printing-commissions .commissions-report-table th,
  body.printing-commissions .commissions-report-table td {
    font-size: 10px !important;
    padding: 4px 6px !important;
  }
  body.printing-commissions .commissions-person-section {
    page-break-inside: avoid;
  }
  body.printing-commissions .status-badge {
    border: 1px solid #999;
    background: #fff !important;
    color: #000 !important;
  }
  @page { margin: 0.4in; }
}

/* Commissions report — per-person grouping */
.commissions-print-region { padding: 8px 0; }
.commissions-print-header {
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gray-300);
}
.commissions-person-section {
  margin-bottom: 18px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.commissions-person-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.commissions-person-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
}
.commissions-person-totals {
  color: var(--gray-700);
}
.commissions-subtotal-row td {
  background: var(--gray-50) !important;
  border-top: 2px solid var(--gray-300);
}
.commissions-grand-totals {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--gray-100);
  border-radius: var(--radius);
  font-size: 1rem;
}

/* Each person renders its own table, so without a fixed layout every
   section sizes its columns to its own content and the report looks
   ragged. Pin identical column widths across all sections via fixed
   layout + percentage widths, right-align the money columns, and let
   long cells wrap instead of pushing columns around. Header order:
   Date, WO, Sale Type, Amount, Commission, Install, Status, Reviewed,
   Collected, Payroll Check, Notes (11 cols). */
.commissions-report-table { table-layout: fixed; width: 100%; }
.commissions-report-table th,
.commissions-report-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}
.commissions-report-table th:nth-child(1)  { width: 7%; }   /* Date */
.commissions-report-table th:nth-child(2)  { width: 8%; }   /* WO */
.commissions-report-table th:nth-child(3)  { width: 13%; }  /* Sale Type */
.commissions-report-table th:nth-child(4)  { width: 7%; }   /* Amount */
.commissions-report-table th:nth-child(5)  { width: 8%; }   /* Commission */
.commissions-report-table th:nth-child(6)  { width: 8%; }   /* Install */
.commissions-report-table th:nth-child(7)  { width: 13%; }  /* Status */
.commissions-report-table th:nth-child(8)  { width: 10%; }  /* Reviewed */
.commissions-report-table th:nth-child(9)  { width: 10%; }  /* Collected */
.commissions-report-table th:nth-child(10) { width: 8%; }   /* Payroll Check */
.commissions-report-table th:nth-child(11) { width: 8%; }   /* Notes */
.commissions-report-table th:nth-child(4),
.commissions-report-table td:nth-child(4),
.commissions-report-table th:nth-child(5),
.commissions-report-table td:nth-child(5) { text-align: right; }

/* Screen-only sizing for the commissions report cells. Kept out of print so
   body.printing-commissions keeps the percentage-column layout above. */
@media screen {
  /* Status column needs room for "Mark Reviewed" + "Mark Collected" to sit
     on one line before "Awaiting Financing" drops to the next; min-width
     wins over the nth-child(7) percentage above and the table
     (table-layout:fixed, width:100%) grows to accommodate it. On desktop
     the person section's .report-table-wrap scrolls horizontally if the
     columns exceed the page width; on mobile the table switches to auto
     layout inside a scrolling wrap. */
  .commissions-report-table .comm-status-col { min-width: 220px; }

  /* Amount / Commission / subtotal cells: the base rule's
     overflow-wrap:anywhere was splitting "$26625.00" mid-number onto a
     second line. */
  .commissions-report-table .comm-num-cell { white-space: nowrap; }

  /* Notes: let words wrap normally instead of mid-word ("replaceme/nt"). */
  .commissions-report-table th:nth-child(11), .commissions-report-table td:nth-child(11) {
    min-width: 200px; overflow-wrap: normal; word-break: normal;
  }

  /* Who / when stack used by Reviewed, Collected (commissions report) and
     Completed By, Processed By (job completions): name on line 1,
     timestamp muted on line 2, neither ever wraps. */
  .comm-who { white-space: nowrap; }
  .comm-when { white-space: nowrap; font-size: .85em; margin-top: 1px; }
  .commissions-report-table .comm-who { overflow: hidden; text-overflow: ellipsis; }
}
.comm-stage-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.comm-stage-actions .btn { padding: 3px 8px; font-size: .72rem; line-height: 1.2; white-space: nowrap; }

/* Desktop screen layout for the commissions report: explicit pixel widths
   (fixed layout) so Date never wraps, the Status column fits "Mark Reviewed"
   + "Mark Collected" on one line, and Notes (the only unsized column) takes
   whatever is left. Kept out of print and mobile, which keep the percentage
   scheme above. If the viewport is narrower than the sum of the columns
   the section scrolls horizontally instead of clipping. */
@media screen and (min-width: 769px) {
  .commissions-person-section .report-table-wrap { overflow-x: auto; }
  .commissions-report-table { min-width: 1350px; }
  .commissions-report-table th,
  .commissions-report-table td { padding: 10px 8px; }
  .commissions-report-table td { font-size: 14px !important; }
  .commissions-report-table th:nth-child(1)  { width: 96px; }   /* Date */
  .commissions-report-table th:nth-child(2)  { width: 88px; }   /* WO */
  .commissions-report-table th:nth-child(3)  { width: 104px; }  /* Sale Type */
  .commissions-report-table th:nth-child(4)  { width: 84px; }   /* Amount */
  .commissions-report-table th:nth-child(5)  { width: 92px; }   /* Commission */
  .commissions-report-table th:nth-child(6)  { width: 88px; }   /* Install */
  .commissions-report-table th:nth-child(7)  { width: 226px; }  /* Status */
  .commissions-report-table th:nth-child(8)  { width: 128px; }  /* Reviewed */
  .commissions-report-table th:nth-child(9)  { width: 128px; }  /* Collected */
  .commissions-report-table th:nth-child(10) { width: 96px; }   /* Payroll Check */
  .commissions-report-table th:nth-child(11) { width: auto; }   /* Notes */
  .commissions-report-table td:nth-child(1),
  .commissions-report-table td:nth-child(6),
  .commissions-report-table td:nth-child(10) { white-space: nowrap; }
  .commissions-report-table .comm-status-col { min-width: 0; }
  .commissions-report-table th:nth-child(11),
  .commissions-report-table td:nth-child(11) { min-width: 220px; }
}

/* ===== Mobile Home Screen ===== */
.home-screen {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; padding: 40px 16px 24px; background: var(--gray-50);
  width: 100%; max-width: 100vw; overflow-x: hidden; box-sizing: border-box;
  position: relative;
}
.home-logo { text-align: center; margin-bottom: 28px; }
.home-brand-mark {
  width: 64px; height: 64px; background: var(--blue); color: var(--yellow);
  font-family: var(--font-heading); font-weight: 700; font-size: 2.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px; margin-bottom: 12px;
}
.home-brand-text {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem;
  color: var(--blue);
}
.home-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  width: 100%; max-width: 400px; padding: 0; box-sizing: border-box;
}
.home-tile {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); border: 1px solid var(--gray-200);
  padding: 20px 12px; text-align: center; cursor: pointer;
  min-height: 120px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s, box-shadow .15s; position: relative;
  box-sizing: border-box; max-width: 100%;
}
.home-tile:active { transform: scale(.97); }
.home-tile:hover { box-shadow: var(--shadow-md); }
.home-tile-icon { color: var(--blue); }
.home-tile-label {
  font-family: var(--font-heading); font-weight: 700; font-size: .95rem;
  color: var(--gray-800);
}
.home-tile-badge {
  position: absolute; top: 8px; right: 8px;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: #dc2626; color: #fff; font-size: .7rem; font-weight: 700;
  border-radius: 11px; display: flex; align-items: center; justify-content: center;
}
.home-signout-top {
  position: absolute; top: 16px; right: 16px;
  color: var(--gray-500); text-decoration: none; font-size: .85rem;
  font-weight: 500; z-index: 1;
}
.home-signout-top:hover { color: var(--blue); }
.home-company-info {
  text-align: center; padding-top: 20px; margin-top: 24px;
  border-top: 1px solid #e5e7eb; width: 100%; max-width: 400px;
}
.home-company-name {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--blue); margin-bottom: 4px;
}
.home-company-info p {
  font-family: var(--font); font-size: 12px; color: #6b7280;
  line-height: 1.6; margin: 0;
}
.home-company-info a {
  color: #6b7280; text-decoration: none;
}
.home-company-info a:hover { color: var(--blue); text-decoration: underline; }
.home-footer {
  margin-top: auto; padding-top: 16px; text-align: center;
  font-size: 12px; color: var(--gray-500);
}

/* Hide home screen on desktop */
@media (min-width: 769px) {
  .home-screen { display: none; }
}

/* ===== Utilities ===== */
/* ===== Links Page =====
   Left-aligned horizontal cards: icon on the left, name + URL stacked to its
   right. flex-wrap puts the URL on its own full-width line below the name so a
   long URL truncates inside the card instead of running off the screen. Same
   layout on desktop and mobile — just one column on phones. */
.links-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; max-width: 1100px;
}
.link-search {
  display: block; width: 100%; max-width: 420px; margin-bottom: 18px;
  padding: 10px 14px; font-size: .95rem;
  border: 1px solid var(--gray-300); border-radius: var(--radius-lg);
  background: var(--white);
}
.link-search:focus { outline: none; border-color: var(--blue); }
.links-section-title {
  font-family: var(--font-heading); font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500);
  margin: 22px 0 10px;
}
#links-sections .links-section-title:first-child { margin-top: 0; }
.link-fav-star {
  position: absolute; top: 6px; right: 8px;
  border: none; background: none; cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 4px;
  color: var(--gray-400);
}
.link-fav-star:hover { color: var(--yellow, #eab308); transform: scale(1.15); }
.link-fav-star.is-fav { color: var(--yellow, #eab308); }
.link-card {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px;
  position: relative;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); border: 1px solid var(--gray-200);
  /* extra right padding keeps the name clear of the corner favorite star */
  padding: 16px 36px 16px 18px; text-align: left; text-decoration: none;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
  min-height: 64px;
}
.link-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.link-card:active { transform: scale(.97); }
.link-card-icon { font-size: 1.9rem; line-height: 1; flex: 0 0 auto; }
.link-card-name {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
  color: var(--gray-800); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
}
.link-card-url {
  flex: 1 1 100%; min-width: 0;
  font-size: .8rem; color: var(--gray-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* When a card has an icon, indent the wrapped URL line to align under the name
   (icon width 1.9rem + the 14px gap). */
.link-card-icon ~ .link-card-url { padding-left: calc(1.9rem + 14px); }
@media (max-width: 768px) {
  .links-grid { grid-template-columns: 1fr; max-width: 100%; }
  .link-card { padding: 16px 36px 16px 16px; min-height: 60px; }
  .link-card-name { font-size: 1.05rem; }
  .link-card-url { font-size: .82rem; }
}

/* ===== Order date pills ===== */
.order-date-pills {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.order-date-pill {
  display: inline-flex; align-items: center;
  background: #dc2626; color: #fff;
  font-size: .72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 10px;
  letter-spacing: .02em; white-space: nowrap;
}
.order-date-pill-need {
  background: #b91c1c;
}
/* Need-by urgency bands: red ≤2 days (or overdue), yellow 3–6, green 7+. */
.order-date-pill-need.need-red { background: #dc2626; color: #fff; }
.order-date-pill-need.need-yellow { background: #f59e0b; color: #1f2937; }
.order-date-pill-need.need-green { background: #16a34a; color: #fff; }

/* ===== Order filter pill counts ===== */
.pill-count {
  font-size: .9em; font-weight: 800; margin-left: 2px;
}

/* ===== Permission hint in user editor ===== */
.perm-role-hint { font-size: .75rem; margin-left: 4px; }

/* ===== Polished Empty States ===== */
.empty-state { text-align: center; padding: 24px 16px; }
.empty-state-icon { font-size: 2rem; margin-bottom: 8px; color: #93a3c0; opacity: .5; }
.empty-state p { font-size: 15px; color: #4b5563; margin: 0; }

/* ===== Mobile Overrides ===== */
@media (max-width: 768px) {
  /* Lock body-level horizontal scroll. Anything wider than the viewport
     gets clipped at the app shell instead of dragging the whole page. */
  html, body { overflow-x: hidden; }
  body { width: 100%; max-width: 100vw; }
  #app { max-width: 100vw; }
  .page { max-width: 100vw; box-sizing: border-box; }

  /* Modals on mobile: full-screen, scrollable, anchored at the top with
     a single source of safe-area padding (header only) so the close X is
     always tappable and the body content fills naturally below it. */
  .modal-overlay { padding: 0 !important; align-items: flex-start !important; overflow-y: auto; }
  .modal {
    max-width: 100vw !important; width: 100vw; border-radius: 0 !important;
    max-height: none !important; height: auto;
    margin: 0 !important;
    display: flex; flex-direction: column;
    min-height: 100dvh;
  }
  .modal-header {
    padding: max(12px, env(safe-area-inset-top, 0px)) 16px 12px 16px !important;
    background: var(--white) !important;
  }
  .modal-close {
    width: 44px !important; height: 44px !important;
    font-size: 24px !important; background: var(--gray-100) !important;
    color: var(--gray-900) !important;
  }
  /* Hub viewer uses its own close button class — give it the same
     44x44 tappable target as .modal-close so it's actually findable
     on a phone screen. */
  .hub-v-close {
    width: 44px; height: 44px;
    background: var(--gray-100); color: var(--gray-900);
    border-radius: 50%; font-size: 24px; font-weight: 300;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; flex-shrink: 0;
  }
  .hub-v-header {
    padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px 12px !important;
    position: sticky; top: 0; z-index: 2; background: var(--white);
  }
  .hub-viewer-modal { border-radius: 0 !important; max-height: 92vh !important; }
  .modal-header {
    position: sticky; top: 0; z-index: 2; background: var(--white);
    border-bottom: 1px solid var(--gray-200); flex-shrink: 0;
  }
  .modal-body {
    padding: 12px; overflow-y: auto; flex: 1;
    max-height: calc(92vh - 120px);
  }
  .modal-footer {
    position: sticky; bottom: 0; z-index: 2; background: var(--white);
    border-top: 1px solid var(--gray-200); flex-direction: column; flex-shrink: 0;
  }
  .modal-footer .btn { width: 100%; min-height: 48px; }
  /* Sale Detail footer: groups fill the column; Done + stage actions first,
     Deny / Cancel / Delete last. */
  .sale-footer-secondary, .sale-footer-primary {
    width: 100%; margin-right: 0; display: flex; flex-direction: column; gap: 6px;
  }
  .sale-footer-secondary { order: 2; }
  .da-detail-info { margin-bottom: 8px; grid-template-columns: 1fr; }
  .da-detail-desc { margin: 8px 0; }
  /* Full-screen modals (archive, print) */
  .archive-modal, .print-modal {
    max-height: 100vh !important; height: 100vh; margin-top: 0;
  }
  .archive-modal .modal-body, .print-modal .modal-body {
    max-height: calc(100vh - 60px);
  }
  /* Print modal header on phones: the action buttons + close X were a no-wrap
     row that overflowed off-screen, leaving no reachable way back. Keep the
     close X on its own line (top-right, conventional) and let the action
     buttons fill a full-width row below. Add safe-area top padding. */
  .print-modal-header {
    flex-wrap: wrap; gap: 8px;
    padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px 12px !important;
    position: sticky; top: 0; z-index: 3;
  }
  .print-modal-header .modal-close { order: 0; margin-left: auto; }
  .print-modal-header .flex { order: 1; flex: 1 1 100%; flex-wrap: wrap; }
  .print-modal-header .flex .btn { flex: 1 1 auto; }

  /* Page layout */
  .page { padding: 12px 10px; }
  h1 { font-size: 24px !important; }
  .page-header { margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
  .page-header h1 { flex: 1 1 100%; }
  .page-header > div { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .page-header > div .btn { flex: 1 1 auto; }

  /* Two-column form grids that don't have their own collapse rule.
     Anything written as inline grid-template-columns:1fr 1fr stacks. */
  .form-group + .form-group + div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Modal body breathes a little on phones. */
  .modal { width: 100%; max-width: 100% !important; border-radius: 0; }
  .modal-body { padding: 14px 12px !important; }
  .modal-footer { padding: 10px 12px !important; flex-wrap: wrap; gap: 6px; }
  .modal-footer .btn { flex: 1 1 auto; }

  /* Cards */
  .my-task-card-main { padding: 12px 14px; }
  .my-task-card { margin-bottom: 8px; }
  .tc-actions .btn { width: 100%; min-height: 48px; }

  /* Dashboard */
  .column-header { margin-bottom: 8px; }
  .task-group { margin-bottom: 6px; }
  .task-group-header { padding-top: 4px; margin-bottom: 4px; }

  /* Hub */
  .hub-main { padding: 12px 14px; }
  .hub-topbar { margin-bottom: 12px; }

  /* Empty states */
  .empty-state { padding: 16px 12px; }

  /* Buttons: 48px tap targets */
  .btn { min-height: 48px !important; font-size: 16px !important; }
  .btn-sm { min-height: 44px !important; }

  /* Form inputs: 48px height */
  input, select, textarea { font-size: 16px !important; }
  input:not([type="checkbox"]):not([type="radio"]), select {
    min-height: 48px !important; padding: 8px 12px !important;
  }

  /* Admin tabs: horizontal scroll INSIDE the page bounds. The previous
     negative-margin bleed pushed tabs under the viewport edge on 375px
     phones; now the tab list stays inside page padding so nothing
     overflows the body. */
  .admin-tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important; gap: 0; margin-bottom: 14px;
    scrollbar-width: none; -ms-overflow-style: none;
    position: sticky; top: 0; z-index: 10;
    background: var(--gray-50); padding: 4px 0 0 0;
    max-width: 100%;
    /* Claim horizontal drags for the tab strip so swiping left/right scrolls
       the tabs instead of the page hijacking it into a vertical scroll. */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab {
    flex-shrink: 0; min-height: 44px; display: inline-flex;
    align-items: center; white-space: nowrap; padding: 6px 16px;
    font-size: 14px !important;
  }

  /* Commissions entry form: the Sale Amount / Commission pair is a 2-col grid
     on desktop — collapse to 1-col on narrow phones so labels don't wrap. */
  .commission-amount-row { grid-template-columns: 1fr !important; }

  /* Report tabs: horizontal scroll pills */
  .report-filters {
    flex-wrap: nowrap !important; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding: 8px 10px;
    scrollbar-width: none;
  }
  .report-filters::-webkit-scrollbar { display: none; }
  .rpt-date { min-height: 48px !important; width: 100%; }
  .report-filters .rpt-label { white-space: nowrap; }

  /* Tables: card layout on mobile */
  .user-table { display: block; }
  .user-table thead { display: none; }
  .user-table tbody { display: block; }
  .user-table tbody tr {
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    padding: 12px; margin-bottom: 8px;
    background: var(--white); border-radius: var(--radius);
    border: 1px solid var(--gray-200); box-shadow: var(--shadow);
  }
  .user-table tbody tr td {
    display: block; border: none; padding: 2px 0;
    font-size: 14px !important; max-height: none;
    /* Long unbroken strings (emails, addresses, URLs) must wrap inside the
       card instead of pushing it past the viewport edge. */
    overflow-wrap: break-word; word-break: break-word; min-width: 0;
  }
  .user-table tbody tr td:first-child {
    width: 100%; font-weight: 700; font-size: 16px !important;
    margin-bottom: 2px;
  }
  .user-table tbody tr td:last-child {
    width: 100%; margin-top: 6px;
  }
  .user-table tbody tr td:last-child .btn {
    width: 100%; min-height: 48px;
  }
  /* Action cells — let buttons wrap into a 2-column flex on mobile so
     the row no longer pushes the page wide. */
  .user-table td.cell-actions {
    text-align: left !important;
    white-space: normal !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .user-table td.cell-actions .btn {
    flex: 1 1 calc(50% - 3px);
    margin-left: 0 !important;
    min-height: 44px;
  }

  /* Header tool rows (Add / Export / Import / Template buttons) wrap to
     2 buttons per row on phones rather than running off-screen. */
  .header-tools .btn {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
  }

  /* Dispatch event log on mobile: drop the desktop 520px scroll cap so
     the page itself scrolls instead of nesting two scrollers. */
  .dashboard-grid .dash-col-scroll { max-height: none !important; }
  /* Hide lower-priority table columns on mobile (4th+ columns).
     Tables tagged .mobile-rich opt out — every column is meaningful and
     should flow into the card layout (status pills, counts, etc). */
  .user-table:not(.report-table):not(.mobile-rich):not(.cards-labeled) tbody tr td:nth-child(n+4):not(:last-child) { display: none; }
  /* For mobile-rich tables, give status-y cells visual punch without the
     wrap-only-row treatment. Status badges + dates wrap inline. */
  .user-table.mobile-rich:not(.cards-labeled) tbody tr td:nth-child(n+2):not(:last-child) { flex: 1 1 auto; min-width: 0; }

  /* Labeled cards: dense tables (commissions, etc.) render each cell as a
     "LABEL …… value" row on phones so every field is identifiable. The label
     comes from data-label (set by labelTableCells() from the column header). */
  .user-table.cards-labeled tbody tr { gap: 0; padding: 12px 14px; }
  .user-table.cards-labeled tbody tr td {
    display: flex !important; justify-content: space-between; align-items: baseline;
    gap: 14px; width: 100%; flex: 1 1 100% !important;
    padding: 7px 0; border-bottom: 1px solid var(--gray-100);
    font-size: 15px !important; text-align: right; max-height: none;
  }
  .user-table.cards-labeled tbody tr td:last-child { border-bottom: none; }
  .user-table.cards-labeled tbody tr td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-weight: 700; color: var(--gray-600); font-size: 11px;
    text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
  }
  /* First column stays a bold, full-width card title (no label prefix). */
  .user-table.cards-labeled tbody tr td:first-child {
    font-weight: 700; font-size: 17px !important; text-align: left;
    justify-content: flex-start; border-bottom: 2px solid var(--gray-200);
    padding-bottom: 8px; margin-bottom: 4px;
  }
  .user-table.cards-labeled tbody tr td:first-child::before { display: none; }

  /* Report tables: scrollable horizontally on mobile instead of card layout */
  .report-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -12px; padding: 0 12px;
  }
  .report-table-wrap .user-table.report-table { display: table; min-width: 700px; }
  /* The trimmed leaderboard (Rank/Name/Volume/Avg Ticket) has only 4
     columns — drop the artificial min-width so it fills phone widths
     without horizontal scroll. */
  .report-table-wrap .user-table.report-table.leaderboard-trim { min-width: 0; width: 100%; }
  /* Commissions report: its fixed-layout percentage widths can't hold the
     nowrap headers on a phone (they overlapped); size columns to content
     and let the wrap scroll instead. Screen only: a portrait Letter print
     page is ~739px wide and matches this max-width query too. */
  @media screen {
    .report-table-wrap .user-table.commissions-report-table {
      table-layout: auto; width: auto; min-width: 700px;
    }
  }
  /* Headers were wrapping word-by-word ("DAT/E", "AM/OU/NT") inside their
     narrow fixed-layout columns; force them to stay on one line so the
     table scrolls horizontally instead (tables whose thead is hidden on
     mobile — dispatch-report, lead-completions-table — aren't affected). */
  .report-table-wrap .user-table.report-table th { white-space: nowrap; }
  .report-table-wrap .user-table.report-table thead { display: table-header-group; }
  .report-table-wrap .user-table.report-table tbody { display: table-row-group; }
  .report-table-wrap .user-table.report-table tbody tr { display: table-row; flex-wrap: unset; gap: unset; padding: 0; margin: 0; border: none; box-shadow: none; background: none; }
  .report-table-wrap .user-table.report-table tbody tr td { display: table-cell; border-bottom: 1px solid var(--gray-100); padding: 10px 8px; font-size: 13px !important; white-space: nowrap; }

  /* Dispatch report on mobile: too wide for horizontal-scroll to be
     useful (9 columns). Force card layout by overriding the
     report-table rules above. Each row stacks: type+status pill, tech
     name, address, then date/time + close note collapsed under. */
  .report-table-wrap .user-table.report-table.dispatch-report {
    display: block; min-width: 0;
  }
  .report-table-wrap .user-table.report-table.dispatch-report thead {
    display: none;
  }
  .report-table-wrap .user-table.report-table.dispatch-report tbody {
    display: block;
  }
  .report-table-wrap .user-table.report-table.dispatch-report tbody tr {
    display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px;
    margin-bottom: 8px;
    background: var(--white); border-radius: var(--radius);
    border: 1px solid var(--gray-200); box-shadow: var(--shadow);
  }
  .report-table-wrap .user-table.report-table.dispatch-report tbody tr td {
    display: block; border: none; padding: 2px 0;
    font-size: 14px !important; white-space: normal;
  }
  /* Date + time on one line at the top */
  .report-table-wrap .user-table.report-table.dispatch-report tbody tr td:nth-child(1),
  .report-table-wrap .user-table.report-table.dispatch-report tbody tr td:nth-child(2) {
    flex: 0 0 auto; font-size: 13px !important; color: var(--gray-600);
  }
  /* Type pill row */
  .report-table-wrap .user-table.report-table.dispatch-report tbody tr td:nth-child(3) {
    flex: 1 1 auto; text-align: right;
  }
  /* Tech full width in bold */
  .report-table-wrap .user-table.report-table.dispatch-report tbody tr td:nth-child(4) {
    width: 100%; font-weight: 700; font-size: 16px !important;
  }
  /* Address full width */
  .report-table-wrap .user-table.report-table.dispatch-report tbody tr td:nth-child(5) {
    width: 100%; color: var(--gray-700);
  }
  /* Status / Return reason / Notes / Completed by full width below */
  .report-table-wrap .user-table.report-table.dispatch-report tbody tr td:nth-child(n+6) {
    width: 100%; font-size: 13px !important;
  }

  /* Sales → Job Completions table on mobile: it shares .dispatch-report's
     card layout above (same specificity, so these win on source order
     alone — no need to duplicate the block) but wants a different first
     line: type badge on the left, date/time muted on the right (the
     dispatch report puts date/time first). Re-sequence with `order`
     instead of re-declaring width/font-size/display. */
  .report-table-wrap .user-table.report-table.lead-completions-table tbody tr td:nth-child(3) {
    order: 1; flex: 0 0 auto; text-align: left;
  }
  .report-table-wrap .user-table.report-table.lead-completions-table tbody tr td:nth-child(1) {
    order: 2; margin-left: auto; text-align: right;
  }
  .report-table-wrap .user-table.report-table.lead-completions-table tbody tr td:nth-child(2) {
    order: 2; text-align: right;
  }
  .report-table-wrap .user-table.report-table.lead-completions-table tbody tr td:nth-child(4) { order: 3; }
  .report-table-wrap .user-table.report-table.lead-completions-table tbody tr td:nth-child(5) { order: 4; }
  .report-table-wrap .user-table.report-table.lead-completions-table tbody tr td:nth-child(n+6) { order: 5; }
  /* Return reason stays orange (inline style already sets the color); give
     the full-width checkbox row left alignment instead of the desktop
     center so it reads like the rest of the stacked card. */
  .lead-completions-table td:last-child { text-align: left; }
  /* The wrap is transparent on mobile and each row is its own white card, so
     the cells must not paint their own (white / zebra) backgrounds, and the
     Return Needed tint is layered over the card's white instead of replacing
     it (a bare translucent tint let the navy page show through). */
  .report-table-wrap .user-table.report-table.lead-completions-table tbody tr td { background: transparent; }
  .report-table-wrap .user-table.report-table.lead-completions-table tbody tr.lead-completions-warn {
    background: linear-gradient(rgba(232,89,12,0.05), rgba(232,89,12,0.05)), var(--white);
  }
  .lead-completions-check-text {
    display: inline; font-size: 13px; font-weight: 600; color: var(--gray-700);
  }

  /* Report filter wrap on mobile */
  .report-filters { flex-wrap: wrap !important; overflow-x: visible; }
  .report-filters .rpt-date { min-width: 0; flex: 1 1 120px; }
  .report-filters .rpt-label { flex-basis: auto; }

  /* Commission form readability */
  .commission-form .form-group { margin-bottom: 20px; }
  .commission-form .form-group label { font-size: .95rem; font-weight: 600; margin-bottom: 6px; }

  /* Order filters — compact horizontal-scroll row on mobile.
     Prevents the 12+ pills from wrapping into 4 stacked rows that
     bury the list below. Contained so the page itself doesn't scroll. */
  .order-quick-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin-bottom: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    max-width: 100%;
  }
  .order-quick-filters::-webkit-scrollbar { height: 4px; }
  .order-quick-filters::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }
  .order-filter-pill {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 10px;
    font-size: 12px !important;
    border-radius: 17px;
    border-width: 1px;
    scroll-snap-align: start;
  }
  .order-filter-pill .pill-count { font-size: 11px; margin-left: 2px; opacity: 0.85; }
  /* Hide the awkward separator on mobile — the scroll flow reads cleanly */
  .order-quick-filters > span[style*="height"] { display: none; }

  /* Stage drill-down pill row — same compact treatment */
  .order-stage-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px;
    margin-bottom: 8px;
  }
  .order-stage-pill {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 4px 10px;
  }

  /* Date filter row: stack inputs full-width, buttons share a row */
  .report-filters { gap: 6px; }
  .rpt-date {
    flex: 1 1 40%;
    min-width: 0;
    width: auto;
  }
}

/* ===== Standalone (Add-to-Home-Screen) tweaks ===== */
@media (display-mode: standalone) {
  body { padding-top: 0; }
  .login-wrapper { min-height: 100dvh; }
  .home-screen { min-height: 100dvh; }
}

/* ===== Page transition ===== */
#app > :first-child {
  animation: fadeSlideIn .2s ease-out;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* The dashboard hosts a position:fixed slide-over (mobile detail pane); a
   transformed ancestor becomes its containing block and shoves it below the
   nav, so this page's entrance animates opacity only. */
#app > .dash-page:first-child { animation-name: fadeInOnly; }
@keyframes fadeInOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== Non-blocking error toast =====
   Replaces alert() for transient errors so a single 502 retry doesn't
   produce a blocking modal on mobile. Auto-dismisses after ~4.5 s. */
.app-toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 20px));
  transform: translateX(-50%);
  z-index: 9000;
  background: #2b2b32; color: #fff;
  padding: 12px 18px; border-radius: 10px;
  font: 600 14px/1.35 var(--font), -apple-system, sans-serif;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  max-width: min(560px, calc(100vw - 24px));
  opacity: 1; transition: opacity .2s, transform .2s;
}
.app-toast.hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 8px); }
.app-toast-error { background: #b91c1c; }
.app-toast-info { background: var(--blue); }

/* ===== Navigation progress bar =====
   Slim bar at the very top of the viewport that animates while router()
   is awaiting the next route's render. Replaces the blank-screen gap
   that users were reading as a freeze. */
.nav-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 9001;
  background: transparent; pointer-events: none;
  overflow: hidden; opacity: 0; transition: opacity .15s;
}
.nav-progress::before {
  content: ''; display: block;
  height: 100%; width: 30%;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
  animation: navProgressSlide 1.1s linear infinite;
}
.nav-progress.active { opacity: 1; }
@keyframes navProgressSlide {
  from { transform: translateX(-100%); }
  to { transform: translateX(400%); }
}

.hidden { display: none !important; }
.text-muted { color: #4b5563; }
.text-sm { font-size: 13px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 14px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.gap-8 { gap: 8px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* =============================================================
   Impeccable pass v1 — context-aware refinements
   Desktop = command center. Mobile = crew-ready workhorse.
   Additive only; existing class contracts preserved.
   ============================================================= */

:root {
  /* Status 4-tone system: neutral / active / warning / resolved.
     Each tone has a surface (background fill) and ink (text). */
  --s-neutral-surface: #e5e7eb;
  --s-neutral-ink:     #374151;
  --s-active-surface:  #dbeafe;
  --s-active-ink:      #1e3a8a;
  --s-warning-surface: #fef3c7;
  --s-warning-ink:     #92400e;
  --s-resolved-surface:#d1fae5;
  --s-resolved-ink:    #065f46;
  --s-danger-surface:  #fee2e2;
  --s-danger-ink:      #991b1b;
}

/* --- Status badges rationalized (keeps existing class names) --- */
.status-open        { background: var(--s-neutral-surface);  color: var(--s-neutral-ink); }
.status-in_progress { background: var(--s-active-surface);   color: var(--s-active-ink); }
.status-complete    { background: var(--s-resolved-surface); color: var(--s-resolved-ink); }
.status-expired     { background: var(--s-danger-surface);   color: var(--s-danger-ink); }

.status-requested   { background: var(--s-neutral-surface);  color: var(--s-neutral-ink); }
.status-approved    { background: var(--s-active-surface);   color: var(--s-active-ink); }
.status-ordered     { background: var(--s-warning-surface);  color: var(--s-warning-ink); }
.status-shipped     { background: #fed7aa; color: #9a3412; } /* in-transit keeps its own tone */
.status-received    { background: var(--s-resolved-surface); color: var(--s-resolved-ink); }
.status-closed      { background: var(--s-resolved-surface); color: var(--s-resolved-ink); }
.status-installed   { background: var(--s-resolved-surface); color: var(--s-resolved-ink); }
.status-cancelled   { background: var(--s-danger-surface);   color: var(--s-danger-ink); }
.status-rejected    { background: var(--s-danger-surface);   color: var(--s-danger-ink); }

/* ===== Desktop top-nav: active underline + user chip ===== */
@media (min-width: 769px) {
  /* Replace heavy fill active with a crisp yellow underline. */
  .nav-links a.active {
    color: var(--yellow);
    background: transparent;
  }
  .nav-links a.active::after {
    content: '';
    position: absolute; left: 10px; right: 10px; bottom: -14px;
    height: 2px; background: var(--yellow); border-radius: 2px;
  }
  .nav-links a { position: relative; }

  /* Nav search gets a keyboard hint. */
  .nav-search { align-items: stretch; }
  .nav-search-kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-family: var(--font); font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,.6); padding: 2px 6px;
    background: rgba(255,255,255,.1); border-radius: 4px;
    pointer-events: none; letter-spacing: .02em;
  }
  .nav-search-input { padding-right: 52px; }
  .nav-search-input:focus + .nav-search-kbd { opacity: 0; }
}

/* Compact user chip (desktop + mobile both use this) */
.nav-user { position: relative; }
.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); border: none; color: var(--white);
  padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer;
  font-family: var(--font); transition: background .15s;
}
.user-chip:hover { background: rgba(255,255,255,.18); }
.user-chip-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--yellow); color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  letter-spacing: .02em;
}
.user-chip-name {
  font-weight: 600; font-size: .85rem; color: var(--white);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-chip-caret {
  width: 10px; height: 10px; opacity: .7;
}
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 220px; background: var(--white); color: var(--gray-800);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200); z-index: 2000; overflow: hidden;
}
.user-dropdown.hidden { display: none; }
.user-dropdown-header {
  padding: 12px 14px; border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
}
.user-dropdown-name {
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  color: var(--gray-900);
}
.user-dropdown-role {
  font-size: 12px; color: var(--gray-600); margin-top: 2px;
  text-transform: uppercase; letter-spacing: .04em;
}
.user-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px; background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 14px; color: var(--gray-800);
  text-align: left; transition: background .1s;
}
.user-dropdown-item:hover { background: var(--gray-50); }
.user-dropdown-item.danger { color: var(--red); }

.login-remember {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px 0; padding: 8px 4px;
  font-size: .9rem; color: var(--gray-700); cursor: pointer;
  max-width: 100%; white-space: normal; line-height: 1.3;
}
.login-remember input[type="checkbox"] { flex: 0 0 auto; margin: 0; transform: scale(1.1); }
.login-remember span { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
  .login-remember { font-size: .85rem; }
}

.effective-access-box {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 10px 12px;
}

/* Overdue keys + inventory */
.overdue-card { padding: 14px 16px; border-left: 4px solid var(--red); background: rgba(220,38,38,0.05); }
.overdue-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.overdue-card-title { margin: 0; font-size: 1rem; color: var(--red); }
.overdue-section-title { font-weight: 700; font-size: .85rem; margin-top: 8px; color: var(--gray-800); }
.overdue-section-title:first-of-type { margin-top: 4px; }
.overdue-list { display: flex; flex-direction: column; gap: 4px; }
.overdue-row { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; padding: 4px 8px; background: var(--white); border-radius: 4px; }
.overdue-row-link { cursor: pointer; transition: background .12s ease, box-shadow .12s ease; }
.overdue-row-link:hover { background: #fff3f3; box-shadow: inset 0 0 0 1px var(--red); }
.overdue-due { color: var(--red); font-weight: 600; }
tr.row-overdue { background: rgba(220,38,38,0.12); }
td.cell-overdue { color: var(--red); font-weight: 700; }

/* 10-8 problem flags — red checkboxes. Checked = problem found. */
.d8-flags { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.d8-flag {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--gray-200);
  border-radius: 6px; cursor: pointer; font-size: .9rem;
  transition: background .1s, border-color .1s;
}
.d8-flag:hover { background: var(--gray-50); }
.d8-flag input[type="checkbox"] { accent-color: var(--red); width: 18px; height: 18px; cursor: pointer; }
.d8-flag input[type="checkbox"]:checked + span { color: var(--red); font-weight: 700; }
.d8-flag:has(input:checked) { background: rgba(220,38,38,0.08); border-color: var(--red); }

/* Admin → 10-8 Form builder */
.d8form-card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 12px 14px; margin-bottom: 10px; max-width: 760px;
}
.d8form-row {
  display: grid; grid-template-columns: 1fr max-content max-content max-content;
  gap: 8px; align-items: center;
}
.d8form-row input, .d8form-row select {
  padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px;
  font-family: var(--font); font-size: .875rem; background: var(--white);
}
.d8form-req {
  display: flex; align-items: center; gap: 6px; font-size: .85rem;
  cursor: pointer; white-space: nowrap;
}
.d8form-req input { width: 16px; height: 16px; cursor: pointer; }
.d8form-btns { display: flex; gap: 6px; }
@media (max-width: 768px) {
  .d8form-row { grid-template-columns: 1fr 1fr; }
  .d8form-btns { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Dispatch report: widened Type column + pretty-printed Completion Notes. */
.dispatch-report .type-col { min-width: 170px; width: 180px; }
.disp-type-badge {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  font-size: .72rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.dispatch-note-cell { max-width: 360px; }
.dispatch-close-note { font-size: .85rem; line-height: 1.35; }
.dispatch-note-heading { font-weight: 700; margin-top: 4px; }
.dispatch-note-label { font-weight: 600; color: var(--gray-800); }
.dispatch-note-kv { margin-top: 2px; }
.dispatch-note-problem { color: var(--red); font-weight: 700; }

/* Shop Job toggle + chip — gray to distinguish shop visits from customer sites. */
.shop-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 10px; border: 1px solid var(--gray-200); border-radius: 6px;
  font-size: .9rem;
}
.shop-toggle input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 auto;
  margin: 0; padding: 0; accent-color: var(--gray-600); cursor: pointer;
}
.shop-toggle:has(input:checked) { background: var(--gray-100); border-color: var(--gray-400); }
.shop-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  background: var(--gray-600); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .03em;
}

/* Dispatch report: widen Completion Notes, narrow Return Reason. */
.dispatch-report th:nth-child(7), .dispatch-report td:nth-child(7) { max-width: 160px; width: 160px; }
.dispatch-report th:nth-child(8), .dispatch-report td:nth-child(8) { min-width: 340px; }

/* Sales → Job Completions tab: same look as the Dispatch report table, but
   it drops the Status column and appends Processed (+ Processed By in the
   Archive view), so the report's column-position (nth-child) rules above
   don't line up. Override them here instead of renumbering/duplicating the
   whole dispatch-report ruleset. */

/* The table sits on the navy .dash-page backdrop — give it a white card
   (same pattern as .po-table-card) and force odd rows white; the even-row
   tint from the generic .user-table nth-child(even) rule is more specific
   than the plain rule below, so it still wins and the zebra stripe stays. */
.lead-completions-table tbody tr td { background: var(--white); }

/* Column widths — desktop (real <table>) only. Scoped to min-width:769px
   so none of this (esp. the narrow 1% Date/Time columns) leaks into the
   mobile card layout below, where flex "order" does the positioning and a
   sub-1%-of-row-width flex-basis would squeeze Time down to a few px and
   wrap it one character per line. The white card wrapper is desktop-only
   too: on mobile the wrap stays transparent and each row is its own card. */
@media (min-width: 769px) {
  #lead-completions-body .report-table-wrap {
    background: var(--white); border-radius: var(--radius);
    overflow-x: auto; box-shadow: var(--shadow);
  }
  /* Completion Notes is the widest column; Return Reason is usually empty
     and stays narrow; Date/Time/Technician stay compact and non-wrapping. */
  .lead-completions-table th:nth-child(1), .lead-completions-table td:nth-child(1),
  .lead-completions-table th:nth-child(2), .lead-completions-table td:nth-child(2) {
    white-space: nowrap; width: 1%;
  }
  .lead-completions-table th:nth-child(3), .lead-completions-table td:nth-child(3) {
    min-width: 0; width: 150px;
  }
  .lead-completions-table th:nth-child(4), .lead-completions-table td:nth-child(4) {
    white-space: nowrap; width: 140px;
  }
  .lead-completions-table th:nth-child(5), .lead-completions-table td:nth-child(5) {
    width: 220px;
  }
  .lead-completions-table th:nth-child(6), .lead-completions-table td:nth-child(6) {
    width: 170px; max-width: 170px;
  }
  .lead-completions-table th:nth-child(7), .lead-completions-table td:nth-child(7) {
    max-width: none; min-width: 300px; width: auto;
  }
  .lead-completions-table th:nth-child(8), .lead-completions-table td:nth-child(8),
  .lead-completions-table th:nth-child(9):not(:last-child),
  .lead-completions-table td:nth-child(9):not(:last-child) {
    min-width: 0; width: 175px;
  }
  .lead-completions-table th:last-child, .lead-completions-table td:last-child {
    width: 80px; text-align: center;
  }
}
.lead-completions-table td:last-child input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer; accent-color: var(--green);
}

/* Density: compact rows so a couple lines of notes don't blow up row height */
.lead-completions-table th { padding: 8px; }
.lead-completions-table td {
  font-size: 14px !important; padding: 8px; vertical-align: top;
}

/* Toolbar: Open/Archive read as a segmented control; Refresh sits apart */
.lead-completions-toolbar { align-items: center; }
.lead-completions-toolbar .lead-completions-refresh { margin-left: auto; }
.lead-completions-seg { display: inline-flex; gap: 0; }
.lead-completions-seg .btn:first-child { border-radius: 6px 0 0 6px; }
.lead-completions-seg .btn:last-child { border-radius: 0 6px 6px 0; }

/* Checkbox caption — hidden on desktop (the Processed column header + the
   centered checkbox are enough there), shown on mobile cards where there's
   no header row to label it. */
.lead-completions-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
@media (min-width: 769px) {
  .lead-completions-check-text { display: none; }
}

/* Empty-state text on the navy page must stay readable (same treatment as
   .po-page #po-queue-list > .text-muted). */
.dash-page #lead-completions-body > .text-muted { color: rgba(255,255,255,.8); }

/* Asset image picker — preview + remove control. */
.image-input-preview {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
}
.image-input-preview img {
  max-width: 96px; max-height: 96px; border-radius: 6px;
  border: 1px solid var(--gray-200); object-fit: cover;
}
.image-input-thumb {
  width: 36px; height: 36px; border-radius: 4px; object-fit: cover;
  border: 1px solid var(--gray-200); vertical-align: middle;
}
.img-expandable { cursor: zoom-in; }
.img-lightbox {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 6000;
  background: rgba(0, 0, 0, 0.82); cursor: zoom-out; padding: 24px;
  display: flex; align-items: center; justify-content: center;
}
.img-lightbox img {
  max-width: 100%; max-height: 100%; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.reg-warn-card {
  background: #fffbeb; border: 1px solid #fcd34d;
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px;
}
.reg-warn-title { font-weight: 700; color: #92400e; margin-bottom: 6px; }
.reg-warn-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 4px 0; cursor: pointer; flex-wrap: wrap;
}
.reg-warn-row:hover span:first-child { text-decoration: underline; }
.reg-warn-days { font-weight: 700; color: #b45309; white-space: nowrap; }
.reg-warn-days.expired { color: var(--red); }

.key-group-row { cursor: pointer; }
.key-group-row td {
  background: var(--gray-50); border-top: 2px solid var(--gray-200);
  padding-top: 7px; padding-bottom: 7px;
}
.key-group-row:hover td { background: var(--gray-100); }
.key-group-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.key-group-name { font-weight: 700; }
.key-chevron {
  display: inline-block; width: 12px; color: var(--gray-500);
  font-size: .8rem; user-select: none;
}
.key-pill {
  padding: 1px 8px; border-radius: 999px; font-size: .72rem;
  font-weight: 700; white-space: nowrap;
}
.key-pill-overdue { background: #fee2e2; color: #b91c1c; }
.key-pill-out { background: #fef3c7; color: #92400e; }
.key-pill-ok { background: #d1fae5; color: #047857; }
.key-set-row td:first-child { padding-left: 34px; }

/* Stock replenishment form — categorized item rows with qty input. */
.stk-cr-items { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; padding: 4px; border: 1px solid var(--gray-200); border-radius: 6px; background: var(--gray-50); }
.stk-cat { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-600); margin-top: 4px; padding: 4px 8px; }
.stk-cat:first-child { margin-top: 0; }
.stk-item { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; background: var(--white); border-radius: 4px; }
@media (max-width: 768px) {
  .stk-item { grid-template-columns: 1fr auto; }
  .stk-item .qty-stepper { grid-column: 1 / -1; justify-self: end; }
}
.stk-item-name { font-weight: 500; font-size: .9rem; }
.stk-item-stock { white-space: nowrap; }
.stk-item-qty { width: 70px !important; height: 32px !important; text-align: right; padding: 4px 8px !important; }

/* Order detail modal — per-line stock rows (renderStockLine). Distinct from the
   replenishment .stk-item form rows above. Layout lives here (not inline) so the
   mobile media query can reflow it. */
.ostk-line {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  margin-bottom: 4px;
  font-size: 15px;
}
.ostk-line .text-sm { font-size: 14px; }
.ostk-action { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ostk-btn-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
/* "Not ordering" — a visible ghost button (was a near-invisible gray text link). */
.ostk-cancel { background: var(--white); border: 1px solid var(--gray-400); color: var(--gray-700); }
.ostk-cancel:hover:not(:disabled) { background: var(--gray-100); border-color: var(--gray-500); }

@media (max-width: 768px) {
  /* Drop to thumb | name | qty; the action + edit groups wrap to full-width
     rows beneath so nothing gets crushed into a 2-column grid. */
  .ostk-line { grid-template-columns: auto 1fr auto; }
  .ostk-line .ostk-action,
  .ostk-line .ostk-edit { grid-column: 1 / -1; }
  .ostk-line .ostk-action { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .ostk-line .ostk-edit { display: flex; justify-content: flex-end; }
  .ostk-line .ostk-btn-row { width: 100%; }
  /* Readability bumps for name meta, qty label, and the requester chip. */
  .ostk-line .text-sm { font-size: 14px; }
  .ostk-line .text-muted { color: var(--gray-700); }
  .ostk-line .assignee-chip { font-size: .85rem; }
  /* Per-line action buttons fill the row evenly instead of crowding. */
  .ostk-line .ostk-btn-row .btn { flex: 1 1 auto; min-width: 96px; }
}

/* Lowest/last historical purchase price hint shown beside the current cost. */
.line-hist {
  display: inline-block;
  font-weight: 700; color: #1e3fa3; font-size: 13px;
  background: #e8edf8; border-radius: 8px; padding: 2px 8px;
  white-space: nowrap;
}

/* Quick "Open" link to an item's product/vendor page, shown inline in the
   stock-order line meta row beside the part #/cost. */
.line-link {
  display: inline-block;
  font-weight: 600; color: #1e3fa3; font-size: 13px;
  text-decoration: none; white-space: nowrap;
  border: 1px solid #c7d2f0; border-radius: 8px; padding: 1px 8px;
}
.line-link:hover { background: #e8edf8; text-decoration: underline; }

/* Stock-order card action buttons (Receive / Fill / Cancel / Order Ready).
   Mirrors the .inv-row-actions pattern: intrinsic widths that wrap on
   desktop, 2-up with bigger tap targets on phones, with consistent heights
   so mixed buttons line up. */
.stk-card-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end; align-items: center;
}
.stk-card-actions .btn { flex: 0 0 auto; }
.stk-card-actions .btn-sm,
.ostk-btn-row .btn-sm { min-height: 36px; }
@media (max-width: 540px) {
  .stk-card-actions .btn { flex: 1 1 calc(50% - 6px); padding: 10px 12px; font-size: 14px; }
}

/* Current Tank Usage panel — visually separate each technician's group when
   multiple refrigerant types share the same tech (first row per tech gets a
   top border so the eye groups the follow-ups beneath). */
.tank-usage-group-start td { border-top: 1px solid var(--gray-200); }
.user-table tbody tr.tank-usage-group-start:first-child td { border-top: none; }

/* Tap-friendly numeric stepper — used in stock request + receive forms.
   Buttons hit 44px on phones; the input keeps the typed-entry option. */
.qty-stepper {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1px solid var(--gray-300); border-radius: 6px; overflow: hidden;
  background: var(--white);
}
.qty-stepper .qty-step-btn {
  border: none; background: var(--gray-100); color: var(--gray-800);
  font-size: 1.2rem; font-weight: 700; cursor: pointer; line-height: 1;
  width: 36px; min-height: 32px; padding: 0;
  transition: background .1s;
}
.qty-stepper .qty-step-btn:hover { background: var(--gray-200); }
.qty-stepper .qty-step-btn:active { background: var(--gray-300); }
.qty-stepper .qty-step-btn:disabled { opacity: .4; cursor: not-allowed; }
.qty-stepper .qty-step-input {
  width: 56px !important; height: auto !important; min-height: 32px !important;
  border: none !important; border-left: 1px solid var(--gray-200) !important;
  border-right: 1px solid var(--gray-200) !important; border-radius: 0 !important;
  text-align: center; font-weight: 700; padding: 0 !important;
  /* Hide native browser number-input arrows — we have our own buttons. */
  -moz-appearance: textfield;
}
.qty-stepper .qty-step-input::-webkit-outer-spin-button,
.qty-stepper .qty-step-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
@media (max-width: 768px) {
  .qty-stepper .qty-step-btn { width: 44px; min-height: 44px; font-size: 1.4rem; }
  .qty-stepper .qty-step-input { width: 64px !important; min-height: 44px !important; font-size: 1.1rem !important; }
}

/* Shared report toolbar — top-of-section row with filters + Apply / Clear /
   Print / CSV buttons. Used on every report-style view for consistency. */
.report-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 12px; background: var(--gray-50);
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  margin-bottom: 12px;
}
.report-toolbar .rpt-label { color: var(--gray-700); font-size: .85rem; font-weight: 600; }
.report-toolbar .rpt-date { min-width: 140px; }
.report-toolbar .report-actions-btn { margin-left: auto; }
.report-toolbar .report-actions-btn + .report-actions-btn { margin-left: 0; }
@media (max-width: 768px) {
  .report-toolbar { padding: 10px; }
  .report-toolbar .rpt-date { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .report-toolbar .btn { flex: 1 1 auto; }
  .report-toolbar .report-actions-btn { margin-left: 0; }
}

/* Replenishment check-in line — name on the left, qty + receive button on the right. */
.replen-line {
  display: grid; grid-template-columns: 1fr 80px auto;
  gap: 8px; align-items: center; padding: 6px 0;
  border-bottom: 1px dashed var(--gray-200);
}
.replen-line:last-child { border-bottom: none; }
.replen-qty { width: 80px !important; height: 32px !important; text-align: right; padding: 4px 8px !important; }
.replen-done { color: var(--green); font-weight: 700; font-size: .85rem; grid-column: 2 / span 2; text-align: right; }

/* Replenishment receive modal — checkbox / item / qty / notes per line. */
.replen-receive-list { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; padding: 4px; }
.replen-receive-line {
  display: grid; grid-template-columns: 28px 1fr auto 1.4fr; gap: 10px;
  align-items: center; padding: 8px 10px;
  background: var(--gray-50); border-radius: 6px;
}
.replen-receive-line.done { opacity: .55; }
.replen-line-check { width: 18px !important; height: 18px !important; flex: 0 0 auto; margin: 0 !important; padding: 0 !important; }
.replen-receive-qty { width: 80px !important; height: 32px !important; text-align: right; padding: 4px 8px !important; }
.replen-receive-notes { min-height: 32px !important; height: 32px !important; padding: 4px 8px !important; resize: vertical; }
@media (max-width: 600px) {
  .replen-receive-line { grid-template-columns: 24px 1fr; }
  .replen-receive-qty, .replen-receive-notes { grid-column: 2; width: 100% !important; }
}

/* Desktop nav overflow "Menu" dropdown */
.nav-menu-wrapper { position: relative; display: inline-flex; }
.nav-links .nav-menu-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.85);
  padding: 8px 14px; border-radius: var(--radius);
  font-family: var(--font-heading); font-weight: 700; font-size: 17px !important;
  transition: all .15s; white-space: nowrap; position: relative;
}
.nav-links .nav-menu-trigger:hover { color: var(--white); background: rgba(255,255,255,.12); }
.nav-links .nav-menu-trigger.active { color: var(--yellow); background: rgba(255,255,255,.1); }
.nav-links .nav-menu-trigger[aria-expanded="true"] { background: rgba(255,255,255,.12); color: var(--white); }
.nav-menu-caret { width: 10px; height: 10px; opacity: .7; display: inline-flex; }
.nav-menu-caret svg { width: 100%; height: 100%; }
.nav-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 220px; background: var(--white); color: var(--gray-800);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200); z-index: 2000;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  max-height: calc(100vh - 90px);
  padding: 6px 0;
}
.nav-menu-dropdown.hidden { display: none; }
/* Use .nav-links prefix to outrank the base .nav-links a white-text rule. */
.nav-links .nav-menu-item,
.nav-links a.nav-menu-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; color: var(--gray-800); text-decoration: none;
  font-size: 14px !important; font-weight: 600; border-radius: 0;
}
.nav-links .nav-menu-item:hover,
.nav-links a.nav-menu-item:hover { background: var(--gray-50); color: var(--gray-900); }
.nav-links .nav-menu-item.active,
.nav-links a.nav-menu-item.active { background: var(--gray-100); color: var(--blue); }
.nav-menu-item .nav-badge { position: static; transform: none; }

/* On mobile the hamburger drawer shows everything flat — unwrap the overflow. */
@media (max-width: 768px) {
  .nav-menu-wrapper { display: contents; }
  .nav-menu-trigger { display: none; }
  .nav-menu-dropdown {
    position: static; display: flex; flex-direction: column;
    box-shadow: none; border: none; padding: 0; background: transparent;
    min-width: 0; max-height: none; overflow: visible;
  }
  .nav-menu-dropdown.hidden { display: flex; } /* drawer already handles visibility */
  /* Overflow items render inside the dark-blue drawer on mobile. The base
     .nav-links .nav-menu-item gray rule (spec 0,2,0) outranks a bare
     .nav-menu-item override, so match its specificity here and use the
     drawer's white-on-blue treatment — otherwise it's dark-on-dark. */
  .nav-links .nav-menu-item,
  .nav-links a.nav-menu-item {
    color: var(--white); padding: 15px 22px;
    /* !important to beat the desktop `.nav-menu-item { font-size:14px !important }`
       rule — without it the overflow items shrank to 14px on mobile while the
       pinned links stayed larger, which is the "different sizes" bug. */
    font-size: 1.18rem !important; min-height: 56px;
  }
  .nav-links .nav-menu-item:hover,
  .nav-links a.nav-menu-item:hover { background: rgba(255,255,255,.08); color: var(--white); }
  .nav-links .nav-menu-item.active,
  .nav-links a.nav-menu-item.active {
    color: var(--white); background: rgba(255,255,255,.06);
    box-shadow: inset 3px 0 0 rgba(255,255,255,.5);
  }
}

@media (max-width: 768px) {
  /* Hide the name on mobile to save space; avatar chip only. */
  .user-chip-name, .user-chip-caret { display: none; }
  .user-chip { padding: 4px; background: transparent; }
  .user-chip:hover { background: rgba(255,255,255,.15); }
}

/* ===== Mobile nav panel upgrade (hamburger drop-down) ===== */
@media (max-width: 768px) {
  .nav-links {
    top: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
    background: var(--blue-dark);
    padding: 6px 0 12px;
    max-height: calc(100dvh - var(--nav-height) - env(safe-area-inset-top, 0px));
    overflow-y: auto;
  }
  .nav-links a {
    padding: 17px 22px;
    border-radius: 0;
    /* Mobile drawer renders every item as a flat .nav-links a, so this one
       rule sizes the whole menu. !important beats the base 17px rule. */
    font-size: 1.32rem !important;
    border-left: 0;
    display: flex; align-items: center; gap: 12px;
    min-height: 62px;
  }
  /* Count badges sit at the right edge of the row in the vertical drawer. */
  .nav-links a .nav-badge,
  .nav-links .nav-menu-item .nav-badge { margin-left: auto; }
  /* Mobile drawer: subtle white active state, no yellow. The base
     desktop rule at :138 tints the link yellow; override here so the
     hamburger drawer reads cleanly without color-washing the row. */
  .nav-links a.active {
    color: var(--white);
    background: rgba(255,255,255,.06);
    box-shadow: inset 3px 0 0 rgba(255,255,255,.5);
  }
}

/* ===== Mobile Home: greeting + hero + status tiles ===== */
.home-greeting {
  width: 100%; max-width: 400px; display: flex; align-items: center;
  gap: 14px; margin-bottom: 20px;
}
.home-greeting .home-brand-mark {
  width: 44px; height: 44px; margin-bottom: 0; font-size: 1.5rem; border-radius: 12px;
  flex-shrink: 0;
}
.home-greeting-text { flex: 1; min-width: 0; }
.home-greeting-hello {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.3rem; color: var(--gray-900); line-height: 1.1;
  letter-spacing: -.01em;
}
.home-greeting-date {
  font-family: var(--font); font-size: .8rem; color: var(--gray-600);
  margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}

/* Hero tile: full-width, taller, preview of upcoming work */
.home-hero {
  width: 100%; max-width: 400px; margin-bottom: 12px;
  background: var(--blue); color: var(--white);
  border-radius: 16px; padding: 18px 18px 14px;
  box-shadow: 0 2px 8px rgba(30,63,163,.22);
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: transform .15s;
}
.home-hero:active { transform: scale(.99); }
.home-hero::before {
  /* Subtle diagonal industrial stripe (shop-floor hint) */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, transparent 0, transparent 60%, rgba(245,234,8,.08) 60%, rgba(245,234,8,.08) 63%, transparent 63%);
  pointer-events: none;
}
.home-hero-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.home-hero-title {
  font-family: var(--font-heading); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.8);
}
.home-hero-count {
  font-family: var(--font-heading); font-weight: 700; font-size: 2.4rem;
  line-height: 1; color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.home-hero-count .hero-count-sub {
  font-size: .75rem; font-family: var(--font); font-weight: 600;
  color: rgba(255,255,255,.75); margin-left: 8px; letter-spacing: 0;
  text-transform: none;
}
.home-hero-summary {
  font-family: var(--font); font-size: .85rem; color: rgba(255,255,255,.85);
  margin: 4px 0 10px;
}
.home-hero-summary strong { color: var(--yellow); font-weight: 700; }
.home-hero-list {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid rgba(255,255,255,.18);
  margin: 6px -18px -14px;
}
.home-hero-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; min-height: 44px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  cursor: pointer; transition: background .1s;
}
.home-hero-row:last-child { border-bottom: none; }
.home-hero-row:active { background: rgba(0,0,0,.15); }
.home-hero-row-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.home-hero-row-title {
  flex: 1; font-size: .9rem; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.home-hero-row-id {
  font-family: var(--font-heading); font-size: .72rem;
  color: rgba(255,255,255,.6); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.home-hero-empty {
  padding: 16px 0 6px; font-size: .9rem; color: rgba(255,255,255,.8);
  font-style: italic;
}
.home-hero-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-heading); font-weight: 700;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--yellow); margin-top: 2px;
}
.home-hero-cta svg { width: 14px; height: 14px; }

/* Tile status line under labels */
.home-tile { padding: 16px 12px 14px; min-height: 112px; }
.home-tile-status {
  font-family: var(--font); font-size: .72rem;
  color: var(--gray-600); line-height: 1.25;
  text-align: center; margin-top: 2px;
  font-weight: 600; letter-spacing: .01em;
}
.home-tile-status.warn { color: var(--orange); }
.home-tile-status.ok   { color: var(--green); }
.home-tile-status.muted{ color: var(--gray-500); font-weight: 500; }

/* Redesigned brand: smaller, quieter in the greeting */
.home-screen { padding-top: 32px; }
@supports (padding-top: env(safe-area-inset-top)) {
  .home-screen { padding-top: calc(32px + env(safe-area-inset-top)); }
}

/* Sign-out moved into the user chip dropdown on mobile too, but keep legacy link muted */
.home-signout-top { font-size: .78rem; }

.order-blocker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.order-blocker-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  line-height: 1.4;
}
.order-blocker-chip.chip-danger {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.order-blocker-chip.chip-warn {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}
.order-blocker-chip.chip-ok {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
/* Install date urgency outline — applied to order cards/wraps. */
.order-install-ready {
  box-shadow: 0 0 0 2px #16a34a, 0 2px 4px rgba(0,0,0,0.08);
  border-radius: 6px;
}
.order-install-due-soon {
  box-shadow: 0 0 0 2px #d97706, 0 2px 4px rgba(0,0,0,0.08);
  border-radius: 6px;
}
.order-install-future {
  box-shadow: 0 0 0 2px #ef4444, 0 2px 4px rgba(0,0,0,0.08);
  border-radius: 6px;
}
/* Install date pill in detail modals — same urgency palette as cards. */
.install-date-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.install-date-pill.order-install-ready {
  background: #dcfce7;
  color: #166534;
  box-shadow: none;
}
.install-date-pill.order-install-due-soon {
  background: #fef3c7;
  color: #92400e;
  box-shadow: none;
}
.install-date-pill.order-install-future {
  background: #fee2e2;
  color: #991b1b;
  box-shadow: none;
}
/* Install Workflow — stage forms */
.install-workflow-section {
  background: #fafafa;
}
.install-workflow-section h4 {
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gray-700);
}
.install-workflow-section label {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: var(--gray-700);
  margin-top: 8px;
  margin-bottom: 2px;
}
.install-workflow-section .form-input,
.install-workflow-section select.form-input,
.install-workflow-section textarea.form-input,
.install-workflow-section input.form-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 4px;
}
.install-workflow-section .form-input:focus {
  outline: none;
  border-color: #1d4ed8;
  box-shadow: 0 0 0 2px rgba(29,78,216,0.15);
}
.install-workflow-section textarea.form-input {
  resize: vertical;
  min-height: 48px;
}
.install-workflow-section .btn {
  margin-top: 8px;
}
.install-workflow-section .status-badge {
  margin-left: 6px;
  font-size: 11px;
}
/* Check-in modal form polish */
.modal-body input[type='text'].form-input,
.modal-body input[type='number'].form-input,
.modal-body input[type='date'].form-input,
.modal-body select.form-input,
.modal-body textarea.form-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  font-size: 16px; /* 16px = no iOS auto-zoom */
  font-family: inherit;
  box-sizing: border-box;
  margin-top: 2px;
  margin-bottom: 8px;
  background: #fff;
}
.modal-body textarea.form-input { resize: vertical; min-height: 56px; }
.modal-body input[type='radio'] { margin-right: 4px; }
.modal-body label { font-size: 13px; }

/* Stage drill-down pill row — shown only under Install Work */
.order-stage-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px 0;
  padding: 10px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
}
.order-stage-pill {
  background: #fff;
  color: #9a3412;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.order-stage-pill:hover { background: #fff1e4; }
.order-stage-pill.is-active {
  background: #ea580c;
  color: #fff;
  border-color: #ea580c;
}
.order-stage-pill .pill-count { opacity: 0.8; font-size: 12px; }

/* Refrigerant report — grouped subtotals (per tech, per type) */
.refrig-tech-header td   { background: #f4ece1; font-weight: 600; padding-top: 14px !important; font-size: 14px; }
.refrig-subtotal td      { background: #fafafa; font-weight: 500; border-top: 1px solid #e5e5e5; }
.refrig-techtotal td     { background: #efe3cf; font-weight: 700; }
.refrig-grandtotal td    { background: #1f1f1f; color: #fff; font-weight: 700; }

/* Hub — Training sub-pills + level chips */
.hub-sidebar-sublist             { display: flex; flex-direction: column; }
.hub-sidebar-item.is-sub         { font-size: 0.92em; opacity: 0.9; padding-left: 28px; }
.hub-sidebar-item.is-sub .hub-cat-dot { background: #a8a8a8 !important; }
.hub-level-chip                  { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 10px; font-size: 0.7em; font-weight: 700; color: #fff; vertical-align: middle; }
.hub-level-chip.lv-beginner      { background: #3b8a3b; }
.hub-level-chip.lv-intermediate  { background: #c47b00; }
.hub-level-chip.lv-advanced      { background: #a8202a; }
.hub-ed-level-row                { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.hub-ed-level-row.is-hidden      { display: none; }
.hub-ed-level-input              { padding: 6px 10px; border: 1px solid var(--gray-200, #e5e5e5); border-radius: 6px; font-size: 14px; }

/* ════════════════════════════════════════════════════════════════════
   BUDGET ARENA — competition/leaderboard module at /apps/arena.
   Broadcast-styled: deep navy chrome, vibrant team-color accents,
   no flat-white surfaces. Football tug-of-war + scoreboard shared.
   ════════════════════════════════════════════════════════════════════ */

/* Paint the surrounding viewport (the strip outside .page max-width and
   the top padding that #app adds for the nav) the same deep navy so the
   arena view doesn't sit inside a light frame. */
body:has(.arena-page), #app:has(.arena-page) { background: #0b1424; }
.page.arena-page                  { max-width: 1400px; }
.arena-page                       { padding: 12px; background: linear-gradient(180deg, #0b1424 0%, #131f37 320px, #0e1a2c 100%); min-height: calc(100vh - var(--nav-height, 64px)); color: #e6ecf5; }
.arena-page h1, .arena-page h2, .arena-page h3, .arena-page h4 { color: #f4f7fb; }
.arena-page-header                { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; padding: 4px 2px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.arena-page-header h1             { margin: 0; font-size: 1.5rem; letter-spacing: 0.02em; }

.arena-game-list                  { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.arena-game-card                  { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(145deg, #1a2a47 0%, #14213a 100%); color: #e6ecf5; cursor: pointer; transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease; box-shadow: 0 2px 6px rgba(0,0,0,0.25); position: relative; overflow: hidden; }
.arena-game-card::after           { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--blue, #1e3fa3), var(--yellow, #F5EA08)); opacity: 0.7; }
.arena-game-card:hover            { transform: translateY(-2px); border-color: rgba(245,234,8,0.45); box-shadow: 0 6px 16px rgba(0,0,0,0.4); }
.arena-game-card-row              { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.arena-game-card-name             { font-weight: 800; font-size: 1.1rem; letter-spacing: 0.01em; }
.arena-game-card-meta             { font-size: 0.85rem; color: rgba(230,236,245,0.65); }
.arena-status-pill                { padding: 3px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.arena-status-pill.live           { background: #ef4444; color: #fff; box-shadow: 0 0 0 2px rgba(239,68,68,0.25); }
.arena-status-pill.live::before   { content: ''; display: inline-block; width: 6px; height: 6px; background: #fff; border-radius: 50%; margin-right: 5px; vertical-align: middle; animation: arena-pulse 1.4s ease-in-out infinite; }
.arena-status-pill.draft          { background: rgba(255,255,255,0.12); color: #cbd5e1; }
.arena-status-pill.completed      { background: #166534; color: #dcfce7; }

@keyframes arena-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }

/* Hero */
.arena-hero                       { background: linear-gradient(135deg, var(--blue, #1e3fa3) 0%, #2c5fd1 50%, #1a2e6e 100%); color: white; padding: 18px 22px; border-radius: 12px 12px 0 0; border: 1px solid rgba(255,255,255,0.08); border-bottom: 0; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08); }
.arena-hero h2                    { margin: 0; font-size: 1.5rem; letter-spacing: 0.01em; color: #fff; }
.arena-hero-meta                  { font-size: 0.9rem; opacity: 0.85; margin-top: 4px; }
.arena-hero-actions               { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Scoreboard (top of board, both themes) */
.arena-scoreboard                 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; background: #0e1a2c; border-left: 1px solid rgba(255,255,255,0.06); border-right: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.arena-team-card                  { padding: 14px; border-radius: 10px; border: 2px solid; display: flex; flex-direction: column; gap: 6px; position: relative; background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%); color: #e6ecf5; backdrop-filter: blur(4px); }
.arena-team-card.is-leader        { box-shadow: 0 0 0 2px rgba(245,234,8,0.5), 0 6px 14px rgba(245,234,8,0.18); }
.arena-team-card.is-leader::before { content: '👑'; position: absolute; top: -10px; right: 10px; font-size: 1.4rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.arena-team-card .name            { font-weight: 800; font-size: 1.2rem; letter-spacing: 0.01em; color: #fff; }
.arena-team-card .stats           { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; font-size: 0.78rem; color: rgba(230,236,245,0.6); text-transform: uppercase; letter-spacing: 0.04em; }
.arena-team-card .stats > div span { display: block; font-size: 1.1rem; font-weight: 800; color: #fff; letter-spacing: 0; text-transform: none; }

/* Football broadcast section */
.arena-broadcast                  { background: #0e1a2c; color: #f4f4f5; padding: 14px; }
.arena-broadcast-header           { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.arena-broadcast-header h3        { margin: 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; }
.arena-td-row                     { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.arena-td-counter                 { padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; }
.arena-td-counter .team-name      { font-weight: 700; }
.arena-td-counter .count          { font-size: 1.4rem; font-weight: 800; }
.arena-td-counter .count::before  { content: '🏈 '; }

.arena-broadcast-grid             { display: grid; grid-template-columns: 320px 1fr 320px; gap: 12px; }

@media (max-width: 1024px) {
  .arena-broadcast-grid           { grid-template-columns: 1fr; }
}

.arena-feed                       { background: rgba(0,0,0,0.3); border-radius: 8px; padding: 10px; max-height: 480px; overflow-y: auto; }
.arena-feed h4                    { margin: 0 0 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; display: flex; justify-content: space-between; }
.arena-feed-item                  { padding: 8px 10px; border-radius: 6px; margin-bottom: 6px; font-size: 0.85rem; background: rgba(255,255,255,0.04); border-left: 3px solid; transition: background 200ms ease; }
.arena-feed-item.fresh            { background: rgba(255, 215, 0, 0.15); }
.arena-feed-item .who             { font-weight: 700; }
.arena-feed-item .what            { opacity: 0.85; }
.arena-feed-item .pts             { font-weight: 700; }
.arena-feed-item.voided           { opacity: 0.5; text-decoration: line-through; }

/* The field */
.arena-field-wrap                 { position: relative; background: #1a3a1a; border-radius: 10px; height: 220px; overflow: hidden; }
@media (max-width: 768px) {
  .arena-field-wrap               { height: 160px; }
}
.arena-yardlines                  { position: absolute; top: 0; left: 10%; right: 10%; bottom: 0; background-image: repeating-linear-gradient(to right, rgba(255,255,255,0.15) 0 1px, transparent 1px 10%); }
.arena-endzone                    { position: absolute; top: 0; bottom: 0; width: 10%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.15em; font-size: 0.85rem; }
.arena-endzone.left               { left: 0; }
.arena-endzone.right              { right: 0; transform: rotate(0deg); writing-mode: vertical-rl; }
.arena-ball                       { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 28px; background: #6b3610; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255, 215, 0, 0); transition: left 1.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease; z-index: 3; }
@media (max-width: 768px) {
  .arena-ball                     { width: 32px; height: 22px; }
}
.arena-ball.flash-rev             { box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.8); animation: arena-flash 1s ease-out; }
@keyframes arena-flash { 0% { box-shadow: 0 0 0 0 rgba(255,215,0,0.8) } 100% { box-shadow: 0 0 0 18px rgba(255,215,0,0) } }
.arena-ball-marker                { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.55); color: #facc15; padding: 4px 10px; border-radius: 4px; font-weight: 700; font-size: 0.8rem; z-index: 4; white-space: nowrap; }
.arena-pause-banner               { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #facc15; color: #1f2937; padding: 8px 16px; border-radius: 6px; font-weight: 800; letter-spacing: 0.05em; z-index: 5; }

/* Play toast on field */
.arena-play-toast                 { position: absolute; top: 30px; left: 50%; transform: translateX(-50%) translateY(-10px); padding: 10px 16px; background: rgba(0,0,0,0.85); color: white; border-radius: 8px; font-weight: 700; box-shadow: 0 6px 16px rgba(0,0,0,0.4); z-index: 6; opacity: 0; transition: opacity 250ms ease, transform 250ms ease; max-width: 80%; text-align: center; }
.arena-play-toast.show            { opacity: 1; transform: translateX(-50%) translateY(0); }
.arena-play-toast .team           { font-weight: 800; }
.arena-play-toast .pts            { color: #facc15; font-weight: 800; }

/* Next-score panels (right column) */
.arena-next                       { display: flex; flex-direction: column; gap: 10px; }
.arena-next-card                  { background: rgba(255,255,255,0.05); border-radius: 8px; border-left: 4px solid; padding: 10px 12px; }
.arena-next-card .label           { font-size: 0.75rem; text-transform: uppercase; opacity: 0.7; }
.arena-next-card .headline        { font-size: 1rem; font-weight: 800; margin-top: 4px; }
.arena-next-card .alt             { font-size: 0.8rem; opacity: 0.7; }
.arena-next-card .channels        { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; font-size: 0.75rem; }
.arena-next-card .channels .rev   { color: #facc15; }
.arena-next-card .channels .pts   { color: #fff; }

/* MVP + leaderboard (below broadcast) */
.arena-bottom                     { display: grid; grid-template-columns: 320px 1fr; gap: 12px; padding: 14px; background: #0e1a2c; color: #e6ecf5; border: 1px solid rgba(255,255,255,0.06); border-top: 0; border-radius: 0 0 12px 12px; }
@media (max-width: 768px) {
  .arena-bottom                   { grid-template-columns: 1fr; }
  .arena-scoreboard               { grid-template-columns: 1fr; }
  .arena-td-row                   { grid-template-columns: 1fr; }
}
.arena-mvp-card                   { background: linear-gradient(135deg, #1e3fa3 0%, #4f46e5 100%); color: white; border-radius: 10px; padding: 14px; box-shadow: 0 4px 12px rgba(30,63,163,0.35); }
.arena-mvp-card .label            { font-size: 0.75rem; text-transform: uppercase; opacity: 0.85; letter-spacing: 0.08em; }
.arena-mvp-card .name             { font-size: 1.4rem; font-weight: 800; margin-top: 4px; }
.arena-mvp-card .stats            { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; font-size: 0.75rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; }
.arena-mvp-card .stats span       { display: block; font-weight: 800; font-size: 1.05rem; opacity: 1; letter-spacing: 0; text-transform: none; }

.arena-leaderboard                { display: flex; flex-direction: column; gap: 4px; background: rgba(0,0,0,0.18); border-radius: 10px; padding: 6px; }
.arena-leaderboard-row            { display: grid; grid-template-columns: 30px 1.4fr 1fr auto auto; gap: 10px; padding: 8px 12px; align-items: center; border-radius: 6px; color: #e6ecf5; font-size: 0.9rem; }
.arena-leaderboard-row.has-yards  { grid-template-columns: 30px 1.4fr 1fr auto auto auto; }
.arena-leaderboard-row:nth-child(even) { background: rgba(255,255,255,0.03); }
.arena-leaderboard-row.you        { background: rgba(245,234,8,0.12); box-shadow: inset 0 0 0 1px rgba(245,234,8,0.35); }
.arena-leaderboard-row .rank      { font-weight: 800; color: rgba(230,236,245,0.55); }
.arena-leaderboard-row .name      { font-weight: 600; }
.arena-leaderboard-row .team-col  { color: rgba(230,236,245,0.65); font-size: 0.82rem; }
.arena-leaderboard-row .pts       { font-weight: 700; color: #f4f7fb; }
.arena-leaderboard-row .rev       { font-weight: 800; color: #5eead4; }
.arena-leaderboard-row .yards     { font-weight: 800; color: var(--yellow, #F5EA08); }
.arena-leaderboard-row .team-dot  { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 4px; box-shadow: 0 0 0 2px rgba(255,255,255,0.15); }
@media (max-width: 640px) {
  .arena-leaderboard-row          { grid-template-columns: 24px 1fr auto auto; }
  .arena-leaderboard-row.has-yards { grid-template-columns: 24px 1fr auto auto; }
  .arena-leaderboard-row .team-col,
  .arena-leaderboard-row .yards   { display: none; }
}

/* Touchdown overlay */
.arena-td-overlay                 { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 250ms ease; }
.arena-td-overlay.show            { opacity: 1; pointer-events: auto; }
.arena-td-overlay .text           { font-size: 4rem; font-weight: 900; color: white; letter-spacing: 0.05em; text-shadow: 0 6px 16px rgba(0,0,0,0.6); animation: arena-td-pop 700ms ease-out; }
@keyframes arena-td-pop { 0% { transform: scale(0.5); opacity: 0 } 70% { transform: scale(1.1); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }

/* Prizes strip */
.arena-prizes                     { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px; background: #0e1a2c; border-left: 1px solid rgba(255,255,255,0.06); border-right: 1px solid rgba(255,255,255,0.06); }
.arena-prize-chip                 { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(245,234,8,0.35); color: #f4f7fb; font-size: 0.85rem; font-weight: 600; }

/* Wizard */
.arena-wizard                     { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.arena-wizard fieldset            { border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 14px 18px; background: rgba(255,255,255,0.04); }
.arena-wizard legend              { font-weight: 800; padding: 0 8px; color: var(--yellow, #F5EA08); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; }
.arena-wizard label               { display: block; margin-top: 8px; font-size: 0.8rem; color: rgba(230,236,245,0.7); text-transform: uppercase; letter-spacing: 0.04em; }
.arena-wizard input[type="text"], .arena-wizard input[type="number"], .arena-wizard input[type="date"], .arena-wizard textarea, .arena-wizard select { width: 100%; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.25); color: #f4f7fb; border-radius: 6px; font-size: 14px; }
.arena-wizard input[type="text"]:focus, .arena-wizard input[type="number"]:focus, .arena-wizard input[type="date"]:focus, .arena-wizard textarea:focus, .arena-wizard select:focus { outline: none; border-color: var(--yellow, #F5EA08); box-shadow: 0 0 0 2px rgba(245,234,8,0.25); }

.arena-team-row, .arena-event-row, .arena-prize-row { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 8px; padding: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.18); border-radius: 8px; margin-top: 6px; align-items: center; }
.arena-team-row .swatch           { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
.arena-team-row input[type="color"] { width: 30px; height: 30px; padding: 0; border: 0; cursor: pointer; background: transparent; }

/* Preset picker (inside wizard "+ Add" modals) */
.arena-preset-grid                { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; max-height: 360px; overflow-y: auto; padding: 4px; }
.arena-preset-tile                { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; border: 1px solid var(--gray-200, #e5e5e5); background: linear-gradient(145deg, #f8fafc 0%, #eef2f7 100%); cursor: pointer; transition: transform 100ms ease, border-color 100ms ease; position: relative; }
.arena-preset-tile:hover          { transform: translateY(-1px); border-color: var(--blue, #1e3fa3); }
.arena-preset-tile .pt-emoji      { font-size: 1.6rem; }
.arena-preset-tile .pt-label      { font-weight: 700; font-size: 0.95rem; color: #111; }
.arena-preset-tile .pt-meta       { font-size: 0.78rem; color: var(--gray-500, #6b7280); }
.arena-preset-tile .pt-badge      { position: absolute; top: 6px; right: 6px; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 999px; background: var(--blue-light, #e8edf8); color: var(--blue, #1e3fa3); }
.arena-preset-tile .pt-badge.custom { background: #fef3c7; color: #92400e; }
.arena-preset-tile .pt-actions    { display: flex; gap: 4px; margin-top: 6px; }
.arena-preset-tile .pt-actions button { font-size: 0.72rem; padding: 4px 8px; }
.arena-preset-tile.is-custom-add  { background: linear-gradient(145deg, #1e3fa3 0%, #2c5fd1 100%); color: #fff; border-color: transparent; align-items: center; justify-content: center; text-align: center; min-height: 110px; }
.arena-preset-tile.is-custom-add .pt-label { color: #fff; font-size: 1rem; }
.arena-preset-tile.is-custom-add .pt-meta  { color: rgba(255,255,255,0.85); }

/* Reveal panel */
.arena-reveal-list                { display: flex; flex-direction: column; gap: 6px; }
.arena-reveal-item                { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; padding: 10px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #e6ecf5; border-radius: 8px; align-items: center; }
.arena-reveal-item .order         { font-weight: 800; color: rgba(230,236,245,0.55); }
.arena-reveal-item .move          { display: flex; gap: 4px; }
.arena-reveal-item .pts           { font-weight: 800; color: var(--yellow, #F5EA08); }

/* Mobile touch targets */
@media (max-width: 768px) {
  .arena-page                     { padding: 8px; }
  .arena-team-card                { padding: 10px; }
  .arena-broadcast                { padding: 10px; }
  .btn-arena                      { min-height: 44px; min-width: 44px; }
}

/* Coming Soon badge — used on the Arena nav link + mobile home tile */
.coming-soon-badge                { display: inline-block; margin-left: 6px; padding: 2px 7px; background: #dc2626; color: #fff; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; vertical-align: middle; box-shadow: 0 1px 3px rgba(220,38,38,0.4); }
.coming-soon-badge.tile           { margin-left: 0; margin-top: 4px; padding: 3px 8px; font-size: 0.7rem; }

/* Contacts directory — clean white cards with a subtle blue accent, capped to
   a fixed max width so a directory of 1 reads the same as a directory of 50.
   Bigger fonts and a prominent search field since this is a phone-first tool. */

/* Search field: real styling (the bare <input type=search> had none on
   desktop). Magnifying-glass icon, big tap target, blue focus ring. */
#contacts-search {
  height: 52px;
  padding: 0 16px 0 46px;
  font-family: var(--font);
  font-size: 1.05rem;
  color: var(--gray-900);
  background: var(--white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231e3fa3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")
    no-repeat 15px center;
  border: 2px solid var(--gray-300);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
#contacts-search::placeholder { color: var(--gray-600); }
#contacts-search:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,63,163,.12);
}

.contacts-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
  justify-content: start;
  align-items: stretch;
}
.contact-card {
  padding: 18px;
  /* Was a fixed 210px height, which cramped/clipped cards that carry email,
     website, multiple phones, and Edit/Delete. min-height keeps a consistent
     baseline while letting fuller cards grow; the grid's align-items:stretch
     still levels cards within a row. */
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--gray-200, #e9ecef);
  border-left: 3px solid var(--blue, #1e3fa3);
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(30,63,163,.35);
  border-left-color: var(--blue-dark, #162e7a);
}
.contact-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.contact-card-title-wrap { min-width: 0; flex: 1 1 auto; }
.contact-card-name {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--blue-dark, #162e7a);
  word-break: break-word;
  /* Clamp long company names to 2 lines so the fixed card height holds. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.contact-card-person {
  margin-top: 2px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--gray-900, #212529);
  word-break: break-word;
}
.contact-card-cat {
  background: var(--blue-light, #e8edf8);
  color: var(--blue, #1e3fa3);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}
.contact-card-phones { margin-top: auto; }
.contact-card-phone-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.contact-phone-link {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--blue, #1e3fa3);
  text-decoration: none;
}
.contact-phone-link:hover { text-decoration: underline; }
.contact-card-phone-label {
  font-size: 1.05rem;
  color: var(--gray-800, #343a40);
}
.contact-card-picker {
  width: 100%;
  font-size: 1.05rem;
  min-height: 46px;
}
.contact-card-nophone { font-size: 1.05rem; }
/* Email / website rows — tappable, single-line with ellipsis so long
   addresses never push the card wide. */
.contact-card-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.contact-card-meta-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 1rem; color: var(--blue, #1e3fa3); text-decoration: none;
  min-width: 0;
}
.contact-card-meta-row:hover { text-decoration: underline; }
.contact-card-meta-icon { flex: 0 0 auto; font-size: .95rem; }
.contact-card-meta-text {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-card-actions { margin-top: 12px; }

@media (max-width: 768px) {
  .contacts-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .contact-card {
    padding: 18px;
    min-height: 0;
  }
  #contacts-search        { height: 50px; font-size: 16px; min-height: 50px; }
  .contact-card-name      { font-size: 1.45rem; }
  .contact-card-person    { font-size: 1.1rem; }
  .contact-phone-link     { font-size: 1.45rem; }
  .contact-card-phone-label { font-size: 1.1rem; }
  .contact-card-cat       { font-size: 0.95rem; }
  .contact-card-picker    { min-height: 50px; font-size: 1.1rem; }
  .contact-card-nophone   { font-size: 1.1rem; }
  .contact-card-meta-row  { font-size: 1.05rem; min-height: 32px; }
}

/* ═══════════════ Call Desk (RingCentral) ═══════════════ */

.calls-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.calls-date {
  padding: 8px 10px; border: 1px solid var(--gray-300);
  border-radius: var(--radius); font: inherit; background: var(--white);
}
/* Dimmed (not disabled — still shows the active day) while a cross-date
   search is active, since the date has no effect on the results shown. */
.calls-date-inactive { opacity: .5; }
.calls-search-wrap { display: inline-flex; position: relative; }
.calls-search {
  min-width: 260px; padding: 8px 30px 8px 10px; border: 1px solid var(--gray-300);
  border-radius: var(--radius); font: inherit; background: var(--white);
}
.calls-search-clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; font-size: 18px;
  line-height: 1; color: var(--gray-500); padding: 2px 6px;
}
.calls-search-clear:hover { color: var(--gray-800); }
.calls-sync-status { font-size: 13px; }
.calls-stats {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-bottom: 16px; font-size: 14px; color: var(--gray-700);
}
.calls-stats b { color: var(--gray-900); }

.calls-group { padding: 0; margin-bottom: 14px; overflow: hidden; }
.calls-group > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline;
  gap: 12px; flex-wrap: wrap; padding: 12px 16px;
}
.calls-group > summary::-webkit-details-marker { display: none; }
.calls-group-name { font-weight: 700; font-size: 16px; }
.calls-group-line { font-size: 13px; }

.calls-table-scroll { overflow-x: auto; }
.calls-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.calls-table th {
  text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--gray-600); font-weight: 600;
  padding: 6px 12px; border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200); background: var(--gray-50);
}
.calls-table td {
  padding: 8px 12px; border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}
.calls-t-time { white-space: nowrap; color: var(--gray-700); }
.calls-t-dur { white-space: nowrap; font-variant-numeric: tabular-nums; }
.calls-party-name { font-weight: 600; }
.calls-party-num { font-size: 12px; color: var(--gray-600); }
.calls-t-actions { text-align: right; white-space: nowrap; }
.calls-t-actions .btn + .btn { margin-left: 6px; }

.calls-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.calls-badge.in  { background: var(--s-active-surface); color: var(--s-active-ink); }
.calls-badge.out { background: var(--s-resolved-surface); color: var(--s-resolved-ink); }

.calls-play-btn.active { background: var(--red); color: var(--white); }

.calls-tape-row td, .calls-transcript-row td { background: var(--gray-50); }
.calls-tape-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 4px;
}
.calls-tape-strip audio { flex: 1; min-width: 220px; max-width: 480px; height: 36px; }
.calls-rec-label {
  font-size: 11px; font-weight: 700; color: var(--red);
  letter-spacing: .05em; white-space: nowrap;
}
.calls-rec-label::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--red); margin-right: 6px;
  animation: calls-blink 1.2s infinite;
}
@keyframes calls-blink { 50% { opacity: .25; } }

.calls-transcript-panel { padding: 10px 4px; }
.calls-transcript-panel h4 {
  margin: 8px 0 4px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gray-600);
}
.calls-transcript-panel pre {
  white-space: pre-wrap; word-break: break-word; font-size: 13px;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 10px 12px; margin: 0 0 8px;
  max-height: 320px; overflow-y: auto;
}

.calls-summaries-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--gray-700); cursor: pointer; user-select: none;
}

/* Sentiment / follow-up filter bar */
.calls-filterbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px;
}
.calls-filter-btn {
  padding: 5px 14px; border-radius: 999px; border: 1px solid var(--gray-300);
  background: var(--white); font: inherit; font-size: 13px; font-weight: 600;
  color: var(--gray-700); cursor: pointer;
}
.calls-filter-btn:hover { border-color: var(--gray-400, #9ca3af); }
.calls-filter-btn.active { color: #fff; border-color: transparent; }
.calls-filter-btn.active.s-all { background: var(--blue, #1e3fa3); }
.calls-filter-btn.active.s-positive { background: #0f7b40; }
.calls-filter-btn.active.s-neutral { background: var(--gray-600); }
.calls-filter-btn.active.s-negative { background: #b42318; }
.calls-fu-btn { margin-left: auto; }
.calls-fu-btn.active { background: #b45309; color: #fff; border-color: transparent; }

/* Follow-ups view cards */
.calls-fu-card {
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
  border-left: 3px solid #b45309;
}
.calls-fu-card:hover { background: var(--gray-50); }
.calls-fu-head { font-size: 13px; color: var(--gray-700); margin-bottom: 4px; }
.calls-fu-head b { color: var(--gray-900); }
.calls-fu-reason { font-weight: 600; font-size: 14px; color: #b45309; }
.calls-fu-summary { font-size: 13px; margin-top: 4px; }

/* Flash when jumping to a call from the follow-ups view */
.calls-row-flash td { animation: calls-flash 2.4s ease-out; }
@keyframes calls-flash {
  0%, 45% { background: #fff3c9; }
  100% { background: transparent; }
}

/* Summary + transcript rows share a left rail so it's obvious which call
   they hang off of. */
.calls-summary-row td { background: var(--gray-50); padding: 6px 12px 10px; }
.calls-summary-row td, .calls-transcript-row td {
  border-left: 3px solid var(--blue, #1e3fa3);
}
.calls-summary-row .calls-analysis { border-left: 1px solid var(--gray-200); }

.calls-analysis {
  background: var(--white); border: 1px solid var(--gray-200);
  border-left: 3px solid var(--blue, #1e3fa3);
  border-radius: var(--radius); padding: 10px 12px; font-size: 13px;
}
.calls-analysis-summary { color: var(--gray-900); line-height: 1.45; }
.calls-analysis-chips {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px;
}
.calls-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  background: var(--gray-100); color: var(--gray-700);
  border: 1px solid var(--gray-200); text-transform: capitalize;
}
.calls-chip.sentiment-positive { background: var(--s-resolved-surface); color: var(--s-resolved-ink); border-color: transparent; }
.calls-chip.sentiment-negative { background: #fde8e8; color: #b42318; border-color: transparent; }
.calls-chip.sentiment-neutral { background: var(--gray-100); color: var(--gray-700); }
.calls-chip-followup { background: #fef3e2; color: #b45309; border-color: transparent; text-transform: none; }
.calls-dialer-chip {
  display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200);
}
.calls-analysis-intent { margin-top: 8px; color: var(--gray-700); }
.calls-analysis-intent b { color: var(--gray-900); font-weight: 600; }

@media (max-width: 768px) {
  .calls-h-result, .calls-t-result { display: none; }
  .calls-table td { padding: 8px 8px; }
}

@media (max-width: 640px) {
  .calls-search-wrap { width: 100%; }
  .calls-search { width: 100%; min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   Processing Center — dashboard master-detail work queue
   ══════════════════════════════════════════════════════════════════ */
/* The queue column stays readable at a fixed-ish width; the detail pane takes
   every remaining pixel. The wrap itself stretches with the window (softly
   capped so ultrawide monitors don't produce unreadable line lengths).
   Responsive column widths live in the redesign block further down. */
.pc-wrap {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  max-width: 2100px;
  margin: 0 auto;
  width: 100%;
}
/* Dashboard escapes the site-wide 1400px page cap — keep breathing room at
   the edges but let the board use the whole monitor. */
.page.dash-page { max-width: none; }
@media (min-width: 1200px) {
  .page.dash-page { padding-left: 36px; padding-right: 36px; }
}
.pc-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pc-list-head h2 {
  font-size: 26px !important;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.pc-keys-hint { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.pc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 64 nav + 40 page padding + ~60 header + ~90 list head/filter + slack —
     sized so a full queue never makes the page itself scroll. */
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  padding: 2px 6px 12px 2px;
}
.pc-row {
  background: var(--white);
  border-radius: 10px;
  border-left: 6px solid var(--gray-400);
  padding: 12px 12px 12px 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.12s, box-shadow 0.12s;
}
.pc-row:hover { transform: translateX(3px); box-shadow: var(--shadow-md); }
.pc-row:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.pc-row.selected { outline: 3px solid var(--yellow); box-shadow: var(--shadow-md); }
.pc-row.pc-prio-urgent { border-left-color: #dc2626; }
.pc-row.pc-prio-high { border-left-color: #ea580c; }
.pc-row.pc-prio-medium { border-left-color: #2563eb; }
.pc-row.pc-prio-low { border-left-color: #9ca3af; }
.pc-row.overdue { box-shadow: 0 0 0 2px #dc2626, var(--shadow-md); }
.pc-row-type {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 6px;
  line-height: 1.2;
  margin-top: 2px;
  min-width: 44px;
  text-align: center;
  flex-shrink: 0;
}
.pc-type-email { background: var(--blue-light); color: var(--blue-dark); }
.pc-type-call { background: #dcfce7; color: #15803d; }
.pc-type-note { background: var(--gray-100); color: var(--gray-700); }
.pc-type-arrive { background: #e6f6ec; color: #1a7f4b; }
.pc-type-done { background: #e6f6ec; color: #1a7f4b; }
.pc-type-return { background: #fde8e8; color: #b42318; }
.pc-row-main { flex: 1; min-width: 0; }
.pc-row-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--gray-900);
  line-height: 1.25;
  word-break: break-word;
}
.pc-row-sub {
  font-size: 14px;
  color: var(--gray-700);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-row-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pc-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-700);
  white-space: nowrap;
}
.pc-chip-cat { background: var(--blue-light); color: var(--blue-dark); text-transform: capitalize; }
.pc-chip-draft { background: #e6f6ec; color: #1a7f4b; }
.pc-chip-overdue { background: #fde8e8; color: #b42318; font-weight: 800; letter-spacing: 0.03em; }
.pc-chip-id { background: var(--gray-100); color: var(--gray-600); font-family: var(--font-heading); letter-spacing: 0.04em; }
.pc-row-time { font-size: 12.5px; color: var(--gray-600); white-space: nowrap; margin-top: 2px; }
.pc-empty-list {
  background: rgba(255, 255, 255, 0.08);
  border: 2px dashed rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 30px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
}
.pc-empty-icon { font-size: 34px; margin-bottom: 8px; }

/* Detail pane */
.pc-detail-col {
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  min-height: 420px;
  max-height: calc(100vh - 230px);
  overflow-y: auto;
}
.pc-detail { padding: 22px 26px 26px; }
.pc-detail-head { margin-bottom: 12px; }
.pc-detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pc-detail-title {
  font-family: var(--font-heading);
  font-size: 26px !important;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.15;
  margin: 0;
  word-break: break-word;
}
.pc-detail-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pc-info { margin: 10px 0 14px; }
.pc-info-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 15.5px;
}
.pc-info-label {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-800);
  padding-top: 2px;
}
.pc-info-value { color: #111827; word-break: break-word; }
.pc-info-value a { color: var(--blue); text-decoration: underline; }
.pc-section-label {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin: 18px 0 8px;
}
.pc-email-body {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 14px 16px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--gray-900);
}
.pc-reply-text {
  width: 100%;
  /* Compact by default — most emails get filed, not answered. Drag the
     resize handle for a longer reply. */
  min-height: 74px;
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 2px solid var(--gray-300);
  border-radius: 8px;
  resize: vertical;
  font-family: var(--font);
}
.pc-reply-text:focus { border-color: var(--blue); outline: none; }
.pc-return-warn {
  background: #fde8e8;
  border-left: 5px solid #dc2626;
  color: #7f1d1d;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin: 10px 0 14px;
  font-size: 15.5px;
}
.pc-actions {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pc-action-col { display: flex; flex-direction: column; gap: 4px; }
.pc-action-col.pc-grow { flex: 1; min-width: 220px; }
.pc-action-help { font-size: 13.5px; color: var(--gray-600); max-width: 260px; }
.pc-btn-big { font-size: 17px; padding: 12px 22px; min-height: 48px; }
.pc-armed { background: #b42318 !important; color: #fff !important; }
.pc-close-plain { align-self: center; }
.pc-notes { margin-top: 22px; border-top: 2px solid var(--gray-100); padding-top: 12px; }
.pc-notes-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pc-note { background: var(--gray-50); border-radius: 8px; padding: 8px 12px; }
.pc-note-head { font-size: 12.5px; color: var(--gray-600); font-weight: 600; margin-bottom: 2px; }
.pc-note-body { font-size: 15px; color: var(--gray-900); white-space: pre-wrap; }
.pc-note-empty { color: var(--gray-600); font-size: 14px; }
.pc-note-add { display: flex; gap: 8px; align-items: flex-start; }
.pc-note-add textarea {
  flex: 1;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  font-family: var(--font);
}
.pc-empty { text-align: center; padding: 70px 20px; color: var(--gray-600); }
.pc-empty h3 { font-family: var(--font-heading); color: var(--gray-800); font-size: 24px; margin: 8px 0 6px; }
.pc-back { display: none; margin-bottom: 10px; }

/* Mobile: full-width list, detail slides in over it */
@media (max-width: 768px) {
  .pc-wrap { display: block; }
  .pc-list { max-height: none; padding-right: 2px; }
  .pc-row-sub { white-space: normal; }
  .pc-detail-col {
    position: fixed;
    /* Match the nav's real height — it grows by the safe-area inset on
       notched phones, and the back button hides under it otherwise. */
    top: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    border-radius: 0;
    max-height: none;
    transform: translateX(103%);
    transition: transform 0.25s ease;
  }
  .pc-wrap.pc-show-detail .pc-detail-col { transform: translateX(0); }
  .pc-back { display: inline-flex; }
  .pc-detail { padding: 14px 16px 90px; }
  .pc-actionbar-sticky {
    position: sticky;
    bottom: 0;
    background: var(--white);
    padding: 12px 0 4px;
    border-top: 2px solid var(--gray-200);
    z-index: 5;
  }
  .pc-btn-big { width: 100%; }
  .pc-action-col { width: 100%; }
  .pc-action-help { max-width: none; }
  .pc-keys-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-row, .pc-detail-col { transition: none; }
}

/* ── Processing Center v2: Budget-branded visual pass ──
   Deep navy backdrop with a brand-blue glow and faint diagonal stripes
   (the stripe motif comes from Budget's page-header brand pattern). */
body:has(.dash-page), #app:has(.dash-page), .dash-page {
  background:
    repeating-linear-gradient(-45deg, transparent 0 44px, rgba(255, 255, 255, 0.018) 44px 88px),
    radial-gradient(1100px 520px at 88% -8%, rgba(46, 82, 201, 0.45), transparent 62%),
    linear-gradient(168deg, #16265c 0%, #131c40 48%, #0f1220 100%);
}
.dash-page .page-header h1 { position: relative; padding-bottom: 8px; letter-spacing: 0.01em; }
.dash-page .page-header h1::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58px;
  height: 4px;
  background: var(--yellow);
  border-radius: 2px;
}
.pc-list-head h2 { font-size: 28px !important; }
#pc-count { background: var(--yellow); color: #152d7a; font-weight: 800; }
.pc-keys-hint { color: rgba(255, 255, 255, 0.6); }

/* Queue filter pill */
.pc-filter { margin: -2px 0 10px; }
.pc-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14.5px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 6px 12px;
  border-radius: 999px;
  user-select: none;
}
.pc-filter-toggle:hover { background: rgba(255, 255, 255, 0.14); }
.pc-filter-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--yellow);
  margin: 0;
  cursor: pointer;
}
.pc-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pc-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.pc-sort-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 2px;
}
.pc-sort-btn {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
}
.pc-sort-btn:hover { background: rgba(255, 255, 255, 0.14); }
.pc-sort-btn.active {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--gray-900);
}

/* Presence — who else has this item open */
.pc-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1a7f4b;
  background: #e6f6ec;
  border-radius: 999px;
  padding: 2px 9px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-presence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1a7f4b;
  flex-shrink: 0;
  animation: pc-presence-pulse 2s ease-in-out infinite;
}
@keyframes pc-presence-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.pc-detail-presence-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--white);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 3px 11px;
}
.pc-detail-presence-chip .pc-presence-dot { background: var(--yellow); }
@media (prefers-reduced-motion: reduce) {
  .pc-presence-dot { animation: none; }
}

/* Day stats — the default detail view when nothing is selected */
.pc-stats { padding-top: 20px; }
.pc-stats-head { margin-bottom: 14px; }
.pc-stats-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  color: var(--blue);
  margin: 0;
}
.pc-stats-sub { color: var(--gray-600); font-size: 14.5px; margin: 2px 0 0; }
.pc-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.pc-stat-tile {
  background: var(--gray-100);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
}
.pc-stat-value {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.1;
}
.pc-stat-label { font-size: 13.5px; font-weight: 600; color: var(--gray-700); margin-top: 4px; }
.pc-stat-bad .pc-stat-value { color: #dc2626; }
.pc-stat-good .pc-stat-value { color: #1a7f4b; }
.pc-stats-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pc-stats-clear { color: var(--gray-700); margin-top: 14px; }
.pc-stats-section {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--gray-900);
  margin: 22px 0 8px;
}
.pc-stats-presence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #e6f6ec;
  border-radius: 10px;
  margin-bottom: 6px;
  color: #14532d;
  font-size: 15px;
}
.pc-stats-idle { color: var(--gray-600); font-size: 14.5px; }
.pc-stats-handled-by { color: var(--gray-600); font-size: 14px; margin-top: 14px; }

/* Facts sit in two columns once the pane is wide enough to afford them */
@media (min-width: 1100px) {
  .pc-detail .pc-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: start;
  }
}

/* Source document: quiet, inset, clearly "the record" not the interface */
.pc-email-body {
  background: #f8fafc;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* Command bar: pinned to the pane bottom on desktop so actions never leave
   the operator's reach; mobile keeps its own sticky treatment. */
@media (min-width: 769px) {
  .pc-actions.pc-actionbar-sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--white);
    margin: 18px calc(-1 * var(--pc-pad-x)) 0;
    padding: 14px var(--pc-pad-x) 16px;
    border-top: 3px solid var(--gray-100);
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.07);
  }
}

/* Per-filter open-count pill — always visible, on or off */
.pc-flt-count {
  min-width: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--yellow);
}
.pc-filter-reset {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  background: var(--yellow);
  border: 1px solid var(--yellow);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.pc-filter-reset:hover { filter: brightness(1.06); }

/* Collapsed filter row: yellow Filters button + passive chips for whichever
   types are on. The full toggles live in a dropdown so the row stays one
   line — the queue owns that space. */
.pc-filter-anchor { position: relative; }
.pc-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--gray-900);
  background: var(--yellow);
  border: 1px solid var(--yellow);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.pc-filter-btn:hover { filter: brightness(1.06); }
.pc-filter-caret { font-size: 10px; line-height: 1; }
.pc-filter-btn[aria-expanded="true"] .pc-filter-caret { transform: rotate(180deg); }
.pc-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 210px;
  background: var(--gray-900);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.pc-filter-panel[hidden] { display: none; }
.pc-filter-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.pc-flt-sum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 3px 8px 3px 10px;
  white-space: nowrap;
}
.pc-flt-sum .pc-flt-count { min-width: 20px; font-size: 12px; padding: 0 6px; }
.pc-flt-sum-none { font-size: 13px; color: rgba(255, 255, 255, 0.55); }

/* Closed confirmation: the finished item shrinks away under a ✓ badge, then
   the pane returns to the deselected stats screen. */
.pc-detail.pc-closing {
  position: relative;
  overflow: hidden;
}
.pc-detail.pc-closing > *:not(.pc-closed-flash) {
  animation: pcShrinkAway 0.45s ease forwards;
}
@keyframes pcShrinkAway {
  to {
    transform: scale(0.9);
    opacity: 0;
  }
}
.pc-closed-flash {
  position: absolute;
  inset: 0;
  display: flex;
  /* Anchored near the top, not the pane's center — a long email's center
     can sit below the fold. */
  align-items: flex-start;
  justify-content: center;
  padding-top: 130px;
  pointer-events: none;
  animation: pcFlashIn 0.18s ease;
}
@keyframes pcFlashIn {
  from { opacity: 0; transform: scale(0.85); }
}
.pc-closed-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--gray-900);
  background: var(--yellow);
  border-radius: 999px;
  padding: 12px 26px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.pc-closed-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1d9e55;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

/* Desktop: the queue column is a viewport-fit flex stack — the filter bar can
   wrap to any number of lines and the list absorbs the difference, so the
   page itself never scrolls. */
@media (min-width: 769px) {
  .pc-list-col {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 170px);
    min-height: 0;
  }
  .pc-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  .pc-detail-col { max-height: calc(100vh - 170px); }
}

/* Today at a glance: control-room sizes, readable across the office */
.pc-stats-title { font-size: 30px; }
.pc-stats-sub { font-size: 16px; }
.pc-stat-value { font-size: 42px; }
.pc-stat-label { font-size: 15px; }
.pc-stats-kinds .pc-chip { font-size: 14.5px; padding: 4px 12px; }
.pc-stats-section { font-size: 19px; }
.pc-stats-presence-row { font-size: 16.5px; }
.pc-stats-idle { font-size: 16px; }
.pc-stats-handled-by { font-size: 15.5px; }
.pc-stats-clear { font-size: 16.5px; }

/* Queue row: one-line AI summary under the sender line */
.pc-row-summary {
  font-size: 13.5px;
  color: var(--gray-600);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Detail pane: AI summary box leads the pane — the briefing card */
.pc-summary-box {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 5px solid var(--blue);
  box-shadow: var(--shadow);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0 12px;
}
.pc-summary-label {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 3px;
}
.pc-summary-text { font-size: 16px; color: #111827; line-height: 1.45; }

/* Trusted attachments — deep link to the message in Outlook web */
.pc-attach-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 10px;
}
.pc-attach-row .pc-action-help { margin: 0; }

/* "File to" folder picker beside Archive */
.pc-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pc-file-label { font-size: 13.5px; font-weight: 700; color: var(--gray-700); white-space: nowrap; }
.pc-folder-select {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  padding: 8px 10px;
  border: 2px solid var(--gray-300);
  border-radius: 8px;
  background: var(--white);
  color: var(--gray-900);
}
.pc-folder-select:focus { outline: 3px solid var(--yellow); outline-offset: 1px; }

/* AI phone-agent behavior review — flagged transcript issues */
.pc-agent-review {
  background: #fef3e2;
  border: 2px solid #f59e0b;
  border-left-width: 6px;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
}
.pc-agent-review-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #92400e;
  margin-bottom: 4px;
}
.pc-agent-review-body { font-size: 15.5px; color: #78350f; line-height: 1.45; }

/* Return-to-stats button lives in the blue detail banner, top-right */
.pc-stats-btn { float: right; }
.pc-detail-head .pc-stats-btn {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  border: none;
}
.pc-detail-head .pc-stats-btn:hover { background: rgba(255, 255, 255, 0.26); }

/* Queue rows: bigger type, livelier motion */
.pc-row { border-radius: 12px; padding: 13px 14px 13px 11px; }
.pc-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pc-row.selected {
  outline: none;
  box-shadow: 0 0 0 3px var(--yellow), var(--shadow-lg);
  transform: translateX(4px);
}
.pc-row-title { font-size: 17px; }
.pc-row-sub { font-size: 15px; }
.pc-row-time { font-size: 13px; }
.pc-row-type { font-size: 12.5px; }

/* Detail pane: brand-blue header band */
.pc-detail { --pc-pad-x: 26px; padding: 0 var(--pc-pad-x) 26px; }
.pc-detail-head {
  background:
    repeating-linear-gradient(-45deg, transparent 0 40px, rgba(255, 255, 255, 0.035) 40px 80px),
    linear-gradient(135deg, var(--blue) 0%, #2e52c9 100%);
  margin: 0 calc(-1 * var(--pc-pad-x)) 18px;
  padding: 18px var(--pc-pad-x) 16px;
  border-radius: 12px 12px 0 0;
}
.pc-detail-title { color: var(--white); font-size: 28px !important; font-weight: 800; }
.pc-chip-id { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.92); }
.pc-detail-head .pc-back {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  border: none;
}

/* Bigger desktop reading sizes */
.pc-info-row { font-size: 16.5px; }
.pc-info-label { font-size: 13.5px; }
.pc-section-label { font-size: 15px; color: var(--blue); }
.pc-email-body { font-size: 16.5px; }
.pc-reply-text { font-size: 16.5px; }
.pc-note-body { font-size: 15.5px; }
.pc-action-help { font-size: 14px; }
.pc-btn-big {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
}

/* Spam: archive-first notice */
.pc-spam-note {
  border-left: 4px solid var(--yellow);
  background: #fffde7;
  color: var(--gray-800);
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  margin: 14px 0 4px;
  font-size: 15.5px;
}

/* 10-8 checklist: breathing room between checkbox and label */
.pc-d8-form .d8-flag { display: flex; align-items: center; gap: 10px; }
.pc-d8-form .d8-flag input { margin: 0; flex-shrink: 0; width: 18px; height: 18px; }
.pc-d8-form .d8-flag span { line-height: 1.35; }

@media (max-width: 768px) {
  .pc-detail { --pc-pad-x: 16px; padding-bottom: 90px; }
  .pc-detail-head { border-radius: 0; }
  .pc-detail-title { font-size: 24px !important; }
}

/* ── Processing Center v3: calm solid navy, pill-based priority, bigger + clearer ── */

/* Solid dark blue backdrop — no gradients, no stripes */
body:has(.dash-page), #app:has(.dash-page), .dash-page {
  background: #16265c;
}
/* ── Detail pane as a work window ────────────────────────────────────
   Four zones with distinct jobs: identity header (blue, yellow keyline),
   briefing (summary + facts in black text), source document (the email or
   transcript), and a command bar that stays under your cursor. */
.pc-detail-head {
  background: var(--blue);
  border-bottom: 3px solid var(--yellow);
  padding-top: 16px;
  padding-bottom: 14px;
}
.pc-detail-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.pc-detail-eyebrow .pc-chip-id {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  margin-left: auto;
}
.pc-detail-subtitle {
  margin-top: 6px;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.88);
}
.pc-detail-subtitle-email { color: var(--yellow); font-weight: 600; word-break: break-all; }

/* Rows: bigger bubbles, no colored edge — priority is a pill now */
/* Queue column flexes gently with the window; the detail pane takes the rest. */
.pc-wrap { grid-template-columns: clamp(400px, 30vw, 480px) minmax(0, 1fr); gap: 20px; }
.pc-list { gap: 10px; }
.pc-row {
  border-left: none;
  border-radius: 14px;
  padding: 16px;
  gap: 12px;
}
.pc-row.pc-prio-urgent,
.pc-row.pc-prio-high,
.pc-row.pc-prio-medium,
.pc-row.pc-prio-low { border-left: none; }
.pc-row-title { font-size: 18px; }
.pc-row-sub { font-size: 15.5px; margin-top: 4px; }
.pc-row-time { font-size: 13.5px; }
.pc-row-chips { gap: 6px; margin-top: 8px; }

/* Pills: solid color backgrounds, white text, readable everywhere */
.pc-chip {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  color: var(--white);
  background: #5a6282;
  letter-spacing: 0.02em;
}
.pc-chip-cat { background: var(--blue); color: var(--white); }
.pc-chip-draft { background: #1a7f4b; color: var(--white); }
.pc-chip-overdue { background: #b42318; color: var(--white); }
.pc-chip-prio-urgent { background: #b42318; }
.pc-chip-prio-high { background: #c2410c; }
.pc-chip-prio-medium { background: #2563eb; }
.pc-chip-prio-low { background: #5a6282; }
.pc-chip-prio { text-transform: uppercase; }
.pc-chip-id { background: rgba(255, 255, 255, 0.18); color: var(--white); }

/* Type badges: same solid treatment */
.pc-row-type {
  font-size: 13px;
  padding: 4px 9px;
  min-width: 52px;
  border-radius: 8px;
  color: var(--white);
}
.pc-type-email { background: var(--blue); color: var(--white); }
.pc-type-call { background: #15803d; color: var(--white); }
.pc-type-note { background: #5a6282; color: var(--white); }
.pc-type-arrive { background: #2563eb; color: var(--white); }
.pc-type-done { background: #1a7f4b; color: var(--white); }
.pc-type-return { background: #b42318; color: var(--white); }
.pc-type-hwi { background: #6d28d9; color: var(--white); }

/* Overdue rows keep a red ring so they still jump out without the edge bar */
.pc-row.overdue { box-shadow: 0 0 0 2px #dc2626, var(--shadow-md); }

/* Sender email: yellow marker highlight */
.pc-sub-email {
  background: var(--yellow);
  color: #152d7a;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 5px;
  word-break: break-all;
}

/* Detail: another size step up, consistent scale */
.pc-detail-title { font-size: 30px !important; }
.pc-info-row { font-size: 17px; grid-template-columns: 140px 1fr; padding: 9px 0; }
.pc-info-label { font-size: 14px; }
.pc-section-label { font-size: 15.5px; }
.pc-email-body { font-size: 17px; padding: 16px 18px; }
.pc-reply-text { font-size: 17px; min-height: 80px; }
.pc-note-body { font-size: 16px; }
.pc-note-head { font-size: 13.5px; }
.pc-action-help { font-size: 14.5px; }
.pc-spam-note { font-size: 16px; }
.pc-empty-list { font-size: 17px; }

/* Let the highlighted sender email wrap instead of truncating */
.pc-row-sub { white-space: normal; }

/* Selection ring always wins; overdue-and-selected gets a double ring */
.pc-row.selected { box-shadow: 0 0 0 3px var(--yellow), var(--shadow-lg); }
.pc-row.overdue.selected { box-shadow: 0 0 0 3px var(--yellow), 0 0 0 6px #dc2626, var(--shadow-lg); }

@media (max-width: 900px) {
  .pc-wrap { grid-template-columns: 380px minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .pc-wrap { display: block; }
}

/* Big screens: let everything breathe and grow — the detail pane keeps
   soaking up width until the soft 2100px cap on .pc-wrap. */
@media (min-width: 1600px) {
  .pc-wrap { grid-template-columns: clamp(500px, 27vw, 560px) minmax(0, 1fr); gap: 24px; }
  .pc-row { padding: 18px; }
  .pc-row-title { font-size: 19px; }
  .pc-row-sub { font-size: 16.5px; }
  .pc-chip, .pc-row-type { font-size: 14px; }
  .pc-detail { --pc-pad-x: 34px; }
  .pc-detail-title { font-size: 34px !important; }
  .pc-info-row { font-size: 18px; grid-template-columns: 160px 1fr; }
  .pc-info-label { font-size: 15px; }
  .pc-email-body { font-size: 18px; max-height: 380px; }
  .pc-reply-text { font-size: 18px; min-height: 88px; }
  .pc-btn-big { font-size: 19px; padding: 14px 26px; }
  .pc-list { max-height: calc(100vh - 280px); }
}

/* ===== Sales Lead Pipeline (kanban board) ===== */
.lead-summary-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 16px; margin-bottom: 12px;
}
.lead-stage-chip {
  padding: 5px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700;
  border: 1px solid var(--gray-300); background: var(--gray-100);
  color: var(--gray-700); cursor: pointer; white-space: nowrap;
}
.lead-stage-chip:hover { background: var(--gray-200); }
.lead-stage-chip.active {
  background: var(--blue); border-color: var(--blue); color: var(--white);
}

.lead-board-wrap { overflow-x: auto; padding-bottom: 8px; }
.lead-board {
  display: grid; grid-template-columns: repeat(6, minmax(205px, 1fr));
  gap: 10px; align-items: start; min-width: 1260px;
}
.lead-board.lead-board-single { grid-template-columns: minmax(190px, 480px); min-width: 0; }
.lead-col {
  background: var(--gray-100); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); display: flex; flex-direction: column;
}
.lead-col-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-bottom: 2px solid var(--gray-300);
  font-weight: 700; font-size: .85rem; color: var(--gray-700);
}
.lead-col-won .lead-col-head { border-bottom-color: var(--green); }
.lead-col-lost .lead-col-head { border-bottom-color: var(--red); }
.lead-col-new .lead-col-head { border-bottom-color: var(--blue); }
.lead-col-meta { font-weight: 600; color: var(--gray-500); font-size: .78rem; }
.lead-col-body {
  padding: 8px; display: flex; flex-direction: column; gap: 8px;
  min-height: 40vh;
}
.lead-col.drag-over {
  outline: 2px dashed var(--blue); outline-offset: -2px;
  background: var(--blue-light);
}

.lead-card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-left: 4px solid transparent;
  border-radius: var(--radius); padding: 10px 12px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.lead-card:hover { border-color: var(--gray-400); }
.lead-card.dragging { opacity: .5; }
/* Heat color code — clear leaves the transparent left border from above. */
.lead-card-heat-green  { border-left-color: var(--green); }
.lead-card-heat-yellow { border-left-color: var(--yellow-dark); }
.lead-card-heat-red    { border-left-color: var(--red); }
.lead-card-heat-green:hover  { border-left-color: var(--green); }
.lead-card-heat-yellow:hover { border-left-color: var(--yellow-dark); }
.lead-card-heat-red:hover    { border-left-color: var(--red); }
.lead-card-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px; margin-bottom: 4px;
}
.lead-card-name { font-weight: 700; font-size: .9rem; overflow-wrap: anywhere; }
.lead-card-mid {
  display: flex; gap: 8px; align-items: baseline;
  font-size: .8rem; margin-bottom: 6px;
}
.lead-card-value { font-weight: 700; color: var(--green); }
.lead-card-rep { color: var(--gray-700); }
.lead-card-bot {
  display: flex; align-items: center; gap: 6px; font-size: .72rem;
  color: var(--gray-500);
}
.lead-card-source {
  background: var(--gray-100); border-radius: 4px; padding: 1px 6px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
}
.lead-card-followup { color: var(--red); font-size: .85rem; }
.lead-card-age { margin-left: auto; }
.lead-move-btn {
  border: 1px solid var(--gray-300); background: var(--white);
  border-radius: var(--radius); font-size: .72rem; padding: 2px 8px;
  cursor: pointer; color: var(--gray-700);
}
.lead-move-btn:hover { background: var(--gray-100); }

.lead-heat-dot {
  width: 11px; height: 11px; border-radius: 50%; padding: 0;
  border: 1px solid var(--gray-300); cursor: pointer; flex: 0 0 auto;
}
.lead-heat-dot-clear  { background: var(--white); }
.lead-heat-dot-green  { background: var(--green); border-color: var(--green); }
.lead-heat-dot-yellow { background: var(--yellow); border-color: var(--yellow-dark); }
.lead-heat-dot-red    { background: var(--red); border-color: var(--red); }

.lead-heat-picker-row { display: flex; gap: 10px; justify-content: center; padding: 4px 0 8px; }
.lead-heat-swatch {
  width: 32px; height: 32px; border-radius: 50%; padding: 0;
  border: 2px solid var(--gray-300); cursor: pointer;
}
.lead-heat-swatch-clear  { background: var(--white); }
.lead-heat-swatch-green  { background: var(--green); border-color: var(--green); }
.lead-heat-swatch-yellow { background: var(--yellow); border-color: var(--yellow-dark); }
.lead-heat-swatch-red    { background: var(--red); border-color: var(--red); }
.lead-heat-swatch.active { outline: 2px solid var(--blue); outline-offset: 2px; }

.lead-detail-heat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.lead-pill {
  padding: 1px 8px; border-radius: 999px; font-size: .7rem;
  font-weight: 700; white-space: nowrap;
}
.lead-pill-heating { background: #ffe8cc; color: #d9480f; }
.lead-pill-cooling { background: #d0ebff; color: #1971c2; }
.lead-pill-plumbing { background: #d3f9d8; color: #2b8a3e; }

.lead-stage-pick { margin-bottom: 8px; background: var(--gray-100); color: var(--gray-800); }
.lead-stage-pick:hover:not(:disabled) { background: var(--gray-200); }
.lead-stage-pick.current { opacity: .5; }

/* Detail modal */
.lead-detail-stage-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.lead-detail-stage {
  padding: 6px 10px; border: 1px solid var(--gray-300);
  border-radius: var(--radius); font-weight: 600;
}
.lead-lost-banner {
  background: #fff5f5; border: 1px solid #ffc9c9; color: var(--red);
  border-radius: var(--radius); padding: 8px 12px; font-size: .85rem;
  font-weight: 600; margin-bottom: 12px;
}
.lead-contact-card { padding: 12px 16px; margin-bottom: 12px; }
.lead-contact-row {
  display: flex; gap: 10px; padding: 3px 0; font-size: .9rem;
  align-items: baseline;
}
.lead-contact-label {
  flex: 0 0 90px; font-size: .75rem; font-weight: 700;
  color: var(--gray-500); text-transform: uppercase; letter-spacing: .03em;
}
.lead-followup-row, .lead-jobs-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lead-followup-row { margin-bottom: 12px; }
.lead-jobs-wrap { margin-bottom: 14px; }
.lead-jobs-wrap > .rpt-label { display: block; margin-bottom: 6px; }
.lead-job-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--blue-light); color: var(--blue-dark);
  border-radius: 999px; padding: 3px 6px 3px 10px; font-size: .8rem;
  font-weight: 600;
}
.lead-job-x {
  border: none; background: none; cursor: pointer; font-size: .95rem;
  color: var(--blue-dark); line-height: 1; padding: 0 4px;
}
.lead-composer { margin-bottom: 14px; }
.lead-composer textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--gray-300);
  border-radius: var(--radius); font-family: var(--font); font-size: .9rem;
  margin-bottom: 6px; resize: vertical;
}
.lead-composer-actions { display: flex; gap: 8px; justify-content: flex-end; }
.lead-timeline { border-top: 1px solid var(--gray-200); padding-top: 10px; }
.lead-timeline-item { padding: 7px 0; border-bottom: 1px solid var(--gray-100); }
.lead-timeline-head {
  display: flex; align-items: baseline; gap: 8px; font-size: .8rem;
}
.lead-act-type {
  font-weight: 700; text-transform: uppercase; font-size: .68rem;
  letter-spacing: .04em; color: var(--gray-600);
  background: var(--gray-100); border-radius: 4px; padding: 1px 6px;
}
.lead-act-stage_change { background: var(--blue-light); color: var(--blue-dark); }
.lead-act-intake { background: #fff3bf; color: #997a00; }
.lead-act-note, .lead-act-contact { background: #d3f9d8; color: #2b8a3e; }
.lead-timeline-when { margin-left: auto; font-size: .75rem; }
.lead-timeline-body { font-size: .88rem; margin-top: 3px; overflow-wrap: anywhere; }

/* Mobile: swipeable columns + Move button (no touch drag) */
@media (max-width: 768px) {
  .lead-board {
    display: flex; min-width: 0; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .lead-board.lead-board-single { display: flex; }
  .lead-col { flex: 0 0 85vw; scroll-snap-align: start; }
  .lead-board-wrap { overflow-x: visible; }
  .lead-move-btn { padding: 6px 12px; font-size: .8rem; min-height: 34px; }
  .lead-summary-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lead-summary-row::-webkit-scrollbar { display: none; }
  .lead-detail-stage-row { flex-wrap: wrap; }
  .lead-heat-dot { width: 15px; height: 15px; }
}

/* ===== Sales v2: view tabs, deleted view, estimates queue, HCP notes ===== */
.lead-view-tabs {
  /* flex-wrap matters beyond cosmetics: on narrow viewports an unwrapped
     row of tabs overflows its container; clicking an off-screen tab then
     triggers the browser's native scrollIntoView on the nearest (clipped,
     overflow-x:hidden) scrollable ancestor, which shifts that ancestor's
     scrollLeft and silently clips everything below the tabs (including a
     report table re-rendered later) by the same offset. Wrapping removes
     the overflow in the first place so nothing ever needs to auto-scroll. */
  display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap;
}
.lead-view-tab {
  padding: 8px 18px; border-radius: 999px; font-size: .9rem; font-weight: 700;
  border: 1px solid var(--gray-300); background: var(--white);
  color: var(--gray-700); cursor: pointer; display: inline-flex;
  align-items: center; gap: 8px;
}
.lead-view-tab:hover { background: var(--gray-100); }
.lead-view-tab.active {
  background: var(--blue); border-color: var(--blue); color: var(--white);
}
.dash-page .lead-view-tab {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25);
  color: var(--white);
}
.dash-page .lead-view-tab.active {
  background: var(--yellow); border-color: var(--yellow); color: var(--gray-900);
}
.lead-est-badge {
  background: var(--red); color: var(--white); border-radius: 999px;
  font-size: .72rem; font-weight: 800; padding: 1px 7px; line-height: 1.4;
}
.lead-est-badge.hidden { display: none; }

.lead-chip-deleted { border-style: dashed; color: var(--gray-600); }
.lead-chip-deleted.active {
  background: var(--gray-700); border-color: var(--gray-700); color: var(--white);
}
.lead-deleted-list {
  max-width: 520px; display: flex; flex-direction: column; gap: 10px;
}
.lead-card-restore-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--gray-300); font-size: .78rem;
}
.lead-deleted-banner {
  background: var(--gray-100); border: 1px dashed var(--gray-400);
  color: var(--gray-700); border-radius: var(--radius); padding: 8px 12px;
  font-size: .85rem; font-weight: 600; margin-bottom: 12px;
}

/* ===== Manage Board Columns modal ===== */
.lead-stages-list {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
}
.lead-stage-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border: 1px solid var(--gray-200);
  border-radius: var(--radius); background: var(--gray-100);
}
.lead-stage-lock { font-size: .9rem; }
.lead-stage-row-label { font-weight: 700; color: var(--gray-700); flex: 1; }
.lead-stage-name-input,
.lead-stage-add-row input {
  padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px;
  font-family: var(--font); font-size: .875rem; height: 38px;
}
.lead-stage-name-input { flex: 1; min-width: 0; }
.lead-stage-add-row { display: flex; gap: 8px; }
.lead-stage-add-row input { flex: 1; }

/* ===== Accounts Payable (reuses the lead-board kanban skeleton) ===== */
.lead-col-review .lead-col-head { border-bottom-color: #f59f00; }
.lead-col-paid .lead-col-head { border-bottom-color: var(--green); }
.lead-col-collections .lead-col-head { border-bottom-color: var(--red); }
.ap-pill {
  background: var(--gray-100); color: var(--gray-700);
  border: 1px solid var(--gray-300);
}
.ap-due { color: var(--gray-600); font-size: .78rem; }
.ap-due.overdue { color: var(--red); font-weight: 700; }
.ap-renew-soon { color: var(--red); font-weight: 700; }
.ap-license-cost { white-space: nowrap; }
.ap-empty { text-align: center; padding: 48px 20px; }
.ap-empty h3 { margin-bottom: 8px; }

.lead-est-wrap .pc-keys-hint { display: none; }
.est-filter-row { display: flex; gap: 6px; padding: 8px 12px; flex-wrap: wrap; }
.est-options-table {
  margin: 0 0 14px; border: 1px solid var(--gray-200);
  border-radius: var(--radius); overflow: hidden;
}
.est-option-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  padding: 8px 12px; font-size: .88rem; align-items: baseline;
  border-bottom: 1px solid var(--gray-100); background: var(--white);
}
.est-option-row:last-child { border-bottom: none; }
.est-option-name { font-weight: 600; overflow-wrap: anywhere; }
.est-option-total { font-weight: 700; color: var(--green); white-space: nowrap; }
.est-option-status {
  font-size: .72rem; text-transform: uppercase; font-weight: 700;
  color: var(--gray-500); white-space: nowrap;
}

.lead-act-hcp {
  background: #ffe8cc; color: #d9480f; border-radius: 4px; padding: 1px 6px;
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap;
}

/* Estimate-number deep links into HCP */
.est-num-link { color: var(--blue); font-weight: 700; text-decoration: underline; }
.est-num-link:hover { color: var(--blue-dark); }

/* Conversions tab */
.lead-conv-wrap { max-width: 1100px; }
.lead-conv-grid { margin-bottom: 18px; }
.lead-conv-card { padding: 14px 18px; margin-bottom: 14px; }
.lead-conv-card h3 { margin-bottom: 10px; font-size: 1.02rem; }
.lead-conv-card .user-table td, .lead-conv-card .user-table th { font-size: .88rem; }

/* Board on the navy backdrop: summary/filters are already white cards;
   give the column shells a touch more contrast against the dash bg. */
.dash-page .lead-col { border-color: rgba(255,255,255,.14); }

/* Estimate queue rows: colored left edge (green once an option is accepted),
   green money, relative age + actual clock time. */
.lead-est-wrap .pc-row.est-row { border-left: 4px solid var(--blue); }
.lead-est-wrap .pc-row.est-row-accepted { border-left-color: var(--green); }
.est-money { color: var(--green); font-weight: 700; }
.est-row-time { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.est-row-clock { font-size: .72rem; opacity: .75; white-space: nowrap; }

/* Line items under each option; discounts (negative HCP lines) in green */
.est-line-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  padding: 4px 12px 4px 26px; font-size: .82rem; align-items: baseline;
  background: var(--gray-50); border-bottom: 1px solid var(--gray-100);
}
.est-line-name { color: var(--gray-700); overflow-wrap: anywhere; }
.est-line-amount { font-weight: 600; white-space: nowrap; }
.est-line-kind {
  font-size: .68rem; text-transform: uppercase; font-weight: 700;
  color: var(--gray-500); white-space: nowrap;
}
.est-line-discount .est-line-amount, .est-line-discount .est-line-kind { color: var(--green); }
.est-option-accepted .est-option-status { color: var(--green); }
.est-tech-cell { display: inline-flex; align-items: center; gap: 10px; }
.est-tech-edit { padding: 2px 10px; font-size: .75rem !important; }

/* Followups tab: top-to-bottom list, soonest follow-up first */
.lead-followups-wrap { padding: 6px 8px; max-width: 900px; }
.lead-followup-item {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100); cursor: pointer;
}
.lead-followup-item:last-child { border-bottom: none; }
.lead-followup-item:hover { background: var(--gray-50); }
.lead-followup-when {
  flex: 0 0 150px; font-weight: 700; font-size: .85rem; color: var(--gray-700);
}
.lead-followup-when.overdue { color: var(--red); }
.lead-followup-name { flex: 1 1 auto; font-weight: 600; overflow-wrap: anywhere; }
.lead-followup-stage { flex: 0 0 auto; }
.lead-followup-rep { flex: 0 0 auto; font-size: .85rem; color: var(--gray-700); }

/* ===== Purchase Orders ===== */
.po-form { display: flex; flex-direction: column; gap: 0; }
.po-form-card { padding: 18px 20px; }
@media (max-width: 640px) {
  .po-form-card { padding: 14px; }
}
.po-section-heading {
  display: flex; align-items: center; gap: 10px; margin: 22px 0 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
  color: var(--gray-800);
}
.po-form > .po-section-heading:first-of-type { margin-top: 4px; }
.po-form-rest > .po-form-section:first-child .po-section-heading { margin-top: 4px; }
.po-section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0;
  background: var(--blue); color: var(--white); font-size: .8rem; font-weight: 800;
}
.po-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 640px) {
  .po-form-row { grid-template-columns: 1fr; }
}
.po-help { font-size: .8rem; color: var(--gray-600); margin: -8px 0 12px; }
.po-warn {
  font-size: .8rem; color: #9a3412; background: #fff3e0; border: 1px solid #fdba74;
  border-radius: 6px; padding: 6px 10px; margin: -6px 0 12px;
}
.po-warn.hidden { display: none; }
.po-field-error { color: var(--red); font-size: .8rem; margin: -8px 0 12px; }
.po-field-error:empty { display: none; margin: 0; }

/* Yes/No + urgency segmented toggle */
.po-toggle {
  display: inline-flex; border: 1px solid var(--gray-300); border-radius: 999px;
  overflow: hidden; margin-bottom: 10px;
}
.po-toggle-btn {
  border: none; background: var(--white); color: var(--gray-700);
  padding: 7px 22px; font-family: var(--font-heading); font-weight: 700; font-size: .9rem;
  cursor: pointer;
}
.po-toggle-btn + .po-toggle-btn { border-left: 1px solid var(--gray-300); }
.po-toggle-btn.active { background: var(--blue); color: var(--white); }
.po-warranty-detail {
  padding: 10px 12px 2px; margin: -4px 0 12px; background: var(--gray-50);
  border: 1px dashed var(--gray-300); border-radius: var(--radius);
}
.po-warranty-detail.hidden { display: none; }

/* Status pill */
.po-status-pill {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px;
  font-family: var(--font-heading); font-size: .78rem !important; font-weight: 700;
  text-transform: uppercase; white-space: nowrap;
}
.po-status-pending { background: #fff3bf; color: #7a5c00; }
.po-status-approved { background: #d3f9d8; color: #166534; }
.po-status-denied { background: #ffe3e3; color: #991b1b; }
.po-status-cancelled { background: var(--gray-200); color: var(--gray-700); }

.po-urgency-urgent {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: #dc2626; color: #fff; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
}

/* Warranty chips */
.po-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.po-chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .76rem;
  font-weight: 700; white-space: normal; overflow-wrap: anywhere;
}
.po-chip-mfr { background: #e7f0ff; color: #1e3fa3; }
.po-chip-hw { background: #fdf0ff; color: #862e9c; }

/* Queue / request / all-requests cards */
.po-card-list { display: flex; flex-direction: column; gap: 10px; }
.po-queue-card, .po-request-card { display: flex; flex-direction: column; gap: 4px; }
.po-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.po-display-id { font-family: var(--font-heading); font-weight: 800; color: var(--gray-800); }
.po-card-requester { font-weight: 600; color: var(--gray-700); }
.po-card-age { margin-left: auto; font-size: .78rem; color: var(--gray-600); }
.po-card-item { font-weight: 700; margin: 2px 0; overflow-wrap: anywhere; }
.po-card-meta { overflow-wrap: anywhere; }
.po-card-reason { color: var(--gray-700); }
.po-card-decision { font-weight: 600; }
.po-card-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }

/* Detail modal */
.po-detail-status-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.po-detail-card { padding: 12px 16px; margin-bottom: 12px; }

/* Analytics: summary stat tiles */
.po-stat-row { display: flex; flex-wrap: wrap; gap: 12px; }
.po-stat {
  flex: 1 1 120px; background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 12px 14px; text-align: center;
}
.po-stat-value { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--blue); }
.po-stat-label {
  font-size: .78rem; color: var(--gray-600); font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em;
}

/* All Requests table sits on a navy (.dash-page) backdrop — give it a white card */
.po-table-card { padding: 0; overflow: auto; }

/* Reviewer (navy) page: loading/empty placeholders that sit directly on the
   navy backdrop need to be light; text inside white cards stays untouched. */
.po-page .lead-view-tabs { flex-wrap: wrap; }
.po-page #po-queue-list > .text-muted,
.po-page #po-all-list > .text-muted,
.po-page #po-analytics-body > .text-muted,
.po-page .ap-empty p { color: rgba(255,255,255,.8); }
@media (max-width: 640px) {
  .po-page .lead-view-tab { padding: 7px 14px; font-size: .85rem; }
}

/* ── PO request form: type selector ── */
.po-type-heading {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
  color: var(--gray-800); margin: 4px 0 10px;
}
.po-type-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 4px;
}
@media (min-width: 640px) {
  .po-type-grid { grid-template-columns: repeat(3, 1fr); }
}
.po-type-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; text-align: left; padding: 14px 16px; border: 2px solid var(--gray-300);
  border-radius: var(--radius-lg); background: var(--white); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.po-type-tile:hover { border-color: var(--blue); background: var(--blue-light); }
.po-type-tile:focus-visible {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,63,163,.25);
}
.po-type-tile.selected {
  border-color: var(--blue); background: var(--blue-light);
  box-shadow: 0 0 0 1px var(--blue);
}
.po-type-tile.selected::after {
  content: "✓"; position: absolute; top: 8px; right: 10px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: var(--white);
  font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.po-type-icon { font-size: 1.4rem; line-height: 1; }
.po-type-label { font-family: var(--font-heading); font-weight: 700; font-size: .95rem; color: var(--gray-800); }
.po-type-hint { font-size: .78rem; color: var(--gray-600); line-height: 1.3; }

/* ── PO request form: adaptive body (revealed once a type is chosen) ── */
.po-form-rest {
  display: none; flex-direction: column;
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.po-form-rest.is-open { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .po-form-rest { transition: none; }
}
.po-form-section { display: flex; flex-direction: column; }

/* ── Tool account agreement panel ── */
.po-consent {
  border: 1px solid var(--gray-300); border-radius: var(--radius-lg);
  background: var(--gray-50); padding: 14px 16px; margin: -4px 0 12px;
}
.po-consent h3 { margin: 0 0 8px; font-size: 1rem; }
.po-consent-text {
  max-height: 220px; overflow-y: auto; white-space: pre-wrap; font-size: .85rem;
  color: var(--gray-700); background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; line-height: 1.5;
}
.po-consent-summary {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 12px;
}
.po-consent-check { display: flex; }
.po-consent-check-label {
  display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; cursor: pointer;
}
.po-consent-check-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }

/* ── Purchase type chips (queue/list/detail) ── */
.po-chip-type-retail { background: #f1f3f5; color: #495057; }
.po-chip-type-home_warranty { background: #fdf0ff; color: #862e9c; }
.po-chip-type-property_management { background: #e6f9ee; color: #2f9e44; }
.po-chip-type-tool_account { background: #fff4e6; color: #e8590c; }
.po-chip-type-weatherization { background: #fff9db; color: #a17c00; }

/* ===== Assets & Equipment ===== */
/* Light .page (not .dash-page) — reuses po- pieces (status pill shape,
   card list, segmented toggle, table/card layout) and lead- pieces
   (view tabs, summary chip row, contact rows, timeline, composer). */
.assets-page .lead-view-tabs { flex-wrap: wrap; }
.assets-page .lead-summary-row { flex-wrap: wrap; }

.ast-status-available { background: #d3f9d8; color: #166534; }
.ast-status-signed_out { background: #fff3bf; color: #7a5c00; }
.ast-status-in_use { background: #d0ebff; color: #1864ab; }
.ast-status-archived { background: var(--gray-200); color: var(--gray-700); }

.ast-quick-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.ast-change-list { margin: 4px 0 0 16px; padding: 0; font-size: .85rem; }
.ast-change-list li { margin: 2px 0; }

@media (max-width: 640px) {
  .assets-page .lead-view-tab { padding: 7px 14px; font-size: .85rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   ── Time-off calendar (Time-Off Requests + On-Call Calendar) ──
   Shared month-grid renderer used by the #requests Team Calendar and the
   Attendance On-Call Calendar tab, plus the New Request day-picker.
   ══════════════════════════════════════════════════════════════════════ */
.time-off-page .card { margin-bottom: 16px; }
.time-off-page .card-body { padding: 16px; }

.tocal-policy-banner {
  padding: 14px 16px; background: #eef2ff; border: 1px solid #c7d2fe;
  color: #3730a3; font-size: .88rem; line-height: 1.5;
}
.tocal-policy-banner p { margin: 0; }

.tocal {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200); padding: 14px;
}
.tocal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tocal-nav {
  background: var(--white); border: 1px solid var(--gray-300); border-radius: 6px;
  width: 32px; height: 32px; font-size: 1.1rem; line-height: 1; cursor: pointer;
  color: var(--blue);
}
.tocal-nav:hover { background: var(--gray-100); }
.tocal-nav[disabled] { opacity: .35; cursor: default; }
.tocal-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--blue); }
/* Groups nextBtn (+ optional Today button) so an extra flex child doesn't
   skew .tocal-title off-center. */
.tocal-nav-right { display: flex; align-items: center; gap: 6px; }
.tocal-today { width: auto; padding: 0 10px; font-size: .78rem; font-weight: 700; }

.tocal-legend {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;
  font-size: .75rem; color: var(--gray-600);
}
.tocal-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.tocal-legend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--gray-300); }
.tocal-legend-swatch.kind-off { background: #1d4ed8; }
.tocal-legend-swatch.kind-late { background: #e8590c; }
.tocal-legend-swatch.kind-leave_early { background: #7c3aed; }
.tocal-legend-swatch.tocal-legend-pto { background: #166534; }
.tocal-legend-swatch.tocal-legend-pending { background: transparent; border: 1.5px dashed var(--gray-600); }
.tocal-legend-swatch.tocal-legend-denied { background: var(--gray-300); }
.tocal-legend-swatch.tocal-legend-oncall { background: var(--yellow); }

.tocal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.tocal-weekday { text-align: center; font-size: .78rem; font-weight: 800; color: var(--gray-800); text-transform: uppercase; }

.tocal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 4px; }
.tocal-cell {
  min-height: 88px; min-width: 0; overflow: hidden;
  border: 1px solid var(--gray-200); border-radius: 6px;
  padding: 4px; background: var(--gray-50); display: flex; flex-direction: column; gap: 3px;
}
.tocal-cell.blank { background: transparent; border-color: transparent; }
.tocal-cell.today { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.tocal-cell.past { background: var(--gray-100); }
.tocal-cell.past .tocal-chip, .tocal-cell.past .tocal-oncall { opacity: .7; }
/* Subtle ring on any day the current user is on call, so it stands out at a
   glance while scanning the month. Uses outline (not box-shadow) so it
   layers cleanly with .today's inset box-shadow border instead of one
   overriding the other. */
.tocal-cell.has-mine { outline: 2px solid var(--blue); outline-offset: -2px; background: #eef4ff; }
.tocal-cell.clickable { cursor: pointer; }
.tocal-cell.clickable:hover { background: var(--gray-100); }
.tocal-daynum { font-size: .9rem; font-weight: 800; color: var(--gray-900); line-height: 1.1; }
.tocal-dayname { display: none; }

.tocal-chips { display: flex; flex-direction: column; gap: 2px; }
.tocal-chip {
  font-size: .68rem; font-weight: 600; padding: 2px 5px; border-radius: 5px;
  color: #fff; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  overflow-wrap: anywhere; line-height: 1.25;
}
.tocal-chip.kind-off { background: #1d4ed8; }
.tocal-chip.kind-late { background: #e8590c; }
.tocal-chip.kind-leave_early { background: #7c3aed; }
.tocal-chip.pending {
  background: transparent; border: 1.5px dashed currentColor; color: var(--gray-700);
}
.tocal-chip.pending.kind-off { color: #1d4ed8; }
.tocal-chip.pending.kind-late { color: #e8590c; }
.tocal-chip.pending.kind-leave_early { color: #7c3aed; }
.tocal-chip.denied, .tocal-chip.cancelled {
  background: var(--gray-300); color: var(--gray-700); text-decoration: line-through;
}
.tocal-pto {
  background: rgba(255,255,255,.85); color: #166534; font-size: .6rem; font-weight: 800;
  padding: 0 4px; border-radius: 4px; text-transform: uppercase;
}
.tocal-chip.pending .tocal-pto { background: var(--gray-100); }

.tocal-oncall {
  font-size: .68rem; font-weight: 700; color: #7a5c00; background: #fff3bf;
  padding: 2px 5px; border-radius: 5px; margin-top: auto;
}
/* The logged-in user's own on-call chip — stronger fill so it's unmistakable
   at a glance across the Requests team calendar, the Attendance on-call
   editor, and the read-only #oncall page. */
.tocal-oncall.mine { background: var(--blue); color: #fff; font-weight: 800; }
.tocal-oncall.mine .tocal-oncall-remove { color: #fff; }
/* Multi-person on-call: one .tocal-oncall chip per person, stacked; each
   editable chip carries a small ✕ remove button, followed by an "+ add"
   select of active users not already on that day. */
.tocal-oncall-list { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.tocal-oncall-list .tocal-oncall {
  margin-top: 0; display: flex; align-items: center; justify-content: space-between; gap: 4px;
}
.tocal-oncall-remove {
  background: none; border: none; color: inherit; font-size: .85rem; line-height: 1;
  cursor: pointer; padding: 0 2px; opacity: .7;
}
.tocal-oncall-remove:hover { opacity: 1; }
.tocal-oncall-add {
  width: 100%; font-size: .68rem; padding: 2px 3px; border: 1px solid var(--gray-300);
  border-radius: 5px; font-family: var(--font); background: var(--white);
}

.tocal-picker .tocal-grid { grid-auto-rows: auto; }
.tocal-cell-pick {
  cursor: default; align-items: center; justify-content: center; min-height: 46px;
}
.tocal-cell-pick .tocal-daynum { color: var(--gray-900); }
.tocal-cell-pick.clickable { cursor: pointer; }
.tocal-cell-pick.selected { background: var(--blue); border-color: var(--blue); }
.tocal-cell-pick.selected .tocal-daynum { color: #fff; }
.tocal-cell-pick.today:not(.selected) { border-color: var(--blue); }
.tocal-cell-pick.past { cursor: not-allowed; background: var(--gray-100); }
.tocal-cell-pick.past .tocal-daynum { color: var(--gray-400); font-weight: 600; }
.tocal-cell-pick.blank { background: transparent; border-color: transparent; }
.tocal-picker .tocal-cell.blank { min-height: 46px; }

@media (max-width: 768px) {
  .tocal:not(.tocal-picker) .tocal-weekdays { display: none; }
  .tocal:not(.tocal-picker) .tocal-grid { grid-template-columns: 1fr; }
  .tocal:not(.tocal-picker) .tocal-cell.blank { display: none; }
  .tocal:not(.tocal-picker) .tocal-cell:not(.has-content) { display: none; }
  .tocal:not(.tocal-picker) .tocal-cell {
    flex-direction: row; align-items: flex-start; gap: 8px; min-height: auto; padding: 8px;
  }
  .tocal:not(.tocal-picker) .tocal-daynum {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
    width: 40px; line-height: 1.1;
  }
  .tocal:not(.tocal-picker) .tocal-dayname {
    display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .02em; color: var(--gray-600);
  }
  .tocal:not(.tocal-picker) .tocal-cell.today .tocal-dayname { color: var(--blue); }
  .tocal:not(.tocal-picker) .tocal-chips { flex: 1; min-width: 0; }
  .tocal:not(.tocal-picker) .tocal-oncall,
  .tocal:not(.tocal-picker) .tocal-oncall-list { margin-top: 0; flex: 0 0 auto; width: auto; max-width: 160px; }
  .tocal-cell-pick { min-height: 38px; }
  .tocal-picker .tocal-cell.blank { min-height: 38px; }
}

/* New-request day-selection list */
.tor-selected-days { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.tor-day-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.tor-day-row-date { font-weight: 700; flex: 0 0 90px; color: var(--gray-800); }
.tor-day-row select.tor-day-kind {
  flex: 1 1 150px; padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: var(--radius);
  font-family: var(--font); font-size: .85rem;
}
.tor-day-time-label { font-size: .78rem; color: var(--gray-600); }
.tor-day-time {
  flex: 0 0 120px; padding: 6px 8px; border: 1px solid var(--gray-300); border-radius: var(--radius);
  font-family: var(--font); font-size: .85rem;
}
.tor-day-remove {
  background: none; border: none; color: var(--red); font-size: 1.2rem; cursor: pointer;
  line-height: 1; padding: 0 4px; margin-left: auto;
}
.tor-day-remove:hover { color: #c92a2a; }

/* Conflict warning — another employee already has pending/approved time off
   on one of the selected days. Amber, not red: it's a heads-up, not a
   blocker (the server still lets the request through once acknowledged). */
.tor-conflict-warning {
  padding: 14px 16px; margin: -6px 0 12px; background: #fff7ed; border: 1px solid #f59e0b;
  border-radius: var(--radius); color: #9a3412; font-size: .85rem; line-height: 1.5;
}
.tor-conflict-warning-heading { font-weight: 700; margin-bottom: 6px; }
.tor-conflict-warning-list { margin: 6px 0; display: flex; flex-direction: column; gap: 2px; }
.tor-conflict-warning p { margin: 8px 0 0; }
.tor-conflict-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: #f59e0b; color: #fff; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
}

/* My Requests / review queue cards */
.tor-card-list { display: flex; flex-direction: column; gap: 10px; }
.tor-request-card { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.tor-days-summary { font-size: .88rem; color: var(--gray-700); overflow-wrap: anywhere; }

/* On-call change history */
.tor-hist-list { display: flex; flex-direction: column; gap: 4px; }
.tor-hist-row { padding: 4px 0; border-bottom: 1px solid var(--gray-100); }

/* "Your on-call days" list — #oncall page, below the calendar */
.tor-mydays-list { display: flex; flex-direction: column; gap: 4px; }
.tor-mydays-row {
  padding: 6px 10px; background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius); font-size: .88rem; font-weight: 600; color: var(--gray-800);
}

/* ═══════════════ RingOut click-to-dial (Contacts + dialer modal) ═══════════════ */
.contact-card-dialable {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(46,160,67,.12); color: var(--green);
  border-radius: 999px; padding: 4px 10px;
  font-size: .82rem; font-weight: 700; white-space: nowrap; flex: 0 0 auto;
}
.contact-card-phone-row .btn-sm,
.contact-card-picker + .btn-sm { margin-left: 4px; }

.dialer-dryrun-tag {
  display: inline-block; margin-bottom: 12px;
  background: var(--gray-100, #f1f3f5); color: var(--gray-700, #495057);
  border: 1px solid var(--gray-200); border-radius: 999px;
  padding: 3px 10px; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}
.dialer-target {
  border: 1px solid var(--gray-200); border-radius: 8px;
  padding: 12px; margin-bottom: 14px; background: var(--gray-50, #f8f9fa);
}
.dialer-target-label { font-weight: 700; font-size: 1.05rem; color: var(--blue-dark, #162e7a); }
.dialer-target-phone { color: var(--blue, #1e3fa3); font-size: .95rem; margin-top: 2px; }
.dialer-myphone { margin-bottom: 14px; }
.dialer-change-link { color: var(--blue, #1e3fa3); font-weight: 600; text-decoration: none; }
.dialer-change-link:hover { text-decoration: underline; }
.dialer-status-line {
  text-align: center; font-size: 1.15rem; font-weight: 600;
  color: var(--gray-900, #212529); padding: 18px 8px;
}
.dialer-status-pulse { animation: dialer-pulse 1.4s ease-in-out infinite; }
@keyframes dialer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ══════════════════════════════════════════════════════════════════════
   ── Job Orders (ORDER_UPGRADE_PLAN.md Phase 3) ──
   List page (#job-orders) + order detail (#orders/ORD-0042[/tab]). Reuses
   house pieces: .card, the .po-status-pill/.po-chip/.po-urgency-urgent
   shapes, .lead-stage-chip filter pills, and the .cards-labeled +
   data-label mobile table pattern above (~line 2393) for every grid on
   these pages — no new mobile-table strategy introduced.
   Breakpoints: 480 / 768 / 1024 / 1280 (the plan's Rev 2 standard).
   ══════════════════════════════════════════════════════════════════════ */
.jo-page .lead-summary-row { flex-wrap: wrap; gap: 8px; }

/* Stage pill — six fixed colors per the plan's status model (draft gray /
   sourcing amber / waiting blue / ready green / compliance purple / closed
   dark). Compliance isn't reachable until Phase 5 but the color is defined
   now so the pill never falls back to unstyled text. */
.jo-stage-pill {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px;
  font-family: var(--font-heading); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; white-space: nowrap;
}
.jo-stage-draft { background: var(--gray-200); color: var(--gray-700); }
.jo-stage-sourcing { background: #fff3bf; color: #7a5c00; }
.jo-stage-waiting { background: #d0ebff; color: #1864ab; }
.jo-stage-ready { background: #d3f9d8; color: #166534; }
.jo-stage-compliance { background: #fdf0ff; color: #862e9c; }
.jo-stage-closed { background: var(--gray-800); color: var(--white); }

.jo-warning-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.jo-warning-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #ffe3e3; color: #991b1b; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}

/* ── "Report issue" on a vendor fulfillment line (Receiving + Fulfillment
   tabs) — shared buildLineIssueBlock() rendering. ── */
.jo-line-issue {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 6px 8px; margin-top: 4px; background: #fff5f5; border: 1px solid #ffc9c9;
  border-radius: var(--radius); font-size: .85rem;
}
.jo-line-issue-note { flex: 1 1 200px; }
.jo-line-issue-clear { font-size: .8rem; white-space: nowrap; }

/* ── Header card ── */
.jo-header { display: flex; flex-direction: column; gap: 10px; padding: 16px; margin-bottom: 12px; }
.jo-header-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jo-header-orderno { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--blue-dark); }
.jo-next-action { font-weight: 600; color: var(--gray-700); }
.jo-progress-wrap { display: flex; align-items: center; gap: 10px; }
.jo-progress-bar { flex: 1 1 auto; height: 8px; background: var(--gray-200); border-radius: 999px; overflow: hidden; }
.jo-progress-fill { height: 100%; background: var(--blue); border-radius: 999px; transition: width .2s ease; }
.jo-progress-label { font-size: .8rem; color: var(--gray-600); white-space: nowrap; }
.jo-header-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 16px; }
.jo-header-field { display: flex; flex-direction: column; gap: 2px; }
.jo-header-field-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-600);
}
/* ── Tab bar (built for 2 tabs now; Receiving/Compliance/Activity/
   Profitability slot in later phases without restructuring). ── */
.jo-tab-bar { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 2px solid var(--gray-200); }
.jo-tab {
  background: none; border: none; border-bottom: 3px solid transparent; padding: 10px 16px;
  font-family: var(--font-heading); font-weight: 700; font-size: .95rem; color: var(--gray-600); cursor: pointer;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.jo-tab:hover { color: var(--gray-800); }
.jo-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.jo-tab-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: var(--red); color: var(--white);
  font-size: .68rem; font-weight: 800;
}

.jo-tab-card { padding: 16px; margin-bottom: 12px; }
.jo-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 14px; margin-bottom: 8px; }
.jo-readonly-value { padding: 8px 0; color: var(--gray-800); }
.jo-hw-section { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--gray-200); }
.jo-checkbox-field { display: flex; align-items: center; }

.jo-changed-flag {
  margin: 8px 0; padding: 8px 10px; background: #fff7ed; border: 1px solid #f59e0b;
  border-radius: var(--radius); color: #9a3412; font-size: .85rem; font-weight: 600;
}
.jo-added-flag { color: var(--gray-600); font-size: .8rem; font-style: italic; }

/* Shared line/status chip (request + fulfillment lines + PO groups). */
.jo-line-status {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; background: var(--gray-200); color: var(--gray-700);
}
.jo-line-status-open { background: #fff3bf; color: #7a5c00; }
.jo-line-status-answered, .jo-line-status-received, .jo-line-status-pulled { background: #d3f9d8; color: #166534; }
.jo-line-status-cancelled { background: var(--gray-200); color: var(--gray-600); }
.jo-line-status-ordered, .jo-line-status-on_po, .jo-line-status-reserved, .jo-line-status-planned { background: #d0ebff; color: #1864ab; }
.jo-line-status-partially_received, .jo-line-status-backordered { background: #ffe8cc; color: #a24700; }

.jo-line-row.jo-line-cancelled td { text-decoration: line-through; color: var(--gray-500); }

.jo-submit-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }

/* ── Fulfillment tab ── */
.jo-changes-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px; background: #eef2ff; border: 1px solid #c7d2fe;
  border-radius: var(--radius); color: #3730a3; font-weight: 600;
}
.jo-fulfillment-list { display: flex; flex-direction: column; gap: 10px; }
/* Request line "parent row": amber left border while open, faded +
   struck-through description once cancelled. */
.jo-rl-box {
  background: var(--gray-50); border: 1px solid var(--gray-200); border-left: 4px solid var(--gray-300);
  border-radius: var(--radius); padding: 10px 12px;
}
.jo-rl-status-open { border-left-color: #f59e0b; }
.jo-rl-status-cancelled { opacity: .7; }
.jo-rl-status-cancelled .jo-rl-desc { text-decoration: line-through; }
.jo-rl-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.jo-rl-desc { font-weight: 700; color: var(--gray-800); }
.jo-fl-nested { margin: 8px 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.jo-rl-actions, .jo-fl-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.jo-fl-row { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 8px 10px; }
.jo-fl-cancelled { opacity: .6; }
.jo-fl-cancelled .jo-fl-desc { text-decoration: line-through; }
.jo-fl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jo-fl-source-icon { font-size: 1rem; }
.jo-fl-desc { font-weight: 600; }
.jo-fl-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; }
.jo-fl-field { display: flex; flex-direction: column; gap: 2px; }
.jo-fl-field-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--gray-600); }
.jo-fl-field-value { font-size: .88rem; color: var(--gray-800); }
.jo-fl-field input, .jo-fl-field select { padding: 5px 6px; font-size: .85rem; }

.jo-po-section { margin-top: 18px; }
.jo-po-group {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); margin-bottom: 8px;
}
.jo-po-group-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jo-po-group-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.jo-fulfillment-footer {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--gray-200); font-weight: 600; color: var(--gray-700);
}

/* ── Receiving (Phase 4) — phone-first per the plan ── */
.jo-receive-list { display: flex; flex-direction: column; gap: 10px; }
.jo-receive-row { display: flex; flex-direction: column; gap: 8px; }
.jo-receive-form {
  display: flex; flex-direction: column; gap: 10px; margin-top: 6px;
  padding-top: 10px; border-top: 1px dashed var(--gray-200);
}
.jo-stepper-row { display: flex; align-items: stretch; gap: 6px; }
.jo-stepper-btn {
  flex: 0 0 44px; min-width: 44px; min-height: 44px; font-size: 1.2rem;
  font-weight: 700; padding: 0; line-height: 1;
}
.jo-stepper-input {
  flex: 1 1 auto; min-width: 0; text-align: center; font-size: 1rem; font-weight: 700;
  min-height: 44px;
}
.jo-receive-discrepancy {
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: #fff5f5; border: 1px solid #ffc9c9; border-radius: var(--radius);
}
/* Outer wrapper carries the "Serial numbers" label; the inner
   .jo-receive-serials div is the part syncAll() rebuilds (innerHTML = "")
   as qty changes, so the label has to live outside it. */
.jo-receive-serials-wrap { display: flex; flex-direction: column; gap: 6px; }
.jo-receive-serials { display: flex; flex-direction: column; gap: 6px; }
.jo-receive-serial-input { min-height: 44px; font-size: 16px; }
.jo-receipt-history { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.jo-receipt-item {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 8px;
  background: var(--gray-100); border-radius: var(--radius); font-size: .85rem;
}
.jo-receipt-discrepancy { background: #fff5f5; border: 1px solid #ffc9c9; }
.jo-staging-card { display: flex; flex-direction: column; gap: 10px; }

/* ── Compliance tab (Phase 5) ── */
.jo-activity-list { display: flex; flex-direction: column; gap: 10px; }
.jo-activity-item {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 8px 10px;
}
.jo-activity-item.jo-activity-system { background: var(--gray-100); color: var(--gray-600); }
.jo-activity-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.jo-activity-author { font-weight: 700; color: var(--gray-800); }
.jo-activity-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .7rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  background: var(--gray-200); color: var(--gray-700);
}
.jo-activity-body { margin-top: 4px; white-space: pre-wrap; }

/* ── Profitability tab (Phase 6) ── */
.jo-fin-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.jo-fin-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius);
}
.jo-fin-tile-neg { background: #fff5f5; border-color: #ffc9c9; }
.jo-fin-tile-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-600); }
.jo-fin-tile-value { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 800; color: var(--gray-800); }
.jo-fin-tile-neg .jo-fin-tile-value { color: #c92a2a; }
.jo-fin-summary-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-weight: 600; color: var(--gray-700); }
.jo-fin-summary .jo-warning-chips { margin-top: 8px; }
.jo-fin-pos { color: #2f9e44; }
.jo-fin-neg { color: #c92a2a; }

.jo-fin-finalized-flag {
  margin-top: 10px; padding: 8px 10px; background: var(--gray-100); border: 1px solid var(--gray-300);
  border-radius: var(--radius); color: var(--gray-700); font-size: .85rem; font-weight: 600;
}
.jo-fin-adjustment-notice {
  margin: 6px 0 10px; padding: 8px 10px; background: #fff7ed; border: 1px solid #f59e0b;
  border-radius: var(--radius); color: #9a3412; font-size: .85rem; font-weight: 600;
}

.jo-fin-auto-list { display: flex; flex-direction: column; gap: 6px; }
.jo-fin-auto-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px;
  background: var(--gray-50); border-radius: var(--radius);
}
.jo-fin-auto-desc { font-weight: 600; flex: 1 1 auto; min-width: 120px; }
.jo-fin-auto-amount { font-weight: 700; white-space: nowrap; }
.jo-fin-source-link {
  background: none; border: none; padding: 0; color: var(--blue); font-weight: 600;
  text-decoration: underline; cursor: pointer; font-size: .85rem;
}

.jo-fin-group-heading { margin: 14px 0 6px; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-600); }
.jo-fin-entry-list { display: flex; flex-direction: column; gap: 8px; }
.jo-fin-entry-item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 8px 10px; }
.jo-fin-entry-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jo-fin-entry-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; background: var(--gray-200); color: var(--gray-700);
}
.jo-fin-entry-amount { font-weight: 800; margin-left: auto; }

.jo-fin-settings-section { margin-bottom: 16px; }
.jo-fin-rate-list { display: flex; flex-direction: column; gap: 6px; }
.jo-fin-rate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jo-fin-rate-row input { max-width: 110px; }
.jo-fin-rate-name { font-weight: 600; }

/* ── Responsive (mandatory per plan: 320/390/768/1024/1440 tested) ── */
@media (max-width: 768px) {
  /* Tab bar becomes a sideways-scrolling pill row. */
  .jo-tab-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .jo-tab-bar::-webkit-scrollbar { display: none; }
  /* Compact header: fewer columns so order_no + stage pill + next action
     dominate above the fold. */
  .jo-header-grid { grid-template-columns: 1fr 1fr; }
  /* 16px inputs (no iOS zoom) + 44px touch targets everywhere on these pages. */
  .jo-page input, .jo-page select, .jo-page textarea { font-size: 16px; min-height: 44px; }
  .jo-page .btn { min-height: 44px; }
  .jo-rl-actions .btn, .jo-fl-actions .btn { flex: 1 1 calc(50% - 4px); }
  /* Primary action (Submit / Create POs) becomes a full-width sticky bottom bar. */
  .jo-primary-action {
    position: sticky; bottom: 0; left: 0; right: 0; width: 100%;
    z-index: 5; box-shadow: 0 -2px 8px rgba(0,0,0,.1);
  }
  .jo-submit-bar { flex-direction: column; align-items: stretch; }
  /* Per-line Receive button: full-width like other primary actions, but
     deliberately NOT sticky — the Receiving tab can render several of these
     line cards in a scrolling list, and a sticky button per line would stack
     up and cover the bottom of the screen. */
  .jo-receive-btn { width: 100%; }
  /* Profitability: 2×2 summary tiles per the plan ("Profitability on phone:
     2 x 2 summary tiles, entries as cards"). */
  .jo-fin-tiles { grid-template-columns: 1fr 1fr; }
  .jo-fin-entry-amount { margin-left: 0; }
  .jo-fin-rate-row { flex-wrap: wrap; }
}
@media (max-width: 479px) {
  .jo-header-grid { grid-template-columns: 1fr; }
}
/* Receiving line header: status pill pinned to the right of the wrapping
   top row, at every width — scoped to the Receiving tab only so other
   .jo-fl-top rows (fulfillment, request lines, etc) keep their default
   left-to-right flow. */
.jo-receive-row .jo-fl-top .jo-line-status { margin-left: auto; }

@media (min-width: 769px) {
  /* Receiving tab, desktop: the phone-first plan stacks the qty stepper,
     condition select and Receive button full-width in a column below
     768px (left untouched above); at 769px+ lay them out in a single row
     sized to their content instead. */
  .jo-receive-row { padding: 12px 14px; }
  .jo-receive-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
  .jo-receive-form .form-group { margin: 0; flex: 0 0 auto; }
  /* Field labels match the Fulfillment tab's .jo-fl-field-label so "Qty
     received" and "Condition" (and the discrepancy note's label, which is
     also a .form-group > label) render at the same size/height. */
  .jo-receive-form .form-group > label {
    display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--gray-600); margin: 0 0 4px;
  }

  /* Stepper buttons/input, condition select and serial inputs all share the
     app's standard 40px control height (see .form-group input / .btn) —
     the old forced 36px clipped select text ("Good" got cut off). */
  .jo-receive-form .jo-stepper-btn {
    flex: 0 0 40px; min-width: 40px; min-height: 40px; height: 40px; font-size: 1rem;
  }
  .jo-receive-form .jo-stepper-input { flex: 0 0 72px; width: 72px; min-height: 40px; height: 40px; }

  .jo-receive-form .form-group select { width: 160px; min-height: 40px; height: 40px; }

  /* Keep the Receive button on the first row, right-aligned with the
     stepper/select (order: 0 by default); the full-width rows that follow
     it in DOM order (serials label+grid, discrepancy note, error) move to
     order: 2 so they wrap onto their own row below instead of pushing the
     button down. .jo-receive-btn is already 40px tall via the base .btn
     rule, so it lines up with the controls' bottoms at align-self: flex-end. */
  .jo-receive-btn { width: auto; margin-left: auto; align-self: flex-end; }
  .jo-receive-form .jo-receive-btn { order: 1; }
  .jo-receive-form .jo-receive-serials-wrap,
  .jo-receive-form .jo-receive-discrepancy,
  .jo-receive-form .form-error { order: 2; }

  /* Discrepancy note + serial inputs break onto their own full-width row
     when revealed, instead of squeezing between the stepper/select/button.
     .jo-receive-serials-wrap is the outer (label + grid) element rebuilt by
     buildReceiveLineCard; .jo-receive-serials is the inner grid syncAll()
     regenerates as qty changes. */
  .jo-receive-discrepancy, .jo-receive-serials-wrap { flex: 1 1 100%; }
  .jo-receive-serials {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px;
  }
  .jo-receive-serial-input { min-height: 40px; height: 40px; font-size: .9rem; }
  .jo-receive-discrepancy textarea { max-width: 520px; }

  .jo-receive-form .form-error { flex: 1 1 100%; }

  /* Received history: one line per receipt instead of a stacked card; the
     discrepancy note (the only bare <div> child — the qty/condition and
     received-by/date lines are <span>s) still gets its own full-width row. */
  .jo-receipt-item {
    flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px;
  }
  .jo-receipt-item > div { flex-basis: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   ── Job Orders board + Purchase Orders page (ORDER_UPGRADE_PLAN.md
   Phase 7) ──
   Column count for .jo-board-grid is set inline by app.js (computeBoardMax:
   4 at >=1024px, 2 at 768-1023px via the column-choice chips, 1 below
   768px) rather than by a media query, so the CSS here only needs to make
   whatever column count lands look right and stay touch-friendly.
   ══════════════════════════════════════════════════════════════════════ */
.jo-board-wrap { display: flex; flex-direction: column; gap: 10px; }
.jo-board-col-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jo-board-grid { display: grid; gap: 12px; align-items: start; }
.jo-board-col {
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.jo-board-col-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; }
.jo-board-col-title { font-family: var(--font-heading); font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-700); }
.jo-board-col-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; background: var(--gray-200); color: var(--gray-700); font-size: .74rem; font-weight: 800;
}
.jo-board-col-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.jo-board-card {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; min-width: 0;
}
.jo-board-card:hover { border-color: var(--blue); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.jo-board-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jo-board-card-orderno { font-family: var(--font-heading); font-weight: 800; color: var(--blue-dark); font-size: .95rem; }
.jo-board-card-customer { font-weight: 700; color: var(--gray-800); overflow-wrap: anywhere; }
.jo-board-card-job { overflow-wrap: anywhere; }
.jo-board-card-progress { margin: 2px 0; }
.jo-board-card-next { font-size: .82rem; color: var(--gray-700); font-weight: 600; }
.jo-board-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .78rem; color: var(--gray-600); }
.jo-board-card-needed-past { color: var(--red); font-weight: 700; }

/* Board type pills (Phase 7): one per distinct non-cancelled line_type on
   the order (part/material/equipment) — reuses the house .po-chip pill base
   (padding/radius/weight) with dedicated colors per the plan's orange
   part / green material / purple equipment scheme. */
.jo-board-card-types { display: flex; flex-wrap: wrap; gap: 4px; }
.po-chip-linetype-part { background: #fff4e6; color: #d9480f; }
.po-chip-linetype-material { background: #e6f9ee; color: #2f9e44; }
.po-chip-linetype-equipment { background: #f3e8ff; color: #862e9c; }

/* "My drafts" tray */
.jo-drafts-tray { padding: 10px 14px; margin-bottom: 12px; }
.jo-drafts-tray-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jo-drafts-tray-title { font-family: var(--font-heading); font-weight: 800; color: var(--gray-800); }
.jo-drafts-tray-body {
  margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
}

/* Quick filter chip row — same shape as .lead-stage-chip, own class only so
   it can be targeted separately from the stage pills row above it. */
.jo-quick-filter-row { flex-wrap: wrap; gap: 8px; }

/* Admin cutover control (board header) */
.jo-cutover-control {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px;
  background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: var(--radius);
}
.jo-cutover-label { font-size: .8rem; font-weight: 700; color: var(--gray-700); white-space: nowrap; }

/* Legacy Orders read-only banner (list page + hardened detail modal) */
.jo-legacy-readonly-banner {
  padding: 8px 12px; margin-bottom: 12px; background: #fff7ed; border: 1px solid #f59e0b;
  border-radius: var(--radius); color: #9a3412; font-weight: 700; font-size: .85rem;
}

/* Purchase Orders page (new job-order PO tracking — .jo-po-page, distinct
   from the navy .po-page reviewer backdrop used by the older Tool
   Purchases/po_requests module so its ap-empty/loading text-color overrides
   don't leak in here). */
.jo-po-page .lead-summary-row { flex-wrap: wrap; gap: 8px; }
.jo-po-lines { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.jo-po-line-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px;
  background: var(--gray-50); border-radius: var(--radius);
}
.jo-po-line-cancelled { opacity: .6; text-decoration: line-through; }
.jo-po-line-desc { font-weight: 600; flex: 1 1 auto; min-width: 140px; overflow-wrap: anywhere; }
.jo-po-line-qty { font-size: .85rem; color: var(--gray-700); white-space: nowrap; }

/* New job-order PO status pills (draft/ordered/partially_received/received —
   "cancelled" reuses .po-status-cancelled already defined above). */
.po-status-draft { background: var(--gray-200); color: var(--gray-700); }
.po-status-ordered { background: #d0ebff; color: #1864ab; }
.po-status-partially_received { background: #ffe8cc; color: #a24700; }
.po-status-received { background: #d3f9d8; color: #166534; }

@media (max-width: 1023px) {
  /* Tablet: the column-choice chips replace grid-template-columns:repeat(4).
     app.js sets the actual column count inline; this just keeps the picker
     row from wrapping awkwardly against the stage-pill row above it. */
  .jo-board-col-chips { padding: 2px 0 4px; }
}
@media (max-width: 768px) {
  .jo-board-grid { gap: 10px; }
  .jo-board-col { padding: 6px; }
  .jo-drafts-tray-body { grid-template-columns: 1fr; }
  .jo-cutover-control { flex-wrap: wrap; }
  /* 16px inputs (no iOS zoom) + 44px touch targets, same rule as the rest of
     the Job Orders module. */
  .jo-po-page input, .jo-po-page select { font-size: 16px; min-height: 44px; }
  .jo-po-page .btn, .jo-board-card { min-height: 44px; }
  .jo-page .jo-quick-filter-row .lead-stage-chip,
  .jo-page #jo-stage-pills .lead-stage-chip,
  .jo-board-col-chips .lead-stage-chip { min-height: 44px; }
}
@media (max-width: 479px) {
  .jo-board-grid { grid-template-columns: 1fr !important; }
}

/* ===== Employee Profile ===== */
.user-chip-name-link { cursor: pointer; }
.user-chip-name-link:hover { text-decoration: underline; }
.profile-page { max-width: 760px; }
.profile-header { margin-bottom: 14px; }
.profile-header-name { font-size: 1.15rem; font-weight: 600; }
.profile-section { margin-bottom: 14px; }
.profile-banner {
  background: #fff8db; border: 1px solid #f0d36b; color: #7a5b00;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: .9rem;
}
.profile-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.profile-row-2 { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 0; }
.profile-row input { width: 100%; box-sizing: border-box; }
.profile-actions { margin: 16px 0 24px; }
.profile-actions .btn { width: 100%; }
.profile-block-wrapper { align-items: flex-start; }
.profile-block-card { max-width: 640px; width: 100%; }
@media (min-width: 769px) {
  .profile-row-child { grid-template-columns: 1fr 1fr auto; }
  .profile-row-contact { grid-template-columns: 1fr 1fr 1fr 1fr auto; }
  .profile-actions .btn { width: auto; }
}


#pf-error-bottom { margin-bottom: 10px; }