/*
 * TheCarFile.com — site stylesheet.
 *
 * Tailwind utilities are built locally into backend/static/css/tailwind.css.
 * This file holds:
 *   1. Design tokens (CSS variables)
 *   2. Component classes used across the site (panel, badge, pill, meter, etc.)
 *   3. Page-level helpers
 *
 * All values match /design/mockup.html exactly.
 */

:root {
  --bg: #f6f4ef;
  --bg-2: #ece9e1;
  --panel: #ffffff;
  --ink: #0e1116;
  --ink-2: #2b3038;
  --muted: #5e6772;
  --line: #e2ddd1;
  --line-2: #d6cfbe;
  --brand: #0f4d3a;
  --brand-2: #133d33;
  --good: #1a7f53;
  --good-bg: #e3f3ea;
  --warn: #b87514;
  --warn-bg: #fbf0db;
  --bad: #b8311b;
  --bad-bg: #fbe5e0;
  --neutral: #3b4b66;
  --neutral-bg: #e7ecf3;
  --accent: #c8741a;
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.font-serif { font-family: Georgia, "Times New Roman", Times, serif; }

/* Surfaces */
.panel { background: var(--panel); border: 1px solid var(--line); }
.border-line { border-color: var(--line); }
.border-line-2 { border-color: var(--line-2); }

/* Text */
.text-muted { color: var(--muted); }
.text-brand { color: var(--brand); }
.text-good { color: var(--good); }
.text-warn { color: var(--warn); }
.text-bad { color: var(--bad); }
.text-neutral { color: var(--neutral); }

/* Backgrounds */
.bg-brand { background: var(--brand); }
.bg-good-bg { background: var(--good-bg); }
.bg-warn-bg { background: var(--warn-bg); }
.bg-bad-bg { background: var(--bad-bg); }
.bg-neutral-bg { background: var(--neutral-bg); }

/* Badges (mono uppercase chip with status dot) */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.badge-good    { background: var(--good-bg);    color: var(--good);    border: 1px solid #b8e0c8; }
.badge-warn    { background: var(--warn-bg);    color: var(--warn);    border: 1px solid #e9cb8c; }
.badge-bad     { background: var(--bad-bg);     color: var(--bad);     border: 1px solid #ebb8ad; }
.badge-neutral { background: var(--neutral-bg); color: var(--neutral); border: 1px solid #c5d0dc; }
.badge-brand   { background: #d6e4dd;           color: var(--brand);   border: 1px solid #a7c4b5; }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }

.section-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--brand);
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 12px; font-weight: 500;
  color: var(--ink-2); background: var(--panel);
  cursor: pointer; transition: all 0.15s;
}
.pill:hover  { border-color: var(--brand); color: var(--brand); }
.pill.active { background: var(--brand); color: white; border-color: var(--brand); }

.nav-link {
  color: var(--ink-2); font-weight: 500;
  transition: color 0.15s; font-size: 14px;
}
.nav-link:hover, .nav-link.active { color: var(--brand); }

.grade-circle {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 26px; font-weight: 700;
  border: 2px solid currentColor;
}

/* Data tables */
table.data-table { border-collapse: collapse; width: 100%; }
table.data-table th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); text-align: left;
  padding: 12px 14px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
table.data-table td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14px; vertical-align: middle;
}
table.data-table tr:last-child td { border-bottom: 0; }
table.data-table tr:hover td { background: #faf8f2; }

/* Bars and meters */
.bar { height: 6px; background: rgba(0, 0, 0, 0.06); border-radius: 999px; overflow: hidden; }
.bar > div { height: 100%; border-radius: 999px; }

.meter { display: flex; gap: 2px; }
.meter > div { flex: 1; height: 8px; border-radius: 2px; background: #e2ddd1; }
.meter > div.on-good { background: var(--good); }
.meter > div.on-warn { background: var(--warn); }
.meter > div.on-bad  { background: var(--bad); }

/* Hover-lift cards */
.hover-lift { transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 30, 40, 0.06);
  border-color: var(--line-2);
}

/* Misc components */
.ribbon {
  position: absolute; top: 14px; right: -8px;
  background: var(--accent); color: white;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; padding: 4px 10px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.checklist-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.checklist-item:last-child { border-bottom: 0; }
.check-box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--line-2); border-radius: 4px;
  flex-shrink: 0; background: white;
}
.stat-num { font-family: 'Newsreader', Georgia, serif; font-weight: 700; line-height: 1; }
.car-tile {
  background: linear-gradient(135deg, #ece9e1 0%, #d6cfbe 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: var(--brand); font-weight: 600;
}
.stamp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 2px solid currentColor; border-radius: 4px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  transform: rotate(-2deg);
}
.grade-tile {
  border-radius: 10px; padding: 16px;
  border: 1px solid var(--line); background: var(--panel);
}
.alt-card { transition: all 0.15s; }
.alt-card:hover { border-color: var(--brand); }