/* =============================================================
   style.css — ports V9's "PR4 Flame Red + Light Mode" palette
   (config.py) to CSS custom properties, so the web version keeps the
   same look as the desktop app. Re-skin by editing the variables below
   (and mirroring the change in config.py, which is the source of truth).
   ============================================================= */
:root {
  --c-black: #F2F2F2;      /* app background */
  --c-surface: #FFFFFF;    /* raised panels */
  --c-surface2: #EBEBEB;   /* input fill */
  --c-surface3: #DCDCDC;   /* hover/active surface */
  --c-flame-red: #CC1020;  /* primary accent */
  --c-red-hover: #DF1525;
  --c-red-dark: #920B15;
  --c-text: #1A1A1A;
  --c-text-dim: #777777;
  --c-border: #C8C8C8;
  --c-white: #FFFFFF;
  --c-row-odd: #FFFFFF;
  --c-row-even: #F5F5F5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--c-black);
  color: var(--c-text);
}

a { color: var(--c-flame-red); }

/* ── Top nav ─────────────────────────────────────────────────────────── */
.topnav {
  display: flex;
  align-items: center;
  background: var(--c-surface);
  border-bottom: 2px solid var(--c-flame-red);
  padding: 0 8px;
}

.topnav .brand {
  font-weight: bold;
  color: var(--c-flame-red);
  padding: 12px 16px;
  white-space: nowrap;
}

.topnav a.tab {
  padding: 14px 16px;
  text-decoration: none;
  color: var(--c-text-dim);
  font-size: 14px;
}

.topnav a.tab.active {
  color: var(--c-flame-red);
  font-weight: bold;
}

.topnav .spacer { flex: 1; }

.topnav a.logout {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--c-text-dim);
  text-decoration: none;
}

/* ── Overdue reminders banner ───────────────────────────────────────── */
.overdue-banner {
  background: #FFECEC;
  color: var(--c-red-dark);
  padding: 8px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--c-flame-red);
}

.overdue-banner strong { display: block; margin-bottom: 4px; }

/* ── Active Vehicle bar ──────────────────────────────────────────────── */
.active-vehicle-bar {
  background: #EAF7EE;
  color: #1B5E20;
  padding: 6px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--c-border);
}

.active-vehicle-bar a { margin-left: 8px; }

.active-vehicle-bar-warn {
  background: #FFF8E1;
  color: #7B5800;
}

/* ── Content area ────────────────────────────────────────────────────── */
.content {
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}

.panel h2 {
  margin-top: 0;
  font-size: 16px;
  color: var(--c-text);
}

/* ── Tables ──────────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table th {
  text-align: left;
  padding: 8px;
  border-bottom: 2px solid var(--c-border);
  color: var(--c-text-dim);
  font-weight: 600;
}

table td {
  padding: 8px;
  border-bottom: 1px solid var(--c-border);
}

table tbody tr:nth-child(odd)  { background: var(--c-row-odd); }
table tbody tr:nth-child(even) { background: var(--c-row-even); }

/* ── Forms / buttons ─────────────────────────────────────────────────── */
input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface2);
  color: var(--c-text);
}

label {
  display: block;
  font-size: 12px;
  color: var(--c-text-dim);
  margin: 8px 0 2px;
}

button, .btn {
  background: var(--c-flame-red);
  color: var(--c-white);
  border: none;
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
}

button:hover, .btn:hover { background: var(--c-red-hover); }

.flash { padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; font-size: 13px; }
.flash-error   { background: #FFECEC; color: var(--c-red-dark); }
.flash-success { background: #EAF7EE; color: #1B5E20; }

.stub-note {
  color: var(--c-text-dim);
  font-size: 13px;
}

.quote-of-the-day {
  margin: 0;
  padding: 4px 16px;
  border-left: 4px solid var(--c-flame-red);
  font-size: 15px;
  font-style: italic;
  color: var(--c-text);
}

/* ── Two-column form+table layouts (Vehicles, Service Log, Parts, Reminders) */
.two-col {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 2fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.form-grid .full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; }
.field input, .field select, .field textarea { width: 100%; }

textarea { resize: vertical; }

/* ── Calendar-button date fields (see initDatePicker in site.js) ───────── */
.date-field { position: relative; display: flex; align-items: center; gap: 4px; width: 100%; }
.date-field > input:not(.date-field-native) { flex: 1; min-width: 0; }
.date-field-btn {
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1;
}
/* Specificity note: ".field input" (0,1,1) would otherwise beat a plain
   ".date-field-native" (0,1,0) and force this back to width:100% — the
   ".date-field input.date-field-native" form here (0,2,1) wins instead. */
.date-field input.date-field-native {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.btn-row { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

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

.btn-danger { background: #920B15; }
.btn-danger:hover { background: #b3121d; }

.btn-sm { padding: 4px 8px; font-size: 12px; }

.subpanel {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 10px;
  margin-top: 12px;
  background: var(--c-black);
}
.subpanel h3 { margin: 0 0 8px; font-size: 13px; color: var(--c-text-dim); text-transform: uppercase; }

.row-list { list-style: none; margin: 0 0 8px; padding: 0; }
.row-list li {
  display: flex; gap: 6px; align-items: center;
  padding: 4px 0; border-bottom: 1px solid var(--c-border);
}
.row-list li input { flex: 1; }

table tr.clickable { cursor: pointer; }
table tr.selected-row { outline: 2px solid var(--c-flame-red); outline-offset: -2px; }

.scroll-table { max-height: 520px; overflow-y: auto; }

/* ── Parts Warehouse: pin the two-col row to a viewport-relative height and
   let EACH panel scroll independently (its own scrollbar), rather than
   capping just the inner table. This way the parts list always fills the
   full available height next to the form -- even when the form panel grows
   tall (e.g. the Quick Create Service Record section appears) -- instead of
   being stuck at a small fixed size with empty space beside it. */
.parts-two-col {
  align-items: stretch;
  height: calc(100vh - 220px);
}
.parts-two-col > .panel {
  overflow-y: auto;
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .parts-two-col { height: auto; align-items: normal; }
  .parts-two-col > .panel { overflow-y: visible; }
}

.hint { color: var(--c-text-dim); font-size: 12px; margin: 2px 0 8px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-open { background: #FFECEC; color: var(--c-red-dark); }
.badge-done { background: #EAF7EE; color: #1B5E20; }
.badge-admin { background: #E8EAF6; color: #283593; margin-right: 4px; }
.badge-locked { background: #FFF3CD; color: #7B5800; margin-left: 4px; }

/* ── Admin tab ───────────────────────────────────────────────────────── */
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-actions form { margin: 0; display: inline; }

.impersonation-bar {
  background: #FFF3CD;
  color: #7B5800;
  padding: 8px 16px;
  font-size: 13px;
  border-bottom: 2px solid var(--c-flame-red);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.impersonation-bar form { margin: 0; }