/* Mad Labs PHQ — Portal Styles
   Design system: Inter Tight + JetBrains Mono, graphite surfaces, amber accent
   Fonts loaded via <link> in each HTML page — no @import here to avoid
   blocking the Supabase CDN script load order. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ────────────────────────── */

:root {
  /* Surfaces — graphite/black with subtle warm tint */
  --bg:        #0a0a0b;
  --bg-0:      #0a0a0b;
  --bg-1:      #111113;
  --bg-2:      #17181b;
  --surface:   #111113;
  --elevated:  #1f2024;
  --bg-3:      #1f2024;
  --bg-4:      #292a2f;
  --bg-hover:  rgba(34,35,39,0.58);
  --bg-card:   #111113;

  /* Borders */
  --border:    #25262b;
  --border-1:  #25262b;
  --border-2:  #313238;
  --border-3:  #43454c;

  /* Text */
  --text:      #f4f4f5;
  --text-1:    #f4f4f5;
  --text-2:    #b8b9bd;
  --muted:     #82838a;
  --text-3:    #82838a;
  --text-4:    #5a5b62;

  /* Accent — Mad Labs brand blue */
  --accent:      #0057ff;
  --accent-strong: #1E5BFF;
  --accent-dim:  rgba(0, 87, 255, 0.12);
  --accent-line: rgba(0, 87, 255, 0.35);

  /* Keep --blue mapped to accent */
  --blue:      #0057ff;
  --blue-dark: #1E5BFF;
  --blue-dim:  rgba(0, 87, 255, 0.12);

  /* Semantic */
  --green:     oklch(72% 0.16 155);
  --green-dim: oklch(72% 0.16 155 / 0.14);
  --success:   oklch(72% 0.16 155);
  --success-dim: oklch(72% 0.16 155 / 0.14);
  --warn:      oklch(78% 0.16 75);
  --warn-dim:  oklch(78% 0.16 75 / 0.14);
  --amber:     oklch(78% 0.16 75);
  --red:       oklch(68% 0.21 20);
  --red-dim:   oklch(68% 0.21 20 / 0.14);
  --danger:    oklch(68% 0.21 20);
  --danger-dim: oklch(68% 0.21 20 / 0.14);
  --info:      oklch(70% 0.13 235);
  --info-dim:  oklch(70% 0.13 235 / 0.14);
  --purple:    oklch(74% 0.16 295);
  --ai:        oklch(74% 0.16 295);
  --ai-dim:    oklch(74% 0.16 295 / 0.14);

  /* Typography */
  --font-sans:    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Inter Tight', -apple-system, sans-serif;

  /* Radii */
  --radius: 6px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   14px;

  /* Shadows */
  --shadow:   0 4px 12px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-pop: 0 18px 40px rgba(0,0,0,0.6), 0 0 0 1px var(--border-2);
}

html, body {
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.45;
  min-height: 100vh;
}
/* Safety net: never wider than the screen (a phone zooms the page out to fit the
   widest element). `clip`, not `hidden`, so sticky top bars keep working. */
html, body { max-width: 100%; overflow-x: clip; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; color: var(--accent-strong); }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--border-3); }

/* ── Layout ─────────────────────────────── */

.portal-wrap {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────── */

.sidebar {
  width: 220px;
  background: var(--bg-1);
  border-right: 1px solid var(--border-1);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform .25s;
  overflow: hidden;
}

/* Brand / logo area */
.sidebar-logo {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-1);
  flex-shrink: 0;
}
.sidebar-logo a { display: block; text-decoration: none; }
.sidebar-logo img { height: 30px; width: auto; object-fit: contain; opacity: 0.9; }

/* Nav area */
.sidebar-nav {
  flex: 1;
  padding: 8px 10px;
  overflow-y: auto;
}

/* Section label */
.nav-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  font-family: var(--font-mono);
  padding: 10px 10px 4px;
}

/* Nav links — match .sb-item design */
.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin: 1px 0;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  transition: color .12s, background .12s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-link svg { width: 15px; height: 15px; color: var(--text-4); flex-shrink: 0; }
.nav-link:hover {
  background: var(--bg-hover);
  color: var(--text-1);
  text-decoration: none;
}
.nav-link:hover svg { color: var(--text-3); }
.nav-link.active {
  background: var(--bg-3);
  color: var(--text-1);
}
.nav-link.active svg { color: var(--accent); }
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px; bottom: 7px;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
  margin-left: -1px;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--border-1);
  flex-shrink: 0;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.user-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.user-chip-row .user-chip { flex: 1; margin-bottom: 0; }

