/* FleetMind Custom Styles — Atera-Style Design System */

/* =============================================================
   PHASE 0A — Design Tokens (:root)
   ============================================================= */
:root {
  /* Brand Colors */
  --fm-primary: #4F46E5;
  --fm-primary-hover: #4338CA;
  --fm-primary-light: #EEF2FF;
  --fm-primary-rgb: 79, 70, 229;
  --fm-success: #10B981;
  --fm-warning: #F59E0B;
  --fm-danger: #EF4444;
  --fm-info: #3B82F6;
  /* Surfaces */
  --fm-bg: #F9FAFB;
  --fm-surface: #FFFFFF;
  --fm-border: #E5E7EB;
  --fm-text: #111827;
  --fm-text-secondary: #6B7280;
  --fm-text-muted: #9CA3AF;
  /* Sidebar */
  --sidebar-bg: #F2F6FA;
  --sidebar-active-bg: rgba(79, 70, 229, 0.15);
  --sidebar-active-border: #4F46E5;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 68px;
  /* Shadows */
  --fm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --fm-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --fm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  /* Radii */
  --fm-radius-sm: 6px;
  --fm-radius: 8px;
  --fm-radius-lg: 12px;
  --fm-radius-xl: 16px;
  /* Transitions */
  --fm-transition: all 0.2s ease;
  /* Layout — BUG FIX #25+#26+#62: 16px top + 36px btn-height + 16px bottom = 68px */
  --navbar-height: 68px;
}

/* =============================================================
   PHASE 0B — Bootstrap CSS Variable Overrides
   ============================================================= */
:root {
  --bs-primary: var(--fm-primary);
  --bs-primary-rgb: var(--fm-primary-rgb);
  --bs-body-font-family: 'Heebo', 'Inter', sans-serif;
  --bs-body-bg: var(--fm-bg);
  --bs-body-color: var(--fm-text);
  --bs-border-color: var(--fm-border);
  --bs-border-radius: var(--fm-radius);
  --bs-border-radius-lg: var(--fm-radius-lg);
  --bs-link-color: var(--fm-primary);
  --bs-link-hover-color: var(--fm-primary-hover);
  --bs-link-color-rgb: var(--fm-primary-rgb);
}

/* =============================================================
   PHASE 0C — Component Overrides
   ============================================================= */

/* --- Body --- */
body {
  font-family: 'Heebo', 'Inter', sans-serif;
  background-color: var(--fm-bg);
  min-height: 100vh;
}

/* --- Cards --- */
.card { border: 1px solid var(--fm-border); border-radius: var(--fm-radius-lg); box-shadow: var(--fm-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--fm-border); padding: 16px 20px; font-weight: 600; }

/* --- Tables --- */
/* BUG FIX #64: apply padding to BOTH th and td for visual consistency */
.table th { font-size: 0.8125rem; font-weight: 600; color: var(--fm-text-secondary); text-transform: none; letter-spacing: 0; padding: 12px 16px; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--fm-border); vertical-align: middle; }
.table tbody tr:hover { background: var(--fm-primary-light); }
/* BUG FIX #64: restore .table-sm compact padding (our td/th rules override Bootstrap's var() mechanism) */
.table-sm th, .table-sm td { padding: 4px 8px; }

