/* Keyzo — shared styles (product look, not any one business's brand)
   Layout: left sidebar (bottom tab bar on phones) + a shared "list screen" skeleton.
   Look: teal family + orange accent, Barlow headings + Inter body, rounded 14px
   white cards with soft shadows, uppercase eyebrows.
   Contrast (30 Sep 2026): every text colour here passes 4.5:1 on white — the orange, green,
   slate and mute were darkened for reading in sunlight. Amber badges use dark text. */

:root {
  /* Teal family */
  --teal: #1a7489;
  --teal-dark: #114d5d;
  --teal-deepest: #0b3c49;
  --teal-light: #35a8c1;
  --teal-bright: #2496ad;
  --teal-tint: #e8f3f5;

  /* Orange family */
  --orange: #d9481a;
  --orange-deep: #b83c14;
  --orange-bright: #f85c2a; /* decoration only (stripes, dots), never behind text */
  --orange-tint: #fff0ea;
  --peach: #ffc9b3;

  /* Neutrals */
  --ink: #14202b;
  --text: #2b3640;
  --slate: #5f6b77;
  --mute: #6f7a86;
  --paper: #f7f6f2;
  --white: #ffffff;
  --border: #e3e6e8;

  /* Status colours */
  --status-draft: #e8a33d;
  --status-approved: #237f4a;
  --status-pending: var(--teal);
  --status-failed: #d64545;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(20, 32, 43, 0.05), 0 2px 8px rgba(20, 32, 43, 0.05);
  --shadow-2: 0 4px 14px rgba(20, 32, 43, 0.08), 0 1px 3px rgba(20, 32, 43, 0.06);
  --sidebar-width: 236px;

  --font-head: "Barlow", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* Anything marked hidden stays hidden, even if a class gives it display:flex. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  background: linear-gradient(180deg, #f7f6f2 0%, #eef1f1 100%);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-head); color: var(--ink); }

a { color: var(--teal); }

.app-shell { display: flex; min-height: 100vh; }

/* ===== Sidebar (teal gradient, like the website's footer/panels) ===== */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(53, 168, 193, 0.28), transparent 55%),
    linear-gradient(180deg, var(--teal-dark) 0%, var(--teal-deepest) 100%);
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  flex-direction: column;
  padding: 22px 0 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-org {
  padding: 0 22px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
}

.sidebar-brand { font-family: var(--font-head); font-weight: 700; font-size: 21px; line-height: 1.15; color: #fff; }

.sidebar-org-sub {
  margin-top: 8px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--peach);
}

.sidebar-nav { list-style: none; margin: 0; padding: 0 12px; }

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  margin-bottom: 2px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  position: relative;
  transition: background 0.15s, color 0.15s;
}

.sidebar-nav a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

.sidebar-nav a.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
}

.sidebar-nav a.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--orange-bright);
}

.sidebar-nav .icon { width: 20px; display: inline-flex; justify-content: center; }
.sidebar-nav .icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sidebar-footer {
  margin-top: auto;
  padding: 14px 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

.sidebar-footer strong { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.sidebar-footer a { color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.sidebar-footer a:hover { color: #fff; }
.footer-user { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Main content ===== */
.main { flex: 1; min-width: 0; padding: 26px 34px 48px; max-width: 1280px; }

.breadcrumb { font-size: 13px; color: var(--slate); margin-bottom: 6px; }
.breadcrumb a { color: var(--slate); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal); }

.eyebrow {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 4px;
}

.page-title { font-size: 32px; font-weight: 600; margin: 0 0 22px; letter-spacing: -0.01em; }

/* ===== Buttons ===== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #dc4c1a 0%, #c84216 100%);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(200, 66, 22, 0.3);
  text-decoration: none;
  transition: background 0.15s, transform 0.05s;
}

.btn-primary:hover { background: linear-gradient(180deg, #c84216 0%, var(--orange-deep) 100%); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  color: var(--teal);
  border: 1.5px solid var(--teal);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn-secondary:hover { background: var(--teal-tint); }

/* ===== Dashboard cards ===== */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.stat-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
}

.stat-card.accent-teal {
  background:
    radial-gradient(circle at 85% 0%, rgba(53, 168, 193, 0.45), transparent 60%),
    linear-gradient(135deg, var(--teal-bright) 0%, var(--teal) 55%, var(--teal-dark) 100%);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-2);
}

.stat-card.accent-orange {
  background: linear-gradient(135deg, #e2531f 0%, var(--orange) 55%, var(--orange-deep) 100%);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-2);
}

.stat-card .label {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate);
  margin-bottom: 8px;
}

.stat-card.accent-teal .label, .stat-card.accent-orange .label { color: rgba(255, 255, 255, 0.85); }

.stat-card .value { font-family: var(--font-head); font-size: 38px; font-weight: 700; line-height: 1; color: var(--ink); }
.stat-card.accent-teal .value, .stat-card.accent-orange .value { color: #fff; }

/* ===== Shared "list screen" skeleton ===== */
.status-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }

.status-tabs a {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--border);
}

.status-tabs a:hover { color: var(--teal); border-color: var(--teal-light); }

.status-tabs a.active {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
  font-weight: 600;
}

.status-tabs .count {
  display: inline-block;
  background: rgba(20, 32, 43, 0.1);
  color: inherit;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  margin-left: 6px;
}

.status-tabs a.active .count { background: rgba(255, 255, 255, 0.22); }

.list-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 18px 20px;
}

.list-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.list-panel-head h2 { margin: 0; font-size: 20px; font-weight: 600; }

.list-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }

.search-box {
  flex: 1;
  max-width: 340px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--paper);
}

.search-box:focus { outline: none; border-color: var(--teal-light); box-shadow: 0 0 0 3px rgba(53, 168, 193, 0.2); background: #fff; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.data-table th {
  text-align: left;
  padding: 10px 12px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td { padding: 13px 12px; border-bottom: 1px solid #f0f1f2; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--teal-tint); }
.data-table .job-no { font-family: var(--font-head); font-weight: 700; color: var(--teal); }
.data-table .customer-name { font-weight: 600; color: var(--ink); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}

.badge.draft { background: var(--status-draft); color: #3a2604; }
.badge.approved { background: var(--status-approved); }
.badge.pending { background: var(--status-pending); }
.badge.failed { background: var(--status-failed); }
.badge.scheduled { background: var(--teal); }

.empty-state { text-align: center; padding: 42px 20px; color: var(--slate); font-size: 14px; }

.note {
  font-size: 13px;
  color: var(--slate);
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--white);
  border-left: 3px solid var(--teal-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-width: 820px;
}

/* ===== Address links (Maps / Waze) ===== */
.address-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.address-text { margin-right: 4px; }

.address-link {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  padding: 2px 10px;
  border: 1.5px solid var(--teal-light);
  border-radius: 999px;
  background: #fff;
}

.address-link:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ===== Settings ===== */


.field-group { margin-bottom: 18px; max-width: 380px; }
.field-group label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }

.field-group select, .field-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  background: #fff;
}

.toggle-row { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 10px; }
.toggle-row input { accent-color: var(--teal); width: 16px; height: 16px; }

.connection-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}

.connection-status .dot { width: 9px; height: 9px; border-radius: 50%; }
.connection-status.not-connected .dot { background: var(--status-failed); }
.connection-status.connected .dot { background: var(--status-approved); }

.settings-divider { margin: 32px 0; border: none; border-top: 1px solid var(--border); }

/* ===== Not-connected banner ===== */
.setup-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--orange-tint);
  border: 1px solid var(--peach);
  color: #8a3413;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 20px;
}

/* ===== Mobile: sidebar becomes a bottom tab bar ===== */
@media (max-width: 760px) {
  .app-shell { flex-direction: column; }

  .sidebar {
    position: fixed;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    z-index: 50;
    background: linear-gradient(180deg, var(--teal-dark), var(--teal-deepest));
  }

  .sidebar-org, .sidebar-footer { display: none; }
  .sidebar-nav { display: flex; justify-content: space-around; padding: 0; }
  .sidebar-nav li { flex: 1; min-width: 0; }

  .sidebar-nav a {
    flex-direction: column;
    gap: 3px;
    padding: 7px 0;
    font-size: 11px; /* 4 main pages + More (28 Sep) */
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-align: center;
    margin: 0;
  }

  .sidebar-nav a.active::before { left: 25%; right: 25%; top: -6px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .sidebar-nav .label-long { display: none; }

  .main { padding: 18px 16px 96px; }
  .page-title { font-size: 26px; }
  .mobile-header { display: flex !important; }

  .list-panel { padding: 14px; }

  /* Tables become stacked cards on a phone — each <td> needs a data-label
     attribute (e.g. data-label="Scheduled") so its heading shows on the left. */
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    margin-bottom: 10px;
    background: #fff;
  }
  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f1f2;
    text-align: right;
  }
  .data-table td::before {
    content: attr(data-label);
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
    text-align: left;
    flex-shrink: 0;
    padding-top: 2px;
  }
  .data-table td .address-links { justify-content: flex-end; }
  /* A cell with a second line (job no. under the invoice no., "Ref …" under the customer):
     label left, both lines right — not three things spread across the row. */
  .data-table td:has(> .muted) { flex-wrap: wrap; justify-content: flex-end; }
  .data-table td:has(> .muted)::before { margin-right: auto; }
  .data-table td > .muted { flex-basis: 100%; text-align: right; margin-top: -2px; }
  .data-table .stage-cell { align-items: flex-end; }
  .data-table tbody tr:hover td { background: none; }
}

.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin: -18px -16px 18px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
}