.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(60% 0.12 250), oklch(50% 0.14 280));
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  flex-shrink: 0;
}

.user-name  { font-size: 12.5px; font-weight: 500; line-height: 1.2; color: var(--text-1); }
.user-role  {
  font-size: 10.5px; color: var(--text-3);
  font-weight: 500; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 2px; display: block;
}

.settings-gear {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  color: var(--text-3);
  flex-shrink: 0;
  transition: color .12s, background .12s, transform .12s;
  text-decoration: none;
  border: 1px solid var(--border-1);
}
.settings-gear:hover { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-line); text-decoration: none; transform: rotate(35deg); }
.settings-gear svg { width: 20px; height: 20px; }

.btn-logout, .signout-link {
  display: block; width: 100%; text-align: center;
  color: var(--danger); font-size: 12.5px; font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  transition: border-color .12s, background .12s;
  text-decoration: none;
}
.btn-logout:hover, .signout-link:hover {
  border-color: var(--danger);
  background: var(--danger-dim);
  text-decoration: none;
  color: var(--danger);
}

/* Sidebar badge / nav badges */
.nav-badge {
  margin-left: auto;
  background: var(--accent-dim);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px; text-align: center;
  display: none;
}
.nav-badge.visible, .nav-badge:not(:empty) { display: inline-block; }

/* External icon items */
.nav-external { justify-content: flex-start; }
.nav-external .ext-icon {
  width: 11px; height: 11px;
  margin-left: auto;
  opacity: 0.3; flex-shrink: 0;
}
.nav-external:hover .ext-icon { opacity: 0.7; }

/* Soon items */
.nav-soon { opacity: 0.38; cursor: default; pointer-events: none; }
.soon-tag {
  margin-left: auto;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-4);
  background: var(--bg-3);
  padding: 2px 5px; border-radius: 3px;
  font-family: var(--font-mono);
}

/* ── Main content ────────────────────────── */

.main {
  margin-left: 220px;
  flex: 1;
  /* A flex child won't shrink below its content's width by default, so one wide
     table (Leads: 9 columns) stretched .main — and the whole page — to ~1,280px
     on a phone, pushing the top-bar title off-screen. min-width:0 lets .main fit
     the screen and the table scroll inside its own .table-wrap instead. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg-0);
}

/* Topbar */
.topbar {
  height: 50px;
  border-bottom: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: var(--bg-1);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  gap: 12px;
}

.topbar-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.topbar-crumbs {
  display: flex; align-items: center;
  gap: 6px; font-size: 13px;
}
.topbar-crumbs .seg { color: var(--text-3); }
.topbar-crumbs .seg.last { color: var(--text-1); font-weight: 500; }
.topbar-crumbs .sep { color: var(--text-4); font-size: 12px; }

/* Page content */
.page-content {
  padding: 24px 28px;
  flex: 1;
}

/* Hamburger */
.hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--text-2); padding: 4px;
}
.hamburger svg { display: block; }
.hamburger:hover { color: var(--text-1); }

/* ── Stat grid ───────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}

.stat-label {
  font-size: 10.5px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: var(--font-mono);
  font-weight: 500;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-1);
}
.stat-value.green  { color: var(--success); }
.stat-value.blue   { color: var(--accent); }
.stat-value.amber  { color: var(--warn); }
.stat-value.red    { color: var(--danger); }

/* ── Cards ───────────────────────────────── */

.card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  margin-bottom: 20px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-1);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  background: var(--bg-1);
}

.card-body { padding: 18px; }

/* ── Tables ──────────────────────────────── */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-4);
  font-family: var(--font-mono);
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-1);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-1);
  vertical-align: middle;
  color: var(--text-2);
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-hover); }

.empty-row td {
  text-align: center;
  color: var(--text-4);
  padding: 48px 20px;
  font-size: 13px;
}

.table-loading td {
  text-align: center;
  color: var(--text-4);
  padding: 32px 20px;
}

