/*
 * app.css — Global visual tokens, resets, typography, and shared utilities
 * Imported first; layout.css, forms.css, and tables.css build on top of these.
 *
 * Color palette: warm off-white background, slate-grey type, teal accent.
 * Optimized for readability on mobile screens in bright outdoor conditions
 * (scouts use this in parking lots).
 */

/* ── Custom Properties (design tokens) ─────────────────────────────────────── */
:root {
  /* Colors */
  --color-bg:           #f8f7f5;
  --color-surface:      #ffffff;
  --color-surface-alt:  #f0eeeb;
  --color-border:       #dcdad6;
  --color-border-focus: #2d7d6f;

  --color-text:         #1e1e1e;
  --color-text-muted:   #6b6b6b;
  --color-text-inverse: #ffffff;

  --color-primary:      #2d7d6f;   /* teal */
  --color-primary-dark: #215c52;
  --color-primary-light:#e6f4f1;

  --color-accent:       #d97706;   /* amber — damage badges, warnings */
  --color-accent-light: #fef3c7;

  --color-danger:       #dc2626;
  --color-danger-light: #fee2e2;
  --color-success:      #16a34a;
  --color-success-light:#dcfce7;
  --color-warning:      #d97706;
  --color-warning-light:#fef3c7;
  --color-info:         #2563eb;
  --color-info-light:   #dbeafe;

  /* Status badge colors */
  --status-new:           #6b7280;
  --status-contacted:     #2563eb;
  --status-interested:    #16a34a;
  --status-not-interested:#dc2626;
  --status-undecided:     #d97706;
  --status-unknown:       #6b7280;
  --status-in-repair:     #7c3aed;
  --status-completed:     #0f766e;

  /* Typography */
  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, "Cascadia Code", "Fira Code", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-bold:   700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-full:9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.10);

  /* Transitions */
  --transition-fast:   120ms ease;
  --transition-normal: 200ms ease;

  /* Layout */
  --container-max: 960px;
  --sticky-bottom: env(safe-area-inset-bottom, 0px);
}

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

/*
 * The [hidden] attribute must beat any class that sets `display`.
 *
 * Browsers apply `[hidden] { display: none }` from the user-agent stylesheet at
 * very low priority, so ANY author class selector overrides it. That silently
 * broke the follow-up page: `.loading-state { display: flex }` kept the
 * "Loading leads..." row visible even though the JS had correctly set
 * `element.hidden = true`.
 *
 * Seventeen elements across seven page templates toggle visibility this way,
 * so this is fixed once here rather than per-component. !important is
 * warranted: the whole point is that this rule must not lose to anything.
 */
[hidden] { display: none !important; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100dvh;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: underline; }
a:hover { color: var(--color-primary-dark); }
button { cursor: pointer; font: inherit; }
ul, ol { list-style: none; }
fieldset { border: none; }

/* ── Typography ─────────────────────────────────────────────────────────────── */
h1 { font-size: var(--text-2xl); font-weight: var(--font-bold); line-height: var(--leading-tight); }
h2 { font-size: var(--text-xl);  font-weight: var(--font-bold); line-height: var(--leading-tight); }
h3 { font-size: var(--text-lg);  font-weight: var(--font-medium); }
h4 { font-size: var(--text-base);font-weight: var(--font-medium); }

p + p { margin-top: var(--sp-3); }

.text-muted     { color: var(--color-text-muted); font-size: var(--text-sm); }
.text-sm        { font-size: var(--text-sm); }
.text-xs        { font-size: var(--text-xs); }
.text-bold      { font-weight: var(--font-bold); }

/* ── Utility ────────────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.page-body    { padding-block: var(--sp-6); }
.page-title   { margin-bottom: var(--sp-2); }
.page-subtitle{ color: var(--color-text-muted); margin-bottom: var(--sp-6); }

.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--sp-8) 0;
  font-style: italic;
}

.loading-state {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--color-text-muted); padding: var(--sp-6) 0;
}

.error-state {
  color: var(--color-danger);
  padding: var(--sp-4) 0;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), opacity var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }

.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary-light); }

.btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}
.btn-danger.btn-outline {
  background: transparent;
  color: var(--color-danger);
}
.btn-danger.btn-outline:hover { background: var(--color-danger-light); }

.btn-sm  { padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); }
.btn-block{ width: 100%; }
.btn-link { background: none; border: none; color: var(--color-primary); padding: 0;
            text-decoration: underline; font: inherit; }

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: capitalize;
  letter-spacing: .03em;
}
.status-badge--lg { font-size: var(--text-sm); padding: var(--sp-2) var(--sp-4); }

.status-badge--new            { background:#f3f4f6; color:var(--status-new); }
.status-badge--contacted      { background:var(--color-info-light); color:var(--status-contacted); }
.status-badge--interested     { background:var(--color-success-light); color:var(--status-interested); }
.status-badge--not_interested,.status-badge--not-interested
                              { background:var(--color-danger-light); color:var(--status-not-interested); }
.status-badge--undecided      { background:var(--color-warning-light); color:var(--status-undecided); }
.status-badge--unknown        { background:#f3f4f6; color:var(--status-unknown); }
.status-badge--in_repair,.status-badge--in-repair
                              { background:#f5f3ff; color:var(--status-in-repair); }
.status-badge--completed      { background:var(--color-primary-light); color:var(--status-completed); }

/* Damage badges */
.damage-badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.damage-badge--hail     { background:#dbeafe; color:#1d4ed8; }
.damage-badge--accident { background:var(--color-accent-light); color:#92400e; }

/* ── Spinner ────────────────────────────────────────────────────────────────── */
.spinner,
.search-spinner::after {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Flash messages ─────────────────────────────────────────────────────────── */
.flash-message {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-left: 4px solid;
  font-size: var(--text-sm);
}
.flash-message--success { background: var(--color-success-light); border-color: var(--color-success); color: #14532d; }
.flash-message--error   { background: var(--color-danger-light);  border-color: var(--color-danger);  color: #7f1d1d; }
.flash-message--info    { background: var(--color-info-light);    border-color: var(--color-info);    color: #1e3a8a; }
.flash-message--warning { background: var(--color-warning-light); border-color: var(--color-warning); color: #78350f; }

.flash-dismiss {
  background: none; border: none; font-size: var(--text-lg); line-height: 1;
  color: inherit; opacity: .6; padding: 0 var(--sp-1);
}
.flash-dismiss:hover { opacity: 1; }

/* ── Plate badge ────────────────────────────────────────────────────────────── */
.plate-badge {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  letter-spacing: .08em;
  background: var(--color-text);
  color: var(--color-text-inverse);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
}
.plate-badge--lg { font-size: var(--text-xl); padding: var(--sp-2) var(--sp-4); }
.plate-state { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: var(--sp-1); }

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */
.breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-4);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }

/* ── Section title ──────────────────────────────────────────────────────────── */
.section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--color-border);
}

/* ── Page header ────────────────────────────────────────────────────────────── */
.page-header { margin-bottom: var(--sp-6); }
.page-header--with-action {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}

/* ── Vehicle info panel (post plate-lookup) ─────────────────────────────────── */
.vehicle-info-panel {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-focus);
}
.vehicle-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--sp-3);
}
.vehicle-info-item { display: flex; flex-direction: column; gap: 2px; }
.vi-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.vi-value { font-weight: var(--font-medium); }
.vehicle-info-note { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--sp-3); }

/* ── Shop detail card ───────────────────────────────────────────────────────── */
.shop-detail-card {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ── Homepage ───────────────────────────────────────────────────────────────── */
.page-hero {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--sp-12) var(--sp-4);
  text-align: center;
}
.hero-title    { font-size: var(--text-3xl); margin-bottom: var(--sp-4); }
.hero-subtitle { font-size: var(--text-lg); opacity: .88; max-width: 540px; margin-inline: auto; }

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.home-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.home-card-icon  { font-size: 2rem; margin-bottom: var(--sp-3); }
.home-card-title { margin-bottom: var(--sp-2); }
.home-card-body  { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

.home-cta { text-align: center; padding: var(--sp-6); }
.home-cta-text { font-size: var(--text-lg); color: var(--color-text-muted); }

/* ── Auth pages ─────────────────────────────────────────────────────────────── */
.auth-shell {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  background: var(--color-bg);
}
.auth-logo {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  font-size: var(--text-xl); font-weight: var(--font-bold);
}
.auth-logo-icon { font-size: 1.75rem; }

.auth-card {
  width: 100%; max-width: 480px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-md);
}

.auth-error-page { text-align: center; }
.auth-error-icon { font-size: 3rem; margin-bottom: var(--sp-4); }
.auth-error-title { margin-bottom: var(--sp-4); }
.auth-error-body  { color: var(--color-text-muted); margin-bottom: var(--sp-4); }
.auth-error-tips  { list-style: disc; text-align: left; color: var(--color-text-muted);
                    font-size: var(--text-sm); padding-left: var(--sp-6); margin-bottom: var(--sp-6); }
.auth-error-tips li { margin-bottom: var(--sp-2); }

/* ── Consent page ───────────────────────────────────────────────────────────── */
.consent-title    { margin-bottom: var(--sp-4); }
.consent-greeting { margin-bottom: var(--sp-4); }
.consent-notice   {
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-6);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.consent-checkboxes { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.consent-error { color: var(--color-danger); font-size: var(--text-sm); margin-bottom: var(--sp-4); display: block; }

/* ── Upload zone ────────────────────────────────────────────────────────────── */
.upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  cursor: pointer;
  background: var(--color-surface-alt);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  text-align: center;
}
.upload-zone:hover, .upload-zone:focus { border-color: var(--color-primary); background: var(--color-primary-light); outline: none; }
.upload-icon  { font-size: 2.5rem; }
.upload-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.upload-label small { display: block; margin-top: var(--sp-1); }
.upload-preview {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4);
}
.upload-preview-item {
  width: 80px; height: 80px; border-radius: var(--radius-md);
  object-fit: cover; border: 2px solid var(--color-border);
}
.upload-page-header { margin-bottom: var(--sp-6); }
.upload-page-actions { margin-top: var(--sp-6); display: flex; justify-content: center; }

/* ── Gallery ────────────────────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.gallery-item      { display: flex; flex-direction: column; gap: var(--sp-2); }
.gallery-thumb-link{ display: block; border-radius: var(--radius-md); overflow: hidden; }
.gallery-thumb     { width: 100%; aspect-ratio: 1; object-fit: cover;
                     transition: opacity var(--transition-fast); }
.gallery-thumb:hover{ opacity: .88; }
.gallery-caption   { font-size: var(--text-xs); color: var(--color-text-muted); }
.media-type-badge  { display: block; font-weight: var(--font-medium); text-transform: capitalize; }
.media-caption-text{ display: block; }
.media-date        { display: block; opacity: .7; }

/* ── Lead header ────────────────────────────────────────────────────────────── */
.lead-header {
  display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.lead-header-plate  { flex-shrink: 0; }
.lead-header-info   { flex: 1; min-width: 0; }
.lead-header-status { flex-shrink: 0; }
.lead-vehicle       { font-weight: var(--font-medium); margin-bottom: var(--sp-2); }
.lead-meta-small    { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--sp-2); }

/* ── Lead tabs ──────────────────────────────────────────────────────────────── */
.lead-tabs {
  display: flex; gap: var(--sp-1); flex-wrap: wrap;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--sp-6);
}
.lead-tab {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--text-sm); font-weight: var(--font-medium);
  text-decoration: none; color: var(--color-text-muted);
  border: 1px solid transparent; border-bottom: none;
  transition: color var(--transition-fast), background var(--transition-fast);
  margin-bottom: -2px;
}
.lead-tab:hover { color: var(--color-primary); background: var(--color-primary-light); }
.lead-tab--active {
  color: var(--color-primary);
  background: var(--color-surface);
  border-color: var(--color-border);
  border-bottom-color: var(--color-surface);
}