/* HBX CRM — Master Stylesheet */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* Page */
  --page-bg:        #DBEAFE;

  /* Cards */
  --card-bg:        #E6EFFF;
  --card-border:    #BFDBFE;
  --card-shadow:    0 2px 8px rgba(30, 64, 175, 0.12), 0 1px 3px rgba(0,0,0,0.04);
  --card-radius:    10px;

  /* Surfaces (modals, inputs) */
  --surface:        #FFFFFF;
  --border:         #E2E8F0;

  /* Text */
  --text-primary:   #1E293B;
  --text:           #1E293B;
  --text-secondary: #64748B;
  --text-muted:     #94A3B8;
  --label-color:    #94A3B8;

  /* Tables */
  --th-bg:          #E6EFFF;
  --th-border:      #BFDBFE;
  --td-border:      #F1F5F9;

  /* Inputs */
  --input-bg:       #FFFFFF;
  --input-border:   #E2E8F0;

  /* Accent */
  --accent:         #2563EB;
  --primary:        #1E40AF;
  --primary-light:  #4A6CF0;

  /* Hover */
  --hover-bg:       #F1F5F9;

  /* Nav */
  --nav-bg-start:   #1E40AF;
  --nav-bg-end:     #2563EB;
  --nav-height:     78px;

  /* Status Colors */
  --status-active-bg:        #D1FAE5;
  --status-active-text:      #047857;
  --status-ready-bg:         #DBEAFE;
  --status-ready-text:       #1E40AF;
  --status-not-started-bg:   #FEF3C7;
  --status-not-started-text: #B45309;
  --status-inactive-bg:      #F1F5F9;
  --status-inactive-text:    #64748B;
  --status-ended-bg:         #FEE2E2;
  --status-ended-text:       #B91C1C;

  /* Semantic colors */
  --green:  #10B981;
  --yellow: #F59E0B;
  --red:    #EF4444;

  /* Typography */
  --font-base: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Dark mode */