/* Phones and tablets: list tables become one card per row, each value under
   its column name, so nothing scrolls sideways. api.js copies each <th> onto its
   cells as data-label and adds .m-cards -- always at 768px and below, and on a
   tablet only when the table would not fit. Without that script a table stays a
   table. Opt a table out with class="no-stack". Desktop (>1024px) is untouched. */
@media (max-width: 1024px) {
  table.m-cards, table.m-cards tbody { display: block; width: 100%; min-width: 0 !important; }
  table.m-cards thead { display: none; }
  table.m-cards tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border-1); }
  table.m-cards tr:last-child { border-bottom: none; }
  table.m-cards td {
    display: block; position: relative;
    padding: 5px 0 5px calc(34% + 12px); min-height: 26px;
    border-bottom: none; text-align: left !important;
    white-space: normal !important; overflow-wrap: anywhere;
  }
  table.m-cards td::before {
    content: attr(data-label);
    position: absolute; left: 0; top: 7px; width: 34%;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-4);
  }
  table.m-cards tr:not(.m-span) td:first-child { color: var(--text-1); font-weight: 600; }
  /* Action buttons: full width under the values, wrapping if they must */
  table.m-cards td.m-nolabel { padding-left: 0; padding-top: 8px; }
  table.m-cards td.m-nolabel::before, table.m-cards td.m-empty::before { display: none; }
  table.m-cards td.m-nolabel > div { flex-wrap: wrap; justify-content: flex-start !important; }
  table.m-cards td.m-empty { display: none; }
  /* Loading / empty / subtotal rows: keep them on one line */
  table.m-cards tr.m-span { display: flex; justify-content: space-between; gap: 12px; }
  table.m-cards tr.m-span td { padding-left: 0; }
  table.m-cards tr.m-span td::before { display: none; }
  table.m-cards tr.m-span td:only-child { flex: 1; text-align: center !important; }
}

/* ── Badges / Status pills ───────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge-green  { background: var(--success-dim); color: var(--success); }
.badge-blue   { background: var(--info-dim);    color: var(--info); }
.badge-red    { background: var(--danger-dim);  color: var(--danger); }
.badge-amber  { background: var(--warn-dim);    color: var(--warn); }
.badge-gray   { background: var(--bg-3);        color: var(--text-3); }
.badge-purple { background: var(--ai-dim);      color: var(--ai); }

/* Dot prefix */
.badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  background: var(--bg-2);
  color: var(--text-1);
  transition: background .1s, border-color .1s;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--bg-3); border-color: var(--border-3); text-decoration: none; color: var(--text-1); }
.btn svg { width: 14px; height: 14px; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #ffffff; }

.btn-success {
  background: var(--success-dim);
  border-color: var(--success);
  color: var(--success);
}
.btn-danger {
  background: var(--danger-dim);
  border-color: var(--danger);
  color: var(--danger);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.btn-ghost:hover { background: var(--bg-2); color: var(--text-1); border-color: var(--border-2); }

.btn-sm { padding: 4px 9px; font-size: 11.5px; }
.btn-lg { padding: 10px 16px; font-size: 13.5px; }

/* ── Filter bar / chips ──────────────────── */

.filterbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-1);
  font-size: 12.5px;
  overflow-x: auto;
  flex-shrink: 0;
}

.filter-chip, .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .1s;
}
.filter-chip:hover, .chip:hover { color: var(--text-1); border-color: var(--border-3); }
.filter-chip.active, .chip.active {
  background: var(--bg-3);
  border-color: var(--border-3);
  color: var(--text-1);
}

/* ── Forms ───────────────────────────────── */

.form-group { margin-bottom: 16px; }

label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  font-family: var(--font-mono);
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select, textarea {
  width: 100%;
  padding: 8px 11px;
  background: var(--bg-0);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-size: 13px;
  font-family: var(--font-sans);
  transition: border-color .15s;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}
input::placeholder, textarea::placeholder { color: var(--text-4); }
textarea { resize: vertical; min-height: 80px; }
select { appearance: none; }
/* iPhones zoom the page in when a field under 16px is focused, and leave it
   zoomed. 16px on phones stops that; !important beats the pages' inline sizes. */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* White inputs override (login page) */
.input-white input,
.input-white select {
  background: #fff;
  color: #111;
  border-color: #d0d5dd;
}
.input-white input:focus { border-color: var(--accent); }

/* ── Search bar ───────────────────────────── */

