/* Design tokens pulled directly from hangitrightnow.com's stylesheet so this app
   feels like the same brand, not a bolted-on tool. */
/* Professional refit: one typeface (Plus Jakarta Sans), a calm cool-paper
   background, and orange as the primary-action color. Turquoise (--sky) and
   green (--lime) are kept from the drill logo and used as deliberate brand
   accents rather than a bright wash. Token NAMES are unchanged so every
   component updates cohesively from these values alone. */
:root {
  --sky: #2ba0c4;          /* refined turquoise -- readable on white */
  --sky-soft: #e3f2f7;     /* turquoise tint for backgrounds/chips */
  --sky-dark: #13314f;
  --navy: #12263a;
  --navy-soft: #12263acc;
  --orange: #ff8a1f;
  --orange-dark: #e5640f;
  --orange-hover: #f57812;
  --yellow: #f4c51d;
  --lime: #7fb02f;         /* logo green, deepened just enough to read */
  --lime-dark: #6b9827;
  --lime-bg: #eef6d8;
  --cream: #fbf3e2;
  --bg: #f2f5f8;           /* calm cool paper (was bright sky) */
  --card: #ffffff;
  --border: #e3e8ee;
  --muted: #66788a;
  --text: #1f2d3a;
  --green: #1f9d6b;
  --green-bg: #e7f6ef;
  --red: #d64545;
  --red-bg: #fbeaea;

  --font-display: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;

  --radius: 0.85rem;
  --radius-lg: 1.15rem;
  --radius-sm: 0.55rem;
  --shadow: 0 1px 2px rgba(18, 38, 58, 0.05), 0 8px 22px rgba(18, 38, 58, 0.06);
  --shadow-lg: 0 1px 2px rgba(18, 38, 58, 0.06), 0 14px 34px rgba(18, 38, 58, 0.12);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0;
}
button { font-family: inherit; }
a { color: var(--sky-dark); }

#app { max-width: 560px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(84px + var(--safe-bottom)); }

.boot-loading { display: flex; align-items: center; justify-content: center; height: 100vh; }
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 4px solid var(--border); border-top-color: var(--sky);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

.offline-banner {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy); color: #fff;
  font-size: 0.85rem; font-weight: 600;
  text-align: center; padding: 8px 12px;
}

/* ---- top bar ------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); padding: 18px 16px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topbar h1 { font-size: 1.4rem; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand-badge {
  width: 36px; height: 36px; border-radius: 11px; background: var(--sky);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-family: var(--font-display);
  overflow: hidden; box-shadow: 0 2px 6px rgba(15,42,71,.14);
}
.brand-badge img { width: 100%; height: 100%; object-fit: cover; }
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; line-height: 1;
  color: var(--navy); letter-spacing: 0.01em; white-space: nowrap;
}
.wordmark .r { color: var(--orange); }
.topbar .sub { font-size: 0.7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.icon-btn {
  border: none; background: var(--card); width: 38px; height: 38px; border-radius: 50%;
  box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* logo doubles as a "home" button on every screen */
button.brand { border: none; background: none; padding: 0; cursor: pointer; font: inherit; }
.menu-btn { font-size: 1.3rem; color: var(--navy); }
.page-title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--navy); padding: 0 16px 12px; }

