/* ==========================================================================
   BRAND THEME — change colors here and the whole app (client page + dashboard) follows.
   Matched to thevehiclecheckpros.com (values taken from the site's own stylesheet):
   deep navy + gold accent. Gold is a light color, so text on gold uses navy, not white.
   ========================================================================== */
:root {
  --brand-navy: #0F1729;       /* headers, primary text on light */
  --brand-navy-2: #182238;     /* hover / gradients */
  --brand-accent: #E7B008;     /* main buttons, highlights (site "gold") */
  --brand-accent-dark: #C79607; /* hover on gold (site "gold-deep") */
  --brand-accent-soft: #FDF6E3;
  --brand-accent-text: #8A6A05; /* gold-toned text that stays readable on white */
  --on-accent: #0F1729;        /* text/icons placed on gold */

  --ink: #0F1729;
  --muted: #4A5570;
  --line: #E1E6F0;
  --bg: #F6F8FC;
  --surface: #FFFFFF;

  --ok: #1E8E5A;   --ok-soft: #E7F6EE;
  --warn: #B7791F; --warn-soft: #FFF6E0;
  --bad: #D0342C;  --bad-soft: #FDECEC;
  --info: #2B6CB0; --info-soft: #E8F1FB;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(15, 23, 41, .06), 0 8px 24px rgba(15, 23, 41, .08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 16px; }
img { max-width: 100%; }
a { color: var(--brand-navy-2); }
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.01em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 15px; line-height: 1;
  padding: 12px 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .05s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand-accent); color: var(--on-accent); }
.btn-primary .spinner { border-color: rgba(15, 23, 41, .25); border-top-color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--brand-accent-dark); }
.btn-navy { background: var(--brand-navy); color: #fff; }
.btn-navy:hover:not(:disabled) { background: var(--brand-navy-2); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { border-color: #c5ccd6; background: #fafbfc; }
.btn-danger { background: var(--surface); color: var(--bad); border-color: #f1c4c4; }
.btn-danger:hover:not(:disabled) { background: var(--bad-soft); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 22px; font-size: 17px; border-radius: 11px; }
.btn-sm { padding: 8px 12px; font-size: 13px; }

label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface);
  border: 1px solid #cfd6df; border-radius: var(--radius-sm); padding: 11px 12px;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible {
  outline: none; border-color: var(--brand-navy-2); box-shadow: 0 0 0 3px rgba(231, 176, 8, .35);
}

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-pending   { background: var(--warn-soft); color: var(--warn); }
.badge-confirmed { background: var(--info-soft); color: var(--info); }
.badge-charged   { background: var(--ok-soft);   color: var(--ok); }
.badge-cancelled { background: #EEF0F3;          color: #6B7480; }
.badge-charging, .badge-confirming { background: var(--info-soft); color: var(--info); }

.alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; }
.alert-error { background: var(--bad-soft); color: var(--bad); }
.alert-ok { background: var(--ok-soft); color: var(--ok); }
.alert-warn { background: var(--warn-soft); color: #8a5a12; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.spinner.dark { border-color: rgba(15,23,41,.15); border-top-color: var(--brand-navy); }
@keyframes spin { to { transform: rotate(360deg); } }