/* Towbook Android Styleguide — chrome */

:root {
  /* Towbook Android visual tokens (used across components). Most pulled from foundations.css; some Android-specific additions. */
  --tb-primary: var(--blue-10);          /* #0771f2 */
  --tb-primary-press: var(--blue-11);    /* #0059d6 */
  --tb-primary-hover: var(--blue-9);     /* #0a8dff */
  --tb-on-primary: var(--white);

  --tb-surface: #ffffff;
  --tb-surface-1: #fafbfc;          /* dispatch list bg */
  --tb-surface-2: #f4f5f7;          /* drawer base */
  --tb-surface-container: var(--slate-2);
  --tb-on-surface: var(--slate-12);
  --tb-on-surface-muted: var(--slate-11);
  --tb-on-surface-faint: var(--slate-10);
  --tb-divider: var(--slate-a4);
  --tb-border: var(--slate-a6);
  --tb-border-strong: var(--slate-a7);

  /* Status palette (Towbook ops semantics) */
  --tb-status-waiting:  var(--amber-10);   /* #ffa01c */
  --tb-status-waiting-bg: #fff5e0;
  --tb-status-enroute:  var(--blue-10);
  --tb-status-enroute-bg: var(--blue-3);
  --tb-status-onscene:  var(--green-10);
  --tb-status-onscene-bg: var(--green-3);
  --tb-status-towing:   #6b3fd4;
  --tb-status-towing-bg: #efe9ff;
  --tb-status-completed: var(--slate-10);
  --tb-status-completed-bg: var(--slate-3);
  --tb-status-canceled: var(--red-10);
  --tb-status-canceled-bg: var(--red-3);

  /* Android density (comfortable) */
  --tb-row-h: 56px;             /* list row */
  --tb-row-h-compact: 48px;
  --tb-row-h-2line: 72px;
  --tb-row-h-3line: 88px;
  --tb-touch: 48px;             /* min touch target */
  --tb-app-bar-h: 56px;
  --tb-tabs-h: 48px;
  --tb-fab-size: 56px;
  --tb-fab-extended-h: 56px;

  /* Android-flavored radii (slightly tighter than web defaults) */
  --tb-r-button: 100px;     /* M3 — pill */
  --tb-r-card: 16px;
  --tb-r-sheet: 28px;       /* top corners only */
  --tb-r-input: 4px;        /* outlined text field */
  --tb-r-chip: 8px;
  --tb-r-pill: 999px;

  /* Elevation tuned for mobile (less ambient than web shadow-soft) */
  --tb-elev-1: 0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.04);
  --tb-elev-2: 0 2px 4px rgba(16,24,40,0.06), 0 4px 8px rgba(16,24,40,0.05);
  --tb-elev-3: 0 4px 8px rgba(16,24,40,0.07), 0 12px 24px rgba(16,24,40,0.08);
  --tb-elev-fab: 0 6px 14px rgba(7,113,242,0.32), 0 2px 4px rgba(16,24,40,0.10);
}

[data-theme="dark"] {
  --tb-surface: #15171a;
  --tb-surface-1: #0f1114;
  --tb-surface-2: #1c1f23;
  --tb-surface-container: #1c1f23;
  --tb-on-surface: #f5f6f8;
  --tb-on-surface-muted: rgba(255,255,255,0.72);
  --tb-on-surface-faint: rgba(255,255,255,0.50);
  --tb-divider: rgba(255,255,255,0.08);
  --tb-border: rgba(255,255,255,0.12);
  --tb-border-strong: rgba(255,255,255,0.18);

  --tb-status-waiting-bg: rgba(255,160,28,0.16);
  --tb-status-enroute-bg: rgba(7,113,242,0.18);
  --tb-status-onscene-bg: rgba(43,154,102,0.18);
  --tb-status-towing-bg:  rgba(107,63,212,0.20);
  --tb-status-completed-bg: rgba(255,255,255,0.08);
  --tb-status-canceled-bg: rgba(220,62,66,0.18);

  --tb-elev-1: 0 1px 2px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
  --tb-elev-2: 0 2px 4px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.4);
  --tb-elev-3: 0 4px 8px rgba(0,0,0,0.5), 0 12px 24px rgba(0,0,0,0.45);
}