/* ---- hamburger menu (full navigation, top right) ---------------------------*/
.menu-backdrop { position: fixed; inset: 0; background: rgba(15, 42, 71, 0.45); z-index: 80; display: flex; justify-content: flex-end; }
.menu-panel {
  background: #fff; width: 80%; max-width: 320px; height: 100%; padding: 16px 14px calc(16px + var(--safe-bottom));
  box-shadow: -8px 0 30px rgba(15, 42, 71, 0.22); display: flex; flex-direction: column; gap: 2px; animation: menuIn 0.18s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
@keyframes menuIn { from { transform: translateX(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 6px 8px 12px; border-bottom: 1px solid var(--border); }
.menu-close { border: none; background: none; font-size: 1.25rem; color: var(--muted); cursor: pointer; }
.menu-item {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; border: none; background: none;
  padding: 14px 12px; border-radius: 12px; font-size: 1.02rem; font-weight: 700; color: var(--navy); cursor: pointer; font-family: inherit;
}
.menu-item:active { background: var(--bg); }
.menu-ico { font-size: 1.15rem; width: 24px; text-align: center; }
.menu-logout { color: var(--red); margin-top: auto; border-top: 1px solid var(--border); border-radius: 0; }

/* ---- search --------------------------------------------------------------*/
.search-wrap { padding: 0 16px 8px; }
.search-input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card); font-size: 1rem; font-family: inherit;
}
.search-input:focus { outline: 2px solid var(--sky); }

.tabs { display: flex; gap: 8px; padding: 4px 16px 14px; }
.tab {
  border: 1px solid var(--border); background: var(--card); color: var(--muted);
  padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---- job list ------------------------------------------------------------*/
.job-list { list-style: none; margin: 0; padding: 0 16px 96px; display: flex; flex-direction: column; gap: 10px; }
.job-card {
  background: var(--card); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px; cursor: pointer; border: 1px solid transparent;
}
.job-card:active { border-color: var(--sky); }
.job-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.job-card-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--navy); }
.job-card-sub { font-size: 0.85rem; color: var(--muted); }
.job-card-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
}
.pill-new-lead { background: #fdeceb; color: #b3261e; }
.pill-contacted { background: #fff2df; color: #b5650a; }
.pill-tbd { background: #fff2df; color: #b5650a; }
.pill-scheduled { background: #fff8db; color: #92730a; }
.pill-crew-coordinated { background: #eaf3fd; color: #1a5fa3; }
.pill-quote-submitted { background: #e6f7f4; color: #0f766e; }
.pill-invoice-sent { background: #fff1e0; color: #b5650a; }
.pill-job-completed { background: #f2e9fb; color: #6b3fa0; }
.pill-payment-collected { background: var(--green-bg); color: var(--green); }
.pill-review-requested { background: #fdeaf3; color: #b13a75; }
.pill-closed-reviewed { background: #eef1f2; color: #48545c; }

.empty-state { text-align: center; padding: 60px 24px; color: var(--muted); }
.empty-state .display { font-size: 1.2rem; margin-bottom: 6px; }

/* ---- bottom nav (the app's single, consistent navigation) ------------------*/
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: #fff; border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(15, 42, 71, 0.06);
  display: flex; justify-content: space-around; align-items: flex-end;
  padding: 9px 6px calc(9px + var(--safe-bottom));
  max-width: 560px; margin: 0 auto;
}
.nav-btn {
  background: none; border: none; color: var(--muted); font-size: 0.68rem; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 10px; cursor: pointer;
  border-radius: 12px;
}
.nav-btn .ico { font-size: 1.15rem; line-height: 1; }
.nav-btn.active { color: var(--navy); }
.nav-btn.active .ico { transform: translateY(-1px); }
/* the primary "New" action -- raised orange pill so the main action is obvious */
.nav-btn.nav-new { color: #fff; background: var(--orange); padding: 9px 16px; margin-top: -2px;
  box-shadow: 0 4px 12px rgba(245, 131, 63, 0.4); }
.nav-btn.nav-new .ico { font-size: 1.25rem; }
.nav-btn.nav-new:active { background: var(--orange-hover); }

/* ---- generic screen/page --------------------------------------------------*/
.screen { padding: 16px 16px 96px; }
.card { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; }
.section-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 10px; }

.detail-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; }
.back-btn { border: none; background: var(--card); width: 38px; height: 38px; border-radius: 50%; box-shadow: var(--shadow); font-size: 1.1rem; cursor: pointer; }

.contact-row { display: flex; gap: 10px; margin-top: 10px; }
.cust-texts-toggle { display: flex; align-items: flex-start; gap: 11px; margin-top: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--sky-soft, #f2f8fb); }
.cust-texts-toggle.off { background: #fbf3f0; border-color: #f0d3c8; }
.cust-texts-toggle input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--navy, #12263a); }
.cust-texts-toggle input:disabled { opacity: .5; }
.cust-texts-copy { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.cust-texts-copy b { font-size: .95rem; }
.contact-btn {
  flex: 1; text-align: center; padding: 10px 8px; border-radius: var(--radius); border: 1px solid var(--border);
  background: #fff; color: var(--navy); text-decoration: none; font-weight: 700; font-size: 0.85rem;
}
button.contact-btn { cursor: pointer; font-family: inherit; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  font-size: 1rem; font-family: inherit; background: #fff;
}
.field textarea { min-height: 104px; resize: vertical; }
.wo-val { font-size: 1rem; color: var(--navy); font-weight: 600; padding: 2px 0; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--sky); }

/* Native date / time / datetime pickers: dress the raw browser control so it
   reads like the app's own inputs (app font, navy value text, muted "mm/dd/yyyy"
   placeholder segments, a sky-tinted calendar icon) instead of janky system
   chrome. Applies wherever a bare date/time input appears. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  color: var(--navy); font-weight: 600; min-height: 44px;
  display: inline-flex; align-items: center; font-variant-numeric: tabular-nums;
}
.field input[type="date"], .field input[type="time"], .field input[type="datetime-local"] {
  display: flex;
}
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit { font-family: inherit; color: var(--navy); }
/* when nothing is chosen yet the segments should look like placeholder text */
input[type="date"]:invalid::-webkit-datetime-edit,
input[type="time"]:invalid::-webkit-datetime-edit,
input[type="datetime-local"]:invalid::-webkit-datetime-edit { color: #9aa6b3; font-weight: 500; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .6; padding: 3px; border-radius: 6px;
  /* recolor the default black glyph toward the app's sky blue */
  filter: invert(45%) sepia(64%) saturate(480%) hue-rotate(150deg);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: #e7f4f9; }

/* Baseline for ANY text input / select / textarea that isn't inside an already
   styled container (.field, .cat-row, .qi-*, .search-input, etc.). Low element
   specificity means those styled containers still win; this only catches the
   stray bare controls (wall/stud picker, etc.) so nothing shows the raw browser
   box. Checkboxes/radios/toggles/steppers are excluded. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=image]),
select,
textarea {
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px;
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--text);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=image]):focus,
select:focus, textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }
textarea { min-height: 96px; resize: vertical; }

#f-notes {
  width: 100%; min-height: 200px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); font-size: 1rem; font-family: inherit; background: #fff;
  resize: vertical; line-height: 1.5;
}
#f-notes:focus { outline: 2px solid var(--sky); }

.stepper { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.step-chip {
  border: 1px solid var(--border); background: #fff; padding: 8px 12px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; color: var(--muted); cursor: pointer;
}
.step-chip.current { background: var(--navy); color: #fff; border-color: var(--navy); }
.step-chip.done { background: var(--green-bg); color: var(--green); border-color: transparent; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 14px 16px; border-radius: var(--radius); border: none; font-weight: 800; font-size: 0.98rem;
  cursor: pointer; font-family: var(--font-body);
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:active { background: var(--orange-hover); }
.btn-secondary { background: var(--sky); color: #fff; }
.btn-outline { background: #fff; border: 1.5px solid var(--navy); color: var(--navy); }
.btn-success { background: var(--green); color: #fff; }
/* services & charges line-item editor */
.li-row {
  position: relative;
  background: #f7fbfd;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 14px 12px;
  margin-bottom: 12px;
}
.li-row .li-name,
.li-row .li-custom,
.li-row .li-amt {
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 11px 12px;
}
.li-row .li-name {
  width: 100%; padding-right: 40px; font-weight: 700; color: var(--navy);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f2a47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.li-row .li-custom { width: 100%; margin-top: 10px; }
.li-name:focus, .li-custom:focus, .li-amt:focus { outline: 2px solid var(--sky); }
.li-incl { margin: 6px 2px 0; font-size: 0.75rem; line-height: 1.35; color: var(--muted); font-style: italic; }

.li-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.li-price-lbl { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.li-price { display: flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; padding-left: 12px; }
.li-price .li-cur { font-weight: 800; color: var(--navy); }
.li-price .li-amt { width: 120px; text-align: right; border: none; font-weight: 800; color: var(--navy); padding-left: 4px; }
.li-price .li-amt:focus { outline: none; }
.li-price:focus-within { outline: 2px solid var(--sky); }

.li-del {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border: none; border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 1rem; font-weight: 800;
  cursor: pointer; line-height: 1; z-index: 2;
}
.li-del:hover, .li-del:active { background: var(--red-bg); color: var(--red); }

.li-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 2px 2px; margin-top: 4px; border-top: 2px solid var(--border);
  font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted);
}
.li-total strong { color: var(--navy); font-size: 1.3rem; letter-spacing: 0; }

.li-add {
  width: 100%; margin-top: 2px; padding: 12px;
  border: 1.5px dashed var(--sky); border-radius: var(--radius-sm);
  background: #fff; color: var(--navy); font-family: inherit; font-size: 0.95rem; font-weight: 800;
  cursor: pointer;
}
.li-add:hover, .li-add:active { background: #f0f8fd; border-color: var(--navy); }
.btn-danger-outline { background: #fff; border: 1.5px solid var(--red); color: var(--red); }
.btn-danger-outline:active { background: var(--red-bg); }
.danger-zone { border: 1px solid var(--red-bg); }
.danger-zone .section-title { color: var(--red); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

.status-banner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius); font-size: 0.85rem; font-weight: 700; margin-bottom: 12px; }
.status-banner.ok { background: var(--green-bg); color: var(--green); }
.status-banner.warn { background: #fff8db; color: #92730a; }
.status-banner.sync { background: #eaf3fd; color: #1a5fa3; }

.photo-preview { width: 100%; border-radius: var(--radius); margin-top: 10px; display: block; }
.ph-head { font-weight: 800; color: var(--navy); font-size: .9rem; display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.ph-count { font-size: .72rem; font-weight: 800; color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 999px; padding: 1px 8px; }
.ph-count.ok { color: var(--green); background: #e6f7ef; border-color: #b7e6cf; }
.photo-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.photo-thumb { width: calc(33.3% - 6px); aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.sig-preview { width: 100%; max-height: 140px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-top: 10px; }

/* ---- calendar --------------------------------------------------------------*/
.cal-nav { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px; }
.cal-month-label { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 0.65rem; font-weight: 800; color: var(--muted); text-transform: uppercase; padding-bottom: 6px; }
.cal-cell {
  aspect-ratio: 1 / 1; border-radius: 10px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; padding-top: 6px; cursor: pointer; border: 1.5px solid transparent; background: var(--bg);
}
.cal-cell.outside { opacity: 0.35; }
.cal-cell.today { border-color: var(--sky); }
.cal-cell.selected { background: var(--navy); }
.cal-cell.selected .cal-daynum { color: #fff; }
.cal-daynum { font-size: 0.85rem; font-weight: 700; color: var(--navy); }
.cal-dots { display: flex; gap: 2px; margin-top: 4px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.cal-dot-more { font-size: 0.55rem; font-weight: 800; color: var(--muted); }

.cal-day-jobs { display: flex; flex-direction: column; gap: 8px; }
.cal-day-job {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius); background: var(--bg); cursor: pointer;
}

/* ---- login (PIN pad) -------------------------------------------------------*/
.login-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.login-logo { width: 68px; height: 68px; border-radius: 20px; background: var(--orange); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-bottom: 14px; overflow: hidden; }
.login-logo img { width: 100%; height: 100%; object-fit: cover; }
.pin-dots { display: flex; gap: 12px; margin: 20px 0; }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--sky); }
.pin-dot.filled { background: var(--sky); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 280px; }
.pin-key { padding: 18px; font-size: 1.3rem; font-weight: 700; border-radius: var(--radius); border: none; background: #fff; box-shadow: var(--shadow); color: var(--navy); }
.pin-key:active { background: var(--bg); }
.pin-error { color: var(--red); font-weight: 700; font-size: 0.9rem; min-height: 20px; margin-top: 8px; }

/* ---- calendar scheduling hub ----------------------------------------------*/
.cal-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mini-btn { border: 1px solid var(--border); background: #fff; color: var(--navy); border-radius: 9px; padding: 6px 10px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.mini-btn:active { background: var(--bg); }
.mini-primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.mini-danger { color: #b3261e; border-color: #f3c9c5; }
.cal-job-actions { display: flex; gap: 6px; flex: none; }
.cal-coverage { font-size: .85rem; color: var(--muted); background: var(--bg); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.cov-line { margin: 2px 0; }
.cov-label { font-weight: 800; color: var(--navy); }
.cov-chip { display: inline-block; background: var(--lime-bg, #eef7d6); color: #4e6b12; border-radius: 20px; padding: 2px 9px; font-size: .78rem; font-weight: 700; margin: 1px 2px; }
.cov-sub { font-size: .78rem; }
.cov-none { color: #b3261e; }
.cal-day-job { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-slots { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.sched-chip { border: 1px solid var(--border); background: #fff; color: var(--navy); border-radius: 10px; padding: 8px 11px; font-weight: 700; font-size: .85rem; cursor: pointer; }
.sched-chip.sel { background: var(--orange); border-color: var(--orange); color: #fff; }
.chip-cap { color: var(--muted); font-weight: 600; font-size: .75rem; }
.sched-chip.sel .chip-cap { color: #ffe; }

/* ---- new work order form --------------------------------------------------*/
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.req { color: var(--orange-dark, #e0692a); }
/* Quiet helper text (was shouty ALL-CAPS bold — that turned every form into a wall of yelling). */
.section-subtitle { font-weight: 500; font-size: .8rem; text-transform: none; letter-spacing: 0; color: var(--muted); line-height: 1.4; margin: 5px 0 4px; }
.wo-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.wo-line:last-child { border-bottom: none; }
.wo-line-info { flex: 1; min-width: 0; }
.wo-line-name { font-weight: 700; color: var(--navy); font-size: .95rem; }
.wo-line-includes { font-size: .76rem; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.ct-note { margin-top: 4px; font-size: .84rem; font-weight: 600; color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 5px 9px; line-height: 1.35; }
.quote-badge { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: #6d28d9; background: #ede9fe; border: 1px solid #ddd6fe; border-radius: 6px; padding: 1px 6px; vertical-align: middle; }
.quote-banner { background: var(--sky-soft); border: 1px solid #bfe0eb; color: var(--navy); font-weight: 700; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: .9rem; }
.pending-badge { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .03em; color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; padding: 1px 6px; vertical-align: middle; white-space: nowrap; }
.noprice-badge { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .03em; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; padding: 1px 6px; vertical-align: middle; white-space: nowrap; }
.pending-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff7ed; border: 1px solid #fed7aa; color: #b45309; font-weight: 700; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: .9rem; }
.pending-banner span { flex: 1; min-width: 140px; }
.wo-instructions { color: #b45309; font-weight: 600; }
.wo-line-price { color: var(--muted); font-size: .82rem; display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.wo-price-dollar { color: var(--muted); font-size: .82rem; }
.wo-price-input { width: 72px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: .82rem; font-weight: 700; color: var(--navy); background: #fff; text-align: right; -moz-appearance: textfield; }
.wo-price-input::-webkit-outer-spin-button, .wo-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wo-price-input:focus { outline: none; border-color: var(--navy); }
.wo-price-each { color: var(--muted); font-size: .82rem; }
.wo-stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex: none; }
.wo-stepper button { width: 36px; height: 36px; border: none; background: #f4f8fb; color: var(--navy); font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.wo-stepper button:active { background: #e6eef5; }
.wo-qty { width: 32px; text-align: center; font-weight: 800; color: var(--navy); }
.wo-check { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.wo-check:last-child { border-bottom: none; }
.wo-check input { width: 20px; height: 20px; flex: none; accent-color: var(--orange); }
.wo-check span { font-weight: 600; color: var(--navy); }
.wo-total-bar { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin: 4px 12px 24px; box-shadow: 0 4px 16px rgba(15,42,71,.1); }
.wo-total-bar .btn { flex: 1; }
/* Sticky bottom Save for the admin work order -- always reachable while closing
   out a job (status + payment + details) in one tap. */
.wo-save-bar {
  position: sticky; bottom: 0; z-index: 20;
  background: #fff; border-top: 1px solid var(--border);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px rgba(15,42,71,.12);
}
.wo-save-bar .btn { width: 100%; }
.wo-save-btns { display: flex; gap: 10px; }
.wo-save-btns .btn { flex: 1; width: auto; }
/* HQ multi-location scope selector */
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.scope-wrap { position: relative; }
.scope-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 11px; font-weight: 700; color: var(--navy); font-size: .82rem; cursor: pointer; max-width: 46vw; }
.scope-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-chev { color: var(--muted); font-size: .62rem; }
.scope-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--sky); }
.scope-dot.all { background: var(--navy); }
.scope-dot.home { background: var(--sky); }
.scope-dot.away { background: #e08a2b; }
.scope-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 232px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 30px rgba(15,42,71,.16); padding: 6px; }
.scope-menu[hidden] { display: none; }
.scope-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; background: none; border-radius: 10px; font-weight: 600; color: var(--navy); font-size: .9rem; cursor: pointer; text-align: left; }
.scope-opt:hover { background: var(--bg); }
.scope-opt.sel { background: var(--sky-soft); }
.scope-opt-name { flex: 1; }
.scope-hq { font-size: .64rem; font-weight: 800; color: var(--muted); background: var(--bg); border-radius: 5px; padding: 1px 5px; margin-left: 4px; }
.scope-tick { color: var(--sky); font-weight: 800; }
/* Location tag on rows / breakdowns when viewing All Locations */
.loc-chip { display: inline-block; font-size: .6rem; font-weight: 800; letter-spacing: .02em; padding: 2px 6px; border-radius: 6px; background: var(--sky-soft); color: #1c6b85; text-transform: uppercase; vertical-align: middle; margin-right: 5px; }
.loc-chip.away { background: #fbeee0; color: #9a5b12; }
.brk-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); }
.brk-row:first-child { border-top: none; }
.brk-name { font-weight: 700; color: var(--navy); }
.brk-val { font-family: var(--font-display); font-weight: 800; color: var(--navy); }
.brk-sub { font-size: .72rem; color: var(--muted); }
/* New Job/Quote chooser */
.new-choice-grid { display: grid; gap: 12px; margin-top: 12px; }
.new-choice { display: block; width: 100%; text-align: left; border: 1px solid var(--border); background: #fff; border-radius: 16px; padding: 16px; cursor: pointer; }
.new-choice:hover { border-color: var(--sky); box-shadow: 0 4px 14px rgba(15,42,71,.08); }
.new-choice-ico { font-size: 24px; }
.new-choice-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--navy); margin-top: 6px; }
.new-choice-sub { font-size: .82rem; color: var(--muted); margin-top: 3px; }
/* Quote pipeline rows */
.q-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border); cursor: pointer; }
.q-row:first-of-type { border-top: none; }
.q-name { font-weight: 700; color: var(--navy); }
.q-sub { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.q-open { font-size: .82rem; font-weight: 700; color: var(--sky); flex: none; }
/* Full quotes hub rows: tappable left area + outcome pill / inline actions right */
.q-row2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border); }
.q-row2:first-of-type { border-top: none; }
.q-open2 { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: none; padding: 0; cursor: pointer; }
.q-right { flex: none; display: flex; align-items: center; gap: 8px; }
.q-pill { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; }
.q-won { background: var(--green-bg); color: var(--green); }
.q-lost { background: #eef1f4; color: var(--muted); }
.q-tprice { background: #fff2e0; color: var(--orange-dark); }
.q-sched { background: var(--sky-soft); color: var(--sky-dark); }
.q-actions { display: flex; gap: 6px; }
.q-act { font-size: .74rem; font-weight: 700; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: #fff; cursor: pointer; }
.q-convert { background: var(--sky); color: #fff; border-color: var(--sky); }
.q-lose { color: var(--muted); }
/* Quote line-item editor (punch-list) */
.qi-row { padding: 10px 0; border-top: 1px solid var(--border); }
.qi-row:first-of-type { border-top: none; }
.rv-sec-head { font-family: var(--font-display); font-weight: 800; color: var(--navy); font-size: 1.02rem; margin: 4px 2px 8px; }
.rv-sec-head span { font-weight: 600; color: var(--muted); font-size: .8rem; }
.sched-send-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sched-time { width: 130px; flex: none; }
/* Outreach route board */
.ob-controls { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; flex-wrap: wrap; }
/* New Job / New Quote quick actions at the top of the Work (Jobs/Quotes) tabs */
.work-new-row { display: flex; gap: 8px; padding: 0 16px 10px; }
.work-new-row .btn { flex: 1; }
.ob-controls .ag-span { flex: 1; }
.ob-controls .btn-sm { flex: none; white-space: nowrap; padding: 8px 12px; }
.ob-statusf { flex: 1; min-width: 130px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card,#fff); font: inherit; font-size: .85rem; color: var(--ink,#1a2230); }
.ob-archtoggle { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); white-space: nowrap; cursor: pointer; }
.ob-archtoggle input { margin: 0; }
.ob-group { margin-bottom: 16px; }
.ob-group-head { font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 0 4px 6px; }
.ob-group-head span { color: var(--sky); margin-left: 4px; }
.ob-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; margin-bottom: 7px; cursor: pointer; }
.ob-row:active { background: var(--bg); }
.ob-main { flex: 1; min-width: 0; }
.ob-name { font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ob-mgmt { font-weight: 600; font-size: .72rem; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 1px 6px; }
.ob-sub { color: var(--muted); font-size: .85rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-metrics { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; text-align: right; }
.ob-metric { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.ob-metric b { color: var(--navy); }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.ob-dot.ob-fresh { background: var(--green); }
.ob-dot.ob-mid { background: var(--yellow); }
.ob-dot.ob-old { background: var(--orange); }
.ob-dot.ob-never { background: var(--red); }
.ob-ref { font-weight: 800; font-size: .8rem; color: var(--muted); background: var(--bg); border-radius: 8px; padding: 2px 8px; }
.ob-ref.has { color: #fff; background: var(--green); }

/* Outreach: summary stat cards (tap to filter) */
.ob-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px 10px; }
.ob-stat { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 8px; text-align: center; cursor: pointer; font-family: inherit; transition: border-color .12s, box-shadow .12s; }
.ob-stat:hover { border-color: var(--sky); }
.ob-stat.on { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); background: var(--sky-soft, #eaf6fb); }
.ob-stat-num { font-size: 1.35rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.ob-stat-lbl { font-size: .72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-top: 2px; }

/* Outreach: table (spreadsheet) view + List/Table toggle */
.ob-view-toggle { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex: none; }
.ob-vt { background: #fff; border: none; padding: 8px 11px; font-size: .82rem; font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit; }
.ob-vt.on { background: var(--navy); color: #fff; }
.ob-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 16px; }
.ob-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: .88rem; }
.ob-table thead th { background: var(--bg); color: var(--muted); font-weight: 800; text-transform: uppercase; font-size: .7rem; letter-spacing: .03em; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ob-th[data-hsort] { cursor: pointer; user-select: none; }
.ob-th[data-hsort]:hover { color: var(--navy); }
.ob-th.on { color: var(--sky); }
.ob-th-num, .ob-td-num { text-align: right; white-space: nowrap; }
.ob-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line, #eef1f4); color: var(--text); vertical-align: top; }
.ob-table tbody tr { cursor: pointer; }
.ob-table tbody tr:hover td { background: var(--bg); }
.ob-table tbody tr:last-child td { border-bottom: none; }
.ob-td-prop { font-weight: 700; color: var(--navy); }
.ob-td-mgmt { font-size: .78rem; color: var(--muted); margin-top: 1px; }
.ob-td-num .ob-dot { margin-right: 5px; }
.ob-refnum { color: var(--green); }
.ob-badge { display: inline-block; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ob-badge.ref { background: var(--green); color: #fff; }
.ob-badge.key { background: #b6862c; color: #fff; }
.ob-badge.fresh { background: #e7f6ee; color: #17794a; }
.ob-badge.mid { background: #fef3d6; color: #8a5a12; }
.ob-badge.old { background: #fde7e0; color: #a83b1a; }
/* Neighborhood section header row inside the outreach table */
.ob-table tbody tr.ob-grouprow td { background: var(--navy); color: #fff; font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; padding: 7px 12px; }
.ob-table tbody tr.ob-grouprow { cursor: default; }
.ob-table tbody tr.ob-grouprow:hover td { background: var(--navy); }
.ob-table tbody tr.ob-grouprow span { opacity: .7; margin-left: 4px; }
.ov-refjobs { margin: 4px 0 10px; }
.ov-refjob { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--green-bg); border: 1px solid #c7ead9; border-radius: 9px; padding: 8px 11px; margin-top: 6px; cursor: pointer; font-family: inherit; color: var(--navy); font-weight: 600; font-size: .9rem; }
.ov-refjob b { color: var(--green); }
.qi-desc, .qi-qty, .qi-price { border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px; font-size: .95rem; font-family: inherit; background: #fff; color: var(--text); }
.qi-desc:focus, .qi-qty:focus, .qi-price:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }
.qi-desc { width: 100%; margin-bottom: 6px; }
.qi-nums { display: flex; align-items: center; gap: 8px; }
.qi-qty { width: 60px; text-align: center; padding-left: 6px; padding-right: 6px; }
.qi-price { width: 110px; }
.qi-x { color: var(--muted); font-weight: 700; }
.qi-amt { margin-left: auto; font-weight: 800; color: var(--navy); white-space: nowrap; }
.qi-del { flex: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: .95rem; padding: 2px 4px; }
.qi-totals { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.qi-totals .trow { display: flex; justify-content: space-between; padding: 4px 0; color: var(--navy); font-weight: 600; }
.qi-totals .trow span:first-child { color: var(--muted); }
.qi-totals .qi-total { border-top: 2px solid var(--navy); margin-top: 6px; padding-top: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.qi-totals .qi-total span:first-child { color: var(--navy); }
.qi-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.qi-top .qi-desc { flex: 1 1 auto; margin-bottom: 0; }
.qi-photo { flex: none; width: 42px; height: 42px; border-radius: 9px; border: 1px dashed var(--border); background: var(--sky-soft); color: var(--sky-dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; padding: 0; }
.qi-photo .ic { width: 20px; height: 20px; }
.qi-photo.has { border-style: solid; border-color: var(--border); }
.qi-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Settings: one-number-per-box repeatable list */
.ml-list { display: flex; flex-direction: column; gap: 6px; }
.ml-row { display: flex; align-items: center; gap: 6px; }
.ml-row .ml-input { flex: 1 1 auto; }
.ml-del { flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--muted); cursor: pointer; font-size: .9rem; }
.ml-del:hover { color: var(--red); border-color: var(--red); }
/* Service-catalog editor rows: match the app's standard input styling */
.cat-row input, .cat-row select,
.coupon-row input, .coupon-row select { border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px; font-size: .95rem; font-family: inherit; background: #fff; color: var(--text); }
.cat-row input:focus, .cat-row select:focus,
.coupon-row input:focus, .coupon-row select:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }
.cat-row > span, .coupon-row > span { color: var(--muted); font-weight: 700; }
.cat-row .cat-del, .coupon-row .cp-del { color: var(--red) !important; }
.cat-group .cat-add, .cat-add { border-radius: 10px; }
.wo-save-note { text-align: center; font-size: 0.76rem; color: #7a8794; margin-top: 7px; }
.wo-total-amt { flex: 1; }
.wo-total-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 800; }
.wo-total-val { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); line-height: 1; }
.dayscroll { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; }
.daychip { flex: none; border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: 7px 11px; text-align: center; cursor: pointer; min-width: 60px; }
.daychip .dow { font-weight: 800; color: var(--navy); font-size: .8rem; }
.daychip .dnum { font-size: .7rem; color: var(--muted); }
.daychip.sel { background: var(--navy); border-color: var(--navy); }
.daychip.sel .dow, .daychip.sel .dnum { color: #fff; }

/* ---- team schedule grid ---------------------------------------------------*/
.ts-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ts-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .8rem; }
.ts-table th, .ts-table td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--border); }
.ts-corner { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); position: sticky; left: 0; background: #fff; z-index: 2; }
.ts-dow { font-weight: 800; color: var(--navy); font-size: .72rem; text-transform: uppercase; }
.ts-dnum { font-size: .7rem; color: var(--muted); }
.ts-name { text-align: left; font-weight: 700; color: var(--navy); position: sticky; left: 0; background: #fff; z-index: 2; white-space: nowrap; }
.ts-name-sub { font-size: .68rem; color: var(--muted); font-weight: 600; }
.ts-edit { margin-top: 5px; font-size: .68rem; font-weight: 700; color: var(--navy); background: var(--border); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.ts-edit:active { background: #dde4ec; }
.ts-edit-days { max-height: 60vh; overflow-y: auto; }

/* ---- crew scorecard ---- */
.sc-stars { white-space: nowrap; letter-spacing: 1px; }
.sc-star { color: var(--border); font-size: 1rem; }
.sc-star.full { color: #f5b301; }
.sc-star.half { position: relative; color: var(--border); background: linear-gradient(90deg, #f5b301 50%, var(--border) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sc-overall { background: linear-gradient(135deg, var(--navy, var(--navy)), #1c3a63); color: #fff; }
.sc-overall-top { display: flex; justify-content: space-between; align-items: center; }
.sc-overall-avg { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.sc-overall-sub { opacity: .82; font-size: .85rem; margin-top: 4px; }
.sc-overall-right { text-align: right; }
.sc-overall-right .sc-star { color: rgba(255,255,255,.3); }
.sc-overall-right .sc-star.full { color: #ffd34d; }
.sc-overall-count { opacity: .82; font-size: .82rem; margin-top: 6px; }
.sc-crew-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sc-crew-name { font-weight: 800; color: var(--navy, var(--navy)); font-size: 1.05rem; }
.sc-inactive { font-size: .68rem; font-weight: 700; color: var(--muted); background: var(--border); border-radius: 999px; padding: 2px 7px; vertical-align: middle; }
.sc-crew-avg { text-align: right; white-space: nowrap; }
.sc-avg-num { font-weight: 800; font-size: 1.25rem; color: var(--navy, var(--navy)); margin-right: 6px; }
.sc-noscore { color: var(--muted); font-size: .82rem; font-weight: 600; }
.sc-crew-body { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.sc-dist { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sc-dist-row { display: flex; align-items: center; gap: 8px; font-size: .78rem; }
.sc-dist-k { width: 22px; color: var(--muted); font-weight: 700; }
.sc-dist-bar { flex: 1; height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.sc-dist-fill { display: block; height: 100%; background: #f5b301; border-radius: 999px; }
.sc-dist-n { width: 18px; text-align: right; color: var(--muted); font-weight: 700; }
.sc-count { color: var(--muted); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.sc-recent { margin-top: 12px; border-top: 1px solid var(--border, var(--border)); padding-top: 10px; }
.sc-recent-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chip { font-size: .76rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.sc-chip-hi { background: #e3f6ec; color: #1a7a45; }
.sc-chip-mid { background: #fff3dc; color: #a9741a; }
.sc-chip-lo { background: #fde6e6; color: #b23b3b; }
.sc-crew-empty { opacity: .7; }
.sc-foot { color: var(--muted); font-size: .8rem; padding: 6px 4px 20px; line-height: 1.45; }

/* ---- crew availability week strip ---- */
.avw-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; }
.avw-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; padding: 8px 10px; border: 1px solid var(--border, var(--border)); border-radius: 12px; background: #fff; cursor: pointer; position: relative; }
.avw-chip.sel { border-color: var(--navy, var(--navy)); box-shadow: 0 0 0 2px rgba(18,41,74,.12); }
.avw-chip.avw-req { background: #fbfcfe; }
.avw-reqtag { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #92730a; background: #fff8db; border-radius: 999px; padding: 1px 6px; }
.avw-lbl { font-size: .82rem; font-weight: 700; color: var(--navy, var(--navy)); white-space: nowrap; }
.avw-dot { font-size: .72rem; font-weight: 900; line-height: 1; }
.avw-dot.ok { color: var(--green, #1a9b57); }
.avw-dot.miss { color: #c0392b; }
.avw-help { font-size: .76rem; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* ---- crew "on call this week" panel ---- */
.ch-card .ch-list { margin-top: 8px; }
.ch-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border, var(--border)); font-size: .9rem; }
.ch-row:last-child { border-bottom: none; }
.ch-day { font-weight: 700; color: var(--navy, var(--navy)); }
.ch-hours { font-weight: 600; color: var(--ink, #1a2230); }
.ch-off { color: var(--muted); font-weight: 600; }
.ts-on { background: var(--lime-bg, #eef7d6); color: #4e6b12; font-weight: 700; border-radius: 6px; }
.ts-off { color: var(--muted); }
.ts-today { background: #fff5ec; }
.ts-today.ts-dow, th.ts-today { box-shadow: inset 0 -2px 0 var(--orange); }
.ts-legend { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .78rem; color: var(--muted); }
.ts-key { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.ts-on-key { background: var(--lime-bg, #eef7d6); border: 1px solid #b7d16a; }
.ts-off-key { background: #f0f4f7; border: 1px solid var(--border); }

/* ---- revenue tracker ------------------------------------------------------*/
.rev-hero { text-align: center; padding: 6px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.rev-hero-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 800; }
.rev-hero-val { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 2.4rem; line-height: 1.1; }
.rev-trend { font-size: .82rem; font-weight: 700; margin-top: 2px; }
.rev-trend.up { color: var(--green, #1f9d55); }
.rev-trend.down { color: #b3261e; }
.rev-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rev-tile { background: var(--bg); border-radius: 12px; padding: 12px 6px; text-align: center; }
.rev-tile-num { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1.15rem; line-height: 1.1; }
.rev-tile-num.rev-warn { color: var(--orange-dark, #e0692a); }
.rev-tile-lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 800; margin-top: 3px; }
.rev-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: 150px; padding-top: 8px; }
.rev-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.rev-bar-val { font-size: .68rem; font-weight: 700; color: var(--navy); margin-bottom: 3px; min-height: 12px; }
.rev-bar-track { width: 60%; max-width: 34px; height: 100%; display: flex; align-items: flex-end; }
.rev-bar-fill { width: 100%; background: linear-gradient(180deg, var(--sky, #5bb9e8), var(--navy)); border-radius: 6px 6px 0 0; min-height: 0; transition: height .3s; }
.rev-bar-lbl { font-size: .7rem; color: var(--muted); font-weight: 700; margin-top: 5px; }
.rev-crew-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.rev-crew-row:last-child { border-bottom: none; }
.rev-crew-head { display: flex; justify-content: space-between; align-items: baseline; }
.rev-crew-name { font-weight: 700; color: var(--navy); }
.rev-crew-amt { font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.rev-crew-track { height: 8px; background: var(--bg); border-radius: 5px; margin: 5px 0 3px; overflow: hidden; }
.rev-crew-fill { height: 100%; background: var(--lime, #a4c93a); border-radius: 5px; }
.rev-crew-sub { font-size: .74rem; color: var(--muted); }
.rev-amt { font-family: var(--font-display); font-weight: 700; color: var(--green, #1f9d55); font-size: 1.05rem; }
.rev-method { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: var(--border); color: #475569; font-size: .72rem; font-weight: 600; letter-spacing: .01em; text-transform: capitalize; }
.rc-summary { background: #f8fafc; border: 1px solid #e6eaf0; border-radius: 10px; padding: 10px 12px; margin-bottom: 4px; }
.rc-line { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: .92rem; color: #1f2937; }
.rc-line + .rc-line { border-top: 1px solid var(--border); }
.rc-mark { flex: 0 0 auto; font-size: .9rem; line-height: 1.35; }
.rc-mark.ok { color: #1f9d55; }
.rc-mark.warn { color: #d97706; }
.rc-mark.block { color: var(--red); }
.rc-mark.neutral { color: #94a3b8; }
.rc-line.block { color: var(--red); font-weight: 600; }
.rc-line.flag { color: #b45309; }
.rc-note { font-size: .82rem; color: #64748b; text-align: center; margin-top: 10px; }
.rc-fixmsg { background: var(--red-bg); color: var(--red); border-radius: 10px; padding: 9px 12px; font-size: .86rem; font-weight: 600; margin: 10px 0 2px; text-align: center; }
.rev-tile-num.rev-net { color: var(--green, #1f9d55); }
.rev-substats { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 12px; }
.rev-substats b { color: var(--navy); }
.rev-owner { font-size: .68rem; background: var(--bg); color: var(--muted); border-radius: 20px; padding: 1px 7px; font-weight: 800; text-transform: uppercase; vertical-align: middle; }
.rev-crew-amt { font-family: var(--font-display); }
.rev-week-range { font-size: .75rem; color: var(--muted); font-weight: 600; }
.rev-pay-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.rev-pay-row:last-child { border-bottom: none; }
.rev-pay-row > span:first-child { font-weight: 700; color: var(--navy); }
.rev-pay-mounts { font-size: .82rem; color: var(--muted); }
.rev-pay-owed { font-family: var(--font-display); font-weight: 700; color: var(--navy); min-width: 56px; text-align: right; }
.rev-pay-total { border-top: 2px solid var(--navy); border-bottom: none; margin-top: 2px; padding-top: 10px; }
.rev-pay-total > span:first-child { text-transform: uppercase; font-size: .74rem; letter-spacing: .03em; }

/* ---- CRM: customers -------------------------------------------------------*/
.cust-spend { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.cust-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; text-align: center; }
.cust-stats > div { background: var(--bg); border-radius: 12px; padding: 10px 6px; }
.cust-stat-num { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1.2rem; line-height: 1.1; }
.cust-stat-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 800; margin-top: 2px; }
.pill-ok { background: var(--lime-bg, #eef7d6); color: #4e6b12; }

/* ---- signature modal -------------------------------------------------------*/
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,42,71,0.5); z-index: 60; display: flex; align-items: flex-end; }
.modal-sheet { background: #fff; width: 100%; border-radius: 24px 24px 0 0; padding: 18px; max-width: 560px; margin: 0 auto; max-height: 92vh; overflow-y: auto; }
/* Textareas dropped straight into a modal (e.g. "Draft from a list") aren't in a
   .field, so give them the same polished look as the rest of the app. */
.modal-sheet textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; font-size: .95rem; font-family: var(--font-body); background: #fff; color: var(--text); resize: vertical; min-height: 104px; line-height: 1.5; }
.modal-sheet textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }
.sig-canvas { width: 100%; height: 220px; background: #fff; border: 2px dashed var(--border); border-radius: var(--radius); touch-action: none; }
.signoff-box { max-height: 200px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: .84rem; line-height: 1.5; color: #3a4b58; margin-bottom: 10px; }
.signoff-box p { margin: 0 0 8px; }
.signoff-box p:last-child { margin-bottom: 0; }
.signoff-box b { color: var(--navy); }
.waiver-scroll { max-height: 34vh; }
.waiver-h { font-size: .92rem; color: var(--navy); margin: 0 0 8px; }
.sig-name-label { font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 6px; }

.toast { position: fixed; bottom: calc(100px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; z-index: 70; box-shadow: var(--shadow-lg); }

/* ---- Schedule: agenda view + view toggle -------------------------------- */
.sched-toggle {
  display: flex; gap: 6px; background: #eef3f8; border-radius: 12px;
  padding: 4px; margin: 0 12px 12px;
}
.sched-tab {
  flex: 1; border: none; background: transparent; padding: 9px 12px;
  border-radius: 9px; font-weight: 700; font-size: 0.95rem; color: var(--navy);
  cursor: pointer; font-family: inherit;
}
.sched-tab.sel { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(15,42,71,.12); }

#schedule-body { padding: 0 12px; }
.ag-day { padding: 12px 14px; margin-bottom: 12px; }
.ag-day-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  color: var(--navy); margin-bottom: 8px;
}
.ag-count {
  background: var(--navy); color: #fff; font-size: 0.78rem; font-weight: 700;
  min-width: 22px; height: 22px; border-radius: 11px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 7px;
}
.ag-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 6px;
  border-top: 1px solid var(--border); cursor: pointer;
}
.ag-row:first-of-type { border-top: none; }
.ag-row:active { background: #f6f9fc; }
.ag-time {
  flex: 0 0 74px; font-weight: 800; color: var(--orange-dark);
  font-size: 0.92rem; line-height: 1.15;
}
.ag-info { flex: 1; min-width: 0; }
.ag-cust { font-weight: 700; color: var(--navy); font-size: 0.98rem; }
.ag-sub {
  color: var(--muted); font-size: 0.82rem; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- week picker (team schedule) + agenda availability line ------------- */
.wk-picker {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.wk-picker::-webkit-scrollbar { display: none; }
.wk-chip {
  flex: 0 0 auto; border: 1.5px solid #dbe6f1; background: #fff;
  color: var(--navy); font-weight: 700; font-size: 0.9rem;
  padding: 9px 14px; border-radius: 20px; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.wk-chip.sel { background: var(--navy); color: #fff; border-color: var(--navy); }
.ag-avail {
  font-size: 0.82rem; font-weight: 700; color: #1c7a45;
  background: #eef8f1; border-radius: 8px; padding: 5px 9px; margin-bottom: 8px;
}
.ag-empty-day { color: var(--muted); font-size: 0.86rem; padding: 4px 6px 2px; font-style: italic; }

/* ---- Professional day-view scheduler (work order) ---------------------- */
.dv-status { font-size: 0.85rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.dv-daystrip {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.dv-daystrip::-webkit-scrollbar { display: none; }
.dv-day {
  flex: 0 0 auto; width: 56px; border: 1.5px solid #dbe6f1; background: #fff;
  border-radius: 12px; padding: 7px 0; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.dv-day .dv-dow { font-size: 0.68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.dv-day .dv-num { font-size: 1.15rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.dv-day .dv-mon { font-size: 0.62rem; font-weight: 700; color: #9aa6b3; text-transform: uppercase; }
.dv-day.sel { background: var(--navy); border-color: var(--navy); }
.dv-day.sel .dv-dow, .dv-day.sel .dv-num, .dv-day.sel .dv-mon { color: #fff; }
/* Dot marks days that actually have crew available; no-crew days are dimmed
   but still tappable (loose/request-only times). */
.dv-day .dv-dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; margin-top: 3px; }
.dv-day.has-crew .dv-dot { background: #34b56a; }
.dv-day.sel.has-crew .dv-dot { background: #7cf0a8; }
.dv-day.no-crew .dv-num { color: #aab4c0; }
.dv-day.no-crew .dv-dow, .dv-day.no-crew .dv-mon { color: #b3bcc7; }
.dv-day.sel.no-crew .dv-num, .dv-day.sel.no-crew .dv-dow, .dv-day.sel.no-crew .dv-mon { color: #fff; }

.dv-timeline {
  position: relative; margin-left: 52px; border-left: 1px solid var(--border);
  background: #fbfdff; border-radius: 0 8px 8px 0;
}
.dv-lines { position: absolute; inset: 0; }
.dv-hour { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
.dv-hlabel {
  position: absolute; left: -50px; top: -8px; width: 46px; text-align: right;
  font-size: 0.68rem; font-weight: 700; color: #9aa6b3;
}
.dv-band {
  position: absolute; left: 2px; right: 4px; background: #e4f6ec;
  border-left: 3px solid #34b56a; border-radius: 4px;
}
.dv-booked {
  position: absolute; left: 6px; right: 6px; background: #dfe8f2; color: #33465e;
  border-left: 3px solid #7d93ac; border-radius: 6px; padding: 3px 7px;
  font-size: 0.74rem; overflow: hidden; box-shadow: 0 1px 2px rgba(15,42,71,.08);
}
.dv-booked b { color: var(--navy); }
.dv-picked {
  position: absolute; left: 6px; right: 6px; background: var(--orange); color: #fff;
  border-radius: 6px; padding: 3px 7px; font-size: 0.74rem; overflow: hidden;
  box-shadow: 0 2px 6px rgba(229,100,15,.35); z-index: 2;
}
.dv-openlabel { font-size: 0.72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; margin: 14px 0 8px; letter-spacing: .04em; }
.dv-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-slot {
  border: 1.5px solid var(--orange); background: #fff; color: var(--orange-dark);
  font-weight: 800; font-size: 0.9rem; padding: 9px 14px; border-radius: 10px;
  cursor: pointer; font-family: inherit;
}
.dv-slot.sel { background: var(--orange); color: #fff; }
/* Loose (request-only) times outside crew hours: dashed amber, tag, distinct. */
.dv-slot.loose { border-color: #d8c48f; border-style: dashed; color: #8a7a52; background: #fdfaf1; }
.dv-slot.loose.sel { background: #b7913f; border-color: #b7913f; color: #fff; }
.dv-slot-tag { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; opacity: .75; letter-spacing: .03em; }
.dv-loose-note {
  font-size: 0.78rem; line-height: 1.35; color: #7a6a42; background: #fbf5e6;
  border: 1px solid #ecdfc0; border-radius: 8px; padding: 8px 11px; margin-bottom: 10px;
}
.dv-none { color: var(--muted); font-size: 0.86rem; font-style: italic; padding: 4px 2px; }

/* ---- Controller dashboard ---------------------------------------------- */
.dash-greeting {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--navy); margin: 0 4px 14px;
}
.dash-card { padding: 12px 14px; margin-bottom: 12px; }
.dash-hd {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-weight: 700; font-size: 0.98rem;
  color: var(--navy); margin-bottom: 6px;
}
.dash-badge {
  background: var(--orange); color: #fff; font-size: 0.76rem; font-weight: 800;
  min-width: 22px; height: 22px; border-radius: 11px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 7px;
}
.dash-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 2px;
  border-top: 1px solid var(--border); flex-wrap: wrap;
}
.dash-item:first-of-type { border-top: none; }
.dash-item-main { flex: 1 1 55%; min-width: 0; cursor: pointer; }
.dash-cust { font-weight: 700; color: var(--navy); font-size: 0.96rem; }
.dash-sub {
  color: var(--muted); font-size: 0.82rem; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-actions { display: flex; gap: 6px; flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }
.btn-sm { width: auto; padding: 8px 12px; font-size: 0.85rem; border-radius: 9px; }
.dash-notif {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px;
  border-top: 1px solid var(--border);
}
.dash-notif:first-of-type { border-top: none; }
.dash-notif[data-href] { cursor: pointer; }
.dash-notif-main { flex: 1 1 auto; min-width: 0; }
.dash-ago { flex: 0 0 auto; color: #9aa6b4; font-size: 0.76rem; white-space: nowrap; padding-top: 2px; }

/* One-screen crew close-out steps */
.cs-list { display:flex; flex-direction:column; gap:8px; }
.cs-step { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  border:1.5px solid var(--border); background:#fff; border-radius:12px; padding:12px 14px;
  font-family:inherit; font-size:0.98rem; font-weight:700; color:var(--navy); }
.cs-step .cs-ic { flex:0 0 auto; width:22px; height:22px; border-radius:50%; text-align:center;
  line-height:22px; font-size:0.85rem; font-weight:800; }
.cs-done { border-color:#c3e6cd; background:#eef8f1; color:#1f7a45; }
.cs-done .cs-ic { background:#34b56a; color:#fff; }
.cs-todo { cursor:pointer; }
.cs-todo .cs-ic { background:var(--border); color:#9aa6b4; }
.cs-todo .cs-go { margin-left:auto; color:var(--orange); font-size:1.3rem; font-weight:800; }
.cs-todo:active { background:#f7fafd; }

/* Tax-inclusive "total due" readout under the service-amount field */
.tax-readout { margin: 6px 0 10px; font-size: 14px; color: var(--ink, #1a1a1a); }
.tax-readout strong { font-size: 16px; }
.tax-readout .tax-sub { color: var(--muted); font-size: 12px; display: block; margin-top: 2px; }

/* Reschedule modal -- reuses the day-view scheduler, with a clear current/new
   time summary so moving a job reads top-to-bottom. */
.resched-sheet { max-height: 88vh; overflow-y: auto; }
.resched-cur { font-size: 13px; color: var(--muted); margin: 2px 0 10px; }
.resched-cur b { color: #1a2230; }
.resched-new { margin: 10px 0 2px; padding: 9px 12px; border-radius: 8px; background: #f4f8fc; border: 1px dashed #c9d8e8; color: #6b7a8c; font-size: 13px; text-align: center; }
.resched-new.set { background: #eef8f1; border: 1px solid #bfe6cd; border-left: 4px solid #34b56a; color: #1a2230; text-align: left; }
.resched-new.set b { color: var(--navy); }
.resched-manual-wrap { margin-top: 10px; }
.resched-manual-wrap summary { cursor: pointer; font-size: 13px; color: #2f6db0; padding: 4px 0; list-style: revert; }
.resched-manual-wrap input[type="datetime-local"] { width: 100%; margin-top: 6px; padding: 9px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }

/* Owner "working as crew" banner -- one-tap flip back to the owner view. */
.crew-mode-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 12px 0; padding:8px 12px; background:#f3eefb; border:1px solid #e0d3f2; border-left:4px solid #7a4fb0; border-radius:8px; font-size:13px; font-weight:700; color:#4a2f74; }
.crew-mode-back { background:#7a4fb0; color:#fff; border:none; border-radius:6px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.crew-mode-back:active { opacity:.85; }

/* Agenda day/week sub-toggle + nav */
.ag-span { display:flex; gap:6px; margin:2px 0 8px; }
.ag-span-btn { flex:1; padding:7px 10px; border:1px solid var(--border); background:#fff; border-radius:8px; font-size:13px; font-weight:700; color:#33465e; cursor:pointer; }
.ag-span-btn.sel { background:var(--navy); color:#fff; border-color:var(--navy); }
.ag-nav { margin:0 0 8px; }
.ag-total { margin:0 0 12px; padding:10px 14px; background:#eef6ff; border:1px solid #d6e6fb; border-radius:12px; font-size:0.92rem; font-weight:700; color:#31465c; display:flex; justify-content:space-between; align-items:center; }
.ag-total strong { font-size:1.05rem; color:#16324f; }

/* "Clear" button in the Notifications header */
.dash-clear { background:none; border:1px solid var(--border); color:var(--muted); font-size:12px; font-weight:700; padding:3px 10px; border-radius:14px; cursor:pointer; }
.dash-clear:active { background:var(--border); }
.dash-clear:disabled { opacity:.5; }

/* "Assign to…" dropdown in the dashboard Ready-to-assign card */
.dash-assign-select { border:1px solid var(--navy); background:var(--navy); color:#fff; font-size:0.8rem; font-weight:700; padding:6px 10px; border-radius:8px; cursor:pointer; max-width:150px; }
.dash-assign-select option { background:#fff; color:var(--navy); font-weight:600; }

/* Calendar week-view day blocks */
.cw-day { background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin:0 0 8px; }
.cw-day.cw-today { border-color:var(--navy); box-shadow:0 0 0 1px var(--navy) inset; }
.cw-head { font-weight:800; color:var(--navy); font-size:0.9rem; margin-bottom:6px; }
.cw-avail { font-size:0.75rem; }
.cw-job { font-size:0.82rem; color:#33465e; padding:3px 0; cursor:pointer; }
.cw-job b { color:var(--navy); }
.cw-none { font-size:0.8rem; color:var(--muted); padding:2px 0 4px; }
.cw-day .dv-slots { margin-top:6px; }

/* Calendar Week view -- Google-Calendar-style 7-column time grid */
.wk-legend { display:flex; gap:14px; justify-content:center; margin:0 0 6px; font-size:11px; color:var(--muted); }
.wk-lg { display:inline-flex; align-items:center; gap:5px; }
.wk-lg::before { content:""; width:11px; height:11px; border-radius:3px; }
.wk-lg-open::before { background:#bfe6cd; border:1px solid #34b56a; }
.wk-lg-booked::before { background:#3d7fd6; }
.wk-grid { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; }
.wk-head { display:flex; border-bottom:1px solid var(--border); }
.wk-corner { width:30px; flex:0 0 30px; }
.wk-dh { flex:1 1 0; min-width:0; text-align:center; padding:4px 0; cursor:pointer; border-left:1px solid var(--border); }
.wk-dow { font-size:9px; font-weight:700; letter-spacing:.5px; color:var(--muted); text-transform:uppercase; }
.wk-dnum { font-size:14px; font-weight:700; color:#33465e; line-height:1.4; }
.wk-today .wk-dow { color:#2f6db0; }
.wk-today .wk-dnum { background:#2f6db0; color:#fff; width:22px; height:22px; line-height:22px; border-radius:50%; display:inline-block; }
.wk-body { display:flex; position:relative; }
.wk-gutter { width:30px; flex:0 0 30px; position:relative; }
.wk-hr { position:absolute; right:3px; font-size:8px; color:var(--muted); transform:translateY(-4px); }
.wk-col { flex:1 1 0; min-width:0; position:relative; border-left:1px solid var(--border); background-image:repeating-linear-gradient(#f1f5f9 0 1px, transparent 1px 34px); cursor:pointer; }
.wk-coltoday { background-color:#f7fbff; }
.wk-band { position:absolute; left:1px; right:1px; background:#d8f0e1; border-left:2px solid #34b56a; border-radius:2px; }
.wk-job { position:absolute; left:1px; right:1px; background:#3d7fd6; color:#fff; border-radius:3px; padding:1px 3px; font-size:8.5px; line-height:1.15; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.wk-jt { font-weight:800; }
.wk-picked { position:absolute; left:1px; right:1px; background:#ff8a1f; color:#fff; border-radius:3px; padding:1px 3px; font-size:8.5px; line-height:1.15; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.2); z-index:2; }
.wk-dh.wk-sel { background:#eef6ff; }
.wk-dh.wk-sel .wk-dnum { color:var(--navy); }
.wk-hint { font-size:11px; color:var(--muted); text-align:center; margin:6px 0 2px; }
/* Per-installer color legend + book-anyway override */
.crew-legend { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:2px 0 8px; }
.crew-lg { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#33465e; }
.crew-lg i { width:12px; height:12px; border-radius:3px; display:inline-block; }
.dv-anyway { display:flex; align-items:center; gap:8px; margin:10px 2px 2px; font-size:13px; font-weight:600; color:var(--muted); }
.dv-anyway input { width:17px; height:17px; }

/* Revenue period picker (day/week/month/quarter/year) */
.rev-span { flex-wrap:wrap; }
.rev-span .ag-span-btn { flex:1 1 auto; min-width:52px; padding:6px 8px; font-size:12px; }
.rev-period-sum { display:flex; align-items:baseline; gap:10px; margin:2px 0 8px; }
.rp-total { font-size:1.5rem; font-weight:800; color:var(--navy); }
.rp-count { font-size:0.82rem; color:var(--muted); }

/* Controller time tracker + ledger week-mounts breakdown */
.ts-row { display:flex; align-items:center; gap:10px; margin:5px 0; }
.ts-day { flex:1; font-size:0.88rem; color:#33465e; font-weight:600; }
.ts-hr { width:120px; padding:8px; border:1px solid var(--border); border-radius:8px; font-size:15px; text-align:center; background:#fff; }
select.ts-hr { text-align-last:center; }
.ts-row2 { padding:8px 0; border-bottom:1px solid var(--border,var(--border)); }
.ts-row2:last-of-type { border-bottom:none; }
.ts-row2 .ts-day { display:block; margin-bottom:6px; }
.ts-inout { display:flex; align-items:center; gap:6px; }
.ts-inout select { flex:1; min-width:0; padding:8px 6px; border:1px solid var(--border); border-radius:8px; font-size:14px; background:#fff; text-align-last:center; }
.ts-dash { color:var(--muted); }
.ts-dayhrs { flex:0 0 auto; width:42px; text-align:right; font-weight:800; color:var(--navy,var(--navy)); font-size:.9rem; }

/* ---- owner/controller: crew time worked ---- */
.tw-weektotal { display:flex; justify-content:space-between; align-items:center; font-weight:700; color:var(--navy,var(--navy)); }
.tw-weektotal b { font-size:1.15rem; }
.tw-card .tw-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.tw-name { font-weight:800; color:var(--navy,var(--navy)); font-size:1.05rem; }
.tw-tot { font-size:.9rem; color:var(--ink,#1a2230); }
.tw-tot b { font-size:1.1rem; color:var(--navy,var(--navy)); }
.tw-sub { display:inline-block; margin-left:6px; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); background:var(--border); border-radius:999px; padding:2px 7px; }
.tw-sub.ok { color:#1a7a45; background:#e3f6ec; }
.tw-days { display:flex; flex-direction:column; gap:2px; }
.tw-drow { display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid var(--border,var(--border)); font-size:.88rem; }
.tw-drow:last-child { border-bottom:none; }
.tw-dname { width:38px; font-weight:700; color:var(--navy,var(--navy)); }
.tw-dtime { flex:1; color:var(--ink,#1a2230); }
.tw-doff { flex:1; color:var(--muted); }
.tw-dh { width:42px; text-align:right; font-weight:800; color:var(--navy,var(--navy)); }
.tw-note { margin-top:8px; font-size:.85rem; color:var(--muted); }

/* ---- CRM contact detail ---- */
.crm-field { display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--border,var(--border)); font-size:.9rem; }
.crm-field:last-of-type { border-bottom:none; }
.crm-flbl { flex:0 0 110px; color:var(--muted); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.02em; }
.crm-fval { flex:1; color:var(--ink,#1a2230); }
.crm-notes { margin-top:10px; padding-top:10px; border-top:1px solid var(--border,var(--border)); font-size:.9rem; color:var(--ink,#1a2230); line-height:1.45; }
.crm-notes .crm-flbl { display:block; margin-bottom:4px; }
/* CRM pipeline status pill (list rows + detail header) */
.crm-status { display:inline-block; font-weight:800; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; padding:2px 8px; border-radius:999px; background:var(--bg); color:var(--muted); border:1px solid var(--border); vertical-align:middle; }
.crm-status.new { background:#fde7d6; color:var(--orange-dark); border-color:#f6c99a; }
.crm-status.fresh { background:var(--sky-soft); color:var(--sky-dark); border-color:#bfe1eb; }
.crm-status.mid { background:#fff3e0; color:#9a5a12; border-color:#f4d9ad; }
.crm-status.ref { background:var(--lime-bg,#eef6d8); color:var(--lime-dark,#5c8322); border-color:#cfe39a; }
.crm-status.key { background:#fbeecb; color:#8a5f00; border-color:#e9cd82; }
.crm-status.old { background:#eef1f4; color:#6b7787; border-color:#d9dfe6; }
.crm-status.dnv { background:#fbe6e4; color:#a3231b; border-color:#f2b8b5; }
/* CRM quick notes timeline */
.crm-note { border-left:3px solid var(--sky); background:var(--soft,#f5f7fa); border-radius:0 8px 8px 0; padding:7px 10px; margin-bottom:7px; }
.crm-note-head { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:.72rem; color:var(--muted); font-weight:700; margin-bottom:2px; }
.crm-note-text { font-size:.9rem; color:var(--ink,#1a2230); line-height:1.4; white-space:pre-wrap; }
.crm-note-del { background:none; border:none; color:#b3261e; cursor:pointer; font-size:14px; line-height:1; padding:0 2px; }
/* CRM activity report */
.rep-list { margin:4px 0; }
.rep-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 2px; border-bottom:1px solid var(--border); font-size:.9rem; color:var(--ink,#1a2230); }
.rep-row:last-child { border-bottom:none; }
.rep-row b { color:var(--navy); }
.rep-warn { background:#fbe6e4; border:1px solid #f2b8b5; color:#8a1f1f; border-radius:8px; padding:6px 10px; margin:4px 0; font-size:.85rem; }
.lg-model { display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--sky-dark,#13314f); background:var(--sky-soft,#e3f2f7); border-radius:6px; padding:1px 6px; margin-left:4px; vertical-align:middle; }
/* Camera / camera-roll photo button row */
.ph-btn-row { display:flex; gap:8px; }
.ph-btn-row .btn { flex:1; }
/* Per-line-item photos */
.li-photos { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.li-photo-thumb { position:relative; display:inline-block; }
.li-photo-thumb img { width:46px; height:46px; object-fit:cover; border-radius:6px; border:1px solid var(--border); display:block; }
.li-photo-del { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; border:none; background:#b3261e; color:#fff; font-size:11px; line-height:1; cursor:pointer; padding:0; }
.li-photo-btn { width:38px; height:38px; border:1px dashed var(--border); border-radius:8px; background:var(--card,#fff); font-size:16px; cursor:pointer; }
/* Outreach drop-off tracking */
.ov-stats { display:flex; gap:8px; margin:4px 0 12px; }
.ov-stat { flex:1; background:var(--sky-soft); border-radius:12px; padding:10px 8px; text-align:center; }
.ov-stat-num { font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--navy); line-height:1.1; }
.ov-stat-lbl { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-top:3px; }
.ov-line { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--border); }
.ov-line > .crm-flbl { flex:1 1 auto; }
.ov-counter { display:flex; align-items:center; gap:12px; font-weight:800; color:var(--navy); }
.ov-cbtn { width:32px; height:32px; border-radius:9px; border:1px solid var(--border); background:#fff; font-size:1.1rem; font-weight:800; color:var(--navy); cursor:pointer; line-height:1; }
.ov-visit { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--border); }
.ov-visit-date { font-weight:700; color:var(--navy); font-size:.86rem; }
.ov-visit-items { font-size:.82rem; color:var(--muted); margin-top:2px; }
.ov-del { flex:none; background:none; border:none; color:var(--muted); cursor:pointer; font-size:.95rem; padding:2px 6px; }
.ov-visit-acts { flex:none; display:flex; align-items:center; gap:2px; }
.ov-edit-btn { flex:none; background:none; border:none; color:var(--sky-dark,#13314f); cursor:pointer; font-size:.95rem; padding:2px 6px; }

/* ---- get-paid tracker ---- */
.pay-hero { background: linear-gradient(135deg, var(--navy,var(--navy)), #1c3a63); color:#fff; }
.pay-hero-row { display:flex; justify-content:space-around; text-align:center; }
.pay-hero-num { font-size:1.8rem; font-weight:800; line-height:1; }
.pay-hero-num.pay-warn { color:#ffb4a2; }
.pay-hero-num.pay-ok { color:#8ff0c0; }
.pay-hero-lbl { opacity:.85; font-size:.8rem; margin-top:4px; }
.pay-sect-total { font-weight:800; font-size:1.15rem; color:var(--navy,var(--navy)); margin-top:2px; }
.pay-danger { border:1px solid #f4c7bf; }
.pay-danger .pay-sect-total { color:#b23b3b; }
.pay-warnsect .pay-sect-total { color:#a9741a; }
.pay-amt { font-weight:800; color:var(--navy,var(--navy)); white-space:nowrap; }
.pay-danger .pay-amt { color:#b23b3b; }
.pay-foot { color:var(--muted); font-size:.8rem; padding:6px 4px 24px; line-height:1.45; }
.ts-total { margin-top:10px; font-size:0.95rem; color:var(--navy); }
.ts-total b { font-size:1.2rem; }
.dash-hours-reminder { border-left:4px solid #7a4fb0; cursor:pointer; }
.lg-details { margin-top:10px; border-top:1px solid var(--border); padding-top:8px; }
.lg-details summary { cursor:pointer; font-size:0.85rem; font-weight:700; color:#2f6db0; }
.lg-jobs { margin-top:6px; }
.lg-jobrow { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid #f2f5f9; cursor:pointer; font-size:0.85rem; }
.lg-jn { flex:1; font-weight:600; color:#1a2230; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lg-jd { color:var(--muted); font-size:0.78rem; }
.lg-jm { font-weight:800; color:var(--navy); }
.lg-draft { background:#fdf6ec; color:#b9791b; font-size:0.66rem; font-weight:800; padding:1px 6px; border-radius:8px; }

/* Agenda "Earlier this week" divider (upcoming-first ordering) */
.ag-divider { margin:14px 4px 6px; font-size:0.78rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
/* Week grid columns read as clickable (book at that time) */
.wk-col:hover { background-color:#f0f7ff; }

/* ---- 5-hub navigation ---- */
.hub-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; margin: 0 12px 6px; }
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tabs .tab { flex: 0 0 auto; }
/* Float clearly ABOVE the bottom nav. The nav's height includes the device
   safe-area inset, so the FAB must too — otherwise on phones with a home bar the
   nav grows taller and the FAB dips down over the rightmost tab (Team). */
.fab-new { position: fixed; right: 16px; bottom: calc(86px + var(--safe-bottom)); width: 54px; height: 54px; border-radius: 50%; background: #f6851f; color: #fff; border: none; font-size: 28px; line-height: 1; font-weight: 700; box-shadow: 0 6px 18px rgba(15,42,71,.28); cursor: pointer; z-index: 60; display: flex; align-items: center; justify-content: center; }
.fab-new:active { transform: scale(.96); }
.menu-section { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #8a94a6; font-weight: 800; padding: 14px 18px 4px; }

/* ---- Team / HR profile editor ---- */
.hr-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #14335c; font-weight: 800; margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--border); }
.crew-row:hover { border-color: #14335c; }
.hr-eye { background: #f0f3f8; border: 1px solid var(--border, var(--border)); border-radius: 8px; padding: 8px 11px; cursor: pointer; font-size: 16px; line-height: 1; flex-shrink: 0; }
.hr-masked { filter: blur(5px); }
.hr-masked:focus { filter: none; }

/* ---- Payment Tracker: per-crew invoice history table ---- */
.ps-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.ps-table th, .ps-table td { padding: 8px 6px; border-bottom: 1px solid var(--border, var(--border)); text-align: left; vertical-align: top; }
.ps-table thead th { font-size: 11px; text-transform: uppercase; color: var(--muted, #667085); letter-spacing: .02em; }
.ps-table td.r, .ps-table th.r { text-align: right; }
.ps-table tfoot td { border-bottom: none; padding-top: 10px; }
.ps-table .ps-sub { font-size: 11px; color: var(--muted, #667085); margin-top: 1px; }
.ps-dl { display: inline-block; text-decoration: none; font-size: 18px; padding: 2px 8px; border-radius: 8px; background: #14335c; color: #fff; }
.ps-dl:hover { background: #1c4a80; }
.ps-dlcell { white-space: nowrap; }
.ps-dl2 { display: inline-block; text-decoration: none; font-size: 11px; font-weight: 700; padding: 4px 8px; margin-left: 6px; border-radius: 7px; border: 1px solid #14335c; color: #14335c; }
.ps-dl2:first-child { margin-left: 0; }
.ps-dl2.paid { background: #14335c; color: #fff; }
.ps-dl2:hover { opacity: .85; }

/* ---- Kef's incentive pay statement (owner ledger) ---- */
.kef-card .rev-substats { margin-bottom: 10px; }
.kef-grand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.kef-wk { border: 1px solid var(--line, #e6e6e6); border-radius: 12px; margin-bottom: 8px; overflow: hidden; background: #fafafa; }
.kef-wk > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.kef-wk > summary::-webkit-details-marker { display: none; }
.kef-wk-name { font-size: 14px; }
.kef-wk-total { font-variant-numeric: tabular-nums; color: #16794b; font-size: 15px; }
.kef-wk-meta { padding: 0 14px 8px; font-size: 12px; color: var(--muted); }
.kef-lines { padding: 0 10px 10px; }
.kef-line { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.kef-line-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kef-name { font-weight: 600; font-size: 14px; }
.kef-total { font-variant-numeric: tabular-nums; font-weight: 600; }
.kef-line-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.kef-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; vertical-align: middle; }
.kef-full { background: #dcfce7; color: #166534; }
.kef-half { background: #fef3c7; color: #92400e; }
.kef-nopay { background: #fee2e2; color: #991b1b; }
.kef-warn { color: #b91c1c; font-weight: 600; }
.kef-edit-btn { margin-top: 6px; background: none; border: none; color: #2563eb; font-size: 12px; font-weight: 600; padding: 2px 0; cursor: pointer; }
.kef-editor { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--border); }
.kef-radios { display: flex; gap: 14px; flex-wrap: wrap; padding: 4px 0; }
.kef-radios label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.kef-paid { background: #dbeafe; color: #1e40af; }
.kef-wk-paid { opacity: .72; background: #f3f6fb; }
.kef-wk-paybtn { margin: 4px 10px 10px; }

/* ---- Follow-up reminders (dashboard) ---- */
.fu-card .fu-list { margin: 4px 0 10px; }
.fu-item { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.fu-item:last-child { border-bottom: none; }
.fu-main { flex: 1; min-width: 0; }
.fu-text { font-size: 14px; color: #1f2937; line-height: 1.3; }
.fu-cust { color: var(--muted); font-weight: 500; }
.fu-due { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fu-over { color: #b42318; font-weight: 600; }
.fu-actions { display: flex; gap: 6px; flex-shrink: 0; }
.fu-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.fu-done { color: #16794b; border-color: #bfe6d2; }
.fu-del { color: #b42318; border-color: #f3c9c4; }
.fu-addtoggle { margin-top: 8px; width: 100%; padding: 9px; border: 1px dashed var(--border); border-radius: 9px; background: #fff; color: var(--navy, var(--navy)); font-weight: 700; font-size: .9rem; cursor: pointer; }
.fu-addtoggle:active { background: #f2f6fb; }
.fu-add[hidden] { display: none; }
.fu-add { border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.fu-input { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px; box-sizing: border-box; }
.fu-when { display: flex; gap: 8px; align-items: center; }
.fu-when input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; font-size: 14px; box-sizing: border-box; min-width: 0; }
.fu-when .btn { flex-shrink: 0; }

/* ---- Quo text suggestions (dashboard) ---- */
.sg-card .sg-item { padding: 10px 2px; border-bottom: 1px solid var(--border); }
.sg-card .sg-item:last-child { border-bottom: none; }
.sg-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sg-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sg-resched { background: #fef3c7; color: #92400e; }
.sg-new { background: #dcfce7; color: #166534; }
.sg-q { background: #e0edff; color: #1e40af; }
.sg-name { font-weight: 600; font-size: 14px; color: #1f2937; }
.sg-phone { color: var(--muted); font-weight: 500; font-size: 12px; }
.sg-ago { margin-left: auto; font-size: 12px; color: #9ca3af; }
.sg-text { font-size: 13px; color: #4b5563; font-style: italic; margin: 5px 0 8px; line-height: 1.35; }
.sg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sg-act { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; }
.sg-primary { background: #14335c; border-color: #14335c; color: #fff; }
.sg-dismiss { color: #9ca3af; border-color: var(--border); }
.sg-picked { font-size: 12px; color: #14335c; background: #f4f7fb; border-radius: 8px; padding: 6px 9px; margin: 2px 0 8px; line-height: 1.4; }

/* ---- Address autocomplete dropdown ---- */
.addr-ac { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,42,71,.14); margin-top: 4px; overflow: hidden; max-height: 260px; overflow-y: auto; }
.addr-ac-row { padding: 10px 12px; font-size: 14px; color: #1f2937; cursor: pointer; border-bottom: 1px solid #f0f2f5; }
.addr-ac-row:last-child { border-bottom: none; }
.addr-ac-row:hover { background: #f4f7fb; }
.dash-sub-meta { font-weight: 600; color: #14335c; margin-top: 2px; }
.dash-unassigned { color: #b42318; }

/* ---- Crew "Today's Jobs" card ---- */
.ct-card .ct-item { padding: 11px 2px; border-bottom: 1px solid var(--border); }
.ct-card .ct-item:last-child { border-bottom: none; }
.ct-main { cursor: pointer; }
.ct-name { font-weight: 700; font-size: 15px; color: #1f2937; }
.ct-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ct-mounts { color: #14335c; font-weight: 600; }
.ct-actions { display: flex; gap: 8px; margin-top: 9px; }
.ct-actions .btn { flex: 1; }

/* ---- Owner/controller dashboard Today: per-job actions ---- */
.dash-today { display: block; }
.dt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dt-actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.dt-actions .btn { flex: 1; min-width: 90px; text-align: center; }
.rev-pipeline { margin-bottom: 8px; }
.rev-2col { grid-template-columns: repeat(2, 1fr); }
.rev-pipeline-note { font-size: .68rem; color: var(--muted); text-align: center; margin: -2px 0 10px; line-height: 1.35; }
.bk-hero { text-align: center; padding: 6px 0 2px; }
.bk-hero-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 800; }
.bk-hero-val { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 2.1rem; line-height: 1.05; margin-top: 2px; }
.bk-hero-note { font-size: .7rem; color: var(--muted); margin-top: 2px; }
.bk-reconcile { margin-top: 10px; font-size: .72rem; text-align: center; padding: 7px 10px; border-radius: 10px; font-weight: 700; }
.bk-reconcile.ok { background: #eafaf1; color: #1f7a48; }
.bk-reconcile.bad { background: #fdecec; color: #b42318; }
.bk-methods { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; margin-top: 10px; }
.bk-method { font-size: .78rem; color: #33465a; }
.bk-method .bk-dim { color: var(--muted); }
.bk-jobs { text-align: center; font-size: .72rem; color: var(--muted); margin-top: 8px; }
.bk-owe { color: #e0692a; }
.bk-clear { color: #1f9d55; font-weight: 700; font-size: .9rem; padding: 4px 0; }
.bk-row, .bk-crow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid #eef1f4; }
.bk-row { cursor: pointer; }
.bk-row-name, .bk-crow-name { font-weight: 700; color: var(--navy); font-size: .92rem; }
.bk-row-sub { font-size: .72rem; color: var(--muted); margin-top: 1px; }
.bk-row-amt { font-weight: 800; }
.bk-crow-nums { display: flex; gap: 14px; font-size: .82rem; color: #33465a; white-space: nowrap; }
.bk-crow-nums .bk-ok b { color: #1f9d55; }
.bk-owe-tag { font-size: .68rem; background: #fdeee2; color: #e0692a; padding: 2px 7px; border-radius: 999px; font-weight: 800; }
.bk-dateinput { width: 100%; padding: 9px 12px; border: 1px solid var(--line, #e6ebf0); border-radius: 10px; font-size: .95rem; font-weight: 700; color: var(--navy, #16324f); background: #fff; }
.bk-ok2 { color: #1f9d55; font-weight: 700; }
.bk-dim { color: var(--muted, #8a97a5); font-weight: 600; }
.rev-today { color: #14335c; }
.rev-upcoming { color: #1a7f52; }

/* ---- Running late chips + job message thread ---- */
.late-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.late-chip { border: 1.5px solid var(--border); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.late-chip.sel { background: #14335c; border-color: #14335c; color: #fff; }
.msg-thread { display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 82%; }
.msg-in { align-self: flex-start; }
.msg-out { align-self: flex-end; }
.msg-bubble { padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; }
.msg-in .msg-bubble { background: var(--border); color: #1f2937; border-bottom-left-radius: 4px; }
.msg-out .msg-bubble { background: #14335c; color: #fff; border-bottom-right-radius: 4px; }
.msg-meta { font-size: 11px; color: #9ca3af; margin-top: 2px; padding: 0 4px; }
.msg-out .msg-meta { text-align: right; }
.msg-reply { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); align-items: stretch; }
.msg-reply input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; background: #fff; }
.msg-reply input:focus { outline: 2px solid var(--sky); }
.msg-reply .btn { flex: 0 0 auto; width: auto; min-width: 88px; padding: 13px 22px; }
.chat-thread { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; padding-right: 2px; }

/* ==========================================================================
   EXPERT REFIT — icon system + tightened type, spacing, cards, nav, buttons.
   Appended last so these values win. Plus Jakarta Sans throughout; icons used
   sparingly (nav, menu, real state indicators). Everything here derives from
   the mood-board direction MJ approved.
   ========================================================================== */

/* ---- inline icons: inherit surrounding color + size --------------------- */
.ic { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em;
      flex: 0 0 auto; stroke-width: 1.8; }

/* ---- type: crisper hierarchy, tighter display tracking ------------------ */
:root { --font-display: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif; }
body { letter-spacing: -0.003em; }
.wordmark { font-weight: 800; letter-spacing: -0.02em; font-size: 1.16rem; }
.page-title, .dash-greeting { font-weight: 800; letter-spacing: -0.02em; font-size: 1.375rem; }
.dash-greeting { margin: 2px 4px 16px; }
.section-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 12px; }
.dash-hd { font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.dash-hd > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.job-card-name, .dash-cust { font-weight: 700; letter-spacing: -0.01em; font-size: 1.02rem; }
.job-card-sub, .dash-sub { font-size: 0.85rem; }
/* aligned figures wherever money/counts stack */
.wo-total-val, .li-total strong, .dash-badge, .pay-sect-total, .stat .v,
.job-card-meta, .li-price .li-amt { font-variant-numeric: tabular-nums; }

/* ---- surfaces: 1px hairline + soft shadow, calmer radius ---------------- */
.card { border: 1px solid var(--border); border-radius: 16px; padding: 16px 17px; margin-bottom: 13px;
        box-shadow: var(--shadow); }
.dash-card { padding: 15px 16px; margin-bottom: 12px; }
.job-list { gap: 11px; padding: 0 16px 96px; }
.job-card { border: 1px solid var(--border); border-radius: 16px; padding: 15px 16px; gap: 7px;
            box-shadow: var(--shadow); transition: border-color .12s ease, box-shadow .12s ease; }
.job-card:active { border-color: var(--sky); box-shadow: var(--shadow-lg); }

/* ---- dashboard section header count badge: quieter ---------------------- */
.dash-badge { background: var(--sky-soft); color: var(--sky-dark); font-weight: 700; font-size: 0.75rem;
              min-width: 22px; height: 21px; border-radius: 7px; padding: 0 7px; letter-spacing: 0; }

/* ---- status pills: less shouty ------------------------------------------ */
.pill { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 7px; }

/* ---- buttons: refined weight, spacing, press ---------------------------- */
.btn { padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; letter-spacing: -0.005em;
       transition: transform .04s ease, background .12s ease, box-shadow .12s ease; }
.btn:active { transform: translateY(0.5px); }
.btn-primary { box-shadow: 0 1px 2px rgba(229,100,15,.25), 0 4px 12px rgba(229,100,15,.18); }
.btn-primary:active { background: var(--orange-hover); }
.btn-outline { border: 1.5px solid var(--border); color: var(--navy); }
.btn-outline:active { background: var(--bg); border-color: var(--sky); }
.btn-secondary { background: var(--sky); }
.btn .ic { width: 1.05em; height: 1.05em; }
.btn-sm { padding: 8px 13px; font-size: 0.85rem; border-radius: 10px; font-weight: 700; }

/* ---- fields: softer focus ring ------------------------------------------ */
.field label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 7px; }
.field input, .field select, .field textarea, .search-input { border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; }
.field input:focus, .field select:focus, .field textarea:focus,
.search-input:focus, #f-notes:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }

/* ---- top bar ------------------------------------------------------------ */
.topbar { padding: 16px 16px 10px; }
.brand-badge { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 1px 3px rgba(18,38,58,.16); }
.icon-btn { width: 40px; height: 40px; box-shadow: var(--shadow); color: var(--navy); }
.menu-btn .ic { width: 21px; height: 21px; }

/* ---- hamburger menu ----------------------------------------------------- */
.menu-item { font-weight: 600; font-size: 1rem; gap: 12px; padding: 13px 12px; }
.menu-ico { width: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.menu-ico .ic { width: 21px; height: 21px; }
.menu-item:active .menu-ico { color: var(--sky-dark); }
.menu-close .ic { width: 20px; height: 20px; }

/* ---- bottom nav: sparing icons, brand-orange active --------------------- */
.bottom-nav { padding: 8px 6px calc(9px + var(--safe-bottom)); box-shadow: 0 -1px 0 var(--border), 0 -8px 24px rgba(18,38,58,.05); }
.nav-btn { font-size: 0.66rem; font-weight: 600; gap: 4px; color: var(--muted); }
.nav-btn .ico { display: inline-flex; }
.nav-btn .ico .ic { width: 22px; height: 22px; stroke-width: 1.7; }
.nav-btn.active { color: var(--orange-dark); }
.nav-btn.active .ico .ic { stroke-width: 2.1; }
.fab-new { display: flex; align-items: center; justify-content: center; }
.fab-new .ic { width: 24px; height: 24px; stroke-width: 2.2; }
.nav-btn.nav-new .ico .ic { width: 24px; height: 24px; }

/* ---- state-indicator icons --------------------------------------------- */
.rc-mark .ic { width: 17px; height: 17px; stroke-width: 2; }
.cs-step .cs-ic .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.fu-btn .ic { width: 15px; height: 15px; }
.hr-eye .ic { width: 18px; height: 18px; }

/* ---- review & close summary: match the mood board ----------------------- */
.rc-summary { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 4px 13px; }
.rc-line { font-size: 0.9rem; padding: 11px 0; align-items: center; }
.rc-line + .rc-line { border-top: 1px solid var(--border); }
.rc-fixmsg { border-radius: 10px; font-weight: 700; }

/* ---- Option 3 topbar: drill mark (home) + screen name ------------------- */
.topbar-lead { display: flex; align-items: center; gap: 11px; min-width: 0; }
button.brand { flex: 0 0 auto; }
.topbar-back { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--navy); padding: 0 0 3px; }
.topbar-title { font-weight: 800; letter-spacing: -0.02em; font-size: 1.18rem; color: var(--navy);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- login: full tool-letter logo on a clean white card ----------------- */
.login-logo-card { background: #fff; border: 1px solid var(--border); border-radius: 20px;
                   padding: 20px 26px; box-shadow: 0 6px 24px rgba(18,38,58,.08); margin-bottom: 20px; }
.login-logo-card img { display: block; width: 232px; max-width: 64vw; height: auto; }
.login-sub { color: var(--muted); font-size: 0.98rem; margin: 2px 0 22px; text-align: center; max-width: 22rem; }
/* SMS text-code login (alternate to the PIN pad) */
.login-alt { background: none; border: none; color: var(--navy); font-weight: 700; font-size: 0.9rem;
             margin-top: 18px; cursor: pointer; text-decoration: underline; font-family: inherit; }
.login-field { width: 100%; max-width: 280px; margin: 4px 0 6px; }
.login-input { width: 100%; text-align: center; font-size: 1.4rem; letter-spacing: 0.12em; font-weight: 700;
               padding: 14px 12px; border: 1.5px solid var(--border); border-radius: 14px; font-family: inherit;
               color: var(--navy); background: #fff; box-sizing: border-box; }
.login-input:focus { outline: none; border-color: var(--navy); }
.login-btn { width: 100%; max-width: 280px; margin-top: 6px; }
.login-remember { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.88rem;
                  margin: 4px 0 12px; cursor: pointer; }
.login-remember input { width: 17px; height: 17px; accent-color: var(--navy); }

/* ---- HR table view (Team) --------------------------------------------- */
.hr-toggle { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.hr-vt { border:none; background:#fff; color:var(--muted); font-weight:700; font-size:.72rem; padding:5px 12px; cursor:pointer; }
.hr-vt.on { background:var(--navy); color:#fff; }
.hr-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:4px -4px 0; }
.hr-table { border-collapse:separate; border-spacing:0; width:100%; font-size:.82rem; min-width:840px; }
.hr-table th { text-align:left; font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; padding:7px 8px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--card); }
.hr-table td { padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.hr-table tbody tr:last-child td { border-bottom:none; }
.hr-table .hr-c { text-align:center; }
.hr-name { position:sticky; left:0; background:var(--card); min-width:118px; box-shadow:1px 0 0 var(--border); }
.hr-open { border:none; background:none; font-weight:700; color:var(--navy); cursor:pointer; padding:0; font-family:inherit; font-size:.86rem; text-align:left; letter-spacing:-.01em; }
.hr-sub { font-size:.7rem; color:var(--muted); margin-top:1px; }
.hr-table .hr-n { width:62px; text-align:right; }
.hr-table .hr-ph { width:118px; }
.hr-table input[type="number"], .hr-table input[type="tel"], .hr-table .hr-sel {
  padding:6px 7px; border:1px solid var(--border); border-radius:7px; font-size:.82rem; font-family:inherit; background:#fff; color:var(--text); }
.hr-table input:focus, .hr-table .hr-sel:focus { outline:none; border-color:var(--sky); box-shadow:0 0 0 2px var(--sky-soft); }
.hr-table input[type="checkbox"] { width:18px; height:18px; accent-color:var(--sky); }
.hr-report { font-weight:700; font-size:.76rem; color:var(--sky-dark); text-decoration:none; white-space:nowrap; }
.hr-report:active { text-decoration:underline; }

/* ---- Workday-style HR roster + directory ---- */
.hr-count { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:var(--sky-soft); color:var(--sky-dark); font-size:.72rem; font-weight:800; margin-right:auto; }
.hr-av { flex:none; width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:.01em; }
.hr-av.sm { width:34px; height:34px; font-size:.82rem; }
.hr-group-lbl { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:16px 0 8px; }
.hr-group-lbl:first-of-type { margin-top:10px; }
.hr-subgroup-lbl { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--sky); margin:10px 0 6px; padding-left:2px; }
.hr-emp { width:100%; text-align:left; display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:14px; padding:12px 14px; margin-bottom:8px; background:#fff; cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.hr-emp:hover { border-color:var(--sky); box-shadow:0 2px 10px rgba(18,38,58,.06); }
.hr-emp-main { flex:1 1 auto; min-width:0; }
.hr-emp-name { font-family:var(--font-display); font-weight:700; color:var(--navy); font-size:1rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hr-emp-sub { font-size:.8rem; color:var(--muted); margin-top:2px; }
.hr-emp-pay { font-size:.8rem; color:var(--sky-dark); font-weight:600; margin-top:3px; }
.hr-emp-chev { flex:none; color:var(--muted); font-size:22px; line-height:1; }
.hr-badge { display:inline-flex; align-items:center; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:2px 9px; border-radius:999px; }
.hr-badge.on { background:var(--green-bg); color:var(--green); }
.hr-badge.off { background:#eef1f4; color:var(--muted); }
/* Role badges (Owner / Admin / Crew) */
.hr-role { display:inline-flex; align-items:center; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:2px 9px; border-radius:999px; }
.hr-role.owner { background:#fef0d9; color:#96590a; }
.hr-role.franchisee { background:#e9e2fb; color:#5b3aa6; }
.hr-role.admin { background:#e2f1fb; color:#1668a6; }
.hr-role.crew { background:#eef1f4; color:var(--muted); }
.hr-dir { border-collapse:separate; border-spacing:0; width:100%; font-size:.86rem; min-width:560px; }
.hr-dir th { text-align:left; font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:800; padding:8px 12px; border-bottom:2px solid var(--border); white-space:nowrap; }
.hr-dir td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.hr-dir tbody tr { cursor:pointer; }
.hr-dir tbody tr:hover td { background:var(--sky-soft); }
.hr-dir tbody tr:last-child td { border-bottom:none; }
.hr-dir .hr-c { text-align:center; }
.hr-dir-emp { display:flex; align-items:center; gap:10px; }
.hr-dir-name { font-weight:700; color:var(--navy); }
.hr-dir-pay { color:var(--sky-dark); font-weight:600; white-space:nowrap; }
.hr-dir-ph { color:var(--text); white-space:nowrap; }
.hr-chip { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; background:#eef1f4; color:var(--muted); font-weight:800; font-size:.8rem; }
.hr-chip.ok { background:var(--green-bg); color:var(--green); }
.hr-chip .ic { width:15px; height:15px; }
/* Employee profile header (Workday-style) */
.emp-hd { display:flex; align-items:center; gap:14px; padding-bottom:4px; }
.emp-hd .hr-av { width:56px; height:56px; font-size:1.25rem; }
.emp-hd-main { flex:1 1 auto; min-width:0; }
.emp-hd-name { font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:1.3rem; line-height:1.15; }
.emp-hd-sub { font-size:.82rem; color:var(--muted); margin-top:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.emp-hd-actions { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px; }
.emp-hd-actions .contact-btn { flex:0 1 auto; }
/* Profile sections as cards on a light sheet */
.emp-sheet { background:var(--bg); }
.emp-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin:12px 0; }
.emp-card .hr-sec { margin-top:0; border-bottom-color:var(--border); }
/* Corner X on every pop-up — pinned to the TOP-LEFT and STAYS in place while the
   modal body scrolls (position:sticky inside the scrolling sheet). */
.modal-sheet { position:relative; }
.modal-sheet.has-x { padding-top:14px; }
.modal-x { position:sticky; top:10px; width:36px; height:36px; margin:0 0 8px; border-radius:50%; border:none; background:rgba(18,38,58,.07); color:var(--navy); font-size:1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:6; box-shadow:0 0 0 6px #fff; }
.modal-x:hover { background:rgba(18,38,58,.14); }
/* Availability: multiple time blocks per day (split shifts) */
.avail-blocks { display:flex; flex-direction:column; gap:8px; }
.avail-block { display:flex; align-items:center; gap:8px; }
.avail-block .avail-start, .avail-block .avail-end { flex:1 1 auto; min-width:0; border:1px solid var(--border); border-radius:9px; padding:9px 10px; font-family:inherit; font-size:.95rem; }
.avail-block .avail-to { color:var(--muted); font-size:.85rem; flex:none; }
.avail-block-del { flex:none; width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--muted); cursor:pointer; font-size:.85rem; }
.avail-block-del:hover { color:var(--red); border-color:var(--red); }
.avail-add { align-self:flex-start; background:none; border:none; color:var(--sky); font-weight:700; font-size:.85rem; cursor:pointer; padding:2px 0; margin-top:2px; }
/* Outreach activity/tracking inputs — match the rest of the site */
.ov-track input, .ov-track select { width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 12px; font-family:inherit; font-size:.95rem; background:#fff; color:var(--text); }
.ov-track input:focus, .ov-track select:focus { outline:none; border-color:var(--sky); box-shadow:0 0 0 3px var(--sky-soft); }
.ov-track .ov-cbtn { width:34px; height:34px; padding:0; }
.ov-track #ov-v-add, .ov-track #ov-next-save { width:auto; }
.ov-track #ov-v-add { width:100%; }
.ov-track .section-subtitle { margin-bottom:8px; }
.ov-track input[type="date"] { min-width:0; }

/* ---- Desktop: same phone layout, just a wider, more proportionate column ----
   The app is a single-column mobile layout capped at 560px. On bigger screens
   that leaves most of the window empty, so widen the column (and the fixed
   bottom nav + floating +) in steps. Everything else already centers via
   margin:auto, so it follows along. */
@media (min-width: 900px) {
  #app { max-width: 680px; }
  .bottom-nav { max-width: 680px; }
  .fab-new { right: calc((100vw - 680px) / 2 + 16px); }
  .modal-sheet { max-width: 600px; border-radius: 20px; }
  .modal-backdrop { align-items: center; }
}

/* ---- Desktop optimization: compact controls + right-sized forms -------------
   On wide screens the mobile layout leaves controls oversized and inputs
   stretched full-width (lots of scroll, wasted space). Tighten the control
   chrome so views like the week schedule fit on one screen, and cap form-control
   widths so forms read like a real desktop app instead of a blown-up phone. */
@media (min-width: 900px) {
  /* --- schedule chrome: fit the week grid in one screen --- */
  .sched-toggle { margin: 0 0 8px; padding: 3px; }
  .sched-tab { padding: 7px 12px; font-size: .9rem; }
  .ag-span { margin: 2px 0 8px; }
  .ag-span-btn { padding: 6px 10px; }
  .cal-nav { padding: 0 4px 6px; }
  .cal-nav .icon-btn { width: 34px; height: 34px; }
  .cal-month-label { font-size: 1rem; }
  .wk-legend { margin: 0 0 6px; }
  .hub-tabs { margin: 0 0 8px; }
  .tabs { margin-bottom: 8px; }
  .topbar { padding-top: 14px; padding-bottom: 6px; }
  /* hour gridlines must match the desktop row height (ROW_H = 27 in app.js) */
  .wk-col { background-image: repeating-linear-gradient(#f1f5f9 0 1px, transparent 1px 27px); }

  /* --- forms: right-sized, less scroll --- */
  .card { padding: 16px 18px; margin-bottom: 12px; }
  .field { margin-bottom: 11px; }
  .field input, .field select { max-width: 460px; }
  .field textarea { max-width: 640px; }
  /* two-col field pairs and phone/schedule multi-lists should still fill their cell */
  .two-col .field input, .two-col .field select,
  .ml-list input, .sched-send-row input, .cat-row input, .cat-row select { max-width: none; }
}

/* ---- Desktop: two-column card flow for dashboards & overviews --------------
   Stacked independent cards flow into two balanced columns on wide screens so
   the page isn't one long scroll. Cards never split across columns. Opt-in via
   #dash-body (the admin dashboard) or the .cols2 class on any card-stack screen. */
@media (min-width: 900px) {
  /* Single column, in DOM (importance) order — no newspaper masonry. The old
     column-count:2 flowed cards down the left then the right, which scrambled the
     top-to-bottom importance order and read as "jumbled". */
  #dash-body, .cols2 { column-count: 1; }
  #dash-body > *, .cols2 > * {
    break-inside: avoid; -webkit-column-break-inside: avoid;
    margin-bottom: 16px; width: 100%;
  }
  /* the app's own bottom margins would double up inside a column */
  #dash-body > .card, .cols2 > .card { margin-bottom: 16px; }

  /* Full-width spanners: toggles, section headers, top-level primary buttons and
     the danger zone stay across BOTH columns instead of getting trapped in one.
     column-span:all also forces a clean break, so a header/toggle correctly caps
     the cards above it and starts a fresh two-column run below. */
  .cols2 > .tabs,
  .cols2 > .rv-sec-head,
  .cols2 > .jd-top,
  .cols2 > .quote-banner,
  .cols2 > .pending-banner,
  .cols2 > .hr-group-lbl,
  .cols2 > .hr-subgroup-lbl,
  .cols2 > .sc-overall,
  .cols2 > .sc-foot,
  .cols2 > .bk-daypanel,
  .cols2 > .danger-zone,
  .cols2 > .btn {
    column-span: all; -webkit-column-span: all;
    break-inside: avoid; -webkit-column-break-inside: avoid;
  }
  /* Employee list rows sit tighter than full cards when columned. */
  .cols2 > .hr-emp { margin-bottom: 10px; }

  /* Dashboard: the greeting and the pinned Today/Upcoming agenda span BOTH
     columns at the very top, so the agenda is the first thing seen; the action
     cards flow into two columns beneath it. */
  #dash-body > .dash-greeting,
  #dash-body > .dash-agenda {
    column-span: all; -webkit-column-span: all;
    break-inside: avoid; -webkit-column-break-inside: avoid;
  }
}
/* Compact upcoming-agenda rows (tap to open the job). */
.dash-item.dash-up { cursor: pointer; }
.dash-up-chev { color: var(--muted); font-size: 1.3rem; line-height: 1; padding-left: 6px; align-self: center; }

/* ---- Audit log (owner-only) ---------------------------------------------- */
.aud-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.aud-sel, .aud-search { padding: 8px 10px; border: 1px solid var(--line, #dfe4ea); border-radius: 8px; background: #fff; font-size: .9rem; color: var(--ink, #1a2330); }
.aud-search { flex: 1; min-width: 130px; }
.aud-people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.aud-person { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #dfe4ea; border-radius: 999px; background: #fff; cursor: pointer; font-size: .85rem; }
.aud-person.on { background: #14335c; border-color: #14335c; color: #fff; }
.aud-person-count { background: #eef1f5; color: #14335c; border-radius: 999px; padding: 0 7px; font-weight: 700; font-size: .78rem; }
.aud-person.on .aud-person-count { background: rgba(255,255,255,.24); color: #fff; }
.aud-total { color: var(--muted, #6b7280); font-size: .8rem; margin-left: 4px; }
.aud-day { font-size: .8rem; font-weight: 700; color: var(--muted, #6b7280); text-transform: uppercase; letter-spacing: .04em; margin: 14px 2px 6px; }
.aud-list { padding: 4px 0; }
.aud-row { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #f0f2f5; }
.aud-row:last-child { border-bottom: none; }
.aud-ico { font-size: 1.05rem; line-height: 1.4; width: 22px; text-align: center; flex-shrink: 0; }
.aud-main { flex: 1; min-width: 0; }
.aud-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.aud-actor { font-weight: 700; color: #14335c; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; }
.aud-role { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; }
.aud-role-owner { background: #fdeccd; color: #8a5a00; }
.aud-role-admin { background: #dbeafe; color: #1e40af; }
.aud-role-crew { background: #dcfce7; color: #166534; }
.aud-role-sys { background: #eef1f5; color: #6b7280; }
.aud-time { color: var(--muted, #9aa3af); font-size: .78rem; white-space: nowrap; flex-shrink: 0; }
.aud-sum { color: #2b3648; font-size: .9rem; margin-top: 2px; line-height: 1.35; }
.aud-ent { color: #6b7280; }
.aud-changes { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.aud-change { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: .82rem; background: #f7f9fb; border: 1px solid #eef1f5; border-radius: 6px; padding: 4px 8px; }
.aud-cf { font-weight: 700; color: #14335c; }
.aud-from { color: #9aa3af; text-decoration: line-through; }
.aud-arrow { color: #9aa3af; }
.aud-to { color: #166534; font-weight: 600; }
.aud-link { display: inline-block; margin-top: 6px; font-size: .82rem; color: #1e40af; text-decoration: none; font-weight: 600; }
.aud-link:hover { text-decoration: underline; }
.aud-row.aud-delete .aud-ico { filter: none; }
.aud-row.aud-pay { background: #fcfdf8; }

/* Payment Ledger — per-employee "Owed" tag (paid uses the green kef-paid badge). */
.lg-owed { display: inline-block; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; background: #fef3c7; color: #92600a; margin-left: 4px; }

/* ---- Daily checklist (admin worksheet) ----------------------------------- */
.cl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cl-dateinput { border: 1px solid var(--line, #dfe4ea); border-radius: 8px; padding: 6px 8px; font-size: .85rem; color: var(--ink, #1a2330); background: #fff; }
.cl-progwrap { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; }
.cl-prog { flex: 1; height: 9px; background: #eef1f5; border-radius: 999px; overflow: hidden; }
.cl-progfill { height: 100%; border-radius: 999px; transition: width .18s ease; }
.cl-progtxt { font-size: .82rem; font-weight: 800; color: #2b3648; white-space: nowrap; }
.cl-progtxt.done { color: #1a7f52; }
.cl-phase { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin: 16px 0 4px; }
.cl-dot { width: 9px; height: 9px; border-radius: 50%; }
.cl-item { display: flex; align-items: flex-start; gap: 11px; padding: 9px 4px; border-radius: 10px; cursor: pointer; border-top: 1px solid #f2f4f7; }
.cl-item:first-of-type { border-top: none; }
.cl-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.cl-box { flex: none; width: 22px; height: 22px; border: 2px solid #cdd8e2; border-radius: 6px; margin-top: 1px; position: relative; transition: all .12s ease; }
.cl-item.on .cl-box { background: #1a7f52; border-color: #1a7f52; }
.cl-item.on .cl-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(43deg); }
.cl-lbl { font-size: .92rem; line-height: 1.35; color: #2b3648; }
.cl-item.on .cl-lbl { color: #6b7280; }
.cl-orow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #f2f4f7; }
.cl-orow:first-of-type { border-top: none; }
.cl-oname { font-weight: 700; color: #14335c; font-size: .9rem; width: 92px; flex: none; }
.cl-obar { flex: 1; height: 8px; background: #eef1f5; border-radius: 999px; overflow: hidden; }
.cl-ofill { height: 100%; border-radius: 999px; }
.cl-badge { font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #eef1f5; color: #14335c; white-space: nowrap; }
.cl-badge.done { background: #dcfce7; color: #166534; }

/* ---- Daily worksheet (numbers / bottom line) ----------------------------- */
.cl-bl { text-align:center; background:linear-gradient(150deg,#12263a,#173a52); color:#eaf3f8; border-radius:14px; padding:14px 16px; margin:12px 0 14px; }
.cl-bl-lbl { font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8fd0e6; }
.cl-bl-num { font-size:2rem; font-weight:800; margin:2px 0; }
.cl-bl-num.neg { color:#ff9c8a; }
.cl-bl-sub { font-size:.72rem; color:#9fb6c9; }
.cl-frow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid #f2f4f7; }
.cl-frow:first-of-type { border-top:none; }
.cl-flabel { font-size:.9rem; color:#2b3648; font-weight:600; flex:1; }
.cl-fin { display:flex; align-items:center; gap:6px; }
.cl-pre { color:#6b7280; font-weight:700; }
.cl-fin input { width:96px; text-align:right; border:1px solid var(--line,#dfe4ea); border-radius:8px; padding:7px 9px; font-size:.95rem; font-weight:700; color:#14335c; }
.cl-hint { border:none; background:#eef4f8; color:#0f3a52; font-size:.68rem; font-weight:800; padding:3px 7px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.cl-hint:active { background:#d9e9f1; }
.cl-orow2 { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid #f2f4f7; }
.cl-orow2:first-of-type { border-top:none; }
.cl-osub { color:#6b7280; font-size:.76rem; margin-top:1px; }
.cl-badge.neg { background:#fee2e2; color:#b91c1c; }

/* ---- Daily worksheet: confirmations + booked table + follow-ups ----------- */
.cl-must { background:#f7fafc; border:1px solid #e3ebf2; border-radius:12px; padding:10px 12px; }
.cl-must-hd { display:flex; justify-content:space-between; align-items:center; font-weight:800; color:#14335c; font-size:.9rem; margin-bottom:2px; }
.cl-must-hd span:last-child { font-size:.8rem; color:#6b7280; }
.cl-must-hd span:last-child.done { color:#1a7f52; }
.cl-brow { display:grid; grid-template-columns:64px 1fr 1fr 26px; gap:6px; margin-bottom:6px; align-items:center; }
.cl-brow input { border:1px solid var(--line,#dfe4ea); border-radius:7px; padding:6px 8px; font-size:.85rem; min-width:0; }
.cl-furow { display:grid; grid-template-columns:1fr 26px; gap:6px; margin-bottom:6px; align-items:center; }
.cl-furow input { border:1px solid var(--line,#dfe4ea); border-radius:7px; padding:6px 8px; font-size:.85rem; }
.cl-del { border:none; background:#f2f4f7; color:#8a96a3; border-radius:7px; font-size:1.1rem; line-height:1; cursor:pointer; width:26px; height:30px; }
.cl-del:active { background:#e4e8ee; }
.cl-cdots { display:inline-flex; gap:3px; margin-right:6px; vertical-align:middle; }
.cl-cdot { width:8px; height:8px; border-radius:50%; background:#d5dde5; display:inline-block; }
.cl-cdot.on { background:#1a7f52; }

/* ---- Crew guided tour (coach marks) ------------------------------------- */
#tour-root{ position:fixed; inset:0; z-index:4000; pointer-events:none; }
#tour-root:empty{ display:none; }
.tour-backdrop{ position:fixed; inset:0; background:rgba(11,26,40,.55); pointer-events:auto; }
.tour-spot{ position:fixed; border-radius:14px; box-shadow:0 0 0 3px #2ba0c4, 0 0 0 9999px rgba(11,26,40,.55);
  transition:top .2s ease,left .2s ease,width .2s ease,height .2s ease; pointer-events:none; }
.tour-card{ position:fixed; width:min(340px,calc(100vw - 24px)); background:#fff; border-radius:16px;
  box-shadow:0 18px 46px rgba(11,26,40,.34); padding:16px 16px 14px; pointer-events:auto;
  transition:top .2s ease,left .2s ease; }
.tour-x{ position:absolute; top:9px; right:9px; width:28px; height:28px; border:none; background:transparent;
  color:#8798a6; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.tour-x svg{ width:17px; height:17px; }
.tour-step{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#2ba0c4; }
.tour-title{ font-size:17px; font-weight:800; color:#12263a; margin:3px 0 5px; letter-spacing:-.01em; }
.tour-body{ font-size:13.5px; line-height:1.5; color:#33475a; }
.tour-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; gap:10px; }
.tour-right{ display:flex; gap:8px; margin-left:auto; }
.tour-skip{ border:none; background:transparent; color:#8798a6; font-weight:700; font-size:13px; cursor:pointer; padding:6px 2px; }
.tour-skip:empty{ display:none; }

/* ---- Out of Office editor -------------------------------------------------- */
.ooo-launch{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.ooo-launch .ic{ width:18px; height:18px; }
/* Compact OOO pill shown above the week-range selector on Team Availability. */
.ooo-pill-row{ display:flex; justify-content:flex-end; margin:0 0 8px; }
.ooo-pill{ flex:0 0 auto; border:1.5px solid #dbe6f1; background:#fff; color:var(--navy);
  font-weight:700; font-size:0.85rem; padding:7px 14px; border-radius:20px; cursor:pointer;
  font-family:inherit; white-space:nowrap; }
.ooo-pill .ic{ width:16px; height:16px; }
.ooo-pill:hover{ border-color:var(--navy); }
.ooo-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0; }
.ooo-person{ padding:10px 0; border-top:1px solid var(--line,#e9eef3); }
.ooo-person:first-of-type{ border-top:none; }
.ooo-person-name{ font-weight:800; color:var(--navy); margin-bottom:6px; }
/* Audit log live indicator */
.aud-live{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; color:#0a7d33; padding:6px 10px; }
.aud-live-dot{ width:8px; height:8px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 0 rgba(22,163,74,.5); animation:aud-pulse 1.8s ease-out infinite; }
@keyframes aud-pulse{ 0%{ box-shadow:0 0 0 0 rgba(22,163,74,.5);} 70%{ box-shadow:0 0 0 6px rgba(22,163,74,0);} 100%{ box-shadow:0 0 0 0 rgba(22,163,74,0);} }
/* Audit "who's active" presence strip */
.aud-presence-list{ display:flex; flex-wrap:wrap; gap:8px; }
.aud-pres{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; font-weight:700; font-size:.86rem; border:1px solid var(--line,#e5e7eb); background:#fff; color:var(--navy); }
.aud-pres-dot{ width:8px; height:8px; border-radius:50%; background:#c2c9d2; flex:0 0 auto; }
.aud-pres.on{ background:#eafaf0; border-color:#bfe8cd; }
.aud-pres.on .aud-pres-dot{ background:#16a34a; box-shadow:0 0 0 0 rgba(22,163,74,.5); animation:aud-pulse 1.8s ease-out infinite; }
.aud-pres-when{ font-weight:600; color:var(--muted); font-size:.78rem; }
.aud-pres.on .aud-pres-when{ color:#0a7d33; }
/* Outreach route builder */
.rt-list{ display:flex; flex-direction:column; border:1px solid var(--line,#e9eef3); border-radius:12px; overflow:hidden; max-height:46vh; overflow-y:auto; }
.rt-item{ display:flex; align-items:flex-start; gap:11px; padding:10px 12px; border-top:1px solid var(--line,#eef2f6); cursor:pointer; }
.rt-item:first-child{ border-top:none; }
.rt-item input{ width:19px; height:19px; margin-top:2px; flex:0 0 auto; accent-color:var(--navy,#12263a); }
.rt-item-main{ display:flex; flex-direction:column; gap:2px; line-height:1.3; min-width:0; }
.rt-item-name{ font-weight:700; color:var(--navy); }
.rt-item-sub{ font-size:.82rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.ooo-chip{ display:inline-flex; align-items:center; gap:8px; background:#fff4e8; border:1px solid #f4c99a; color:#9a4a12; border-radius:999px; padding:6px 8px 6px 13px; font-size:13px; font-weight:700; }
.ooo-chip button{ border:none; background:transparent; color:#b5651d; font-weight:800; cursor:pointer; font-size:13px; line-height:1; padding:2px 4px; }
/* Out-of-office month calendar */
.ooo-cal-nav{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 8px; }
.ooo-cal-title{ font-weight:800; color:var(--navy); font-size:1.02rem; }
.ooo-cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; }
.ooo-cal-dow span{ text-align:center; font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; }
.ooo-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.ooo-cell{ position:relative; min-height:42px; border:1px solid var(--border); background:#fff; border-radius:10px; font-size:14px; font-weight:700; color:var(--text); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2px; }
.ooo-cell.blank{ border:none; background:transparent; cursor:default; }
.ooo-cell.today{ box-shadow:inset 0 0 0 2px var(--sky); }
.ooo-cell.full{ background:#e5640f; border-color:#e5640f; color:#fff; }
.ooo-cell.part{ background:#fff4e8; border-color:#f4c99a; color:#9a4a12; }
.ooo-cell.sel{ outline:3px solid var(--navy); outline-offset:1px; }
.ooo-cell-t{ font-size:9px; font-weight:800; line-height:1; margin-top:2px; opacity:.9; }