:root {
  --bg: #f6f7f9;
  --card-bg: #ffffff;
  --text: #1c1f26;
  --muted: #6b7280;
  --border: #e5e7eb;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --income: #16a34a;
  --expense: #dc2626;
  --radius: 10px;
}

[data-theme="dark"] {
  --bg: #14161b;
  --card-bg: #1c1f26;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #333844;
  --primary: #3b82f6;
  --primary-dark: #60a5fa;
  --income: #4ade80;
  --expense: #f87171;
}

/* A handful of colors below are hardcoded rather than driven by the variables above
   (mostly pill/badge/flash backgrounds, which use light tints that don't need to shift
   for most of the page) - override just those for dark mode so they stay legible on a
   dark background instead of looking like light-mode leftovers. */
[data-theme="dark"] .badge { background: #2a2e37; }
[data-theme="dark"] .btn-secondary:hover { background: #2a2e37; }
[data-theme="dark"] .pill-income { background: rgba(74, 222, 128, 0.15); }
[data-theme="dark"] .pill-expense { background: rgba(248, 113, 113, 0.15); }
[data-theme="dark"] .pill-neutral { background: #2a2e37; }
[data-theme="dark"] .pill-warn { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
[data-theme="dark"] .flash-success { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
[data-theme="dark"] .flash-error { background: rgba(248, 113, 113, 0.15); color: #f87171; }
[data-theme="dark"] .car-card:hover,
[data-theme="dark"] .card-link:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.35); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  color: var(--text);
}

.topbar-actions { display: flex; gap: 8px; }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

h2 { margin-top: 0; }
.subtitle { color: var(--muted); margin-top: -8px; }

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.card-label { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.card-value { font-size: 24px; font-weight: 700; }

.income { color: var(--income); }
.expense { color: var(--expense); }

.car-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.car-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.car-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-1px); }
.car-card.inactive { opacity: 0.6; }

.car-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.car-name { font-weight: 700; font-size: 16px; }
.car-meta { color: var(--muted); font-size: 13px; margin-bottom: 12px; }

.badge {
  font-size: 11px;
  background: #f3f4f6;
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 999px;
}

.car-numbers {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.car-numbers .label {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.car-owed {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

.empty-state { color: var(--muted); }

.btn {
  display: inline-block;
  background: var(--primary);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.btn:hover { background: var(--primary-dark); }

.btn-small { padding: 6px 12px; font-size: 13px; }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: #f3f4f6; }

.btn-danger { background: var(--expense); }
.btn-danger:hover { background: #b91c1c; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.page-header-actions { display: flex; gap: 8px; }

.form {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.form input, .form select, .form textarea {
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
}

.form .checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.type-toggle {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 16px;
}

.type-toggle legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; }

.radio {
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
  font-weight: 400 !important;
}

.form-actions { display: flex; gap: 10px; margin-top: 6px; }

.danger-zone { margin-top: 24px; max-width: 480px; }

.txn-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.txn-table th, .txn-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  text-align: left;
}

.txn-table th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.txn-table .right { text-align: right; }
.txn-table .notes { color: var(--muted); max-width: 220px; }

.pill {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: capitalize;
}
.pill-income { background: #dcfce7; color: var(--income); }
.pill-expense { background: #fee2e2; color: var(--expense); }

.row-actions { display: flex; gap: 10px; white-space: nowrap; }
.row-actions a { color: var(--primary); text-decoration: none; font-size: 13px; }
.inline-form { display: inline; }

.link-danger {
  background: none;
  border: none;
  color: var(--expense);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  font-family: inherit;
}

.link-primary {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  font-family: inherit;
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card-link:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-1px); }

.flashes { margin-bottom: 16px; }

.flash {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 8px;
}
.flash-success { background: #dcfce7; color: #166534; }
.flash-error { background: #fee2e2; color: #991b1b; }

.import-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 520px;
}

.import-box p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.import-box ol { color: var(--muted); font-size: 14px; padding-left: 20px; }

.file-input {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  margin: 16px 0;
}

.mapping-list {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.mapping-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.mapping-row:last-child { border-bottom: none; }

.mapping-row select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}

.mapping-vehicle { font-weight: 600; font-size: 14px; }
.mapping-vehicle .sub { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }

.already-linked {
  font-size: 13px;
  color: var(--muted);
  padding: 4px 0;
}

.import-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.import-toolbar .select-links a {
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  margin-left: 12px;
}

.pill-neutral { background: #f3f4f6; color: var(--muted); }
.pill-warn { background: #fef3c7; color: #92400e; }

.chart {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 12px;
  margin-bottom: 24px;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 220px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

.chart-month {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}

.chart-bar-pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 100%;
  width: 100%;
}

.chart-bar {
  width: 40%;
  max-width: 16px;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
}

.chart-bar.income-bar { background: var(--income); }
.chart-bar.expense-bar { background: var(--expense); }

.chart-label {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}

.chart-legend {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
}

.legend-item { display: flex; align-items: center; }

.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
}

.version-tag {
  position: fixed;
  bottom: 10px;
  right: 12px;
  font-size: 11px;
  color: var(--muted);
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 6px;
  opacity: 0.85;
  z-index: 10;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text);
}

/* Tables don't reflow to a narrow screen on their own (fixed column count), so left
   unchecked they force the whole page wider than the phone's viewport - Safari then
   zooms the entire page out to fit, which is what makes text everywhere look tiny and
   spread out even though nothing is actually "wrong" with any individual element.
   Scoping the horizontal scroll to just the table (instead of the whole page) fixes
   that: the page itself stays a normal phone width, and only wide tables scroll. */
@media (max-width: 720px) {
  .container { padding: 16px; }

  .topbar {
    flex-wrap: wrap;
    padding: 12px 16px;
  }

  .nav-toggle { display: inline-block; }

  .topbar-actions {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
  }

  .topbar-actions.open { display: flex; }

  .topbar-actions .btn,
  .topbar-actions .inline-form,
  .topbar-actions .inline-form .btn {
    width: 100%;
  }

  .topbar-actions .btn { text-align: center; }

  .txn-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .txn-table th, .txn-table td { white-space: nowrap; }
  .txn-table .notes { white-space: normal; min-width: 160px; }

  .page-header-actions { width: 100%; }
  .page-header-actions .btn { flex: 1; text-align: center; }

  .mapping-row { flex-wrap: wrap; }
}