/* --- Badges — BUG FIX #1: scope to .badge.bg-* only, not global .bg-* --- */
.badge { border-radius: 9999px; padding: 4px 10px; font-weight: 500; font-size: 0.75rem; }
.badge.bg-success   { background: #D1FAE5 !important; color: #065F46 !important; }
.badge.bg-warning   { background: #FEF3C7 !important; color: #92400E !important; }
.badge.bg-danger    { background: #FEE2E2 !important; color: #991B1B !important; }
.badge.bg-secondary { background: #F3F4F6 !important; color: #374151 !important; }
.badge.bg-info      { background: #DBEAFE !important; color: #1E40AF !important; }
.badge.bg-primary   { background: var(--fm-primary-light) !important; color: var(--fm-primary) !important; }
/* BUG FIX #61: retired/closed/cancelled statuses map to bg-dark */
.badge.bg-dark      { background: #F3F4F6 !important; color: #374151 !important; }

/* --- Buttons — BUG FIX #16: must override scoped CSS vars, not just :root --- */
.btn { font-weight: 500; border-radius: var(--fm-radius); transition: var(--fm-transition); }
.btn-primary {
  --bs-btn-bg: var(--fm-primary);
  --bs-btn-border-color: var(--fm-primary);
  --bs-btn-hover-bg: var(--fm-primary-hover);
  --bs-btn-hover-border-color: var(--fm-primary-hover);
  --bs-btn-active-bg: var(--fm-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--fm-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--fm-primary);
  --bs-btn-border-color: var(--fm-primary);
  --bs-btn-hover-bg: var(--fm-primary);
  --bs-btn-hover-border-color: var(--fm-primary);
  --bs-btn-active-bg: var(--fm-primary);
  --bs-btn-active-border-color: var(--fm-primary);
}

/* --- Checkboxes and radios — BUG FIX #19 --- */
.form-check-input:checked { background-color: var(--fm-primary); border-color: var(--fm-primary); }

/* --- Form inputs --- */
.form-control, .form-select {
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius);
  padding: 9px 13px;
  transition: var(--fm-transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--fm-primary);
  box-shadow: 0 0 0 3px rgba(var(--fm-primary-rgb), 0.1);
}
.form-label { font-weight: 500; font-size: 0.875rem; color: var(--fm-text-secondary); margin-bottom: 6px; }

/* --- Pagination --- */
.page-link { border: none; border-radius: var(--fm-radius); margin: 0 2px; color: var(--fm-text-secondary); }
.page-item.active .page-link { background: var(--fm-primary); color: white; }

/* --- Tabs (underline style — Atera pattern) --- */
.nav-tabs { border-bottom: 2px solid var(--fm-border); gap: 0; }
.nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 12px 16px; font-weight: 500; color: var(--fm-text-secondary); transition: var(--fm-transition); }
.nav-tabs .nav-link.active { color: var(--fm-primary); border-bottom-color: var(--fm-primary); }
.nav-tabs .nav-link:hover { color: var(--fm-text); }

/* --- Definition lists --- */
dt { font-weight: 500; color: var(--fm-text-muted); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; }
dd { font-weight: 500; color: var(--fm-text); margin-bottom: 12px; }

/* --- Navbar — BUG FIX #56: padding-block only (container-fluid handles horizontal 12px each side) --- */
.navbar { padding-block: 16px; box-shadow: var(--fm-shadow-sm); background: var(--fm-surface); }

/* --- User Avatar (navbar) --- */
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--fm-primary-light); color: var(--fm-primary);
  font-weight: 600; font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* --- Page header --- */
.page-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.page-subtitle { font-size: 0.875rem; margin-top: 2px; }

/* --- Table row actions — BUG FIX #44: pointer-events prevents accidental hidden clicks --- */
tr .row-actions { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
tr:hover .row-actions { opacity: 1; pointer-events: auto; }
/* BUG FIX #12: Touch/mobile — always show actions */
@media (max-width: 768px) { tr .row-actions { opacity: 1; pointer-events: auto; } }

/* --- Detail page sticky header --- */
.detail-sticky-header {
  position: sticky;
  top: var(--navbar-height);
  z-index: 90;
  background: var(--fm-surface);
  border-bottom: 1px solid var(--fm-border);
  box-shadow: var(--fm-shadow-sm);
}

/* --- Filters sticky bar --- */
.filters-sticky {
  position: sticky;
  top: var(--navbar-height);
  z-index: 100;
}

/* --- Form sections (Phase 3D) --- */
.form-section-title {
  font-weight: 600; font-size: 0.875rem; color: var(--fm-text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--fm-border);
}
.form-actions {
  position: sticky; bottom: 0; background: var(--fm-surface);
  border-top: 1px solid var(--fm-border); padding: 16px 0; margin-top: 24px; z-index: 10;
}

/* --- KPI cards (dashboard) — BUG FIX #28 --- */
.kpi-card { transition: var(--fm-transition); cursor: default; }
.kpi-card:hover { box-shadow: var(--fm-shadow-md); transform: translateY(-1px); }

/* --- Card hover effects (Phase 4C) --- */
.card-hover { transition: var(--fm-transition); cursor: pointer; }
.card-hover:hover { box-shadow: var(--fm-shadow-md); transform: translateY(-1px); }

/* --- Sidebar backdrop (mobile overlay) --- */
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1039; }
.sidebar-backdrop.show { display: block; }

/* --- Modal enhancements --- */
.modal-content { border-radius: var(--fm-radius-xl); }
.modal-backdrop { backdrop-filter: blur(4px); }

/* --- Flash messages (legacy class, kept for safety) --- */
.flash-messages { margin-bottom: 1rem; }

/* =============================================================
   PHASE 0D — Structural Layout CSS
   BUG FIX #42: ALL structural rules from original custom.css carried forward
   ============================================================= */

/* --- Sidebar --- */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  min-height: 100vh;
  position: fixed;
  top: 0;
  right: 0;                              /* RTL: sidebar on right */
  z-index: 1040;
  background: var(--sidebar-bg);
  /* BUG FIX #34: width transition added alongside transform */
  transition: transform 0.3s ease, width 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
[dir="ltr"] .sidebar { right: auto; left: 0; }

.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 120px; /* Space for collapse button + footer */
}

/* --- Sidebar tenant logo --- */
.sidebar-tenant-logo {
  flex-shrink: 0;
  max-height: 50px;
  max-width: 120px;
  object-fit: contain;
}

.sidebar-tenant-icon {
  font-size: 2.5rem !important;
}

/* --- Sidebar footer --- */
.sidebar-footer {
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  background: var(--sidebar-bg);
  color: rgba(0, 0, 0, 0.7);
  position: relative;
  z-index: 1;
}

/* Hide footer when collapsed */
html.sidebar-collapsed .sidebar-footer {
  display: none;
}

/* When collapsed, hide tenant name but keep logo centered */
html.sidebar-collapsed .sidebar-tenant-name {
  display: none;
}

html.sidebar-collapsed .sidebar-tenant-logo,
html.sidebar-collapsed .sidebar-tenant-icon {
  margin: 0 !important;
}

/* Keep collapse button always visible - positioned above footer */
.sidebar-collapse-btn {
  position: absolute;
  bottom: 72px; /* Position above footer */
  left: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: #cfcdf5;
  color: #6a67a8;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  z-index: 10;
}

.sidebar-collapse-btn:hover,
.sidebar-collapse-btn:focus,
.sidebar-collapse-btn:active {
  background: #cfcdf5;
  color: #6a67a8;
  box-shadow: none;
}

/* --- Sidebar nav links base style — BUG FIX #38: flex required for collapsed centering --- */
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  margin: 1px 0;
  font-size: 0.9rem;
  /* BUG FIX #17: transparent border baseline prevents 3px layout shift on active */
  border-right: 3px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
[dir="ltr"] .sidebar-nav .nav-link { border-right: none; border-left: 3px solid transparent; }

/* BUG FIX #27: explicit hover rule using sidebar-hover-bg token */
.sidebar-nav .nav-link:hover { background: var(--sidebar-hover-bg); }

.sidebar-nav .nav-link.active {
  background: var(--sidebar-active-bg);
  color: white;
  border-right-color: var(--sidebar-active-border);
}
[dir="ltr"] .sidebar-nav .nav-link.active { border-left-color: var(--sidebar-active-border); }

.sidebar-nav .nav-link i { width: 20px; text-align: center; }

/* BUG FIX #52: !important beats Bootstrap's .text-muted { color !important } */
/* BUG FIX #20: sidebar-section-label class for targeted CSS */
.sidebar-nav .sidebar-section-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 700;
}

/* Top-level section button: fixed background (no white flash, no hover color change) */
.sidebar-section-toggle {
  border: none;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: right;
  padding: 0.2rem 1rem;
  box-shadow: none !important;
}

.sidebar-section-toggle:hover,
.sidebar-section-toggle:focus,
.sidebar-section-toggle:active,
.sidebar-section-toggle:focus-visible {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.92);
  outline: none;
  box-shadow: none !important;
}