.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}
.search-bar input {
  flex: 1;
  max-width: 340px;
  padding: 7px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-size: 13px;
  width: auto;
}

/* ── Time clock ──────────────────────────── */

.clock-widget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 20px;
}

.clock-status { display: flex; align-items: center; gap: 14px; }

.clock-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.clock-dot.in  { background: var(--success); box-shadow: 0 0 8px var(--success); }
.clock-dot.out { background: var(--text-4); }

.clock-label { font-size: 14px; font-weight: 500; }
.clock-time  { font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-top: 3px; }

/* ── Modals ──────────────────────────────── */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding: 40px 16px;
  overflow-y: auto;
}

.modal {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 660px;
  box-shadow: var(--shadow-pop);
  position: relative;
  margin: auto;
}
.modal-lg { max-width: 900px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-1);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.modal-body { padding: 22px; }
.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border-1);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn-close {
  background: none; border: none;
  color: var(--text-4); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px;
  border-radius: var(--r-md);
}
.btn-close:hover { color: var(--text-1); background: var(--bg-3); }

/* ── Line items table ─────────────────────── */

.line-items-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.line-items-table th {
  color: var(--text-4);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-1);
  text-align: left;
  background: var(--bg-1);
}
.line-items-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-1); vertical-align: middle; }
.line-items-table input, .line-items-table select {
  padding: 5px 8px; font-size: 12.5px; width: 100%;
  background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); color: var(--text-1);
}
.line-items-table .btn-remove {
  background: none; border: none; color: var(--danger);
  cursor: pointer; font-size: 15px; padding: 2px 6px;
}

/* ── Detail view ──────────────────────────── */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.detail-label { font-size: 10.5px; color: var(--text-4); text-transform: uppercase; letter-spacing: .07em; font-family: var(--font-mono); margin-bottom: 3px; }
.detail-value { font-size: 13.5px; font-weight: 500; color: var(--text-1); }

/* ── Page tabs ────────────────────────────── */

.page-tabs {
  display: flex; gap: 2px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-1);
}
.page-tab {
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 500;
  cursor: pointer; border: none;
  background: none; color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .1s;
}
.page-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.page-tab:hover:not(.active) { color: var(--text-1); }

/* Phones: a row of four or more tabs becomes a dropdown (built by api.js, which
   clicks the matching tab, so each page's own tab handler still runs). */
