/* =========================================================
   Autohaus FleetCare — Brand Theme
   Tokens derived from the Autohaus wordmark: condensed
   italic industrial type, black/white/yellow decal palette.
   ========================================================= */

:root {
  --ah-ink: #0B0B0C;
  --ah-yellow: #FFC600;
  --ah-red: #E11D2E;
  --ah-white: #ffffff;
  --ah-asphalt: #F2F3F5;
  --ah-slate: #5B6472;
  --ah-border: #E4E6EA;

  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ah-asphalt);
  font-family: var(--font-body);
  color: #1a1d21;
}

a { text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

:focus-visible {
  outline: 3px solid var(--ah-yellow);
  outline-offset: 2px;
}

/* ---------- Signature: hazard tape ---------- */
.hazard-stripe {
  height: 8px;
  background-image: repeating-linear-gradient(135deg, #000 0 14px, var(--ah-yellow) 14px 28px);
}
.hazard-stripe.thin { height: 4px; background-image: repeating-linear-gradient(135deg, #000 0 9px, var(--ah-yellow) 9px 18px); }

/* ---------- Brand lockup ---------- */
.brand-mark {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  padding: 5px 10px;
  line-height: 0;
}
.brand-mark img { height: 18px; width: auto; display: block; }
.brand-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  letter-spacing: .03em;
  color: var(--ah-yellow);
  font-size: .82rem;
  text-transform: uppercase;
}
.brand-mark-lg img { height: 34px; }
.brand-sub-lg { font-size: 1.35rem; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--ah-ink);
  color: #fff;
  min-height: 100vh;
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: 1030;
  transition: transform .2s ease;
}
.sidebar .brand {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.sidebar nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.sidebar nav a.nav-link {
  color: #b7bcc4;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .02em;
  font-size: .95rem;
  border-radius: 6px;
  margin-bottom: 2px;
  border-left: 3px solid transparent;
}
.sidebar nav a.nav-link.active {
  background: rgba(255,198,0,.12);
  color: var(--ah-yellow);
  border-left-color: var(--ah-yellow);
}
.sidebar nav a.nav-link:hover:not(.active) {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.sidebar .sidebar-footer {
  padding: 10px 10px 16px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.sidebar .sidebar-footer a {
  color: #b7bcc4;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  border-radius: 6px;
}
.sidebar .sidebar-footer a:hover { background: rgba(255,255,255,.08); color: #fff; }

.main-content { margin-left: 250px; padding: 24px; min-height: 100vh; }

.topbar {
  background: #fff;
  border-bottom: 1px solid var(--ah-border);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -24px -24px 24px -24px;
}
.topbar .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ah-ink); color: var(--ah-yellow);
  font-family: var(--font-display);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem;
}
.sidebar-toggle-btn { display: none; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .sidebar-toggle-btn { display: inline-flex; }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1020;
  }
  .sidebar-backdrop.open { display: block; }
}

/* ---------- Page header ---------- */
.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ah-ink);
}
.page-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 1rem;
  color: var(--ah-red);
}

/* ---------- Cards / stat tiles ---------- */
.card-ah {
  background: #fff;
  border: 1px solid var(--ah-border);
  border-radius: 10px;
}
.card-ah .card-header {
  background: #fff;
  border-bottom: 3px solid var(--ah-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
  border-radius: 10px 10px 0 0 !important;
  padding: .85rem 1.25rem;
}
.card-ah .card-body {
  padding: 1.35rem;
}

/* ---------- Mini list rows (dashboard widgets, vehicle history, settings) ---------- */
.mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 6px;
  border-bottom: 1px solid #EEF0F2;
}
.mini-row:last-child { border-bottom: none; }
a.mini-row { border-radius: 8px; }
a.mini-row:hover { background: var(--ah-asphalt); }