/* Arrow sits on the right in RTL */
.sidebar-section-chevron {
  font-size: 0.78rem;
  line-height: 1;
}

/* --- Collapsed sidebar state (desktop only — mobile overridden below) --- */
html.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }

html.sidebar-collapsed .nav-link-text,
html.sidebar-collapsed .sidebar-search,
html.sidebar-collapsed .sidebar-section-label { display: none; }

<!-- BUG FIX #50: hide entire <li> wrapper to eliminate mt-2 gap -->
html.sidebar-collapsed .sidebar-section-item { display: none; }

<!-- BUG FIX #33: hide brand text so it doesn't overflow 68px sidebar -->
html.sidebar-collapsed .sidebar-brand-text { display: none; }

html.sidebar-collapsed .sidebar-nav .nav-link {
  justify-content: center;
  padding: 0.6rem;
}
<!-- BUG FIX #37: Bootstrap's .me-2 uses !important — counter with !important -->
html.sidebar-collapsed .sidebar-nav .nav-link i { margin: 0 !important; }

/* Center brand icon in header when collapsed */
html.sidebar-collapsed .sidebar-header a { justify-content: center; }
html.sidebar-collapsed .sidebar-header i { margin: 0 !important; }

/* --- Main content margin --- */
.main-content { margin-right: var(--sidebar-width); transition: margin 0.3s ease; }
[dir="ltr"] .main-content { margin-right: 0; margin-left: var(--sidebar-width); }