/* ─── Page chrome ────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #f4f5f7;
  color: var(--slate-12);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
[data-theme="dark"] body {
  background: #0a0b0d;
  color: #f5f6f8;
}

.app {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--slate-12);
  color: rgba(255,255,255,0.92);
  padding: 20px 0;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.06);
}
[data-theme="dark"] .sidebar { background: #06070a; }
.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 20px 24px;
}
.sidebar-brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #0a8dff, #0059d6);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em;
}
.sidebar-brand-name {
  display: flex; flex-direction: column; line-height: 1.2;
}
.sidebar-brand-name b { color: white; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.sidebar-brand-name span { color: rgba(255,255,255,0.50); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }

.sidebar-section { padding: 16px 20px 4px; }
.sidebar-section-label {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.40);
}
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  font-size: 13.5px; line-height: 1.4;
  color: rgba(255,255,255,0.74);
  cursor: pointer;
  border-left: 2px solid transparent;
  user-select: none;
}
.sidebar-link:hover { background: rgba(255,255,255,0.04); color: white; }
.sidebar-link.active {
  background: rgba(10,141,255,0.12);
  color: white;
  border-left-color: #0a8dff;
}
.sidebar-link-num {
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.30);
  font-size: 11px;
  width: 22px;
}

.main { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(244,245,247,0.85);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--slate-a4);
  padding: 12px 32px;
  display: flex; align-items: center; gap: 16px;
}
[data-theme="dark"] .topbar { background: rgba(10,11,13,0.85); border-bottom-color: rgba(255,255,255,0.06); }
.topbar-title { font-size: 14px; font-weight: 500; color: var(--slate-12); }
[data-theme="dark"] .topbar-title { color: #f5f6f8; }
.topbar-spacer { flex: 1; }
.topbar-control {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--slate-a6);
  background: white;
  color: var(--slate-12);
  cursor: pointer; user-select: none;
}
[data-theme="dark"] .topbar-control { background: #15171a; color: #f5f6f8; border-color: rgba(255,255,255,0.12); }
.topbar-control:hover { background: var(--slate-2); }
[data-theme="dark"] .topbar-control:hover { background: #1c1f23; }
.topbar-segment {
  display: inline-flex; padding: 3px;
  border-radius: 999px;
  background: var(--slate-3);
  border: 1px solid var(--slate-a4);
}
[data-theme="dark"] .topbar-segment { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.06); }
.topbar-segment button {
  border: 0; background: transparent;
  padding: 4px 12px; font-size: 12px; font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  color: var(--slate-11);
}
.topbar-segment button.active {
  background: white;
  color: var(--slate-12);
  box-shadow: var(--tb-elev-1);
}
[data-theme="dark"] .topbar-segment button.active { background: #1c1f23; color: #f5f6f8; }

.page { padding: 40px 32px 80px; max-width: 1280px; }
.page-header { margin-bottom: 32px; }
.page-eyebrow {
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--slate-10);
  margin-bottom: 8px;
}
.page-title { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 12px; }
[data-theme="dark"] .page-title { color: #f5f6f8; }
.page-lede { font-size: 16px; line-height: 1.55; color: var(--slate-11); max-width: 720px; margin: 0; }
[data-theme="dark"] .page-lede { color: rgba(255,255,255,0.66); }

.section { margin-top: 56px; }
.section-h {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue-11);
  margin: 0 0 8px;
}
[data-theme="dark"] .section-h { color: #5dabef; }
.section-title {
  font-size: 22px; font-weight: 600; letter-spacing: -0.015em;
  margin: 0 0 6px; line-height: 1.2;
}
[data-theme="dark"] .section-title { color: #f5f6f8; }
.section-desc { font-size: 14px; line-height: 1.55; color: var(--slate-11); margin: 0 0 24px; max-width: 680px; }
[data-theme="dark"] .section-desc { color: rgba(255,255,255,0.65); }

.examples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 28px;
  align-items: start;
}
.examples.tight { gap: 20px; }
.example {
  background: white;
  border-radius: 18px;
  border: 1px solid var(--slate-a4);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
[data-theme="dark"] .example { background: #15171a; border-color: rgba(255,255,255,0.08); }
.example-head { display: flex; align-items: baseline; gap: 12px; }
.example-title { font-size: 14px; font-weight: 600; color: var(--slate-12); }
[data-theme="dark"] .example-title { color: #f5f6f8; }
.example-desc { font-size: 12.5px; color: var(--slate-11); line-height: 1.45; }
[data-theme="dark"] .example-desc { color: rgba(255,255,255,0.62); }
.example-body { display: flex; flex-direction: column; gap: 12px; }

.swatch-grid { display: grid; gap: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--slate-3); color: var(--slate-11);
}
[data-theme="dark"] .tag { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }

.note {
  font-size: 12px; color: var(--slate-11); line-height: 1.5;
  padding: 10px 12px;
  border-left: 2px solid var(--blue-10);
  background: var(--blue-3);
  border-radius: 0 8px 8px 0;
}
[data-theme="dark"] .note {
  background: rgba(7,113,242,0.10);
  color: rgba(255,255,255,0.78);
}

.kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--slate-3);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--slate-12);
}
[data-theme="dark"] .kbd { background: rgba(255,255,255,0.08); color: #f5f6f8; }

/* layout helpers */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.between { justify-content: space-between; }