.page-tabs-select { display: none; }
@media (max-width: 768px) {
  .page-tabs.has-select { display: none; }
  .page-tabs-select {
    display: block; margin-bottom: 16px;
    padding: 10px 36px 10px 12px;
    background: var(--bg-0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  }
}

/* ── Steps ────────────────────────────────── */

.steps { display: flex; align-items: center; gap: 0; margin-bottom: 22px; }
.step { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3); }
.step.active { color: var(--accent); }
.step.done   { color: var(--success); }
.step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-3); border: 1.5px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600;
}
.step.active .step-num { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.step.done   .step-num { background: var(--success); border-color: var(--success); color: #0d1f14; }
.step-line { flex: 1; height: 1px; background: var(--border-1); margin: 0 6px; min-width: 16px; }

/* ── Schedule week strip ──────────────────── */

.week-strip { display: flex; gap: 8px; margin-bottom: 20px; }
.day-btn {
  flex: 1; min-width: 0; padding: 12px 8px;
  background: var(--bg-1); border: 1px solid var(--border-1);
  border-radius: var(--r-md); text-align: center;
  cursor: pointer; transition: border-color .1s;
  font-size: 13px;
}
.day-btn:hover { border-color: var(--border-3); }
.day-btn.active { border-color: var(--accent); background: var(--accent-dim); }
.day-name { font-size: 10px; color: var(--text-4); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.day-num  { font-size: 18px; font-weight: 600; margin: 2px 0; letter-spacing: -0.01em; }
.day-count { font-size: 10px; color: var(--text-4); font-family: var(--font-mono); }

/* ── Error / success messages ─────────────── */

.error-msg {
  background: var(--danger-dim);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 9px 13px; border-radius: var(--r-md);
  font-size: 13px; display: none;
}
.success-msg {
  background: var(--success-dim);
  border: 1px solid var(--success);
  color: var(--success);
  padding: 9px 13px; border-radius: var(--r-md);
  font-size: 13px;
}

/* ── Spinner ──────────────────────────────── */

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ────────────────────────────────── */

.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--bg-3); border: 1px solid var(--border-2);
  color: var(--text-1); padding: 11px 16px;
  border-radius: var(--r-md); font-size: 13px;
  box-shadow: var(--shadow-pop);
  transform: translateY(12px); opacity: 0;
  transition: transform .2s, opacity .2s;
  z-index: 9999; max-width: 320px;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast-success { border-color: var(--success); }
.toast-error   { border-color: var(--danger); }

/* ── Responsive ───────────────────────────── */

.sidebar-backdrop { display: none; }
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  /* Tap-to-close backdrop behind the open drawer (sibling right after .sidebar) */
  .sidebar.open ~ .sidebar-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 99;
  }
  .main { margin-left: 0; }
  /* Status tabs (All / New / … / Archived) swipe sideways instead of pushing the
     page wider. Mobile-only: scroll clipping would shave the desktop underline.
     padding-bottom keeps the 2px active underline (margin-bottom:-1px) visible. */
  .page-tabs {
    overflow-x: auto; overflow-y: hidden; padding-bottom: 1px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .page-tabs::-webkit-scrollbar { display: none; }
  /* Search + filter dropdowns (Estimates, Invoices): search gets its own line,
     the dropdowns share the next one instead of running off the edge. */
  .search-bar:has(> select) { flex-wrap: wrap; }
  .search-bar:has(> select) > input { flex: 1 1 100%; max-width: none; }
  .search-bar > select { flex: 1 1 0; width: auto; min-width: 0; }
  .page-tab { flex: 0 0 auto; white-space: nowrap; }
  /* Overview's side-by-side cards (inline 1fr 1fr) stack on a phone. */
  .twin-grid { grid-template-columns: 1fr !important; }
  .twin-grid > * { min-width: 0; }
  /* Top bars that carry a search box / buttons (Build Manager, Reviews, Customers,
     Estimates, Parts Queue, Schedule) wrap them onto a second line instead of
     pushing them off-screen. A top bar that already fits looks the same. */
  .topbar {
    flex-wrap: wrap; height: auto; min-height: 50px;
    padding-top: 6px; padding-bottom: 6px; row-gap: 8px;
  }
  .topbar > div { flex-wrap: wrap; max-width: 100%; }
  .topbar input { flex: 1 1 160px; min-width: 0; } /* beats inline width:240px */
  /* Schedule's 7-day strip (inline repeat(7,1fr)) may shrink to fit the screen. */
  #week-strip { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .hamburger { display: block; }
  .page-content { padding: 16px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .clock-widget { flex-direction: column; align-items: flex-start; }
  .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  /* Smallest phones: slimmer day boxes so each day's label + date still fits. */
  #week-strip { gap: 4px !important; }
  #week-strip > div { padding: 10px 2px !important; }
}

/* ── New sidebar nav add-ons ──────────────── */

/* Nav count badge (leads, etc.) */
.nav-badge {
  margin-left: auto;
  background: var(--accent-dim);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px; text-align: center;
  display: none;
}
.nav-badge.visible,
.nav-badge:not(:empty) { display: inline-block; }

/* ── Kiosk ────────────────────────────────── */

.kiosk-wrap {
  min-height: 100vh;
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.kiosk-logo { margin-bottom: 32px; text-align: center; }
.kiosk-logo img { height: 44px; width: auto; }
.kiosk-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: 16px;
  padding: 32px;
  width: 100%; max-width: 420px;
  text-align: center;
}
.kiosk-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.kiosk-sub { font-size: 13px; color: var(--text-3); margin-bottom: 28px; }
.kiosk-input {
  width: 100%;
  background: var(--bg-0);
  border: 2px solid var(--border-2);
  border-radius: 10px;
  padding: 15px 18px;
  font-size: 22px; font-weight: 600;
  color: var(--text-1);
  text-align: center; letter-spacing: 0.15em;
  margin-bottom: 18px; outline: none;
  transition: border-color .2s;
  font-family: var(--font-mono);
}
.kiosk-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.kiosk-numpad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 18px;
}
.kiosk-key {
  background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: 10px; color: var(--text-1);
  font-size: 20px; font-weight: 600;
  height: 72px; cursor: pointer;
  transition: background .1s, transform .1s;
  display: flex; align-items: center; justify-content: center;
}
.kiosk-key:active { background: var(--accent-dim); border-color: var(--accent); transform: scale(0.95); }
.kiosk-key.zero { grid-column: 2; }
.kiosk-key.del { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }
.kiosk-btn-look {
  width: 100%; background: var(--accent);
  color: #ffffff; border: none; border-radius: 10px;
  padding: 15px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
.kiosk-btn-look:hover { opacity: .88; }
.kiosk-btn-look:disabled { opacity: .4; cursor: not-allowed; }
.kiosk-result { text-align: left; }
.kiosk-result-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.kiosk-result-sub { font-size: 13px; color: var(--text-3); margin-bottom: 18px; }
.kiosk-vehicle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: 10px; margin-bottom: 8px; cursor: pointer;
  transition: border-color .15s;
}
.kiosk-vehicle-row:hover { border-color: var(--accent); }
.kiosk-back {
  width: 100%; background: none;
  border: 1px solid var(--border-2); color: var(--text-3);
  border-radius: 8px; padding: 8px 14px;
  font-size: 13px; cursor: pointer; margin-top: 14px;
  transition: color .15s, border-color .15s;
}
.kiosk-back:hover { color: var(--text-1); border-color: var(--border-3); }

/* ── Settings page ────────────────────────── */

.settings-layout {
  display: grid; grid-template-columns: 190px 1fr;
  gap: 20px; align-items: start;
}
.settings-nav {
  background: var(--bg-1); border: 1px solid var(--border-1);
  border-radius: var(--r-lg); overflow: hidden;
}
.settings-nav-link {
  display: block; padding: 11px 14px;
  font-size: 13px; color: var(--text-3);
  border-bottom: 1px solid var(--border-1);
  cursor: pointer; transition: color .1s, background .1s;
  text-decoration: none;
}
.settings-nav-link:last-child { border-bottom: none; }
.settings-nav-link:hover { color: var(--text-1); background: var(--bg-2); text-decoration: none; }
.settings-nav-link.active { color: var(--accent); background: var(--accent-dim); }

/* ── Lead urgency indicator ───────────────── */

.lead-row-urgency {
  width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0;
}
.lead-row-urgency.high   { background: var(--danger); }
.lead-row-urgency.medium { background: var(--warn); }
.lead-row-urgency.low    { background: var(--success); }

/* ── Toggle switch ────────────────────────── */

.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--bg-4); border-radius: 22px;
  transition: .2s ease; border: 1px solid var(--border-2);
}
.toggle-slider:before {
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-3); left: 2px; top: 2px;
  transition: .2s ease;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent-dim); border-color: var(--accent); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); background: var(--accent); }