/* Collapsed margins */
html.sidebar-collapsed .main-content { margin-right: var(--sidebar-collapsed-width); }
/* BUG FIX #43: dir is ON <html> — combine dir attr and class on same html element */
html[dir="ltr"].sidebar-collapsed .main-content { margin-right: 0; margin-left: var(--sidebar-collapsed-width); }

/* BUG FIX #9: mobile ignores collapsed state entirely */
@media (max-width: 991.98px) {
  html.sidebar-collapsed .sidebar { width: var(--sidebar-width) !important; }
  html.sidebar-collapsed .main-content { margin-right: 0 !important; margin-left: 0 !important; }
}

/* --- Mobile sidebar slide (original preserved) --- */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(100%); }
  [dir="ltr"] .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-content { margin-right: 0; margin-left: 0; }
}

/* --- Sidebar scrollbar --- */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }

/* --- Auth pages gradient (updated palette) --- */
.auth-page { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); min-height: 100vh; }

/* =============================================================
   PHASE 5 — Detail-page hero + sidebar pattern (vehicle redesign)
   Reuses existing --fm-* tokens; no new colors or fonts.
   ============================================================= */

/* Hero card: bigger padding, same surface look */
.fm-hero-card {
  background: var(--fm-surface);
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius-lg);
  box-shadow: var(--fm-shadow);
  padding: 24px;
}
.fm-hero-card > .fm-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.fm-hero-card > .fm-hero-header h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fm-hero-card > .fm-hero-header h3 i { color: var(--fm-primary); }

/* Sections inside a hero card */
.fm-section { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--fm-border); }
.fm-section:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.fm-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--fm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px 0;
}