.stat-card {
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.stat-card .icon-box {
  width: 42px; height: 42px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.stat-card .label { font-family: var(--font-display); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.stat-card .value { font-size: 1.3rem; font-weight: 800; font-family: 'Consolas', 'JetBrains Mono', monospace; }

.stat-black { background: var(--ah-ink); color: #fff; }
.stat-black .icon-box { background: rgba(255,255,255,.12); color: var(--ah-yellow); }
.stat-yellow { background: var(--ah-yellow); color: #000; }
.stat-yellow .icon-box { background: rgba(0,0,0,.1); }
.stat-red { background: var(--ah-red); color: #fff; }
.stat-red .icon-box { background: rgba(255,255,255,.15); }
.stat-white { background: #fff; color: #000; border: 1px solid var(--ah-border); }
.stat-white .icon-box { background: var(--ah-asphalt); }

/* ---------- Badges: warning-label style, not soft pills ---------- */
.badge-status {
  padding: .3em .6em;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  display: inline-block;
  border: 1px solid transparent;
}
.badge-ok, .badge-good, .badge-approved, .badge-completed, .badge-sent, .badge-issued, .badge-paid {
  background: #E7F6EC; color: #0F6B33; border-color: #BEE8CB;
}
.badge-duesoon, .badge-monitor, .badge-inprogress, .badge-pendingapproval, .badge-pending {
  background: #FFF6D6; color: #7A5B00; border-color: #FCE79A;
}
.badge-overdue, .badge-needreplacement, .badge-rejected, .badge-failed {
  background: #FDE8E8; color: #A8121F; border-color: #F7BFC3;
}
.badge-requested { background: #E4EDFB; color: #1D4E96; border-color: #C4D9F5; }
.badge-confirmed { background: #EDE9FB; color: #4A2E96; border-color: #D6CCF5; }
.badge-cancelled { background: #EDEEF0; color: #40464E; border-color: #DADDE1; }

/* ---------- Buttons: control-panel bevel ---------- */
.btn-ah-yellow, .btn-ah-black, .btn-ah-red {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-width: 0;
}
.btn-ah-yellow { background: var(--ah-yellow); color: #000; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.btn-ah-yellow:hover { background: #ECB800; color: #000; }
.btn-ah-black { background: var(--ah-ink); color: #fff; box-shadow: inset 0 -3px 0 rgba(255,255,255,.12); }
.btn-ah-black:hover { background: #1c1c1e; color: #fff; }
.btn-ah-red { background: var(--ah-red); color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.btn-ah-red:hover { background: #C6101E; color: #fff; }
.btn-ah-yellow:active, .btn-ah-black:active, .btn-ah-red:active { box-shadow: inset 0 2px 0 rgba(0,0,0,.18); transform: translateY(1px); }

/* ---------- Misc ---------- */
.filter-pill {
  border: 1px solid var(--ah-border); background: #fff; color: var(--ah-slate);
  border-radius: 999px; padding: 5px 14px; font-size: .78rem;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.filter-pill.active { background: var(--ah-ink); color: #fff; border-color: var(--ah-ink); }
.table-ah thead th {
  font-family: var(--font-display);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ah-slate);
  border-bottom: 2px solid var(--ah-ink); font-weight: 700;
}
.table-ah td, .table-ah th { vertical-align: middle; }
.table-ah tbody tr { cursor: pointer; }
.table-ah tbody tr:hover { background: #FAFAF8; }

.checklist-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.checklist-row:last-child { border-bottom: none; }
.status-choice {
  border: 1px solid var(--ah-border); background: #fff; color: #9ca3af;
  border-radius: 4px; padding: 3px 10px; font-size: .72rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  margin-left: 4px;
}
.status-choice.chosen-good { background: #E7F6EC; color: #0F6B33; border-color: #BEE8CB; }
.status-choice.chosen-monitor { background: #FFF6D6; color: #7A5B00; border-color: #FCE79A; }
.status-choice.chosen-needreplacement { background: #FDE8E8; color: #A8121F; border-color: #F7BFC3; }

.login-card { max-width: 440px; margin: 60px auto; }
.role-pick {
  border: 1px solid var(--ah-border); border-radius: 8px; padding: 12px 8px; text-align: center;
  font-family: var(--font-display); font-size: .8rem; font-weight: 700; text-transform: uppercase;
  color: var(--ah-slate); cursor: pointer;
}
.role-pick.active { background: var(--ah-ink); color: #fff; border-color: var(--ah-ink); }

.hero-highlight { background: var(--ah-yellow); padding: 0 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.diag-divider {
  height: 10px;
  background-image: repeating-linear-gradient(135deg, #000 0 16px, var(--ah-yellow) 16px 32px);
}

@media print {
  .no-print { display: none !important; }
  .main-content { margin-left: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
}