/* ── Login page ───────────────────────────── */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-0);
}

.login-box {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-pop);
}

.login-logo {
  text-align: center;
  margin-bottom: 24px;
}
.login-logo img {
  height: 40px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: inline-block;
}

.login-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 6px;
  color: var(--text-1);
}

.login-subtitle {
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  margin-bottom: 24px;
}

.login-submit {
  width: 100%;
  padding: 10px 16px;
  background: #0057ff;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: opacity .15s;
  margin-top: 4px;
}
.login-submit:hover { background: #0040cc; }
.login-submit:disabled { opacity: .5; cursor: not-allowed; }

.login-links {
  text-align: center;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--text-3);
}
.login-links a { color: var(--accent); }

/* ── Misc utilities ───────────────────────── */

.mono { font-family: var(--font-mono); }
.text-muted { color: var(--text-3); }
.text-dim   { color: var(--text-4); }

@media (max-width: 640px) {
  .detail-grid { grid-template-columns: 1fr; }
  .modal { margin: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .settings-layout { grid-template-columns: 1fr; }
}

/* PHONES: every form field at least 16px (2026-10-04). On iPhone, tapping a
   field under 16px zooms the whole page in, and it stays zoomed -- the
   site-test robot found 12-15px fields across the portal, the login page
   included (13px). Same fix the quote form got for its 15.2px fields.
   !important because several pages set the size inline or in their own
   <style>. Phones only: desktop sizes are untouched. */
@media (max-width: 768px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=reset]):not([type=file]):not([type=color]),
  select,
  textarea {
    font-size: 16px !important;
  }
}