/* Field grid: 2 columns of fields on md+, stacks to 1 on mobile */
.fm-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 10px;
}
@media (max-width: 767.98px) {
  .fm-field-grid { grid-template-columns: 1fr; }
}
.fm-field-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  column-gap: 12px;
  min-width: 0;
}
.fm-field-row > .fm-field-label {
  color: var(--fm-text-secondary);
  font-size: 0.875rem;
}
.fm-field-row > .fm-field-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 500;
  color: var(--fm-text);
}
.fm-field-row .fm-field-edit-icon {
  opacity: 0;
  color: var(--fm-text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.fm-field-row:hover .fm-field-edit-icon { opacity: 1; }
.fm-field-value.is-muted { color: var(--fm-text-muted); }

/* Sidebar stack */
.fm-sidebar-stack { display: flex; flex-direction: column; gap: 16px; }
.fm-sidebar-stack > .card { margin: 0; }

/* Small side card header with icon-square + title */
.fm-side-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.fm-side-card-header .fm-icon-square {
  width: 36px; height: 36px;
  border-radius: var(--fm-radius);
  background: var(--fm-primary-light);
  color: var(--fm-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fm-side-card-header h3 { font-size: 0.9375rem; font-weight: 700; margin: 0; }

/* Simple label:value rows used in sidebar cards */
.fm-kv-list { display: flex; flex-direction: column; gap: 12px; }
.fm-kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fm-kv-row > .fm-kv-label { color: var(--fm-text-secondary); font-size: 0.8125rem; }
.fm-kv-row > .fm-kv-value { color: var(--fm-text); font-weight: 500; font-size: 0.875rem; }
.fm-kv-row > .fm-kv-value.is-muted { color: var(--fm-text-muted); }

/* Empty state (sidebar cards + full-width panels) */
.fm-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 16px 8px 8px;
}
.fm-empty-state .fm-empty-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--fm-bg);
  color: var(--fm-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 10px;
}
.fm-empty-state p { color: var(--fm-text-secondary); font-size: 0.875rem; margin: 0 0 12px 0; }

/* Status pill with leading dot */
.fm-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 600;
}
.fm-status-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.9;
}
.fm-status-pill.status-success { background: #D1FAE5; color: #065F46; }
.fm-status-pill.status-warning { background: #FEF3C7; color: #92400E; }
.fm-status-pill.status-danger  { background: #FEE2E2; color: #991B1B; }
.fm-status-pill.status-info    { background: #DBEAFE; color: #1E40AF; }
.fm-status-pill.status-muted   { background: #F3F4F6; color: #374151; }

/* =============================================================
   PHASE 4D — Smooth scroll + reduced motion
   ============================================================= */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* =============================================================
   Column Sort & Filter Headers
   ============================================================= */
.vehicles-table th,
.drivers-table th,
.accidents-table th,
.violations-table th {
  vertical-align: middle;
  position: relative;
}

/* Fix dropdown overflow clipping in tables with few rows */
.vehicles-table thead,
.drivers-table thead,
.accidents-table thead,
.violations-table thead {
  position: relative;
  z-index: 10;
}

/* Ensure filter dropdowns are always fully visible with fixed positioning */
.filter-dropdown.dropdown-menu {
  position: fixed !important;
  z-index: 1060 !important;
  max-height: 400px;
  overflow-y: visible;
}

.filter-dropdown.dropdown-menu.show {
  display: block;
}

/* =============================================================
   Filterable data tables — clean horizontal scroll
   Shared by vehicles, accidents, and violations index pages.
   ============================================================= */
.vehicles-scroll,
.accidents-scroll,
.violations-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;

  background:
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) 0   0 / 20px 100% no-repeat,
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) 100% 0 / 20px 100% no-repeat,
    linear-gradient(to right, rgba(0,0,0,0.10), rgba(0,0,0,0)) 0   0 / 10px 100% no-repeat,
    linear-gradient(to left,  rgba(0,0,0,0.10), rgba(0,0,0,0)) 100% 0 / 10px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;

  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 transparent;
}

.vehicles-scroll::-webkit-scrollbar,
.accidents-scroll::-webkit-scrollbar,
.violations-scroll::-webkit-scrollbar         { height: 8px; }
.vehicles-scroll::-webkit-scrollbar-track,
.accidents-scroll::-webkit-scrollbar-track,
.violations-scroll::-webkit-scrollbar-track   { background: transparent; }
.vehicles-scroll::-webkit-scrollbar-thumb,
.accidents-scroll::-webkit-scrollbar-thumb,
.violations-scroll::-webkit-scrollbar-thumb   { background: #c1c1c1; border-radius: 4px; }
.vehicles-scroll::-webkit-scrollbar-thumb:hover,
.accidents-scroll::-webkit-scrollbar-thumb:hover,
.violations-scroll::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

.vehicles-scroll .vehicles-table,
.accidents-scroll .accidents-table,
.violations-scroll .violations-table {
  width: auto;
  min-width: 100%;
  margin-bottom: 0;
  white-space: nowrap;
}

/* Per-column width caps + ellipsis so wide columns don't shove the rest of the
   table off-screen. Horizontal scroll already handles overflow; these caps
   keep the layout sane until the scroll kicks in. */
.vehicles-scroll .vehicles-table th,
.vehicles-scroll .vehicles-table td,
.accidents-scroll .accidents-table th,
.accidents-scroll .accidents-table td,
.violations-scroll .violations-table th,
.violations-scroll .violations-table td {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vehicles-scroll .vehicles-table th[data-col="notes"],
.vehicles-scroll .vehicles-table td[data-col="notes"],
.accidents-scroll .accidents-table th[data-col="notes"],
.accidents-scroll .accidents-table td[data-col="notes"],
.violations-scroll .violations-table th[data-col="notes"],
.violations-scroll .violations-table td[data-col="notes"] {
  max-width: 320px;
}
.vehicles-scroll .vehicles-table th[data-col="license_plate"],
.vehicles-scroll .vehicles-table td[data-col="license_plate"],
.accidents-scroll .accidents-table th[data-col="license_plate"],
.accidents-scroll .accidents-table td[data-col="license_plate"],
.violations-scroll .violations-table th[data-col="report_number"],
.violations-scroll .violations-table td[data-col="report_number"] {
  min-width: 130px;
}

/* Sticky leading column — first non-row-number column stays visible while
   the rest of the table scrolls horizontally. Layout is RTL, so the visual
   right edge is the leading edge; nth-child(2) skips the # row-number column. */
.vehicles-scroll .vehicles-table th:nth-child(2),
.vehicles-scroll .vehicles-table td:nth-child(2),
.accidents-scroll .accidents-table th:nth-child(2),
.accidents-scroll .accidents-table td:nth-child(2),
.violations-scroll .violations-table th:nth-child(2),
.violations-scroll .violations-table td:nth-child(2) {
  position: sticky;
  right: 0;
  background: #fff;
  z-index: 2;
  box-shadow: -1px 0 0 rgba(0, 0, 0, 0.05);
}
.vehicles-scroll .vehicles-table thead th:nth-child(2),
.accidents-scroll .accidents-table thead th:nth-child(2),
.violations-scroll .violations-table thead th:nth-child(2) {
  background: #f8f9fa;
  z-index: 3;
}

.col-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.col-label { font-weight: 600; }

.sort-link {
  color: var(--fm-text-secondary, inherit);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-weight: 600;
}
.sort-link:hover { color: var(--fm-text, inherit); }

.sort-icon {
  font-size: 0.7rem;
  transition: opacity 0.15s ease;
}
.sort-icon-idle { opacity: 0.25; }
.sort-link:hover .sort-icon-idle { opacity: 0.55; }
.sort-icon-active { opacity: 0.95; color: var(--fm-primary, #0d6efd); }

.filter-trigger {
  color: var(--fm-text-muted, #6c757d);
  font-size: 0.8rem;
  line-height: 1;
  border: none;
  background: none;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 3px;
}
.filter-trigger:hover { color: var(--fm-primary, #0d6efd); background: rgba(13,110,253,0.08); }
.filter-trigger.active { color: var(--fm-primary, #0d6efd); }

/* Highlight header cell when its filter is active */
th.col-filtered {
  background-color: rgba(13, 110, 253, 0.06) !important;
  box-shadow: inset 0 -2px 0 var(--fm-primary, #0d6efd);
}

.filter-dropdown {
  min-width: 220px;
  font-size: 0.8125rem;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.filter-dropdown-form {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-bulk {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
}
.filter-bulk .btn-link { font-size: 0.75rem; text-decoration: none; }
.filter-bulk .btn-link:hover { text-decoration: underline; }

.filter-multi-scroll {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  padding: 4px 6px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  margin: 0;
  cursor: pointer;
  border-radius: 3px;
}
.filter-option:hover { background: rgba(13,110,253,0.05); }
.filter-option input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.filter-option span { font-size: 0.8125rem; line-height: 1.2; }

.filter-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* =============================================================
   Active Filters Pill Bar
   ============================================================= */
.active-filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(13, 110, 253, 0.04);
  border: 1px solid rgba(13, 110, 253, 0.12);
  border-radius: 6px;
}

.active-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(13, 110, 253, 0.3);
  color: var(--fm-text, #212529);
  padding: 3px 8px 3px 4px;
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.3;
}
.active-filter-pill .pill-label { color: var(--fm-text-muted, #6c757d); font-size: 0.75rem; }
.active-filter-pill .pill-value { font-weight: 500; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active-filter-pill .pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--fm-text-muted, #6c757d);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  margin-right: 2px;
}
.active-filter-pill .pill-remove:hover { background: rgba(220, 53, 69, 0.12); color: #dc3545; }

.active-filters-clear { margin-inline-start: auto; }

/* =============================================================
   Mobile bottom-sheet filter dropdown
   ============================================================= */
@media (max-width: 576px) {
  .filter-dropdown.dropdown-menu.show {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
    z-index: 1050;
  }
  .filter-dropdown .filter-multi-scroll { max-height: 40vh; }
  .filter-dropdown .filter-option { padding: 8px 4px; }
  .filter-dropdown .filter-actions button,
  .filter-dropdown .filter-actions a { padding: 8px 12px; }
}

/* =============================================================
   Import Wizard
   ============================================================= */
.import-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
}
.stepper-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 90px; text-align: center; }
.stepper-bubble {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e9ecef; color: #6c757d; font-size: 1rem;
  border: 2px solid transparent;
  transition: all 0.15s ease;
}
.stepper-label { font-size: 0.8125rem; color: #6c757d; font-weight: 500; }
.stepper-active .stepper-bubble { background: var(--fm-primary, #0d6efd); color: #fff; border-color: rgba(13,110,253,0.25); }
.stepper-active .stepper-label { color: var(--fm-primary, #0d6efd); font-weight: 700; }
.stepper-done .stepper-bubble { background: #198754; color: #fff; }
.stepper-done .stepper-label { color: #198754; }
.stepper-connector { flex: 1; height: 2px; background: #e9ecef; margin: 0 6px; min-width: 24px; align-self: center; margin-bottom: 22px; }
.stepper-connector-done { background: #198754; }

.upload-dropzone {
  border: 2px dashed rgba(13,110,253,0.35);
  border-radius: 8px;
  padding: 20px;
  background: rgba(13,110,253,0.03);
}

.preview-ok    { background: rgba(25, 135, 84, 0.04); }
.preview-warn  { background: rgba(255, 193, 7, 0.06); }
.preview-error { background: rgba(220, 53, 69, 0.06); }

.kpi-ok    { border-left: 4px solid #198754; }
.kpi-warn  { border-left: 4px solid #ffc107; }
.kpi-error { border-left: 4px solid #dc3545; }

.mapping-table select.form-select-sm { min-width: 180px; }

/* =============================================================
   Welcome banner (zero-state dashboard)
   ============================================================= */
.welcome-banner {
  background: linear-gradient(135deg, rgba(13,110,253,0.08), rgba(25,135,84,0.08));
  border: 1px solid rgba(13,110,253,0.15);
  border-radius: 12px;
  padding: 28px 30px;
  margin-bottom: 24px;
}
.welcome-banner h3 { margin: 0 0 8px 0; }
.welcome-banner .welcome-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* =============================================================
   Print
   ============================================================= */
@media print {
  .sidebar, .navbar, .btn, .sidebar-collapse-btn, .toast-container, .sidebar-backdrop { display: none !important; }
  .main-content { margin: 0 !important; }
}

/* Sidebar: keep collapse button fixed, keep menu scrollable */
.sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 56px; /* prevents last items being hidden behind bottom button */
}

/* Top-level section titles same typography as inner links */
.sidebar-section-toggle {
  border: none;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: right;
  font-size: 0.9rem;   /* same as .nav-link */
  font-weight: 500;    /* same feel as inner items */
  font-family: inherit;
  text-transform: none !important;
  letter-spacing: 0;
  padding: 0.6rem 1rem;
}

.sidebar-section-toggle:hover,
.sidebar-section-toggle:focus,
.sidebar-section-toggle:active,
.sidebar-section-toggle:focus-visible {
  background: transparent !important; /* same background at all times */
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.92);
}

.sidebar-nav .sidebar-section-label {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit !important;
}

#sidebarCollapseIcon {
  direction: ltr;
  unicode-bidi: bidi-override;
  display: inline-block;
  min-width: 1ch;
  text-align: center;
  font-weight: 700;
}

/* Sidebar menu items: black text + black icons */
.sidebar-nav .nav-link,
.sidebar-nav .nav-link.text-white,
.sidebar-nav .nav-link.active,
.sidebar-nav .nav-link:hover,
.sidebar-section-toggle,
.sidebar-section-toggle:hover,
.sidebar-section-toggle:focus,
.sidebar-section-label,
.sidebar-section-chevron {
  color: #000 !important;
}

.sidebar-nav .nav-link i,
.sidebar-section-toggle i {
  color: currentColor !important;
}

/* Sidebar brand (FleetMind + truck icon) in black */
.sidebar-header a,
.sidebar-header a i,
.sidebar-header .sidebar-brand-text {
  color: #000 !important;
}

/* =============================================================
   Vehicle card header — new 3-block layout (vehicle / driver / meta)
   ============================================================= */
:root {
  --brand-purple-50: #EEEDFE;
  --brand-purple-600: #534AB7;
}

.vehicle-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  margin-bottom: 1rem;
  direction: rtl;
}
.vch-block { display: flex; align-items: center; gap: 14px; }
.vch-divider { height: 44px; width: 1px; background: rgba(0,0,0,0.08); }
.vch-avatar-car {
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--brand-purple-50);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vch-avatar-person {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-purple-50);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; color: var(--brand-purple-600); flex-shrink: 0;
}
.vch-title { margin: 0; font-size: 20px; font-weight: 500; }
.vch-subtitle { margin: 2px 0 0; font-size: 13px; color: #6B6B6B; }
.vch-driver-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 10px; margin: -6px -10px;
  border-radius: 8px; cursor: pointer;
  border: none; background: transparent;
  text-align: right; font-family: inherit;
  text-decoration: none; color: inherit;
  transition: background 0.15s;
}
.vch-driver-btn:hover { background: #F5F4EE; }
.vch-driver-btn:hover .vch-title { text-decoration: underline; text-underline-offset: 3px; }
.vch-meta { margin-right: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill-company {
  background: #F5F4EE; color: #6B6B6B;
  font-size: 12px; font-weight: 500; padding: 5px 12px;
  border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
}
.pill-status-active {
  background: #E1F5EE; color: #0F6E56;
  font-size: 12px; font-weight: 500; padding: 5px 12px;
  border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
}
.pill-status-active::before {
  content: ''; width: 6px; height: 6px;
  background: #1D9E75; border-radius: 50%;
}

/* =============================================================
   Vehicle overview cards — 3-card layout (פרטי רכב / מצב הרכב / שיוך ארגוני)
   ============================================================= */
.vc-card {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 12px;
}
.vc-card-title {
  font-size: 15px; font-weight: 500; margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.vc-field-label {
  font-size: 12px; color: #6B6B6B; margin: 0 0 4px;
}
.vc-field-value {
  font-size: 14px; font-weight: 500; margin: 0;
}
.vc-field-row {
  display: flex; justify-content: space-between;
  align-items: center; padding: 6px 0;
}
.vc-divider {
  border: none; border-top: 0.5px solid rgba(0,0,0,0.08); margin: 12px 0;
}

/* contenteditable visual states — scoped to .vc-card to avoid leaking app-wide */
.vc-card [contenteditable="true"] {
  cursor: text; border-radius: 4px; padding: 2px 6px; margin: -2px -6px;
  border: 1px dashed transparent; transition: background 0.12s, border-color 0.12s;
  outline: none; display: inline-block; min-width: 30px;
}
.vc-card [contenteditable="true"]:hover {
  background: #F5F4EE; border-color: rgba(0,0,0,0.12);
}
.vc-card [contenteditable="true"]:focus {
  background: #EEEDFE; border: 1px solid #534AB7;
}
.vc-card [contenteditable="true"].dirty {
  background: #FAEEDA; border: 1px solid #BA7517;
}