.mobile-brand { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: #fff; }
.sidebar-org-sub a { color: inherit; text-decoration: none; }

/* =====================================================================
   Schedule (calendar) — schedule.html / js/schedule.js
   ===================================================================== */
.main-wide { max-width: none; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.page-head .page-title { margin: 0; }

.btn-sm { padding: 7px 14px; font-size: 13px; }

.btn-icon {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: #fff; color: var(--teal); font-size: 24px; line-height: 1; cursor: pointer;
}
.btn-icon:hover { background: var(--teal-tint); }

.cal-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-toolbar h2 { margin: 0; font-size: 20px; font-weight: 600; flex: 1; min-width: 180px; }
.cal-nav { display: flex; gap: 6px; align-items: center; }
.cal-jump {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13px; color: var(--text); background: #fff;
}

/* Segmented buttons (view picker, Job / Block out switch) */
.seg { display: inline-flex; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: none; padding: 7px 14px; border-radius: 999px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--slate); cursor: pointer;
}
.seg button:hover { color: var(--teal); }
.seg button.active { background: var(--teal); color: #fff; font-weight: 600; }

/* Calendar frame */
.cal { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
.cal-head, .cal-body { display: grid; grid-template-columns: 58px repeat(var(--days, 7), minmax(0, 1fr)); }
.cal-head { border-bottom: 1px solid var(--border); background: #fff; }
.cal-head-gutter { border-right: 1px solid var(--border); }

.cal-head-day {
  border: 0; border-left: 1px solid var(--border); background: none; cursor: pointer;
  padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--font-head);
}
.cal-head-day:first-of-type { border-left: 0; }
.cal-head-day:hover { background: var(--teal-tint); }
.cal-head-day.static { cursor: default; }
.cal-head-day.static:hover { background: none; }
.cal-head-day .dow { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.cal-head-day .dom { font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.25; min-width: 32px; padding: 0 6px; border-radius: 999px; }
.cal-head-day.weekend .dow { color: var(--mute); }
.cal-head-day.today .dow { color: var(--orange-deep); }
.cal-head-day.today .dom { background: var(--orange); color: #fff; }

.main.page-schedule { padding-bottom: 10px; } /* more room for the calendar */
.cal-scroll { overflow-y: auto; } /* height set by schedule.js so the day fits the screen */
.cal-gutter { position: relative; border-right: 1px solid var(--border); }
.cal-hour { position: absolute; right: 8px; transform: translateY(-50%); font-size: 12px; font-weight: 500; color: var(--slate); white-space: nowrap; }

.cal-day {
  position: relative; border-left: 1px solid var(--border); cursor: cell;
  background-image:
    /* hour = solid, half hour = medium, quarter hour = faint */
    repeating-linear-gradient(to bottom, #cfd7dc 0, #cfd7dc 1px, transparent 1px, transparent var(--hour-h)),
    repeating-linear-gradient(to bottom, #e0e6e9 0, #e0e6e9 1px, transparent 1px, transparent var(--half-h)),
    repeating-linear-gradient(to bottom, #edf0f2 0, #edf0f2 1px, transparent 1px, transparent var(--slot-h));
}
.cal-gutter + .cal-day { border-left: 0; }
.cal-day:hover { background-color: #f7fbfc; }

.cal-off {
  position: absolute; left: 0; right: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(20, 32, 43, 0.035) 0 6px, transparent 6px 12px);
}

.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--orange-bright); z-index: 4; pointer-events: none; }
.cal-now-label {
  position: absolute; right: 4px; transform: translateY(-50%); z-index: 5;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--orange-deep);
  padding: 1px 5px; border-radius: 999px; white-space: nowrap;
}
.cal-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange-bright); }

/* Job cards on the time grid */
.cal-job {
  position: absolute; z-index: 2; overflow: hidden; cursor: pointer;
  border-radius: 8px; padding: 4px 7px;
  font-size: 13px; line-height: 1.35; color: #fff;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  border-left: 4px solid var(--orange-bright);
  box-shadow: 0 1px 3px rgba(20, 32, 43, 0.18);
}
.cal-job:hover, .cal-job:focus-visible { box-shadow: var(--shadow-2); filter: brightness(1.08); outline: none; }
.cal-job .t { font-size: 12px; font-weight: 600; opacity: 0.88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Side-by-side (double-booked) cards get narrow: show less rather than wrap into a mess. */
.cal-job { container-type: inline-size; }
.cal-job .t-short { display: none; }
@container (max-width: 130px) { .cal-job .st-pill { display: none; } }
@container (max-width: 95px) {
  .cal-job .t-long, .cal-job .n .tag { display: none; }
  .cal-job .t-short { display: inline; }
}
@container (max-width: 60px) { .cal-job .t { display: none; } } /* just the name, tap to see more */
.cal-job .n { font-family: var(--font-head); font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-job .a, .cal-job .d { opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-job .tag { font-weight: 600; opacity: 0.85; margin-right: 2px; }
.cal-job.compact { display: flex; gap: 6px; align-items: baseline; padding-top: 2px; }
.cal-job.compact .t { flex-shrink: 0; }
.cal-job.completed { background: linear-gradient(135deg, #2f8a57 0%, #1f6e40 100%); border-left-color: #bfe6cf; }

/* Blocked-out time ("Booked out / unavailable") */
.cal-block {
  position: absolute; z-index: 1; overflow: hidden; cursor: pointer;
  border-radius: 8px; padding: 5px 8px; font-size: 12px; line-height: 1.3;
  color: var(--teal-deepest);
  background: repeating-linear-gradient(135deg, #e3f1f4 0 8px, #d3e9ee 8px 16px);
  border: 1px solid #b9dbe3;
}
.cal-block:hover, .cal-block:focus-visible { box-shadow: var(--shadow-2); outline: none; }
.cal-block .n { font-family: var(--font-head); font-weight: 700; font-size: 13px; }
.cal-block .t { font-size: 11px; opacity: 0.8; }

/* Settings — intro text and the Features tick-list */
.settings-intro { color: var(--slate); font-size: 14px; max-width: 560px; }
.feature-list { display: grid; gap: 10px; max-width: 620px; }
.feature {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; cursor: pointer;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.feature input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--teal); flex-shrink: 0; }
.feature strong { font-family: var(--font-head); font-size: 16px; color: var(--ink); }
.feature small { color: var(--slate); font-size: 13px; }
.feature.soon { cursor: default; opacity: 0.7; }
.soon-tag { font-style: normal; font-size: 11px; font-weight: 700; color: var(--teal); background: var(--teal-tint); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }

/* Pricing page — Price list + Job Packs */
.page-pricing .list-toolbar { justify-content: flex-start; }
.page-pricing .search-box { max-width: 380px; }
.toolbar-select {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: 14px var(--font-body); color: var(--text); background: #fff; max-width: 220px;
}
.toolbar-check { margin: 0 0 0 auto; font-size: 14px; color: var(--slate); }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table .price { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.data-table tr.archived td { opacity: 0.55; }
.badge.cancelled { background: var(--mute); }

.pack-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pack-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
  border-top: 4px solid var(--orange-bright); cursor: pointer; display: flex; flex-direction: column; gap: 8px;
}
.pack-card:hover, .pack-card:focus-visible { box-shadow: var(--shadow-2); outline: none; }
.pack-card.archived { opacity: 0.6; }
.pack-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pack-card-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.pack-card-head strong { font-family: var(--font-head); font-size: 20px; color: var(--teal-dark); }
.pack-card-desc { margin: 0; font-size: 13px; color: var(--slate); }
.pack-card-lines { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px dashed var(--border); font-size: 13px; }
.pack-card-lines li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.pack-card-foot { font-size: 12px; color: var(--mute); margin-top: auto; }

#item-form .markup-only { display: none; }
#item-form.by-markup .markup-only { display: block; }
#item-form.by-markup [name="sell_price"] { background: var(--paper); }

.pack-lines { margin: 6px 0 12px; }
.pack-lines-head, .pack-line { display: grid; grid-template-columns: minmax(0, 1fr) 64px 92px 76px 28px; gap: 8px; align-items: start; }
.pack-lines-head { font-size: 12px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 6px; }
.pack-line { padding: 6px 0; border-top: 1px solid #f0f1f2; }
.pack-line input {
  width: 100%; padding: 8px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: 14px var(--font-body); background: #fff; box-sizing: border-box;
}
.pl-desc { display: block; font-size: 12px; color: var(--slate); margin-top: 3px; }
.pl-total { font-weight: 600; text-align: right; padding-top: 9px; }
.pl-remove { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--mute); cursor: pointer; padding: 6px 0; }
.pl-remove:hover { color: var(--orange-deep); }
.pack-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 10px; font-size: 14px; color: var(--slate); margin-bottom: 12px; }
.pack-total strong { font-family: var(--font-head); font-size: 22px; color: var(--ink); }

/* Run sheet — the day as a route */
.cal.is-run .cal-head { display: none; }
.cal.is-run .cal-body { display: block; }
.cal.is-run .cal-scroll { background: var(--paper); }
.run { max-width: 760px; margin: 0 auto; padding: 12px 12px 90px; display: flex; flex-direction: column; gap: 8px; }
.run-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 14px; color: var(--slate); padding: 2px 2px 4px;
}
.run-summary strong { color: var(--ink); font-family: var(--font-head); font-size: 16px; }
.run-tools { display: flex; align-items: center; gap: 8px; }
.run-nav { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--slate); }
.run-nav select {
  font: 600 13px var(--font-body); color: var(--teal-dark); background: #fff;
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px;
}
.run-route {
  font-size: 13px; font-weight: 600; color: var(--teal); text-decoration: none;
  border: 1px solid var(--teal-light); border-radius: 999px; padding: 6px 12px; background: #fff;
}
.run-job {
  display: flex; gap: 12px; background: #fff; border-radius: 12px; padding: 12px;
  border-left: 5px solid var(--orange-bright); box-shadow: 0 1px 3px rgba(20, 32, 43, 0.12); cursor: pointer;
}
.run-job:focus-visible { outline: 2px solid var(--teal-light); }
.run-job.completed { border-left-color: #5aa87a; opacity: 0.75; }
.run-time { width: 58px; flex-shrink: 0; display: flex; flex-direction: column; font-size: 12px; color: var(--slate); }
.run-time strong { font-family: var(--font-head); font-size: 17px; color: var(--ink); }
.run-main { flex: 1; min-width: 0; }
.run-top { display: flex; align-items: baseline; gap: 6px; }
.run-no { font-size: 12px; font-weight: 600; color: var(--teal); flex-shrink: 0; }
.run-name { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-price { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--teal-dark); flex-shrink: 0; }
.run-done { font-size: 12px; font-weight: 700; color: #2f7f52; background: #e3f3ea; border-radius: 999px; padding: 2px 8px; flex-shrink: 0; }
.run-addr { font-size: 14px; color: var(--text); margin-top: 2px; }
.run-desc { font-size: 13px; color: var(--slate); margin-top: 2px; }
.run-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.run-btn {
  flex: 1; min-width: 60px; text-align: center; text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 9px 6px; border-radius: 10px; background: var(--teal-tint); color: var(--teal-dark);
}
.run-btn:active { background: #d3e9ee; }
.run-btn { white-space: nowrap; }
.run-btn-nav { flex: 1.6; background: var(--teal); color: #fff; }
.run-btn-nav:active { background: var(--teal-dark); }
.run-leg {
  display: flex; align-items: center; gap: 12px; margin-left: 30px; padding: 2px 0 2px 16px;
  border-left: 2px dashed #cfd7dc; font-size: 13px; color: var(--slate);
}
.run-leg a { color: var(--teal); font-weight: 600; text-decoration: none; }
.run-warn { color: var(--orange-deep); font-weight: 600; }
.run-free {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  border: 1px dashed var(--teal-light); background: var(--teal-tint); color: var(--teal-dark);
  border-radius: 12px; padding: 10px 12px; font: 500 14px var(--font-body); cursor: pointer; text-align: left;
}
.run-free-cta { font-weight: 700; font-size: 13px; color: var(--teal); flex-shrink: 0; }
.run-block {
  display: flex; gap: 10px; align-items: center; border-radius: 12px; padding: 10px 12px; font-size: 14px; cursor: pointer;
  color: var(--teal-deepest); background: repeating-linear-gradient(135deg, #e3f1f4 0 8px, #d3e9ee 8px 16px); border: 1px solid #b9dbe3;
}
.run-block-time { font-weight: 600; font-size: 13px; }
.run-now { display: flex; align-items: center; gap: 8px; color: var(--orange-deep); font-size: 12px; font-weight: 700; }
.run-now::after { content: ""; flex: 1; height: 2px; background: var(--orange-bright); }
.run-empty { text-align: center; color: var(--slate); padding: 24px 0 0; }

/* Drag to reschedule */
.cal-job, .cal-block, .mchip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cal-job::after, .cal-block::after { /* drag the bottom edge to change the length */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize;
}
.drag-src { opacity: 0.35; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }
.drag-ghost {
  position: fixed; z-index: 90; pointer-events: none; overflow: hidden;
  border-radius: 8px; padding: 4px 7px; font-size: 12px; line-height: 1.3; color: #fff;
  background: linear-gradient(135deg, var(--teal-light) 0%, var(--teal) 100%);
  border-left: 4px solid var(--orange-bright); box-shadow: 0 10px 28px rgba(11, 60, 73, 0.35);
}
.drag-ghost.block { color: var(--teal-deepest); background: #d3e9ee; border: 2px dashed var(--teal); }
.drag-ghost .t { font-size: 11px; font-weight: 700; }
.drag-ghost .n { font-family: var(--font-head); font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drag-ghost.month { padding: 5px 9px; border-radius: 6px; white-space: nowrap; font-weight: 600; }
.mcell.drop-target { background: var(--teal-tint); box-shadow: inset 0 0 0 2px var(--teal-light); }

.cal-foot { font-size: 13px; color: var(--slate); margin-top: 12px; }

/* Month view */
.cal.is-month .cal-head, .cal.is-month .cal-body { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal.is-month .cal-scroll { max-height: none; min-height: 0; overflow: visible; }
.cal.is-month .cal-head-day { border-left: 1px solid var(--border); }
.cal.is-month .cal-head-day:first-child { border-left: 0; }

.mcell {
  min-height: var(--mcell-h, 118px); padding: 6px; cursor: cell;
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.mcell:nth-child(7n + 1) { border-left: 0; }
.mcell:nth-child(-n + 7) { border-top: 0; }
.mcell:hover { background: #f7fbfc; }
.mcell.outside .mday { color: var(--mute); }

.mday {
  align-self: flex-end; border: 0; background: none; cursor: pointer;
  font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--ink);
  min-width: 26px; height: 26px; border-radius: 999px; padding: 0 6px;
}
.mday:hover { background: var(--teal-tint); color: var(--teal); }
.mcell.today .mday { background: var(--orange); color: #fff; }

.mitems { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mchip {
  display: flex; align-items: center; gap: 5px; min-width: 0; cursor: pointer;
  font-size: 12px; line-height: 1.2; padding: 3px 6px 3px 3px; border-radius: 6px;
  background: var(--teal-tint); color: var(--ink); border: 1px solid #cfe5ea;
}
.mchip:hover, .mchip:focus-visible { border-color: var(--teal-light); outline: none; }
.mtag {
  flex-shrink: 0; font-family: var(--font-head); font-weight: 700; font-size: 11px;
  background: var(--teal); color: #fff; border-radius: 4px; padding: 1px 5px;
}
.mname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mchip.completed .mtag { background: #2f7f52; }
.mchip.block { background: repeating-linear-gradient(135deg, #e3f1f4 0 6px, #d3e9ee 6px 12px); padding-left: 6px; color: var(--teal-deepest); }
.mmore {
  align-self: flex-start; border: 0; background: none; cursor: pointer; padding: 2px 4px;
  font-size: 12px; font-weight: 600; color: var(--teal);
}
.mmore:hover { text-decoration: underline; }

/* Booking / block-out dialog */
.modal {
  border: 0; padding: 0; border-radius: var(--radius);
  width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px);
  box-shadow: 0 20px 60px rgba(11, 60, 73, 0.35); color: var(--text); font-family: var(--font-body);
}
.modal::backdrop { background: rgba(11, 60, 73, 0.45); backdrop-filter: blur(2px); }
.modal form { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 24px 14px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 2px 0 0; font-size: 24px; font-weight: 600; }
.modal-head .eyebrow { display: flex; align-items: center; gap: 8px; }
.modal-close { border: 0; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--teal); cursor: pointer; padding: 8px 4px; -webkit-tap-highlight-color: transparent; }
.modal-close:hover { color: var(--teal-dark); text-decoration: underline; }
.modal-close:focus { outline: none; }
.modal-body { padding: 18px 24px 8px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 24px; border-top: 1px solid var(--border); background: var(--paper);
}
.modal-foot-left { display: flex; gap: 4px; flex-wrap: wrap; }
.modal-foot-right { display: flex; gap: 8px; margin-left: auto; }

.kind-switch { margin-bottom: 16px; }
.fs { border: 0; padding: 0; margin: 0; min-width: 0; }

.form-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.field { margin-bottom: 14px; min-width: 0; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 15px; background: #fff; color: var(--text);
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--teal-light); box-shadow: 0 0 0 3px rgba(53, 168, 193, 0.2);
}
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 14px; cursor: pointer; }
.check input { accent-color: var(--teal); width: 17px; height: 17px; }

.form-warn {
  background: var(--orange-tint); border: 1px solid var(--peach); color: #8a3413;
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; line-height: 1.45; margin: -2px 0 14px;
}
.form-warn.error { background: #fdecec; border-color: #f3b4b4; color: #8f1f1f; }

.jd-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.quick-btn {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--teal-light); color: var(--teal); background: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: 14px; text-decoration: none;
}
@media (hover: hover) { .quick-btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; } }

.btn-link { border: 0; background: none; color: var(--teal); font-weight: 600; font-size: 13px; cursor: pointer; padding: 6px 8px; font-family: var(--font-body); border-radius: 6px; }
.btn-link:hover { background: var(--teal-tint); }
.btn-link.danger { color: var(--status-failed); }
.btn-link.danger:hover { background: #fdecec; }
@media (max-width: 760px) { button.btn-link { padding: 12px 10px; font-size: 14px; } } /* thumb-sized on a phone */

.badge.scheduled { background: var(--teal); }
.badge.completed { background: var(--status-approved); }
.badge.cancelled { background: var(--mute); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 100;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--teal-deepest); color: #fff; padding: 12px 18px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; box-shadow: var(--shadow-2); max-width: calc(100vw - 32px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.show.has-action { pointer-events: auto; display: flex; align-items: center; gap: 14px; }
.toast-btn {
  flex-shrink: 0; border: 0; background: none; color: var(--teal-light); cursor: pointer;
  font: 700 14px var(--font-body); text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 2px;
}
.toast-btn:hover { color: #fff; }

@media (max-width: 760px) {
  .page-head { margin-bottom: 12px; }
  .cal-toolbar h2 { order: -1; flex-basis: 100%; font-size: 18px; }
  .cal-toolbar .seg { width: 100%; justify-content: space-between; }
  .cal-toolbar .seg button { padding: 7px 8px; font-size: 12px; }
  .cal-jump { flex: 1; min-width: 0; }
  .cal-head, .cal-body { grid-template-columns: 54px repeat(var(--days, 7), minmax(0, 1fr)); }

  /* Schedule on a phone: give the screen to the calendar so the day fits without scrolling. */
  .page-schedule .breadcrumb, .page-schedule .page-title, .page-schedule .cal-foot, .page-schedule .cal-jump { display: none; }
  /* Phone: no logo bar or banner, no repeated day header in Day view, no Weekdays button. */
  .page-schedule .mobile-header, .page-schedule .setup-banner { display: none !important; }
  .page-schedule .cal.is-single .cal-head { display: none; }
  .page-schedule .seg [data-range="weekdays"], .page-schedule .seg [data-range="month"] { display: none; }
  .page-schedule .seg button { padding: 9px 12px; font-size: 13px; } /* big enough for a thumb */
  .page-schedule .btn-icon { width: 34px; height: 34px; }
  .page-schedule .cal-hour { font-size: 13px; }
  .cal-now-label { font-size: 10px; padding: 1px 3px; right: 2px; letter-spacing: -0.02em; }
  .run-nav select { font-size: 16px; font-weight: 500; padding: 6px 10px; min-height: 36px; color: var(--teal); } /* 16px stops iPhone zooming in; lighter so it doesn't shout */
  /* Pricing on a phone */
  .page-pricing .search-box, .toolbar-select { flex: 1 1 100%; max-width: none; font-size: 16px; }
  .page-pricing .list-toolbar .btn-primary { flex: 1; }
  .toolbar-check { margin: 0; }
  .pack-lines-head { display: none; }
  .pack-line { grid-template-columns: 56px 1fr 64px 28px; grid-template-areas: "item item item rm" "qty price total rm"; }
  .pack-line .pl-item { grid-area: item; }
  .pack-line .pl-qty { grid-area: qty; }
  .pack-line .pl-price { grid-area: price; }
  .pack-line .pl-total { grid-area: total; }
  .pack-line .pl-remove { grid-area: rm; }
  .pack-line input { font-size: 16px; }
  /* Price list rows on a phone: code + price on one line, description under it (85 items to scroll). */
  #items-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; margin-bottom: 8px; }
  #items-table td { display: block; padding: 0; border: 0; text-align: left; }
  #items-table td::before { display: none; }
  #items-table td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 15px; }
  #items-table td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; font-size: 16px; }
  #items-table td:nth-child(2) { grid-column: 1 / -1; font-size: 14px; color: var(--text); }
  #items-table td:nth-child(3) { grid-column: 1 / -1; font-size: 12px; color: var(--mute); }
  #items-table td:nth-child(4) { display: none; }
  /* Calendar edge to edge, down to the tab bar. */
  .main.page-schedule { padding-left: 0; padding-right: 0; padding-bottom: calc(61px + env(safe-area-inset-bottom)); }
  .page-schedule .cal-toolbar { padding: 0 12px; margin-bottom: 8px; }
  .page-schedule .cal { border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
  .page-schedule .page-head { position: fixed; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 40; margin: 0; }
  .page-schedule #cal-new { border-radius: 999px; box-shadow: 0 6px 18px rgba(207, 74, 26, 0.4); }
  .page-schedule .cal-toolbar { gap: 8px; margin-bottom: 10px; }
  .page-schedule .cal-toolbar h2 { order: 0; flex: 1; flex-basis: auto; font-size: 16px; min-width: 0; }
  .page-schedule .cal-head-day { padding: 5px 4px; }
  /* Only clear the tab bar; the floating New booking button sits over the (after-hours) bottom corner. */
  .main.page-schedule { padding-top: calc(10px + env(safe-area-inset-top)); }
  .page-schedule .page-head { bottom: calc(74px + env(safe-area-inset-bottom)); }
  body:has(.page-schedule) .toast { bottom: calc(136px + env(safe-area-inset-bottom)); } /* above the New booking button */
  .cal-head-day .dom { font-size: 17px; }

  .mcell { padding: 3px; }
  .mchip { padding: 2px 4px; font-size: 11px; }
  .mchip .mtag { display: none; }
  .mday { font-size: 12px; min-width: 22px; height: 22px; }

  .modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .modal form { height: 100%; max-height: 100dvh; }
  .modal-head, .modal-body, .modal-foot { padding-left: 16px; padding-right: 16px; }
  .field input, .field textarea, .field select { font-size: 16px; } /* stops iPhone zooming in */
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid > .field:first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Settings → Schedule */
.settings-sub { font-size: 16px; font-weight: 600; margin: 22px 0 10px; color: var(--ink); }
.settings-form .form-grid.narrow { max-width: 520px; }
.field-hint { font-size: 13px; color: var(--slate); margin: -6px 0 8px; max-width: 520px; }
.settings-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.saved-note { font-size: 13px; font-weight: 600; color: var(--status-approved); }

/* Clickable stat cards and table rows */
.stat-link { text-decoration: none; transition: transform 0.1s, box-shadow 0.15s; }
.stat-link:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.clickable-rows tbody tr { cursor: pointer; }
.clickable-rows tbody tr:focus-visible td { background: var(--teal-tint); outline: none; }
a.btn-primary { color: #fff; }

/* ===== Login page ===== */
.auth-page {
  min-height: 100vh; min-height: 100dvh; margin: 0;
  display: flex; align-items: flex-start; justify-content: center;
  background: linear-gradient(180deg, var(--teal-deepest) 0%, var(--teal-dark) 55%, var(--paper) 55%);
  padding: max(48px, env(safe-area-inset-top)) 16px 32px;
}
.auth-card {
  width: 100%; max-width: 420px; background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-2); padding: 28px 26px 22px;
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-name { font: 700 24px/1.1 var(--font-head); color: var(--ink); }
.auth-tagline { font-size: 13px; color: var(--slate); }
.auth-step h1 { font: 700 22px/1.2 var(--font-head); color: var(--ink); margin: 0 0 16px; }
.auth-step p { font-size: 14px; color: var(--text); line-height: 1.5; }
.auth-lead { margin: -8px 0 16px; }
.auth-hint { margin: 6px 0 0; }
.auth-go { width: 100%; justify-content: center; margin-top: 4px; padding: 12px 18px; font-size: 16px; }
.auth-links { margin: 18px 0 0; text-align: center; font-size: 14px; }
.auth-links a { color: var(--teal); font-weight: 600; }
.auth-card .form-warn { margin: 0 0 16px; }
.auth-card .field input, .auth-card .field select { font-size: 16px; } /* 16px stops iPhones zooming in */

/* One question at a time (sign-up and setup) */
.wiz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wiz-back {
  border: 0; background: none; color: var(--teal); font: 600 15px var(--font-body);
  padding: 6px 8px 6px 0; cursor: pointer;
}
.wiz-count { font-size: 13px; color: var(--slate); }
.wiz-bar { height: 6px; background: var(--teal-tint); border-radius: 99px; overflow: hidden; margin-bottom: 22px; }
.wiz-bar span { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 99px; transition: width 0.25s; }
.q h1 { font-size: 24px; margin-bottom: 8px; }
.q h1 label { font: inherit; color: inherit; }
.q-help { margin: 0 0 16px; color: var(--slate) !important; }
.q-help a { color: var(--teal); font-weight: 600; }
.q > input, .q .addr-wrap > input, .pw-wrap input {
  width: 100%; font: 18px var(--font-body); padding: 14px 14px; margin-bottom: 18px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--ink);
}
.q > input:focus, .q .addr-wrap > input:focus, .pw-wrap input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 76px; }
.pw-toggle {
  position: absolute; right: 8px; top: 8px; border: 0; background: var(--teal-tint); color: var(--teal);
  font: 600 14px var(--font-body); padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
.choices { display: grid; gap: 10px; margin-bottom: 18px; }
.choices.grid { grid-template-columns: 1fr 1fr; }
.choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  border: 1.5px solid var(--border); background: var(--white); color: var(--ink); border-radius: var(--radius-sm);
  padding: 16px; font: 600 18px var(--font-body); cursor: pointer; min-height: 56px;
}
.choice small { font: 400 12px var(--font-body); color: var(--slate); }
.choice:hover { border-color: var(--teal-light); background: var(--teal-tint); }
.choice.picked { border-color: var(--teal); background: var(--teal-tint); box-shadow: inset 0 0 0 1px var(--teal); }
.wiz-skip {
  display: block; width: 100%; margin-top: 10px; border: 0; background: none; color: var(--slate);
  font: 600 14px var(--font-body); padding: 10px; cursor: pointer; text-decoration: underline;
}
.wiz-skip[hidden] { display: none; }

.field-link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--teal); }
.field-link[hidden] { display: none; }

/* Setup guide extras */
.wiz-count { font-weight: 600; color: var(--teal) !important; }
.wiz-bar.done span { background: var(--status-approved); }
.done-title { font: 700 26px/1.2 var(--font-head); color: var(--ink); margin: 20px 0 8px; }
a.choice { text-decoration: none; }
.pct-wrap { position: relative; }
.pct-wrap input { width: 100%; font: 18px var(--font-body); padding: 14px 40px 14px 14px; margin-bottom: 18px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); }
.pct-wrap input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.pct-wrap span { position: absolute; right: 16px; top: 14px; font: 600 18px var(--font-body); color: var(--slate); }
.xero-connect {
  width: 100%; padding: 14px; border-radius: var(--radius-sm); border: 0; margin-bottom: 10px;
  background: #13b5ea; color: #fff; font: 700 17px var(--font-body); cursor: pointer;
}
.xero-connect:disabled { opacity: 0.45; cursor: not-allowed; }
.xero-note { font-size: 13px !important; color: var(--slate) !important; margin: 0 0 16px; }

/* "Finish setting up — 40%" bar at the top of every page until setup is done */
.setup-progress {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; text-decoration: none;
  background: var(--teal-tint); border: 1px solid #cfe5ea; border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 16px; color: var(--ink); font-size: 14px;
}
.setup-progress:hover { border-color: var(--teal-light); }
.sp-track { flex: 1; min-width: 120px; height: 8px; background: #fff; border-radius: 99px; overflow: hidden; }
.sp-track span { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
.sp-go { color: var(--teal); font-weight: 700; }
.page-schedule .setup-progress { margin-bottom: 8px; }

/* Setup: calendar hours and work days */
.hour-pick { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; margin-bottom: 18px; }
.hour-pick label { font: 600 16px var(--font-body); color: var(--ink); }
.hour-pick select {
  width: 100%; font: 600 18px var(--font-body); padding: 13px 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--white); color: var(--ink);
}
.hour-pick select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.day-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.day-toggle {
  border: 1.5px solid var(--border); background: var(--white); color: var(--ink); border-radius: var(--radius-sm);
  padding: 14px 0; font: 600 16px var(--font-body); cursor: pointer;
}
.day-toggle[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }

/* Address finder */
.addr-wrap { position: relative; }
.addr-list {
  position: absolute; left: 0; right: 0; top: calc(100% - 14px); z-index: 50; margin: 0; padding: 4px 0; list-style: none;
  background: var(--white); border: 1.5px solid var(--teal); border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
}
.addr-list li[data-i] { padding: 12px 14px; font-size: 15px; color: var(--ink); cursor: pointer; }
.addr-list li[data-i]:hover, .addr-list li.active { background: var(--teal-tint); }
.addr-credit { padding: 4px 14px 2px; font-size: 11px; color: var(--mute); }
.field .addr-list { top: 100%; }

/* Phone bottom bar: 4 main pages + "More" menu for the rest */
.more-tab, .more-menu { display: none; }
@media (max-width: 760px) {
  .sidebar-nav .phone-more { display: none; }
  .more-tab { display: block; }
  .more-menu:not([hidden]) {
    display: block; position: fixed; right: 10px; z-index: 60; min-width: 210px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    background: var(--white); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(11, 60, 73, 0.28);
    padding: 6px;
  }
  .more-menu a {
    display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-radius: var(--radius-sm);
    color: var(--ink); text-decoration: none; font: 600 16px var(--font-body);
  }
  .more-menu a:hover, .more-menu a.active { background: var(--teal-tint); color: var(--teal-dark); }
  .more-menu .icon { width: 22px; display: inline-flex; justify-content: center; color: var(--teal); }
  .more-menu .icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

/* ===== Reports — "How's business?" ===== */
.rep-head { align-items: flex-end; flex-wrap: wrap; gap: 14px; }
.rep-sub { margin: 4px 0 0; color: var(--slate); font-size: 14px; }
.rep-picker { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rep-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rep-chips button {
  border: 1.5px solid var(--border); background: var(--white); color: var(--ink); border-radius: 99px;
  padding: 7px 14px; font: 600 14px var(--font-body); cursor: pointer;
}
.rep-chips button.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.rep-step { display: flex; align-items: center; gap: 10px; font: 600 16px var(--font-body); color: var(--ink); }
.rep-arrow {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--white);
  font-size: 22px; line-height: 1; color: var(--teal); cursor: pointer;
}
.rep-arrow:disabled { opacity: 0.35; cursor: default; }
.rep-basis { font-size: 13px; color: var(--slate); background: var(--teal-tint); border-radius: var(--radius-sm); padding: 8px 12px; margin: 14px 0; }

.rep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rep-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 18px 20px; display: flex; flex-direction: column; }
.rep-card.wide { grid-column: span 2; }
.rep-card h2 { font: 600 13px var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin: 0 0 6px; }
.rep-value { font: 700 38px/1.1 var(--font-head); color: var(--ink); }
.rep-soon { font: 600 18px var(--font-body); color: var(--slate); }
.rep-cmp { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; }
.rep-cmp.up, .rep-team .up { color: var(--status-approved); }
.rep-cmp.down, .rep-team .down { color: var(--orange-deep); }
.rep-cmp.flat, .rep-team .flat { color: var(--slate); }
.rep-cancelled { display: block; margin-top: 4px; font-size: 13px; color: var(--slate); }
.rep-note { margin: auto 0 0; padding-top: 14px; font-size: 13px; color: var(--slate); }

.rep-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 16px; }
.rep-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; }
.rep-bar .fill { display: block; background: var(--teal); border-radius: 5px 5px 0 0; }
.rep-bar.future .fill { background: var(--border); }
.rep-bar .lbl { font-size: 11px; color: var(--slate); text-align: center; margin-top: 4px; white-space: nowrap; overflow: hidden; }
.rep-split { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 14px; color: var(--text); }
.rep-split .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.rep-split .dot.biz { background: var(--teal); }
.rep-split .dot.ah { background: var(--orange); }

.rep-team { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.rep-person .rp-top { display: flex; align-items: baseline; gap: 6px; font-size: 16px; color: var(--ink); }
.rep-person .rp-top small { color: var(--slate); font-size: 12px; }
.rp-money { margin-left: auto; font-weight: 700; }
.rp-bar { height: 8px; background: var(--teal-tint); border-radius: 99px; overflow: hidden; margin: 6px 0 4px; }
.rp-bar span { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
.rp-meta { font-size: 13px; color: var(--slate); }
.rep-person.total { border-top: 1px solid var(--border); padding-top: 12px; }

@media (max-width: 1100px) { .rep-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .rep-grid { grid-template-columns: 1fr; gap: 12px; }
  .rep-card.wide { grid-column: auto; }
  .rep-picker { align-items: stretch; width: 100%; }
  .rep-chips { justify-content: space-between; }
  .rep-chips button { flex: 1; padding: 8px 4px; font-size: 13px; white-space: nowrap; }
  .rep-bas { display: none; } /* "Quarter (BAS)" → "Quarter" on a phone */
  .rep-step { justify-content: space-between; }
  .rep-value { font-size: 34px; }
}

/* Dashboard: "Made today" / "Made this week" */
.earn-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.earn-card {
  display: block; text-decoration: none; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 16px 20px; border-left: 5px solid var(--status-approved); transition: transform 0.1s, box-shadow 0.15s;
}
.earn-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.earn-label { font: 600 12px var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.earn-value { font: 700 34px/1.1 var(--font-head); color: var(--ink); margin: 4px 0 2px; }
.earn-sub { font-size: 13px; color: var(--slate); }
@media (max-width: 760px) {
  .earn-strip { gap: 10px; margin-bottom: 12px; }
  .earn-card { padding: 12px 14px; }
  .earn-value { font-size: 26px; }
  .earn-sub { font-size: 12px; }
}

/* Setup: "$ [ amount ]" */
.money-wrap { position: relative; }
.money-wrap span { position: absolute; left: 16px; top: 14px; font: 600 18px var(--font-body); color: var(--slate); }
.money-wrap input { width: 100%; font: 18px var(--font-body); padding: 14px 14px 14px 34px; margin-bottom: 18px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); }
.money-wrap input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }

/* ===== Quick quote ===== */
.qq { max-width: 560px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 18px 20px 22px; }
.qq-step { font: 600 13px var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin: 18px 0 10px; }
.qq-step:first-of-type { margin-top: 4px; }
.qq-step small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.qq-missing { background: var(--orange-tint); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; }
.qq-missing a { color: var(--teal); font-weight: 600; }
.qq-types, .qq-when { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qq-types button, .qq-when button {
  border: 1.5px solid var(--border); background: var(--white); color: var(--ink); border-radius: var(--radius-sm);
  padding: 15px 12px; font: 600 16px var(--font-body); cursor: pointer; text-align: left;
}
.qq-types button.picked, .qq-when button.picked { border-color: var(--teal); background: var(--teal); color: #fff; }
.qq-count { display: flex; align-items: center; gap: 12px; margin-top: 12px; font: 600 16px var(--font-body); color: var(--ink); }
.qq-count span { flex: 1; }
.qq-count button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--white); font-size: 24px; color: var(--teal); cursor: pointer; }
.qq-count strong { min-width: 32px; text-align: center; font-size: 22px; }
.qq-when-note { font-size: 13px; color: var(--slate); margin: 8px 0 0; }
.qq-price { margin-top: 18px; background: var(--teal-tint); border-radius: var(--radius-sm); padding: 14px 16px; }
.qq-total { font: 700 40px/1.1 var(--font-head); color: var(--teal-dark); }
.qq-total small { font: 500 14px var(--font-body); color: var(--slate); margin-left: 6px; }
.qq-lines { margin-top: 8px; font-size: 14px; color: var(--text); }
.qq-lines div { display: flex; justify-content: space-between; padding: 3px 0; }
.qq-fields { display: grid; gap: 10px; }
.qq-fields input { width: 100%; font: 16px var(--font-body); padding: 12px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); }
.qq-fields input:focus { outline: none; border-color: var(--teal); }
.qq-fields .addr-list { top: 100%; }
.qq-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.qq-btn { justify-content: center; text-align: center; padding: 14px; font-size: 16px; }
.qq-btn.disabled { opacity: 0.4; pointer-events: none; }

/* Dashboard extras: quick quote button, weekly target, wrap-up, tax jar */
.dash-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.earn-target { height: 8px; background: var(--teal-tint); border-radius: 99px; overflow: hidden; margin: 10px 0 4px; }
.earn-target span { display: block; height: 100%; background: var(--status-approved); border-radius: 99px; }
.wrap-card, .jar-card {
  display: block; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 14px 20px; margin-bottom: 16px; text-decoration: none; color: var(--text);
}
.wrap-card { border-left: 5px solid var(--teal); }
.jar-card { border-left: 5px solid var(--status-draft); }
.wrap-card h2, .jar-card h2 { font: 600 12px var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin: 0 0 6px; }
.wrap-card p, .jar-card p { margin: 4px 0; font-size: 14px; }
.wrap-main, .jar-main { font: 700 22px/1.2 var(--font-head) !important; color: var(--ink); }
.wrap-warn { color: var(--orange-deep); font-weight: 600; }
.wrap-warn a { color: var(--teal); }
.wrap-ok { color: var(--status-approved); font-weight: 600; }
.jar-sub { color: var(--slate); }
@media (max-width: 760px) {
  .dash-actions { width: 100%; }
  .dash-actions a { flex: 1; justify-content: center; text-align: center; }
  .wrap-card, .jar-card { padding: 12px 14px; margin-bottom: 12px; }
}

/* ===== Customers ===== */
.muted { color: var(--slate); font-size: 12px; font-weight: 400; }
.hint { display: block; color: var(--slate); font-size: 12px; margin-top: 4px; }
.cu-sub { font-size: 15px; margin: 18px 0 10px; color: var(--ink); }
.terms-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.terms-row input { width: 90px; }
.chip { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer; color: var(--text); }
.chip.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.cu-check { display: flex; gap: 8px; align-items: center; font-size: 14px; margin-top: 22px; }
.cu-jobs { border-top: 1px solid var(--border); margin-top: 8px; }
.cu-job { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 14px; }
.cu-job:hover { color: var(--teal); }
.badge.to_book { background: var(--status-draft); color: #3a2604; }
.badge.urgent { background: var(--status-failed); text-transform: capitalize; margin-left: 6px; }

/* ===== Work orders ===== */
.wo-add { margin-bottom: 24px; }
.wo-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; cursor: pointer;
  border: 2px dashed var(--teal-light); border-radius: var(--radius); background: var(--teal-tint); color: var(--teal-dark); text-align: center;
}
.wo-drop.over { background: #d7ecf0; border-color: var(--teal); }
.wo-drop strong { font-size: 17px; }
.wo-paste { margin-top: 12px; }
.wo-paste summary { cursor: pointer; color: var(--teal); font-weight: 600; }
.wo-paste input, .wo-paste textarea { display: block; width: 100%; margin: 8px 0; box-sizing: border-box; }
.wo-review-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wo-card { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: var(--radius-sm); padding: 14px 16px; margin: 12px 0; box-shadow: var(--shadow-1); }
.wo-card.dup { border-left-color: var(--mute); opacity: 0.8; }
.wo-card.error { border-left-color: var(--status-failed); }
.wo-card header { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; margin-bottom: 10px; }
.wo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.wo-grid .wide { grid-column: 1 / -1; }
.wo-grid .field > span { display: block; font-size: 12px; font-weight: 600; color: var(--slate); margin-bottom: 4px; }
.wo-grid input, .wo-grid select, .wo-grid textarea { width: 100%; box-sizing: border-box; }
.wo-card footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; }
.wo-warn { color: var(--orange-deep); font-weight: 600; font-size: 13px; }
.wo-ok { color: var(--status-approved); font-weight: 600; font-size: 13px; }
td.late { color: var(--status-failed); font-weight: 600; }
.btn-primary.small { padding: 6px 14px; font-size: 13px; }

/* Work order panel on a job */
.jd-wo { background: var(--teal-tint); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.jd-wo dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 6px; }
.jd-wo dt { color: var(--slate); font-weight: 600; }
.jd-wo dd { margin: 0; }
.jd-wo-tenants { margin: 6px 0; }
.jd-wo-tenants b { display: block; color: var(--slate); }
.jd-wo .quick-btn { margin-top: 6px; }

@media (max-width: 760px) {
  .wo-grid { grid-template-columns: 1fr; }
}
.wo-paste input, .wo-paste textarea { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 15px; }
.list-panel:has(#tb-body) { overflow-x: auto; }
#tb-body td:last-child { white-space: nowrap; }
.wo-card.reading { border-left-color: var(--teal-light); color: var(--slate); animation: wo-pulse 1.4s ease-in-out infinite; }
.wo-card.reading p { margin: 0; }
@keyframes wo-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .wo-card.reading { animation: none; } }

/* ===== Shared: cards, stage chips, money tiles ===== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 18px 20px; margin-bottom: 16px; }
.card-title { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin: 0 0 12px; }
.card-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
label.field > input, label.field > textarea, label.field > select { display: block; }

/* Where a job or invoice is up to — one colour language everywhere */
.stage { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; background: #eef1f3; color: var(--slate); }
.stage.to_book { background: #fff4e0; color: #8a5a00; }
.stage.scheduled { background: var(--teal-tint); color: var(--teal-dark); }
.stage.started { background: var(--teal); color: #fff; }
.stage.done { background: var(--orange-tint); color: var(--orange-deep); }
.stage.draft { background: #fff4e0; color: #8a5a00; }
.stage.unpaid { background: #e8eefc; color: #2c4a9a; }
.stage.overdue { background: #fdecec; color: #a12626; }
.stage.paid { background: #e5f5ec; color: #1f7a45; }
.stage.voided, .stage.cancelled { background: #eef1f3; color: var(--mute); text-decoration: line-through; }

.money-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.money-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-1); text-decoration: none; color: var(--text); }
.money-tile span { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.money-tile b { font-family: var(--font-head); font-size: 26px; color: var(--ink); }
.money-tile small { color: var(--slate); }
.money-tile.warn { border-color: #f3b4b4; background: #fff8f8; }
.money-tile.warn b { color: #a12626; }
.money-tile.todo { border-color: var(--peach); background: #fffaf7; }
.btn-primary[disabled], .btn-secondary[disabled] { opacity: 0.5; cursor: default; }

/* ===== Job page ===== */
.jp-head { padding: 18px 20px; }
.jp-head-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jp-number { font-family: var(--font-head); font-weight: 700; color: var(--teal); letter-spacing: 0.04em; }
.jp-title { font-size: 28px; margin: 8px 0 4px; }
.jp-title a { color: inherit; text-decoration: none; }
.jp-title a:hover { color: var(--teal); }
.jp-when { color: var(--slate); }
.jp-when a { font-weight: 600; color: var(--teal); text-decoration: none; white-space: nowrap; }
.jp-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.jp-actions .btn-primary, .jp-actions .btn-secondary { min-height: 48px; padding: 12px 22px; font-size: 16px; }
.jp-paid { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: #1f7a45; }
.jp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
.jp-person { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.jp-person:last-child { border-bottom: 0; }
.jp-person-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.jp-address { margin: 0 0 8px; font-weight: 600; color: var(--ink); }
.jp-saved { font-size: 12px; color: var(--status-approved); min-height: 16px; }
.jp-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 10px; font-size: 14px; }
.jp-dl dt { color: var(--slate); font-weight: 600; }
.jp-dl dd { margin: 0; }
.jp-lines-total { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.jp-inv { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.jp-inv:last-child { border-bottom: 0; }
.jp-activity { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.jp-activity li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0 7px 16px; border-left: 2px solid var(--teal-tint); position: relative; }
.jp-activity li::before { content: ""; position: absolute; left: -5px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-light); }
.jp-activity time { color: var(--slate); font-size: 12px; white-space: nowrap; }
.jp-danger { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 24px; }

/* Parts & labour lines (job page and draft invoices) */
.jl-table { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.jl-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 12px 92px 84px 32px; gap: 6px; align-items: center; }
.jl-row input { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; background: #fff; }
.jl-row input:disabled { background: #f6f7f7; color: var(--text); }
.jl-row input:focus { outline: none; border-color: var(--teal-light); box-shadow: 0 0 0 3px rgba(53, 168, 193, 0.2); }
.jl-qty, .jl-price { text-align: right; }
.jl-x { color: var(--mute); text-align: center; }
.jl-amount { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.jl-remove { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--mute); font-size: 20px; cursor: pointer; }
.jl-remove:hover { background: #fdecec; color: var(--status-failed); }
.jp-add { position: relative; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jp-add > input { flex: 1 1 240px; padding: 10px 12px; border: 1px dashed var(--teal-light); border-radius: var(--radius-sm); font: inherit; background: var(--teal-tint); }
.jp-results { position: absolute; top: 46px; left: 0; right: 0; z-index: 20; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); max-height: 320px; overflow: auto; padding: 4px; }
.jp-results button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; border-radius: 8px; }
.jp-results button:hover { background: var(--teal-tint); }
.jp-results small { display: block; color: var(--slate); font-size: 12px; }
.jp-results p { margin: 8px 10px; }

/* ===== Invoice page ===== */
.iv-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.iv-bar > div:first-child { display: flex; gap: 10px; align-items: center; }
.iv-bar-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.iv-hint { margin: 12px 0 0; }
.iv-pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 420px; }
.iv-methods { margin: 0 0 14px; }
.iv-methods button { min-height: 40px; }
.iv-paylist { list-style: none; padding: 0; margin: 14px 0 0; }
.iv-paylist li { display: grid; grid-template-columns: 1fr auto 32px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }

/* The invoice as the customer sees it */
.inv-doc { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 36px 40px; max-width: 820px; margin: 0 auto 30px; color: #1b2530; font-size: 14px; overflow: hidden; }
.inv-watermark { margin: -36px -40px 22px; padding: 7px; text-align: center; background: #fff4e0; color: #8a5a00; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.inv-watermark.void { background: #fdecec; color: #a12626; }
.inv-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 3px solid var(--inv, var(--teal)); padding-bottom: 18px; margin-bottom: 18px; }
.inv-biz { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--inv, var(--teal-dark)); margin-bottom: 4px; }
.inv-from div:not(.inv-biz) { color: #4a5663; }
.inv-kind { font-family: var(--font-head); font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); text-align: right; }
.inv-meta dl { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 8px 0 0; justify-content: end; }
.inv-meta dt { color: #6b7784; }
.inv-meta dd { margin: 0; font-weight: 600; text-align: right; }
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 14px; }
.inv-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7784; margin-bottom: 4px; }
.inv-desc { color: #4a5663; margin: 0 0 12px; }
.inv-lines { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.inv-lines th { text-align: left; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7784; border-bottom: 1px solid #d9dee2; padding: 8px 6px; }
.inv-lines td { padding: 10px 6px; border-bottom: 1px solid #eef0f2; vertical-align: top; }
.inv-lines .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-code { color: #6f7a86; font-size: 12px; }
.inv-totals { margin-left: auto; max-width: 300px; display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
.inv-totals div { display: flex; justify-content: space-between; gap: 16px; }
.inv-total { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--ink); border-top: 1px solid #d9dee2; padding-top: 6px; }
.inv-foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid #eef0f2; color: #4a5663; font-size: 13px; line-height: 1.55; }

@media print {
  body { background: #fff; }
  .sidebar, .mobile-header, .breadcrumb, .iv-bar, #iv-edit, #pay, .toast, .no-print, .setup-progress, .demo-banner, .more-menu { display: none !important; }
  .main { padding: 0 !important; margin: 0 !important; }
  .inv-doc { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .inv-watermark { display: none; }
}

@media (max-width: 900px) {
  .jp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .money-strip { grid-template-columns: 1fr; gap: 8px; }
  .money-tile { flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
  .money-tile b { font-size: 20px; }
  .card { padding: 14px 16px; border-radius: 12px; }
  .jp-title { font-size: 24px; }
  /* The job's main button sits just above the bottom menu, always in reach of a thumb. */
  .page-job { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  .jp-actions { position: fixed; left: 0; right: 0; bottom: calc(61px + env(safe-area-inset-bottom)); z-index: 45; margin: 0; padding: 10px 16px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px); border-top: 1px solid var(--border); box-shadow: 0 -4px 14px rgba(20, 32, 43, 0.08); }
  .jp-actions:empty { display: none; }
  .jp-actions .btn-primary { flex: 1 1 auto; justify-content: center; }
  .jl-row { grid-template-columns: minmax(0, 1fr) 54px 82px 30px; grid-template-areas: "desc desc desc desc" "qty price amount remove"; }
  .jl-desc { grid-column: 1 / -1; }
  .jl-x { display: none; }
  .inv-doc { padding: 20px 16px; font-size: 13px; }
  .inv-watermark { margin: -20px -16px 16px; }
  .inv-parties { grid-template-columns: 1fr; }
  .inv-kind { text-align: left; }
  .inv-meta dl { justify-content: start; }
  .inv-meta dd { text-align: left; }
  .iv-pay-row { grid-template-columns: 1fr 1fr; }
}
.jp-nav { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Today (home) ===== */
.next-job { background: linear-gradient(135deg, var(--teal-bright) 0%, var(--teal) 55%, var(--teal-dark) 100%); color: #fff; border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow-2); }
.next-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; margin-bottom: 6px; }
.next-main { display: flex; flex-direction: column; gap: 2px; color: #fff; text-decoration: none; margin-bottom: 12px; }
.next-when { font-family: var(--font-head); font-weight: 700; font-size: 15px; opacity: 0.95; }
.next-who { font-family: var(--font-head); font-size: 26px; font-weight: 700; line-height: 1.15; }
.next-what, .next-where { opacity: 0.9; }
.next-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.next-btns .quick-btn { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); color: #fff; min-height: 40px; }
.next-btns .quick-btn:hover { background: #fff; color: var(--teal-dark); }
.next-btns .quick-btn.strong { background: #fff; color: var(--teal-dark); border-color: #fff; }
.next-empty { font-size: 16px; }
.next-empty a { color: #fff; font-weight: 700; margin-left: 6px; }
.needs { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 14px 16px 6px; margin-bottom: 16px; }
.needs .card-title { margin-bottom: 6px; }
.need { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 46px; padding: 8px 4px 8px 12px; border-left: 4px solid var(--teal-light); margin-bottom: 8px; border-radius: 0 8px 8px 0; background: #fbfcfc; color: var(--ink); font-weight: 600; text-decoration: none; }
.need:hover { background: var(--teal-tint); }
.need.to_book { border-left-color: #e8a33d; }
.need.done { border-left-color: var(--orange-bright); }
.need.draft { border-left-color: #e8a33d; }
.need.overdue { border-left-color: var(--status-failed); color: #a12626; }
.needs-clear { color: #1f7a45; font-weight: 700; padding: 4px 0 10px; }
.count-pill { display: inline-block; min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--teal-tint); color: var(--teal-dark); font-size: 14px; text-align: center; vertical-align: middle; }
.quick-btn.strong { background: var(--teal); color: #fff; border-color: var(--teal); }
.rep-down { display: block; color: #a12626; font-weight: 700; font-size: 14px; margin-top: 4px; }
.rep-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.cu-owes { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: #f4f7fb; }
.jp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.jp-thumb { padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: #eef1f3; cursor: zoom-in; }
.jp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.settings-credits { margin: 28px 0 0; font-size: 12px; }
.settings-credits a { color: var(--slate); }
.back-link { display: inline-block; margin: 0 0 10px; font-weight: 600; text-decoration: none; color: var(--slate); }
.back-link:hover { color: var(--teal); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Filters as tiles: tap a number to see those jobs / invoices */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tiles.two { grid-template-columns: repeat(2, minmax(0, 220px)); }
.stage-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tiles a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--white); border: 1.5px solid var(--border); box-shadow: var(--shadow-1); text-decoration: none; color: var(--text); min-height: 64px; }
.tiles a:hover { border-color: var(--teal-light); }
.tiles a.active, .tiles a.warn.lit.active, .tiles a.todo.lit.active { border-color: var(--teal); background: var(--teal-tint); box-shadow: inset 0 0 0 1px var(--teal); }
.tile-n { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.05; }
.tile-l { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.tile-m { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--ink); }
.tile-s { font-size: 12px; color: var(--slate); }
.tiles a.warn.lit { border-color: #f3b4b4; background: #fff8f8; }
.tiles a.warn.lit .tile-m { color: #a12626; }
.tiles a.todo.lit { border-color: var(--peach); background: #fffaf7; }
@media (max-width: 760px) {
  /* Phone: the tiles become one-line chips that wrap (no sideways strip), so the list starts on
     the first screen. Label first, then the number or amount; the selected one is solid teal. */
  .tiles, .tiles.two { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
  .tiles a { flex-direction: row; align-items: baseline; gap: 6px; min-height: 40px; padding: 9px 14px; border-radius: 999px; box-shadow: none; }
  .tiles .tile-l { order: 0; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
  .tiles .tile-n, .tiles .tile-m { order: 1; font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--ink); }
  .tiles .tile-s { display: none; }
  .tiles a.active, .tiles a.warn.lit.active, .tiles a.todo.lit.active { background: var(--teal); border-color: var(--teal); box-shadow: none; }
  .tiles a.active .tile-l, .tiles a.active .tile-n, .tiles a.active .tile-m { color: #fff; }
  .page-head { flex-wrap: wrap; }
}
.page-break { position: sticky; top: 0; z-index: 200; background: #fdecec; border-bottom: 2px solid #f3b4b4; color: #8f1f1f; padding: 10px 16px; font-size: 14px; }
.page-break small { display: block; margin-top: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-word; }

/* Customer picker (booking form) */
.cp-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 4px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); padding: 4px; max-height: 300px; overflow: auto; }
.cp-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: none; border-radius: 8px; text-align: left; font: inherit; cursor: pointer; }
.cp-list button:hover, .cp-list button.active { background: var(--teal-tint); }
.cp-list small { color: var(--slate); font-size: 12px; }
.cp-list .cp-new-opt { color: var(--orange-deep); font-weight: 700; }
.cp-chosen { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: -6px 0 12px; padding: 7px 12px; border-radius: var(--radius-sm); background: #e5f5ec; color: #1f7a45; font-size: 13px; font-weight: 600; }
.cp-chosen a { color: #1f7a45; }
.cp-new { margin: -4px 0 14px; padding: 12px 14px; border: 1.5px dashed var(--peach); border-radius: var(--radius-sm); background: #fffaf7; }
.cp-new-head { font-family: var(--font-head); font-weight: 700; color: var(--orange-deep); margin-bottom: 8px; }
.cp-kind { margin-bottom: 12px; }

/* Booking form: "When" comes last, just above the Book button */
.jd-when { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.jd-when-head { font-family: var(--font-head); font-weight: 700; color: var(--ink); margin-bottom: 8px; }
/* iPhone date/time boxes have a built-in width that pushes them off the screen */
.field input[type="date"], .field input[type="time"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; min-height: 44px; display: block; }
.form-grid > .field { min-width: 0; }
/* The spot you tapped on the calendar, with its time, while the booking opens */
.cal-tapped { position: absolute; left: 3px; right: 3px; z-index: 6; border-radius: 8px; background: rgba(248, 92, 42, 0.16); border: 2px solid var(--orange-bright); color: var(--orange-deep); font-family: var(--font-head); font-weight: 700; font-size: 13px; padding: 3px 7px; pointer-events: none; animation: cal-tap 0.2s ease-out; overflow: hidden; }
@keyframes cal-tap { from { transform: scale(0.96); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cal-tapped { animation: none; } }
/* The calendar is for tapping, not selecting: stop the iPhone greying it out as a text
   selection (and its magnifier) on a press, and answer a tap straight away. */
.cal, .cal-body, .cal-head, .cal-day, .cal-gutter, .run-list, .month-grid {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* No grey flash anywhere when something is tapped (iPhone/Android tap highlight). */
html { -webkit-tap-highlight-color: transparent; }
.page-schedule .cal, .page-schedule .cal-scroll, .page-schedule .cal-body, .page-schedule .cal-body * {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.jd-site-head { font-family: var(--font-head); font-weight: 700; color: var(--ink); margin: 4px 0 8px; }
.cp-add { display: inline-flex; align-items: center; min-height: 40px; margin: -6px 0 12px; padding: 6px 14px; border: 1.5px dashed var(--orange); border-radius: 999px; background: #fffaf7; color: var(--orange-deep); font: inherit; font-weight: 700; cursor: pointer; }
.cp-add:hover { background: var(--orange-tint); }
.cp-chosen + .cp-add { margin-top: 0; }
.nc-kind { margin-bottom: 14px; }

/* Job status (the business's own list): colour stripe + a small label on bookings */
.cal-job[style*="--st"] { border-left-color: var(--st); }
.run-job[style*="--st"] { border-left-color: var(--st); }
.mchip[style*="--st"] { box-shadow: inset 3px 0 0 var(--st); }
.st-pill { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--st); color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; vertical-align: 1px; white-space: nowrap; }
.run-status { margin: 4px 0 2px; }
.run-status .st-pill { margin-left: 0; }
.cal-job .st-pill { background: #fff; color: var(--st); }
/* Settings › Job statuses list */
.st-list { list-style: none; padding: 0; margin: 0 0 8px; max-width: 560px; display: flex; flex-direction: column; gap: 8px; }
.st-list li { display: flex; align-items: center; gap: 6px; }
.st-list input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.st-colour { width: 42px; height: 38px; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); background: var(--st); color: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.st-colour option { color: var(--ink); }
.st-first { font-size: 11px; font-weight: 700; color: var(--teal-dark); background: var(--teal-tint); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.st-btn { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; font-size: 16px; color: var(--slate); }
.st-btn:disabled { opacity: 0.35; cursor: default; }
.st-btn.danger:hover { background: #fdecec; color: var(--status-failed); }
@media (max-width: 760px) { .st-first { display: none; } }
@media (max-width: 760px) {
  .st-list li { gap: 4px; }
  .st-btn { width: 28px; height: 34px; font-size: 14px; }
  .st-colour { width: 34px; }
  .st-list input { padding: 9px 8px; font-size: 15px; }
}
.jd-locked { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: #eef0f2; color: #1b1f24; font-weight: 600; font-size: 14px; }
textarea:disabled, input:disabled { background: #f4f5f6; color: var(--slate); }
.st-always { font-size: 11px; font-weight: 700; color: var(--slate); padding: 3px 8px; white-space: nowrap; }
.st-fixed input[readonly] { background: #f4f5f6; color: var(--slate); }

/* ===== Settings: category list → one page each ===== */
.set-index { max-width: 720px; }
.set-group { margin-bottom: 22px; }
.set-group-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin: 0 0 8px 4px; }
.set-list { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: var(--text); text-decoration: none; border-top: 1px solid var(--border); -webkit-tap-highlight-color: transparent; }
.set-list .set-row:first-child { border-top: 0; }
.set-row[hidden] { display: none; }
.set-row:hover { background: var(--paper); }
.set-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--teal-tint); color: var(--teal-dark); display: grid; place-items: center; }
.set-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.set-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-txt b { font-size: 15px; font-weight: 600; }
.set-txt small { font-size: 13px; color: var(--slate); }
.set-chev { font-size: 22px; color: var(--slate); line-height: 1; }
.set-page { max-width: 760px; }
.set-back { display: inline-block; margin-bottom: 12px; }
.set-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 26px 30px; }
.set-card > h2 { margin-top: 0; font-size: 24px; font-weight: 600; }
.set-card p { max-width: 560px; }
@media (max-width: 760px) {
  .set-card { padding: 18px 16px; }
  .set-row { padding: 13px 14px; }
}
.set-toast { background: var(--teal-tint); color: var(--teal-dark); font-weight: 600; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; }
.set-toast[hidden] { display: none; }

/* ===== Settings › Money (and Pricing › Quick prices) ===== */
.mn-form { max-width: 620px; }
.mn-title { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
.mn-card { margin-bottom: 14px; }
.mn-card h3 { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.mn-q { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mn-q[hidden] { display: none; }
.mn-q > span { font-size: 15px; }
.mn-q .seg { align-self: flex-start; }
.mn-q .seg button { padding: 9px 16px; font-size: 14px; }
.mn-live { margin: 4px 0 0; padding: 10px 12px; background: var(--paper); border-radius: var(--radius-sm); font-size: 14px; color: var(--text); }
.mn-slider { display: flex; align-items: center; gap: 14px; }
.mn-slider input[type="range"] { flex: 1; accent-color: var(--teal); height: 32px; }
.mn-slider output { min-width: 56px; text-align: right; font-size: 26px; font-weight: 700; color: var(--teal-dark); }
.mn-label { display: block; font-size: 14px; font-weight: 600; margin: 4px 0 6px; }
.mn-money { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; padding: 0 12px; max-width: 260px; }
.mn-money span { color: var(--slate); font-weight: 600; }
.mn-money input { border: 0; outline: 0; flex: 1; min-width: 0; padding: 12px 8px; font-size: 16px; background: transparent; box-shadow: none; }
.mn-money:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.qp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.qp-row:first-of-type { border-top: 0; }
.qp-row label { font-size: 15px; flex: 1; }
.qp-row label small { display: block; color: var(--slate); font-size: 12px; }
.qp-row .mn-money { width: 130px; flex: none; }
.mn-card .settings-actions { margin-top: 12px; }
.qp-card { padding: 0; margin-bottom: 16px; }
.qp-card summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; }
.qp-card summary::-webkit-details-marker { display: none; }
.qp-card summary > span:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.qp-card summary small { color: var(--slate); font-size: 13px; }
.qp-card[open] summary .set-chev { transform: rotate(90deg); }
.qp-card form { padding: 0 18px 18px; }
.qp-card[hidden] { display: none; }
.mn-card .field-hint { margin-top: 10px; }
.day-chips { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 0 14px; max-width: 460px; }
.day-chips button { padding: 11px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--slate); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.day-chips button.on { background: var(--teal); border-color: var(--teal); color: #fff; }
/* Line up side-by-side boxes even when one label or hint wraps: each field's label, box and hint
   share rows with its neighbours, so boxes sit level and hints never ride up over a box. */
.settings-form .form-grid > .field { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.settings-form .form-grid > .field > label { align-self: end; }
.field > .field-hint { margin: 6px 0 0; }

/* ===== Schedule: press-and-hold peek ===== */
.peek { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 16px; background: rgba(20, 30, 38, 0); transition: background .15s ease; -webkit-user-select: none; user-select: none; }
.peek.in { background: rgba(20, 30, 38, .35); }
.peek-card { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--white); border-radius: 18px; border-top: 6px solid var(--st, var(--teal)); box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 18px 20px 16px; transform: scale(.9); opacity: 0; transition: transform .16s ease, opacity .16s ease; }
.peek.in .peek-card { transform: scale(1); opacity: 1; }
.pk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--slate); font-size: 14px; font-weight: 600; }
.peek-card h2 { margin: 8px 0 12px; font-size: 22px; line-height: 1.25; }
.peek-card h2 .tag { font-size: 15px; color: var(--slate); font-weight: 600; }
.pk-row { padding: 8px 0; border-top: 1px solid var(--border); }
.pk-row span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.pk-row p { margin: 2px 0 0; font-size: 16px; white-space: pre-line; }
.pk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pk-actions .btn-primary { margin-left: auto; }
.pk-hint { margin: 12px 0 0; font-size: 12px; color: var(--slate); }

/* Schedule: swipe to the next / previous day */
@keyframes swipeInNext { from { transform: translateX(40px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes swipeInPrev { from { transform: translateX(-40px); opacity: .3; } to { transform: none; opacity: 1; } }
.swipe-in-next { animation: swipeInNext .2s ease-out; }
.swipe-in-prev { animation: swipeInPrev .2s ease-out; }

/* Directions button + ▾ map app picker */
.map-split { display: inline-flex; align-items: stretch; }
.map-split .map-go { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.map-pick { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 0 10px; border: 1.5px solid var(--teal-light); border-left: 0; border-radius: 0 999px 999px 0; color: var(--teal-dark); font-weight: 700; cursor: pointer; background: #fff; }
.map-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.map-split:has(.run-btn) { flex: 1; }
.map-split .run-btn { flex: 1; border-radius: 10px 0 0 10px; }
.map-split .run-btn + .map-pick { border: 0; border-left: 1px solid #fff; border-radius: 0 10px 10px 0; background: var(--teal-tint); }

/* Booking window: status next to Job / Block out time, in its own colour */
.jd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.jd-top .kind-switch { margin: 0; }
.jd-status[hidden] { display: none; }
.jd-status { margin-left: auto; }
.st-select {
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 999px; cursor: pointer;
  padding: 9px 34px 9px 14px; font: inherit; font-size: 14px; font-weight: 700; color: #fff; max-width: 200px;
  background: var(--st, var(--teal)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.st-select:focus { outline: none; box-shadow: 0 0 0 3px var(--teal-tint); }
.st-select option { color: var(--text); background: #fff; }
.jd-top { flex-wrap: nowrap; }
.jd-top .kind-switch { flex: none; }
.jd-top .kind-switch button { padding: 7px 12px; font-size: 13px; }
.jd-status { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
.jd-status .st-select { width: 100%; max-width: 210px; min-width: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.jd-top:has(.kind-switch[hidden]) .jd-status { justify-content: flex-start; }

.jd-nav:empty { display: none; }
.jd-nav { margin-top: 8px; }
.jd-quick { gap: 8px; }
.field .map-pick { display: inline-flex; margin: 0; font-size: 14px; font-weight: 700; }
.jd-top #jd-open { flex: none; }
.jd-top:has(.kind-switch[hidden]) .jd-status { justify-content: flex-start; }
.jd-call { display: flex; gap: 8px; }
.jp-status { margin-left: auto; }
.jp-person b + span.muted { display: block; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 2px; }
.jp-person-btns { flex-wrap: wrap; justify-content: flex-end; }
.k-preview { margin-top: 10px; padding: 10px 12px; background: var(--paper); border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: 14px; }
.k-preview .kp-title { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.k-preview div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.k-preview small { display: block; margin-top: 6px; color: var(--slate); }
.pl-item { position: relative; }

/* ===== Invoice looks (Settings › Invoice template) ===== */
.inv-logo { display: block; max-width: 200px; max-height: 80px; object-fit: contain; margin-bottom: 10px; }
.inv-thanks { margin: 18px 0 0; font-weight: 600; color: var(--inv, var(--teal-dark)); }
.inv-lines.no-qp th:nth-child(2) { width: auto; }
/* Classic: centred letterhead, boxed table */
.inv-style-classic .inv-top { flex-direction: column; align-items: center; text-align: center; border-bottom: 1px solid #cfd6dc; }
.inv-style-classic .inv-from { display: flex; flex-direction: column; align-items: center; }
.inv-style-classic .inv-kind { text-align: center; color: var(--inv); }
.inv-style-classic .inv-meta dl { justify-content: center; }
.inv-style-classic .inv-lines { border: 1px solid #cfd6dc; }
.inv-style-classic .inv-lines th { background: color-mix(in srgb, var(--inv) 12%, white); color: #1b2530; border-bottom: 1px solid #cfd6dc; }
.inv-style-classic .inv-lines td { border-bottom: 1px solid #e3e7ea; }
.inv-style-classic .inv-total { color: var(--inv); }
/* Bold: coloured band across the top, filled total */
.inv-style-bold .inv-top { margin: -36px -40px 22px; padding: 28px 40px 22px; background: var(--inv); color: #fff; border-bottom: 0; }
.inv-style-bold .inv-biz, .inv-style-bold .inv-kind, .inv-style-bold .inv-from div, .inv-style-bold .inv-meta dt, .inv-style-bold .inv-meta dd { color: #fff !important; }
.inv-style-bold .inv-logo { background: #fff; padding: 6px; border-radius: 6px; }
.inv-style-bold .inv-watermark { margin-bottom: 0; }
.inv-style-bold .inv-watermark + .inv-top { margin-top: 0; }
.inv-style-bold .inv-lines th { color: var(--inv); border-bottom: 2px solid var(--inv); }
.inv-style-bold .inv-total { background: var(--inv); color: #fff; padding: 8px 10px; border-radius: 6px; border-top: 0; }
@media (max-width: 760px) {
  .inv-style-bold .inv-top { margin: -20px -16px 16px; padding: 20px 16px; }
}
@media print {
  .inv-doc { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .inv-style-bold .inv-top { margin: 0 0 22px; }
}

/* ===== Settings › Invoice template ===== */
.set-page.set-wide { max-width: 1280px; }
.tpl { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
.tpl-tabs { display: none; margin-bottom: 12px; }
.tpl-preview { position: sticky; top: 16px; }
.tpl-preview-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.tpl-preview .inv-doc { margin: 0; }
.tpl-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tpl-styles button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 2px solid var(--border); border-radius: 12px; background: #fff; font: inherit; font-weight: 600; font-size: 14px; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tpl-styles button.active { border-color: var(--teal); background: var(--teal-tint); }
.tpl-thumb { width: 64px; height: 80px; border: 1px solid var(--border); border-radius: 4px; background: #fff; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.tpl-thumb i { display: block; height: 5px; border-radius: 2px; background: #dfe4e8; }
.tpl-thumb i:first-child { height: 8px; width: 60%; background: var(--teal); }
.t-classic i:first-child { align-self: center; }
.t-classic i:nth-child(2) { height: 22px; border: 1px solid #cfd6dc; background: #f1f5f7; }
.t-bold i:first-child { width: auto; height: 18px; margin: -6px -6px 0; border-radius: 3px 3px 0 0; }
.tpl-logo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tpl-logo { width: 150px; height: 70px; border: 1px dashed var(--border); border-radius: 10px; display: grid; place-items: center; background: var(--paper); color: var(--slate); font-size: 13px; overflow: hidden; }
.tpl-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tpl-logo-btns { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tpl-upload { cursor: pointer; }
.tpl-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tpl-swatch { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; background: var(--sw); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.tpl-swatch.active { box-shadow: 0 0 0 2px var(--ink); }
.tpl-custom { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); overflow: hidden; }
.tpl-custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.tpl-checks { display: grid; gap: 4px; }
.tpl-checks .check { padding: 6px 0; }
@media (max-width: 900px) {
  .tpl { grid-template-columns: 1fr; }
  .tpl-tabs { display: inline-flex; }
  .tpl .tpl-preview { display: none; position: static; }
  .tpl[data-tab="preview"] .tpl-preview { display: block; }
  .tpl[data-tab="preview"] .tpl-controls { display: none; }
}

/* Booking: more on-site contacts — the same boxes as the first */
.more-contacts:empty { display: none; }
.mc-block { margin-top: 6px; }
.mc-head { display: flex; justify-content: space-between; align-items: center; }
.mc-head .mc-remove { font-size: 14px; color: var(--orange-deep, #c2410c); }
.add-contact { margin: 2px 0 14px; }
#job-form, #job-form .modal-body { max-width: 100%; overflow-x: hidden; }
.inv-property { font-weight: 600; }
.tpl-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.tpl-types button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; border: 2px solid var(--border); border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tpl-types button b { font-size: 15px; }
.tpl-types button small { font-size: 12px; color: var(--slate); line-height: 1.3; }
.tpl-types button.active { border-color: var(--teal); background: var(--teal-tint); }
.tpl-types-hint { margin: -4px 0 10px; }
.tpl-shows-head { margin: 4px 0 6px; font-size: 14px; font-weight: 700; }
.tpl-extra { font-weight: 600; }
.tpl-extra::after { content: "extra"; margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-dark); background: var(--teal-tint); padding: 2px 6px; border-radius: 999px; }
.tpl-types button b { white-space: nowrap; } @media (max-width: 400px) { .tpl-types button { padding: 8px; } .tpl-types button b { font-size: 14px; } }
.pk-person { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 0; font-size: 16px; }
.pk-person a { font-weight: 600; color: var(--teal); text-decoration: none; white-space: nowrap; }
.pk-row .pk-person span { display: inline; font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); }
.pm-block { margin-top: 4px; }
.pk-person { align-items: center; }
.pk-row .pk-person .pk-nums { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; text-transform: none; letter-spacing: 0; }
.pk-person .pk-text { padding: 5px 12px; border-radius: 999px; background: var(--teal-tint); color: var(--teal-dark); font-size: 14px; font-weight: 700; }
.pk-actions .run-btn-nav, .pk-actions .map-split { flex: 1; }
.jd-missing { flex-basis: 100%; margin: 0 0 4px; padding: 8px 12px; border-radius: 8px; background: #fdecec; color: #a12626; font-weight: 600; font-size: 14px; } .jd-missing[hidden] { display: none; }
.jp-photo-need { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #e8f4ec; color: #2e6b45; font-size: 14px; font-weight: 600; }
.jp-photo-need.missing { background: #fff4e0; color: #8a5a00; }
.cu-checks { display: grid; gap: 6px; margin: 4px 0 14px; }
.tpl-types button b { white-space: normal; }
.photo-prompt { max-width: 420px; }
.photo-prompt h2 { margin: 0 0 8px; font-size: 22px; }
.photo-prompt .pp-override { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--paper); }
dialog.modal.photo-prompt { width: min(420px, calc(100vw - 32px)); height: auto; max-height: calc(100vh - 32px); margin: auto; inset: 0; border-radius: 18px; }
dialog.modal.photo-prompt .modal-body { flex: none; }
dialog.modal.photo-prompt { height: fit-content !important; min-height: 0 !important; max-height: calc(100vh - 32px) !important; }
dialog.modal.photo-prompt > form { height: auto !important; min-height: 0 !important; }

/* ===== Lockout declarations ===== */
.decl-disclaimer { padding: 10px 12px; border-radius: 10px; background: #fff4e0; color: #7a5200; font-size: 14px; line-height: 1.45; }
.ds-tabs { display: flex; flex-wrap: wrap; margin-bottom: 12px; }
.decl-card .decl-need { padding: 8px 12px; border-radius: 8px; background: #fff4e0; color: #7a5200; font-weight: 600; font-size: 14px; }
.decl-card .decl-ok { color: #2e6b45; font-weight: 600; }
.decl-card details summary { cursor: pointer; color: var(--teal); font-weight: 600; margin: 6px 0; }
dialog.modal.decl .modal-body { font-size: 15px; }
.decl-biz { font-size: 13px; color: var(--slate); margin-bottom: 8px; }
.decl-h { margin: 16px 0 8px; font-size: 16px; }
.decl-sub { font-size: 13px; font-weight: 700; color: var(--slate); margin: 8px 0 4px; }
.decl-evidence { display: grid; gap: 2px; }
.decl-clauses { padding-left: 20px; margin: 0; display: grid; gap: 8px; line-height: 1.45; }
.decl-closing { font-weight: 700; margin: 12px 0; }
.decl-consent { font-size: 13px; color: var(--slate); margin: 4px 0 8px; }
.decl-photo { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--paper); }
.decl-photo-done { color: #2e6b45; font-weight: 600; margin-left: 8px; }
.decl-pad { position: relative; border: 2px dashed var(--border); border-radius: 12px; background: #fff; }
.decl-pad canvas { display: block; width: 100%; height: 170px; touch-action: none; }
.decl-pad .btn-link { position: absolute; right: 8px; top: 4px; }
.decl-missing { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: #fdecec; color: #a12626; font-weight: 600; }
.decl-view dl { display: grid; gap: 4px; margin: 8px 0; }
.decl-view dl div { display: flex; gap: 8px; }
.decl-view dt { min-width: 110px; color: var(--slate); font-size: 13px; }
.decl-view dd { margin: 0; }
.decl-view ol { padding-left: 20px; line-height: 1.45; }
.decl-sig { max-width: 260px; border-bottom: 1px solid var(--border); }
/* Job page: Uploads */
.up-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.up-btns[hidden] { display: none; }
.up-btns .quick-btn { cursor: pointer; }
.up-files { display: grid; gap: 6px; margin-top: 10px; }
.up-files:empty { display: none; }
.up-file { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.up-decl summary { cursor: pointer; font-weight: 600; list-style: none; }
.up-decl summary::-webkit-details-marker { display: none; }
.up-decl[open] { background: var(--paper); }
.inv-pay ul { margin: 4px 0 10px; padding-left: 18px; } .inv-pay li { margin: 2px 0; }
.pay-opts { display: grid; gap: 6px; margin: 6px 0; }
.pay-opt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.pay-opt .check { margin: 0; }
.pay-opt .pay-label { width: 100%; min-width: 0; }
.pay-opt .pay-details { width: 100%; min-width: 0; }
@media (max-width: 760px) { .pay-opt { grid-template-columns: minmax(0, 1fr) auto; } .pay-opt .pay-details, .pay-opt small { grid-column: 1 / -1; } }
dialog.modal.step-pop { width: min(440px, calc(100vw - 32px)); height: fit-content !important; min-height: 0 !important; max-height: calc(100vh - 32px) !important; margin: auto; inset: 0; border-radius: 18px; }
.step-pop h2 { margin: 0 0 8px; font-size: 22px; }
.step-pop .step-xero { padding: 8px 12px; border-radius: 8px; background: var(--paper); font-size: 14px; }
.step-pop .step-status { width: 100%; max-width: none; margin-top: 6px; }
.step-pop .modal-foot-right { flex-wrap: wrap; justify-content: flex-end; }
/* Job folder */
.up-summary { display: grid; gap: 6px; margin-bottom: 8px; }
.up-summary .up-file b { float: right; color: var(--slate); }
dialog.modal.folder .fd-part { margin-bottom: 18px; }
.fd-part h3 { margin: 0 0 8px; font-size: 16px; display: flex; gap: 8px; align-items: baseline; }
.fd-part h3 span { color: var(--slate); font-size: 13px; font-weight: 600; }
.fd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.fd-grid figure { margin: 0; }
.fd-grid .jp-thumb { width: 100%; aspect-ratio: 1; }
.fd-grid figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--slate); }
.fd-grid figcaption .btn-link { font-size: 12px; padding: 2px 0; }
.fd-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.fd-row .up-file { flex: 1; }
.fd-row .up-file small { color: var(--slate); margin-left: 6px; }
/* Settings › Text review */
.rv-switch { font-size: 15px; }
#rv-link { width: 100%; }
.rv-list { display: grid; gap: 12px; margin: 8px 0; }
.rv-item { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--paper); }
.rv-head { display: flex; gap: 8px; margin-bottom: 6px; }
.rv-head .rv-name { flex: 1; min-width: 0; font-weight: 600; }
.rv-text { width: 100%; }
.rv-rules { padding: 8px 12px; border-radius: 8px; background: #fff4e0; color: #7a5200; }
.rv-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.rv-msg { width: 100%; font: inherit; font-size: 15px; }
/* Job folder: four even buttons with line icons */
.up-btns { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.up-btns[hidden] { display: none !important; }
.up-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 74px; padding: 10px 4px; border: 1.5px solid var(--border); border-radius: 14px; background: #fff; color: var(--teal-dark); font: inherit; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.up-tile:active { background: var(--teal-tint); }
.up-tile-folder { background: var(--teal-tint); border-color: var(--teal-light); color: var(--teal-dark); } /* opens the folder: tinted, not 'selected' */
.up-tile-folder:active { background: #d5eaee; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.up-line { display: flex !important; align-items: center; gap: 10px; }
.up-line .ic { width: 20px; height: 20px; color: var(--teal); }
.up-line span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-line b, .up-line small { color: var(--slate); flex: none; }
.up-summary .up-file b { float: none; }
.fd-part h3 { align-items: center; }
.fd-part h3 .ic { width: 20px; height: 20px; color: var(--teal); }
.up-tile span { white-space: nowrap; }
/* Slim declaration banner (job page + draft invoice) */
.decl-card:has(.decl-slim) { padding: 12px 14px; background: #fff8ec; border-color: #f1d9a8; }
.decl-slim { display: flex; align-items: center; gap: 12px; }
.decl-slim > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.decl-slim b { color: #7a5200; }
.decl-slim span { font-size: 13px; color: #7a5200; line-height: 1.35; }
.decl-slim .btn-primary { flex: none; white-space: nowrap; }
.addr-list .addr-known { display: flex; flex-direction: column; gap: 2px; background: var(--teal-tint); }
.addr-known-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-dark); }
.addr-known small { color: var(--slate); font-size: 12px; }
/* Add payment sheet */
.pay-sheet .pay-total { margin: 0 0 10px; color: var(--slate); }
.pay-sheet .pay-total b { color: var(--ink); font-size: 18px; }
.pay-sub { margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.pay-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pay-way { padding: 14px 8px; border: 1.5px solid var(--teal); border-radius: 12px; background: #fff; color: var(--teal-dark); font: inherit; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pay-way:active { background: var(--teal-tint); }
.pay-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.pay-row span { font-size: 13px; color: var(--slate); }
.step-paid { padding: 8px 12px; border-radius: 8px; background: #e8f4ec; color: #2e6b45; font-weight: 600; }
.peek.holding, .peek.holding * { pointer-events: none; }
/* Peek: length */
.pk-len-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.pk-len-row b { flex: 1; text-align: center; font-size: 15px; }
.pk-step { width: 44px; height: 40px; border: 1.5px solid var(--teal); border-radius: 10px; background: #fff; color: var(--teal-dark); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pk-step:active { background: var(--teal-tint); }
.pk-len-quick { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pk-len-quick .chip { padding: 6px 12px; font-size: 13px; }
/* Customer's invoice page (invoice-view.html) */
body.iv-public { background: #f3f4f5; }
.ivp { max-width: 860px; margin: 0 auto; padding: 16px 12px 40px; }
.ivp-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ivp-hint { margin: 0 0 12px; font-size: 13px; color: var(--slate); }
.ivp-msg { padding: 40px 16px; text-align: center; color: var(--slate); }
@media print { body.iv-public { background: #fff; } .ivp { padding: 0; } }
/* Jobs: status filter */
.st-filter.on { font-weight: 700; border-left: 4px solid var(--st); } /* the picked status's colour */
.tiles.dimmed { opacity: .45; }
.stage + div .st-pill { margin-top: 4px; }
/* Peek: foot */
.pk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pk-foot .pk-hint { margin: 0; }
.pk-foot .pk-del { flex: none; font-size: 14px; }
/* ===== Receipts ===== */
.rc-add { cursor: pointer; }
.rc-gst { margin-bottom: 12px; }
.rc-gst .money-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rc-gst .money-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.rc-gst .money-tile span { font-size: 12px; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: .04em; }
.rc-gst .money-tile b { font-size: 22px; }
.rc-gst .money-tile small { color: var(--slate); }
.rc-list { display: grid; gap: 8px; padding: 8px; }
.rc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.rc-main { display: flex; flex-direction: column; min-width: 0; }
.rc-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-main small, .rc-amt small { color: var(--slate); font-size: 12px; }
.rc-main small span { white-space: nowrap; } /* break between the bits, not inside "#INV-889" */
.rc-amt { display: flex; flex-direction: column; align-items: flex-end; }
.rc-tags { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.rc-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--paper); color: var(--slate); }
.rc-tag.paid { background: #e8f4ec; color: #2e6b45; }
.rc-tag.bill { background: #fff4e0; color: #8a5a00; }
.rc-tag.xero { background: #e6f0fb; color: #1f4e79; }
.rc-empty { padding: 20px; text-align: center; }
.rc-photo img { display: block; max-width: 100%; max-height: 260px; margin: 0 auto 12px; border-radius: 10px; border: 1px solid var(--border); }
.rc-photo:empty { display: none; }
.rc-ai-note { padding: 8px 12px; border-radius: 8px; background: var(--paper); font-size: 13px; color: var(--slate); }
.rc-send-box { display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--paper); }
.rc-send-row { display: flex; align-items: center; gap: 8px; }
.rc-send-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-send-row small { color: var(--slate); font-size: 12px; }
@media (max-width: 760px) { .rc-gst .money-strip { grid-template-columns: 1fr; } }
.rc-filled { background: #fff8e1 !important; border-color: #f0c96a !important; }
.rc-ai-note.done { background: #e8f4ec; color: #2e6b45; }
.rc-ai-note.reading { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-bar { flex: 1 1 100%; height: 6px; border-radius: 3px; background: #e3e7ea; overflow: hidden; }
.rc-bar i { display: block; height: 100%; width: 0; background: var(--teal); transition: width .2s; }

/* ===== Map (jobs + where the team is) ===== */
.mp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mp-day { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-day b { font-family: var(--font-head); font-size: 17px; color: var(--ink); margin-left: 4px; }
.mp-today { padding: 8px 14px; }
.mp-share { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow-1); }
.mp-share.on { border-color: #9fd3b4; background: #f4fbf6; }
.mp-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.mp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mp-knob { flex: none; width: 46px; height: 28px; border-radius: 999px; background: #cfd6db; position: relative; transition: background 0.15s; }
.mp-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.mp-switch input:checked + .mp-knob { background: #2f8f5b; }
.mp-switch input:checked + .mp-knob::after { transform: translateX(18px); }
.mp-switch input:focus-visible + .mp-knob { outline: 2px solid var(--teal); outline-offset: 2px; }
.mp-share-txt { display: flex; flex-direction: column; gap: 2px; }
.mp-share-txt small { color: var(--slate); font-size: 13px; }
.mp-share-note { margin: 8px 0 0; font-size: 12.5px; color: var(--slate); line-height: 1.45; }
.mp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.mp-map { height: calc(100vh - 290px); min-height: 420px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; background: #e9eef0; z-index: 0; }
.mp-list { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-1); max-height: calc(100vh - 290px); overflow: auto; }
.mp-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mp-list ol { list-style: none; margin: 0; padding: 0; }
.mp-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 9px 4px; border-bottom: 1px solid #f0f1f2; cursor: pointer; }
.mp-list li:hover { background: var(--teal-tint); }
.mp-list li .st-pill { grid-column: 2; justify-self: start; }
.mp-n { width: 26px; height: 26px; border-radius: 50%; background: var(--pin); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.mp-job { display: flex; flex-direction: column; min-width: 0; }
.mp-job b { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-job small { color: var(--slate); font-size: 12.5px; }
.mp-people-head { margin: 14px 0 6px; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.mp-person { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 8px 4px; text-align: left; cursor: pointer; border-radius: 8px; font: inherit; color: var(--text); }
.mp-person:hover { background: var(--teal-tint); }
.mp-person span:last-child { display: flex; flex-direction: column; }
.mp-person small { color: var(--slate); font-size: 12.5px; }
.mp-face { width: 32px; height: 32px; border-radius: 50%; background: var(--teal-dark); color: #fff; font-weight: 700; font-size: 12px; display: grid; place-items: center; flex: none; }
.mp-person.old .mp-face { background: #9aa6ad; }
/* Pins on the map */
.mp-pin-wrap { background: none; border: 0; }
.mp-pin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pin); border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); color: #fff; font: 700 13px var(--font-body); }
.mp-person-pin { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--teal-dark); color: #fff; border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(26, 116, 137, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3); font: 700 12px var(--font-body); }
.mp-person-pin.old { background: #9aa6ad; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.mp-pop { display: flex; flex-direction: column; gap: 3px; font: 13px var(--font-body); color: var(--text); }
.mp-pop small { color: var(--slate); }
.mp-pop-btns { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.mp-pop-btns .btn-secondary { padding: 6px 10px; font-size: 13px; }
@media (max-width: 1100px) {
  .mp-layout { grid-template-columns: 1fr; }
  .mp-map { height: 55vh; min-height: 320px; }
  .mp-list { max-height: none; }
}
@media (max-width: 760px) {
  .mp-day b { flex-basis: 100%; margin: 4px 0 0; font-size: 16px; }
}
/* "Sharing your location" bar (every page, while it's on) */
.loc-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius-sm); background: #eaf6ef; border: 1px solid #9fd3b4; color: #1f5f3c; font-size: 14px; font-weight: 600; }
.loc-dot { width: 10px; height: 10px; border-radius: 50%; background: #2f8f5b; box-shadow: 0 0 0 4px rgba(47, 143, 91, 0.2); flex: none; }
.loc-stop { margin-left: auto; border: 1px solid #2f8f5b; background: #fff; color: #1f5f3c; border-radius: 999px; padding: 6px 14px; font: 600 13px var(--font-body); cursor: pointer; }
.page-schedule .loc-bar { margin: 0 12px 8px; }
/* Map look (MapLibre) */
.mp-pin, .mp-person-pin { padding: 0; cursor: pointer; line-height: 1; transition: transform 0.12s; }
.mp-pin:hover, .mp-person-pin:hover { transform: scale(1.12); }
.mp-map .maplibregl-popup-content { border-radius: 12px; padding: 12px 14px 12px; box-shadow: 0 8px 28px rgba(20, 32, 43, 0.22); font-family: var(--font-body); }
.mp-map .maplibregl-popup-close-button { font-size: 18px; padding: 2px 8px; color: var(--slate); }
.mp-map .maplibregl-ctrl-group { border-radius: 10px; box-shadow: 0 2px 10px rgba(20, 32, 43, 0.15); }
.mp-map { background: #f2f3f0; }
/* Map: your own sharing, changed in Settings */
.mp-me { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 14px; }
.mp-me-change { margin-left: auto; color: var(--teal); font-weight: 600; font-size: 13px; }
.loc-dot.off { background: #b8c1c7; box-shadow: none; }
.loc-rules { margin: 14px 0 0; padding-left: 18px; color: var(--slate); font-size: 13.5px; line-height: 1.5; }
.loc-rules li { margin-bottom: 4px; }

/* ===== Phone polish (design review, 30 Sep 2026) =====
   Last in the file so it wins: every box 16px (iPhone zooms in on anything smaller), every
   button at least 44px tall (Apple's thumb size), and the teal header reaches up under the
   status bar when Keyzo is on the home screen. */
@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea,
  #jp-status, #jp-search, #f-status, .search-box, .st-select, .jl-row input { font-size: 16px !important; } /* beats any page-level size */
  .btn-primary, .btn-secondary { min-height: 44px; justify-content: center; }
  .btn-primary.small { min-height: 40px; }
  .quick-btn { min-height: 44px; }
  .seg button, .jd-top .kind-switch button { min-height: 40px; }
  .btn-icon, .rep-arrow { min-width: 40px; min-height: 40px; }
  .rep-chips button { min-height: 40px; }
  #mp-fit { min-height: 40px; }
  .jl-remove { width: 44px; height: 44px; }
  .back-link { padding: 12px 12px 12px 0; margin: -12px 0 -2px; }
  .mobile-header { padding-top: calc(12px + env(safe-area-inset-top)); }
}

/* Empty screens: an icon, one line, and the next thing to do (design review, 30 Sep 2026). */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; text-align: center; color: var(--slate); }
.empty-state b { font-family: var(--font-head); font-size: 17px; font-weight: 600; color: var(--ink); }
.empty-state p { margin: 0; max-width: 300px; font-size: 14px; }
.empty-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--teal-tint); color: var(--teal); }
.empty-state.small { padding: 24px 12px; }
.empty-state.small .empty-icon { width: 48px; height: 48px; }

.phone-only { display: none; }

/* ===== Phone lists: one compact row per job / customer / invoice (design review, 30 Sep 2026) =====
   Instead of a label/value card per record (about 250px each), the main thing on top (who, and
   where it's up to), the when/amount under it, and a chevron. About 4× as many fit on screen. */
@media (max-width: 760px) {
  .data-table tr.rw { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 3px 10px; padding: 12px 32px 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow-1); }
  .data-table tr.rw::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border: solid var(--mute); border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); }
  .data-table tr.rw td { display: block; width: auto; min-width: 0; padding: 0; border: 0; text-align: left; font-size: 14px; color: var(--text); }
  .data-table tr.rw td::before { display: none; }
  .data-table tr.rw td > .muted { margin: 0; text-align: inherit; }
  .data-table tr.rw .customer-name { grid-column: 1 / 3; font-size: 16px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .data-table tr.rw .customer-name .muted { font-size: 13px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
  .data-table tr.rw .job-no { font-size: 13px; color: var(--slate); font-weight: 600; }
  .data-table tr.rw .stage-cell { display: flex; justify-content: flex-end; }
  .data-table tr.rw .address-links { display: block; }
  .data-table tr.rw .address-link { display: none; } /* Maps / Waze are on the job itself */
  .data-table tr.rw .address-text { display: block; font-size: 13px; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Jobs: Customer · status / when · price / address · job no. */
  .rw-job td:nth-child(2) { grid-row: 1; }
  .rw-job td:nth-child(6) { grid-column: 3; grid-row: 1; }
  .rw-job td:nth-child(4) { grid-column: 1 / 3; grid-row: 2; }
  .rw-job td:nth-child(5) { grid-column: 3; grid-row: 2; text-align: right !important; font-weight: 700; color: var(--ink) !important; }
  .rw-job td:nth-child(3) { grid-column: 1 / 3; grid-row: 3; }
  .rw-job td:nth-child(1) { grid-column: 3; grid-row: 3; text-align: right !important; font-size: 12px; font-weight: 500; }
  .rw-job td:nth-child(1) .muted { display: none; }

  /* Invoices: Customer · status / number · due · total */
  .rw-inv td:nth-child(2) { grid-row: 1; }
  .rw-inv td:nth-child(7) { grid-column: 3; grid-row: 1; text-align: right !important; }
  .rw-inv td:nth-child(1) { grid-column: 1; grid-row: 2; }
  .rw-inv td:nth-child(1) .muted { display: none; }
  .rw-inv td:nth-child(4) { grid-column: 2; grid-row: 2; color: var(--slate) !important; font-size: 13px !important; }
  .rw-inv td:nth-child(4)::before { display: inline !important; content: "Due "; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; padding: 0; }
  .rw-inv td:nth-child(5) { grid-column: 3; grid-row: 2; text-align: right !important; font-weight: 700; color: var(--ink) !important; }
  .rw-inv td:nth-child(5) .to-pay { font-size: 12px; font-weight: 600; color: var(--orange-deep); }
  .rw-inv td:nth-child(3), .rw-inv td:nth-child(6) { display: none !important; }

  /* Not invoiced yet: Customer · value / job · finished · Invoice it */
  .rw-todo { padding-right: 14px !important; }
  .rw-todo::after { display: none; }
  .rw-todo td:nth-child(2) { grid-row: 1; }
  .rw-todo td:nth-child(4) { grid-column: 3; grid-row: 1; text-align: right !important; font-weight: 700; color: var(--ink) !important; }
  .rw-todo td:nth-child(1) { grid-column: 1; grid-row: 2; align-self: center; }
  .rw-todo td:nth-child(3) { grid-column: 2; grid-row: 2; align-self: center; color: var(--slate) !important; font-size: 13px !important; }
  .rw-todo td:nth-child(5) { grid-column: 3; grid-row: 2; }

  /* Customers: Name · owes / type · phone · jobs */
  .rw-cust td:nth-child(1) { grid-row: 1; }
  .rw-cust td:nth-child(6) { grid-column: 3; grid-row: 1; text-align: right !important; font-weight: 700; }
  .rw-cust td:nth-child(2) { display: none !important; } /* type: a real estate shows its contact under the name */
  .rw-cust td:nth-child(4) { grid-column: 1 / 3; grid-row: 2; color: var(--slate) !important; font-size: 13px !important; }
  .rw-cust td:nth-child(5) { grid-column: 3; grid-row: 2; text-align: right !important; color: var(--slate) !important; font-size: 13px !important; }
  .data-table tr.rw .phone-only { display: inline; }
  .data-table tr.rw .desk-only { display: none !important; }
  .rw-cust td:nth-child(3) { display: none !important; }
}

/* Desktop and tablet lists (design review, 30 Sep 2026): the tiles in even rows (no tile left
   on its own), short values that never wrap, and Maps / Waze only where there's room. */
@media (min-width: 761px) {
  #job-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #iv-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .data-table .job-no, .data-table td[data-label="Date"], .data-table td[data-label="Due"], .data-table td[data-label="Finished"],
  .data-table td[data-label="Total"], .data-table td[data-label="Quoted"], .data-table td[data-label="Phone"] { white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  #iv-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .data-table .address-link { display: none; }
}

/* Booking sheet (design review, 30 Sep 2026): When comes first, and on a phone one Close (top)
   and a full-width Book job button where the thumb is. */
#fs-job > .jd-when { margin: 0 0 14px; padding: 0 0 2px; border-top: 0; border-bottom: 1px solid var(--border); }
@media (max-width: 760px) {
  #job-form .foot-close { display: none; }
  #job-form .modal-foot-right { flex: 1 1 100%; margin-left: 0; }
  #jd-submit { flex: 1; min-height: 50px; font-size: 17px; }
  .modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* Job page contacts on a phone: name on top, Call / Text side by side, same size. */
@media (max-width: 760px) {
  .jp-person { flex-wrap: wrap; }
  .jp-person > div:first-child { flex: 1 1 100%; }
  .jp-person-btns { flex: 1 1 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .jp-person-btns > * { justify-content: center; text-align: center; }
}

/* Invoice page header: number, status and amount at a glance (design review, 30 Sep 2026). */
.iv-bar > div.iv-hero { display: grid; gap: 2px; align-items: start; justify-items: start; }
.iv-hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iv-hero h1 { margin: 0; font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.iv-hero-amt { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--ink); }
.iv-hero-amt small { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--orange-deep); }
.iv-hero .muted { font-size: 14px; color: var(--teal); font-weight: 600; text-decoration: none; }

/* One look for buttons and toggles (design review, 30 Sep 2026): the outlined button is the
   same size and weight as the orange one, and the Reports period picker is the same pill track
   as the Schedule's. */
.btn-secondary { font-size: 15px; font-weight: 700; padding: 8.5px 16.5px; letter-spacing: 0.01em; gap: 6px; }
.rep-chips { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: nowrap; }
.rep-chips button { border: 0 !important; background: none; box-shadow: none; }
.rep-chips button.active { background: var(--teal); color: #fff; }

/* Polish (design review, 30 Sep 2026): sheets slide up and pop-ups fade in, the More menu dims
   the page behind it, and anything reached with the keyboard gets a clear outline. */
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop-in { from { transform: scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
dialog.modal[open] { animation: pop-in 0.18s ease-out; }
dialog.modal[open]::backdrop { animation: fade-in 0.18s ease-out; }
@media (max-width: 760px) {
  dialog.modal[open] { animation: sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
  dialog.modal.photo-prompt[open], dialog.modal.step-pop[open] { animation: pop-in 0.18s ease-out; }
  body:has(.more-menu:not([hidden]))::after { content: ""; position: fixed; inset: 0; z-index: 49; background: rgba(11, 60, 73, 0.28); pointer-events: none; animation: fade-in 0.15s ease-out; }
  .more-menu:not([hidden]) { animation: pop-in 0.15s ease-out; transform-origin: bottom right; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.modal[open], dialog.modal[open]::backdrop, .more-menu:not([hidden]), body::after { animation: none !important; }
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--teal-light) !important; outline-offset: 2px; }

/* Settings › You › Bottom bar: drag rows by the handle */
.bb-list { list-style: none; padding: 0; margin: 0 0 12px; max-width: 520px; display: flex; flex-direction: column; gap: 8px; min-height: 52px; }
.bb-list li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px 4px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.bb-list b { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); }
.bb-grip { display: grid; place-items: center; width: 44px; align-self: stretch; font-size: 20px; line-height: 1; color: var(--mute); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.bb-grip-demo { color: var(--mute); font-weight: 700; }
.bb-ico { display: inline-flex; width: 22px; justify-content: center; color: var(--teal); }
.bb-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#bb-on li { border-color: var(--teal-light); background: var(--teal-tint); }
.bb-list .btn-link[disabled] { opacity: 0.4; cursor: default; }
.bb-count { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--slate); margin-left: 6px; }
.bb-gap { border: 2px dashed var(--teal-light) !important; background: transparent !important; }
.bb-dragging { position: fixed; z-index: 100; margin: 0; box-shadow: 0 12px 30px rgba(11, 60, 73, 0.3); transform: scale(1.02); pointer-events: none; }
.bb-dragging .bb-grip { cursor: grabbing; }
.bb-actions #bb-reset { margin-left: auto; }
body:has(.bb-dragging) { -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
.bb-list { gap: 6px; }

/* ===== DARK-START (made by tools/dark-css.py — don't edit by hand) ===== */
/* Dark mode follows the phone's own setting. The printed/emailed invoice stays on white. */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root { --ink: #eef3f5; --text: #d3dde2; --slate: #a3b1ba; --mute: #8d9ba5; --paper: #0f1a20; --white: #16232b; --border: #2b3b45;
    --teal-tint: #173840; --orange-tint: #3a261c; --peach: #6b3a26;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45); }
  body { background: #0f1a20; }
  img, video { color-scheme: light; }
  /* The invoice itself is paper: light colours inside it. */
  .inv-doc, .ivp { color-scheme: light; --ink: #14202b; --text: #2b3640; --slate: #6b7784; --mute: #6f7a86; --white: #fff; --border: #e3e6e8; --paper: #f7f6f2; --teal-tint: #e8f3f5; background: #fff; color: #2b3640; }
  .search-box { background: #1d2c35; color: var(--ink); }
  .search-box:focus { background: #16232b; }
  ::placeholder { color: #7f8e98; }
  .setup-banner, .demo-banner { background: #3a261c; color: #ffc4a8; border-color: #6b3a26; }
  .loc-bar { background: #17332a; color: #bfe6cf; }
  .stat-card { background: #16232b; }
  .jp-actions { background: rgba(22, 35, 43, 0.96); border-top-color: #2b3b45; }
  .mp-map { background: #1d2c35; }
  /* Striped and lined backgrounds (the script skips gradients) */
  .cal-day { background-image: repeating-linear-gradient(to bottom, #3a4c57 0, #3a4c57 1px, transparent 1px, transparent var(--hour-h)), repeating-linear-gradient(to bottom, #2a3a44 0, #2a3a44 1px, transparent 1px, transparent var(--half-h)), repeating-linear-gradient(to bottom, #1f2d35 0, #1f2d35 1px, transparent 1px, transparent var(--slot-h)); }
  .cal-day:hover { background-color: #1a2a33; }
  .cal-off { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 6px, transparent 6px 12px); }
  .cal-block, .run-block, .mchip.block { color: #cfeef5; background: repeating-linear-gradient(135deg, #17343c 0 8px, #1c3f48 8px 16px); border-color: #2f5f6a; }
}
@media (prefers-color-scheme: dark) {
  a { color: #5cc3d9; }
  .breadcrumb a:hover { color: #5cc3d9; }
  .eyebrow { color: #5cc3d9; }
  .btn-secondary { background: #16232b; color: #5cc3d9; }
  .stat-card { background: #16232b; }
  .status-tabs a { background: #16232b; }
  .status-tabs a:hover { color: #5cc3d9; }
  .list-panel { background: #16232b; }
  .search-box:focus { background: #16232b; }
  .data-table td { border-bottom: 1px solid #24343e; }
  .data-table .job-no { color: #5cc3d9; }
  .note { background: #16232b; }
  .address-link { color: #5cc3d9; background: #16232b; }
  .field-group select, .field-group input { background: #16232b; }
  .setup-banner { border: 1px solid #6b3a26; color: #ffab85; }
  .btn-icon { background: #16232b; color: #5cc3d9; }
  .cal-jump { background: #16232b; }
  .seg { background: #16232b; }
  .seg button:hover { color: #5cc3d9; }
  .cal { background: #16232b; }
  .cal-head { background: #16232b; }
  .cal-head-day.today .dow { color: #ff8a5c; }
  .cal-day:hover { background-color: #1d2c35; }
  .cal-block { color: #9ad9e8; }
  .feature { background: #16232b; }
  .soon-tag { color: #5cc3d9; }
  .toolbar-select { background: #16232b; }
  .pack-card { background: #16232b; }
  .pack-card-head strong { color: #7fd0e2; }
  .pack-line { border-top: 1px solid #24343e; }
  .pack-line input { background: #16232b; }
  .pl-remove:hover { color: #ff8a5c; }
  .run-nav select { color: #7fd0e2; background: #16232b; }
  .run-route { color: #5cc3d9; background: #16232b; }
  .run-job { background: #16232b; }
  .run-no { color: #5cc3d9; }
  .run-price { color: #7fd0e2; }
  .run-done { color: #7fd3a0; background: #17332a; }
  .run-btn { color: #7fd0e2; }
  .run-btn:active { background: #1f4852; }
  .run-leg a { color: #5cc3d9; }
  .run-warn { color: #ff8a5c; }
  .run-free { color: #7fd0e2; }
  .run-free-cta { color: #5cc3d9; }
  .run-block { color: #9ad9e8; }
  .run-now { color: #ff8a5c; }
  .drag-ghost.block { color: #9ad9e8; background: #1f4852; }
  .mcell:hover { background: #1d2c35; }
  .mday:hover { color: #5cc3d9; }
  .mchip.block { color: #9ad9e8; }
  .mmore { color: #5cc3d9; }
  .modal-close { color: #5cc3d9; }
  .modal-close:hover { color: #7fd0e2; }
  .field input, .field textarea, .field select { background: #16232b; }
  .form-warn { border: 1px solid #6b3a26; color: #ffab85; }
  .form-warn.error { background: #3a1f22; border-color: #6b3438; color: #ff9b9b; }
  .quick-btn { color: #5cc3d9; background: #16232b; }
  .btn-link { color: #5cc3d9; }
  .btn-link.danger { color: #ff8a8a; }
  .btn-link.danger:hover { background: #3a1f22; }
  .saved-note { color: #6cc793; }
  .auth-card { background: #16232b; }
  .auth-links a { color: #5cc3d9; }
  .wiz-back { color: #5cc3d9; }
  .q-help a { color: #5cc3d9; }
  .q > input, .q .addr-wrap > input, .pw-wrap input { background: #16232b; }
  .pw-toggle { color: #5cc3d9; }
  .choice { background: #16232b; }
  .field-link { color: #5cc3d9; }
  .wiz-count { color: #5cc3d9 !important; }
  .sp-track { background: #16232b; }
  .sp-go { color: #5cc3d9; }
  .hour-pick select { background: #16232b; }
  .day-toggle { background: #16232b; }
  .addr-list { background: #16232b; }
  .rep-chips button { background: #16232b; }
  .rep-arrow { background: #16232b; color: #5cc3d9; }
  .rep-card { background: #16232b; }
  .rep-cmp.up, .rep-team .up { color: #6cc793; }
  .rep-cmp.down, .rep-team .down { color: #ff8a5c; }
  .earn-card { background: #16232b; }
  .qq { background: #16232b; }
  .qq-missing a { color: #5cc3d9; }
  .qq-types button, .qq-when button { background: #16232b; }
  .qq-count button { background: #16232b; color: #5cc3d9; }
  .qq-total { color: #7fd0e2; }
  .wrap-card, .jar-card { background: #16232b; }
  .wrap-warn { color: #ff8a5c; }
  .wrap-warn a { color: #5cc3d9; }
  .wrap-ok { color: #6cc793; }
  .chip { background: #16232b; }
  .cu-job:hover { color: #5cc3d9; }
  .wo-drop { color: #7fd0e2; }
  .wo-drop.over { background: #1f4852; }
  .wo-paste summary { color: #5cc3d9; }
  .wo-card { background: #16232b; }
  .wo-warn { color: #ff8a5c; }
  .wo-ok { color: #6cc793; }
  td.late { color: #ff8a8a; }
  .card { background: #16232b; }
  .stage { background: #1d2c35; }
  .stage.to_book { background: #3a2e17; color: #f3c46b; }
  .stage.scheduled { color: #7fd0e2; }
  .stage.done { color: #ff8a5c; }
  .stage.draft { background: #3a2e17; color: #f3c46b; }
  .stage.unpaid { background: #1d2748; color: #9db4f0; }
  .stage.overdue { background: #3a1f22; color: #ff9b9b; }
  .stage.paid { background: #17332a; color: #7fd3a0; }
  .stage.voided, .stage.cancelled { background: #1d2c35; }
  .money-tile { background: #16232b; }
  .money-tile.warn { border-color: #6b3438; background: #3a1f22; }
  .money-tile.warn b { color: #ff9b9b; }
  .money-tile.todo { border-color: #6b3a26; background: #3a261c; }
  .jp-number { color: #5cc3d9; }
  .jp-title a:hover { color: #5cc3d9; }
  .jp-when a { color: #5cc3d9; }
  .jp-paid { color: #7fd3a0; }
  .jp-saved { color: #6cc793; }
  .jp-activity li { border-left: 2px solid #1f4852; }
  .jl-row input { background: #16232b; }
  .jl-row input:disabled { background: #1d2c35; }
  .jl-remove:hover { background: #3a1f22; color: #ff8a8a; }
  .jp-results { background: #16232b; }
  .next-btns .quick-btn:hover { background: #16232b; color: #7fd0e2; }
  .next-btns .quick-btn.strong { background: #16232b; color: #7fd0e2; border-color: #16232b; }
  .needs { background: #16232b; }
  .need { background: #1d2c35; }
  .need.overdue { color: #ff9b9b; }
  .needs-clear { color: #7fd3a0; }
  .count-pill { color: #7fd0e2; }
  .rep-down { color: #ff9b9b; }
  .cu-owes { background: #1d2c35; }
  .jp-thumb { background: #1d2c35; }
  .back-link:hover { color: #5cc3d9; }
  .tiles a { background: #16232b; }
  .tiles a.warn.lit { border-color: #6b3438; background: #3a1f22; }
  .tiles a.warn.lit .tile-m { color: #ff9b9b; }
  .tiles a.todo.lit { border-color: #6b3a26; background: #3a261c; }
  .page-break { background: #3a1f22; border-bottom: 2px solid #6b3438; color: #ff9b9b; }
  .cp-list { background: #16232b; }
  .cp-list .cp-new-opt { color: #ff8a5c; }
  .cp-chosen { background: #17332a; color: #7fd3a0; }
  .cp-chosen a { color: #7fd3a0; }
  .cp-new { border: 1.5px dashed #6b3a26; background: #3a261c; }
  .cp-new-head { color: #ff8a5c; }
  .cal-tapped { color: #ff8a5c; }
  .cp-add { background: #3a261c; color: #ff8a5c; }
  .st-colour { border: 2px solid #16232b; }
  .st-first { color: #7fd0e2; }
  .st-btn { background: #16232b; }
  .st-btn.danger:hover { background: #3a1f22; color: #ff8a8a; }
  .jd-locked { background: #1d2c35; color: #e6edf0; }
  textarea:disabled, input:disabled { background: #1d2c35; }
  .st-fixed input[readonly] { background: #1d2c35; }
  .set-list { background: #16232b; }
  .set-ico { color: #7fd0e2; }
  .set-card { background: #16232b; }
  .set-toast { color: #7fd0e2; }
  .mn-slider output { color: #7fd0e2; }
  .mn-money { background: #16232b; }
  .day-chips button { background: #16232b; }
  .peek-card { background: #16232b; }
  .map-pick { color: #7fd0e2; background: #16232b; }
  .map-split .run-btn + .map-pick { border-left: 1px solid #16232b; }
  .st-select { background: var(--st, var(--teal)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='#16232b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
  .st-select option { background: #16232b; }
  .tpl-styles button { background: #16232b; }
  .tpl-thumb { background: #16232b; }
  .tpl-thumb i { background: #2b3b45; }
  .t-classic i:nth-child(2) { background: #1d2c35; }
  .tpl-swatch { border: 3px solid #16232b; }
  .tpl-types button { background: #16232b; }
  .tpl-extra::after { color: #7fd0e2; }
  .pk-person a { color: #5cc3d9; }
  .pk-person .pk-text { color: #7fd0e2; }
  .jd-missing { background: #3a1f22; color: #ff9b9b; }
  .jp-photo-need { background: #17332a; color: #7fd3a0; }
  .jp-photo-need.missing { background: #3a2e17; color: #f3c46b; }
  .decl-disclaimer { background: #3a2e17; color: #f3c46b; }
  .decl-card .decl-need { background: #3a2e17; color: #f3c46b; }
  .decl-card .decl-ok { color: #7fd3a0; }
  .decl-card details summary { color: #5cc3d9; }
  .decl-photo-done { color: #7fd3a0; }
  .decl-pad { background: #16232b; }
  .decl-missing { background: #3a1f22; color: #ff9b9b; }
  .up-file { background: #16232b; }
  .rv-rules { background: #3a2e17; color: #f3c46b; }
  .up-tile { background: #16232b; color: #7fd0e2; }
  .up-tile-folder { color: #7fd0e2; }
  .up-tile-folder:active { background: #1f4852; }
  .up-line .ic { color: #5cc3d9; }
  .fd-part h3 .ic { color: #5cc3d9; }
  .decl-card:has(.decl-slim) { background: #3a2e17; border-color: #6b5424; }
  .decl-slim b { color: #f3c46b; }
  .decl-slim span { color: #f3c46b; }
  .addr-known-tag { color: #7fd0e2; }
  .pay-way { background: #16232b; color: #7fd0e2; }
  .pay-row { background: #16232b; }
  .step-paid { background: #17332a; color: #7fd3a0; }
  .pk-step { background: #16232b; color: #7fd0e2; }
  .rc-gst .money-tile { background: #16232b; }
  .rc-row { background: #16232b; }
  .rc-tag.paid { background: #17332a; color: #7fd3a0; }
  .rc-tag.bill { background: #3a2e17; color: #f3c46b; }
  .rc-tag.xero { background: #1d2748; color: #8fc1ec; }
  .rc-filled { background: #3a2e17 !important; border-color: #6b5424 !important; }
  .rc-ai-note.done { background: #17332a; color: #7fd3a0; }
  .rc-bar { background: #2b3b45; }
  .mp-share { background: #16232b; }
  .mp-share.on { border-color: #2f5d45; background: #17332a; }
  .mp-knob { background: #33444f; }
  .mp-knob::after { background: #16232b; }
  .mp-map { background: #1d2c35; }
  .mp-list { background: #16232b; }
  .mp-list li { border-bottom: 1px solid #24343e; }
  .mp-pin { border: 2.5px solid #16232b; }
  .mp-person-pin { border: 3px solid #16232b; }
  .loc-bar { background: #17332a; border: 1px solid #2f5d45; color: #7fd3a0; }
  .loc-stop { background: #16232b; color: #7fd3a0; }
  .mp-map { background: #1d2c35; }
  .mp-me { background: #16232b; }
  .mp-me-change { color: #5cc3d9; }
  .empty-icon { color: #5cc3d9; }
  .iv-hero-amt small { color: #ff8a5c; }
  .iv-hero .muted { color: #5cc3d9; }
  .rep-chips { background: #16232b; }
  .bb-list li { background: #16232b; }
  .bb-ico { color: #5cc3d9; }
}
@media (prefers-color-scheme: dark) and (max-width: 760px) {
  .data-table tr { background: #16232b; }
  .data-table td { border-bottom: 1px solid #24343e; }
  .run-nav select { color: #5cc3d9; }
  .more-menu:not([hidden]) { background: #16232b; }
  .more-menu a:hover, .more-menu a.active { color: #7fd0e2; }
  .more-menu .icon { color: #5cc3d9; }
  .jp-actions { background: rgba(22, 35, 43, 0.96); }
  .rw-inv td:nth-child(5) .to-pay { color: #ff8a5c; }
}
/* ===== DARK-END ===== */