/* TRB Auto Care — Theme (Clean SaaS / Tabler-style, light)
   Drop-in. Load this AFTER Bootstrap. No HTML changes needed.*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Design tokens ---------- */
:root {
  --brand:        #EC1F24;   /* TRB red canonical */
  --brand-600:    #d1181d;
  --brand-700:    #b01418;
  --brand-soft:   #fdecec;   /* red tint backgrounds */
  --ink:          #15181d;   /* dark sections / sidebar / dark navbar */
  --ink-2:        #1d2127;

  --bg:           #f5f6f8;   /* page background */
  --surface:      #ffffff;   /* cards */
  --text:         #1f2a37;   /* body text */
  --heading:      #111827;   /* headings */
  --muted:        #6b7280;   /* secondary text */
  --border:       #e6e8ec;   /* hairline borders */

  --radius:       14px;
  --radius-sm:    9px;
  --shadow-sm:    0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow:       0 4px 14px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);
  --shadow-lg:    0 12px 32px rgba(16,24,40,.10);

  /* Bootstrap overrides */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-sm);
  --bs-primary: var(--brand);
  --bs-primary-rgb: 236,31,36;
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-700);
}

/* ---------- Base & typography ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.text-muted { color: var(--muted) !important; }
a { text-decoration: none; }
hr { border-color: var(--border); opacity: 1; }

/* Standardized sizing & layout utilities */
.fs-3xs { font-size: 0.65rem !important; }    /* ~10.5px */
.fs-2xs { font-size: 0.7rem !important; }     /* ~11px */
.fs-xs  { font-size: 0.75rem !important; }    /* 12px */
.fs-sm  { font-size: 0.85rem !important; }    /* ~13.5px */
.fs-base { font-size: 0.95rem !important; }   /* ~15px */

.radius-sm { border-radius: var(--radius-sm) !important; }
.radius-md { border-radius: var(--radius) !important; }
.radius-lg { border-radius: 16px !important; }
.tracking-wider { letter-spacing: 0.05em !important; }

/* keep your brand utility classes, just refined */
.text-brand { color: var(--brand) !important; }
.bg-brand   { background-color: var(--brand) !important; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--shadow); }
.card .card-header,
.card .card-footer {
  background: transparent;
  border-color: var(--border);
}
.shadow, .shadow-sm { box-shadow: var(--shadow-sm) !important; }
.rounded-4 { border-radius: var(--radius) !important; }

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-font-weight: 600;
  border-radius: var(--radius-sm);
  padding: .5rem 1.1rem;
  letter-spacing: -0.01em;
  transition: all .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn-brand, .btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(229,50,45,.25);
}
.btn-brand:hover, .btn-primary:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
  box-shadow: 0 4px 12px rgba(229,50,45,.30);
  transform: translateY(-1px);
}
.btn-outline-brand {
  border: 2px solid var(--brand);
  color: var(--brand);
  background-color: transparent;
  transition: all 0.3s ease;
}
.btn-outline-brand:hover {
  background-color: var(--brand);
  color: #ffffff;
  transform: translateY(-1px);
}
.btn-dark {
  background: var(--ink);
  border-color: var(--ink);
}
.btn-dark:hover { background: var(--ink-2); border-color: var(--ink-2); transform: translateY(-1px); }

.btn-outline-dark, .btn-outline-secondary {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface);
}
.btn-outline-dark:hover, .btn-outline-secondary:hover {
  background: var(--bg);
  border-color: #d4d7dd;
  color: var(--heading);
}
.btn-success { background:#16a34a; border-color:#16a34a; }
.btn-success:hover { background:#15803d; border-color:#15803d; transform: translateY(-1px); }
.btn-light { background: var(--surface); border:1px solid var(--border); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: .6rem .85rem;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: #9aa1ab; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(229,50,45,.15);
}
.form-label { font-weight: 600; color: var(--heading); margin-bottom: .4rem; }
.input-group-text { background: var(--bg); border-color: var(--border); color: var(--muted); }

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: var(--surface);
  border-color: var(--border);
  vertical-align: middle;
}
.table thead th {
  background: #fafbfc;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.table tbody td { border-color: #f0f1f3; padding-top: .85rem; padding-bottom: .85rem; }
.table-hover tbody tr:hover { background: #fafbfc; }

/* ---------- Badges ---------- */
.badge {
  font-weight: 600;
  padding: .4em .7em;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.bg-success { background: #dcfce7 !important; color: #166534 !important; }
.bg-warning { background: #fef3c7 !important; color: #92400e !important; }
.bg-danger  { background: #fee2e2 !important; color: #991b1b !important; }
.bg-secondary { background: #eef0f2 !important; color: #475467 !important; }
.bg-info    { background: #dbeafe !important; color: #1e40af !important; }
.bg-primary { background: var(--brand-soft) !important; color: var(--brand-700) !important; }

/* ---------- Navbar (your dark top bar) ---------- */
.navbar.bg-dark, .navbar-dark, .navbar.navbar-dark {
  background: var(--ink) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar .nav-link { font-weight: 500; transition: color .15s ease; }

/* ---------- Sidebar (admin) — dark, clean ---------- */
.sidebar, .admin-sidebar, aside.bg-dark, .bg-dark.sidebar {
  background: var(--ink) !important;
}
.sidebar a, .admin-sidebar a {
  border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease;
}
.sidebar a:hover, .admin-sidebar a:hover {
  background: rgba(255,255,255,.06);
}
.sidebar a.active, .admin-sidebar a.active {
  background: rgba(229,50,45,.16);
  color: #fff;
}

/* ---------- Dropdowns ---------- */
.dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .4rem;
}
.dropdown-item { border-radius: var(--radius-sm); padding: .5rem .75rem; font-weight: 500; }
.dropdown-item:hover { background: var(--bg); }
.dropdown-item:active { background: var(--brand); }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--radius); border: 1px solid transparent; font-weight: 500; }
.alert-success { background:#ecfdf3; border-color:#abefc6; color:#067647; }
.alert-danger  { background:#fef3f2; border-color:#fecdca; color:#b42318; }
.alert-warning { background:#fffaeb; border-color:#fedf89; color:#b54708; }

/* ---------- Modals ---------- */
.modal-content { border: none; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--border); }

/* ---------- Misc ---------- */
.page-link { color: var(--text); border-color: var(--border); }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); }
.list-group-item { border-color: var(--border); }
.nav-tabs .nav-link.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ---------- Accessibility & motion ---------- */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}