[data-theme="dark"] {
  --page-bg:        #0A0E1F;
  --card-bg:        #141937;
  --card-border:    #1F2441;
  --card-shadow:    0 4px 16px rgba(0,0,0,0.4);
  --surface:        #141937;
  --border:         #1F2441;
  --text-primary:   #FFFFFF;
  --text:           #FFFFFF;
  --text-secondary: #8B93B8;
  --text-muted:     #7C85AD;
  --label-color:    #6B7498;
  --th-bg:          #1A2044;
  --th-border:      #1F2441;
  --td-border:      #1A1F36;
  --input-bg:       #0F1428;
  --input-border:   #1F2441;
  --hover-bg:       #1E2647;
  --accent:         #5C7CFA;
  --primary-light:  #5C7CFA;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);
  font-size: 13px;
  background: var(--page-bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }


/* ============================================================
   3. TOP NAV
   ============================================================ */

.navbar {
  background: linear-gradient(90deg, var(--nav-bg-start) 0%, var(--nav-bg-end) 100%);
  display: flex;
  align-items: center;
  min-height: var(--nav-height);
  padding: 14px 28px;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Logo box */
.brand-logo-box {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #1E40AF;
  letter-spacing: -0.5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-name {
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.3px;
}

.brand-tagline {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,0.70);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 2px;
}

.navbar-tabs {
  flex: 1;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  overflow-x: auto;
  scrollbar-width: none;
}
.navbar-tabs::-webkit-scrollbar { display: none; }

.nav-tab {
  padding: 8px 16px;
  background: transparent;
  color: rgba(255,255,255,0.85);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.15s;
  text-decoration: none;
}
.nav-tab:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  transform: translateY(-1px);
}
.nav-tab.active {
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 5px 10px 5px 5px;
  transition: background 0.15s, border-color 0.15s;
}
.user-badge:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.3);
}
.user-badge-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #5C7CFA;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-badge-chevron {
  opacity: 0.6;
  font-size: 9px;
  margin-left: 1px;
  transition: transform 0.15s;
}
.user-dropdown-wrap { position: relative; }
.user-dropdown {
  display: none;
  position: fixed;
  top: calc(var(--nav-height) + 4px);
  right: 28px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  min-width: 160px;
  z-index: 9999;
  overflow: hidden;
}
.user-dropdown.open { display: block; }
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #1E293B;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.user-dropdown-item:hover { background: #F1F5F9; }
.user-dropdown-signout { color: #DC2626; }
.user-dropdown-signout:hover { background: #FEF2F2; }
.user-dropdown-divider { height: 1px; background: #E2E8F0; margin: 2px 0; }
[data-theme="dark"] .user-dropdown { background: #1A2044; border-color: #1F2441; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .user-dropdown-item { color: #E2E8F0; }
[data-theme="dark"] .user-dropdown-item:hover { background: #1E2647; }
[data-theme="dark"] .user-dropdown-divider { background: #1F2441; }
[data-theme="dark"] .user-dropdown-signout { color: #F87171; }
[data-theme="dark"] .user-dropdown-signout:hover { background: #2D1A1A; }

.theme-toggle-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,0.25); }

.btn-logout {
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  white-space: nowrap;
  transition: all 0.15s;
}
.btn-logout:hover { background: rgba(255,255,255,0.25); }

/* Van animation */
@keyframes vanDrive {
  0%   { left: -120px; transform: scaleX(1); }
  45%  { left: calc(100% + 20px); transform: scaleX(1); }
  50%  { left: calc(100% + 20px); transform: scaleX(-1); }
  95%  { left: -120px; transform: scaleX(-1); }
  100% { left: -120px; transform: scaleX(1); }
}
@keyframes vanBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-1px); }
}
.nav-bg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.nav-landscape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
}
.nav-van {
  position: absolute;
  bottom: 2px;
  left: -120px;
  pointer-events: none;
  animation: vanDrive 40s linear infinite;
  opacity: 0.5;
  z-index: 1;
}
.nav-van__inner {
  animation: vanBob 0.3s ease-in-out infinite;
}
.navbar-brand, .navbar-tabs, .navbar-right {
  position: relative;
  z-index: 2;
}


/* ============================================================
   4. PAGE LAYOUT
   ============================================================ */

.main-content {
  display: block;
  width: 100%;
  padding: 28px 32px;
  min-height: calc(100vh - var(--nav-height));
}

.page-header {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.page-header h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin: 0; color: #0F172A; }
.page-sub, .page-subtitle { color: var(--text-muted); font-size: 13px; margin-top: 3px; }
[data-theme="dark"] .page-header h2 { color: #F1F5F9; }
[data-theme="dark"] .page-sub,
[data-theme="dark"] .page-subtitle { color: #8B93B8; }


/* ============================================================
   5. CARDS
   ============================================================ */

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 20px;
  box-shadow: var(--card-shadow);
}
.card.p-0 { padding: 0; overflow: hidden; }

.placeholder-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
}


/* ============================================================
   6. STAT CARDS
   ============================================================ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: var(--text-primary);
  display: block;
  transition: transform 0.1s;
}
.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(30,64,175,0.18);
}

.stat-value, .stat-num { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.stat-card.accent-green .stat-value,
.stat-card.accent-green .stat-num  { color: var(--green); }
.stat-card.accent-yellow .stat-value,
.stat-card.accent-yellow .stat-num { color: var(--yellow); }
.stat-card.accent-blue .stat-value,
.stat-card.accent-blue .stat-num   { color: var(--accent); }
.stat-card.accent-red .stat-value,
.stat-card.accent-red .stat-num    { color: var(--red); }

/* Dashboard layout */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 220px;
  gap: 12px;
  align-items: start;
}
.stat-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.stat-grid-4 .stat-card { margin-bottom: 0; }
.dash-chart-card { margin-bottom: 12px; }
.dash-chart-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.dash-chart-sub { margin: 0 0 12px; font-size: 11px; color: var(--text-muted); }
.chart-toggle-group { display: flex; border: 1px solid var(--card-border); border-radius: 6px; overflow: hidden; }
.chart-toggle { background: var(--input-bg); border: none; padding: 3px 10px; font-size: 11px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.chart-toggle:not(:last-child) { border-right: 1px solid var(--card-border); }
.chart-toggle.active { background: var(--accent); color: #fff; }
.mileage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mileage-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 9px; background: var(--page-bg); border-radius: 6px; font-size: 12px;
}
.sidebar-section { padding: 14px; }
.sidebar-divider { height: 1px; background: var(--card-border); }
.mini-cal { background: var(--page-bg); border-radius: 8px; padding: 8px; border: 1px solid var(--card-border); }
.mini-cal-header { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.mini-cal-day { text-align: center; font-size: 9px; font-weight: 700; color: var(--text-muted); padding: 2px; }
.mini-cal-date { text-align: center; padding: 3px 0; border-radius: 4px; font-size: 10px; color: var(--text-primary); font-weight: 500; }
.mini-cal-date.today { background: linear-gradient(135deg,#1E40AF,#4A6CF0); color:#fff; font-weight:700; }

/* Stat banner */
.stat-banner {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 14px 20px;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.stat-big { font-size: 22px; font-weight: 700; }


/* ============================================================
   7. ALERTS / MESSAGES
   ============================================================ */

.alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.alert-warning, .alert-warning-tag  { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }
.alert-error, .alert-error-tag      { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; }
.alert-success, .alert-success-tag  { background: #D1FAE5; border-color: #6EE7B7; color: #047857; }
.alert-info                         { background: #DBEAFE; border-color: #93C5FD; color: #1E40AF; }
.alert a { color: var(--accent); font-weight: 700; }

.info-banner {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: #1E40AF;
}


/* ============================================================
   8. FORMS
   ============================================================ */

.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--label-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }

input[type=text], input[type=password], input[type=email], input[type=date],
input[type=tel], input[type=number], select, textarea, .input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  background: var(--input-bg);
  font-family: var(--font-base);
  transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus, .input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .input {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}

.input-sm {
  width: auto;
  padding: 5px 10px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--input-bg);
  outline: none;
  font-family: var(--font-base);
}
.input-sm:focus { border-color: var(--accent); }

/* Detail page field labels */
.field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--label-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.field-val { font-size: 13px; color: var(--text-primary); }


/* ============================================================
   9. BUTTONS
   ============================================================ */

.btn-primary {
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #1E40AF, #4A6CF0);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-family: var(--font-base);
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-base);
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--hover-bg); }

.btn-danger {
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  background: #EF4444;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-base);
}
.btn-danger:hover { background: #DC2626; }

.btn-danger-outline {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid #EF4444;
  background: var(--input-bg);
  color: #EF4444;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-base);
}

.btn-green {
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  background: #10B981;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-base);
}
.btn-green:hover { background: #059669; }

.btn-full  { width: 100%; }
.btn-sm    { padding: 6px 14px !important; font-size: 12px !important; }

.btn-xs {
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-base);
}
.btn-xs.btn-primary  { background: linear-gradient(135deg, #1E40AF, #4A6CF0); color: #fff; border: none; }
.btn-xs.btn-danger   { background: #EF4444; color: #fff; }
.btn-xs.btn-green    { background: #10B981; color: #fff; }
.btn-xs.btn-secondary { background: var(--input-bg); border: 1px solid var(--card-border); color: var(--text-primary); }

.btn-icon-del {
  padding: 4px 8px;
  border-radius: 5px;
  border: none;
  background: #FEE2E2;
  color: #B91C1C;
  font-size: 13px;
  cursor: pointer;
  font-weight: 700;
}
.btn-icon-del:hover { background: #FECACA; }


/* ============================================================
   10. TABS
   ============================================================ */

.tab-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: var(--font-base);
}
.tab-btn:hover { background: var(--hover-bg); color: var(--text-primary); }
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.tab-btn-sm {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-base);
}
.tab-btn-sm.active { background: var(--accent); border-color: var(--accent); color: #fff; }


/* ============================================================
   11. TABLES
   ============================================================ */

.table-scroll { overflow-x: auto; }
table, .table { width: 100%; border-collapse: collapse; }

th {
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  background: var(--th-bg);
  border-bottom: 1px solid var(--th-border);
}

td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--td-border);
  font-size: 15px;
  color: var(--text-primary);
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--hover-bg); }

.empty-row {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 32px;
}
.clickable-row { cursor: pointer; }


/* ============================================================
   12. BADGES
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--status-inactive-bg);
  color: var(--status-inactive-text);
}

.badge-active, .badge-status.active          { background: var(--status-active-bg);      color: var(--status-active-text); }
.badge-ready,  .badge-status.ready           { background: var(--status-ready-bg);       color: var(--status-ready-text); }
.badge-ended,  .badge-status.ended           { background: var(--status-ended-bg);       color: var(--status-ended-text); }
.badge-inactive, .badge-status.inactive      { background: var(--status-inactive-bg);    color: var(--status-inactive-text); }
.badge-status.not-started                    { background: var(--status-not-started-bg); color: var(--status-not-started-text); }
.badge-status.pipeline                       { background: #EDE9FE; color: #7C3AED; }
.badge-status.facility                       { background: #FEF3C7; color: #B45309; }
.badge-status.in-shop                        { background: #FEF3C7; color: #B45309; }
.badge-status.out-of-service                 { background: var(--status-ended-bg);       color: var(--status-ended-text); }
.badge-status.retired                        { background: var(--status-inactive-bg);    color: var(--status-inactive-text); }
.badge-followup                              { background: #FEF3C7; color: #92400E; }

/* Badge status (block variant) */
.badge-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* Insurance badge */
.ins-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  background: var(--status-ready-bg);
  color: var(--status-ready-text);
}

/* Yes/No */
.yn { font-size: 12px; font-weight: 700; }

/* Shift badge */
.shift-badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 12px; font-weight: 700; }
.shift-badge.am { background: var(--status-active-bg); color: var(--status-active-text); }
.shift-badge.pm { background: var(--status-ready-bg);  color: var(--status-ready-text); }


/* ============================================================
   13. MODALS
   ============================================================ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: var(--surface);
  border-radius: 14px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  color: var(--text-primary);
}
.modal-box.modal-lg { max-width: 860px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}
.modal-header h3 { font-size: 17px; font-weight: 700; margin: 0; }

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.modal-close:hover { background: var(--hover-bg); }

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--card-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

form.modal-body, .modal-body { padding: 20px 24px; }

/* Forms that sit directly inside a modal-box (wrap content + footer together) */
.modal-box > form {
  padding: 20px 24px 0;
}
.modal-box > form > .modal-footer {
  margin-left: -24px;
  margin-right: -24px;
}


/* ============================================================
   14. DETAIL PAGES
   ============================================================ */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 14px;
  text-decoration: none;
}
.back-link:hover { color: var(--accent); }

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.detail-name { font-size: 22px; font-weight: 700; }

.detail-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.detail-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 24px; }
.detail-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px 24px; }


/* ============================================================
   15. AVATARS
   ============================================================ */

.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.avatar-blue   { background: linear-gradient(135deg, #1E40AF, #4A6CF0); }
.avatar-orange { background: linear-gradient(135deg, #D97706, #F59E0B); }
.avatar-green  { background: linear-gradient(135deg, #059669, #10B981); }


/* ============================================================
   16. COMMUNICATIONS LOG
   ============================================================ */

.comm-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.comm-entry { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--card-border); border-radius: 8px; margin-bottom: 8px; background: var(--surface); }
.comm-type-badge { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--status-inactive-bg); color: var(--status-inactive-text); white-space: nowrap; }
.comm-type-badge.note       { background: #F0F9FF; color: #0284C7; }
.comm-type-badge.call       { background: var(--status-active-bg); color: var(--status-active-text); }
.comm-type-badge.email      { background: #EDE9FE; color: #7C3AED; }
.comm-type-badge.time-change { background: var(--status-not-started-bg); color: var(--status-not-started-text); }
.comm-type-badge.absence    { background: var(--status-ended-bg); color: var(--status-ended-text); }
.comm-note  { font-size: 13px; color: var(--text-primary); flex: 1; }
.empty-comm { text-align: center; color: var(--text-muted); font-size: 13px; padding: 24px; }


/* ============================================================
   17. SECTION LABELS
   ============================================================ */

.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 8px;
  margin-top: 16px;
}
.label-sm { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }


/* ============================================================
   18. DISPATCH
   ============================================================ */

.dispatch-grid { overflow-x: auto; }
.dispatch-table { border-collapse: collapse; min-width: 900px; width: 100%; }
.dispatch-table th,
.dispatch-table td { border: 1px solid var(--card-border); padding: 4px 6px; font-size: 12px; }
.dispatch-table th { background: var(--th-bg); font-weight: 700; text-align: center; }
.dispatch-table th.van-col { min-width: 70px; }
.dispatch-table th.day-col { min-width: 120px; text-align: center; }
.dispatch-slot select {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 11px;
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
}
.dispatch-slot.conflict { background: var(--status-ended-bg); }
.dispatch-slot.today    { background: rgba(92,124,250,0.08); }
.slot-day-head.today    { color: var(--accent); font-weight: 800; }


/* ============================================================
   19. ABSENCE GRID
   ============================================================ */

.absence-day-col { min-width: 180px; }
.absence-entry {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
}


/* ============================================================
   20. COMPLIANCE BUCKETS
   ============================================================ */

.bucket-section { margin-bottom: 24px; }
.bucket-label { font-size: 13px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.bucket-expired { color: #B91C1C; }
.bucket-urgent  { color: #D97706; }
.bucket-soon    { color: #2563EB; }
.bucket-later   { color: #047857; }


/* ============================================================
   21. ROUTE / MAP
   ============================================================ */

.route-label, .dropoff, .pickup { font-size: 12px; }
.route-label.dropoff { color: var(--status-active-text); }
.route-label.pickup  { color: var(--status-ready-text); }
.route-card, .route-card-row {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.route-cards { display: flex; flex-direction: column; gap: 8px; }
.route-grid { display: grid; grid-template-columns: 200px repeat(5, 1fr); gap: 6px; align-items: center; font-size: 12px; }
.route-slot select {
  width: 100%;
  padding: 4px;
  border: 1px solid var(--card-border);
  border-radius: 5px;
  font-size: 11px;
  background: var(--input-bg);
  color: var(--text-primary);
}
.map-embed { width: 100%; border-radius: 8px; border: 1px solid var(--card-border); }
.map-link  { font-size: 12px; color: var(--accent); text-decoration: underline; }


/* ============================================================
   22. MONTHLY VIEW
   ============================================================ */

.month-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.month-cell {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
  background: var(--surface);
  text-decoration: none;
  color: var(--text-primary);
}
.month-cell.active { border-color: var(--accent); background: #EFF6FF; }
.month-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.month-count { font-size: 22px; font-weight: 700; margin-top: 2px; }


/* ============================================================
   23. LOGIN
   ============================================================ */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1E40AF 0%, #2563EB 60%, #DBEAFE 100%);
}

.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.login-header { text-align: center; margin-bottom: 28px; }

.login-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1E40AF, #2563EB);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 auto 14px;
}

.login-header h1 { font-size: 24px; font-weight: 700; color: #1E293B; margin: 0; }
.login-header p  { font-size: 13px; color: #64748B; margin: 4px 0 0; }
.login-form { display: flex; flex-direction: column; gap: 14px; }


/* ============================================================
   24. SAVE INDICATOR
   ============================================================ */

.save-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.save-indicator.saving { background: #FEF3C7; color: #92400E; }
.save-indicator.saved  { background: #D1FAE5; color: #047857; }
.save-indicator.error  { background: #FEE2E2; color: #991B1B; }
.save-dot { width: 6px; height: 6px; border-radius: 50%; background: #10B981; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.save-indicator.saving .save-dot { background: #F59E0B; animation: pulse 1s infinite; }


/* ============================================================
   25. UTILITY
   ============================================================ */

.flex          { display: flex; }
.flex-1        { flex: 1; }
.flex-wrap     { flex-wrap: wrap; }
.gap-1         { gap: 4px; }
.gap-2         { gap: 8px; }
.gap-3         { gap: 12px; }
.gap-4         { gap: 16px; }
.gap-5         { gap: 32px; }
.gap-6         { gap: 48px; }
.align-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end   { justify-content: flex-end; }
.text-center   { text-align: center; }
.ml-auto       { margin-left: auto; }
.ml-2          { margin-left: 8px; }
.mb-0          { margin-bottom: 0; }
.mb-1          { margin-bottom: 4px; }
.mb-2          { margin-bottom: 8px; }
.mb-3          { margin-bottom: 12px; }
.mb-4          { margin-bottom: 16px; }
.mt-1          { margin-top: 4px; }
.mt-2          { margin-top: 8px; }
.mt-3          { margin-top: 12px; }
.p-0           { padding: 0; }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.muted    { color: var(--text-muted); }
.muted-sm { font-size: 13px; color: var(--text-muted); }
.sm       { font-size: 15px; }

.accent       { color: var(--accent); }
.accent-green { color: var(--green); }
.accent-yellow{ color: var(--yellow); }
.accent-blue  { color: var(--accent); }
.accent-red   { color: var(--red); }

.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 15px; }

.divider { border: none; border-top: 1px solid var(--card-border); margin: 16px 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }