/* DispatchDeck - Industrial UI Styles */
/* Based on INDUSTRIAL_UI_SPEC.md */

/* Prevent horizontal scroll globally, allow vertical */
html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100vw !important;
  max-width: 100dvw !important;
  height: auto !important;
}

body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100vw !important;
  max-width: 100dvw !important;
  position: relative;
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Body scroll lock when modal is open */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  /* NOTE: Do NOT use touch-action: none here - it blocks checkbox/button taps */
}
body.modal-open #main-content {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Prevent scroll chaining from modal content to body */
.modal:not(.hidden) {
  overscroll-behavior: contain;
}

/* Ensure modal content is interactive on mobile */
.modal-content {
  touch-action: auto;
}

.modal-body {
  touch-action: pan-y;
}

/* CSS Variables - DispatchDeck Brand Colors */
:root {
  /* Backgrounds */
  --bg-primary: #FFFFFF;
  --bg-page: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-elevated: #F1F5F9;
  --bg-header: #1E293B;
  --bg-dark: #0F172A;

  /* Text */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;

  /* Borders */
  --border-light: #E2E8F0;
  --border-medium: #CBD5E1;
  --border-dark: #94A3B8;

  /* Brand Colors (from logo) */
  --brand-blue: #3B82F6;
  --brand-blue-dark: #2563EB;
  --brand-cyan: #06B6D4;
  --brand-cyan-light: #22D3EE;
  --accent-teal: #06B6D4;  /* alias — used in gradients throughout */
  --brand-navy: #0F172A;
  --brand-slate: #1E293B;

  /* Actions */
  --action-primary: #3B82F6;
  --action-primary-hover: #2563EB;
  --action-accent: #06B6D4;
  --action-success: #059669;
  --action-warning: #D97706;
  --action-danger: #DC2626;

  /* Status Colors (aliases for semantic use) */
  --status-danger: #DC2626;
  --status-success: #059669;
  --status-warning: #D97706;
  --danger: #DC2626;

  /* Shadows - Enhanced for desktop polish */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-button-hover: 0 6px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Scrollbar */
  --scrollbar-width: 8px;
  --scrollbar-track: var(--bg-elevated);
  --scrollbar-thumb: var(--border-medium);
  --scrollbar-thumb-hover: var(--border-dark);
  --scrollbar-radius: 4px;

  /* Modal & Embedded Shadows */
  --shadow-modal: 0 25px 60px -12px rgba(0, 0, 0, 0.28), 0 10px 25px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-modal-elevated: 0 30px 70px -15px rgba(0, 0, 0, 0.3), 0 15px 35px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-inset-subtle: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* ============================================
   CUSTOM SCROLLBARS - Floating Pill Style
   ============================================ */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Modal scrollbar - inset from edges to respect rounded corners */
.modal-content::-webkit-scrollbar {
  width: 12px;
}

.modal-content::-webkit-scrollbar-track {
  background: transparent;
  margin: 16px 0;
}

.modal-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 100px;
  border: 4px solid transparent;
  background-clip: padding-box;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
  overscroll-behavior-y: contain;
}

/* Typography */
h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.25; }
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
p { margin-bottom: var(--spacing-md); }

/* Hidden utility */
.hidden { display: none !important; }

/* ============================================
   APP LAYOUT WITH SIDEBAR
   ============================================ */
#app {
  display: flex;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile browsers */
}

/* ============================================
   SIDEBAR
   ============================================ */
#app-sidebar {
  width: 240px;
  min-width: 240px;
  background: #000000;
  color: var(--text-inverse);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  box-shadow: none;
  overflow-y: auto;
}

.sidebar-brand {
  padding: var(--spacing-lg);
  border-bottom: none;
  background: transparent;
}

.sidebar-logo {
  width: 100%;
  height: auto;
  max-width: 200px;
  mask-image: radial-gradient(ellipse 85% 80% at center, #000 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at center, #000 50%, transparent 100%);
}

#main-nav {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md) 0;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 18px 24px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
  cursor: pointer;
  background: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
}

.nav-item .material-icons {
  font-size: 28px;
  opacity: 0.8;
}

.nav-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.nav-item:hover {
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.05) 100%);
  color: #FFFFFF;
  border-left-color: var(--brand-cyan);
}

.nav-item:hover .material-icons {
  opacity: 1;
  color: var(--brand-cyan-light);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.25) 0%, rgba(6, 182, 212, 0.1) 100%);
  color: #FFFFFF;
  border-left-color: var(--brand-cyan);
  border-left-width: 4px;
}

.nav-item.active .material-icons {
  opacity: 1;
  color: var(--brand-cyan);
}

/* Locked module state */
.nav-item.locked {
  opacity: 0.45;
  cursor: pointer;
}

.nav-item.locked:hover {
  opacity: 0.65;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.nav-item.locked .nav-upgrade-badge {
  opacity: 1;
}

.nav-item .lock-icon {
  font-size: 16px !important;
  margin-left: auto;
  opacity: 0.6;
  color: var(--text-muted);
}

/* Lock/Unlock FAB */
.lock-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  z-index: 999;
  transition: all 0.2s ease;
}
.lock-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.lock-fab .material-icons {
  font-size: 22px;
  color: #dc2626;
}
.lock-fab:not(.unlocked) {
  background: #fef2f2;
  border-color: #fecaca;
}
.lock-fab.unlocked .material-icons {
  color: var(--accent-cyan);
}
.lock-fab.unlocked {
  background: var(--bg-elevated);
  border-color: var(--border-light);
}

@media (max-width: 768px) {
  .lock-fab {
    bottom: 80px; /* Above mobile nav bar */
    right: 16px;
  }
}

.sidebar-footer {
  padding: var(--spacing-md) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-version {
  text-align: center;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  padding: 4px 0;
}

.nav-logout {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;
}

.nav-logout:hover {
  background: rgba(220, 38, 38, 0.2);
  color: #FCA5A5;
  border-left-color: var(--action-danger);
}

.nav-tutorial {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
}

.nav-tutorial:hover {
  background: rgba(6, 182, 212, 0.2);
  color: var(--brand-cyan);
  border-left-color: var(--brand-cyan);
}

/* Main content with sidebar offset */
#main-content {
  flex: 1;
  margin-left: 240px;
  overflow-y: auto;
}
#app-sidebar.hidden ~ #main-content {
  margin-left: 0;
}

/* Mobile: Hide sidebar, show hamburger later */
@media (max-width: 768px) {
  html, body {
    height: auto;
    min-height: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #app {
    display: block;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  #app-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  #app-sidebar.open {
    transform: translateX(0);
  }

  #main-content {
    margin-left: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: auto;
    padding-bottom: 90px; /* Space for mobile nav */
  }
}

/* ============================================
   MOBILE BOTTOM NAVIGATION
   ============================================ */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-page); /* Changed from --bg-card */
  border-top: 1px solid var(--border-light);
  border-top-left-radius: var(--radius-xl); /* Added for consistency */
  border-top-right-radius: var(--radius-xl); /* Added for consistency */
  justify-content: space-around;
  padding: var(--spacing-sm) 0;
  padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
  z-index: 100;
  /* box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); Removed */
}

@media (max-width: 768px) {
  .mobile-nav:not(.hidden) {
    display: flex;
  }
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  min-width: 56px;
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.mobile-nav-item:active {
  transform: scale(0.95);
}

.mobile-nav-item.active {
  color: var(--brand-blue);
}

.mobile-nav-item.locked {
  opacity: 0.4;
}

.mobile-nav-item .material-icons {
  font-size: 24px;
}

.mobile-nav-label {
  font-size: 11px;
  font-weight: 600;
}

/* Mobile More Menu */
.mobile-more-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.mobile-more-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}

.mobile-more-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-page); /* Changed from --bg-card */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Changed for consistency */
  padding: var(--spacing-sm) 0;
  padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
  animation: slideUp 0.2s ease;
  border-top: 1px solid var(--border-light); /* Added for separation */
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.mobile-more-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 20px;
  color: var(--text-primary);
  text-decoration: none;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  text-align: left;
}

.mobile-more-item:active {
  background: var(--bg-elevated);
}

.mobile-more-item .material-icons {
  font-size: 24px;
  color: var(--text-secondary);
}

.mobile-more-danger {
  color: var(--action-danger);
}

.mobile-more-danger .material-icons {
  color: var(--action-danger);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-blue-dark) 0%, var(--brand-cyan) 100%);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 2px solid var(--border-medium);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-secondary:hover {
  background: var(--border-light);
  border-color: var(--border-dark);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

/* Tool button - secondary action */
.btn-tool {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-medium);
  padding: 10px 12px;
  min-width: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn-tool:hover {
  background: var(--bg-card);
  color: var(--action-primary);
  border-color: var(--action-primary);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.btn-tool .material-icons {
  font-size: 20px;
}

/* SMS Tool Button - special highlight */
.btn-tool[onclick*="MassText"],
.btn-tool[onclick*="IndividualText"] {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
  border: none;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.btn-tool[onclick*="MassText"]:hover,
.btn-tool[onclick*="IndividualText"]:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Tool button label */
.btn-tool-label {
  font-weight: 600;
  margin-left: 4px;
  display: none;
}

@media (min-width: 640px) {
  .btn-tool-label {
    display: inline;
  }
}

/* Prominent button - primary creation action */
.btn-prominent {
  padding: 10px 20px;
  font-weight: 600;
}

/* Match Mass Text button size to Add Job */
.btn-tool.btn-mass-text {
  padding: 10px 20px;
  font-weight: 600;
}

/* 811 Permits Button */
.btn-tool.btn-811-submit {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: white;
  border: none;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
  padding: 10px 20px;
  font-weight: 600;
}

.btn-tool.btn-811-submit:hover {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  color: white;
}

.btn-prominent:hover {
  filter: brightness(1.05);
}

.btn-danger {
  background: var(--action-danger);
  color: var(--text-inverse);
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.btn-danger:hover {
  background: #B91C1C;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35), 0 2px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.btn-danger-subtle {
  background: transparent;
  color: #9CA3AF;
  border: none;
  padding: 4px;
  min-width: unset;
}
.btn-danger-subtle:hover {
  color: #DC2626;
  background: #FEE2E2;
}

.btn-block {
  width: 100%;
}

.btn-icon {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.btn-icon:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.btn-icon-xs {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: auto;
}

.btn-icon-xs:hover {
  background: var(--bg-elevated);
  color: var(--action-primary);
}

.btn-icon-xs .material-icons {
  font-size: 18px;
}

/* ============================================
   FORMS
   ============================================ */
.form-group {
  margin-bottom: var(--spacing-md);
}

/* Input with inline action button */
.input-with-action {
  display: flex;
  gap: var(--spacing-sm);
  align-items: stretch;
}

.input-with-action select,
.input-with-action input {
  flex: 1;
  min-width: 0;
}

.btn-add-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  background: var(--bg-elevated);
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add-inline:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: white;
}

.btn-add-inline .material-icons {
  font-size: 20px;
}

/* Smaller inline buttons for tight spaces */
.btn-add-inline-sm {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

.btn-add-inline-sm .material-icons {
  font-size: 18px;
}

label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Checkboxes and radios - use native styling */
input[type="checkbox"],
input[type="radio"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  accent-color: var(--brand-blue);
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}

/* Custom styled checkboxes override the global native rule (needs higher specificity than input[type="checkbox"]) */
input[type="checkbox"].ticket-select-cb {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
}


input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--action-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Checkbox/radio focus - subtle ring instead of border change */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

input::placeholder {
  color: var(--text-muted);
}

/* Enhanced embedded input styling for modal forms */
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="tel"],
.modal input[type="number"],
.modal input[type="date"],
.modal input[type="time"],
.modal select,
.modal textarea {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.06);
  transition: all 0.2s ease;
}

.modal input[type="text"]:hover,
.modal input[type="email"]:hover,
.modal input[type="tel"]:hover,
.modal input[type="number"]:hover,
.modal input[type="date"]:hover,
.modal input[type="time"]:hover,
.modal select:hover,
.modal textarea:hover {
  border-color: #CBD5E1;
  background: #F1F5F9;
}

.modal input[type="text"]:focus,
.modal input[type="email"]:focus,
.modal input[type="tel"]:focus,
.modal input[type="number"]:focus,
.modal input[type="date"]:focus,
.modal input[type="time"]:focus,
.modal select:focus,
.modal textarea:focus {
  background: #FFFFFF;
  border-color: #3B82F6;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.04),
              0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modal textarea {
  min-height: 80px;
  resize: vertical;
}

/* Slightly darker placeholder for better contrast on light bg */
.modal input::placeholder,
.modal textarea::placeholder {
  color: #94A3B8;
}

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--bg-page); /* Changed from --bg-card */
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); /* Increased radius */
  padding: var(--spacing-lg);
  /* box-shadow: var(--shadow-sm); Removed via variable */
}

.card-header {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

/* ============================================
   LOADING
   ============================================ */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--text-muted);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-light);
  border-top-color: var(--action-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--spacing-md);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-spinner-small {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-light);
  border-top-color: var(--action-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

.btn-loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
  background: #64748B !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* ============================================
   MODALS
   ============================================ */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-md);
  overflow: hidden;
}

/* Task Detail modal must layer above other modals (e.g. Work Order History) */
#modal-task-detail {
  z-index: 1050;
}

/* Password reset modal must appear above auth modal */
#password-reset-modal {
  z-index: 1100;
}

.modal-content {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  touch-action: auto;
}

/* Modal header with integrated close button */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.modal-header h2,
.modal-header h3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.modal-header .material-icons {
  font-size: 22px;
  color: var(--brand-blue);
}

/* Close button - intentional, accessible design */
.modal-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.modal-close:hover {
  background: var(--bg-elevated);
  border-color: var(--border-medium);
  color: var(--text-primary);
}

.modal-close:active {
  transform: scale(0.95);
}

/* Modal body with inset scrollbar */
.modal-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--spacing-lg);
  padding-right: calc(var(--spacing-lg) - 4px);
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  scrollbar-width: thin;
}

.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: transparent;
  margin: 12px 0;
}

.modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 100px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Modal footer */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

/* Settings modal - sticky footer on mobile */
#settings-modal .modal-content {
  display: flex;
  flex-direction: column;
  max-width: 480px;
  max-height: 90vh;
  max-height: 90dvh;
}

#settings-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#settings-modal .modal-footer {
  position: sticky;
  bottom: 0;
  background: white;
}

/* Force checkboxes visible in settings modal */
#settings-modal input[type="checkbox"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
  position: static !important;
  transform: none !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
  z-index: 10;
}

@media (max-width: 768px) {
  /* Only apply these styles when modal is NOT hidden */
  #settings-modal:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  #settings-modal:not(.hidden) .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    max-height: 95vh !important;
    max-height: 95dvh !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

/* PIN Module Checkboxes - touch-friendly */
.pin-module-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.pin-module-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pin-module-option:active {
  background: var(--bg-surface);
  transform: scale(0.98);
}

.pin-module-option input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  accent-color: var(--action-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.pin-module-option span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
}

.pin-module-option:has(input:checked) {
  border-color: var(--action-primary);
  background: rgba(59, 130, 246, 0.05);
}

.pin-module-option:has(input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Scrollable modal forms - for modals with lots of content */
.modal-form-scrollable {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.modal-form-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg);
  padding-right: calc(var(--spacing-lg) - 4px);

  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0) transparent;
}

.modal-form-scroll:hover,
.modal-form-scroll:focus-within {
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* Webkit scrollbar - thin pill style, inset from edges */
.modal-form-scroll::-webkit-scrollbar {
  width: 8px;
}

.modal-form-scroll::-webkit-scrollbar-track {
  background: transparent;
  margin: 16px 0; /* Inset from top/bottom rounded corners */
  margin-right: 4px; /* Inset from right edge */
}

.modal-form-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0);
  border-radius: 100px; /* Full pill radius */
  border: 2px solid transparent; /* Creates inset from track edge */
  background-clip: content-box;
  transition: background 0.2s ease;
}

.modal-form-scroll:hover::-webkit-scrollbar-thumb,
.modal-form-scroll:focus-within::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  background-clip: content-box;
}

.modal-form-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
  background-clip: content-box;
}

/* Modal form footer (inside scrollable forms) */
.modal-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
  background: var(--bg-card);
}

/* Auth Modal - Sharp / Cutting Edge Theme */
#auth-modal .modal-content {
  background: linear-gradient(180deg, #040810 0%, #000104 40%);
  color: #f0f0f0;
  position: relative;
  border: 1px solid rgba(6, 182, 212, 0.4);
  border-radius: 3px;
  max-width: 600px;
  max-height: 95vh;
  overflow-y: auto;
  box-shadow:
    0 0 80px rgba(6, 182, 212, 0.15),
    0 0 160px rgba(6, 182, 212, 0.06),
    0 4px 30px rgba(0, 0, 0, 0.7);
  -webkit-overflow-scrolling: touch;
}

.auth-modal-content {
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, #06B6D4, rgba(6, 182, 212, 0.2) 30%, rgba(6, 182, 212, 0.2) 70%, #06B6D4) 1;
}

/* Mobile auth modal - ensure scrollable */
@media (max-width: 480px), (display-mode: standalone) and (max-width: 480px) {
  #auth-modal {
    padding: 0;
    align-items: flex-start;
  }
  #auth-modal .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
    border: none;
    overflow-y: scroll;
    padding-bottom: 40px;
    box-shadow: none;
  }
  .auth-modal-content {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  #auth-modal .auth-header img {
    width: 220px !important;
  }
}

/* Auth buttons */
#auth-modal .btn-primary {
  background: linear-gradient(135deg, #3B82F6, #06B6D4);
  border: 1px solid rgba(6, 182, 212, 0.5);
  border-radius: 24px;
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.3);
  transition: box-shadow 0.15s ease, filter 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

#auth-modal .btn-primary:hover {
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.5);
  filter: brightness(1.15);
  transform: none;
}

#auth-modal .btn-secondary {
  background: transparent;
  border: 1px solid #444;
  border-radius: 2px;
  color: #ccc;
}

#auth-modal .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #555;
}

/* Demo button — secondary CTA on login screen */
.btn-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 24px;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--brand-blue, #3B82F6), var(--accent-teal, #06B6D4));
  border: 1px solid rgba(6, 182, 212, 0.4);
  border-radius: 24px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3);
}

.btn-demo:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
  filter: brightness(1.1);
}

.btn-demo:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
  filter: brightness(0.95);
}

.btn-demo-label {
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.btn-demo-sub {
  font-size: 0.72em;
  font-weight: 400;
  opacity: 0.75;
  letter-spacing: 0.3px;
}

/* Social Sign-In Buttons */
.social-auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-social:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-social:active {
  transform: translateY(0);
}

.btn-social:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-google {
  background: #fff;
  color: #3c4043;
  border-color: #dadce0;
}

.btn-google:hover {
  background: #f8f9fa;
  border-color: #c6c6c6;
}


/* Social Company Name Modal — dark theme to match auth modal */
.social-company-modal {
  max-width: 380px;
  margin: auto;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: linear-gradient(180deg, #0a1628 0%, #040810 100%);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
}
.social-company-modal input[type="text"],
.social-company-modal input[type="password"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Driver Access Button */
.btn-driver-access {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(0, 188, 212, 0.08);
  border: 1px solid rgba(0, 188, 212, 0.3);
  border-radius: var(--radius-md);
  color: var(--brand-cyan);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-driver-access:hover {
  background: rgba(0, 188, 212, 0.15);
  border-color: var(--brand-cyan);
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 188, 212, 0.2);
}

.btn-driver-access .material-icons {
  font-size: 20px;
}

/* Driver PIN Form */
#driver-pin-form input[type="tel"] {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  color: #fff;
  padding: 16px;
}

#driver-pin-form input[type="tel"]:focus {
  outline: none;
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

#driver-pin-form input[type="tel"]::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Driver Mode Header */
.driver-mode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--accent-teal) 100%);
  color: white;
  font-size: 0.9rem;
}

.driver-mode-header .driver-name {
  font-weight: 600;
}

.driver-mode-header .btn-exit-driver {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  color: white;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.driver-mode-header .btn-exit-driver:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Hide dispatcher-only elements in driver mode */
body.driver-mode-pin .dispatcher-only,
body.driver-mode-pin .btn-mass-text {
  display: none !important;
}

.auth-header {
  text-align: center;
  margin-bottom: 0;
}

/* Logo size is set via inline style in index.html to avoid mobile !important conflicts.
   To change logo size, edit the <img style="width:800px;..."> in index.html */
.auth-logo {
  height: auto;
  margin-bottom: var(--spacing-lg);
}

.auth-header p {
  color: #ffffff;
  margin-bottom: 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #c0c0c0 0%, #ffffff 50%, #c0c0c0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#auth-modal .form-group label {
  color: #9ca3af;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#auth-modal .form-control {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  color: #f0f0f0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#auth-modal .form-control:focus {
  border-color: rgba(6, 182, 212, 0.6);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15), 0 0 12px rgba(6, 182, 212, 0.1);
  background: #0c0c10;
  outline: none;
}

#auth-modal .form-control::placeholder {
  color: #555;
}

#auth-modal .auth-divider span {
  background: #000104;
  color: #888;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.auth-or-divider {
  color: #555;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: relative;
}

.auth-or-divider::before,
.auth-or-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.3));
}

.auth-or-divider::after {
  background: linear-gradient(270deg, transparent, rgba(6, 182, 212, 0.3));
}

.auth-or-divider::before {
  left: 5%;
}

.auth-or-divider::after {
  right: 5%;
}

.auth-form {
  margin-top: 0;
}

#auth-modal .form-group {
  margin-bottom: var(--spacing-lg);
}

/* Password visibility toggle */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper input {
  flex: 1;
  padding-right: 44px !important;
}

.password-toggle {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle:hover {
  color: #374151;
}

.password-toggle .material-icons {
  font-size: 20px;
}

/* Plan Selection Cards */
.plan-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.plan-card {
  cursor: pointer;
  display: block;
}

.plan-card-inner {
  background: var(--bg-elevated);
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  transition: all 0.15s ease;
  position: relative;
}

.plan-card:hover .plan-card-inner {
  border-color: var(--brand-blue);
  background: var(--bg-card);
}

.plan-card input:checked + .plan-card-inner {
  border-color: var(--brand-cyan);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.plan-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.plan-price {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--brand-cyan);
}

.plan-price small {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.plan-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.plan-features span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.plan-features span::before {
  content: '✓';
  color: var(--action-success);
  font-weight: bold;
}

.plan-popular {
  position: absolute;
  top: -10px;
  right: var(--spacing-md);
  background: var(--brand-cyan);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
}

#auth-modal .plan-card-inner {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

#auth-modal .plan-card:hover .plan-card-inner {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--brand-cyan);
}

#auth-modal .plan-card input:checked + .plan-card-inner {
  background: rgba(6, 182, 212, 0.1);
  border-color: var(--brand-cyan);
}

#auth-modal .plan-features {
  color: rgba(255, 255, 255, 0.7);
}

#auth-modal #selected-plan-display {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: var(--spacing-lg) 0;
  color: var(--text-muted);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

.auth-divider span {
  padding: 0 var(--spacing-md);
  font-size: 0.875rem;
}

.auth-switch {
  text-align: center;
  margin-top: var(--spacing-lg);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

#auth-modal .auth-switch {
  color: #888;
  font-size: 0.9rem;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid #1a1a1a;
}

#auth-modal .auth-divider::before,
#auth-modal .auth-divider::after {
  background: #222;
}

.auth-switch a {
  color: var(--action-primary);
  text-decoration: none;
  font-weight: 500;
}

#auth-modal .auth-switch a {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#auth-modal .auth-switch a:hover {
  color: var(--primary);
}

.auth-switch a:hover {
  text-decoration: underline;
}

.auth-forgot {
  text-align: center;
  margin-top: var(--spacing-md);
  font-size: 0.875rem;
}

.auth-forgot a {
  color: var(--text-muted);
  text-decoration: none;
}

#auth-modal .auth-forgot a {
  color: #9ca3af;
}

.auth-forgot a:hover {
  color: var(--action-primary);
  text-decoration: underline;
}

#auth-modal .auth-forgot a:hover {
  color: #ffffff;
}

.auth-error {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: #FEE2E2;
  border: 1px solid #FCA5A5;
  border-radius: var(--radius-md);
  color: #991B1B;
  font-size: 0.875rem;
}

.auth-version {
  text-align: center;
  margin-top: var(--spacing-lg);
  font-size: 0.75rem;
  color: #9ca3af;
}

.auth-version a {
  color: #9ca3af;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-version a:hover {
  color: #d1d5db;
}

/* Mobile Auth Modal - iOS Safari compatible + TWA standalone */
@media screen and (max-width: 768px), (display-mode: standalone) and (max-width: 768px) {
  /* Reset for iOS */
  * {
    -webkit-text-size-adjust: 100%;
  }

  #auth-modal {
    padding: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #auth-modal .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    overflow-y: auto !important;
  }

  .auth-modal-content {
    padding: 24px 20px !important;
  }

  /* NOTE: Logo size is controlled via inline style in index.html (style="width:800px;max-width:95%")
     to override these !important rules. To change logo size, edit the <img> tag directly.
     The max-width:95% ensures it still fits on mobile screens. */
  .auth-logo {
    max-width: 95% !important;
    height: auto !important;
    margin-bottom: 8px !important;
  }

  .auth-header {
    margin-bottom: 20px !important;
    text-align: center !important;
  }

  .auth-header p {
    font-size: 14px !important;
    margin: 4px 0 0 0 !important;
    color: #64748b !important;
  }

  .auth-form {
    margin-top: 0 !important;
  }

  .auth-form .form-group {
    margin-bottom: 14px !important;
  }

  .auth-form label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
    display: block !important;
  }

  .auth-form input[type="email"],
  .auth-form input[type="password"],
  .auth-form input[type="text"] {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    min-height: 48px !important;
    height: 48px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .auth-form input::placeholder {
    font-size: 15px !important;
    color: #9ca3af !important;
  }

  .auth-form .btn,
  .auth-form button[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    -webkit-appearance: none !important;
  }

  #btn-demo {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    -webkit-appearance: none !important;
  }

  .auth-divider {
    margin: 16px 0 !important;
    font-size: 13px !important;
    color: #9ca3af !important;
  }

  .auth-switch {
    font-size: 14px !important;
    margin-top: 20px !important;
    color: #6b7280 !important;
  }

  .auth-switch a {
    font-size: 14px !important;
  }
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
#toast-container {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.toast {
  background: var(--bg-card);
  border-left: 4px solid var(--action-primary);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.3s ease;
  max-width: 360px;
}

.toast.success { border-left-color: var(--action-success); }
.toast.error { border-left-color: var(--action-danger); }
.toast.warning { border-left-color: var(--action-warning); }
.toast { display: flex; align-items: center; gap: 8px; }
.toast-action {
  background: none;
  border: none;
  color: var(--brand-blue);
  font-weight: 700;
  cursor: pointer;
  padding: 0 0 0 12px;
  font-size: 0.875rem;
  text-decoration: underline;
  white-space: nowrap;
}

.toast-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
  animation: slideDown 0.3s ease;
}
.toast-banner.success {
  background: var(--action-success);
  color: white;
}
.toast-banner.info {
  background: var(--action-primary);
  color: white;
}
.toast-banner.warning {
  background: var(--action-warning);
  color: white;
}
.toast-banner.error {
  background: var(--action-danger);
  color: white;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Email Verification Reminder Banner */
.verification-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan));
  color: white;
  padding: 12px 20px;
  animation: slideDown 0.3s ease;
}

/* Push content down when verification banner is showing */
body.has-verification-banner #main-content {
  padding-top: calc(var(--spacing-lg) + 50px);
}
.verification-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
  font-size: 14px;
}
.verification-banner .material-icons {
  font-size: 20px;
}
.verification-banner .btn-sm {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 6px;
}
.verification-banner .btn-sm:hover {
  background: rgba(255,255,255,0.3);
}
.verification-banner .btn-icon {
  background: none;
  border: none;
  color: white;
  opacity: 0.8;
  cursor: pointer;
  padding: 4px;
}
.verification-banner .btn-icon:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .verification-banner {
    padding: 8px 12px;
  }
  .verification-banner-content {
    gap: 8px;
    font-size: 13px;
  }
  .verification-banner .material-icons:first-child {
    display: none;
  }
  .verification-banner .btn-sm {
    padding: 3px 10px;
    font-size: 11px;
    white-space: nowrap;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ============================================
   TRIAL REMINDER BANNER
   ============================================ */
.trial-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: white;
  padding: 12px 20px;
  animation: slideDown 0.3s ease;
}
.trial-banner.trial-urgent {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  animation: slideDown 0.3s ease, pulse 2s infinite;
}
body.has-trial-banner #main-content {
  padding-top: calc(var(--spacing-lg) + 50px);
}
.trial-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
  font-size: 14px;
}
.trial-banner .material-icons {
  font-size: 20px;
}
.trial-banner .btn-sm {
  background: rgba(255,255,255,0.25);
  color: white;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 6px;
  font-weight: 600;
}
.trial-banner .btn-sm:hover {
  background: rgba(255,255,255,0.4);
}
.trial-banner .btn-icon {
  background: none;
  border: none;
  color: white;
  opacity: 0.8;
  cursor: pointer;
  padding: 4px;
}
.trial-banner .btn-icon:hover {
  opacity: 1;
}
@media (max-width: 768px) {
  .trial-banner {
    padding: 8px 12px;
  }
  .trial-banner-content {
    gap: 8px;
    font-size: 13px;
  }
  .trial-banner .material-icons:first-child {
    display: none;
  }
  .trial-banner .btn-sm {
    padding: 3px 10px;
    font-size: 11px;
    white-space: nowrap;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

@keyframes activePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15); }
}

.badge-active-shift {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #DC2626;
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  padding: 1px 6px;
  border-radius: 8px;
  animation: activePulse 2s ease-in-out infinite;
  vertical-align: middle;
  margin-left: 4px;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
#main-content {
  padding: var(--spacing-lg) var(--spacing-xl);
}

/* Center view content on wide desktop screens */
#main-content > [id^="view-"] {
  max-width: 1100px;
  margin: 0 auto;
}

/* Dispatch needs full width for calendar/lanes */
#main-content > #view-dispatch {
  max-width: 100%;
}

/* ============================================
   MOBILE OVERRIDES
   ============================================ */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }

  body {
    font-size: 15px;
  }

  h1 { font-size: 1.25rem !important; }
  h2 { font-size: 1.1rem !important; }
  h3 { font-size: 1rem !important; }

  .btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.8125rem;
  }

  input, select, textarea {
    padding: 8px 10px !important;
    font-size: 0.875rem !important;
    min-height: 40px;
  }

  label {
    font-size: 0.8125rem !important;
    margin-bottom: 4px;
  }

  .form-group {
    margin-bottom: 12px;
  }

  #main-content {
    padding: 8px 8px 90px 8px;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #main-content > [id^="view-"] {
    max-width: 100%;
  }

  .card {
    padding: 12px;
    border-radius: 8px;
  }

  #toast-container {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }

  .toast {
    max-width: none;
    font-size: 0.8125rem;
  }
}

/* ============================================
   EMPTY STATES
   ============================================ */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.empty-state-icon {
  font-size: 64px;
  margin-bottom: var(--spacing-md);
  opacity: 0.6;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--bg-secondary), var(--bg-main));
  box-shadow:
    inset 4px 4px 8px rgba(0, 0, 0, 0.15),
    inset -2px -2px 6px rgba(255, 255, 255, 0.7);
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.empty-state-text {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-lg);
}

/* Dispatch-specific empty state */
.empty-state-dispatch {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin: var(--spacing-md) 0;
}

.empty-state-btn {
  margin-top: var(--spacing-md);
}

/* ============================================
   ROSTER MODULE
   ============================================ */
.roster-view {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.roster-tabs {
  display: flex;
  gap: var(--spacing-sm);
  background: var(--bg-page);
  padding: var(--spacing-xs);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.roster-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.roster-tab:hover {
  background: var(--bg-elevated); /* Use solid elevated background for hover */
  color: var(--text-primary);
}

.roster-tab.active {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
  font-weight: 600;
}

.roster-tab.active .material-icons {
  color: #FFFFFF;
}

.roster-tab .material-icons {
  font-size: 28px;
}

.tab-count {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.roster-tab.active .tab-count {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  font-weight: 700;
}

.roster-content {
  background: var(--bg-page); /* Changed from --bg-card */
  border-radius: var(--radius-xl); /* Increased radius */
  border: 1px solid var(--border-light); /* Added border for separation */
  overflow: clip; /* Use clip instead of hidden to allow scroll events to propagate */
}

.roster-panel {
  display: none;
  padding: var(--spacing-lg);
}

.roster-panel.active {
  display: block;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.panel-header h2 {
  margin: 0;
}

/* Roster Filter Bar */
.roster-filter-bar {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.roster-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0 var(--spacing-md);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.roster-search:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.roster-search .material-icons {
  color: var(--text-muted);
  font-size: 20px;
}

.roster-search input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--spacing-md) 0;
  font-size: 0.9375rem;
  color: var(--text-primary);
  min-width: 0;
}

.roster-search input:focus {
  outline: none;
  box-shadow: none;
}

.roster-search input::placeholder {
  color: var(--text-muted);
}

.roster-filter-bar select {
  width: auto;
  min-width: 140px;
  flex-shrink: 0;
  padding: var(--spacing-md) var(--spacing-lg);
  padding-right: 36px;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: var(--bg-card);
  background-image:
    linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.03) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M3 4.5L6 8l3-3.5H3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center, right 12px center;
  background-size: auto, 12px;
  font-size: 0.9375rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.roster-filter-bar select:hover {
  border-color: var(--border-medium);
  background-color: var(--bg-elevated);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.roster-filter-bar select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 480px) {
  .roster-filter-bar {
    flex-direction: column;
  }

  .roster-filter-bar select {
    width: 100%;
  }

  .roster-filter-bar .btn-toggle-inactive {
    width: auto;
    align-self: center;
  }
}

/* Toggle Inactive Button */
.btn-toggle-inactive {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-toggle-inactive:hover {
  border-color: var(--border-medium);
  background: var(--bg-elevated);
}

.btn-toggle-inactive.active {
  border-color: var(--brand-blue);
  background: rgba(59, 130, 246, 0.1);
  color: var(--brand-blue);
}

.btn-toggle-inactive .material-icons {
  font-size: 18px;
}

.btn-toggle-inactive .toggle-label {
  display: inline;
}

@media (max-width: 600px) {
  .btn-toggle-inactive {
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-xs);
    width: auto;
    justify-content: center;
    font-size: 0.75rem;
  }
  .btn-toggle-inactive .material-icons {
    font-size: 16px;
  }
}

.roster-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.roster-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: background 0.2s, box-shadow 0.2s;
  touch-action: pan-y; /* Allow vertical scrolling through cards */
}

.roster-card:hover {
  background: var(--border-light); /* Changed from --bg-elevated */
}

.roster-card-clickable {
  cursor: pointer;
}

.roster-card-clickable:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.roster-card-clickable:active {
  transform: scale(0.99);
}

.roster-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
  position: relative;
}

/* Muted notification badge on avatar */
.muted-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background: var(--action-danger);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-card);
}

.muted-badge .material-icons {
  font-size: 12px;
  color: white;
}

/* Mute toggle button active state */
.btn-muted-active {
  background: var(--action-danger) !important;
  color: #fff !important;
  border-color: var(--action-danger) !important;
}
.btn-muted-active .material-icons { color: #fff !important; }
.btn-muted-active:hover {
  background: #b91c1c !important;
}

.muted-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--action-danger);
  background: rgba(220, 38, 38, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
}

.roster-card.muted {
  opacity: 0.7;
}

/* DVIR Accountability Flag styles */
.dvir-flag-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: var(--action-danger);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-card);
  animation: dvir-flag-pulse 1.5s ease-in-out infinite;
  cursor: pointer;
  z-index: 2;
}

.dvir-flag-badge .material-icons {
  font-size: 11px;
  color: white;
}

.dvir-flag-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--action-danger);
  background: rgba(220, 38, 38, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
  animation: dvir-flag-pulse 1.5s ease-in-out infinite;
}

.fleet-card-dvir-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  margin-left: auto;
  background: rgba(220, 38, 38, 0.1);
  border-radius: var(--radius-sm);
  color: var(--action-danger);
  animation: dvir-flag-pulse 1.5s ease-in-out infinite;
  cursor: pointer;
}

.fleet-card-dvir-flag .material-icons {
  font-size: 14px;
}

@keyframes dvir-flag-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* DVIR Flag Modal */
.dvir-flag-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.dvir-flag-modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  max-width: 420px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.dvir-flag-modal h3 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--action-danger);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.dvir-flag-item {
  padding: var(--spacing-sm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
}

.dvir-flag-item-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.dvir-flag-item-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* DVIR Missed Counter (Edit Person modal) */
.dvir-stats-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dvir-missed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 14px;
  background: #FEE2E2;
  color: #DC2626;
  font-weight: 700;
  font-size: 0.85rem;
}
.dvir-stats-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.dvir-stats-reset {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
.dvir-stats-reset:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.dvir-stats-reset .material-icons {
  font-size: 16px;
}
.dvir-stats-none {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* JSA Accountability Flag styles (orange variant of DVIR) */
.jsa-flag-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 18px;
  height: 18px;
  background: #F59E0B;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-card);
  animation: dvir-flag-pulse 1.5s ease-in-out infinite;
  cursor: pointer;
  z-index: 2;
}
.jsa-flag-badge .material-icons {
  font-size: 11px;
  color: white;
}
.jsa-flag-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #D97706;
  background: rgba(245, 158, 11, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
  animation: dvir-flag-pulse 1.5s ease-in-out infinite;
}
.jsa-missed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 14px;
  background: #FEF3C7;
  color: #D97706;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Inactive person styles */
.inactive-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background: var(--text-muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-card);
}

.inactive-badge .material-icons {
  font-size: 12px;
  color: white;
}

.inactive-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 6px;
}

.roster-card.inactive {
  opacity: 0.5;
}

.roster-card.inactive .roster-card-avatar {
  filter: grayscale(100%);
}

.roster-card.compliance-alert {
  border-color: #dc2626;
  border-width: 2px;
}

.roster-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.roster-card-icon .material-icons {
  font-size: 24px;
}

.roster-card-info {
  flex: 1;
  min-width: 0;
}

.roster-card-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.roster-card-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.roster-card-actions {
  display: flex;
  gap: var(--spacing-xs);
}

.roster-card-actions .btn-icon {
  color: var(--text-muted);
  padding: var(--spacing-sm);
}

.roster-card-actions .btn-icon:hover {
  background: var(--border-light);
  color: var(--text-primary);
}

.roster-card-actions .btn-icon-danger {
  color: #dc2626;
}

.roster-card-actions .btn-icon-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.roster-card-chevron {
  color: var(--text-muted);
  font-size: 20px;
  margin-left: auto;
  opacity: 0.5;
  flex-shrink: 0;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-transform: capitalize;
}

.badge-driver { background: #DBEAFE; color: #1E40AF; }
.badge-mechanic { background: #FEF3C7; color: #92400E; }
.badge-dispatcher { background: #F3E8FF; color: #6B21A8; }
.badge-admin { background: #DCFCE7; color: #166534; }
.badge-owner { background: #FEE2E2; color: #991B1B; }

.badge-truck { background: #DBEAFE; color: #1E40AF; }
.badge-van { background: #DCFCE7; color: #166534; }
.badge-pickup { background: #F3F4F6; color: #374151; }

.badge-flatbed { background: #DBEAFE; color: #1E40AF; }
.badge-enclosed { background: #FEF3C7; color: #92400E; }
.badge-utility { background: #F3F4F6; color: #374151; }
.badge-other { background: #E5E7EB; color: #4B5563; }

/* Fallback badge for custom types (teal tint) */
.badge[class*="badge-"]:not(.badge-truck):not(.badge-van):not(.badge-pickup):not(.badge-flatbed):not(.badge-enclosed):not(.badge-utility):not(.badge-other):not(.badge-equipment):not(.badge-tool):not(.badge-owner):not(.badge-driver):not(.badge-mechanic):not(.badge-admin):not(.badge-active):not(.badge-inactive):not(.badge-pending):not(.badge-hold):not(.badge-quantity):not(.badge-individual) {
  background: #CCFBF1; color: #0F766E;
}

/* Select with (+) add button for custom types */
.select-with-add { display: flex; gap: 6px; align-items: center; }
.select-with-add select { flex: 1; }
.btn-add-type {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%; border: 1.5px solid var(--border-color);
  background: var(--bg-elevated); color: var(--text-primary);
  cursor: pointer; padding: 0; transition: all 0.15s ease;
}
.btn-add-type:hover { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.btn-add-type .material-icons { font-size: 18px; }

/* Inline type creation prompt */
.inline-type-prompt { margin-top: 6px; }
.inline-type-form { display: flex; gap: 4px; align-items: center; }
.inline-type-input {
  flex: 1; padding: 6px 10px; border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm); font-size: 0.875rem;
  background: var(--bg-elevated); color: var(--text-primary);
}
.inline-type-input:focus { border-color: var(--brand-blue); outline: none; }
.btn-inline-save .material-icons { color: #16A34A; }
.btn-inline-cancel .material-icons { color: #DC2626; }
.custom-type-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.custom-type-list-label { font-size: 0.75rem; color: var(--text-secondary); width: 100%; }
.custom-type-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 6px 2px 10px; border-radius: 20px;
  background: var(--bg-elevated); border: 1px solid var(--border-color);
  font-size: 0.8rem; color: var(--text-primary);
}
.btn-remove-type {
  background: none; border: none; cursor: pointer; padding: 2px;
  display: flex; align-items: center; border-radius: 50%;
}
.btn-remove-type .material-icons { font-size: 14px; color: var(--text-secondary); }
.btn-remove-type:hover .material-icons { color: #DC2626; }

/* Inspection Due Flag */
.inspection-due-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  margin-left: 8px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-sm);
  color: #d97706;
  font-size: 0.7rem;
  font-weight: 600;
  animation: flag-pulse 2s ease-in-out infinite;
  vertical-align: middle;
}

.inspection-due-flag .material-icons {
  font-size: 14px;
}

@keyframes flag-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Document count label in edit modals */
.doc-count-label {
  font-size: 0.8rem;
  font-weight: normal;
  color: var(--text-muted);
}

.doc-count-label.at-limit {
  color: var(--action-warning);
  font-weight: 600;
}

/* Flag options section */
.flag-options {
  padding: var(--spacing-md);
  background: rgba(245, 158, 11, 0.05);
  border-radius: var(--radius-md);
  border: 1px solid rgba(245, 158, 11, 0.15);
  margin-top: var(--spacing-sm);
}

/* Document display in info modals */
.docs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.doc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.875rem;
  transition: background 0.2s, transform 0.1s;
  border: 1px solid var(--border-light);
}

.doc-link:hover {
  background: var(--border-light);
  transform: translateY(-1px);
}

.doc-link .material-icons {
  font-size: 18px;
  color: var(--brand-blue);
}

.doc-link-name {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modal enhancements */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
}

.modal-header h3 {
  margin: 0;
}

.modal-header .btn-icon {
  color: var(--text-muted);
}

.modal-header .btn-icon:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Safety Hold Modal */
.modal-header-danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-header-danger h3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: white;
  margin: 0;
}

.modal-header-danger .material-icons {
  font-size: 24px;
}

.safety-hold-info {
  text-align: center;
  padding: var(--spacing-md) 0;
}

.safety-hold-unit {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.safety-hold-message {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.5;
}

.safety-hold-defects {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  text-align: left;
}

.safety-hold-defect-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
}

.safety-hold-defect-item:not(:last-child) {
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

.safety-hold-defect-item .material-icons {
  color: #ef4444;
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.defect-description {
  color: var(--text-primary);
  font-weight: 500;
}

.defect-date {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: 2px;
}

.safety-hold-action {
  color: var(--text-muted);
  font-style: italic;
}

/* AI Button Styles */
.btn-ai {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ai:hover {
  background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
  transform: translateY(-1px);
  box-shadow: none;
}

.btn-ai .material-icons {
  font-size: 18px;
}

.btn-ai-disabled {
  background: linear-gradient(135deg, #9CA3AF 0%, #B0B8C4 100%);
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-ai-disabled:hover {
  background: linear-gradient(135deg, #9CA3AF 0%, #B0B8C4 100%);
  transform: none;
  box-shadow: none;
}

/* AI Prompt Section */
.ai-prompt-section {
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
  border: 1px solid #DDD6FE;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin: 0 var(--spacing-lg) var(--spacing-md);
}

.ai-prompt-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: #6D28D9;
}

.ai-prompt-header .material-icons {
  font-size: 20px;
}

.ai-prompt-section textarea {
  background: white;
  border: 1px solid #DDD6FE;
  margin-bottom: var(--spacing-sm);
}

.ai-prompt-section textarea:focus {
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.ai-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* Spinning animation for loading */
.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.modal-content form {
  padding: var(--spacing-lg);
}

.modal-body {
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-inset-subtle);
  background: var(--bg-page);
  border-radius: var(--radius-md);
  margin: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
}

.modal-small {
  max-width: 360px;
}

.form-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

/* Mobile roster styles */
@media (max-width: 768px) {
  .roster-tabs {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .roster-tab {
    flex: 1;
    min-width: 0;
    padding: 10px 6px;
    font-size: 0.75rem;
    flex-direction: column;
    gap: 2px;
  }

  .roster-tab .material-icons {
    font-size: 20px;
  }

  .roster-tab span:not(.material-icons):not(.tab-count) {
    display: none;
  }

  .roster-tab .tab-count {
    font-size: 0.7rem;
    padding: 1px 6px;
  }

  .roster-card {
    flex-wrap: wrap;
  }

  .roster-card-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-light);
  }

  .panel-header {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: stretch;
  }

  .panel-header .btn {
    width: 100%;
  }
}

/* ============================================
   PRETRIP/DVIR MODULE
   ============================================ */
.pretrip-view {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.pretrip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
}

.pretrip-header-left h1 {
  margin: 0;
  font-size: 1.35rem;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pretrip-subtitle {
  color: var(--text-muted);
  margin: 2px 0 0 0;
  font-size: 0.85rem;
}

/* Driver-focused Pretrip View */
.pretrip-driver-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 80vh;
  text-align: center;
  padding: var(--spacing-md);
  padding-top: var(--spacing-lg);
}

/* Driver Back Navigation */
.driver-back-nav {
  width: 100%;
  max-width: 400px;
  margin-bottom: var(--spacing-xl);
  text-align: left;
}

.btn-driver-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 12px 20px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}

.btn-driver-back .material-icons {
  font-size: 20px;
}

.btn-driver-back:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-driver-back:active {
  transform: scale(0.98);
}

.pretrip-header-driver {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.pretrip-header-driver h1 {
  font-size: 2rem;
  color: var(--text-primary);
}

.pretrip-header-driver .pretrip-subtitle {
  font-size: 1.1rem;
}

.pretrip-driver-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.btn-driver-inspection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: var(--radius-lg);
  min-width: 280px;
  box-shadow:
    0 8px 24px rgba(59, 130, 246, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.btn-driver-inspection .material-icons {
  font-size: 3rem;
}

.btn-driver-inspection:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px rgba(59, 130, 246, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.15);
}

.btn-driver-inspection:active {
  transform: translateY(0);
}

.pretrip-driver-hint {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.pretrip-filters {
  display: flex;
  gap: var(--spacing-xs);
  background: var(--bg-elevated);
  padding: var(--spacing-xs);
  border-radius: var(--radius-lg);
}

.pretrip-filter {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.pretrip-filter:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-primary);
}

.pretrip-filter.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.filter-count {
  background: var(--bg-page);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.pretrip-filter.active .filter-count {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  color: var(--text-inverse);
}

.pretrip-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.pretrip-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  transition: all 0.2s;
  cursor: pointer;
}

.pretrip-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-medium);
}

.pretrip-card.pass .pretrip-card-status {
  color: var(--action-success);
}

.pretrip-card.has-defects {
  border-left: 4px solid var(--action-danger);
}

.pretrip-card.has-defects .pretrip-card-status {
  color: var(--action-danger);
}

.pretrip-card-status .material-icons {
  font-size: 32px;
}

.pretrip-card-info {
  flex: 1;
  min-width: 0;
}

.pretrip-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.pretrip-card-truck {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1.125rem;
}

.pretrip-card-type {
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.pretrip-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.pretrip-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pretrip-card-meta .material-icons {
  font-size: 16px;
}

.pretrip-card-defects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

.defect-badge {
  background: #FEE2E2;
  color: #991B1B;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
}

.defect-item {
  background: #FEF3C7;
  color: #92400E;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

/* Inspection Modal */
.modal-large {
  max-width: 720px;
  width: calc(100% - 32px);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.inspection-checklist {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-lg);
}

.inspection-checklist h4 {
  margin: 0 0 var(--spacing-xs) 0;
}

.checklist-hint {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-md);
}

.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-sm);
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.checklist-item:hover {
  border-color: var(--action-primary);
}

.checklist-item input {
  width: 24px;
  height: 24px;
  min-height: auto;
  padding: 0;
  accent-color: var(--action-success);
  cursor: pointer;
  flex-shrink: 0;
}

/* Checked state - green border */
.checklist-item:has(input:checked) {
  border-color: var(--action-success);
  background: #F0FDF4;
}

.checklist-icon {
  color: var(--text-muted);
}

.checklist-icon .material-icons {
  font-size: 20px;
}

.checklist-label {
  flex: 1;
  font-weight: 500;
}

/* Failed/unchecked state - red styling */
.checklist-item.failed {
  border-color: var(--action-danger);
  background: #FEF2F2;
}

.checklist-item.failed .checklist-icon {
  color: var(--action-danger);
}

/* Collapsible Checklist */
.inspection-checklist.collapsed {
  display: none;
}

.checklist-toggle-section {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-light);
}

.checklist-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.checklist-toggle input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-height: auto;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #9ca3af;
  border-radius: 4px;
  background: #f3f4f6;
  position: relative;
  transition: all 0.15s ease;
  cursor: pointer;
}

.checklist-toggle input[type="checkbox"]:hover {
  border-color: var(--primary);
  background: #e5e7eb;
}

.checklist-toggle input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.checklist-toggle input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 18px;
  font-weight: 900;
}

.toggle-label {
  font-weight: 600;
  color: var(--text-primary);
}

.toggle-hint {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Shared DVIR collapsible section chevron */
.dvir-defects-section summary::-webkit-details-marker,
.dvir-maint-notes-section summary::-webkit-details-marker,
.dvir-photos-section summary::-webkit-details-marker { display: none; }
.dvir-defects-section[open] .dvir-section-chevron,
.dvir-maint-notes-section[open] .dvir-section-chevron,
.dvir-photos-section[open] .dvir-section-chevron { transform: rotate(180deg); }

/* DVIR Defects Section */
.dvir-defects-section {
  margin: var(--spacing-sm) 0;
  padding: var(--spacing-sm) var(--spacing-sm);
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: var(--radius-md);
}

.dvir-defects-section textarea {
  border-color: rgba(220, 38, 38, 0.3);
  background: white;
  padding: 10px 12px;
}

.dvir-defects-section textarea:focus {
  border-color: var(--status-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* DVIR Maintenance Notes Section */
.dvir-maint-notes-section {
  margin: var(--spacing-sm) 0;
  padding: var(--spacing-sm) var(--spacing-sm);
  background: rgba(234, 179, 8, 0.05);
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: var(--radius-md);
}

/* DVIR Fluids Section */
.dvir-fluids-section { margin: 16px 0; }
.dvir-fluids-section summary::-webkit-details-marker { display: none; }
.dvir-fluids-section[open] .dvir-fluids-chevron { transform: rotate(180deg); }
.dvir-fluids-badge {
  background: var(--accent-teal);
  color: #fff;
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.dvir-fluid-form { margin-bottom: 12px; }
.dvir-fluid-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-surface);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 14px;
}

/* DVIR Photos Section */
.dvir-photos-section {
  margin: var(--spacing-sm) 0;
  padding: var(--spacing-sm) var(--spacing-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.dvir-photos-section .photo-count {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.dvir-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.dvir-photo-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--border-light);
}

.dvir-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dvir-photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.dvir-photo-remove .material-icons {
  font-size: 14px;
}

.dvir-add-photo-btn {
  width: 100%;
}

.dvir-add-photo-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Photo thumbnails in inspection cards */
.pretrip-card-photos {
  display: flex;
  gap: 6px;
  margin-top: var(--spacing-sm);
  align-items: center;
}

.pretrip-thumb {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: transform 0.15s;
}

.pretrip-thumb:hover {
  transform: scale(1.1);
}

.pretrip-photo-more {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Photo Lightbox */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.photo-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.photo-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.photo-lightbox-close .material-icons {
  font-size: 24px;
}

/* DVIR Confirmation Checkbox */
.dvir-confirmation {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

.dvir-confirmation .checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-weight: 500;
}

.dvir-confirmation input[type="checkbox"] {
  width: 24px;
  height: 24px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #9ca3af;
  border-radius: 4px;
  background: #f3f4f6;
  position: relative;
  transition: all 0.15s ease;
}

.dvir-confirmation input[type="checkbox"]:hover {
  border-color: var(--primary);
  background: #e5e7eb;
}

.dvir-confirmation input[type="checkbox"]:checked {
  background: var(--status-success);
  border-color: var(--status-success);
}

.dvir-confirmation input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 20px;
  font-weight: 900;
}

/* DVIR Signature Section */
.dvir-signature-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.signature-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: var(--bg-elevated);
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.signature-placeholder .material-icons {
  font-size: 24px;
}

.signature-demo-note {
  font-size: 0.75rem;
  background: var(--brand-blue);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-left: var(--spacing-sm);
}

/* Pretrip Header Actions */
.pretrip-header-actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* Blank DVIR Modal Styles */
.blank-dvir-content {
  padding: var(--spacing-lg);
  background: white;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
}

.dvir-form-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--text-primary);
}

.dvir-form-header h2 {
  margin: var(--spacing-sm) 0;
  font-size: 1.25rem;
}

.dvir-regulation {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

.dvir-form-section {
  margin-bottom: var(--spacing-lg);
}

.dvir-form-section h4 {
  margin: 0 0 var(--spacing-sm) 0;
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-light);
}

.dvir-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.dvir-field {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
}

.dvir-field.full-width {
  flex: 1;
  width: 100%;
}

.dvir-field label {
  font-weight: 500;
  white-space: nowrap;
  font-size: 0.9rem;
}

.dvir-blank-line {
  display: inline-block;
  min-width: 80px;
  max-width: 120px;
  flex: 1;
  border-bottom: 1px solid var(--text-primary);
  height: 1.2em;
}

.dvir-blank-line-sm {
  display: inline-block;
  min-width: 80px;
  border-bottom: 1px solid var(--text-primary);
  height: 1.2em;
}

.dvir-checkbox-inline {
  font-size: 0.9rem;
}

.dvir-instruction {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: var(--spacing-sm);
}

.dvir-checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xs);
}

@media (max-width: 500px) {
  .dvir-checklist-grid {
    grid-template-columns: 1fr;
  }
}

.dvir-check-item {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.85rem;
}

.dvir-remarks-box {
  min-height: 80px;
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-sm);
  margin-top: var(--spacing-sm);
}

.dvir-certification {
  padding: var(--spacing-sm);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
}

.dvir-certification p {
  margin: var(--spacing-xs) 0;
}

.dvir-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.dvir-signature-block {
  padding: var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

.dvir-signature-block label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
  font-size: 0.875rem;
}

.dvir-signature-line {
  display: block;
  height: 40px;
  border-bottom: 1px solid var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.dvir-print-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
}

.dvir-form-footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

/* ============================================ */
/*   DVIR DETAIL MODAL (viewInspection)        */
/* ============================================ */

.dvir-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  color: #fff;
}
.dvir-detail-header.defects {
  background: linear-gradient(135deg, #991B1B 0%, #DC2626 50%, #EF4444 100%);
}
.dvir-detail-header.pass {
  background: linear-gradient(135deg, #065F46 0%, #059669 50%, #10B981 100%);
}
.dvir-detail-header-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dvir-detail-header-icon .material-icons {
  font-size: 24px;
  color: #fff;
}
.dvir-detail-header-text h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}
.dvir-detail-header-text .dvir-detail-status {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.9;
}
.dvir-detail-header .dvir-detail-close {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 6px;
}
.dvir-detail-header .dvir-detail-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.15);
}

.dvir-detail-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px 20px;
}

/* Info grid */
.dvir-detail-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.dvir-detail-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-primary);
}
.dvir-detail-info-item .material-icons {
  font-size: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.dvir-detail-info-item strong {
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 4px;
}

/* Section card */
.dvir-detail-section {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: #fff;
}
.dvir-detail-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Defects section */
.dvir-detail-section.defects {
  border-color: rgba(239,68,68,0.25);
  background: rgba(239,68,68,0.04);
}
.dvir-detail-section.defects .dvir-detail-section-title {
  color: var(--action-danger);
}
.dvir-detail-defect-chip {
  display: inline-block;
  background: rgba(239,68,68,0.10);
  color: #B91C1C;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  margin: 2px 4px 2px 0;
  border: 1px solid rgba(239,68,68,0.18);
}

/* Maintenance notes section */
.dvir-detail-section.maint {
  border-color: rgba(245,158,11,0.25);
  background: rgba(245,158,11,0.04);
}
.dvir-detail-section.maint .dvir-detail-section-title {
  color: #B45309;
}

/* Checklist */
.dvir-detail-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.dvir-detail-check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.dvir-detail-check-item:nth-child(odd) {
  background: var(--bg-elevated);
}
.dvir-detail-check-item .material-icons {
  font-size: 16px;
  flex-shrink: 0;
}
.dvir-detail-check-item .material-icons.ok {
  color: var(--action-success);
}
.dvir-detail-check-item .material-icons.fail {
  color: var(--action-danger);
}

/* Fluids list */
.dvir-detail-fluid-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.82rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
}
.dvir-detail-fluid-item:last-child {
  border-bottom: none;
}
.dvir-detail-fluid-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(6,182,212,0.08);
  color: #0E7490;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid rgba(6,182,212,0.18);
}

/* Photos */
.dvir-detail-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dvir-detail-photo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid var(--border-light);
  transition: border-color 0.15s, transform 0.15s;
}
.dvir-detail-photo:hover {
  border-color: var(--brand-blue);
  transform: scale(1.05);
}

/* Signature display */
.dvir-detail-sig {
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  display: inline-block;
}
.dvir-detail-sig img {
  max-width: 240px;
  height: auto;
  display: block;
}
.dvir-detail-sig-by {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Sign-off form */
.dvir-detail-signoff {
  padding: 14px;
  background: rgba(59,130,246,0.04);
  border-radius: var(--radius-md);
  border: 1px dashed rgba(59,130,246,0.35);
}
.dvir-detail-signoff .dvir-detail-section-title {
  color: var(--brand-blue);
}
.dvir-detail-signoff label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}
.dvir-detail-signoff select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: #fff;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.dvir-detail-signoff canvas {
  width: 100%;
  height: 120px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}
.dvir-detail-signoff .btn-signoff {
  width: 100%;
  margin-top: 8px;
}

/* No signature note */
.dvir-detail-no-sig {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-style: italic;
  padding: 8px 0;
}

/* Footer — elevated action bar */
.dvir-detail-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--border-light);
  background: linear-gradient(to bottom, #F8FAFC, #fff);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.dvir-detail-footer .btn {
  padding: 9px 18px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  font-size: 0.85rem;
}
.dvir-detail-footer .btn:hover {
  transform: translateY(-1px);
}
.dvir-detail-footer .btn-secondary {
  background: #fff;
  border: 1px solid #CBD5E1;
  color: var(--text-primary);
}
.dvir-detail-footer .btn-primary {
  background: linear-gradient(135deg, var(--brand-blue), #2563EB);
  border: none;
  color: #fff;
}

/* Mobile */
@media (max-width: 600px) {
  .dvir-detail-header {
    padding: 12px 16px;
    gap: 10px;
  }
  .dvir-detail-header-icon {
    width: 36px;
    height: 36px;
  }
  .dvir-detail-header-icon .material-icons {
    font-size: 20px;
  }
  .dvir-detail-header-text h3 {
    font-size: 1rem;
  }
  .dvir-detail-body {
    padding: 12px 16px;
  }
  .dvir-detail-info {
    grid-template-columns: 1fr;
  }
  .dvir-detail-checklist {
    grid-template-columns: 1fr;
  }
  .dvir-detail-footer {
    padding: 12px 16px 14px;
  }
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

/* Icon content is now changed via JS in toggleItem() */

.form-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}

.form-hint-inline {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* Phone number preview */
.phone-preview {
  font-size: 0.8rem;
  margin-top: 4px;
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.phone-preview.valid {
  color: var(--status-success);
}

.phone-preview.invalid {
  color: var(--status-danger);
}

/* ============================================
   MAINTENANCE MODULE
   ============================================ */
.maintenance-view {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  overflow: visible; /* Let parent handle scroll */
  min-height: 0;
}

.maintenance-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  text-align: center;
}

.maintenance-header-left {
  text-align: center;
  width: 100%;
}

.maintenance-header-left h1 {
  margin: 0;
  text-align: center;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.maintenance-header-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  justify-content: center;
}

.maintenance-subtitle {
  color: var(--text-muted);
  margin: var(--spacing-xs) 0 0 0;
}

.maintenance-filters {
  display: flex;
  gap: var(--spacing-xs);
  background: var(--bg-elevated);
  padding: var(--spacing-xs);
  border-radius: var(--radius-lg);
}

.maintenance-filter {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.maintenance-filter .material-icons {
  font-size: 18px;
}

.maintenance-filter:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-primary);
}

.maintenance-filter.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.maintenance-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.maintenance-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.2s;
  border-left: 4px solid var(--border-medium);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--border-medium);
}

.maintenance-card:hover {
  box-shadow: var(--shadow-md);
}

.maintenance-card.priority-low {
  border-left-color: var(--text-muted);
}

.maintenance-card.priority-normal {
  border-left-color: var(--action-primary);
}

.maintenance-card.priority-high {
  border-left-color: var(--action-warning);
}

.maintenance-card.priority-critical {
  border-left-color: var(--action-danger);
  background: #FEF2F2;
}

.maintenance-card-priority {
  padding-top: 4px;
}

.priority-indicator {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border-medium);
}

.priority-low .priority-indicator {
  background: var(--text-muted);
}

.priority-normal .priority-indicator {
  background: var(--action-primary);
}

.priority-high .priority-indicator {
  background: var(--action-warning);
}

.priority-critical .priority-indicator {
  background: var(--action-danger);
  animation: pulse-critical 1.5s infinite;
}

@keyframes pulse-critical {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.maintenance-card-info {
  flex: 1;
  min-width: 0;
}

.maintenance-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  flex-wrap: wrap;
}

.maintenance-card-truck {
  font-weight: 700;
  color: var(--text-primary);
}

.maintenance-card-category {
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.source-badge {
  background: #DBEAFE;
  color: #1E40AF;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
}

.source-badge-btn {
  background: #DBEAFE;
  color: #1E40AF;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: background 0.15s, color 0.15s;
}

.source-badge-btn:hover {
  background: #3B82F6;
  color: #fff;
}

.maintenance-card-description {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  line-height: 1.4;
}

.maintenance-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.maintenance-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.maintenance-card-meta .material-icons {
  font-size: 16px;
}

.maintenance-card-meta .unassigned {
  color: var(--action-warning);
  font-style: italic;
}

.maintenance-card-actions {
  display: flex;
  gap: var(--spacing-xs);
  align-items: flex-start;
}

.btn-sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.875rem;
  min-height: auto;
}

/* Task Detail Modal */
.task-detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.task-detail-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.task-detail-truck {
  font-weight: 700;
  font-size: 1.25rem;
}

.task-detail-category {
  font-size: 1rem;
  color: var(--text-secondary);
}

.task-detail-description {
  font-size: 1.125rem;
  line-height: 1.5;
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
}

.task-detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
}

.meta-item .material-icons {
  font-size: 20px;
  color: var(--text-muted);
}

.task-detail-notes {
  padding: var(--spacing-md);
  background: #FEF3C7;
  border-radius: var(--radius-md);
}

.task-detail-notes h4 {
  margin: 0 0 var(--spacing-xs) 0;
  color: #92400E;
}

.task-detail-notes p {
  margin: 0;
  color: #78350F;
}

.task-detail-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
  align-items: center;
}

.task-detail-actions .btn {
  flex: 1;
  min-width: 0;
}

.task-detail-actions-secondary {
  width: 100%;
  text-align: center;
  margin-top: var(--spacing-xs);
}

.btn-delete-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  transition: color 0.15s;
}

.btn-delete-link:hover {
  color: var(--error);
}

.btn-delete-link .material-icons {
  font-size: 14px;
}

/* Cost Summary in Task Detail */
.task-cost-summary {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-sm);
}

.task-cost-summary h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.task-cost-summary h4 .material-icons {
  font-size: 18px;
  color: var(--brand-blue);
}

.cost-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cost-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 2px 0;
}

.cost-summary-total {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  border-top: 1px solid var(--border-light);
  padding-top: 6px;
  margin-top: 4px;
}

/* Maintenance Tabs */
.maintenance-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-elevated);
  padding: 0;
  border-radius: 12px;
  width: fit-content;
  margin: 0 auto var(--spacing-lg) auto; /* Center on desktop */
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.maintenance-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.maintenance-tab .material-icons {
  font-size: 22px;
}

.maintenance-tab:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-primary);
}

.maintenance-tab.active {
  background: var(--bg-card);
  color: var(--brand-blue);
}

.maintenance-tab-content {
  display: none;
}

.maintenance-tab-content.active {
  display: block;
}

/* Fleet Status Grid */
.fleet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.fleet-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.fleet-header h2 .material-icons {
  color: var(--brand-cyan);
}

/* Fleet Filter Bar */
.fleet-filter-bar {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.08);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.fleet-search {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  padding: 0 var(--spacing-sm);
  transition: box-shadow 0.2s;
}

.fleet-search:focus-within {
  box-shadow: none;
}

.fleet-search .material-icons {
  color: var(--text-muted);
  font-size: 20px;
}

.fleet-search input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--spacing-md) 0;
  font-size: 0.9375rem;
  color: var(--text-primary);
  min-width: 0;
}

.fleet-search input:focus {
  outline: none;
  box-shadow: none;
}

.fleet-search input::placeholder {
  color: var(--text-muted);
}

.fleet-filter-bar select {
  width: auto;
  min-width: 130px;
  flex-shrink: 0;
  padding: var(--spacing-md) var(--spacing-lg);
  padding-right: 36px;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: var(--bg-card);
  background-image:
    linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.03) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M3 4.5L6 8l3-3.5H3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center, right 12px center;
  background-size: auto, 12px;
  font-size: 0.9375rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.fleet-filter-bar select:hover {
  border-color: var(--border-medium);
  background-color: var(--bg-elevated);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.fleet-filter-bar select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Fleet Type Toggle (Vehicles / Trailers) */
.fleet-type-toggle {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-xs);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.fleet-type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--spacing-md) var(--spacing-sm);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 0;
}

.fleet-type-btn .material-icons {
  font-size: 20px;
}

.fleet-type-btn:hover {
  background: rgba(59, 130, 246, 0.05);
  color: var(--text-primary);
}

.fleet-type-btn.active {
  background: var(--brand-blue);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.fleet-type-btn.active .material-icons {
  color: white;
}

.fleet-type-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.fleet-type-btn:not(.active) .fleet-type-count {
  background: var(--bg-card);
  color: var(--text-muted);
}

/* Fleet Asset View */
.fleet-asset-view {
  min-height: 0;
}

/* Ensure all fleet sections allow scroll passthrough */
#fleet-all-section,
#vehicles-view,
#trailers-view,
#assets-view,
.fleet-attention-section,
.fleet-grid,
.maintenance-tab-content,
#tab-fleet {
  overflow: visible;
  pointer-events: auto;
  touch-action: pan-y pinch-zoom; /* Allow vertical scroll and zoom gestures */
}

/* Fleet Attention Section */
.fleet-attention-section {
  margin-bottom: var(--spacing-xl);
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.04) 0%, rgba(234, 88, 12, 0.02) 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  border: 1px solid rgba(234, 88, 12, 0.1);
}

.fleet-attention-section.hidden {
  display: none;
}

/* All Vehicles Section */
#fleet-all-section,
#vehicles-view,
#trailers-view,
#assets-view {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(59, 130, 246, 0.02) 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  border: 1px solid rgba(59, 130, 246, 0.08);
}

/* Reset fleet-attention-section to orange gradient */
.fleet-attention-section {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.04) 0%, rgba(234, 88, 12, 0.02) 100%);
  border: 1px solid rgba(234, 88, 12, 0.1);
}

.fleet-section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.fleet-section-header .material-icons {
  color: var(--action-warning);
  font-size: 24px;
}

.fleet-section-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.fleet-section-count {
  background: var(--action-warning);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 20px;
  text-align: center;
}

.fleet-section-header-all {
  display: flex;
}

.fleet-section-header-all .material-icons {
  color: var(--brand-blue);
}

.fleet-section-header-all .fleet-section-count {
  background: var(--brand-blue);
}

.fleet-grid-attention {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
}

@media (max-width: 480px) {
  .fleet-filter-bar {
    flex-direction: column;
  }

  .fleet-filter-bar select {
    width: 100%;
  }
}

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-lg);
  margin: 0 auto;
  touch-action: pan-y pinch-zoom; /* Allow vertical scroll through grid gaps */
}

/* Center empty state when fleet is empty */
.fleet-grid > .empty-state {
  grid-column: 1 / -1;
  width: 100%;
}

.fleet-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: visible;
  border: 1px solid var(--border-medium);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  touch-action: pan-y; /* Allow vertical scrolling through cards */
}

.fleet-card:hover {
  background: var(--bg-elevated);
  border-color: var(--brand-cyan);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

.fleet-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg, var(--bg-header) 0%, #1a2942 100%);
  color: var(--text-inverse);
  border-bottom: 3px solid var(--brand-cyan);
}

.fleet-card-header .material-icons {
  font-size: 24px;
  color: var(--brand-cyan);
}

.fleet-card-unit {
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
  flex: 1;
}

.fleet-card-name {
  font-weight: 700;
  font-size: 1.1rem;
}

.fleet-card-type {
  font-size: 0.75rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fleet-card-body {
  padding: var(--spacing-md);
}

/* Fleet Card Meters */
.fleet-card-meters {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.meter-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.meter-item .material-icons {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.meter-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.meter-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* Fleet Card PM Status */
.fleet-card-pm {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: var(--spacing-lg);
}

.fleet-card-pm .material-icons {
  font-size: 18px;
}

.pm-ok {
  background: #DCFCE7;
  color: #166534;
}

.pm-due-soon {
  background: #FEF3C7;
  color: #92400E;
}

.pm-overdue {
  background: #FEE2E2;
  color: #991B1B;
}

.pm-unknown {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

/* Fleet Card Actions */
.fleet-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

.fleet-card-actions:first-of-type {
  margin-top: var(--spacing-md);
}

.fleet-card-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fleet-card-actions .btn .material-icons {
  font-size: 14px;
}

.fleet-card-actions .btn:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Coming Soon / Available After Demo Section */
.coming-soon-section {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
  border-radius: var(--radius-lg);
  border: 2px solid var(--brand-blue);
  border-style: dashed;
}

.coming-soon-section h3 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--brand-blue);
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.coming-soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.coming-soon-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  opacity: 0.7;
  cursor: not-allowed;
  transition: opacity 0.2s;
}

.coming-soon-item:hover {
  opacity: 0.85;
}

.coming-soon-item .material-icons {
  font-size: 24px;
  color: var(--brand-blue);
}

.coming-soon-item span {
  font-weight: 500;
  color: var(--text-secondary);
}

/* Roster form: notification tags, channels, signature */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

/* Role checkboxes - styled with background for visual grouping */
.role-checkboxes {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 12px;
  margin-top: 4px;
}

.role-checkboxes .checkbox-label {
  padding: 8px 10px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.role-checkboxes .checkbox-label:hover {
  background: #E2E8F0;
}

.role-checkboxes .checkbox-label:has(input:checked) {
  background: #EFF6FF;
}

/* Notification tag cards — person modal */
#person-notify-tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notify-tag-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #F8FAFC;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.notify-tag-card:hover {
  background: #EFF6FF;
  border-color: #BFDBFE;
}

.notify-tag-card.checked {
  background: #EFF6FF;
  border-color: #93C5FD;
}

.notify-tag-card input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.notify-tag-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.notify-tag-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.notify-tag-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* Inline hint text for form labels */
.form-hint-inline {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.checkbox-label,
.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  cursor: pointer;
}

.radio-group {
  display: flex;
  gap: var(--spacing-md);
}

.radio-label input[type="radio"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #9ca3af;
  border-radius: 50%;
  background: #f3f4f6;
  position: relative;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.radio-label input[type="radio"]:hover {
  border-color: var(--primary);
  background: #e5e7eb;
}

.radio-label input[type="radio"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.radio-label input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
}

.input-disabled {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed;
}

.upgrade-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.875rem;
}

.dvir-history-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* PM Modal Styles */
.current-meters {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.current-meters .meter-item {
  text-align: center;
}

.pm-info-section {
  margin-bottom: var(--spacing-lg);
}

.pm-info-content {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}

.pm-info-content .meter-item {
  flex: 1;
}

/* PM Checklist */
.pm-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.pm-check-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.pm-check-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #9ca3af;
  border-radius: 4px;
  background: #f3f4f6;
  position: relative;
  transition: all 0.15s ease;
}

.pm-check-item input[type="checkbox"]:hover {
  border-color: var(--primary);
  background: #e5e7eb;
}

.pm-check-item input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.pm-check-item input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 18px;
  font-weight: 900;
}

.pm-check-item label {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-primary);
  cursor: pointer;
}

/* PM Settings Modal */
.pm-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

@media (max-width: 480px) {
  .pm-settings-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile collapsible fleet sections */
.fleet-mobile-section { display: none; }

@media (max-width: 768px) {
  .fleet-mobile-section {
    display: block;
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .fleet-mobile-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .fleet-mobile-section-header::-webkit-details-marker { display: none; }
  .fleet-mobile-section[open] .fleet-mobile-chevron { transform: rotate(180deg); }
  .fleet-mobile-chevron {
    font-size: 20px;
    color: var(--text-secondary);
    transition: transform 0.2s;
  }
  .fleet-mobile-count {
    margin-left: auto;
    background: var(--brand-blue);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
  }
  /* Hide desktop toggle buttons on mobile when collapsible is active */
  .fleet-type-toggle:has(~ .fleet-asset-view .fleet-mobile-section) { display: none; }
}

/* Mobile adjustments for fleet grid */
@media (max-width: 768px) {
  #vehicles-view,
  #trailers-view,
  #assets-view,
  #fleet-all-section {
    padding: 6px;
  }

  .fleet-grid {
    grid-template-columns: 1fr;
    padding-bottom: 40px; /* Extra space for mobile nav */
  }

  .maintenance-view {
    padding-bottom: 40px; /* Extra space above mobile nav */
    max-width: 100%;
    overflow-x: hidden;
  }

  .fleet-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-xs);
  }

  .fleet-card {
    width: 100%;
    max-width: none;
  }

  .fleet-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .maintenance-tabs {
    width: 100%;
    justify-content: center;
    overflow-x: auto;
  }

  .maintenance-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.8125rem;
    min-width: 0;
  }

  .maintenance-tab .material-icons {
    font-size: 18px;
  }

  .fleet-card-meters {
    gap: var(--spacing-sm);
  }

  /* Better definition for mobile meters */
  .meter-item {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-xs);
    border: 1px solid var(--border-light);
  }

  .meter-value {
    font-size: 1.1rem;
  }
}

/* Priority badges for maintenance tasks */
.badge-low { background: #F3F4F6; color: #6B7280; }
.badge-normal { background: #DBEAFE; color: #1E40AF; }
.badge-high { background: #FEF3C7; color: #92400E; }
.badge-critical { background: #FEE2E2; color: #991B1B; }

/* Loading indicator for grids */
.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--text-muted);
  gap: var(--spacing-md);
}

/* Text muted utility */
.text-muted {
  color: var(--text-muted);
}

/* Vehicle Holds Styles */
.holds-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.holds-description {
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
}

.holds-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.hold-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--border-medium);
}

.hold-card.hold-active {
  border-left-color: var(--action-warning);
  background: #FFFBEB;
}

.hold-card.hold-upcoming {
  border-left-color: var(--action-primary);
}

.hold-card-icon {
  padding: var(--spacing-sm);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}

.hold-card-icon .material-icons {
  font-size: 24px;
  color: var(--text-secondary);
}

.hold-active .hold-card-icon {
  background: #FEF3C7;
}

.hold-active .hold-card-icon .material-icons {
  color: #92400E;
}

.hold-card-info {
  flex: 1;
  min-width: 0;
}

.hold-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.hold-card-unit {
  font-weight: 700;
  font-size: 1rem;
}

.hold-card-dates {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.hold-card-dates .material-icons {
  font-size: 16px;
}

.hold-card-reason {
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.hold-card-notes {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}

.hold-card-actions {
  flex-shrink: 0;
}

/* Fleet card hold styles (use outline to avoid cutting into header) */
.fleet-card-on-hold {
  outline: 2px solid var(--action-warning);
  outline-offset: -2px;
  background: #FFFBEB;
}

.fleet-card-on-hold .fleet-card-header {
  background: #92400E;
}

/* Fleet card with safety issue - red highlight (use outline to avoid cutting into header) */
.fleet-card-safety-issue {
  outline: 2px solid #DC2626;
  outline-offset: -2px;
  background: #FEF2F2;
}

.fleet-card-safety-issue .fleet-card-header {
  background: #991B1B;
}

.fleet-card-hold-badge {
  background: #FEF3C7;
  color: #92400E;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-left: auto;
}

.fleet-card-insp-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  margin-left: auto;
  background: rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-sm);
  color: #fbbf24;
  animation: flag-pulse 2s ease-in-out infinite;
  position: relative;
  cursor: pointer;
}

.fleet-card-insp-flag .material-icons {
  font-size: 14px;
}

.fleet-card-insp-flag[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  padding: 8px 10px;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 100;
  pointer-events: none;
  white-space: normal;
  animation: tooltip-fade 0.15s ease-out;
}

.fleet-card-insp-flag[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  top: calc(100% + 1px);
  right: 6px;
  border: 5px solid transparent;
  border-bottom-color: #1e293b;
  z-index: 100;
  pointer-events: none;
  animation: tooltip-fade 0.15s ease-out;
}

@keyframes tooltip-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

.fleet-card-hold-banner {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: #FEF3C7;
  color: #92400E;
  font-size: 0.8125rem;
  font-weight: 500;
}

.fleet-card-hold-banner .material-icons {
  font-size: 16px;
}

/* Fleet card tasks indicator */
.fleet-card-tasks {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.8125rem;
  color: var(--action-warning);
  background: #FEF3C7;
  margin-bottom: var(--spacing-lg);
}

.fleet-card-tasks.clickable {
  cursor: pointer;
  transition: background 0.2s ease;
}

.fleet-card-tasks.clickable:hover {
  background: #FDE68A;
}

.fleet-card-tasks .material-icons {
  font-size: 16px;
}

.fleet-card-tasks .tasks-arrow {
  margin-left: auto;
  opacity: 0.6;
}

.fleet-card-tasks.clickable:hover .tasks-arrow {
  opacity: 1;
}

/* Missing DVIR banner on fleet card */
.fleet-card-dvir-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  background: rgba(239, 68, 68, 0.06);
  border-left: 3px solid var(--action-danger);
  cursor: pointer;
  transition: background 0.15s;
}
.fleet-card-dvir-banner:hover {
  background: rgba(239, 68, 68, 0.12);
}
.fleet-card-dvir-banner > .material-icons:first-child {
  font-size: 18px;
  color: var(--action-danger);
  flex-shrink: 0;
}
.fleet-dvir-driver {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}
.fleet-dvir-date {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* Truck Filter Indicator */
.truck-filter-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
  border: 1px solid var(--brand-blue);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
  font-size: 0.875rem;
}

.truck-filter-indicator.hidden {
  display: none;
}

.truck-filter-indicator strong {
  color: var(--brand-blue);
}

/* Fleet card body wrapper - add padding for internal elements */
.fleet-card > .fleet-card-meters,
.fleet-card > .fleet-card-pm,
.fleet-card > .fleet-card-tasks,
.fleet-card > .fleet-card-dvir-banner,
.fleet-card > .fleet-card-actions {
  margin-left: var(--spacing-md);
  margin-right: var(--spacing-md);
}

.fleet-card > .fleet-card-meters:first-of-type {
  margin-top: var(--spacing-lg);
}

/* ============================================
   TRAILER SECTION STYLES
   ============================================ */
.trailers-section {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
}

.trailers-section-header {
  margin-bottom: var(--spacing-md);
}

.trailers-section-header h3 {
  color: var(--text-primary);
}

.trailers-section-header .material-icons {
  color: var(--brand-blue);
}

.trailer-filter-bar {
  margin-bottom: var(--spacing-lg);
}

.trailer-grid {
  min-height: 100px;
}

/* Trailer Card Styles */
.fleet-card-trailer {
  border-left: 4px solid var(--accent-teal);
}

.fleet-card-trailer .fleet-card-type {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(6, 182, 212, 0.2) 100%);
  color: #0891B2;
}

/* Trailer Expiry Items */
.trailer-card-expiries {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  margin: var(--spacing-md);
}

.trailer-expiry-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
}

.trailer-expiry-item .material-icons {
  font-size: 18px;
}

.trailer-expiry-item .expiry-label {
  flex: 0 0 80px;
  color: var(--text-secondary);
  font-weight: 500;
}

.trailer-expiry-item .expiry-date {
  font-weight: 600;
}

/* Expiry Status Colors */
.expiry-ok,
.expiry-ok .material-icons {
  color: var(--success);
}

.expiry-warning,
.expiry-warning .material-icons {
  color: var(--warning);
}

.expiry-expired,
.expiry-expired .material-icons {
  color: var(--error);
}

.expiry-unknown,
.expiry-unknown .material-icons {
  color: var(--text-muted);
}

/* Trailer Info Modal Styles */
.trailer-info-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.trailer-info-section {
  padding: var(--spacing-md);
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
}

.trailer-info-section h4 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md) 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trailer-info-section h4 .material-icons {
  font-size: 18px;
  color: var(--brand-blue);
}

.trailer-info-section .info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spacing-md);
}

.trailer-info-section .info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trailer-info-section .info-item.full-width {
  grid-column: 1 / -1;
}

.trailer-info-section .info-item .label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.trailer-info-section .info-item .value {
  font-size: 0.9375rem;
  color: var(--text-primary);
  font-weight: 500;
}

.trailer-info-section .info-item .value a {
  color: var(--brand-blue);
  text-decoration: none;
}

.trailer-info-section .info-item .value a:hover {
  text-decoration: underline;
}

.trailer-info-section .axle-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.trailer-info-section .axle-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--surface-primary);
  border-radius: var(--radius-sm);
}

.trailer-info-section .axle-item .axle-num {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

.trailer-info-section .axle-item .axle-serial {
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.trailer-info-section .trailer-notes {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Trailer Card Attention State */
.fleet-card-trailer.fleet-card-attention {
  border-left-color: var(--warning);
}

.fleet-card-trailer.fleet-card-attention .fleet-card-header {
  background: linear-gradient(135deg, #92400e 0%, #78350f 100%);
  border-bottom-color: #f59e0b;
}

/* ============================================ */
/* ASSET CARD STYLES                            */
/* ============================================ */
.fleet-card-asset {
  border-left: 4px solid #f59e0b;
  display: flex;
  flex-direction: column;
}

.fleet-card-asset .asset-card-body {
  flex: 1;
}

.fleet-card-asset .fleet-card-actions:last-child {
  margin-top: auto;
}

.fleet-card-asset .fleet-card-header {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-bottom: 3px solid #f59e0b;
}

/* Asset Category Badges */
.asset-category-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.category-drill-pipe {
  background: rgba(245, 158, 11, 0.2);
  color: #d97706;
}

.category-equipment {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.category-tool {
  background: rgba(34, 197, 94, 0.2);
  color: #16a34a;
}

.category-other {
  background: rgba(156, 163, 175, 0.2);
  color: #6b7280;
}

/* Asset Card Body */
.asset-card-body {
  padding: var(--spacing-md);
}

.asset-part-number {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  font-family: monospace;
}

.asset-part-number .material-icons {
  font-size: 14px;
  color: var(--text-muted);
}

/* Asset Hours Meter (single row) */
.asset-card-hours {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-light);
}

.asset-card-hours .meter-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Asset Tracking Info */
.asset-tracking-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.asset-tracking-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.asset-tracking-item .material-icons {
  font-size: 14px;
  color: var(--text-muted);
}

/* Asset Location Tag */
.asset-location-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin: var(--spacing-sm) var(--spacing-md);
  border-radius: 20px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.asset-location-tag:hover {
  background: var(--brand-blue);
  color: white;
}

.asset-location-tag .material-icons {
  font-size: 14px;
}

/* Coming Soon Modal (small, centered) */
.modal-coming-soon {
  max-width: 360px;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.modal-coming-soon-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl);
  gap: var(--spacing-md);
}

.modal-coming-soon-icon {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(6, 182, 212, 0.15));
  border-radius: 50%;
}

.modal-coming-soon-icon .material-icons {
  font-size: 32px;
  color: var(--brand-blue);
}

.modal-coming-soon-icon .coming-soon-sparkle {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 18px;
  color: #f59e0b;
}

.modal-coming-soon-body h3 {
  margin: 0;
  font-size: 1.125rem;
  color: var(--text-primary);
}

.modal-coming-soon-body p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Mobile holds adjustments */
@media (max-width: 768px) {
  .holds-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .hold-card {
    flex-direction: column;
  }

  .hold-card-actions {
    width: 100%;
  }

  .hold-card-actions .btn {
    width: 100%;
  }
}

/* ============================================
   TUTORIAL SYSTEM [fc-sandbox-001]
   ============================================ */
#tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

#tutorial-overlay .tutorial-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

/* Only enable backdrop pointer-events for modal mode (blocks clicks) */
#tutorial-overlay.show-modal .tutorial-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* For spotlight mode, backdrop blocks clicks outside the spotlight area */
#tutorial-overlay.show-spotlight .tutorial-backdrop {
  opacity: 0;
  pointer-events: auto;
  cursor: not-allowed;
}

#tutorial-overlay .tutorial-spotlight {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.7);
  border-radius: var(--radius-lg);
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s;
}

#tutorial-overlay.show-spotlight .tutorial-spotlight {
  opacity: 1;
  pointer-events: auto; /* Spotlight is clickable to forward clicks to target */
  cursor: pointer;
  animation: pulse-spotlight 2s infinite;
}

@keyframes pulse-spotlight {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.7), 0 0 0 4px rgba(6, 182, 212, 0.5); }
  50% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.7), 0 0 0 8px rgba(6, 182, 212, 0.3); }
}

/* Hide spotlight overlay when a modal is open so user can interact with modal */
#tutorial-overlay.modal-open {
  pointer-events: none !important;
  z-index: 10000 !important; /* Keep above modal so tooltip is visible */
}

#tutorial-overlay.modal-open .tutorial-spotlight {
  opacity: 0 !important;
  pointer-events: none !important;
}

#tutorial-overlay.modal-open .tutorial-backdrop {
  opacity: 0 !important;
  pointer-events: none !important;
}

#tutorial-overlay.modal-open .tutorial-tooltip {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  transform: none !important;
  max-width: 100% !important;
  width: 100% !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
  z-index: 10001 !important;
  padding: 16px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#tutorial-overlay.modal-open .tutorial-tooltip .tutorial-progress,
#tutorial-overlay.modal-open .tutorial-tooltip h4 {
  display: none !important;
}

#tutorial-overlay.modal-open .tutorial-tooltip .tooltip-body {
  flex: 1;
  margin-bottom: 0;
}

#tutorial-overlay.modal-open .tutorial-tooltip .tooltip-actions {
  flex-shrink: 0;
}

#tutorial-overlay.modal-open .tutorial-tooltip::before,
#tutorial-overlay.modal-open .tutorial-tooltip::after {
  display: none !important;
}

/* Add padding to modal content when tutorial bottom bar is visible */
body.tutorial-modal-open .modal-content {
  padding-bottom: 100px !important;
}

body.tutorial-modal-open .modal-body {
  padding-bottom: 80px !important;
}

#tutorial-overlay .tutorial-tooltip {
  position: absolute;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  max-width: 360px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s;
}

#tutorial-overlay.show-spotlight .tutorial-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.tutorial-tooltip.position-bottom::before,
.tutorial-tooltip.position-top::after,
.tutorial-tooltip.position-left::after,
.tutorial-tooltip.position-right::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

.tutorial-tooltip.position-bottom::before {
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--bg-card);
}

.tutorial-tooltip.position-top::after {
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--bg-card);
}

.tutorial-tooltip.position-right::before {
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--bg-card);
}

.tutorial-tooltip.position-left::after {
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--bg-card);
}

.tutorial-tooltip h4 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 1.125rem;
  color: var(--text-primary);
}

.tutorial-tooltip .tooltip-body {
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
}

.tutorial-tooltip .tooltip-body p {
  margin: 0 0 var(--spacing-sm) 0;
}

.tutorial-tooltip .tooltip-body ol,
.tutorial-tooltip .tooltip-body ul {
  margin: var(--spacing-sm) 0;
  padding-left: var(--spacing-lg);
}

.tutorial-tooltip .tooltip-body li {
  margin-bottom: var(--spacing-xs);
}

/* Tutorial instruction highlight for emphasis */
.tutorial-instruction-highlight {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--spacing-md);
  border: 3px solid #F59E0B;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.tutorial-instruction-highlight.tutorial-instruction-pulse {
  animation: pulse-instruction 1.5s infinite;
}

@keyframes pulse-instruction {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
  }
}

.tutorial-instruction-highlight strong {
  color: #78350F;
  font-size: 1.4rem;
}

.tutorial-hint {
  background: #DBEAFE;
  color: #1E40AF;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: var(--spacing-sm);
}

.tutorial-suggestion {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  margin: var(--spacing-md) 0;
  line-height: 1.5;
}

.tutorial-suggestion {
  background: #FEF3C7;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  margin: var(--spacing-sm) 0;
  font-size: 0.875rem;
}

.tutorial-suggestion .suggestion-label {
  font-weight: 600;
  color: #92400E;
}

.tutorial-suggestion ul {
  margin: var(--spacing-xs) 0 0 0;
  padding-left: var(--spacing-lg);
  color: #78350F;
}

.tutorial-auto-add {
  display: block;
  margin: var(--spacing-md) auto 0;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  color: white !important;
  text-decoration: none !important;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
  transition: all 0.2s ease;
}

.tutorial-auto-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
  background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);
}

.tutorial-auto-add::before {
  content: '\26A1';
  margin-right: 6px;
}

.tooltip-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

/* Tutorial Progress */
.tutorial-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.progress-dots {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 280px;
}

.progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-medium);
  transition: all 0.2s;
}

.progress-dot.active {
  background: var(--brand-cyan);
  transform: scale(1.2);
}

.progress-dot.completed {
  background: var(--action-success);
}

.progress-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Tutorial Modal */
#tutorial-overlay .tutorial-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

#tutorial-overlay.show-modal .tutorial-modal {
  opacity: 1;
  pointer-events: auto;
}

.tutorial-modal-content {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.tutorial-modal-icon {
  font-size: 64px;
  margin-bottom: 0;
}

.tutorial-modal-title {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 1.5rem;
  color: var(--text-primary);
}

.tutorial-modal-body {
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: left;
}

.tutorial-modal-body ul {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
}

.tutorial-modal-body li {
  margin-bottom: var(--spacing-sm);
}

.tutorial-challenge {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-lg);
  text-align: left;
}

.tutorial-challenge h4 {
  margin: 0 0 var(--spacing-xs) 0;
  color: #92400E;
}

.tutorial-challenge p {
  margin: 0;
  color: #78350F;
}

.tutorial-modal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

/* Welcome steps styling */
.welcome-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.welcome-step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  text-align: left;
  padding: var(--spacing-sm) 0;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.step-text {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.step-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ============================================
   DISABLED/COMING SOON FEATURES
   ============================================ */
.feature-preview {
  position: relative;
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.feature-preview::after {
  content: 'Coming Soon';
  position: absolute;
  top: 50%;
  right: var(--spacing-md);
  transform: translateY(-50%);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--brand-cyan);
  background: rgba(6, 182, 212, 0.1);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.disabled-section {
  border-top: 1px dashed var(--border-medium);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  opacity: 0.6;
}

.disabled-section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.disabled-section-header .material-icons {
  font-size: 18px;
}

.disabled-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  cursor: not-allowed;
}

.disabled-field-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.disabled-field-label .material-icons {
  font-size: 20px;
}

.disabled-toggle {
  width: 44px;
  height: 24px;
  background: var(--border-medium);
  border-radius: 12px;
  position: relative;
}

.disabled-toggle::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.danger-zone {
  border-top: 2px solid var(--danger);
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  opacity: 0.5;
  pointer-events: none;
}

.danger-zone-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  color: var(--danger);
  font-weight: 600;
}

.danger-zone-header .material-icons {
  font-size: 20px;
}

.btn-danger-outline {
  background: transparent;
  border: 2px solid var(--danger);
  color: var(--danger);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: not-allowed;
}

.coming-soon-badge {
  font-size: 0.65rem;
  background: var(--brand-cyan);
  color: white;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.premium-badge {
  font-size: 0.65rem;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.disabled-field-full {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  cursor: not-allowed;
}

.disabled-field-full .disabled-field-label {
  margin-bottom: var(--spacing-sm);
}

.disabled-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--spacing-xs);
}

.disabled-tag {
  font-size: 0.75rem;
  padding: 4px 10px;
  background: var(--border-light);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-medium);
}

.disabled-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: var(--spacing-xs) 0 0 0;
  font-style: italic;
}

.btn-disabled-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-muted);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: not-allowed;
}

.btn-disabled-action .material-icons {
  font-size: 16px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .pretrip-header,
  .maintenance-header {
    flex-direction: column;
    align-items: stretch;
  }

  .pretrip-header .btn,
  .maintenance-header .btn {
    width: 100%;
  }

  .pretrip-filters,
  .maintenance-filters {
    flex-wrap: wrap;
  }

  .pretrip-filter,
  .maintenance-filter {
    flex: 1;
    justify-content: center;
    min-width: 80px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .checklist-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tutorial-tooltip {
    max-width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px !important;
  }

  .maintenance-card {
    flex-wrap: wrap;
  }

  .maintenance-card-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-light);
  }
}

/* ============================================
   MOBILE UI OVERRIDES
   Based on Apple HIG & Material Design guidelines
   Touch targets: 44px minimum
   ============================================ */
@media (max-width: 768px) {
  /* Page titles */
  .pretrip-view h1,
  .maintenance-view h1,
  .roster-view h1,
  .panel-header h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }

  /* Subtitles */
  .pretrip-subtitle,
  .maintenance-subtitle {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
  }

  /* Card headings */
  .pretrip-card-truck,
  .maintenance-card-truck,
  .roster-card-name {
    font-size: 17px !important;
    font-weight: 600 !important;
  }

  /* Card subheadings */
  .pretrip-card-type,
  .maintenance-card-category,
  .maintenance-card-description {
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  /* Meta text */
  .pretrip-card-meta,
  .pretrip-card-meta span,
  .maintenance-card-meta,
  .maintenance-card-meta span,
  .roster-card-meta {
    font-size: 13px !important;
  }

  .pretrip-card-meta .material-icons,
  .maintenance-card-meta .material-icons {
    font-size: 16px !important;
  }

  /* Badges */
  .badge,
  .defect-badge,
  .defect-item,
  .source-badge,
  .source-badge-btn,
  .filter-count,
  .tab-count {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
  }

  /* Primary buttons - 44px touch target */
  .btn-primary,
  #btn-new-inspection,
  #btn-new-task,
  [onclick*="showAddPerson"],
  [onclick*="showAddTruck"],
  [onclick*="showAddTrailer"],
  button[type="submit"] {
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    touch-action: manipulation !important;
  }

  /* Secondary buttons */
  .btn-secondary,
  .btn-sm {
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
  }

  /* Filter tabs */
  .pretrip-filter,
  .maintenance-filter,
  .roster-tab {
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
  }

  .pretrip-filter .material-icons,
  .maintenance-filter .material-icons {
    font-size: 18px !important;
  }

  /* Form labels */
  label,
  .form-group label {
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    color: var(--text-secondary) !important;
  }

  /* Form inputs - 16px prevents iOS zoom */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
    padding: 12px 14px !important;
    min-height: 48px !important;
    border-width: 1px !important;
    border-radius: 8px !important;
    -webkit-appearance: none !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    touch-action: manipulation !important;
  }

  /* Checkboxes and radios - keep native appearance, ensure tappable */
  input[type="checkbox"],
  input[type="radio"] {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    min-height: 22px !important;
    min-width: 22px !important;
    touch-action: manipulation !important;
  }

  /* Modal - slide up sheet style (default for all modals on mobile) */
  .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Fullscreen modal override — use .modal-fullscreen on .modal-content
     for modals that need 100% screen (text editors, review screens, etc.) */
  .modal-fullscreen {
    max-height: 100vh !important;
    max-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }

  .modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  .modal-header {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: var(--bg-card) !important;
    padding: 16px !important;
    min-height: 56px !important;
    border-bottom: 1px solid var(--border-light) !important;
  }

  .modal-header h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  .modal-header .btn-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
  }

  .modal-header .btn-icon .material-icons {
    font-size: 20px !important;
  }

  /* Generic form scrolling - but NOT for scrollable modal forms */
  .modal-content form:not(.modal-form-scrollable),
  .modal-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Scrollable modal forms - preserve the desktop structure on mobile */
  .modal-form-scrollable {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .modal-form-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px !important;
    min-height: 0 !important;
  }

  .modal-form-footer {
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-light) !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08) !important;
  }

  .form-actions {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    background: var(--bg-card) !important;
    padding: 12px 16px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08) !important;
    margin: 0 !important;
    border: none !important;
  }

  /* Job modal - ensure proper scrolling on mobile */
  #modal-job .modal-content {
    max-height: 95vh !important;
    max-height: 95dvh !important;
    height: 95vh !important;
    height: 95dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #modal-job .ai-prompt-section {
    flex-shrink: 0 !important;
  }

  #modal-job .modal-form-scrollable {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #modal-job .modal-form-scroll {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  #modal-job .modal-form-footer {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* Edit Ticket modal - scrollable form on mobile */
  #modal-ticket .modal-content {
    overflow: hidden !important;
  }
  #modal-ticket #form-ticket {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    min-height: 0 !important;
  }

  /* Job details modal - scrollable content with sticky footer */
  .modal-large .modal-content {
    max-height: 95vh !important;
    max-height: 95dvh !important;
  }

  .job-details {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0 !important;
  }

  .job-details-hint {
    padding: 12px 16px !important;
  }

  .job-details-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--bg-card) !important;
    padding: 12px 16px !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1) !important;
    margin: 0 !important;
    z-index: 10 !important;
    border-radius: 0 !important;
  }

  /* Checklist items */
  .checklist-item {
    padding: 12px 14px !important;
  }

  .checklist-label {
    font-size: 15px !important;
    font-weight: 500 !important;
  }

  .checklist-item input[type="checkbox"] {
    width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
  }

  .checklist-icon .material-icons {
    font-size: 20px !important;
  }

  /* Task detail */
  .task-detail-truck {
    font-size: 20px !important;
    font-weight: 700 !important;
  }

  .task-detail-category {
    font-size: 14px !important;
  }

  .task-detail-description {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .task-detail-meta .meta-item {
    font-size: 13px !important;
  }

  .task-detail-meta .material-icons {
    font-size: 16px !important;
  }

  /* PM Modal - ensure proper scrolling on mobile */
  #modal-pm .modal-content {
    max-height: 85vh !important;
    max-height: 85dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #modal-pm form {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  #modal-pm .pm-info,
  #modal-pm .form-row,
  #modal-pm .form-group {
    flex-shrink: 0 !important;
    padding: 0 16px !important;
  }

  #modal-pm .pm-info {
    padding-top: 16px !important;
  }

  #modal-pm .pm-checklist {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: 180px !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 8px !important;
    margin: 8px 16px !important;
    padding: 8px !important;
  }

  #modal-pm .form-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 12px !important;
    padding: 16px !important;
    margin: 0 !important;
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-light) !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06) !important;
  }

  #modal-pm .form-actions .btn {
    flex: 1 !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
  }

  #modal-pm .form-actions .btn-secondary {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-medium) !important;
  }

  #modal-pm .form-actions .btn-primary {
    background: linear-gradient(135deg, var(--brand-blue), var(--accent-teal)) !important;
    border: none !important;
    color: white !important;
  }

  /* Cards */
  .pretrip-card,
  .maintenance-card,
  .roster-card {
    padding: 14px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
  }

  .pretrip-card-status .material-icons,
  .roster-card-avatar,
  .roster-card-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
  }

  /* Tutorial mobile adjustments */
  #tutorial-overlay .tutorial-modal {
    padding: 16px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: 100vh !important;
    max-height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
  }

  .tutorial-modal-content {
    max-width: 100% !important;
    max-height: calc(100vh - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
    padding: 20px !important;
    margin: 16px 0 !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
  }

  .tutorial-modal-icon {
    font-size: 36px !important;
    margin-bottom: 0 !important;
  }

  .tutorial-modal-title {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }

  .tutorial-modal-body,
  .tutorial-modal-body p,
  .tutorial-modal-body li {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .tutorial-tooltip h4 {
    font-size: 15px !important;
  }

  .tutorial-tooltip .tooltip-body {
    font-size: 13px !important;
  }

  .tutorial-challenge {
    padding: 12px !important;
    margin-top: 12px !important;
  }

  .tutorial-challenge h4 {
    font-size: 14px !important;
  }

  .tutorial-challenge p {
    font-size: 13px !important;
  }

  .welcome-steps {
    gap: 8px !important;
    margin: 12px 0 !important;
  }

  .welcome-step {
    gap: 10px !important;
    padding: 6px 0 !important;
  }

  .step-number {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }

  .step-content h4 {
    font-size: 14px !important;
  }

  .step-content p {
    font-size: 12px !important;
  }

  .tutorial-modal-actions {
    margin-top: 16px !important;
    gap: 8px !important;
  }

  .tutorial-modal-actions .btn {
    padding: 10px 16px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }

  /* Form hints */
  .form-hint,
  .checklist-hint {
    font-size: 13px !important;
    color: var(--text-muted) !important;
  }

  /* Empty states */
  .empty-state-icon {
    font-size: 48px !important;
  }

  .empty-state-title {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  .empty-state-text {
    font-size: 14px !important;
  }
}

/* ============================================
   DISPATCH MODULE
   ============================================ */
.dispatch-view {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
  padding: var(--spacing-md);
}

/* New Dispatch Header - Mobile-first date-centric design */
.dispatch-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.dispatch-header .date-nav {
  grid-column: 2;
  justify-self: center;
}

.dispatch-header .header-actions {
  grid-column: 3;
  justify-self: end;
}

.date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-card) 100%);
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid var(--border-medium);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 2px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.8);
}

.date-display {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 140px;
  text-align: center;
  padding: 0 var(--spacing-md);
}

.btn-icon-nav {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.btn-icon-nav:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.btn-icon-nav:active {
  transform: scale(0.95);
}

.header-actions {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-xs);
}

.header-actions .btn,
.header-actions .btn-tool {
  padding: 10px 20px;
  font-size: 0.9rem;
  border-radius: var(--radius-md);
}

.btn-pill {
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-pill:hover {
  background: var(--bg-elevated);
  border-color: var(--border-dark);
  color: var(--text-primary);
}

.btn-pill.btn-pill-active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: white;
}

.btn-icon-secondary {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.btn-icon-secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--border-dark);
  color: var(--text-primary);
}

/* View Toggle Row */
.dispatch-view-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
}

/* Legacy selectors for backward compat */
.dispatch-title {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.dispatch-title h1 {
  margin: 0;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dispatch-date {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.dispatch-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.view-toggle {
  display: flex;
  background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-card) 100%);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--border-medium);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 3px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.8);
  gap: 4px;
}

.view-btn {
  background: transparent;
  border: none;
  padding: 12px 18px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  font-size: 0.9rem;
}

.view-btn .material-icons {
  font-size: 22px;
}

.view-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.view-btn.active {
  background: linear-gradient(135deg, var(--brand-blue) 0%, #2563eb 100%);
  color: white;
  box-shadow:
    0 2px 4px rgba(59, 130, 246, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.view-btn-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: none;
}

@media (min-width: 768px) {
  .view-btn-label {
    display: block;
  }
}

.dispatch-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

.dispatch-content {
  width: 100%;
}

/* Week View */
.week-view {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-light);
}

.week-day-header {
  padding: var(--spacing-md) var(--spacing-sm);
  text-align: center;
  border-right: 1px solid var(--border-light);
  box-sizing: border-box;
}

.week-day-header:last-child {
  border-right: none;
}

.week-day-header .day-name {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.week-day-header .day-num {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: var(--spacing-xs);
}

.week-day-header.today {
  background: rgba(59, 130, 246, 0.1);
}

.week-day-header.today .day-num {
  color: var(--brand-blue);
}

.week-content {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  min-height: 300px;
}

.week-day {
  padding: var(--spacing-xs) var(--spacing-xs);
  border-right: 1px solid var(--border-light);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Hide the day label on desktop - header already shows day/date */
.week-day > .week-day-label {
  display: none;
}

.week-day:last-child {
  border-right: none;
}

.week-day.today {
  background: rgba(59, 130, 246, 0.05);
}

.day-empty {
  color: #B0BEC5;
  font-size: 0.7rem;
  text-align: center;
  padding: var(--spacing-sm);
  background: transparent;
  border-radius: var(--radius-sm);
  border: 1px dashed #E0E7ED;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.day-empty .material-icons {
  font-size: 14px;
  color: #C5CDD5;
}

.job-card {
  background: var(--bg-card, #fff);
  color: var(--text-primary);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  min-height: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}

/* Drag-to-reschedule states */
.job-card[draggable="true"] { cursor: grab; }
.job-card[draggable="true"]:active { cursor: grabbing; }
.job-card.dragging { opacity: 0.4; transform: scale(0.95); }
.week-day.drag-over {
  background: rgba(59, 130, 246, 0.08);
  outline: 2px dashed var(--brand-blue);
  outline-offset: -2px;
  border-radius: 8px;
}

/* Job context menu (right-click) */
.job-context-menu {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.16), 0 1px 4px rgba(0,0,0,0.08);
  padding: 4px 0;
  min-width: 180px;
  overflow: hidden;
}
.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.context-menu-item:hover {
  background: var(--bg-secondary, #f1f5f9);
}
.context-menu-item .material-icons { font-size: 18px; color: var(--text-secondary); }

/* Smart duplicate warning */
#job-duplicate-warning {
  margin-top: 6px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1px solid #F59E0B;
  border-radius: 8px;
}
.smart-warning-content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.smart-warning-icon { flex-shrink: 0; margin-top: 1px; }
.smart-warning-text {
  font-size: 0.82rem;
  color: #92400E;
  line-height: 1.4;
}
.smart-warning-text strong { display: block; margin-bottom: 2px; color: #78350F; }
.smart-warning-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-left: 30px;
}

.job-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.week-status-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.week-status-badge.week-status-en-route {
  background: #3b82f620;
  color: #3b82f6;
}

.week-status-badge.week-status-finished {
  background: #22c55e20;
  color: #16a34a;
}

.week-status-badge.week-status-cancelled {
  background: #ef444420;
  color: #ef4444;
}

.job-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.job-card.finished {
  opacity: 0.7;
}

.job-card.cancelled {
  opacity: 0.5;
  text-decoration: line-through;
}

.job-card-title {
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-card-customer {
  color: var(--text-secondary);
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-card-assignments {
  font-size: 0.65rem;
  opacity: 0.8;
  margin-top: 4px;
}

/* Job Card Meta Row */
.job-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.7rem;
  opacity: 0.9;
}

.job-card-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.job-card-meta .meta-item.unassigned {
  opacity: 0.7;
  font-style: italic;
}

/* Compact assignment indicators */
.job-card-indicators,
.dispatch-job-assignments {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}

.assign-indicator {
  font-size: 0.75rem;
  opacity: 0.3;
}

.assign-indicator.assigned {
  opacity: 1;
  cursor: pointer;
}

.job-card-status,
.dispatch-job-status {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: capitalize;
}

/* Dispatch Job Card Meta Row (List View) */
.dispatch-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.dispatch-job-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.dispatch-job-meta .meta-item.unassigned {
  color: var(--text-muted);
  font-style: italic;
}

/* Safety Hold Cards (Dispatch Calendar) */
.safety-hold-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(185, 28, 28, 0.1) 100%);
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-left: 4px solid #dc2626;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.safety-hold-card:hover {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.25) 0%, rgba(185, 28, 28, 0.15) 100%);
  border-color: rgba(220, 38, 38, 0.6);
}

.safety-hold-icon {
  color: #dc2626;
  flex-shrink: 0;
}

.safety-hold-icon .material-icons {
  font-size: 20px;
}

.safety-hold-content {
  flex: 1;
  min-width: 0;
}

.safety-hold-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: #dc2626;
  margin-bottom: 2px;
}

.safety-hold-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Time-Off Hold Cards (Dispatch Calendar) */
.timeoff-hold-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.12) 0%, rgba(194, 65, 12, 0.08) 100%);
  border: 1px solid rgba(234, 88, 12, 0.3);
  border-left: 4px solid #ea580c;
  border-radius: var(--radius-md);
  cursor: default;
}

.timeoff-hold-icon {
  color: #ea580c;
  flex-shrink: 0;
}

.timeoff-hold-icon .material-icons {
  font-size: 20px;
}

.timeoff-hold-content {
  flex: 1;
  min-width: 0;
}

.timeoff-hold-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: #ea580c;
  margin-bottom: 2px;
}

.timeoff-hold-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Missing DVIR Indicators (Dispatch) */
.missing-dvir-line {
  color: #d97706;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.missing-dvir-line .material-icons {
  font-size: 16px;
  color: #d97706;
}

.missing-dvir-line.past {
  color: #ea580c;
}

.missing-dvir-line.past .material-icons {
  color: #ea580c;
}

.assign-indicator.missing-dvir {
  color: #d97706;
  opacity: 0.9;
  cursor: pointer;
  position: relative;
}

.assign-indicator.missing-dvir:hover {
  opacity: 1;
  transform: scale(1.2);
}

.assign-indicator.missing-dvir.past {
  color: #ea580c;
}

/* Missing JSA Indicators (Dispatch) */
.missing-jsa-line {
  color: #D97706;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.missing-jsa-line .material-icons {
  font-size: 16px;
  color: #D97706;
}
.missing-jsa-line.past {
  color: #B45309;
}
.missing-jsa-line.past .material-icons {
  color: #B45309;
}
.assign-indicator.missing-jsa {
  color: #D97706;
  opacity: 0.9;
  cursor: pointer;
  position: relative;
}
.assign-indicator.missing-jsa:hover {
  opacity: 1;
  transform: scale(1.2);
}
.assign-indicator.missing-jsa.past {
  color: #B45309;
}

/* Safety Hold Detail Modal */
.safety-hold-detail-info {
  margin-bottom: var(--spacing-md);
}

.safety-hold-detail-info .detail-row {
  display: flex;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-light);
}

.safety-hold-detail-info .detail-row:last-child {
  border-bottom: none;
}

.safety-hold-detail-info .detail-label {
  font-weight: 600;
  color: var(--text-secondary);
  width: 100px;
  flex-shrink: 0;
}

.safety-hold-detail-info .detail-value {
  color: var(--text-primary);
}

.hold-release-note {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.hold-release-note .material-icons {
  font-size: 18px;
  color: var(--accent);
}

/* Truck Info Modal */
.truck-selector-tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.truck-selector-tabs::-webkit-scrollbar {
  height: 4px;
}

.truck-selector-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.truck-selector-tabs::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

.truck-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.truck-tab .material-icons {
  font-size: 18px;
}

.truck-tab:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  color: var(--text-primary);
}

.truck-tab.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: white;
}

.truck-tab.active .material-icons {
  color: white;
}

.truck-info-sections {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.truck-info-section h4 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.truck-info-section h4 .material-icons {
  font-size: 20px;
  color: var(--accent);
}

.truck-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm) var(--spacing-md);
}

.truck-info-item {
  display: flex;
  flex-direction: column;
}

.truck-info-item .label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.truck-info-item .value {
  font-weight: 500;
  color: var(--text-primary);
}

.truck-docs-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.truck-doc-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.2s;
}

.truck-doc-item:hover {
  background: var(--border-light);
}

.truck-doc-item .material-icons {
  color: var(--accent);
}

.truck-doc-item.expired {
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.truck-doc-item .doc-label {
  flex: 1;
  font-weight: 500;
}

.truck-doc-item .doc-expiry {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.truck-doc-item .doc-expiry.expired {
  color: #ef4444;
  font-weight: 600;
}

.no-docs {
  color: var(--text-muted);
  font-style: italic;
  padding: var(--spacing-sm);
}

.insurance-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
}

.insurance-status.valid {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.insurance-status.expired {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* DOT Compliance Sections (Truck Info) */
.truck-info-section.dot-section {
  background: var(--bg-secondary);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.compliance-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

.compliance-status.valid {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.compliance-status.expired {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.compliance-status.unknown {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.truck-info-item.full-width {
  grid-column: 1 / -1;
}

.text-danger {
  color: #ef4444 !important;
  font-weight: 600;
}

/* Axle List */
.axle-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.axle-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}

.axle-item .axle-num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  min-width: 50px;
}

.axle-item .axle-serial {
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* Recent DVIRs List */
.recent-dvirs-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.dvir-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid #10b981;
}

.dvir-item.has-defects {
  border-left-color: #f59e0b;
}

.dvir-item .dvir-date {
  font-weight: 500;
  color: var(--text-primary);
}

.dvir-item .dvir-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
}

.dvir-item .dvir-status .material-icons {
  font-size: 16px;
}

.dvir-item.passed .dvir-status {
  color: #10b981;
}

.dvir-item.has-defects .dvir-status {
  color: #f59e0b;
}

.dvir-item .dvir-driver {
  text-align: right;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.no-dvirs {
  color: var(--text-muted);
  font-style: italic;
  padding: var(--spacing-md);
  text-align: center;
}

.loading-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  color: var(--text-muted);
  padding: var(--spacing-md);
}

.loading-text .material-icons.rotating {
  animation: spin 1s linear infinite;
}

/* Generic rotating spinner for buttons and other elements */
.material-icons.rotating {
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Mobile week view */
@media (max-width: 768px) {
  .week-header {
    display: none;
  }

  .week-content {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .week-day {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    min-height: auto;
    padding: var(--spacing-md);
  }

  .week-day:last-child {
    border-bottom: none;
  }

  .week-day::before {
    display: none;
  }

  .week-day.today {
    background: var(--primary-light, #e8f0fe);
  }

  .week-day > .week-day-label {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .today-badge {
    background: var(--primary, #1a73e8);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
  }

  .day-empty {
    text-align: left;
    padding: var(--spacing-sm) 0;
    color: var(--text-muted);
    font-style: italic;
  }

  .job-card {
    padding: var(--spacing-md);
    font-size: 0.875rem;
  }

  .job-card-title {
    font-size: 0.9375rem;
  }

  .job-card-customer {
    font-size: 0.8125rem;
  }

  .job-card-assignments {
    font-size: 0.75rem;
  }
}

/* Month View */
.month-view {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  max-width: none;
  margin: var(--spacing-sm) 0;
  max-height: calc(100vh - 180px);
  box-shadow: var(--shadow-md);
  border: 2px solid var(--border-medium);
}

.month-nav-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-card);
  border-bottom: 2px solid var(--border-medium);
}

.month-nav-title {
  font-size: 1.25rem;
  font-weight: 700;
  min-width: 200px;
  text-align: center;
}

.month-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--brand-navy);
  border-bottom: 2px solid var(--border-medium);
}

.month-weekday {
  padding: var(--spacing-sm) var(--spacing-xs);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: var(--border-medium);
}

.month-day {
  background: var(--bg-card);
  min-height: 120px;
  padding: var(--spacing-sm);
  cursor: pointer;
  transition: background 0.15s;
}

.month-day:hover {
  background: rgba(59, 130, 246, 0.04);
}

.month-day.empty {
  background: var(--bg-page);
  cursor: default;
}

.month-day.today {
  background: rgba(59, 130, 246, 0.08);
}

.month-day-num {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.month-day.today .month-day-num {
  color: var(--brand-blue);
}

.month-day-jobs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.job-count {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
}

/* Mobile month view */
@media (max-width: 768px) {
  .month-header {
    display: none;
  }

  .month-view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-height: none; /* Remove desktop max-height constraint */
  }

  .month-grid {
    grid-template-columns: repeat(7, minmax(45px, 1fr));
    gap: 1px;
    min-width: 100%;
  }

  .month-day {
    min-height: 60px;
    padding: 2px;
    overflow: hidden;
  }

  .month-day-num {
    font-size: 0.7rem;
    margin-bottom: 2px;
  }

  .month-day-jobs {
    flex-direction: column;
    gap: 1px;
  }

  .month-job-indicator {
    font-size: 0.5rem;
    padding: 1px 2px;
    min-height: 12px;
    line-height: 1.2;
  }

  .job-count {
    font-size: 0.5rem;
    padding: 1px 4px;
  }

  /* Show max 3 jobs per day on mobile, then +more */
  .month-day-jobs .month-job-indicator:nth-child(n+4) {
    display: none;
  }
}

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.view-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.view-title h1 {
  margin: 0;
}

.view-actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* Week Navigation */
.week-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  background: var(--bg-card);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.week-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.week-nav-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.week-nav-btn .material-icons {
  font-size: 24px;
}

.week-display {
  text-align: center;
}

.week-display-date {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.week-display-range {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.view-mode-toggle {
  display: flex;
  background: var(--bg-elevated);
  padding: var(--spacing-xs);
  border-radius: var(--radius-md);
}

.view-mode-btn {
  background: transparent;
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  font-weight: 500;
}

.view-mode-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.5);
}

.view-mode-btn.active {
  background: var(--bg-card);
  color: var(--brand-blue);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.8);
  font-weight: 600;
  border: 1px solid var(--border-light);
}

/* Dispatch Calendar */
.dispatch-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-xs);
  background: var(--bg-elevated);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
}

.calendar-day-header {
  text-align: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: var(--spacing-sm);
  border-bottom: 2px solid var(--border-light);
}

.calendar-day {
  min-height: 120px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  background: var(--bg-page);
}

.calendar-day.today {
  border-color: var(--action-primary);
  background: rgba(59, 130, 246, 0.05);
}

.calendar-day.other-month {
  background: var(--bg-elevated);
  opacity: 0.5;
}

.calendar-day-number {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.calendar-day.today .calendar-day-number {
  color: var(--action-primary);
}

.calendar-day-jobs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Dispatch List View */
.dispatch-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.dispatch-day-group {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.dispatch-day-header {
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dispatch-day-date {
  font-weight: 700;
  color: var(--text-primary);
}

.dispatch-day-count {
  background: var(--action-primary);
  color: white;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.dispatch-day-jobs {
  padding: var(--spacing-sm);
}

/* Job Cards */
.job-card {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  border-left: 4px solid var(--border-medium);
  cursor: pointer;
  transition: all 0.2s;
}

.job-card:hover {
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}

.job-card:last-child {
  margin-bottom: 0;
}

.job-card.status-draft { border-left-color: var(--text-muted); }
.job-card.status-published { border-left-color: var(--action-primary); }
.job-card.status-in_progress { border-left-color: var(--action-warning); }
.job-card.status-finished { border-left-color: var(--action-success); }
.job-card.status-cancelled { border-left-color: var(--action-danger); opacity: 0.6; }

.job-card-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: var(--spacing-sm);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
}

.job-time {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.job-card-info {
  flex: 1;
  min-width: 0;
}

.job-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  flex-wrap: wrap;
}

.job-card-title {
  font-weight: 700;
  color: var(--text-primary);
}

.job-card-customer {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: var(--spacing-xs);
}

.job-card-customer .material-icons {
  font-size: 16px;
}

.job-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.job-assignment {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.job-assignment .material-icons {
  font-size: 14px;
}

.job-card-actions {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

/* Mini job pill for calendar */
.job-pill {
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--action-primary);
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.job-pill:hover {
  filter: brightness(1.1);
}

.job-pill.status-draft { background: var(--text-muted); }
.job-pill.status-published { background: var(--action-primary); }
.job-pill.status-in_progress { background: var(--action-warning); }
.job-pill.status-finished { background: var(--action-success); }
.job-pill.status-cancelled { background: var(--action-danger); opacity: 0.6; }

/* Status badges */
.badge-draft { background: #E5E7EB; color: #374151; }
.badge-published { background: #DBEAFE; color: #1E40AF; }
.badge-in_progress { background: #FEF3C7; color: #92400E; }
.badge-finished { background: #DCFCE7; color: #166534; }
.badge-cancelled { background: #FEE2E2; color: #991B1B; }

/* ============================================
   DISPATCH ENHANCEMENTS
   ============================================ */

/* Role Toggle - REMOVED */

/* Disabled button style */
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

/* Modal medium size */
.modal-medium {
  max-width: 540px;
}

/* Modal for forms with multiple sections */
.modal-form-wide {
  max-width: 540px;
  width: calc(100% - 32px);
}

/* Mass Text Modal - fullscreen for maximum editing space */
#modal-mass-text .modal-content {
  display: flex;
  flex-direction: column;
}

#modal-mass-text .modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding: var(--spacing-md);
}

#modal-mass-text .mass-text-textarea,
#modal-individual-text .mass-text-textarea {
  flex: 1;
  min-height: 300px;
  height: 100%;
}

/* Individual Text Modal - fullscreen like mass text for maximum editing space */
#modal-individual-text .modal-content {
  display: flex;
  flex-direction: column;
}

#modal-individual-text .modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding: var(--spacing-md);
}

/* Month View Enhancements */
.month-view .month-grid {
  border: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.month-day.today {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);
  box-shadow: inset 0 0 0 2px var(--brand-blue);
}

.month-day.today .month-day-num {
  background: var(--brand-blue);
  color: white;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.month-job-indicator {
  width: 100%;
  height: auto;
  padding: 3px 6px;
  border-radius: 4px;
  margin-bottom: 2px;
  font-size: 0.7rem;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 18px;
  line-height: 1.4;
}

.month-more-link {
  font-size: 0.7rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: block;
  margin-top: 3px;
  font-weight: 500;
}

.month-more-link:hover {
  color: var(--brand-blue);
}

/* ============================================
   LANES VIEW (Swimlane/Timeline)
   ============================================ */
.lanes-view {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-light);
}

/* Week Navigation Header */
.lanes-week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-light);
}

.lanes-week-range {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  min-width: 160px;
  text-align: center;
}

.lanes-header {
  display: flex;
  background: var(--bg-card);
  border-bottom: 2px solid var(--border-medium);
  position: sticky;
  top: 0;
  z-index: 10;
}

.lanes-label-cell {
  min-width: 100px;
  max-width: 100px;
  padding: 10px 8px;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border-right: 2px solid var(--border-medium);
  position: sticky;
  left: 0;
  z-index: 5;
}

.lanes-resource-header {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-size: 0.7rem;
  justify-content: center;
}

.lanes-day-header {
  flex: 1;
  min-width: 70px;
  padding: 6px 4px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  border-right: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lanes-day-header:hover {
  background: var(--bg-elevated);
}

.lanes-day-header:last-child {
  border-right: none;
}

.lanes-day-header.today {
  background: rgba(59, 130, 246, 0.08);
}

.lanes-day-header.today:hover {
  background: rgba(59, 130, 246, 0.15);
}

.lanes-day-name {
  font-size: 0.65rem;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.lanes-today-pill {
  background: var(--brand-blue);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}

.lanes-day-num {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.lanes-day-header.today .lanes-day-num {
  color: var(--brand-blue);
}

.lanes-section {
  border-bottom: 1px solid var(--border-medium);
  background: var(--bg-card);
}

.lanes-section:last-child {
  border-bottom: none;
}

.lanes-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--bg-page) 100%);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--border-medium);
  border-left: 3px solid var(--brand-blue);
}

.lanes-section-title .material-icons {
  font-size: 1rem;
  opacity: 0.7;
}

.lanes-row {
  display: flex;
  border-bottom: 1px solid var(--border-light);
  min-height: 48px;
}

.lanes-row:last-child {
  border-bottom: none;
}

.lanes-row:hover {
  background: var(--bg-hover);
}

.lanes-resource-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lanes-day-cell {
  flex: 1;
  min-width: 80px;
  padding: 4px;
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lanes-day-cell:last-child {
  border-right: none;
}

.lanes-day-cell.today {
  background: rgba(59, 130, 246, 0.05);
}

.lanes-event {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

.lanes-event:hover {
  opacity: 0.85;
  transform: scale(1.02);
}

.lanes-more {
  font-size: 0.6rem;
  color: var(--text-muted);
  padding: 2px;
  text-align: center;
}

.lanes-empty-row {
  padding: 12px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* Actionable empty state for lanes */
.lanes-empty-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  color: var(--text-muted);
  font-size: 0.85rem;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(0,0,0,0.02) 10px,
    rgba(0,0,0,0.02) 20px
  );
  animation: lanes-pulse 3s ease-in-out infinite;
}

@keyframes lanes-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.lanes-empty-state .material-icons {
  font-size: 1.5rem;
  opacity: 0.5;
}

.lanes-empty-action {
  color: var(--action-primary);
  font-weight: 600;
  font-size: 0.8rem;
  text-decoration: none;
  margin-left: auto;
  transition: color 0.15s;
}

.lanes-empty-action:hover {
  color: var(--brand-blue);
  text-decoration: underline;
}

/* Mobile Lanes View */
@media (max-width: 768px) {
  .lanes-label-cell {
    min-width: 80px;
    max-width: 80px;
    font-size: 0.7rem;
    padding: 8px 4px;
  }

  .lanes-day-header {
    min-width: 50px;
    font-size: 0.6rem;
  }

  .lanes-day-num {
    font-size: 0.8rem;
  }

  .lanes-day-cell {
    min-width: 50px;
    padding: 2px;
  }

  .lanes-event {
    font-size: 0.55rem;
    padding: 2px 4px;
  }

  .lanes-section-title {
    font-size: 0.75rem;
    padding: 6px 8px;
  }

  .lanes-row {
    min-height: 40px;
  }
}

/* 30-Day Lanes View (Tripp In Suite Style) */
.lanes-30day {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lanes-header-row {
  display: flex;
  background: var(--bg-elevated);
  border-bottom: 2px solid var(--border-medium);
  position: sticky;
  top: 0;
  z-index: 20;
}

.lanes-header-row .lanes-label-col {
  min-width: 120px;
  max-width: 120px;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-right: 2px solid var(--border-medium);
  display: flex;
  align-items: center;
}

.lanes-dates-scroll {
  display: flex;
  overflow-x: auto;
  flex: 1;
}

.lanes-date-col {
  min-width: 55px;
  max-width: 55px;
  padding: 8px 4px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  border-right: 1px solid var(--border-light);
  flex-shrink: 0;
}

.lanes-date-col.today {
  background: rgba(59, 130, 246, 0.1);
  color: var(--brand-blue);
  font-weight: 700;
}

.lanes-30day .lanes-section {
  border-bottom: 1px solid var(--border-light);
}

.lanes-30day .lanes-section:last-child {
  border-bottom: none;
}

.lanes-section-header {
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-light);
  border-left: 3px solid var(--brand-blue);
}

.lanes-30day .lanes-row {
  display: flex;
  border-bottom: 1px solid var(--border-light);
  min-height: 40px;
}

.lanes-30day .lanes-row:last-child {
  border-bottom: none;
}

.lanes-30day .lanes-row:hover {
  background: var(--bg-elevated);
}

.lanes-30day .lanes-label-col {
  min-width: 120px;
  max-width: 120px;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border-right: 2px solid var(--border-medium);
  position: sticky;
  left: 0;
  z-index: 5;
}

.lanes-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lanes-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.lanes-cells-scroll {
  display: flex;
  overflow-x: auto;
  flex: 1;
}

.lanes-cell {
  min-width: 55px;
  max-width: 55px;
  padding: 4px 2px;
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-content: flex-start;
  flex-shrink: 0;
}

.lanes-cell.today {
  background: rgba(59, 130, 246, 0.05);
}

.lanes-pill {
  display: inline-block;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.55rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
}

.lanes-pill:hover {
  opacity: 0.85;
  transform: scale(1.05);
}

.lanes-empty-row {
  display: flex;
  min-height: 40px;
}

.lanes-empty-label {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}

.lanes-add-link {
  color: var(--action-primary);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 16px;
  display: flex;
  align-items: center;
}

.lanes-add-link:hover {
  text-decoration: underline;
}

/* Mobile 30-day lanes */
@media (max-width: 768px) {
  .lanes-header-row .lanes-label-col,
  .lanes-30day .lanes-label-col {
    min-width: 90px;
    max-width: 90px;
    padding: 8px;
    font-size: 0.7rem;
  }

  .lanes-date-col,
  .lanes-cell {
    min-width: 45px;
    max-width: 45px;
  }

  .lanes-pill {
    font-size: 0.5rem;
    padding: 1px 3px;
  }
}

/* ============================================
   COMPACT LANES VIEW (Trippin Suite Style)
   ============================================ */
.lanes-view-compact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
}

.lanes-week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: linear-gradient(135deg, var(--bg-header) 0%, var(--brand-slate) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.lanes-week-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-inverse);
  min-width: 140px;
  text-align: center;
}

.lanes-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-inverse);
  cursor: pointer;
  transition: background 0.2s;
}

.lanes-nav-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lanes-nav-btn .material-icons {
  font-size: 20px;
}

/* Collapsible Sections */
.lanes-collapsible-section {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.lanes-section-header-compact {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.lanes-section-header-compact:hover {
  background: var(--border-light);
}

.lanes-section-header-compact .section-chevron {
  font-size: 0.75rem;
  color: var(--text-muted);
  width: 16px;
}

.lanes-section-header-compact .section-icon {
  font-size: 20px;
  color: var(--brand-blue);
}

.lanes-section-header-compact .section-title {
  flex: 1;
  font-weight: 600;
  color: var(--text-primary);
}

.lanes-section-header-compact .section-count {
  background: var(--brand-blue);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.lanes-section-content {
  padding: var(--spacing-sm);
}

.lanes-empty-message {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.lanes-empty-message a {
  color: var(--brand-blue);
  text-decoration: none;
}

.lanes-empty-message a:hover {
  text-decoration: underline;
}

/* Mini Grid (7-day view) */
.lanes-mini-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lanes-mini-header {
  display: flex;
  align-items: center;
}

.lanes-mini-name-col {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 100px;
  max-width: 100px;
  padding: 6px 8px;
  font-size: 0.8rem;
  overflow: hidden;
}

.lanes-mini-day {
  flex: 1;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 2px;
}

.lanes-mini-day.is-today {
  color: var(--brand-blue);
  background: rgba(59, 130, 246, 0.1);
  border-radius: var(--radius-sm);
}

.lanes-mini-row {
  display: flex;
  align-items: center;
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.lanes-mini-row:hover {
  background: var(--border-light);
}

.lanes-mini-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lanes-mini-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  font-weight: 500;
}

.lanes-mini-cell {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-height: 28px;
  padding: 2px;
}

.lanes-mini-cell.is-today {
  background: rgba(59, 130, 246, 0.05);
}

.lanes-mini-pill {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.lanes-mini-pill:hover {
  transform: scale(1.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Mobile adjustments for compact lanes */
@media (max-width: 480px) {
  .lanes-mini-name-col {
    min-width: 80px;
    max-width: 80px;
    font-size: 0.7rem;
  }

  .lanes-mini-pill {
    width: 12px;
    height: 12px;
  }

  .lanes-week-title {
    font-size: 0.95rem;
  }
}

/* Day Details Modal */
.day-details-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.day-job-placard {
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--border-medium);
  cursor: pointer;
  transition: all 0.2s;
}

.day-job-placard:hover {
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}

.day-job-placard.cancelled {
  opacity: 0.6;
  text-decoration: line-through;
}

.placard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.placard-title {
  font-weight: 600;
  color: var(--text-primary);
}

.placard-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.placard-customer {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 4px 0;
}

.placard-assignments {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Day Details Modal - scrollable when many jobs */
#modal-day-details .modal-content {
  max-height: 85vh;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
}

#modal-day-details .modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.day-empty {
  text-align: center;
  color: var(--text-muted);
  padding: var(--spacing-xl);
}

/* Quickview Modal */
.modal-quickview {
  max-width: 420px;
  padding: 0;
  overflow: hidden;
}

.quickview-header {
  position: relative;
}

.quickview-header-content {
  padding: var(--spacing-xl) var(--spacing-lg);
  color: white;
}

.quickview-close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  color: rgba(255, 255, 255, 0.8);
}

.quickview-close:hover {
  color: white;
  background: rgba(255, 255, 255, 0.2);
}

.quickview-customer {
  font-size: 0.875rem;
  opacity: 0.9;
  margin-bottom: 4px;
}

.quickview-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.quickview-body {
  padding: var(--spacing-lg);
}

.quickview-sections {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.quickview-section {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.quickview-section-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.quickview-section-icon .material-icons {
  font-size: 20px;
}

.quickview-section-content {
  flex: 1;
}

.quickview-section-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.quickview-section-value {
  color: var(--text-primary);
  font-size: 0.9375rem;
}

.quickview-section-value a {
  color: var(--brand-blue);
  text-decoration: none;
}

.quickview-section-value a:hover {
  text-decoration: underline;
}

.quickview-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

.quickview-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.quickview-actions .btn {
  flex: 1;
}

/* Directions button - ensure white text on gradient */
.btn-primary[href*="maps"],
.btn[href*="maps"],
a.btn-primary[target="_blank"] {
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.btn-sm.btn-primary {
  color: #FFFFFF !important;
}

/* Mass Text Modal */
.mass-text-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  flex-shrink: 0;
}

.mass-text-btn {
  flex: 1 1 auto;
  min-width: 60px;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-elevated);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.mass-text-btn:hover {
  border-color: var(--border-medium);
}

.mass-text-btn.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: white;
}

.mass-text-date {
  font-weight: 600;
  color: var(--text-primary);
}

.mass-text-job-count {
  color: var(--text-muted);
}

.mass-text-textarea {
  width: 100%;
  flex: 1;
  min-height: 200px;
  padding: var(--spacing-md);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  resize: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.mass-text-textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.mass-text-textarea::placeholder {
  color: var(--text-muted);
}

.mass-text-subheader {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  font-size: 0.85rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.mass-text-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.mass-text-footer .recipient-count {
  font-weight: 500;
}

/* Individual Text Info */
.individual-text-info {
  margin-bottom: var(--spacing-sm);
}

/* SMS Upsell Banner */
.sms-upsell-banner {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1px solid #7dd3fc;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}

.sms-upsell-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.sms-upsell-icon {
  font-size: 28px;
  color: #0284c7;
  flex-shrink: 0;
}

.sms-upsell-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sms-upsell-text strong {
  color: #0c4a6e;
  font-size: 0.95rem;
}

.sms-upsell-text span {
  color: #475569;
  font-size: 0.82rem;
}

.sms-upsell-btn {
  width: 100%;
  padding: 12px 16px !important;
  font-weight: 600;
}

.mass-text-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  flex-shrink: 0;
}

.mass-text-actions .btn {
  flex: 1;
  padding: 12px 16px;
}

/* PIN Helper Section (for individual text copy/paste) */
.pin-helper-section {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-sm);
  border: 1px solid var(--border-light);
}

.pin-helper-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.pin-helper-title .material-icons {
  font-size: 14px;
  color: var(--brand-blue);
}

.pin-helper-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.pin-helper-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.pin-helper-name {
  color: var(--text-secondary);
}

.pin-helper-pin {
  font-family: monospace;
  font-weight: 600;
  color: var(--brand-blue);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}

.pin-helper-pin:hover {
  background: var(--brand-blue-light, rgba(37, 99, 235, 0.1));
}

/* Text hint below actions */
.text-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.text-hint .material-icons {
  font-size: 16px;
  color: var(--brand-blue);
  flex-shrink: 0;
}

/* Legacy mass-text-info for individual text modal */
.mass-text-info {
  display: flex;
  justify-content: flex-end;
  margin: var(--spacing-sm) 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* List View Enhancements */
.dispatch-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.load-previous-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-page) 100%);
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s;
}

.load-previous-btn:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

/* ============================================
   DISPATCH SEARCH VIEW
   ============================================ */
.dispatch-search-view {
  padding: 0;
}

.dispatch-search-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
}

.dispatch-search-icon {
  font-size: 22px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.dispatch-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  background: transparent;
  color: var(--text-primary);
  padding: 8px 0;
}

.dispatch-search-input::placeholder {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.dispatch-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
}

.dispatch-search-clear:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.dispatch-search-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-primary);
}

.search-filter-pill {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.search-filter-pill.active {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}

.search-filter-pill:hover:not(.active) {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.search-result-count {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Search result card tweaks */
.dispatch-search-view .dispatch-job-card {
  margin: 0 12px;
}

.dispatch-search-view .dispatch-job-card:first-of-type {
  margin-top: 8px;
}

.dispatch-job-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.search-date-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 1px 8px;
  border-radius: 4px;
}

.dispatch-job-customer {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.search-finished-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #F1F5F9;
  color: #64748B;
}

.dispatch-job-card.search-finished {
  opacity: 0.65;
}

.dispatch-search-view .load-previous-btn {
  margin: 12px;
}

.scroll-hint-past {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.scroll-hint-past:hover {
  opacity: 1;
  color: var(--brand-blue);
}

.scroll-hint-past .material-icons {
  font-size: 1rem;
  animation: bounce-up 1.5s infinite;
}

@keyframes bounce-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(6px); }
  60% { transform: translateY(3px); }
}

.dispatch-day-group {
  background: var(--bg-card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  transition: box-shadow 0.2s ease;
}

.dispatch-day-group:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.dispatch-day-group.today {
  border: 2px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(var(--bg-card), var(--bg-card)),
    linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #3b82f6 100%);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
}

.dispatch-day-group.past {
  opacity: 0.6;
  border-style: dashed;
}

.dispatch-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-page) 100%);
  border-bottom: 1px solid var(--border-light);
}

.dispatch-day-group.today .dispatch-day-header {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.today-badge {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  margin-right: var(--spacing-sm);
}

.dispatch-day-jobs {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.dispatch-job-card {
  display: flex;
  align-items: stretch;
  background: white;
  border-radius: 6px;
  border-left: 4px solid var(--border-medium);
  border-top: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dispatch-job-card:hover {
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.dispatch-job-card.cancelled {
  opacity: 0.5;
  background: var(--bg-elevated);
}

.dispatch-job-card.finished {
  opacity: 0.7;
  border-left-color: var(--status-success);
}

/* Driver mode card - gradient border and color-coded like viewer/dispatch mode */
/* Driver Mode - Hide dispatcher-only elements */
body.driver-mode .dispatcher-only {
  display: none !important;
}

body.driver-mode .btn-mass-text {
  display: none !important;
}

body.driver-mode .view-toggle {
  display: none !important;
}

.dispatch-job-card.driver-mode-card {
  border: 2px solid transparent;
  border-left-width: 4px;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(var(--bg-card), var(--bg-card)),
    linear-gradient(135deg, var(--card-color, #3b82f6), var(--card-color-dark, #1d4ed8));
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.08), 0 12px 28px rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;
}

.dispatch-job-card.driver-mode-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2563EB 0%, #3B82F6 50%, #DC2626 100%);
  border-radius: 12px 12px 0 0;
  z-index: 1;
}

.dispatch-job-card.driver-mode-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.dispatch-job-card.driver-mode-card .dispatch-job-customer {
  font-size: 1.25rem;
  font-weight: 700;
}

.dispatch-job-card.driver-mode-card .dispatch-job-location {
  font-size: 1.05rem;
}

.dispatch-job-card.driver-mode-card .dispatch-job-meta {
  font-size: 1rem;
}

.dispatch-job-card.driver-mode-card .btn-view-details {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 10px 20px;
}

.dispatch-job-content {
  flex: 1;
  padding: var(--spacing-md);
  cursor: pointer;
}

.dispatch-job-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.dispatch-job-title {
  font-weight: 600;
  color: var(--text-primary);
}

/* Job type badges for meetings/shop days */
.job-type-badge {
  margin-right: 6px;
  font-size: 14px;
}

.dispatch-job-card.type-meeting {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border-color: #3B82F6 !important;
}

.dispatch-job-card.type-shop {
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
  border-color: #8B5CF6 !important;
}

.dispatch-job-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.dispatch-job-customer {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 4px 0;
}

.dispatch-job-assignments {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}

.dispatch-job-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.dispatch-job-location .material-icons {
  font-size: 14px;
}

.dispatch-job-actions {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--bg-elevated);
}

.btn-edit-job,
.btn-view-details {
  padding: 12px 24px;
  min-width: 120px;
  font-weight: 600;
}

/* POC Info Card */
.poc-info-card {
  margin-top: var(--spacing-sm);
}

.poc-card {
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.poc-card-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.primary-badge {
  background: var(--brand-blue);
  color: white;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 600;
  margin-left: 4px;
}

.poc-card-role {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 8px;
}

.poc-card-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.poc-card-details span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.poc-card-details .material-icons {
  font-size: 16px;
  color: var(--text-muted);
}

/* Customer Contacts List */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.section-header h4 {
  margin: 0;
}

.btn-small {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.875rem;
}

.contact-row {
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  border: 1px solid var(--border-light);
}

.btn-remove-contact {
  color: var(--action-danger);
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: var(--radius-md);
  padding: 8px;
  transition: all 0.2s;
}

.btn-remove-contact:hover {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.4);
}

.btn-remove-contact:active {
  background: rgba(220, 38, 38, 0.25);
}

/* Form checkbox styling */
.form-group-checkbox {
  display: flex;
  align-items: center;
  padding-top: 24px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
  cursor: pointer;
}
}

/* Assignment badges in week view */
.assignment-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 10px;
  margin-right: 2px;
}

.assignment-badge.driver {
  background: rgba(255, 255, 255, 0.3);
}

.assignment-badge.truck {
  background: rgba(255, 255, 255, 0.2);
}

.assignment-badge.asset {
  background: rgba(255, 255, 255, 0.15);
}

.assignment-badge.subcontractor {
  background: rgba(147, 51, 234, 0.25);
}

.unassigned {
  opacity: 0.7;
  font-style: italic;
}

/* Mobile List View */
@media (max-width: 768px) {
  .dispatch-job-card {
    flex-direction: column;
  }

  .dispatch-job-actions {
    padding: var(--spacing-sm) var(--spacing-md);
    justify-content: center;
  }

  .btn-edit-job,
  .btn-view-details {
    width: 100%;
  }

  .quickview-actions {
    flex-direction: column;
  }

  .mass-text-textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
    min-height: 50vh;
  }

  /* Mass Text Modal - already fullscreen, just tighten padding */
  #modal-mass-text .modal-body {
    padding: var(--spacing-sm);
  }

  #modal-mass-text .modal-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .mass-text-toggle {
    gap: var(--spacing-xs);
  }

  .mass-text-toggle .mass-text-btn {
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .mass-text-actions .btn {
    padding: 14px 16px;
    font-size: 1rem;
  }
}

/* ============================================
   VEHICLE INVENTORY STYLES
   ============================================ */

/* Inventory section in truck modal */
.form-section-collapsible {
  margin: var(--spacing-md) 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.form-section-collapsible .form-section-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-elevated);
  margin: 0;
}

.form-section-collapsible .form-section-header h4 {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0;
  font-size: 0.9rem;
}

.form-section-collapsible .form-section-header h4 .material-icons {
  font-size: 1.1rem;
  color: var(--brand-blue);
}

.form-section-collapsible .section-chevron {
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.form-section-content {
  padding: var(--spacing-md);
  background: var(--bg-primary);
}

.form-section-content.collapsed {
  display: none;
}

/* Inventory items container */
.inventory-items-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.inventory-item-row {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
}

.inventory-item-fields {
  display: grid;
  grid-template-columns: 2fr 1.5fr 0.7fr 0.8fr auto;
  gap: var(--spacing-sm);
  align-items: end;
}

.inventory-item-fields .form-group {
  margin-bottom: 0;
}

.inventory-item-fields input,
.inventory-item-fields select {
  font-size: 0.875rem;
  padding: 6px 8px;
}

.inventory-name-field input {
  min-width: 0;
}

.inventory-qty-field input {
  width: 60px;
  text-align: center;
}

.inventory-unit-field select {
  min-width: 70px;
}

/* Inventory Modal Tabs */
.inventory-tabs {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--border-light);
  padding-bottom: var(--spacing-xs);
}

.inventory-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.inventory-tab:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.inventory-tab.active {
  color: var(--brand-blue);
  background: var(--bg-elevated);
}

.inventory-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-blue);
}

.inventory-tab .material-icons {
  font-size: 1.1rem;
}

.inventory-tab-content {
  animation: fadeIn 0.2s ease;
}

.inventory-tab-content.hidden {
  display: none;
}

/* Inventory Checklist Table */
.inventory-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
  font-size: 0.9rem;
}

.inventory-table th {
  text-align: left;
  padding: var(--spacing-sm);
  background: var(--bg-elevated);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-light);
}

.inventory-table td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.inventory-table tr:hover {
  background: var(--bg-elevated);
}

.inv-item-name {
  font-weight: 500;
}

.inv-item-category {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.inv-item-expected {
  color: var(--text-muted);
}

.inventory-qty-input {
  width: 70px;
  padding: 6px 8px;
  text-align: center;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.inventory-qty-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Inventory History */
.inventory-history-filter {
  margin-bottom: var(--spacing-md);
}

.inventory-history-filter select {
  min-width: 150px;
}

.inventory-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-height: 400px;
  overflow-y: auto;
}

.inventory-history-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.inventory-history-item.inventory-count {
  border-left: 3px solid var(--brand-blue);
}

.inventory-history-item.inventory-purchase {
  border-left: 3px solid var(--status-success);
}

.inventory-history-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.inventory-history-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.1);
  border-radius: var(--radius-sm);
  color: var(--brand-blue);
}

.inventory-history-icon.purchase {
  background: rgba(34, 197, 94, 0.1);
  color: var(--status-success);
}

.inventory-history-icon .material-icons {
  font-size: 1rem;
}

.inventory-history-info {
  flex: 1;
}

.inventory-history-title {
  font-weight: 600;
  color: var(--text-primary);
}

.inventory-history-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.inventory-history-cost {
  font-weight: 600;
  color: var(--status-success);
  font-size: 1.1rem;
}

.inventory-history-notes {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  font-style: italic;
}

.inventory-history-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.inventory-history-item-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 8px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.inventory-history-item-row.discrepancy {
  background: rgba(239, 68, 68, 0.1);
  color: var(--status-danger);
}

.inventory-history-item-row .item-name {
  font-weight: 500;
}

.inventory-history-item-row .item-qty {
  color: var(--text-muted);
}

.inventory-history-item-row.discrepancy .item-qty {
  color: var(--status-danger);
  font-weight: 600;
}

/* Status badges */
.inventory-discrepancy-badge {
  padding: 2px 8px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--status-danger);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.inventory-ok-badge {
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.1);
  color: var(--status-success);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Expandable inventory header */
.inventory-expandable {
  cursor: pointer;
  transition: background 0.2s;
}

.inventory-expandable:hover {
  background: var(--bg-light);
}

.inventory-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-left: auto;
}

.inventory-item-count {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.inventory-expand-icon {
  color: var(--text-muted);
  font-size: 20px;
  transition: transform 0.2s;
}

/* Collapsed state */
.inventory-history-items.collapsed {
  display: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .inventory-item-fields {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }

  .inventory-item-fields .inventory-qty-field,
  .inventory-item-fields .inventory-unit-field {
    display: inline-block;
    width: auto;
  }

  .inventory-table {
    font-size: 0.85rem;
  }

  .inventory-table th,
  .inventory-table td {
    padding: var(--spacing-xs);
  }

  .inventory-tabs {
    flex-wrap: wrap;
  }

  .inventory-tab {
    flex: 1;
    justify-content: center;
    min-width: 100px;
  }
}

/* ============================================
   BI MODULE
   ============================================ */
.bi-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bi-period-selector {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--bg-secondary);
  border-radius: 10px;
  width: fit-content;
}

.bi-period-pill {
  padding: 6px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.bi-period-pill:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-primary);
}

.bi-period-pill.active {
  background: #fff;
  color: var(--brand-blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.bi-vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.bi-vehicle-card {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  border-left: 4px solid var(--brand-blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.bi-vehicle-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.bi-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #EFF6FF;
  color: #3B82F6;
  margin-top: 4px;
}

.bi-bar-track {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.bi-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.bi-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--brand-blue);
  background: var(--bg-secondary);
  border-radius: 0 8px 8px 0;
  margin-bottom: 8px;
}

.bi-hbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.bi-hbar-label {
  flex: 0 0 140px;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bi-hbar-track {
  flex: 1;
  height: 20px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.bi-hbar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 2px;
}

.bi-hbar-value {
  flex: 0 0 80px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.bi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.bi-table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-light);
}

.bi-table td {
  padding: 8px 12px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
}

.bi-table tbody tr:hover {
  background: var(--bg-secondary);
}

/* BI Profitability Tab */
.bi-job-pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.bi-job-pl-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.bi-job-pl-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.bi-job-pl-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bi-job-pl-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bi-job-pl-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 2px 0;
}

.bi-job-pl-val {
  font-weight: 500;
}

.bi-job-pl-total {
  border-top: 1px solid var(--border-light);
  padding-top: 6px;
  margin-top: 4px;
  font-weight: 700;
  color: var(--text-primary);
}

.bi-profit-positive {
  color: #10B981;
  font-weight: 700;
}

.bi-profit-negative {
  color: #EF4444;
  font-weight: 700;
}

.bi-cost-cat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.bi-cost-table {
  overflow-x: auto;
}

.bi-cost-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.bi-cost-table th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-light);
}

.bi-cost-table td {
  padding: 8px 10px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
}

.bi-cost-table tbody tr:hover {
  background: var(--bg-secondary);
}

@media (max-width: 768px) {
  .bi-period-selector {
    width: 100%;
  }
  .bi-period-pill {
    flex: 1;
    text-align: center;
    padding: 8px 8px;
    font-size: 12px;
  }
  .bi-vehicle-grid {
    grid-template-columns: 1fr;
  }
  .bi-vehicle-card {
    padding: 12px;
  }
  .bi-hbar-label {
    flex: 0 0 100px;
    font-size: 12px;
  }
  .bi-hbar-value {
    flex: 0 0 60px;
    font-size: 12px;
  }
  .bi-table {
    font-size: 12px;
  }
  .bi-table th, .bi-table td {
    padding: 6px 8px;
  }
  .bi-job-pl-grid {
    grid-template-columns: 1fr;
  }
  .bi-cost-table {
    font-size: 12px;
  }
  .bi-cost-table th, .bi-cost-table td {
    padding: 6px 8px;
  }
}

/* ============================================
   VISUAL BI
   ============================================ */

/* Pill sub-menu */
.bi-visual-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  background: var(--bg-secondary);
  border-radius: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 16px auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bi-visual-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 2px solid #CBD5E1;
  background: #F8FAFC;
  font-size: 15px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.bi-visual-pill:hover {
  background: #EFF6FF;
  color: var(--brand-blue);
  border-color: var(--brand-blue);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.12);
}

.bi-visual-pill.active {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.bi-visual-pill .material-icons {
  font-size: 20px;
}

.bi-visual-pill-count {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0,0,0,0.08);
}

.bi-visual-pill.active .bi-visual-pill-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* Placard grid */
.bi-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-md);
}

/* Placard card — mirrors HR employee card pattern */
.bi-visual-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
  box-shadow: var(--shadow-sm);
}

.bi-visual-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--brand-blue);
}

.bi-visual-card:active {
  transform: scale(0.99);
}

.bi-visual-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-md) 10px;
  background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(20,184,166,0.06));
  border-bottom: 1px solid var(--border-light);
}

.bi-visual-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.bi-visual-avatar.icon {
  font-size: 22px;
}

.bi-visual-avatar.icon .material-icons {
  font-size: 22px;
  color: #fff;
}

.bi-visual-card-title {
  min-width: 0;
  flex: 1;
}

.bi-visual-card-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bi-visual-card-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.bi-visual-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px var(--spacing-md);
  min-height: 38px;
}

.bi-vis-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
}

.bi-vis-badge .material-icons {
  vertical-align: middle;
}

.bi-vis-badge.blue { background: #DBEAFE; color: #1E40AF; }
.bi-vis-badge.green { background: #D1FAE5; color: #065F46; }
.bi-vis-badge.amber { background: #FEF3C7; color: #92400E; }
.bi-vis-badge.purple { background: #EDE9FE; color: #5B21B6; }
.bi-vis-badge.red { background: #FEE2E2; color: #991B1B; }

.bi-visual-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px var(--spacing-md);
  border-top: 1px solid var(--border-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-blue);
  background: #EFF6FF;
  transition: background 0.15s, color 0.15s;
}

.bi-visual-card:hover .bi-visual-card-footer {
  background: var(--brand-blue);
  color: #fff;
}

/* Clickable stat cards */
.bi-stat-clickable {
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.bi-stat-clickable:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.bi-stat-clickable:active {
  transform: scale(0.97);
}

.bi-stat-clickable.active {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Vertical stat card layout for BI modals */
.bi-stat-vertical {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px;
  gap: 4px;
}
.bi-stat-vertical .crm-stat-value {
  white-space: nowrap;
}
.bi-stat-vertical .crm-stat-label {
  white-space: nowrap;
}

/* Loan grid */
.bi-loan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.bi-loan-item {
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.bi-loan-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.bi-loan-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .bi-loan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bi-visual-grid {
    grid-template-columns: 1fr;
  }
  .bi-visual-pills {
    width: 100%;
  }
  .bi-visual-pill {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ============================================
   BILLING / CLOCK SHARED MODULE TABS
   ============================================ */

/* ============================================
   BILLING VIEW PILLS
   ============================================ */
.billing-view-pills {
  display: inline-flex;
  gap: 0;
  padding: 0;
  background: transparent;
  border-radius: 12px;
  margin-bottom: 14px;
  border: 2px solid #e2e8f0;
  overflow: hidden;
}

.billing-view-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.billing-view-pill .material-icons {
  font-size: 18px;
}

.billing-view-pill:hover {
  background: #f1f5f9;
  color: var(--text-primary);
}

.billing-view-pill.active {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: none;
}

/* E-TICKET TEMPLATES section removed — template builder scrapped in favor of item-code-driven tickets */

/* ============================================
   E-TICKET FORM (Driver Fill-Out — Job Board)
   ============================================ */
.eticket-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #3B82F6 0%, #0D9488 100%);
  color: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.eticket-form-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

.eticket-form-header-title .material-icons {
  font-size: 22px;
  color: #fff;
}

.eticket-form-context {
  background: #F1F5F9;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.eticket-form-context-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.eticket-form-context-row .material-icons {
  font-size: 18px;
  color: var(--brand-blue);
}

.eticket-form-field {
  margin-bottom: 14px;
}

.eticket-form-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.eticket-form-actions {
  display: flex;
  gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border-light);
  background: linear-gradient(to bottom, #F8FAFC, #fff);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
}

.eticket-form-actions .btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.eticket-form-actions .btn:hover {
  transform: translateY(-1px);
}

/* E-Ticket source badge in billing (kept for historical tickets) */
.eticket-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #DBEAFE;
  color: #1D4ED8;
}

.eticket-source-badge .material-icons {
  font-size: 14px;
  color: #1D4ED8;
}

/* Invoice column settings — "Not on invoice" badge */
.ic-not-on-invoice {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  color: #DC2626;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .eticket-form-header {
    border-radius: 0;
  }

  .eticket-form-actions {
    padding: 12px 16px 16px;
  }
}

/* ============================================
   CLOCK MODULE
   ============================================ */
.clock-view {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.clock-display {
  text-align: center;
  padding: var(--spacing-xl);
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  border-radius: var(--radius-xl);
  color: white;
  box-shadow: var(--shadow-lg);
}

.current-time {
  font-size: 4rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  letter-spacing: 4px;
}

.current-date {
  font-size: 1.25rem;
  opacity: 0.9;
  margin-top: var(--spacing-sm);
}

.clock-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

@media (max-width: 1024px) {
  .clock-content {
    grid-template-columns: 1fr;
  }
}

/* Clock Panel */
.clock-panel {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.clock-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

.clock-panel-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 700;
  color: var(--text-primary);
}

.clock-panel-title .material-icons {
  color: var(--text-secondary);
}

.clock-panel-body {
  padding: var(--spacing-lg);
}

/* Employee Selection */
.employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--spacing-sm);
}

.employee-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--bg-page);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
}

.employee-btn:hover {
  border-color: var(--action-primary);
  background: var(--bg-elevated);
}

.employee-btn.selected {
  border-color: var(--action-primary);
  background: rgba(59, 130, 246, 0.1);
}

.employee-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1rem;
}

.employee-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  text-align: center;
  word-break: break-word;
}

/* PIN Entry */
.pin-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
}

.pin-display {
  font-size: 2.5rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 12px;
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--bg-page);
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  min-width: 200px;
  text-align: center;
}

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  max-width: 240px;
}

.keypad-btn {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--bg-page);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
}

.keypad-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--action-primary);
}

.keypad-btn:active {
  background: var(--action-primary);
  color: white;
}

.keypad-btn.clear {
  background: var(--bg-elevated);
  color: var(--action-danger);
}

.keypad-btn.enter {
  background: var(--action-primary);
  color: white;
  border-color: var(--action-primary);
}

/* Clock Actions */
.clock-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
}

.clock-user-info {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
}

.clock-user-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.clock-user-status {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}

.clock-user-status.clocked-in {
  color: var(--action-success);
  font-weight: 600;
}

.clock-btn-group {
  display: flex;
  gap: var(--spacing-sm);
}

.btn-clock-in {
  flex: 1;
  background: var(--action-success);
  color: white;
  font-size: 1.25rem;
  padding: var(--spacing-lg);
}

.btn-clock-in:hover {
  background: #047857;
}

.btn-clock-out {
  flex: 1;
  background: var(--action-danger);
  color: white;
  font-size: 1.25rem;
  padding: var(--spacing-lg);
}

.btn-clock-out:hover {
  background: #B91C1C;
}

/* Active Entries */
.active-entries-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.active-entry {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--action-success);
}

.active-entry-info {
  flex: 1;
}

.active-entry-name {
  font-weight: 600;
  color: var(--text-primary);
}

.active-entry-time {
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.active-entry-duration {
  font-weight: 700;
  color: var(--action-primary);
  font-family: 'Courier New', monospace;
}

/* Recent Activity */
.recent-activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.activity-entry {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.activity-entry .material-icons {
  font-size: 18px;
}

.activity-entry.clock-in {
  border-left: 3px solid var(--action-success);
}

.activity-entry.clock-in .material-icons {
  color: var(--action-success);
}

.activity-entry.clock-out {
  border-left: 3px solid var(--action-danger);
}

.activity-entry.clock-out .material-icons {
  color: var(--action-danger);
}

.activity-time {
  color: var(--text-muted);
  font-family: 'Courier New', monospace;
}

.activity-name {
  font-weight: 500;
  color: var(--text-primary);
}

.activity-action {
  color: var(--text-secondary);
}

/* ============================================
   TICKETS MODULE
   ============================================ */
.tickets-view {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Billing Logo Upload — LinkedIn-style */
.billing-logo-upload {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 12px;
  border: 2px solid var(--border-light);
  background: var(--bg-elevated);
  cursor: pointer;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.billing-logo-upload:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.billing-logo-upload.has-logo {
  border-color: var(--border-light);
}
.billing-logo-upload.has-logo:hover {
  border-color: var(--brand-blue);
}
.billing-logo-upload img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  border-radius: 10px;
}
.billing-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.billing-logo-edit-badge {
  position: absolute;
  bottom: -6px;
  left: -6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-blue);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.15s, background 0.15s;
  z-index: 2;
}
.billing-logo-edit-badge .material-icons {
  font-size: 16px;
  color: #fff;
}
.billing-logo-upload:hover .billing-logo-edit-badge {
  transform: scale(1.1);
  background: #2563EB;
}

.ticket-count {
  background: var(--bg-elevated);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.ticket-count:empty {
  display: none;
}

/* Tickets Filters — see "Filter Buttons Polish" section below for active styles */

/* Tickets List */
.tickets-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.ticket-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border-left: 4px solid var(--border-medium);
  transition: all 0.2s;
}

.ticket-card:hover {
  box-shadow: var(--shadow-md);
}

/* Status border colors removed — customer color applied inline */

.ticket-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-light);
}

.ticket-card-date {
  font-weight: 700;
  color: var(--text-primary);
}

.ticket-card-body {
  padding: var(--spacing-md);
}

.ticket-card-customer {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.ticket-card-customer .material-icons {
  font-size: 20px;
  color: var(--text-muted);
}

.ticket-card-well {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: var(--spacing-sm);
}

.ticket-card-well .material-icons {
  font-size: 18px;
}

.ticket-card-work {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: var(--spacing-sm);
}

.ticket-card-employees {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.ticket-card-employees .material-icons {
  font-size: 16px;
}

.ticket-card-actions {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-light);
  justify-content: flex-end;
}

/* Billing Accordion Hierarchy */
.billing-accordion {
  margin-bottom: 10px;
}

.billing-accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(to bottom, #fff, #F8FAFC);
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.billing-accordion-header:hover {
  background: linear-gradient(to bottom, #F8FAFC, #F1F5F9);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: #94A3B8;
}

.billing-accordion-header .material-icons {
  font-size: 20px;
  color: var(--brand-blue);
}

.billing-accordion-meta {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  background: #F1F5F9;
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}

.accordion-chevron {
  font-size: 18px !important;
  color: var(--text-secondary) !important;
  transition: transform 0.2s;
}

.accordion-chevron.expanded {
  transform: rotate(90deg);
}

.billing-accordion-body {
  padding: 6px 0 2px 20px;
  margin-top: 4px;
  border-left: 2px solid #E2E8F0;
  margin-left: 18px;
}

.billing-accordion-subheader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(to bottom, #fff, #FAFBFC);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 6px;
  user-select: none;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.billing-accordion-subheader:hover {
  background: linear-gradient(to bottom, #F8FAFC, #F1F5F9);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: #CBD5E1;
}

.billing-accordion-subheader .material-icons {
  font-size: 18px;
  color: var(--text-secondary);
}

.billing-job-body {
  padding: 4px 0 4px 12px;
}

/* Job action buttons (edit/delete) — hidden by default, shown on hover */
.billing-job-actions {
  display: flex;
  gap: 2px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s;
}
.billing-accordion-subheader:hover .billing-job-actions {
  opacity: 1;
}
.billing-job-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  transition: all 0.15s;
}
.billing-job-action:hover {
  background: #E2E8F0;
  color: var(--text-primary);
}
.billing-job-action.danger:hover {
  background: #FEE2E2;
  color: #DC2626;
}
.billing-job-action .material-icons {
  font-size: 16px;
}

/* Inline edit for job rename */
.billing-inline-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.billing-inline-edit input {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 4px 8px;
  border: 1.5px solid var(--brand-blue);
  border-radius: 6px;
  outline: none;
  flex: 1;
  min-width: 0;
  background: #fff;
  color: var(--text-primary);
}
.billing-inline-edit input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.billing-inline-edit button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.billing-inline-edit button .material-icons {
  font-size: 18px;
}
.billing-inline-edit button.save-rename {
  color: #10B981;
}
.billing-inline-edit button.save-rename:hover {
  background: #D1FAE5;
}
.billing-inline-edit button.cancel-rename {
  color: #EF4444;
}
.billing-inline-edit button.cancel-rename:hover {
  background: #FEE2E2;
}

/* Drag handle (visible on hover for draggable tickets) */
.ticket-drag-handle {
  display: flex;
  align-items: center;
  padding: 0 2px;
  color: #CBD5E1;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  user-select: none;
  -webkit-user-select: none;
}
.ticket-drag-handle .material-icons {
  font-size: 18px;
}
.ticket-card.is-draggable:hover .ticket-drag-handle {
  opacity: 1;
}
.ticket-card.is-draggable:hover .ticket-drag-handle:hover {
  color: var(--text-secondary, #475569);
}
.ticket-card.is-draggable {
  cursor: grab;
}
.ticket-card.is-draggable:active {
  cursor: grabbing;
}

/* Drag & drop ticket states */
.ticket-card.dragging {
  opacity: 0.4;
  transform: scale(0.97);
  box-shadow: none;
  cursor: grabbing;
}
.billing-accordion-subheader.drag-over {
  background: linear-gradient(to bottom, #EFF6FF, #DBEAFE) !important;
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), 0 2px 8px rgba(59, 130, 246, 0.15) !important;
}

/* Drop zones container (per customer) — hidden until drag starts */
.billing-drop-zones {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}
.billing-drop-zones.visible {
  display: flex;
  animation: dropZoneFadeIn 0.25s ease-out;
}
@keyframes dropZoneFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.billing-unassigned-dropzone,
.billing-newjob-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 24px;
  border: 3px dashed #94A3B8;
  border-radius: 12px;
  color: #334155;
  font-size: 1rem;
  font-weight: 700;
  background: #F1F5F9;
  transition: all 0.15s;
  min-height: 72px;
}
.billing-unassigned-dropzone .material-icons,
.billing-newjob-dropzone .material-icons {
  font-size: 28px;
}
.billing-unassigned-dropzone.drag-over {
  border-color: var(--brand-blue);
  background: #DBEAFE;
  color: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 6px 20px rgba(59, 130, 246, 0.15);
  transform: scale(1.02);
}
.billing-newjob-dropzone {
  border-color: #4ADE80;
  color: #15803D;
  background: #F0FDF4;
}
.billing-newjob-dropzone.drag-over {
  border-color: #16A34A;
  background: #DCFCE7;
  color: #15803D;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.2), 0 6px 20px rgba(22, 163, 74, 0.15);
  transform: scale(1.02);
}

/* Selection Action Bar */
.billing-selection-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(to bottom, #EFF6FF, #DBEAFE);
  border: 1px solid #93C5FD;
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  box-shadow:
    0 1px 3px rgba(59, 130, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.billing-selection-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1E40AF;
  flex: 1;
  min-width: 0;
}

.billing-selection-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Ticket checkbox wrapper */
.ticket-checkbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.ticket-select-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 38px;
  border: 4px solid var(--customer-color, #94A3B8);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  background: #fff;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

/* Generous invisible hit area around checkbox */
.ticket-select-cb::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  cursor: pointer;
}

.ticket-select-cb:hover {
  border-color: var(--customer-color, var(--brand-blue));
  background: #EFF6FF;
}

.ticket-select-cb:checked {
  background: var(--customer-color, var(--brand-blue));
  border-color: var(--customer-color, var(--brand-blue));
}

.ticket-select-cb:checked::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 9px;
  width: 9px;
  height: 16px;
  border: solid #fff;
  border-width: 0 4px 4px 0;
  border-radius: 2px;
  transform: rotate(40deg);
}

/* Card layout when checkbox present */
.ticket-card.has-checkbox {
  display: flex;
  align-items: stretch;
  border: 1px solid #CBD5E1;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 3px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.ticket-card.has-checkbox:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  border-color: #94A3B8;
}

.ticket-card.has-checkbox .ticket-checkbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 4px 12px 14px;
  border-right: 1px solid #F1F5F9;
}

.ticket-card-inner {
  flex: 1;
  min-width: 0;
}

/* Badge for invoiced */
.badge-invoiced {
  background: #DBEAFE;
  color: #1E40AF;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* Ticket Form Sections */
.form-section {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

.form-section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
}

.form-section-header .material-icons {
  font-size: 20px;
}

/* Collapsible Form Section */
.form-collapsible {
  margin: var(--spacing-md) 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.form-collapsible-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  cursor: pointer;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
  list-style: none;
}

.form-collapsible-header::-webkit-details-marker {
  display: none;
}

.form-collapsible-header .material-icons {
  font-size: 20px;
  color: var(--text-muted);
}

.form-collapsible-header .collapse-icon {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.form-collapsible[open] .collapse-icon {
  transform: rotate(180deg);
}

.form-collapsible-header:hover {
  background: var(--bg-hover);
}

.form-collapsible-content {
  padding: 0 var(--spacing-md) var(--spacing-md);
  border-top: 1px solid var(--border-light);
  background: white;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Document Upload Area */
.doc-upload-area {
  background: var(--bg-elevated);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.doc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.doc-list:empty {
  display: none;
}

.doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}

.doc-item.pending {
  border-style: dashed;
  background: rgba(59, 130, 246, 0.05);
}

.doc-item .doc-icon {
  font-size: 20px;
  color: var(--text-muted);
}

.doc-item .doc-icon[style*="pdf"] {
  color: #ef4444;
}

.doc-item .doc-info {
  flex: 1;
  min-width: 0;
}

.doc-item .doc-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-item .doc-name:hover {
  color: var(--brand-blue);
}

.doc-item .doc-date,
.doc-item .doc-status {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.doc-item .doc-status {
  color: var(--brand-blue);
}

.doc-item .doc-status.pending-status {
  color: var(--text-muted);
  font-style: italic;
}

.doc-item .doc-status.uploaded-status {
  color: var(--status-success);
}

.doc-item .btn-icon,
.doc-item .btn-icon-danger {
  color: var(--text-muted);
  opacity: 1;
  padding: 4px;
  border-radius: 50%;
}

.doc-item .btn-icon:hover,
.doc-item .btn-icon-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Dynamic Form Rows */
.employee-row,
.time-entry-row,
.material-row {
  margin-bottom: var(--spacing-sm);
}

.employee-row .form-row,
.time-entry-row .form-row,
.material-row .form-row {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.form-group-sm {
  flex: 0 0 100px;
}

.flex-grow {
  flex: 1;
}

.btn-remove {
  color: var(--action-danger);
  opacity: 0.6;
}

.btn-remove:hover {
  opacity: 1;
  background: rgba(220, 38, 38, 0.1);
}

/* Ticket Detail View */
.ticket-detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-light);
}

.detail-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.detail-value {
  color: var(--text-primary);
  text-align: right;
}

.detail-section {
  margin-top: var(--spacing-md);
}

.detail-section-title {
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-section-content {
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  line-height: 1.5;
}

.detail-list {
  padding-left: var(--spacing-lg);
  margin: 0;
}

.detail-list li {
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

/* Mobile overrides for new modules */
@media (max-width: 768px) {
  /* Dispatch mobile */
  .dispatch-calendar {
    grid-template-columns: 1fr;
    padding-bottom: 80px; /* Extra space for mobile nav */
    margin-bottom: 20px;
  }

  .calendar-day-header {
    display: none;
  }

  .calendar-day {
    min-height: auto;
    padding: var(--spacing-md);
  }

  .week-navigation {
    flex-wrap: wrap;
  }

  .view-mode-toggle {
    width: 100%;
    justify-content: center;
  }

  .job-card {
    flex-direction: column;
  }

  .job-card-time {
    flex-direction: row;
    min-width: auto;
  }

  /* Clock mobile */
  .clock-content {
    grid-template-columns: 1fr;
  }

  .current-time {
    font-size: 2.5rem;
  }

  .employee-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pin-display {
    font-size: 2rem;
    min-width: 160px;
  }

  .keypad-btn {
    width: 56px;
    height: 56px;
  }

  /* Tickets mobile */
  .tickets-filters {
    justify-content: center;
  }

  .filter-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  .ticket-card-actions {
    flex-wrap: wrap;
  }

  .billing-selection-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .billing-selection-actions {
    justify-content: flex-end;
  }

  .billing-accordion-body {
    padding-left: 8px;
    margin-left: 10px;
  }

  .billing-job-body {
    padding-left: 6px;
  }

  .billing-accordion-header {
    padding: 10px 12px;
    gap: 8px;
  }

  .billing-accordion-subheader {
    padding: 8px 10px;
  }

  .billing-accordion-meta {
    font-size: 0.7rem;
    padding: 2px 8px;
  }

  .employee-row .form-row,
  .time-entry-row .form-row,
  .material-row .form-row {
    flex-wrap: wrap;
  }

  .form-group-sm {
    flex: 1 1 100%;
  }
}

/* ============================================
   TIME-OFF MODULE
   ============================================ */
.timeoff-view {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.timeoff-filters {
  display: flex;
  gap: var(--spacing-xs);
  background: var(--bg-elevated);
  padding: var(--spacing-xs);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}

.timeoff-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.timeoff-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border-left: 4px solid var(--border-medium);
  transition: all 0.2s;
}

.timeoff-card:hover {
  box-shadow: var(--shadow-md);
}

.timeoff-card.status-pending { border-left-color: var(--action-warning); }
.timeoff-card.status-approved { border-left-color: var(--action-success); }
.timeoff-card.status-denied { border-left-color: var(--action-danger); }

.timeoff-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-light);
}

.timeoff-card-person {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.person-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.person-avatar.large {
  width: 64px;
  height: 64px;
  font-size: 1.25rem;
}

.person-info {
  display: flex;
  flex-direction: column;
}

.person-name {
  font-weight: 600;
  color: var(--text-primary);
}

.person-role {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-transform: capitalize;
}

.timeoff-card-body {
  padding: var(--spacing-md);
}

.timeoff-dates {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.timeoff-dates .material-icons {
  font-size: 18px;
  color: var(--text-muted);
}

.timeoff-days {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 400;
}

.timeoff-type {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: var(--spacing-sm);
}

.timeoff-type .material-icons {
  font-size: 18px;
}

.timeoff-reason {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: var(--spacing-sm);
  background: var(--bg-page);
  border-radius: var(--radius-sm);
}

.timeoff-card-actions {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-light);
  justify-content: flex-end;
}

/* Status badges for time-off */
.badge-pending { background: #FEF3C7; color: #92400E; }
.badge-approved { background: #DCFCE7; color: #166534; }
.badge-denied { background: #FEE2E2; color: #991B1B; }

/* Review Modal */
.review-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
}

.review-person-info {
  display: flex;
  flex-direction: column;
}

.review-person-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.review-person-role {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-transform: capitalize;
}

.review-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.review-details .detail-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-light);
}

.review-details .detail-row.full {
  flex-direction: column;
  gap: var(--spacing-xs);
}

.review-details .detail-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.review-details .detail-value {
  color: var(--text-primary);
}

.review-notes {
  margin-top: var(--spacing-lg);
}

.review-notes label {
  display: block;
  margin-bottom: var(--spacing-sm);
}

.review-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  padding: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.request-count {
  background: var(--bg-elevated);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Mobile overrides for time-off */
@media (max-width: 768px) {
  .timeoff-filters {
    justify-content: center;
  }

  .timeoff-card-header {
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: flex-start;
  }

  .review-header {
    flex-direction: column;
    text-align: center;
  }

  .review-actions {
    flex-wrap: wrap;
  }

  .review-actions .btn {
    flex: 1;
    min-width: 100px;
  }
}

/* ============================================
   COMPREHENSIVE MOBILE FIXES
   ============================================ */
@media (max-width: 768px) {
  /* Clock module */
  .current-time {
    font-size: 2.5rem;
    letter-spacing: 2px;
  }

  .current-date {
    font-size: 1rem;
  }

  .clock-display {
    padding: var(--spacing-md);
  }

  .employee-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .employee-btn {
    padding: 8px;
    font-size: 0.75rem;
  }

  .pin-display {
    font-size: 1.5rem;
    padding: 10px;
  }

  .keypad-grid {
    gap: 8px;
  }

  .keypad-btn {
    padding: 12px;
    font-size: 1.25rem;
  }

  /* Dispatch module - Mobile header layout */
  .dispatch-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: var(--spacing-sm) 0;
  }

  .dispatch-header .date-nav {
    grid-column: unset;
    justify-self: unset;
  }

  .dispatch-header .header-actions {
    grid-column: unset;
    justify-self: unset;
  }

  .date-nav {
    justify-content: center;
    width: 100%;
    gap: 4px;
  }

  .date-display {
    font-size: 1rem;
    min-width: 100px;
  }

  .btn-icon-nav {
    width: 40px;
    height: 40px;
  }

  .header-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
    padding: 0 var(--spacing-sm);
  }

  .header-actions .btn {
    flex: 1;
    max-width: none;
    padding: 12px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 6px;
    justify-content: center;
  }

  .header-actions .btn-primary {
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35);
  }

  .header-actions .btn-secondary-accent {
    box-shadow: 0 2px 8px rgba(71, 85, 105, 0.3);
  }

  .dispatch-nav-pills {
    display: none; /* Removed nav pills */
  }

  /* Dispatch view mobile scroll fix */
  .dispatch-view {
    padding-bottom: 100px; /* Extra space above mobile nav */
    min-height: 0; /* Allow flexbox shrinking */
  }

  .dispatch-list {
    padding-bottom: 80px; /* Extra space for last item buttons */
  }

  .week-view,
  .lanes-view,
  .lanes-view-compact {
    margin-bottom: 80px; /* Space before bottom of scroll area */
  }

  .dispatch-view-toggle {
    flex-direction: row;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
  }

  .view-toggle {
    gap: 4px;
    background: var(--bg-elevated);
    padding: 6px;
    border-radius: var(--radius-lg);
  }

  .view-btn {
    padding: 10px 14px;
    font-size: 0.8125rem;
  }

  .view-btn-label {
    font-size: 0.75rem;
  }

  .role-toggle {
    display: none;
  }

  /* Legacy dispatch-nav hidden on mobile */
  .dispatch-nav {
    display: none;
  }

  .week-header {
    font-size: 0.625rem;
  }

  .day-number {
    font-size: 0.875rem;
    width: 28px;
    height: 28px;
  }

  .job-card-mini {
    padding: 4px 6px;
    font-size: 0.625rem;
  }

  /* Tickets module */
  .tickets-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .tickets-filters {
    flex-wrap: wrap;
    justify-content: center;
  }

  .filter-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  .ticket-card {
    padding: var(--spacing-sm);
  }

  .ticket-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  /* Sidebar when open */
  #app-sidebar.open {
    width: 200px;
  }

  .sidebar-brand {
    padding: var(--spacing-sm);
  }

  .sidebar-logo {
    height: 40px;
  }

  .nav-item {
    padding: 10px 12px;
    font-size: 0.75rem;
  }

  .nav-item .material-icons {
    font-size: 20px;
  }

  /* View headers */
  .roster-header,
  .pretrip-header,
  .maintenance-header,
  .clock-header,
  .tickets-header,
  .timeoff-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  /* All view title h1s */
  .roster-view h1,
  .dispatch-view h1,
  .pretrip-view h1,
  .maintenance-view h1,
  .clock-view h1,
  .tickets-view h1,
  .timeoff-view h1 {
    font-size: 1.25rem;
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .print-label { display: none; }

  /* Center module titles on mobile */
  .pretrip-header-left,
  .maintenance-header-left,
  .clock-title,
  .hr-view .view-title,
  .panel-header {
    text-align: center;
  }

  .panel-header h2 {
    width: 100%;
  }

  /* Tabs */
  .roster-tabs {
    gap: 4px;
    padding: 4px;
  }

  .roster-tab {
    padding: 8px 12px;
    font-size: 0.75rem;
  }

  /* Cards */
  .roster-card,
  .pretrip-card,
  .maintenance-card,
  .ticket-card,
  .timeoff-card {
    padding: var(--spacing-sm);
  }

  /* Filter buttons */
  .pretrip-filter,
  .maintenance-filter,
  .filter-btn {
    padding: 6px 10px;
    font-size: 0.75rem;
  }

  /* Form sections */
  .form-section-title {
    font-size: 0.875rem;
  }

  /* Empty states */
  .empty-state {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .empty-state-icon {
    font-size: 2.5rem;
  }

  .empty-state-title {
    font-size: 1rem;
  }

  .empty-state-text {
    font-size: 0.875rem;
  }
}

/* ============================================
   WORKFLOW HISTORY IN TASK DETAILS
   ============================================ */
.workflow-history {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

.workflow-history h4 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.workflow-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.workflow-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--bg-page);
  border-radius: var(--radius-md);
}

.workflow-item.completed {
  background: #DCFCE7;
}

.workflow-icon {
  font-size: 20px;
  color: var(--text-muted);
}

.workflow-item.completed .workflow-icon {
  color: #166534;
}

.workflow-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: center;
}

.workflow-action {
  font-weight: 600;
  color: var(--text-primary);
}

.workflow-date {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.workflow-by {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.workflow-source {
  color: var(--brand-blue);
  font-size: 0.75rem;
  font-weight: 500;
}

/* ============================================
   REPORTER/COMPLETED BY STYLING
   ============================================ */
.maintenance-card-meta .reported-by {
  color: var(--text-muted);
  font-style: italic;
}

.maintenance-card-meta .completed-by {
  color: #166534;
  font-weight: 500;
}

.maintenance-card-meta .completed-by .material-icons {
  color: #166534;
}

/* ============================================
   DVIR HISTORY MODAL
   ============================================ */
.dvir-history-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.dvir-day-buttons {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: nowrap;
  align-items: center;
}

.dvir-date-range {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-left: auto;
}

.dvir-date-range input[type="date"] {
  padding: 6px 10px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  background: var(--bg-card);
  color: var(--text-primary);
}

.dvir-date-range span {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.dvir-day-btn {
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: auto;
  text-align: center;
}

.dvir-day-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--border-medium);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.dvir-day-btn.active {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  border-color: var(--brand-blue);
  color: white;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35), 0 2px 6px rgba(59, 130, 246, 0.2);
}

.dvir-calendar-btn {
  flex-shrink: 0;
}

.dvir-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.dvir-history-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--border-medium);
}

.dvir-history-item.dvir-status-pass {
  border-left-color: #059669;
  background: #F0FDF4;
}

.dvir-history-item.dvir-status-warning {
  border-left-color: #D97706;
  background: #FFFBEB;
}

.dvir-history-item.dvir-status-critical {
  border-left-color: #DC2626;
  background: #FEF2F2;
}

.dvir-history-info {
  flex: 1;
}

.dvir-history-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
}

.dvir-history-datetime {
  font-weight: 600;
  color: var(--text-primary);
}

.dvir-history-type {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.dvir-history-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.dvir-history-details span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dvir-history-details .material-icons {
  font-size: 16px;
  color: var(--text-muted);
}

.dvir-history-notes {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: rgba(220, 38, 38, 0.1);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: #991B1B;
}

.dvir-history-notes.maintenance {
  background: rgba(217, 119, 6, 0.1);
  color: #92400E;
}

.dvir-history-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  min-width: 80px;
  text-align: center;
}

.dvir-history-status .material-icons {
  font-size: 28px;
}

.dvir-history-status span:last-child {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dvir-history-status.dvir-status-pass {
  background: #DCFCE7;
  color: #166534;
}

.dvir-history-status.dvir-status-warning {
  background: #FEF3C7;
  color: #92400E;
}

.dvir-history-status.dvir-status-critical {
  background: #FEE2E2;
  color: #991B1B;
}

.dvir-history-item.dvir-status-resolved {
  border-left-color: #0D9488;
  background: #F0FDFA;
}

.dvir-history-status.dvir-status-resolved {
  background: #CCFBF1;
  color: #115E59;
}

/* Mobile DVIR history adjustments */
@media (max-width: 768px) {
  .dvir-history-item {
    flex-direction: column;
  }

  .dvir-history-status {
    flex-direction: row;
    width: 100%;
    justify-content: center;
    min-width: auto;
  }
}

/* ============================================
   COST TRACKING STYLES
   ============================================ */

/* Make costs modal scrollable */
/* Log PM modal — scrollable form so buttons don't clip on smaller screens */
#modal-pm .modal-content {
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
}

#modal-pm form {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

#modal-pm .form-actions {
  flex-shrink: 0;
  border-top: 1px solid var(--border-light);
  background: var(--bg-card);
}

#modal-costs .modal-content {
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
}

#modal-costs form {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

#modal-costs .form-actions {
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
  padding: var(--spacing-md) var(--spacing-lg);
  margin: 0 calc(var(--spacing-lg) * -1) calc(var(--spacing-lg) * -1);
  border-top: 1px solid var(--border-light);
  z-index: 5;
}

/* Receipt limit indicator */
.receipt-limit-warning {
  color: var(--action-warning);
  font-size: 0.8rem;
  margin-top: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: 4px;
}

.receipt-limit-warning .material-icons {
  font-size: 14px;
}

.costs-task-info {
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

.costs-task-summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.costs-task-summary strong {
  font-size: 1rem;
}

.costs-task-summary .text-muted {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.form-section {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.form-section h4 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-row {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.form-row .form-group {
  flex: 1;
  min-width: 100px;
}

.cost-display {
  padding: 14px 16px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  color: var(--action-success);
}

.costs-grand-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-slate) 100%);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

.costs-grand-total span:first-child {
  font-weight: 500;
}

.grand-total-amount {
  font-size: 1.5rem;
  font-weight: 700;
}

/* Tax toggle rows (parts + shop costs) */
.cost-tax-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.cost-tax-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.cost-tax-rate {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cost-tax-rate input {
  width: 70px;
  padding: 6px 8px;
  font-size: 0.85rem;
}

.cost-tax-amount {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-left: auto;
}

/* Collapsible cost sections (Labor / Parts / Shop) */
.cost-section-collapsible {
  border-bottom: 1px solid var(--border-light);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.cost-section-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.cost-section-toggle:hover {
  color: var(--brand-blue);
}

.cost-section-chevron {
  font-size: 20px;
  transition: transform 0.2s;
}

.cost-section-badge {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--action-success);
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.cost-section-body {
  margin-top: 12px;
}

/* Shop receipt upload (standalone modal) */
.shop-receipt-upload {
  display: flex;
  gap: 8px;
}

.shop-receipt-preview .receipt-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

/* Shop Cost History */
.shop-history-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.shop-history-total {
  font-weight: 700;
  color: var(--text-primary);
}

.shop-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.shop-history-info {
  flex: 1;
  min-width: 0;
}

.shop-history-desc {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-history-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.shop-history-amount {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.cost-badge {
  background: var(--action-success);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Receipt Upload */
.receipt-upload-area {
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 2px dashed var(--border-medium);
}

.receipt-upload-buttons {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.btn-ai-scan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-cyan);
  background: color-mix(in srgb, var(--brand-cyan) 10%, var(--bg-elevated));
  border: 1px solid var(--brand-cyan);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-ai-scan:hover {
  background: color-mix(in srgb, var(--brand-cyan) 20%, var(--bg-elevated));
}
.btn-ai-scan .material-icons {
  font-size: 18px;
}

.receipt-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.receipt-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}

.receipt-item .material-icons {
  color: var(--text-muted);
}

.receipt-name {
  flex: 1;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-extracted {
  color: var(--action-success);
  font-weight: 600;
  font-size: 0.875rem;
}

.receipt-item .btn-icon {
  color: var(--text-muted);
  opacity: 1;
  padding: 4px;
  border-radius: 50%;
}

.receipt-item .btn-icon:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* ============================================
   VEHICLE INFO MODAL STYLES
   ============================================ */
.modal-large .modal-content {
  max-width: 800px;
  max-height: 90vh;
  /* Note: overflow handled by inner scrollable elements, not modal-content */
}

.vehicle-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.vehicle-info-section {
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}

.vehicle-info-section.full-width {
  grid-column: 1 / -1;
}

.vehicle-info-section h4 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md) 0;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}

.vehicle-info-section h4 .material-icons {
  color: var(--brand-cyan);
  font-size: 20px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  font-size: 0.875rem;
}

.info-row span:first-child {
  color: var(--text-muted);
}

.info-row strong {
  color: var(--text-primary);
}

.info-row.expiring {
  background: #FEF2F2;
  margin: 0 calc(-1 * var(--spacing-sm));
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.info-row.expiring strong {
  color: var(--action-danger);
}

.warning-icon {
  color: var(--action-danger);
  font-size: 16px !important;
  margin-left: var(--spacing-xs);
}

.vehicle-info-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

/* ============================================
   FLUID TRACKING STYLES
   ============================================ */
#oil-specific-fields {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background: #FFFBEB;
  border-radius: var(--radius-md);
  border: 1px solid #FCD34D;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-weight: 400;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.fluids-history-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.fluids-history-section h4 {
  margin: 0 0 var(--spacing-md) 0;
}

.fluids-history {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-height: 300px;
  overflow-y: auto;
}

.fluid-entry {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}

.fluid-entry-icon {
  font-size: 1.5rem;
}

.fluid-entry-info {
  flex: 1;
}

.fluid-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.fluid-type {
  font-weight: 600;
}

.fluid-amount {
  background: var(--brand-blue);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.fluid-entry-details {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.fluid-entry-meta {
  display: flex;
  gap: var(--spacing-md);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.fluid-entry-notes {
  margin-top: var(--spacing-xs);
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* ============================================
   WORK HISTORY STYLES
   ============================================ */

/* Filters Section - Embedded Card Feel */
.history-filters {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: linear-gradient(145deg, var(--bg-elevated), var(--bg-card));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.02),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

.history-filters .form-group label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--spacing-xs);
}

.history-filters select,
.history-filters input[type="date"] {
  background: var(--bg-primary);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease;
}

.history-filters select:focus,
.history-filters input[type="date"]:focus {
  border-color: var(--brand-blue);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Summary Section */
.history-summary {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.5) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.history-summary-stats {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

/* Stat Cards - Rich 3D Feel */
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg) var(--spacing-xl);
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 8px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.02);
  min-width: 140px;
  flex: 1;
  max-width: 180px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 2px rgba(0, 0, 0, 0.02),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 12px 24px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.stat-item:hover::before {
  opacity: 1;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--brand-blue) 0%, #1e40af 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* History List Container */
.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.5) 0%, rgba(241, 245, 249, 0.3) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Empty State for History List */
.history-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  min-height: 200px;
}

.history-list-empty .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  opacity: 0.6;
}

.history-list-empty h4 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.history-list-empty p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* History Item Cards */
.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 2px 4px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-item:hover {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-color: rgba(37, 99, 235, 0.15);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

.history-item-info {
  flex: 1;
  min-width: 0;
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.history-item-category {
  background: var(--bg-card);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.history-item-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.history-item-description {
  font-size: 0.875rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}

.history-item-cost {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cost-amount {
  font-size: 1rem;
  font-weight: 700;
  color: var(--action-success);
}

.cost-labor {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Receipt indicator in history items */
.history-item-receipts {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--brand-blue);
  margin-top: 4px;
}

.history-item-receipts .material-icons {
  font-size: 14px;
}

/* Receipts grid in task detail */
.task-receipts-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.task-receipts-section h4 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.task-receipts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-md);
}

.task-receipt-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.task-receipt-thumb:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

.task-receipt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.task-receipt-thumb .pdf-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
}

.task-receipt-thumb .pdf-placeholder .material-icons {
  font-size: 48px;
  color: var(--action-danger);
  margin-bottom: var(--spacing-xs);
}

/* Print receipts button */
.btn-print-receipts {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-print-receipts:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--brand-blue);
}

.btn-print-receipts .material-icons {
  font-size: 18px;
}

/* History Action Buttons */
.history-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: var(--spacing-md);
}

.history-actions .btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-weight: 600;
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.2s ease;
}

.history-actions .btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.history-actions .btn .material-icons {
  font-size: 18px;
}

/* ============================================
   FORM SECTION HEADER (for Roster)
   ============================================ */
.form-section-header {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-light);
}

.form-section-header h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Form section divider (visual separator with icon + label) */
.form-section-divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-light);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-section-divider .material-icons {
  font-size: 18px;
  color: var(--brand-blue);
}

/* ============================================
   AXLE INPUT ROWS (Roster - Trucks/Trailers)
   ============================================ */
.axles-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.axle-input-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-secondary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.axle-input-row .axle-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  min-width: 50px;
}

.axle-input-row input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.axle-input-row input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px var(--brand-blue-light);
}

.axle-input-row .btn-icon {
  padding: 4px;
  min-width: auto;
  width: 28px;
  height: 28px;
}

.axle-input-row .btn-icon .material-icons {
  font-size: 16px;
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.75rem;
}

.btn-sm .material-icons {
  font-size: 16px;
}

/* ============================================
   MODAL SMALL VARIANT
   ============================================ */
.modal-small .modal-content {
  max-width: 400px;
}

/* ============================================
   CONFIRM MODAL
   ============================================ */
#confirm-modal {
  z-index: 9999;
}

.confirm-modal-content {
  max-width: 360px;
  padding: var(--spacing-xl);
  text-align: center;
}

.confirm-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.confirm-modal-icon {
  font-size: 48px;
  color: var(--brand-blue);
}

.confirm-modal-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.confirm-modal-message {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  line-height: 1.5;
}

.confirm-modal-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
}

.confirm-modal-actions .btn {
  flex: 1;
  max-width: 140px;
}

/* Danger variant */
#confirm-modal.confirm-danger .confirm-modal-icon {
  color: var(--status-danger);
}

#confirm-modal.confirm-danger #confirm-modal-confirm {
  background: var(--status-danger);
  border-color: var(--status-danger);
}

#confirm-modal.confirm-danger #confirm-modal-confirm:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* PIN Challenge Modal */
.pin-challenge-content {
  max-width: 340px;
  text-align: center;
  padding: var(--spacing-xl);
}

.pin-challenge-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.pin-challenge-header .material-icons {
  font-size: 48px;
  color: var(--accent);
}

.pin-challenge-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.pin-challenge-message {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  font-size: 0.9rem;
}

.pin-challenge-input {
  width: 100%;
  padding: 16px;
  font-size: 1.75rem;
  text-align: center;
  letter-spacing: 10px;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
}

.pin-challenge-input:focus {
  border-color: var(--accent);
}

.pin-challenge-error {
  color: #ef4444;
  font-size: 0.85rem;
  margin-top: var(--spacing-sm);
  display: none;
}

.pin-challenge-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.pin-challenge-actions .btn {
  flex: 1;
}

/* Module Access Settings - Grid Layout */
.module-access-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.module-access-header {
  display: grid;
  grid-template-columns: 100px repeat(5, 1fr);
  gap: 2px;
  background: var(--bg-elevated);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.module-access-header .role-header {
  text-align: center;
}

.module-access-row {
  display: grid;
  grid-template-columns: 100px repeat(5, 1fr);
  gap: 2px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-card);
  align-items: center;
}

.module-access-row .module-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.module-access-row .role-check {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.module-access-row .role-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--brand-blue);
}

@media (max-width: 500px) {
  .module-access-header {
    font-size: 0.6rem;
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .module-access-header .role-header {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    height: 50px;
  }

  .module-access-row {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .module-access-row .module-name {
    font-size: 0.75rem;
  }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS FOR NEW FEATURES
   ============================================ */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }

  .form-row .form-group {
    min-width: auto;
  }

  .vehicle-info-grid {
    grid-template-columns: 1fr;
  }

  .history-summary-stats {
    flex-direction: column;
    align-items: stretch;
  }

  .stat-item {
    flex-direction: row;
    justify-content: space-between;
  }

  .history-item {
    flex-direction: column;
    align-items: stretch;
  }

  .history-item-cost {
    flex-direction: row;
    justify-content: space-between;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-light);
  }

  .receipt-upload-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .receipt-upload-buttons .btn,
  .receipt-upload-buttons .btn-ai-scan {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  .fleet-card-actions {
    flex-wrap: wrap;
  }

  .fleet-card-actions .btn {
    flex: 1;
    min-width: 80px;
  }
}

/* =========================================================================
   WAYPOINTS
   ========================================================================= */

.waypoints-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.waypoint-row {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  margin-bottom: 8px;
}

.waypoint-row .waypoint-name {
  flex: 1;
}

.waypoint-row .waypoint-url {
  flex: 2;
}

.waypoint-status {
  font-size: 20px;
  color: var(--border-light);
  flex-shrink: 0;
  transition: color 0.2s;
}

.waypoint-status.active {
  color: #10B981;
}

@media (max-width: 768px) {
  .waypoint-row {
    flex-wrap: wrap;
  }

  .waypoint-row .waypoint-name,
  .waypoint-row .waypoint-url {
    flex: 1 1 100%;
  }

  .waypoint-status {
    position: absolute;
    right: 0;
    top: 4px;
  }

  .waypoint-row {
    position: relative;
    padding-right: 28px;
  }
}

.waypoint-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.btn-danger-outline {
  color: var(--danger, #DC2626);
  border: 1px solid var(--danger, #DC2626);
  background: transparent;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  cursor: pointer;
}

.btn-danger-outline:hover {
  background: #FEE2E2;
}

/* =========================================================================
   JOB PHOTO UPLOAD
   ========================================================================= */

.photo-upload-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  width: 100%;
}

.photo-grid-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.photo-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.photo-remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.photo-remove-btn .material-icons {
  font-size: 14px;
}

.photo-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.photo-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Permit Upload Section */
.permit-billing-options label { font-size: 14px; }

/* FastTrax Badge */
.badge-fasttrax {
  background: var(--status-warning);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
}

/* PDF file placeholder in permit grid */
.permit-pdf-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-md);
  width: 72px;
  height: 72px;
  color: var(--text-secondary);
}

.photo-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border-light);
}

/* =========================================================================
   COLLAPSIBLE SECTIONS
   ========================================================================= */

.collapsible-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--text-secondary);
  cursor: pointer;
  width: 100%;
  font-size: 0.875rem;
  transition: background 0.15s;
}

.collapsible-toggle:hover {
  background: var(--bg-elevated);
}

.collapsible-toggle .material-icons {
  transition: transform 0.2s;
  font-size: 20px;
}

.collapsible-toggle.open .material-icons {
  transform: rotate(180deg);
}

.collapsible-content {
  margin-top: var(--spacing-sm);
}

/* =========================================================================
   JOB DETAILS PADDING FIX
   ========================================================================= */

.job-details {
  padding: var(--spacing-md) var(--spacing-lg);
}

.job-details .detail-row {
  padding: 12px 0;
  font-size: 1rem;
}

.job-details .detail-row span:first-child {
  font-weight: 600;
  min-width: 100px;
  color: var(--text-secondary);
}

.job-details .detail-row span:last-child {
  color: var(--text-primary);
}

.job-details .detail-row span:last-child div {
  color: var(--text-primary);
  margin-bottom: 4px;
}

/* Ensure buttons inside job details have correct text color */
.job-details .btn-secondary,
.job-details a.btn-secondary {
  color: var(--text-primary) !important;
}

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

.job-days-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.job-day-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
  min-height: 48px;
}

.job-day-row:hover {
  background: var(--bg-elevated);
}

.job-day-date {
  font-size: 1.05rem;
  font-weight: 500;
  flex: 1;
}

.job-day-status {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: capitalize;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--bg-elevated);
}

.job-day-status.finished {
  background: #DEF7EC;
  color: #03543F;
}

.job-day-status.cancelled {
  background: #FDE8E8;
  color: #9B1C1C;
}

.job-day-assign {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
}

.job-day-action {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-light);
  transition: all 0.2s;
}

.job-day-action:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  background: var(--bg-elevated);
}

.job-day-action .material-icons {
  font-size: 18px;
}

.job-day-action-label {
  font-weight: 600;
}

.job-day-action.highlight {
  background: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%);
  color: white;
  box-shadow: 0 2px 6px rgba(6, 182, 212, 0.4);
  border: none;
}

.job-details-hint {
  padding: 8px var(--spacing-lg);
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

.job-details-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

.job-details-actions .btn {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: 0.875rem;
  font-weight: 500;
}

.job-action-btn .material-icons {
  font-size: 18px;
}

.empty-state-hint {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-top: var(--spacing-sm);
}

.modal-footer-job {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.modal-footer-edit-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  order: 2;
}

.modal-footer-job > .btn-secondary:first-child {
  order: 1;
}

.modal-footer-job > .btn-primary {
  order: 3;
  margin-left: auto;
}

/* Mobile: Stack buttons vertically */
@media (max-width: 600px) {
  .modal-footer-job {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-footer-job > .btn-secondary:first-child,
  .modal-footer-edit-actions,
  .modal-footer-job > .btn-primary {
    order: unset;
    margin-left: 0;
    width: 100%;
  }

  .modal-footer-edit-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    margin: 8px 0;
  }

  .modal-footer-edit-actions .btn {
    padding: 10px 8px;
    font-size: 0.75rem;
    flex-direction: column;
    gap: 4px;
  }

  .modal-footer-edit-actions .btn .material-icons {
    font-size: 18px;
  }
}

.form-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* Dispatch nav pills container (shared across all views) */
.dispatch-nav-pills {
  width: 100%;
}

.dispatch-nav-pills .list-nav-pills {
  justify-content: flex-start;
  margin-bottom: 0;
  padding-left: var(--spacing-xs);
}

/* List view quick nav pills */
.list-nav-pills {
  display: flex;
  gap: 8px;
  padding: 8px 0 12px;
  padding-left: var(--spacing-xs);
  border-bottom: none;
  margin-bottom: 4px;
}

.nav-pill {
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.nav-pill:hover {
  border-color: var(--primary, #1a73e8);
  color: var(--primary, #1a73e8);
}

.nav-pill.active {
  background: var(--primary, #1a73e8);
  color: #fff;
  border-color: var(--primary, #1a73e8);
}

/* =========================================================================
   COLLAPSIBLE SECTIONS (Edit Day Modal)
   ========================================================================= */
.collapsible-section {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  overflow: hidden;
}

.collapsible-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--bg-elevated);
  user-select: none;
  transition: background 0.15s;
}

.collapsible-header:hover {
  background: var(--bg-card);
}

.collapsible-arrow {
  font-size: 20px;
  transition: transform 0.2s;
  color: var(--text-secondary);
}

.collapsible-section.open .collapsible-arrow {
  transform: rotate(180deg);
}

.collapsible-title {
  font-weight: 600;
  font-size: 0.9375rem;
  flex: 1;
}

.collapsible-count {
  background: var(--primary, #1a73e8);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 20px;
  text-align: center;
  display: none;
}

.collapsible-body {
  display: none;
  padding: 8px 16px 12px;
  max-height: 200px;
  overflow-y: auto;
}

.collapsible-section.open .collapsible-body {
  display: block;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  min-height: 44px; /* Touch-friendly minimum height */
}

.checkbox-item:hover {
  background: var(--bg-elevated);
}

.checkbox-item:active {
  background: var(--bg-elevated);
}

.checkbox-item.checked {
  background: var(--primary-light, #e8f0fe);
}

.checkbox-item .role-tag {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  margin-left: auto;
  white-space: nowrap;
}

.checkbox-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  border: 2px solid #CBD5E1;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  pointer-events: none; /* Let parent handle clicks */
}

.checkbox-item input[type="checkbox"]:checked {
  background: var(--primary, #1a73e8);
  border-color: var(--primary, #1a73e8);
}

.checkbox-item input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.checkbox-name {
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Contract picker (Level 1 — which price book) */
.contract-picker {
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--bg-secondary, #F1F5F9);
  border-radius: 8px;
  border: 1px solid var(--border-light, #E2E8F0);
}
.contract-picker label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  margin-bottom: 4px;
  display: block;
}
.contract-picker select {
  font-size: 0.85rem;
  padding: 6px 10px;
  width: 100%;
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 6px;
  background: #fff;
  color: var(--text-primary, #0F172A);
}

/* No contract warning banner */
.no-contract-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  border-radius: var(--radius-md, 8px);
  font-size: 0.8rem;
  color: var(--text-primary, #0F172A);
  margin-bottom: var(--spacing-sm, 8px);
}
.no-contract-banner .material-icons { color: #D97706; font-size: 20px; flex-shrink: 0; }
.no-contract-banner a { color: var(--brand-blue, #3B82F6); font-weight: 600; text-decoration: underline; }

/* Line item picker (Level 2 — which rate within contract) */
.line-item-picker {
  padding: 4px 8px 8px 36px;
  background: var(--bg-secondary, #F1F5F9);
  border-radius: 0 0 6px 6px;
  margin-top: -2px;
  margin-bottom: 2px;
}
.line-item-picker select {
  font-size: 0.8rem;
  padding: 4px 8px;
  width: 100%;
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 6px;
  background: #fff;
  color: var(--text-primary, #0F172A);
}
.line-item-picker .picker-label {
  font-size: 0.7rem;
  color: var(--text-secondary, #475569);
  margin-bottom: 2px;
}
.rate-unset-flag {
  color: #F59E0B;
  font-size: 0.6rem;
  margin-left: 4px;
  vertical-align: middle;
}

/* Enhanced collapsible section styling for Job Creation modal */
.modal-job .collapsible-section,
#form-job .collapsible-section {
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  background: #fff;
}

.modal-job .collapsible-header,
#form-job .collapsible-header {
  background: linear-gradient(to bottom, #F8FAFC, #F1F5F9);
  border-bottom: 1px solid #E2E8F0;
  padding: 14px 16px;
}

.modal-job .collapsible-section.open .collapsible-header,
#form-job .collapsible-section.open .collapsible-header {
  border-bottom: 1px solid #E2E8F0;
}

.modal-job .collapsible-title,
#form-job .collapsible-title {
  color: #1E293B;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.modal-job .collapsible-count,
#form-job .collapsible-count {
  display: inline-block;
  background: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%);
  min-width: 24px;
  padding: 3px 10px;
}

/* Select All button in collapsible headers */
.btn-select-all {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #E2E8F0;
  color: #475569;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-select-all:hover {
  background: #3B82F6;
  color: white;
}

.modal-job .collapsible-body,
#form-job .collapsible-body {
  padding: 0;
  background: #FAFBFC;
}

/* Zebra striping for checkbox items */
.modal-job .checkbox-item:nth-child(odd),
#form-job .checkbox-item:nth-child(odd),
#modal-assignment .checkbox-item:nth-child(odd) {
  background: #FFFFFF;
}

.modal-job .checkbox-item:nth-child(even),
#form-job .checkbox-item:nth-child(even),
#modal-assignment .checkbox-item:nth-child(even) {
  background: #F8FAFC;
}

.modal-job .checkbox-item,
#form-job .checkbox-item,
#modal-assignment .checkbox-item {
  padding: 14px 16px;
  border-bottom: 1px solid #F1F5F9;
  margin: 0;
  border-radius: 0;
}

.modal-job .checkbox-item:last-child,
#form-job .checkbox-item:last-child,
#modal-assignment .checkbox-item:last-child {
  border-bottom: none;
}

.modal-job .checkbox-item:hover,
#form-job .checkbox-item:hover,
#modal-assignment .checkbox-item:hover {
  background: #EFF6FF;
}

.modal-job .checkbox-item.checked,
#form-job .checkbox-item.checked,
#modal-assignment .checkbox-item.checked {
  background: #EFF6FF;
  border-left: 3px solid #3B82F6;
}

.modal-job .checkbox-name,
#form-job .checkbox-name,
#modal-assignment .checkbox-name {
  color: #334155;
  font-weight: 500;
}

.modal-job .checkbox-item.checked .checkbox-name,
#form-job .checkbox-item.checked .checkbox-name,
#modal-assignment .checkbox-item.checked .checkbox-name {
  color: #1E40AF;
  font-weight: 600;
}

/* Section divider between collapsible groups */
.modal-job .form-section .collapsible-section:first-child,
#form-job .form-section .collapsible-section:first-child {
  margin-top: 8px;
}

.assignment-info {
  padding: var(--spacing-md);
  font-size: 1.05rem;
}

.assignment-info p {
  margin: 0;
}

/* =========================================================================
   PRO BADGES
   ========================================================================= */
/* =========================================================================
   STATUS FILTER PILLS
   ========================================================================= */
.status-filter-pills {
  display: flex;
  gap: 6px;
  padding: var(--spacing-sm) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.status-pill {
  padding: 6px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.status-pill:hover {
  background: var(--border-light);
}

.status-pill.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: white;
}

/* =========================================================================
   JOB OVERFLOW MENU
   ========================================================================= */
.job-overflow-menu {
  position: relative;
}

.job-overflow-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}

.job-overflow-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* Text Crew button - visible phone icon on job cards */
.btn-text-crew {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 7px;
  border-radius: var(--radius-md);
  transition: all 0.2s;
  margin-right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-text-crew:hover {
  background: var(--bg-page);
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.btn-text-crew:active {
  background: rgba(59, 130, 246, 0.1);
}

.btn-text-crew .material-icons {
  font-size: 20px;
}

.overflow-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 100;
  min-width: 180px;
  padding: 4px 0;
}

.overflow-dropdown.open {
  display: block;
}

.overflow-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.overflow-item:hover {
  background: var(--bg-elevated);
}

.overflow-item .material-icons {
  font-size: 18px;
  color: var(--text-muted);
}

/* =========================================================================
   WAYPOINTS LINK BUTTON
   ========================================================================= */
.btn-waypoints-link {
  background: none;
  border: none;
  color: var(--brand-blue);
  cursor: pointer;
  padding: 0 2px;
  vertical-align: middle;
}

.btn-waypoints-link .material-icons {
  font-size: 16px;
}

.nav-upgrade-badge {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: white;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
}

.nav-upgrade-badge:hover {
  filter: brightness(1.1);
}

.nav-item .nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   TRAILGUIDE - Contextual Help System
   "Let 'em explore the range, but leave trail markers"
   ============================================ */

/* Trailguide Modal (Welcome, AI Gate, etc) */
.trailguide-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.trailguide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  animation: trailguide-fade-in 0.3s ease;
}

@keyframes trailguide-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.trailguide-modal-content {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  max-width: 460px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  animation: trailguide-slide-up 0.3s ease;
}

@keyframes trailguide-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.trailguide-icon {
  margin-bottom: var(--spacing-sm);
}

.trailguide-icon img {
  max-width: 220px;
  height: auto;
}

.trailguide-title {
  margin: 0 0 12px 0;
  font-size: 1.5rem;
  color: var(--text-primary);
  font-weight: 700;
}

.trailguide-body {
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: left;
}

.trailguide-body p {
  margin: 0 0 var(--spacing-md) 0;
}

.trailguide-body ul {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-xl);
}

.trailguide-body li {
  margin-bottom: var(--spacing-sm);
}

.trailguide-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin-top: 16px;
}

/* Trailguide Tooltip (Contextual Help) */
.trailguide-tooltip {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

.trailguide-tooltip-content {
  position: absolute;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  max-width: 360px;
  width: calc(100vw - 32px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  animation: trailguide-tooltip-in 0.2s ease;
}

@keyframes trailguide-tooltip-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.trailguide-tooltip.position-top .trailguide-tooltip-content::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--bg-card);
  border-bottom: 0;
}

.trailguide-tooltip.position-bottom .trailguide-tooltip-content::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-bottom-color: var(--bg-card);
  border-top: 0;
}

.trailguide-close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.trailguide-close:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.trailguide-tooltip-content h4 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 1.125rem;
  color: var(--text-primary);
  padding-right: 24px;
}

.trailguide-upcharge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

.trailguide-upcharge .material-icons {
  font-size: 14px;
}

.trailguide-text {
  color: var(--text-secondary);
  line-height: 1.6;
}

.trailguide-text p {
  margin: 0 0 var(--spacing-sm) 0;
}

.trailguide-text p:last-child {
  margin-bottom: 0;
}

.trailguide-repeat {
  margin: var(--spacing-md) 0 0 0 !important;
  padding-top: var(--spacing-sm);
  border-top: 1px dashed var(--border-light);
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

.trailguide-footer {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

.trailguide-got-it {
  min-width: 120px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
}

.trailguide-got-it.ready {
  cursor: pointer;
  opacity: 1;
}

.trailguide-btn-fill {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

@keyframes trailguide-fill {
  from { width: 0%; }
  to { width: 100%; }
}

.trailguide-btn-text {
  position: relative;
  z-index: 1;
}

/* Onboarding hints — skip fill animation, immediately clickable */
.onboarding-hint .trailguide-btn-fill {
  display: none;
}
.onboarding-hint .trailguide-got-it {
  opacity: 1;
  cursor: pointer;
}
.onboarding-hint .trailguide-close {
  cursor: pointer;
}

.trailguide-close:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .trailguide-modal-content {
    padding: var(--spacing-lg);
    margin: var(--spacing-md);
  }

  .trailguide-title {
    font-size: 1.5rem;
  }

  .trailguide-tooltip-content {
    left: var(--spacing-md) !important;
    right: var(--spacing-md) !important;
    width: auto !important;
    max-width: none;
  }
}

/* ============================================
   DESKTOP ENHANCEMENTS - Premium Shadow System
   ============================================ */
@media (min-width: 769px) {
  /* Enhanced modal shadows for depth */
  .modal-content {
    box-shadow: var(--shadow-modal);
    border: 1px solid rgba(0, 0, 0, 0.04);
  }

  /* Card shadows for elevated feel */
  .job-card,
  .fleet-card,
  .roster-card,
  .maintenance-card,
  .hold-card,
  .pretrip-card,
  .clock-card,
  .panel {
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .job-card:hover,
  .fleet-card:hover,
  .roster-card:hover,
  .maintenance-card:hover,
  .hold-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
  }

  /* Button shadows for tactile feel */
  .btn {
    box-shadow: var(--shadow-button);
    transition: all 0.2s ease;
  }

  .btn:hover:not(:disabled) {
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-1px);
  }

  .btn:active:not(:disabled) {
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
  }

  /* Primary button enhanced glow */
  .btn-primary {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4), 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  /* Input and select shadows for depth */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    box-shadow: var(--shadow-inset-subtle);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }

  input:not([type="checkbox"]):not([type="radio"]):focus,
  select:focus,
  textarea:focus {
    box-shadow: var(--shadow-inset-subtle), 0 0 0 3px rgba(59, 130, 246, 0.15);
  }

  /* Header shadow for separation */
  .app-header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
  }

  /* Sidebar shadow */
  #app-sidebar {
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
  }

  /* Quickview elevated shadow */
  .quickview-modal .modal-content,
  .modal-large .modal-content {
    box-shadow: var(--shadow-modal-elevated);
  }

  /* Filter chip shadows */
  .pretrip-filter,
  .maintenance-filter,
  .dispatch-filter,
  .job-status-chip {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
  }

  .pretrip-filter:hover,
  .maintenance-filter:hover,
  .dispatch-filter:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
  }

  .pretrip-filter.active,
  .maintenance-filter.active,
  .dispatch-filter.active {
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
  }

  /* Dropdown and floating element shadows */
  .dropdown-menu,
  .autocomplete-dropdown,
  .tooltip {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
  }

  /* Tab and nav shadows */
  .tab-btn.active,
  .nav-link.active {
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
  }

  /* Status badges and chips */
  .status-badge,
  .role-badge,
  .job-type-badge {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }

  /* Safety hold card extra emphasis */
  .safety-hold-card {
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2), 0 2px 4px rgba(0, 0, 0, 0.06);
  }

  .safety-hold-card:hover {
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.25), 0 4px 8px rgba(0, 0, 0, 0.08);
  }

  /* Time-off hold card extra emphasis */
  .timeoff-hold-card {
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2), 0 2px 4px rgba(0, 0, 0, 0.06);
  }

  /* DVIR history item shadows */
  .dvir-history-item {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
  }

  .dvir-history-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  /* Panel header shadow for separation */
  .panel-header {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
}

/* ============================================
   AI CHAT MODAL
   ============================================ */
.ai-chat-modal {
  max-width: 500px;
}

.ai-chat-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: 0 !important;
}

.ai-chat-window {
  flex: 1;
  min-height: 280px;
  max-height: 400px;
  overflow-y: auto;
  padding: var(--spacing-lg);
  background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-elevated) 100%);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* AI Message */
.ai-message {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  max-width: 90%;
}

.ai-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.ai-avatar .material-icons {
  color: white;
  font-size: 20px;
}

.ai-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  box-shadow: var(--shadow-sm);
}

/* Typing cursor animation */
.ai-cursor {
  display: inline;
  animation: blink 0.8s infinite;
  color: var(--brand-blue);
  font-weight: bold;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Thinking dots animation */
.thinking-dots span {
  animation: thinkingBounce 1.4s infinite ease-in-out;
  display: inline-block;
  font-size: 1.5em;
  line-height: 1;
  color: var(--brand-blue);
}

.thinking-dots span:nth-child(1) { animation-delay: 0s; }
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinkingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* User Message */
.user-message {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  max-width: 90%;
  align-self: flex-end;
  flex-direction: row-reverse;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-avatar .material-icons {
  color: var(--text-secondary);
  font-size: 20px;
}

.user-bubble {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

/* FAQ Suggestions */
.ai-faq-suggestions {
  padding: 0 var(--spacing-lg);
  min-height: 48px;
}

.faq-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.faq-chip {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.faq-chip:hover {
  background: var(--bg-card);
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}

/* Input Area */
.ai-input-area {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
}

.ai-input-area textarea {
  flex: 1;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  font-size: 0.9375rem;
  resize: none;
  min-height: 44px;
  max-height: 100px;
  font-family: inherit;
}

.ai-input-area textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ai-send-btn {
  width: 48px;
  height: 48px;
  padding: 0 !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}

.ai-send-btn .material-icons {
  margin: 0;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .ai-chat-window {
    min-height: 200px;
    max-height: 300px;
  }

  .ai-bubble,
  .user-bubble {
    font-size: 0.875rem;
  }

  .faq-chip {
    font-size: 0.75rem;
    padding: 5px 10px;
  }
}

/* ==============================================
   SIGNATURE PAD STYLES
   ============================================== */
.dvir-signature-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.dvir-signature-section label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.dvir-signature-section label .material-icons {
  color: var(--brand-blue);
}

.signature-pad-container {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 400px;
}

#signature-canvas {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: crosshair;
  touch-action: none;
  width: 100%;
  max-width: 400px;
  height: 150px;
}

.signature-clear-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
  opacity: 0.7;
}

/* Signature on File Display */
.dvir-signature-on-file {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--status-success-bg, #e8f5e9);
  border-radius: var(--radius-md);
  border: 1px solid var(--status-success, #4caf50);
}

.dvir-signature-on-file label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--status-success, #2e7d32);
}

.dvir-signature-on-file label .material-icons {
  color: var(--status-success, #4caf50);
}

.signature-on-file-display {
  background: white;
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  max-width: 300px;
}

.signature-on-file-display img {
  max-width: 100%;
  height: auto;
  max-height: 80px;
}

.signature-clear-btn:hover {
  opacity: 1;
}

.signature-hint {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Mechanic Signature Canvas (Maintenance Completion) */
.mechanic-signature-section {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: #fef2f2;
  border-radius: var(--radius-md);
  border: 1px solid #fecaca;
}

.mechanic-signature-section label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  margin-bottom: 0;
  color: var(--text-primary);
}

.signature-canvas-wrap {
  position: relative;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-md);
  overflow: hidden;
  touch-action: none;
  background: #fff;
}

.signature-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 120px;
  cursor: crosshair;
}

.signature-canvas-wrap .btn-clear-sig {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
  line-height: 1;
}

.signature-canvas-wrap .btn-clear-sig:hover {
  opacity: 1;
}

/* Toggle Switch for SMS Opt-in etc */
.checkbox-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.checkbox-switch input[type="checkbox"] {
  display: none !important;
  visibility: hidden !important;
}

.switch-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: #d1d5db;
  border: 2px solid #9ca3af;
  border-radius: 12px;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.switch-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.checkbox-switch input:checked + .switch-slider {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.checkbox-switch input:checked + .switch-slider::after {
  transform: translateX(20px);
}

.switch-label {
  font-weight: 500;
  color: var(--text-primary);
}

/* Danger variant switch (for mute toggle) */
.checkbox-switch input:checked + .switch-slider-danger {
  background: var(--action-danger);
  border-color: var(--action-danger);
}

.switch-slider-danger {
  position: relative;
  width: 44px;
  height: 24px;
  background: #d1d5db;
  border: 2px solid #9ca3af;
  border-radius: 12px;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.switch-slider-danger::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.checkbox-switch input:checked + .switch-slider-danger::after {
  transform: translateX(20px);
}

.sms-optin-group {
  padding: var(--spacing-md);
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

/* Mute all notifications - prominent warning box */
.mute-notifications-box {
  margin-top: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mute-notifications-box .switch-label {
  font-weight: 600;
  color: #92400e;
}

.mute-notifications-box .mute-hint {
  margin: 0;
  font-size: 0.8rem;
  color: #b45309;
  font-style: italic;
}

/* When muted is active, make it red */
.mute-notifications-box:has(input:checked) {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-color: #ef4444;
}

.mute-notifications-box:has(input:checked) .switch-label {
  color: #991b1b;
}

.mute-notifications-box:has(input:checked) .mute-hint {
  color: #dc2626;
}

@media (max-width: 480px) {
  .signature-pad-container,
  #signature-canvas {
    max-width: 100%;
  }
}

/* Driver Schedule PIN Display */
.driver-pin-display {
  margin-bottom: 8px;
}

.driver-pin-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}

.driver-pin-value {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-primary);
}

.btn-copy-pin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  min-width: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-blue);
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-copy-pin .material-icons {
  font-size: 14px;
}

.btn-copy-pin:hover {
  background: #DBEAFE;
}

/* ============================================
   HELP CENTER MODAL
   ============================================ */
.help-modal {
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.help-tabs {
  display: flex;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-lg);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-light);
}

.help-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.help-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.help-tab.active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
}

.help-tab .material-icons {
  font-size: 20px;
}

/* Shimmy animation for Ask AI tab */
.help-tab-shimmy:not(.active) {
  animation: shimmy 2.5s ease-in-out infinite;
}

.help-tab-shimmy:not(.active) .material-icons {
  color: var(--brand-cyan);
}

@keyframes shimmy {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-3px) rotate(-1deg); }
  20% { transform: translateX(3px) rotate(1deg); }
  30% { transform: translateX(-2px) rotate(-0.5deg); }
  40% { transform: translateX(2px) rotate(0.5deg); }
  50%, 100% { transform: translateX(0) rotate(0); }
}

.help-body {
  flex: 1;
  overflow: hidden;
  padding: 0 !important;
  min-width: 0;
}

.help-panel {
  display: none;
  height: 100%;
  overflow-y: auto;
  min-width: 0;
}

.help-panel.active {
  display: block;
}

/* FAQ Tab */
#help-panel-faq {
  flex-direction: column;
  max-height: 100%;
}

#help-panel-faq.active {
  display: flex;
}

.faq-search {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.faq-search .material-icons {
  color: var(--text-muted);
  font-size: 20px;
}

.faq-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
}

.faq-search input::placeholder {
  color: var(--text-muted);
}

.faq-list {
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  overflow-y: auto;
  flex: 1;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.faq-item:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: 500;
  color: var(--text-primary);
}

.faq-chevron {
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.faq-item.expanded .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  display: none;
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  color: var(--text-secondary);
  line-height: 1.6;
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

.faq-item.expanded .faq-answer {
  display: block;
}

.faq-video-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  margin-top: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
  transition: all 0.2s;
}
.faq-video-link .material-icons {
  font-size: 16px;
  color: var(--brand-blue);
}
.faq-video-link:hover {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}
.faq-video-link:hover .material-icons {
  color: #fff;
}

/* Ask AI Tab - reuses existing AI chat styles */
#help-panel-ask-ai {
  display: none;
  flex-direction: column;
  height: 500px;
}

#help-panel-ask-ai.active {
  display: flex;
}

#help-ai-chat-window {
  flex: 1;
  min-height: 280px;
  max-height: none;
  overflow-y: auto;
  padding: var(--spacing-lg);
  background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-elevated) 100%);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.help-ai-cursor {
  display: inline;
  animation: blink 0.8s infinite;
  color: var(--brand-blue);
  font-weight: bold;
}

/* Import Data Tab */
#help-panel-import {
  padding: var(--spacing-lg);
}

.import-container {
  max-width: 600px;
  margin: 0 auto;
}

.import-step {
  animation: fadeIn 0.3s ease;
}

.import-step.hidden {
  display: none;
}

.import-intro {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.import-intro h4 {
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.import-intro p {
  color: var(--text-secondary);
}

/* Entity Type Selector */
.import-entity-select {
  margin-bottom: var(--spacing-xl);
}

.import-entity-select label {
  display: block;
  margin-bottom: var(--spacing-md);
  font-weight: 500;
  color: var(--text-primary);
}

.entity-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
}

.entity-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.entity-btn:hover {
  border-color: var(--border-medium);
  background: var(--bg-elevated);
}

.entity-btn.active {
  border-color: var(--brand-blue);
  background: rgba(59, 130, 246, 0.1);
}

.entity-btn .material-icons {
  font-size: 32px;
  color: var(--text-secondary);
}

.entity-btn.active .material-icons {
  color: var(--brand-blue);
}

.entity-btn span:last-child {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.entity-btn.active span:last-child {
  color: var(--brand-blue);
}

/* Dropzone */
.import-dropzone {
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xxl);
  text-align: center;
  background: var(--bg-elevated);
  transition: all 0.2s ease;
  cursor: pointer;
}

.import-dropzone:hover,
.import-dropzone.drag-over {
  border-color: var(--brand-blue);
  background: rgba(59, 130, 246, 0.05);
}

.import-dropzone .material-icons {
  font-size: 48px;
  color: var(--text-muted);
  margin-bottom: var(--spacing-md);
}

.import-dropzone p {
  margin: var(--spacing-sm) 0;
  color: var(--text-secondary);
}

.import-dropzone .text-muted {
  font-size: 0.875rem;
}

.import-hint {
  margin-top: var(--spacing-md);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* Import AI Chat */
.import-ai-chat {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.import-ai-chat .ai-bubble.loading {
  color: var(--text-muted);
}

.import-chat-input {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.import-chat-input textarea {
  flex: 1;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  font-size: 0.875rem;
  resize: none;
  font-family: inherit;
}

.import-chat-input textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
}

/* Mapping Table */
.import-mapping-table {
  margin-bottom: var(--spacing-lg);
  overflow-x: auto;
}

.mapping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.mapping-table th,
.mapping-table td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.mapping-table th {
  background: var(--bg-elevated);
  font-weight: 600;
  color: var(--text-secondary);
}

.mapping-table td:first-child {
  font-weight: 500;
  color: var(--text-primary);
}

.mapping-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 0.875rem;
  color: var(--text-primary);
}

.mapping-select:focus {
  outline: none;
  border-color: var(--brand-blue);
}

/* Import Actions */
.import-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

/* Import Summary */
.import-summary {
  margin-bottom: var(--spacing-lg);
}

.summary-stats {
  display: flex;
  gap: var(--spacing-lg);
  justify-content: center;
}

.stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  font-weight: 500;
}

.stat-valid .material-icons {
  color: var(--status-success);
}

.stat-error .material-icons {
  color: var(--status-danger);
}

/* Preview Table */
.import-preview-table {
  overflow-x: auto;
  margin-bottom: var(--spacing-lg);
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.preview-table th,
.preview-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.preview-table th {
  background: var(--bg-elevated);
  font-weight: 600;
  color: var(--text-secondary);
  position: sticky;
  top: 0;
}

.preview-table .row-error {
  background: rgba(239, 68, 68, 0.1);
}

.preview-table .text-danger {
  color: var(--status-danger);
}

.preview-table .text-success {
  color: var(--status-success);
}

.preview-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: var(--spacing-md);
}

/* Import Progress */
.import-progress {
  text-align: center;
  padding: var(--spacing-xxl);
}

.import-progress-bar {
  height: 8px;
  background: var(--bg-elevated);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--spacing-lg);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-cyan) 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.import-progress-text {
  color: var(--text-secondary);
}

/* Import Complete */
.import-complete {
  text-align: center;
  padding: var(--spacing-xxl);
}

.import-success-icon {
  font-size: 64px;
  color: var(--status-success);
  margin-bottom: var(--spacing-lg);
}

.import-complete h3 {
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

.import-complete p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

/* Contact Support Tab */
#help-panel-contact {
  padding: var(--spacing-lg);
}

#help-panel-contact.active {
  display: block !important;
}

.contact-support-container {
  max-width: 500px;
  margin: 0 auto;
}

.contact-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.contact-header h3 {
  margin: var(--spacing-md) 0 var(--spacing-sm);
  color: var(--text-primary);
}

.contact-header p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

/* Phone Support Callout (paying customers only) */
.phone-support-callout {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid var(--action-success);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.phone-support-inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.phone-support-callout .material-icons {
  font-size: 32px;
  color: var(--action-success);
}

.phone-support-callout strong {
  display: block;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.phone-support-callout .phone-number {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
}

.phone-support-callout .phone-number:hover {
  text-decoration: underline;
}

.phone-support-callout .phone-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

#contact-support-form .form-group {
  margin-bottom: var(--spacing-md);
}

#contact-support-form label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--text-secondary);
}

#contact-support-form textarea {
  resize: vertical;
  min-height: 100px;
}

/* Spin animation for loading buttons */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Help Center — Academy Tab */
.academy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
}

.academy-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.academy-card:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.academy-card:hover .academy-card-title,
.academy-card:hover .academy-card-duration,
.academy-card:hover .academy-card-icon .material-icons {
  color: #fff;
}

.academy-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(59, 130, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.academy-card-icon .material-icons {
  font-size: 22px;
  color: var(--brand-blue);
}

.academy-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.academy-card-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.academy-card-duration {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Mobile responsive - Help modal as bottom sheet */
@media (max-width: 768px) {
  #help-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .help-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .help-tabs {
    padding: var(--spacing-sm) 0;
    justify-content: space-evenly;
    gap: 0;
    flex-wrap: nowrap;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .academy-grid {
    grid-template-columns: 1fr;
    padding: var(--spacing-md);
  }

  .help-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.8125rem;
    flex: 0 0 auto;
    justify-content: center;
    min-width: 40px;
  }

  .help-tab .material-icons {
    font-size: 24px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .help-tab span:not(.material-icons) {
    display: none;
  }

  .entity-buttons {
    flex-wrap: wrap;
  }

  .entity-btn {
    flex: 1;
    min-width: 80px;
    padding: var(--spacing-md);
  }

  .import-dropzone {
    padding: var(--spacing-xl);
  }

  .summary-stats {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .import-actions {
    flex-direction: column;
  }

  .import-actions .btn {
    width: 100%;
  }
}

/* ==============================================
   DVIR PHOTOS & BULK PDF STYLES
   ============================================== */
.dvir-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}

.dvir-photo-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.dvir-photo-item:hover {
  transform: scale(1.02);
}

.dvir-photo-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.photo-badge {
  font-size: 0.7rem;
  background: var(--brand-blue);
  color: white;
  padding: 1px 5px;
  border-radius: 10px;
  margin-left: 4px;
}

.bulk-pdf-preview {
  padding: var(--spacing-md);
  background: var(--surface);
  border-radius: var(--radius-sm);
  margin: var(--spacing-md) 0;
}

.bulk-pdf-summary strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-xs);
}

.bulk-pdf-progress {
  margin-top: var(--spacing-md);
}

.progress-bar {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--brand-blue);
  width: 0%;
  transition: width 0.3s;
}

.progress-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
  text-align: center;
}

/* DVIR history action buttons (row layout) */
.dvir-history-actions {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.dvir-history-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  min-width: auto;
}

.dvir-history-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.dvir-history-item .dvir-history-info {
  flex: 1;
  min-width: 0;
}

/* ============================================
   FEATURE UPGRADE MODAL
   ============================================ */
.feature-upgrade-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.feature-upgrade-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  animation: feature-fade-in 0.3s ease;
}

@keyframes feature-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.feature-upgrade-content {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--brand-blue, #3B82F6), var(--accent-teal, #06B6D4), var(--brand-blue, #3B82F6));
  border-radius: var(--radius-xl);
  padding: 0;
  max-width: 720px;
  width: calc(100% - 32px);
  max-height: 90vh;
  max-height: 90dvh;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  animation: feature-slide-up 0.3s ease;
}

.feature-upgrade-inner {
  padding: 32px 40px;
  overflow-y: auto;
  max-height: 90vh;
  max-height: 90dvh;
}

@keyframes feature-slide-up {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.feature-upgrade-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background 0.2s, transform 0.1s;
  z-index: 1;
}

.feature-upgrade-close:hover {
  background: #fff;
  transform: scale(1.1);
}

.feature-upgrade-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--brand-blue, #3B82F6), var(--accent-teal, #06B6D4));
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-lg);
}

.feature-upgrade-badge .material-icons {
  font-size: 18px;
}

.feature-upgrade-title {
  margin: 0 0 var(--spacing-lg) 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
}

.feature-upgrade-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.feature-package-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg) var(--spacing-md);
  text-align: center;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease;
}

.feature-package-card.package-highlighted {
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.15), 0 0 0 2px var(--accent-teal, #06B6D4);
}

.package-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-blue, #3B82F6), var(--accent-teal, #06B6D4));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-sm);
}

.package-icon .material-icons {
  color: white;
  font-size: 24px;
}

.package-name {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.package-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: var(--spacing-md);
}

.package-amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
}

.package-period {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.package-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-md) 0;
  text-align: left;
}

.package-features li {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.package-features li .material-icons {
  color: #10B981;
  font-size: 18px;
}

.package-cta {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--brand-blue);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  margin-top: 8px;
}
.package-cta:hover {
  background: #2563EB;
  transform: translateY(-1px);
}
.package-cta:active {
  transform: translateY(0);
}
.package-cta .material-icons {
  font-size: 18px;
}

.package-cta-disabled {
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

.package-cta-disabled .material-icons {
  font-size: 16px;
}

.feature-upgrade-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.feature-upgrade-actions .btn-maybe-later {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: var(--spacing-sm);
  transition: color 0.2s;
}

.feature-upgrade-actions .btn-maybe-later:hover {
  color: var(--brand-blue);
}

.feature-upgrade-note {
  margin-top: var(--spacing-sm);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
}

/* AI Upgrade Modal Feature List */
.ai-upgrade-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-upgrade-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  transition: border-color 0.2s, background 0.2s;
}
.ai-upgrade-feature-list li .material-icons {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}
.ai-upgrade-feature-list li div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-upgrade-feature-list li strong {
  font-size: 0.95em;
}
.ai-upgrade-feature-list li span:last-child {
  font-size: 0.82em;
  color: var(--text-muted);
  line-height: 1.3;
}
.ai-upgrade-feature-list li.ai-feature-highlighted {
  border-color: var(--brand-cyan);
  background: color-mix(in srgb, var(--brand-cyan) 8%, var(--bg-secondary));
}

/* Mobile adjustments - stack cards vertically */
@media (max-width: 580px) {
  .feature-upgrade-content {
    padding: var(--spacing-lg);
    margin: var(--spacing-md);
  }

  .feature-upgrade-title {
    font-size: 1.5rem;
  }

  .feature-upgrade-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   CLOCK/TICKETS/TIMEOFF VIEW POLISH
   ============================================ */
.clock-view,
.timeoff-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

.tickets-view {
  max-width: 100%;
  padding: var(--spacing-lg);
}

/* View Header Polish */
.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.view-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.view-title h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.view-actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* Clock Header Enhanced */
.clock-header {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
}

.clock-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.clock-title h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.clock-time {
  font-size: 2rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: var(--brand-blue);
  letter-spacing: 2px;
}

/* Clock Panels Enhanced */
.clock-panel {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.panel-header {
  background: var(--bg-elevated);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
}

.panel-header h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.clock-form {
  padding: var(--spacing-lg);
}

.clock-form .form-group {
  margin-bottom: var(--spacing-md);
}

.clock-form label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.clock-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 1rem;
}

.clock-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.clock-actions .btn-large {
  flex: 1;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  border-radius: var(--radius-lg);
}

/* Weekly Hours Nav */
.weekly-hours-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
  gap: var(--spacing-sm);
}

.weekly-hours-nav-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
  text-align: center;
  flex: 1;
  min-width: 0;
}

.weekly-hours-nav-btns {
  display: contents;
}

@media (max-width: 480px) {
  .weekly-hours-nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .weekly-hours-nav-label {
    order: -1;
    width: 100%;
    margin-bottom: 4px;
    font-size: 0.85rem;
  }

  .weekly-hours-nav-btns {
    display: flex;
    gap: var(--spacing-sm);
    width: 100%;
    justify-content: space-between;
  }
}

/* Status Card */
.status-card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.status-clocked-in,
.status-clocked-out {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.status-clocked-in .material-icons {
  color: #10B981;
  font-size: 32px;
}

.status-clocked-out .material-icons {
  color: var(--text-muted);
  font-size: 32px;
}

.status-info .status-label {
  font-weight: 600;
  color: var(--text-primary);
}

.status-info .status-time {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.status-info .status-job {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-top: 2px;
}

/* Panel Sections */
.panel-section {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
}

.panel-section:last-child {
  border-bottom: none;
}

.panel-section h3 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Active/Recent Entries */
.active-list,
.recent-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.active-entry,
.recent-entry {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: all 0.2s;
}

.active-entry:hover,
.recent-entry:hover {
  background: var(--bg-hover);
}

.active-entry-name,
.recent-entry-name {
  font-weight: 600;
  color: var(--text-primary);
}

.active-entry-meta {
  display: flex;
  gap: var(--spacing-md);
  margin-top: 2px;
}

.active-entry-time,
.recent-entry-time {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.active-entry-duration {
  font-size: 0.8125rem;
  color: var(--brand-blue);
  font-weight: 500;
}

.recent-entry-hours {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.active-entry-job {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.empty-state-small {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Clock History Summary & Day Groups */
.clock-history-header {
  margin-bottom: var(--spacing-sm);
}

.clock-summary {
  display: flex;
  gap: 8px;
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.clock-stat-chip {
  flex: 1;
  min-width: 80px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.clock-stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.clock-stat-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
}

.day-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  margin-top: 8px;
  border-bottom: 1px solid var(--border-light);
}

.day-group-header:first-child {
  margin-top: 0;
}

.day-group-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.day-group-total {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-blue);
}

.recent-entry-editable {
  cursor: pointer;
}

.recent-entry-editable:hover {
  background: var(--bg-hover);
  box-shadow: 0 0 0 1px var(--brand-blue);
}

.recent-entry-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}

.recent-entry-customer {
  font-size: 0.75rem;
  color: var(--text-secondary);
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clock-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 10px;
  margin-top: var(--spacing-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--brand-blue);
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.clock-load-more:hover {
  background: var(--bg-elevated);
  border-color: var(--brand-blue);
}

.clock-load-more:disabled {
  color: var(--text-secondary);
  cursor: default;
  border-color: var(--border-light);
}

/* Tickets View Polish */
.tickets-content {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-lg);
  border: 1px solid var(--border-light);
}

.tickets-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ticket-card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  border-left: 4px solid var(--border);
  transition: all 0.2s;
}

.ticket-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Status border colors removed — customer color applied inline */

.ticket-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.ticket-card-date {
  font-weight: 600;
  color: var(--text-primary);
}

.ticket-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ticket-card-customer,
.ticket-card-well,
.ticket-card-employees {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.ticket-card-customer .material-icons,
.ticket-card-well .material-icons,
.ticket-card-employees .material-icons {
  font-size: 16px;
  color: var(--text-secondary);
}

.ticket-card-work {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}

.ticket-card-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
}

/* TimeOff View Polish */
.timeoff-content {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-lg);
  border: 1px solid var(--border-light);
}

.timeoff-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.timeoff-card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  border-left: 4px solid var(--border);
  transition: all 0.2s;
}

.timeoff-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.timeoff-card.status-pending {
  border-left-color: #F59E0B;
}

.timeoff-card.status-approved {
  border-left-color: #10B981;
}

.timeoff-card.status-denied {
  border-left-color: #EF4444;
}

.timeoff-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
}

.timeoff-card-person {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.person-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
}

.person-avatar.large {
  width: 56px;
  height: 56px;
  font-size: 1.125rem;
}

.person-info .person-name {
  font-weight: 600;
  color: var(--text-primary);
}

.person-info .person-role {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.timeoff-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.timeoff-dates,
.timeoff-type {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.timeoff-dates .material-icons,
.timeoff-type .material-icons {
  font-size: 16px;
  color: var(--text-muted);
}

.timeoff-days {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.timeoff-reason {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
  font-style: italic;
}

.timeoff-card-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
}

/* Filter Buttons Polish */
.tickets-filters,
.timeoff-filters {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--text-secondary);
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: all 0.15s ease;
  white-space: nowrap;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.filter-btn:hover {
  background: #F8FAFC;
  border-color: var(--brand-blue);
  color: var(--text-primary);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.1);
}

.filter-btn.active {
  background: var(--brand-blue);
  color: #fff;
  font-weight: 700;
  border-color: var(--brand-blue);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Color-coded status icons — inactive (muted tint) */
.filter-btn--all .material-icons { color: #64748B; }
.filter-btn--daily .material-icons { color: #3B82F6; }
.filter-btn--recent .material-icons { color: #64748B; }
.filter-btn--draft .material-icons { color: #D97706; }
.filter-btn--ready .material-icons { color: #16A34A; }
.filter-btn--archived .material-icons { color: #64748B; }
.filter-btn--invoiced .material-icons { color: #7C3AED; }
.filter-btn--paid .material-icons { color: #16A34A; }
.filter-btn--open .material-icons { color: #3B82F6; }
.filter-btn--overdue .material-icons { color: #DC2626; }

/* Active filter icons always white on blue bg */
.filter-btn.active .material-icons { color: #fff !important; }

/* Desktop/Mobile filter toggle */
.tickets-filters--desktop {
  display: flex;
  justify-content: center;
}

.tickets-filters--mobile {
  display: none;
}

.tickets-filter-select {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  appearance: auto;
}

.template-btn-label {
  /* Hide long text on small screens, show icon only */
}

.filter-btn .material-icons {
  font-size: 16px;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.badge-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #D97706;
}

.badge-approved,
.badge-ready {
  background: rgba(245, 158, 11, 0.15);
  color: #D97706;
}

.badge-denied {
  background: rgba(239, 68, 68, 0.15);
  color: #DC2626;
}

.badge-draft {
  background: rgba(239, 68, 68, 0.15);
  color: #DC2626;
}

.badge-archived,
.badge-locked,
.badge-sent {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.badge-invoiced {
  background: rgba(16, 185, 129, 0.15);
  color: #166534;
  font-size: 0.7rem;
}

/* Review Modal Polish */
.review-detail {
  padding: var(--spacing-lg);
}

.review-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.review-person-info .review-person-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.review-person-info .review-person-role {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.review-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) 0;
}

.detail-row.full {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

.detail-label {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.detail-value {
  color: var(--text-primary);
}

.review-notes {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

.review-notes label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.review-notes textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.9375rem;
  resize: vertical;
}

.review-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .clock-view,
  .tickets-view,
  .timeoff-view {
    padding: var(--spacing-md);
  }

  .view-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .clock-header {
    padding: var(--spacing-md);
  }

  .clock-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .clock-time {
    font-size: 1.5rem;
  }

  .clock-content {
    grid-template-columns: 1fr;
  }

  .clock-actions {
    flex-direction: column;
  }

  .tickets-filters--desktop {
    display: none;
  }

  .billing-export-btn {
    display: none !important;
  }

  .tickets-filters--mobile {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
  }

  .timeoff-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .timeoff-filters .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .template-btn-label {
    display: none;
  }
}

/* ============================================
   SALES AGENT (Demo Mode)
   ============================================ */

/* Floating Action Button */
.sales-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: none;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  z-index: 1000;
  transition: all 0.3s ease;
  animation: sales-fab-pulse 2s infinite;
}

.sales-fab:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 25px rgba(245, 158, 11, 0.5);
}

.sales-fab .material-icons {
  font-size: 22px;
}

@keyframes sales-fab-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 4px 30px rgba(245, 158, 11, 0.6); }
}

/* Sales Modal */
.sales-agent-modal {
  max-width: 500px;
  width: calc(100% - 32px);
  max-height: 85vh;
  max-height: 85dvh;
  height: 650px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sales-header {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.sales-header h3 {
  color: white;
}

.sales-header .btn-icon {
  color: white;
}

.sales-chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.sales-chat-window {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.sales-avatar {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.sales-avatar .material-icons {
  color: white !important;
}

.sales-bubble {
  background: var(--bg-elevated);
  border: 1px solid #f59e0b;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  max-width: 85%;
  line-height: 1.6;
  white-space: pre-wrap;
}

.sales-cursor {
  animation: blink 0.7s infinite;
  color: #f59e0b;
  font-weight: bold;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.sales-input-area {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-light);
  background: var(--bg-page);
}

.sales-input-area textarea {
  flex: 1;
  resize: none;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  font-size: 1rem;
  font-family: inherit;
}

.sales-input-area textarea:focus {
  outline: none;
  border-color: #f59e0b;
}

.sales-send-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  padding: 12px 16px;
}

.sales-send-btn:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

/* Contact Form Card */
.sales-contact-form {
  padding: var(--spacing-md);
}

.contact-form-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);
  border: 2px solid #f59e0b;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

.contact-form-card h4 {
  margin: 0 0 8px 0;
  color: var(--text-primary);
}

.contact-form-card p {
  margin: 0 0 16px 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.contact-form-card .form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  font-size: 1rem;
}

.contact-form-card .form-control:focus {
  outline: none;
  border-color: #f59e0b;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .sales-fab {
    bottom: 80px; /* Above mobile nav */
    right: 16px;
    padding: 12px 16px;
  }

  .sales-fab-label {
    display: none;
  }

  .sales-fab .material-icons {
    font-size: 24px;
  }

  .sales-agent-modal {
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
  }

  .sales-input-area textarea {
    font-size: 16px; /* Prevent iOS zoom */
  }

  .sales-lead-row {
    flex-direction: column;
    gap: 12px;
  }

  .demo-engagement-modal {
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
  }

  .demo-engagement-modal .modal-header {
    border-radius: 0 !important;
  }
}

/* Sales Modal Lead Capture Form */
.sales-lead-section {
  border-top: 1px solid var(--border-light);
  background: var(--bg-page);
}

.sales-lead-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--brand-blue), var(--accent-teal), var(--brand-blue));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sales-lead-shimmer 3s ease-in-out infinite;
  transition: transform 0.15s;
}

@keyframes sales-lead-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.sales-lead-toggle:hover {
  transform: scale(1.02);
}

.sales-lead-toggle .material-icons {
  font-size: 20px;
  -webkit-text-fill-color: var(--brand-blue);
}

.sales-lead-form-wrap {
  padding: 0 16px 16px;
}

.sales-modal-lead-form,
.demo-engage-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sales-lead-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.sales-lead-field {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sales-lead-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.sales-lead-field input,
.sales-lead-field select {
  padding: 10px 12px;
  border: 1.5px solid #CBD5E1;
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  color: var(--text-primary);
  transition: border-color 0.15s;
}

.sales-lead-field input:focus,
.sales-lead-field select:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.sales-lead-submit {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 4px;
  border-radius: 10px;
}

.sales-lead-reassurance {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 8px 0 0;
}

.sales-lead-success {
  text-align: center;
  padding: 20px;
}

.sales-lead-success h4 {
  margin: 8px 0 4px;
  color: var(--text-primary);
}

.sales-lead-success p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Demo Engagement Popup Modal */
.demo-engagement-modal {
  max-width: 520px;
  width: calc(100% - 32px);
  border-radius: 12px;
  overflow: hidden;
}

.demo-engagement-modal .modal-header {
  padding: 20px 24px;
}

.demo-engagement-modal .modal-header h3 {
  font-size: 1.1rem;
  margin: 0;
}

/* ============================================
   EMAIL VERIFICATION PENDING SCREEN
   ============================================ */
.email-verification-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-page);
  z-index: 1000;
  padding: 24px;
  text-align: center;
}

.email-verification-screen .verification-icon {
  font-size: 80px;
  color: var(--brand-blue);
  margin-bottom: 24px;
}

.email-verification-screen h2 {
  margin: 0 0 8px 0;
  color: var(--text-primary);
  font-size: 1.5rem;
}

.email-verification-screen p {
  color: var(--text-secondary);
  margin: 0 0 24px 0;
  max-width: 400px;
}

.email-verification-screen .verification-email {
  font-weight: 600;
  color: var(--brand-blue);
}

.email-verification-screen .btn-primary {
  margin-bottom: 16px;
}

.email-verification-screen .verification-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 350px;
}

/* ============================================
   CANCEL SUBSCRIPTION MODAL
   ============================================ */
.cancel-subscription-content {
  padding: 24px;
  max-width: 500px;
  margin: 0 auto;
}

.cancel-step {
  animation: fadeIn 0.3s ease;
}

/* Step 1: Questionnaire */
.cancel-reasons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.cancel-reason-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid var(--border-light);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-card);
}

.cancel-reason-option:hover {
  border-color: var(--brand-blue);
  background: var(--bg-elevated);
}

.cancel-reason-option.selected {
  border-color: var(--brand-blue);
  background: rgba(59, 130, 246, 0.1);
}

.cancel-reason-option .material-icons {
  color: var(--text-muted);
  font-size: 20px;
}

.cancel-reason-option.selected .material-icons {
  color: var(--brand-blue);
}

.cancel-feedback-label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.cancel-feedback-textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  resize: vertical;
  font-family: inherit;
  margin-bottom: 20px;
}

.cancel-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.cancel-rating-label {
  font-weight: 500;
  color: var(--text-primary);
  margin-right: 8px;
}

.cancel-rating-star {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--border-medium);
  font-size: 28px;
  transition: color 0.2s, transform 0.2s;
}

.cancel-rating-star:hover,
.cancel-rating-star.selected {
  color: #F59E0B;
  transform: scale(1.1);
}

/* Step 2: Retention Options */
.retention-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.retention-option {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 2px solid var(--border-light);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-card);
}

.retention-option:hover {
  border-color: var(--brand-blue);
}

.retention-option.selected {
  border-color: var(--brand-blue);
  background: rgba(59, 130, 246, 0.05);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.retention-option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.retention-option-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.retention-option-price {
  font-weight: 600;
  color: var(--brand-blue);
}

.retention-option-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.data-download-section {
  background: var(--bg-elevated);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  text-align: center;
}

.data-download-section h4 {
  margin: 0 0 8px 0;
  color: var(--text-primary);
}

.data-download-section p {
  margin: 0 0 16px 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.btn-download-data {
  background: var(--bg-card);
  border: 2px solid var(--brand-blue);
  color: var(--brand-blue);
}

.btn-download-data:hover {
  background: var(--brand-blue);
  color: white;
}

.cancel-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid var(--status-danger);
  border-radius: 8px;
  margin-bottom: 24px;
}

.cancel-warning .material-icons {
  color: var(--status-danger);
  flex-shrink: 0;
}

.cancel-warning p {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.9rem;
}

/* Step 3: Confirmation */
.cancel-confirmed {
  text-align: center;
  padding: 24px 0;
}

.cancel-confirmed .material-icons {
  font-size: 64px;
  color: var(--status-success);
  margin-bottom: 16px;
}

.cancel-confirmed h3 {
  margin: 0 0 16px 0;
  color: var(--text-primary);
}

.deletion-info {
  background: var(--bg-elevated);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.deletion-info p {
  margin: 0 0 8px 0;
  color: var(--text-secondary);
}

.deletion-info .deletion-date {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.cancel-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* ============================================
   FORGOT EMAIL MODAL
   ============================================ */
.forgot-email-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 500px;
}

.forgot-email-chat {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.forgot-email-input-area {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

.forgot-email-input-area input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 1rem;
}

.forgot-email-input-area button {
  padding: 12px 16px;
  background: var(--brand-blue);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.forgot-email-input-area button:hover {
  background: var(--brand-blue-dark);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .cancel-subscription-content {
    padding: 16px;
  }

  .retention-options {
    gap: 12px;
  }

  .cancel-actions {
    flex-direction: column;
  }

  .cancel-actions .btn {
    width: 100%;
  }

  .forgot-email-content {
    max-height: none;
    height: calc(100vh - 60px);
  }
}

/* ============================================ */
/* DRIVER BOARD - Simplified view for drivers */
/* ============================================ */

.driver-board {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 16px;
  padding-bottom: 100px;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.driver-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.driver-board-title {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  margin: 0;
}

.driver-board-count {
  background: var(--brand-blue);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
}

/* Date Navigation */
.driver-action-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.driver-dvir-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #059669, #10B981);
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.driver-dvir-btn:active {
  transform: scale(0.98);
}

.driver-dvir-btn .material-icons {
  font-size: 1.4rem;
}

.driver-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.driver-nav-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.driver-nav-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
}

.driver-nav-btn:active {
  transform: scale(0.95);
}

.driver-nav-btn .material-icons {
  font-size: 32px;
}

.driver-date-display {
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
  min-width: 180px;
  text-align: center;
}

/* Jobs List */
.driver-jobs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.driver-jobs-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Job Card */
.driver-job-card {
  background: white;
  border-radius: 14px;
  /* overflow: hidden removed - was blocking scroll propagation */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.driver-job-card:active {
  transform: scale(0.985);
}

.driver-card-stripe {
  height: 4px;
  width: 100%;
}

.driver-card-content {
  padding: 16px;
}

.driver-card-customer {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.driver-card-location {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.driver-card-time {
  margin-bottom: 8px;
}

.driver-card-time .time-badge {
  background: var(--brand-blue);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
}

.driver-card-title {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.driver-card-crew {
  margin-bottom: 16px;
}

.driver-card-crew .crew-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.driver-card-crew .crew-icon {
  font-size: 1.1rem;
}

.driver-view-details-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  color: white;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.driver-view-details-btn:active {
  transform: scale(0.98);
}

/* Empty State */
.driver-empty-state {
  text-align: center;
  padding: 60px 20px;
}

.driver-empty-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 16px;
}

.driver-empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 8px 0;
}

.driver-empty-text {
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0;
}

/* Refresh Button */
.driver-refresh-btn {
  position: fixed;
  bottom: 100px;
  right: 32px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.5);
  z-index: 100;
  transition: transform 0.2s;
}

.driver-refresh-btn:active {
  transform: scale(0.9);
}

.driver-refresh-btn .material-icons {
  font-size: 24px;
}

/* Quickview Modal */
.driver-quickview-modal {
  max-width: 100%;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.driver-quickview-header {
  padding: 20px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
}

.quickview-header-text h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.quickview-header-text p {
  font-size: 1.1rem;
  margin: 0;
  opacity: 0.9;
}

.driver-quickview-close {
  width: 50px;
  height: 50px;
  background: rgba(220, 38, 38, 0.9);
  border: none;
  border-radius: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.driver-quickview-close .material-icons {
  font-size: 28px;
}

.driver-quickview-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  background: var(--bg-page);
}

.quickview-section {
  margin-bottom: 20px;
}

.quickview-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.quickview-item {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.quickview-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.quickview-notes {
  font-style: italic;
  color: var(--text-secondary);
}

/* Simplified driver quickview content */
.driver-qv-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.driver-qv-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 1rem;
  color: var(--text-primary);
}

.driver-qv-row span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.driver-qv-contact {
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 500;
}

.driver-qv-poc {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid var(--brand-blue);
}

.driver-qv-poc-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.driver-qv-poc-role {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.driver-qv-poc-link {
  color: var(--brand-blue);
  text-decoration: none;
  font-size: 0.9rem;
  padding-left: 22px;
}

.driver-qv-poc-link:hover {
  text-decoration: underline;
}

.driver-qv-notes {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-style: italic;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
  margin-top: 4px;
}

.driver-qv-photos {
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  margin-top: 8px;
}

.driver-qv-photos-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.driver-qv-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}

.driver-qv-photo-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--border-light);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.driver-qv-photo-item:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.driver-qv-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.driver-qv-photo-item.driver-qv-pdf {
  flex-direction: column;
  padding: 8px;
  background: linear-gradient(135deg, #fff5f5, #fff);
}

.driver-qv-photo-item.driver-qv-pdf .material-icons {
  font-size: 28px;
  color: #e74c3c;
}

.driver-qv-pdf-name {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Waypoints - Driver Quickview */
.driver-qv-waypoints {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.driver-qv-waypoint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1px solid #93C5FD;
  border-radius: 10px;
  color: #1E40AF;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}
.driver-qv-waypoint:hover {
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
}
.driver-qv-waypoint .material-icons:first-child {
  font-size: 20px;
  color: #3B82F6;
}
.driver-qv-waypoint-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 811 Permit - Driver Quickview */
.driver-qv-permit {
  margin-top: 12px;
  border-radius: 10px;
  overflow: hidden;
}

.driver-qv-permit-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1px solid #F59E0B;
  border-radius: 10px;
  color: #92400E;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}

.driver-qv-permit-link:hover {
  background: linear-gradient(135deg, #FDE68A 0%, #FCD34D 100%);
}

.driver-qv-permit-link .material-icons:first-child {
  font-size: 22px;
  color: #D97706;
}

.driver-qv-permit-missing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.driver-qv-permit-missing .material-icons {
  font-size: 18px;
  color: var(--text-muted);
}

/* 811 Permit Upload Area */
.permit-upload-area {
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.permit-upload-area:hover {
  border-color: #F59E0B;
  background: #FFFBEB;
}

/* Permits List */
.permits-list {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.permit-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.permit-list-info {
  flex: 1;
  min-width: 0;
}

.permit-list-name {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--action-primary);
  font-weight: 500;
  text-decoration: none;
  font-size: 0.9rem;
}

.permit-list-name:hover {
  text-decoration: underline;
}

.permit-list-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.btn-danger-icon {
  color: var(--text-muted);
}

.btn-danger-icon:hover {
  color: var(--action-danger);
}

.driver-quickview-footer {
  padding: 16px 20px;
  background: white;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.btn-driver-action {
  flex: 1;
  padding: 16px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.btn-driver-action.btn-directions {
  background: var(--brand-blue);
  color: white;
}

.btn-driver-action.btn-call {
  background: var(--status-success);
  color: white;
}

.btn-driver-action.btn-vehicle {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
}

/* Hide sidebar in driver mode */
body.driver-mode .sidebar,
body.driver-mode #app-sidebar {
  display: none !important;
}

body.driver-mode .mobile-nav {
  display: none !important;
}

body.driver-mode #main-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
}

/* CRITICAL: Remove overflow:hidden from job cards in driver mode - blocks scroll */
body.driver-mode .driver-job-card {
  overflow: visible !important;
}

/* Hide tutorial system in driver mode - it can block touch */
body.driver-mode #tutorial-overlay {
  display: none !important;
}

/* Driver mode base scrolling */
body.driver-mode {
  overflow: auto !important;
  overflow-x: hidden !important;
}

/* Driver mode modals still lock body scroll */
body.driver-mode.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Ensure driver mode modals can scroll */
body.driver-mode .modal {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body.driver-mode .driver-quickview-body,
body.driver-mode .driver-truck-modal .modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Desktop adjustments for driver board */
@media (min-width: 769px) {
  .driver-board {
    min-height: calc(100vh - 60px);
    padding: 24px 48px;
    padding-bottom: 100px;
    position: relative;
  }

  /* Inline header + DVIR action bar on same row */
  .driver-board-header {
    margin-bottom: 8px;
  }

  .driver-action-bar {
    position: absolute;
    right: 48px;
    top: 24px;
    margin-bottom: 0;
  }

  .driver-dvir-btn {
    padding: 10px 22px;
    font-size: 0.95rem;
    border-radius: 10px;
  }

  .driver-dvir-btn .material-icons {
    font-size: 1.2rem;
  }

  /* Tone down nav buttons on desktop */
  .driver-nav-btn {
    width: 44px;
    height: 44px;
  }

  .driver-nav-btn .material-icons {
    font-size: 24px;
  }

  .driver-nav-btn:hover {
    background: var(--brand-blue-dark);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
  }

  /* Widen content area */
  .driver-jobs-list {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 20px;
  }

  .driver-jobs-cards {
    max-width: 100%;
    margin: 0 auto;
  }

  /* Card hover effect */
  .driver-job-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }

  /* Center date nav within content area */
  .driver-date-nav {
    max-width: 800px;
    margin: 0 auto 24px;
  }

  .driver-quickview-modal {
    max-width: 500px;
    height: auto;
    max-height: 90vh;
    margin: auto;
    border-radius: 16px;
  }
}

/* Driver Truck Details Modal */
.driver-truck-modal {
  background: var(--bg-card);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}

.driver-truck-modal .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.driver-truck-modal .modal-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.driver-truck-modal .modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  max-height: calc(85vh - 60px);
}

.truck-info-section {
  margin-bottom: 20px;
}

.truck-info-section h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.truck-info-section h4 .material-icons {
  font-size: 18px;
  color: var(--brand-blue);
}

.truck-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.truck-info-grid .info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.truck-info-grid .info-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.truck-info-grid .info-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
}

.driver-truck-docs {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.driver-truck-docs h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.driver-truck-docs h4 .material-icons {
  font-size: 18px;
  color: var(--success);
}

.inspection-expiry {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.inspection-expiry strong {
  color: var(--text-primary);
}

.dot-docs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dot-doc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg-elevated);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 500;
  transition: background 0.2s;
}

.dot-doc-link:hover {
  background: var(--border-light);
}

.dot-doc-link .material-icons:first-child {
  color: var(--danger);
  font-size: 22px;
}

.dot-doc-link .material-icons:last-child {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 18px;
}

.no-docs {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 16px;
}

.driver-truck-dvirs {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.driver-truck-dvirs h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.driver-truck-dvirs h4 .material-icons {
  font-size: 18px;
  color: var(--brand-blue);
}

.dvirs-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  padding: 16px 0;
}

.dvir-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-elevated);
  border-radius: 8px;
  margin-bottom: 8px;
}

.dvir-item.pass .dvir-status-icon {
  color: var(--success);
}

.dvir-item.has-defects .dvir-status-icon {
  color: var(--danger);
}

.dvir-item.has-defects {
  border-left: 3px solid var(--danger);
}

.dvir-item-info {
  flex: 1;
}

.dvir-item-date {
  font-weight: 500;
  font-size: 0.9rem;
}

.dvir-item-driver {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dvir-type-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--bg-page);
  border-radius: 4px;
  color: var(--text-muted);
}

.no-dvirs, .dvirs-error {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 20px;
}

@media (min-width: 769px) {
  .driver-truck-modal {
    max-width: 450px;
    margin: auto;
    border-radius: 16px;
    max-height: 80vh;
  }
}

/* ============================================
   JOB BOARD - Read-only schedule view
   ============================================ */

.jobboard-view {
  min-height: 100vh;
  background: var(--bg-page);
  padding: 20px;
  padding-bottom: 100px;
}

.jobboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.jobboard-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.jobboard-title .material-icons {
  color: var(--brand-blue);
  font-size: 1.8rem;
}

.btn-dvir {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #059669, #10B981);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-dvir:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4);
}

.btn-dvir:active {
  transform: scale(0.98);
}

.jobboard-actions {
  display: flex;
  gap: 8px;
}

.btn-jsa {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-jsa:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.btn-jsa:active {
  transform: scale(0.98);
}

.jobboard-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.jobboard-nav-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.jobboard-nav-btn:hover {
  background: var(--bg-hover);
  border-color: var(--brand-blue);
}

.jobboard-nav-btn .material-icons {
  font-size: 24px;
  color: var(--text-primary);
}

.jobboard-date-display {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 180px;
  text-align: center;
}

.jobboard-count {
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.jobboard-jobs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  max-width: 700px;
  margin: 0 auto;
}

.jobboard-jobs > .loading-spinner {
  align-self: center;
  margin-top: 40px;
}

.jobboard-card {
  display: flex;
  align-items: stretch;
  background: var(--bg-primary);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border-light);
}

.jobboard-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.jobboard-card-status {
  width: 5px;
  flex-shrink: 0;
}

.jobboard-card-content {
  flex: 1;
  padding: 16px;
}

.jobboard-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.jobboard-card-customer {
  font-size: 0.85rem;
  color: var(--brand-blue);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.jobboard-card-time {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.jobboard-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.jobboard-card-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.jobboard-card-location .material-icons {
  font-size: 16px;
  color: var(--text-muted);
}

.jobboard-card-assignments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jobboard-card-chevron {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--text-muted);
}

.jobboard-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
}

.jobboard-empty .material-icons {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* Job Board Detail Modal */
.jobboard-detail-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.jobboard-detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.jobboard-detail-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.jobboard-detail-value {
  font-size: 1rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.jobboard-detail-value .maps-link {
  color: var(--brand-blue);
  display: flex;
  align-items: center;
}

.jobboard-detail-value .maps-link .material-icons {
  font-size: 20px;
}

.jobboard-notes {
  white-space: pre-wrap;
  font-style: italic;
  color: var(--text-secondary);
}

/* Mobile */
@media (max-width: 768px) {
  .jobboard-view {
    padding: 16px;
    padding-bottom: 120px;
  }

  .jobboard-header {
    flex-direction: column;
    align-items: stretch;
  }

  .jobboard-title {
    font-size: 1.3rem;
  }

  .jobboard-actions {
    flex-direction: column;
    gap: 8px;
  }

  .btn-dvir,
  .btn-jsa {
    justify-content: center;
    width: 100%;
  }

  .jobboard-date-display {
    font-size: 1.1rem;
    min-width: auto;
  }
}

/* ============================================
   DRIVER TICKET VIEW (Job Board)
   ============================================ */
.driver-ticket-group {
  margin-bottom: 16px;
}

.driver-ticket-group-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.driver-ticket-group-title .material-icons {
  font-size: 16px;
  color: var(--brand-blue);
}

.driver-ticket-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.driver-ticket-table th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-light);
}

.driver-ticket-table td {
  padding: 6px 8px;
  color: var(--text-primary);
  border-bottom: 1px solid #F1F5F9;
}

.driver-ticket-table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================
   ONBOARDING CHECKLIST
   ============================================ */

.onboarding-checklist {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  margin: 16px 16px 0;
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--brand-blue), var(--accent-teal)) 1;
}

.onboarding-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.onboarding-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
}

.onboarding-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
}

.onboarding-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
}

.onboarding-dismiss:hover {
  background: var(--bg-elevated);
}

.onboarding-progress {
  height: 6px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 16px;
}

.onboarding-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-blue), var(--accent-teal));
  border-radius: 3px;
  transition: width 0.5s ease;
}

.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  border: 1px solid transparent;
  transition: background 0.15s ease;
}

.onboarding-step:not(.done):hover {
  background: #F0F7FF;
  border-color: var(--brand-blue);
}

.onboarding-check {
  font-size: 22px;
  flex-shrink: 0;
}

.onboarding-step:not(.done) .onboarding-check {
  color: #CBD5E1;
}

.onboarding-step.done .onboarding-check {
  color: #10B981;
}

.onboarding-step-label {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
}

.onboarding-step.done .onboarding-step-label {
  color: var(--text-secondary);
  text-decoration: line-through;
}

.onboarding-go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px !important;
  font-size: 0.8rem !important;
  border-radius: 6px;
  white-space: nowrap;
}

.onboarding-done-icon {
  color: #10B981;
  font-size: 18px;
}

.onboarding-footer {
  text-align: center;
  margin-top: 12px;
}

.onboarding-footer .btn-link {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px;
}

.onboarding-footer .btn-link:hover {
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .onboarding-checklist {
    margin: 8px 8px 0;
    padding: 16px;
  }

  .onboarding-step {
    padding: 8px 10px;
  }

  .onboarding-go {
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
  }

  .onboarding-go .material-icons {
    display: none;
  }
}

/* ============================================
   BILLING ONBOARDING WIZARD — TYPE PILLS
   ============================================ */

.obw-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  background: #E2E8F0;
  color: var(--text-primary);
  white-space: nowrap;
}

.obw-type-pill-new {
  background: #DBEAFE;
  color: var(--brand-blue);
  border: 1px solid #93C5FD;
}

/* ============================================
   SPARKLES TRAINING SYSTEM
   ============================================ */

/* Sparkle container - wraps any element that should sparkle */
.sparkle-wrapper {
  position: relative;
  display: inline-flex;
}

/* For nav items that are already positioned, add sparkle indicator */
.has-sparkle {
  position: relative;
}

/* The actual sparkle indicator - animated star burst */
.sparkle-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  z-index: 100;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.9));
}

/* Center glowing core */
.sparkle-indicator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #fff 0%, #FFD700 40%, #FFA500 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: sparkle-core 1s ease-in-out infinite;
  box-shadow:
    0 0 4px #fff,
    0 0 8px #FFD700,
    0 0 16px rgba(255, 165, 0, 0.8),
    0 0 24px rgba(255, 215, 0, 0.4);
}

/* Four-point star burst rays */
.sparkle-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(0deg, transparent 40%, #FFD700 48%, #fff 50%, #FFD700 52%, transparent 60%),
    linear-gradient(90deg, transparent 40%, #FFD700 48%, #fff 50%, #FFD700 52%, transparent 60%),
    linear-gradient(45deg, transparent 43%, rgba(255, 215, 0, 0.7) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 215, 0, 0.7) 52%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, rgba(255, 215, 0, 0.7) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 215, 0, 0.7) 52%, transparent 57%);
  animation: sparkle-rays 1.5s ease-in-out infinite;
}

/* Core pulse animation */
@keyframes sparkle-core {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.9;
  }
}

/* Rays rotation and scale animation */
@keyframes sparkle-rays {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) rotate(22.5deg) scale(1.15);
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    opacity: 1;
  }
}

/* Small sparkle variant — subtle dot, no rays or particles */
.sparkle-small {
  width: 10px;
  height: 10px;
  filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.6));
}
.sparkle-small::before {
  width: 6px;
  height: 6px;
  box-shadow:
    0 0 3px #fff,
    0 0 6px #FFD700;
  animation: sparkle-core 2s ease-in-out infinite;
}
.sparkle-small::after {
  display: none;
}

/* Floating particles around the sparkle */
.sparkle-indicator .sparkle-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #FFD700;
  border-radius: 50%;
  box-shadow: 0 0 4px #FFD700, 0 0 8px rgba(255, 215, 0, 0.5);
}

.sparkle-indicator .sparkle-particle:nth-child(1) {
  top: -2px;
  left: 50%;
  animation: particle-float-1 2s ease-in-out infinite;
}

.sparkle-indicator .sparkle-particle:nth-child(2) {
  top: 50%;
  right: -2px;
  animation: particle-float-2 2s ease-in-out infinite 0.5s;
}

.sparkle-indicator .sparkle-particle:nth-child(3) {
  bottom: -2px;
  left: 50%;
  animation: particle-float-3 2s ease-in-out infinite 1s;
}

.sparkle-indicator .sparkle-particle:nth-child(4) {
  top: 50%;
  left: -2px;
  animation: particle-float-4 2s ease-in-out infinite 1.5s;
}

@keyframes particle-float-1 {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 0.3; }
  50% { transform: translateX(-50%) translateY(-6px) scale(1.5); opacity: 1; }
}

@keyframes particle-float-2 {
  0%, 100% { transform: translateY(-50%) translateX(0) scale(1); opacity: 0.3; }
  50% { transform: translateY(-50%) translateX(6px) scale(1.5); opacity: 1; }
}

@keyframes particle-float-3 {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 0.3; }
  50% { transform: translateX(-50%) translateY(6px) scale(1.5); opacity: 1; }
}

@keyframes particle-float-4 {
  0%, 100% { transform: translateY(-50%) translateX(0) scale(1); opacity: 0.3; }
  50% { transform: translateY(-50%) translateX(-6px) scale(1.5); opacity: 1; }
}

/* Mobile nav sparkle positioning */
.mobile-nav-item .sparkle-indicator {
  top: 2px;
  right: 8px;
}

/* Sidebar nav sparkle positioning */
.nav-item .sparkle-indicator {
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

/* Job card action button sparkle */
.btn-text-crew .sparkle-indicator {
  top: -4px;
  right: -4px;
}

/* AI button sparkle in modal header */
.btn-ai .sparkle-indicator {
  top: -4px;
  right: -4px;
}

/* Mobile more menu item sparkle */
.mobile-more-item .sparkle-indicator {
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

/* ============================================
   ASSETS/INVENTORY MODULE
   ============================================ */

/* Asset grid layout */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-md);
}

.asset-grid > .empty-state {
  grid-column: 1 / -1;
  width: 100%;
}

/* Asset card */
.asset-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.asset-card:hover {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.asset-card.inactive {
  opacity: 0.5;
}

.asset-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.asset-part-number {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.asset-card-name {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-card-tracking {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.asset-card-tracking .material-icons {
  font-size: 16px;
}

.asset-qty-negative { color: #dc2626; font-weight: 700; }
.asset-negative-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 4px;
}
.asset-card.low-stock { border-color: #dc2626; border-width: 2px; }

/* Inventory +/- buttons on asset cards */
.asset-inv-buttons {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
.asset-inv-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, box-shadow 0.1s;
}
.asset-inv-btn .material-icons { font-size: 16px; color: #fff; }
.asset-inv-btn:hover { transform: scale(1.15); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.asset-inv-add { background: #22C55E; }
.asset-inv-adjust { background: #EF4444; }

/* Asset card photo */
.asset-card-photo {
  width: 100%;
  height: 120px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
  background: var(--bg-elevated);
}

.asset-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Asset photo upload in modal */
.asset-photo-upload {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.asset-photo-preview .asset-photo-thumb {
  position: relative;
  display: inline-block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.asset-photo-preview .asset-photo-thumb img {
  display: block;
  width: 160px;
  height: 120px;
  object-fit: cover;
}

.asset-photo-remove {
  position: absolute !important;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.5) !important;
  color: #fff !important;
  border-radius: 50%;
  width: 28px;
  height: 28px;
}

.asset-photo-remove .material-icons {
  font-size: 16px;
}

.asset-inactive-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--status-danger);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Category badges */
.badge-equipment { background: #0891b2; color: white; }
.badge-tool { background: #ca8a04; color: white; }

/* ============================================
   ORDER MANAGEMENT OVERLAY
   ============================================ */

.order-management-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-page);
  z-index: 900;
  overflow-y: auto;
}

.order-management-overlay.hidden {
  display: none;
}

.order-management-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

.order-management-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.order-management-header h2 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
}

.order-management-toolbar {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.order-management-filters {
  margin-bottom: var(--spacing-lg);
}

.order-management-filters h3 {
  margin: 0 0 var(--spacing-md) 0;
}

/* Orders list */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Order card */
.order-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.order-card:hover {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-md);
}

.order-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}

.order-customer-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.order-po {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.order-card-items {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.order-card-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.order-card-date .material-icons {
  font-size: 16px;
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge-pending { background: #fef3c7; color: #92400e; }
.status-badge-pick { background: #dbeafe; color: #1e40af; }
.status-badge-prep { background: #e0e7ff; color: #3730a3; }
.status-badge-load { background: #cffafe; color: #0e7490; }
.status-badge-shipping { background: #d1fae5; color: #065f46; }
.status-badge-delivered { background: #059669; color: white; }

/* ============================================
   PIZZA TRACKER - MINI (in order cards)
   ============================================ */

.pizza-tracker-mini {
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: var(--spacing-sm);
}

.pizza-tracker-mini .tracker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-light);
  transition: all 0.2s ease;
}

.pizza-tracker-mini .tracker-dot.active {
  background: var(--brand-blue);
}

.pizza-tracker-mini .tracker-dot.current {
  background: var(--status-success);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
}

.pizza-tracker-mini .tracker-line {
  flex: 1;
  height: 2px;
  background: var(--border-light);
  min-width: 12px;
}

.pizza-tracker-mini .tracker-line.active {
  background: var(--brand-blue);
}

/* ============================================
   PIZZA TRACKER - FULL (in order details modal)
   ============================================ */

.pizza-tracker-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.pizza-tracker-section h4 {
  margin: 0 0 var(--spacing-md) 0;
}

.pizza-tracker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md) 0;
}

.tracker-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tracker-dot-large {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--border-light);
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 2px var(--border-light);
  transition: all 0.3s ease;
}

.tracker-stage.completed .tracker-dot-large {
  background: var(--brand-blue);
  box-shadow: 0 0 0 2px var(--brand-blue);
}

.tracker-stage.current .tracker-dot-large {
  background: var(--status-success);
  box-shadow: 0 0 0 2px var(--status-success), 0 0 0 6px rgba(5, 150, 105, 0.2);
}

.tracker-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.tracker-stage.completed .tracker-label,
.tracker-stage.current .tracker-label {
  color: var(--text-primary);
}

.tracker-connector {
  flex: 1;
  height: 3px;
  background: var(--border-light);
  margin: 0 var(--spacing-sm);
  margin-bottom: 20px; /* Align with dots */
}

.tracker-connector.completed {
  background: var(--brand-blue);
}

.pizza-tracker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

.pizza-tracker-actions .btn {
  min-width: 80px;
}

.pizza-tracker-actions .btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}

.pizza-tracker-actions .btn-ghost:hover {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

/* ============================================ */
/*   PORTAL PROJECT BOARD (public page)       */
/* ============================================ */
.portal-mode {
  overflow: auto !important;
}
.portal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}
.portal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border-light);
}
.portal-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: contain;
}
.portal-company {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.portal-subtitle {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.portal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
}
.portal-hero {
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--brand-blue), var(--accent-teal)) 1;
}
.portal-project-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.portal-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}
.portal-section {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
}
.portal-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}
.portal-section-title .material-icons {
  font-size: 22px;
  color: var(--brand-blue);
}
.portal-bid-table {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.portal-bid-header {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.portal-bid-line {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  align-items: center;
}
.portal-bid-line:last-of-type {
  border-bottom: none;
}
.portal-bid-total {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-top: 2px solid var(--border-medium);
  font-weight: 700;
  font-size: 1rem;
}
.portal-asset-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
}
.portal-person-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
}
.portal-footer {
  text-align: center;
  padding: 24px;
  margin-top: 40px;
}
@media (max-width: 768px) {
  .portal-page { padding: 16px 12px 60px; }
  .portal-card, .portal-section { padding: 16px; margin-bottom: 16px; }
  .portal-project-title { font-size: 1.125rem; }
  .portal-section-title { font-size: 0.9rem; margin-bottom: 12px; }

  /* Tracker: vertical timeline on mobile */
  .pizza-tracker {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin-bottom: 0;
  }
  .pizza-tracker .tracker-connector {
    display: block;
    width: 3px;
    height: 16px;
    margin: 0 0 0 10px;
    flex: none;
  }
  .pizza-tracker .tracker-stage {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0;
  }
  .pizza-tracker .tracker-stage .tracker-dot-large { flex-shrink: 0; }
  .pizza-tracker .tracker-label {
    font-size: 0.8rem;
    text-transform: none;
  }

  /* Bid table: stacked card layout on mobile */
  .portal-bid-header { display: none; }
  .portal-bid-line {
    flex-wrap: wrap;
    padding: 12px;
    gap: 4px;
  }
  .portal-bid-line > div:first-child {
    flex: 1 1 100% !important;
    margin-bottom: 4px;
  }
  .portal-bid-line > div:first-child div {
    font-size: 0.9rem !important;
  }
  .portal-bid-line > div:not(:first-child) {
    flex: 1 1 auto !important;
    text-align: left !important;
    font-size: 0.8rem;
  }
  .portal-bid-line > div:last-child {
    text-align: right !important;
    font-size: 0.9rem !important;
  }
  .portal-bid-total { font-size: 0.9rem; padding: 10px 12px; }
}

/* Status history */
.status-history-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.status-history-section h4 {
  margin: 0 0 var(--spacing-md) 0;
}

.status-history-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-light);
}

.status-history-item:last-child {
  border-bottom: none;
}

.history-time {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.history-by {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ============================================
   ORDER DETAILS MODAL
   ============================================ */

.order-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.order-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-detail-item.full-width {
  grid-column: 1 / -1;
}

.detail-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.detail-value {
  font-size: 0.95rem;
  color: var(--text-primary);
}

.detail-value.link {
  color: var(--brand-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.detail-value.link:hover {
  text-decoration: underline;
}

.order-items-list {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.order-item-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-light);
}

.order-item-row:last-child {
  border-bottom: none;
}

.item-qty {
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--brand-blue);
  min-width: 40px;
}

.item-name {
  color: var(--text-secondary);
}

/* Customer list in modal */
.customer-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-sm);
}

.customer-list-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}

.customer-list-item .material-icons {
  color: var(--text-muted);
  font-size: 20px;
}

.customer-list-item .customer-name {
  font-weight: 500;
}

/* Input with button (for copy link) */
.input-with-button {
  display: flex;
  gap: var(--spacing-sm);
}

.input-with-button input {
  flex: 1;
}

/* Panel header actions */
.panel-header-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* ============================================
   CUSTOMER ORDER REQUEST PAGE (PUBLIC)
   ============================================ */

/* Order request mode - enable scrolling */
html:has(body.order-request-mode),
body.order-request-mode {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
}

body.order-request-mode #app {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  display: block !important;
}

body.order-request-mode #app-sidebar,
body.order-request-mode #mobile-nav,
body.order-request-mode #app-header {
  display: none !important;
}

body.order-request-mode #main-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  height: 100vh !important;
  height: 100dvh !important;
  padding-bottom: var(--spacing-xl);
}

.order-request-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

.order-request-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.order-request-header h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-sm) 0;
}

.order-request-header p {
  color: var(--text-muted);
  margin: 0;
}

.order-request-section {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.order-request-section h2 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Asset selection in order request */
.asset-selection-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.asset-selection-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.asset-selection-item:hover {
  border-color: var(--brand-blue);
}

.asset-selection-item.selected {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--brand-blue);
}

.asset-selection-item input[type="checkbox"] {
  flex-shrink: 0;
}

.asset-selection-info {
  flex: 1;
}

.asset-selection-name {
  font-weight: 600;
}

.asset-selection-detail {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.asset-selection-qty {
  width: 70px;
}

.asset-selection-available {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: right;
  min-width: 80px;
}

/* Order request form */
.order-request-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.order-request-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

/* Success confirmation */
.order-request-success {
  text-align: center;
  padding: var(--spacing-xl);
}

.order-request-success .success-icon {
  font-size: 64px;
  color: var(--status-success);
  margin-bottom: var(--spacing-md);
}

.order-request-success h2 {
  margin: 0 0 var(--spacing-sm) 0;
}

.order-request-success p {
  color: var(--text-muted);
}

/* Time-off request page (public link) — reuses order-request-page layout */
html:has(body.timeoff-request-mode),
body.timeoff-request-mode {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
}

body.timeoff-request-mode #app {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  display: block !important;
}

body.timeoff-request-mode #app-sidebar,
body.timeoff-request-mode #mobile-nav,
body.timeoff-request-mode #app-header {
  display: none !important;
}

body.timeoff-request-mode #main-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  height: 100vh !important;
  height: 100dvh !important;
  padding-bottom: var(--spacing-xl);
}

/* Shop duties checklist page (public link) — reuses order-request-page layout */
html:has(body.shop-duties-mode),
body.shop-duties-mode {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
}

body.shop-duties-mode #app {
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

body.shop-duties-mode #app-sidebar,
body.shop-duties-mode #mobile-nav,
body.shop-duties-mode #app-header {
  display: none !important;
}

body.shop-duties-mode #main-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 100vh;
  padding-bottom: var(--spacing-xl);
}

.shop-duties-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--border-light);
}

.shop-duties-tab {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.shop-duties-tab:hover {
  color: var(--text-primary);
}

.shop-duties-tab.active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
}

.duty-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
  min-height: 48px; /* Mobile touch target */
  touch-action: manipulation; /* Prevent double-tap zoom on mobile */
}

.duty-item:last-child {
  border-bottom: none;
}

.duty-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  cursor: pointer;
  accent-color: var(--brand-blue);
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
}

.duty-item label {
  flex: 1;
  cursor: pointer;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* Prevent double-tap zoom delay on mobile */
}

.duty-item.overdue label {
  color: var(--status-danger);
  font-weight: 600;
}

.duty-frequency {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.duty-item.overdue .duty-frequency {
  background: rgba(239, 68, 68, 0.1);
  color: var(--status-danger);
}

/* Fire Extinguisher Inspection How-To Dropdown */
.fire-ext-howto {
  margin: -4px 0 8px 0;
  padding: 0 0 0 36px;
}
.fire-ext-howto summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-blue);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  user-select: none;
}
.fire-ext-howto summary::-webkit-details-marker { display: none; }
.fire-ext-howto summary::before { content: '\25B6'; font-size: 0.6rem; margin-right: 2px; transition: transform 0.2s; }
.fire-ext-howto[open] summary::before { transform: rotate(90deg); }
.fire-ext-checklist {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-top: 4px;
}
.fire-ext-checklist ol {
  margin: 4px 0;
  padding-left: 20px;
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.6;
}
.fire-ext-checklist ol li { padding: 1px 0; }
.fire-ext-regulation {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 2px;
}
.fire-ext-item {
  border-left: 3px solid #ef4444;
}

.shop-duties-history-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.shop-duties-history-card h4 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.shop-duties-history-card .duty-time {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.shop-duties-history-card ul {
  margin: var(--spacing-xs) 0 0 0;
  padding-left: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.shop-duties-history-card ul li {
  padding: 2px 0;
}

.shop-duties-missed-list li {
  color: var(--text-secondary);
  opacity: 0.85;
}

/* Mobile responsiveness for order management */
@media (max-width: 768px) {
  .order-management-view {
    padding: var(--spacing-md);
  }

  .order-management-toolbar {
    flex-direction: column;
  }

  .order-management-toolbar .btn {
    width: 100%;
  }

  .order-details-grid {
    grid-template-columns: 1fr;
  }

  .pizza-tracker {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
  }

  .tracker-connector {
    display: none;
  }

  .tracker-stage {
    min-width: 60px;
  }

  .order-request-form .form-row {
    grid-template-columns: 1fr;
  }

  .asset-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   DELIVERY TICKET & SIGNATURE
   ============================================ */

/* Delivery ticket section in order details */
.delivery-ticket-section {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.delivery-ticket-section h4 {
  margin-bottom: var(--spacing-md);
}

.signature-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

.signature-status.signed {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.signature-status.signed .material-icons {
  color: var(--status-success);
}

.signature-status.pending {
  background: var(--status-pending-bg);
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.signature-status.pending .material-icons {
  color: var(--status-pending);
}

.signature-status .btn {
  margin-left: auto;
}

/* Delivery ticket modal/print view */
.delivery-ticket {
  background: white;
  padding: var(--spacing-xl);
  max-width: 800px;
  margin: 0 auto;
}

.ticket-header {
  text-align: center;
  border-bottom: 2px solid var(--text-primary);
  padding-bottom: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.ticket-header h2 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.5rem;
}

.ticket-header h3 {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 400;
}

.ticket-number {
  margin-top: var(--spacing-sm);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.ticket-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.ticket-info-item {
  display: flex;
  flex-direction: column;
}

.ticket-info-item.full-width {
  grid-column: span 2;
}

.ticket-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ticket-value {
  font-size: 1rem;
  font-weight: 500;
  margin-top: var(--spacing-xs);
}

.ticket-items {
  margin-bottom: var(--spacing-xl);
}

.ticket-items h4 {
  border-bottom: 1px solid var(--border-light);
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.ticket-items-table {
  width: 100%;
  border-collapse: collapse;
}

.ticket-items-table th,
.ticket-items-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.ticket-items-table th {
  background: var(--bg-elevated);
  font-weight: 600;
  font-size: 0.875rem;
}

.ticket-notes {
  margin-bottom: var(--spacing-xl);
}

.ticket-notes h4 {
  margin-bottom: var(--spacing-sm);
}

.ticket-signature-section {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.signature-display {
  text-align: center;
}

.signature-image {
  max-width: 300px;
  max-height: 100px;
  border-bottom: 1px solid var(--text-primary);
}

.signature-name {
  margin-top: var(--spacing-xs);
  font-weight: 500;
}

.signature-date {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.signature-pending {
  text-align: center;
}

.signature-line {
  width: 300px;
  border-bottom: 1px solid var(--text-primary);
  margin: 60px auto var(--spacing-xs);
}

.signature-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Signature capture page (customer-facing) */
body.signature-mode {
  background: var(--bg-page);
}

body.signature-mode #app-sidebar,
body.signature-mode #mobile-nav,
body.signature-mode #app-header {
  display: none !important;
}

body.signature-mode #main-content {
  margin: 0;
  padding: 0;
}

.signature-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-xl);
}

.signature-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.signature-header h1 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.75rem;
}

.signature-header h2 {
  margin: 0;
  font-weight: 400;
  color: var(--text-secondary);
}

.signature-ticket {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-xl);
  width: 100%;
  max-width: 500px;
}

.signature-items {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}

.signature-items h3 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1rem;
}

.items-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.item-row {
  display: flex;
  gap: var(--spacing-md);
}

.item-qty {
  font-weight: 600;
  color: var(--brand-blue);
  min-width: 40px;
}

.item-desc {
  color: var(--text-secondary);
}

.signature-capture {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-light);
}

.signature-capture h3 {
  margin: 0 0 var(--spacing-sm) 0;
}

.signature-instructions {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: var(--spacing-lg);
}

.signature-canvas-container {
  position: relative;
  margin-bottom: var(--spacing-lg);
}

#signature-canvas {
  width: 100%;
  max-width: 400px;
  height: 200px;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: white;
  cursor: crosshair;
  touch-action: none;
}

.signature-canvas-container .btn {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
}

.signature-capture .btn-lg {
  width: 100%;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1rem;
}

.signature-success {
  text-align: center;
  padding: var(--spacing-xxl);
}

.signature-success .success-icon {
  font-size: 64px;
  color: var(--status-success);
  margin-bottom: var(--spacing-lg);
}

.signature-success h2 {
  margin: 0 0 var(--spacing-md) 0;
}

.signature-success p {
  color: var(--text-muted);
}

/* Rotating animation for spinner */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotating {
  animation: rotate 1s linear infinite;
}

/* Mobile responsiveness for signature page */
@media (max-width: 768px) {
  .signature-page {
    padding: var(--spacing-md);
  }

  .signature-ticket {
    padding: var(--spacing-lg);
  }

  .ticket-info-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .ticket-info-item.full-width {
    grid-column: span 1;
  }

  #signature-canvas {
    height: 150px;
  }
}

/* ============================================
   CLOCK MODULE TABS (Founder Account)
   ============================================ */

.clock-tabs {
  display: flex;
  gap: var(--spacing-xs);
  background: var(--bg-card);
  padding: var(--spacing-xs);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.clock-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.clock-tab:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.clock-tab.active {
  background: var(--action-primary);
  color: white;
  box-shadow: var(--shadow-sm);
}

.clock-tab .material-icons {
  font-size: 18px;
}

.clock-tab-content {
  min-height: 400px;
}

/* Time Off Tab within Clock module */
.clock-timeoff-content {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-lg);
  border: 1px solid var(--border-light);
}

.clock-timeoff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.clock-timeoff-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

/* ============================================
   HR MODULE STYLES (Founder Account)
   ============================================ */

.hr-view {
  padding: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.hr-view h1 {
  margin: 0 0 var(--spacing-xl) 0;
  font-size: 1.75rem;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* HR Landing Page */
.hr-landing {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* HR Sections */
.hr-section {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
}

.hr-section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-lg) 0;
}

.hr-section-title .material-icons {
  color: var(--action-primary);
  font-size: 24px;
}

.hr-pending-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #eab308;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: auto;
}

/* HR Resources Grid */
.hr-resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--spacing-md);
}

.hr-resource-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.2s;
  border: 1px solid var(--border-light);
}

.hr-resource-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--action-primary);
}

.hr-resource-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-blue), var(--accent-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.hr-resource-icon .material-icons {
  font-size: 24px;
}

.hr-resource-info {
  flex: 1;
  min-width: 0;
}

.hr-resource-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.hr-resource-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* HR Actions Grid */
.hr-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.hr-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-light);
  cursor: pointer;
  transition: all 0.2s;
}

.hr-action-card:hover {
  border-color: var(--action-primary);
  background: var(--bg-page);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hr-action-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--action-primary);
  transition: all 0.2s;
}

.hr-action-card:hover .hr-action-icon {
  background: var(--action-primary);
  color: white;
}

.hr-action-icon .material-icons {
  font-size: 32px;
}

.hr-action-label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  text-align: center;
}

/* Warning Type Selector (Disciplinary Form) */
.warning-type-selector {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.warning-type-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-secondary);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 0.9rem;
}

.warning-type-option:hover {
  background: var(--bg-elevated);
  border-color: var(--border-medium);
}

.warning-type-option.selected {
  background: var(--bg-card);
  border-color: var(--action-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.warning-type-option .material-icons {
  font-size: 20px;
}

/* PIP Checklist Styles */
.pip-checklist {
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  border: 1px solid var(--border-light);
}

.pip-checklist label {
  cursor: pointer;
  transition: background 0.15s;
  padding: 8px;
  margin: -8px;
  border-radius: var(--radius-sm);
}

.pip-checklist label:hover {
  background: var(--bg-elevated);
}

/* HR Form Views */
.hr-form-view {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.hr-form-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-light);
}

.hr-form-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
  flex: 1;
}

.hr-form-body {
  padding: var(--spacing-lg);
}

.hr-form-group {
  margin-bottom: var(--spacing-lg);
}

.hr-form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.hr-form-group label .required {
  color: var(--action-danger);
}

.hr-form-group select,
.hr-form-group input,
.hr-form-group textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  background: var(--bg-page);
  color: var(--text-primary);
  transition: border-color 0.2s;
}

.hr-form-group select:focus,
.hr-form-group input:focus,
.hr-form-group textarea:focus {
  outline: none;
  border-color: var(--action-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.hr-form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.hr-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-light);
}

/* HR Checklist Styles */
.hr-checklist-view {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.hr-checklist-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-light);
}

.hr-checklist-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
  flex: 1;
}

.hr-checklist-body {
  padding: var(--spacing-lg);
}

.hr-checklist-employee {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
}

.hr-checklist-employee-info {
  flex: 1;
}

.hr-checklist-employee-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}

.hr-checklist-employee-role {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* HR Progress Bar */
.hr-progress-container {
  margin-bottom: var(--spacing-lg);
}

.hr-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
  font-size: 0.875rem;
}

.hr-progress-label span:first-child {
  color: var(--text-secondary);
}

.hr-progress-label span:last-child {
  font-weight: 600;
  color: var(--text-primary);
}

.hr-progress-bar {
  height: 8px;
  background: var(--bg-page);
  border-radius: 4px;
  overflow: hidden;
}

.hr-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-blue), var(--accent-teal));
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* HR Checklist Categories */
.hr-checklist-category {
  margin-bottom: var(--spacing-lg);
}

.hr-checklist-category:last-child {
  margin-bottom: 0;
}

.hr-category-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-light);
}

.hr-checklist-progress {
  margin-bottom: var(--spacing-lg);
}

.hr-progress-text {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
  text-align: right;
}

/* HR Checklist Items */
.hr-checklist-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hr-checklist-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
}

.hr-checklist-item:hover {
  background: var(--bg-page);
}

.hr-checklist-item.completed {
  opacity: 0.6;
}

.hr-checklist-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  margin: 0;
}

.hr-checklist-item-left input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  accent-color: var(--action-primary);
}

.hr-checklist-label {
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.hr-checklist-label a {
  color: var(--action-primary);
  text-decoration: none;
}

.hr-checklist-label a:hover {
  text-decoration: underline;
}

.hr-checklist-item.completed .hr-checklist-label {
  text-decoration: line-through;
  color: var(--text-muted);
}

.hr-checklist-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 8px;
}

.hr-checklist-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.hr-checklist-assign {
  padding: 4px 8px;
  font-size: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  min-width: 100px;
}

.hr-checklist-assign:hover {
  border-color: var(--border-medium);
}

.hr-checklist-assign.assigned {
  color: var(--text-primary);
  border-color: var(--action-primary);
}

/* HR List (for viewing submitted forms/checklists) */
.hr-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.hr-list-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--action-primary);
  transition: all 0.2s;
  cursor: pointer;
}

.hr-list-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.hr-list-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--action-primary);
  flex-shrink: 0;
}

.hr-list-item-icon .material-icons {
  font-size: 20px;
}

.hr-list-item-info {
  flex: 1;
  min-width: 0;
}

.hr-list-item-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.hr-list-item-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.hr-list-item-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* HR Empty State */
.hr-empty-state {
  text-align: center;
  padding: var(--spacing-xxl);
  color: var(--text-muted);
}

.hr-empty-state .material-icons {
  font-size: 48px;
  color: var(--border-medium);
  margin-bottom: var(--spacing-md);
}

.hr-empty-state p {
  margin: 0;
  font-size: 0.9375rem;
}

/* HR Action Icon Color Variants */
.hr-action-icon.warning {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.hr-action-card:hover .hr-action-icon.warning {
  background: #F59E0B;
  color: white;
}

.hr-action-icon.success {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.hr-action-card:hover .hr-action-icon.success {
  background: #10B981;
  color: white;
}

.hr-action-icon.info {
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
}

.hr-action-card:hover .hr-action-icon.info {
  background: #3B82F6;
  color: white;
}

/* HR Action External Link Icon */
.hr-action-external {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  font-size: 14px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.2s;
}

.hr-action-card {
  position: relative;
}

.hr-action-card:hover .hr-action-external {
  opacity: 1;
}

/* HR Resource External Link */
.hr-resource-external {
  font-size: 16px;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}

/* HR List Item Icon Variants */
.hr-list-item-icon.warning {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.hr-list-item-icon.success {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.hr-list-item-icon.info {
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
}

/* HR Progress Bar in List */
.hr-list-item .hr-progress-bar {
  height: 6px;
  margin-top: var(--spacing-xs);
}

.hr-list-item .hr-progress-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* HR List Item Date */
.hr-list-item-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: var(--spacing-sm);
}

/* HR Review Cards Grid */
.hr-review-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-md);
}

.hr-review-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}

.hr-review-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.hr-review-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: 4px;
}

.hr-review-card-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hr-review-card-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.hr-review-card-position {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.hr-review-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
}

.hr-review-card-score {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
}

.hr-review-card-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* HR Rating Stars */
.hr-rating-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: var(--spacing-xs);
}

.hr-rating-stars .material-icons {
  font-size: 16px;
}

.hr-rating-stars .star-full {
  color: #F59E0B;
}

.hr-rating-stars .star-half {
  color: #F59E0B;
}

.hr-rating-stars .star-empty {
  color: var(--border-medium);
}

.hr-rating-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-left: var(--spacing-xs);
}

/* HR Form View (Read-only) */
.hr-form-view {
  padding: var(--spacing-md);
}

.hr-form-view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.hr-form-view-header h4 {
  margin: 0;
  font-size: 1.125rem;
  color: var(--text-primary);
}

.hr-form-date {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

.hr-form-field {
  margin-bottom: var(--spacing-md);
}

.hr-form-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-xs);
}

.hr-form-field p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.5;
}

.hr-signature {
  font-family: 'Brush Script MT', cursive, sans-serif;
  font-size: 1.5rem;
  color: var(--action-primary);
}

/* HR Review View */
.hr-review-view {
  padding: var(--spacing-md);
}

.hr-review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
}

.hr-review-employee h4 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.hr-review-employee p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.hr-review-meta {
  text-align: right;
}

.hr-review-meta p {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.hr-review-meta p:last-child {
  margin-bottom: 0;
}

/* HR Review Overall Rating */
.hr-review-overall {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-lg);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
}

.hr-review-overall-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.hr-review-overall-stars {
  display: flex;
  gap: 4px;
  margin-bottom: var(--spacing-sm);
}

.hr-review-overall-stars .material-icons {
  font-size: 32px;
}

.hr-review-overall-stars .star-full {
  color: #F59E0B;
}

.hr-review-overall-stars .star-half {
  color: #F59E0B;
}

.hr-review-overall-stars .star-empty {
  color: var(--border-medium);
}

.hr-review-overall-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* HR Review Ratings Grid */
.hr-review-ratings {
  margin-bottom: var(--spacing-lg);
}

.hr-review-ratings h4 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.hr-rating-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.hr-rating-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
}

.hr-rating-item-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.hr-rating-item-value {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.hr-rating-item-value .material-icons {
  font-size: 16px;
}

.hr-rating-item-text {
  font-size: 0.8125rem;
  color: var(--text-muted);
  min-width: 120px;
  text-align: right;
}

/* HR Review Section */
.hr-review-section {
  margin-bottom: var(--spacing-lg);
}

.hr-review-section h4 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.hr-review-section p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* HR Review Footer */
.hr-review-footer {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

.hr-review-footer p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* HR Mobile Responsiveness */
@media (max-width: 768px) {
  .hr-view {
    padding: var(--spacing-md);
  }

  .hr-view h1 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-lg);
  }

  .hr-resources-grid {
    grid-template-columns: 1fr;
  }

  .hr-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hr-action-card {
    padding: var(--spacing-md);
  }

  .hr-action-icon {
    width: 48px;
    height: 48px;
  }

  .hr-action-icon .material-icons {
    font-size: 24px;
  }

  .hr-form-header,
  .hr-checklist-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .hr-form-actions {
    flex-direction: column;
  }

  .hr-form-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hr-checklist-item {
    flex-wrap: wrap;
    padding: 6px 10px;
  }

  .hr-checklist-item-left {
    flex: 1;
    min-width: 0;
  }

  .hr-checklist-item-right {
    width: 100%;
    padding-left: 26px;
    margin-top: 4px;
  }

  .hr-checklist-assign {
    min-width: 0;
    font-size: 0.7rem;
  }

  .clock-tabs {
    flex-direction: column;
  }

  .clock-tab {
    justify-content: flex-start;
    padding: var(--spacing-md);
  }
}

/* -----------------------------------------------
   HR EMPLOYEE DIRECTORY
   ----------------------------------------------- */

/* Collapsible Section Toggle */
.hr-section-collapsible .hr-section-title {
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

.hr-section-collapsible .hr-section-title:hover {
  color: var(--action-primary);
}

.hr-section-chevron {
  margin-left: auto;
  transition: transform 0.3s ease;
}

.hr-section-chevron.expanded {
  transform: rotate(180deg);
}

/* Directory Toolbar */
.hr-directory-toolbar {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.hr-search-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  flex: 1;
  min-width: 200px;
}

.hr-search-box .material-icons {
  color: var(--text-muted);
  font-size: 20px;
}

.hr-search-box input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 0.9375rem;
  color: var(--text-primary);
  outline: none;
}

.hr-search-box input::placeholder {
  color: var(--text-muted);
}

.hr-filter-select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-page);
  font-size: 0.9375rem;
  color: var(--text-primary);
  min-width: 160px;
  cursor: pointer;
}

/* Employee Grid */
.hr-employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

/* Employee Card */
.hr-employee-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.hr-employee-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.hr-employee-card:active {
  transform: scale(0.99);
}

.hr-employee-card.inactive { opacity: 0.55; }
.hr-employee-card.inactive .hr-employee-card-header { filter: grayscale(80%); }
.hr-employee-card.compliance-alert { border-color: #dc2626; border-width: 2px; }
.hr-employee-card.compliance-alert .hr-employee-card-header { border-bottom-color: #fecaca; }

/* Nav compliance alert badge */
.nav-alert-badge {
  background: #dc2626;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}

/* HR Edit Modal — collapsible sections */
.hr-edit-section {
  border-top: 2px solid var(--border-light);
  margin-top: var(--spacing-md);
}
.hr-edit-section-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-md) 0;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.hr-edit-section-toggle::-webkit-details-marker { display: none; }
.hr-edit-section-toggle .hr-edit-chevron {
  margin-left: auto;
  font-size: 20px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.hr-edit-section[open] .hr-edit-chevron { transform: rotate(180deg); }
.hr-edit-section-body {
  padding-bottom: var(--spacing-md);
}

.hr-employee-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-md) 10px;
  background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(20,184,166,0.06));
  border-bottom: 1px solid var(--border-light);
}

.hr-employee-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px var(--spacing-md) var(--spacing-md);
}

.hr-employee-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hr-employee-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--spacing-md);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-light);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.hr-dept-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.hr-dept-badge.dept-field { background: #dbeafe; color: #1e40af; }
.hr-dept-badge.dept-dispatch { background: #fef3c7; color: #92400e; }
.hr-dept-badge.dept-shop { background: #fee2e2; color: #991b1b; }
.hr-dept-badge.dept-office { background: #f3e8ff; color: #6b21a8; }
.hr-dept-badge.dept-default { background: var(--bg-elevated); color: var(--text-secondary); }

.hr-inactive-label {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-tertiary);
  background: var(--bg-elevated);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  margin-left: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Compliance Stats */
.hr-missed-dvir-placard {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 12px 16px;
  margin-bottom: var(--spacing-md);
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border-radius: var(--radius-md);
  color: #fff;
}
.hr-missed-dvir-placard-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hr-missed-dvir-placard-icon .material-icons { font-size: 22px; color: #fff; }
.hr-missed-dvir-placard-body { flex: 1; min-width: 0; }
.hr-missed-dvir-placard-title { font-weight: 700; font-size: 0.95rem; }
.hr-missed-dvir-placard-meta { font-size: 0.8rem; opacity: 0.85; margin-top: 2px; }


.hr-employee-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--accent-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(59,130,246,0.25);
}

.hr-employee-info {
  flex: 1;
  min-width: 0;
}

.hr-employee-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.hr-employee-position {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-top: 1px;
}

.hr-employee-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hr-emp-badge {
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e2e8f0;
  color: #334155;
  white-space: nowrap;
  font-weight: 600;
}

.hr-emp-badge.good { background: #dcfce7; color: #166534; }
.hr-emp-badge.warning { background: #fef3c7; color: #92400e; }
.hr-emp-badge.poor { background: #fce4ec; color: #c62828; }

.hr-employee-chevron {
  color: var(--text-muted);
  font-size: 18px;
  flex-shrink: 0;
}

/* Employee Detail Modal */
.hr-employee-detail-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--spacing-lg);
}

.hr-detail-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--accent-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.hr-detail-info h3 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.hr-detail-info p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* Employee Notes */
.hr-employee-notes {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

/* Detail Tabs */
.hr-detail-tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: var(--spacing-sm);
}

.hr-detail-tab {
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all 0.2s;
}

.hr-detail-tab:hover {
  background: var(--bg-page);
  color: var(--text-primary);
}

.hr-detail-tab.active {
  background: var(--action-primary);
  color: white;
}

/* Tab Content */
.hr-detail-content {
  display: none;
}

.hr-detail-content.active {
  display: block;
}

/* Detail Item Cards (reviews, forms in employee detail) */
.hr-detail-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  margin-bottom: var(--spacing-sm);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.03);
}

.hr-detail-item:hover {
  border-color: var(--action-primary);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 4px 8px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}

.hr-detail-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-elevated);
}

.hr-detail-item-icon .material-icons {
  font-size: 20px;
  color: var(--text-secondary);
}

.hr-detail-item-icon.pass,
.hr-detail-item-icon.good { background: #dcfce7; }
.hr-detail-item-icon.pass .material-icons,
.hr-detail-item-icon.good .material-icons { color: #166534; }

.hr-detail-item-icon.fail,
.hr-detail-item-icon.poor { background: #fce4ec; }
.hr-detail-item-icon.fail .material-icons,
.hr-detail-item-icon.poor .material-icons { color: #c62828; }

.hr-detail-item-icon.warning { background: #fef3c7; }
.hr-detail-item-icon.warning .material-icons { color: #92400e; }

.hr-detail-item-icon.verbal_warning { background: #fef3c7; }
.hr-detail-item-icon.verbal_warning .material-icons { color: #92400e; }

.hr-detail-item-icon.written_warning { background: #fed7aa; }
.hr-detail-item-icon.written_warning .material-icons { color: #9a3412; }

.hr-detail-item-icon.suspension,
.hr-detail-item-icon.termination { background: #fce4ec; }
.hr-detail-item-icon.suspension .material-icons,
.hr-detail-item-icon.termination .material-icons { color: #c62828; }

.hr-detail-item-info {
  flex: 1;
  min-width: 0;
}

.hr-detail-item-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.hr-detail-item-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.hr-detail-item-delete {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  opacity: 0;
  transition: all 0.15s;
  flex-shrink: 0;
}

.hr-detail-item:hover .hr-detail-item-delete {
  opacity: 1;
}

.hr-detail-item-delete:hover {
  color: #dc2626;
  background: #fef2f2;
}

/* HR Info Grid */
.hr-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.hr-info-item {
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
}

.hr-info-item label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-xs);
}

.hr-info-item .value {
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 500;
}

/* Edit HR Info Form */
.hr-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.hr-edit-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.hr-edit-form label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.hr-edit-form input,
.hr-edit-form select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  background: var(--bg-page);
  color: var(--text-primary);
}

.hr-edit-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  margin-top: var(--spacing-md);
}

/* Reviews List in Detail */
.hr-reviews-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.hr-review-item {
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--action-primary);
}

.hr-review-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.hr-review-item-date {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.hr-review-item-score {
  font-size: 0.875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.hr-review-item-score.excellent {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.hr-review-item-score.good {
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
}

.hr-review-item-score.needs-improvement {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.hr-review-item-score.poor {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .hr-directory-toolbar {
    flex-direction: column;
  }

  .hr-search-box {
    min-width: 100%;
  }

  .hr-filter-select {
    width: 100%;
  }

  .hr-employee-grid {
    grid-template-columns: 1fr;
  }

  .hr-employee-detail-header {
    flex-direction: column;
    text-align: center;
  }

  .hr-detail-tabs {
    flex-wrap: wrap;
    justify-content: center;
  }

  .hr-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================ */
/* HR HIRING / APPLICANT TRACKING              */
/* ============================================ */

.hiring-subview {
  padding: var(--spacing-md);
}

.hiring-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--action-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: var(--spacing-xs) 0;
  margin-bottom: var(--spacing-sm);
}

.hiring-back-btn:hover {
  text-decoration: underline;
}

.hiring-stats-bar {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
  padding: var(--spacing-sm) 0;
  margin-bottom: var(--spacing-md);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.hiring-stats-bar::-webkit-scrollbar {
  height: 4px;
}

.hiring-stats-bar::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 4px;
}

.hiring-stat-card {
  flex: 0 0 auto;
  min-width: 90px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  border-bottom: 3px solid var(--stat-color);
  scroll-snap-align: start;
}

.hiring-stat-card:hover {
  border-color: var(--stat-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hiring-stat-card.active {
  background: var(--stat-color);
  color: #fff;
  border-color: var(--stat-color);
}

.hiring-stat-count {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.hiring-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

.hiring-toolbar {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.hiring-search-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  flex: 1;
  min-width: 200px;
}

.hiring-search-box .material-icons {
  color: var(--text-muted);
  font-size: 20px;
}

.hiring-search-box input {
  border: none;
  background: none;
  outline: none;
  font-size: 0.9rem;
  color: var(--text-primary);
  width: 100%;
}

/* Desktop table */
.hiring-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.hiring-table th {
  background: var(--bg-page);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.hiring-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9rem;
  color: var(--text-primary);
}

.hiring-table tr:last-child td {
  border-bottom: none;
}

.hiring-table tr:hover {
  background: var(--bg-page);
}

/* Mobile cards (hidden on desktop) */
.hiring-mobile-cards {
  display: none;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.hiring-mobile-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.hiring-mobile-card:hover {
  box-shadow: var(--shadow-md);
}

/* Candidate status badges */
.candidate-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.candidate-status-badge.status-new { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
.candidate-status-badge.status-reviewing { background: rgba(139, 92, 246, 0.1); color: #8B5CF6; }
.candidate-status-badge.status-phone_screen { background: rgba(6, 182, 212, 0.1); color: #06B6D4; }
.candidate-status-badge.status-interview { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
.candidate-status-badge.status-offer { background: rgba(16, 185, 129, 0.1); color: #10B981; }
.candidate-status-badge.status-hired { background: rgba(5, 150, 105, 0.15); color: #059669; }
.candidate-status-badge.status-rejected { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
.candidate-status-badge.status-withdrawn { background: rgba(107, 114, 128, 0.1); color: #6B7280; }
.candidate-status-badge.status-potentials { background: rgba(217, 119, 6, 0.1); color: #D97706; }

/* Resume upload area */
.resume-upload-area {
  display: flex;
  align-items: center;
  margin-top: var(--spacing-xs);
}

.resume-preview {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  margin-bottom: var(--spacing-xs);
}

.resume-preview .material-icons {
  color: var(--action-primary);
}

.resume-preview a {
  color: var(--action-primary);
  font-weight: 500;
  text-decoration: none;
}

.resume-preview a:hover {
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .hiring-subview {
    padding: var(--spacing-sm);
  }

  .hiring-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .hiring-toolbar .btn {
    width: 100%;
    justify-content: center;
  }

  .hiring-search-box {
    min-width: 100%;
  }

  .hiring-table {
    display: none;
  }

  .hiring-mobile-cards {
    display: flex;
  }

  .hiring-stats-bar {
    gap: var(--spacing-xs);
  }

  .hiring-stat-card {
    min-width: 75px;
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .hiring-stat-count {
    font-size: 1.2rem;
  }

  .hiring-stat-label {
    font-size: 0.65rem;
  }
}

/* ============================================ */
/* JSA (JOB SAFETY ANALYSIS) MODULE            */
/* ============================================ */

/* DVIR Tab Panels (Inspections | JSA) */
.dvir-tab-panel {
  display: none;
}

.dvir-tab-panel.active {
  display: block;
}

/* DVIR Tab Bar - subtle style overrides (roster-tabs base is too heavy for a sub-nav) */
.dvir-tab-bar.roster-tabs {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  width: fit-content;
  box-shadow: var(--shadow-sm);
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.dvir-tab-bar .roster-tab {
  border-radius: 0;
  padding: var(--spacing-sm) var(--spacing-xl);
  font-size: 0.9375rem;
}

.dvir-tab-bar .roster-tab .material-icons {
  font-size: 20px;
}

.dvir-tab-bar .roster-tab.active {
  background: var(--bg-card);
  color: var(--brand-blue);
  box-shadow: none;
  font-weight: 600;
}

.dvir-tab-bar .roster-tab.active .material-icons {
  color: var(--brand-blue);
}

.dvir-tab-bar .roster-tab#dvir-tab-jsa:not(.active) {
  color: #16a34a;
  font-weight: 600;
}

.dvir-tab-bar .roster-tab#dvir-tab-jsa:not(.active) .material-icons {
  color: #16a34a;
}

.dvir-tab-bar .roster-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-primary);
}

/* JSA Cards (History) */
.jsa-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-page);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: var(--spacing-md);
}

.jsa-card:hover {
  border-color: var(--brand-blue);
  background: var(--bg-card);
}

.jsa-card-status {
  flex-shrink: 0;
}

.jsa-card-status .material-icons {
  font-size: 32px;
}

.jsa-card-info {
  flex: 1;
  min-width: 0;
}

.jsa-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.jsa-card-job {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1.05rem;
}

/* JSA Section Headers (Collapsible) */
.jsa-section {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.jsa-section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px 12px;
  background: var(--bg-elevated);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  user-select: none;
  transition: background 0.2s;
}

.jsa-section-header:hover {
  background: var(--border-light);
}

.jsa-section-chevron {
  font-size: 20px;
  color: var(--text-secondary);
  transition: transform 0.2s;
}

.jsa-section-body {
  padding: 12px;
  transition: all 0.2s;
}

.jsa-section-body.collapsed {
  display: none;
}

/* JSA Chip Grid (Hazards & PPE) */
.jsa-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jsa-hazard-chip,
.jsa-ppe-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.jsa-hazard-chip .material-icons,
.jsa-ppe-chip .material-icons {
  font-size: 16px;
}

.jsa-hazard-chip:hover,
.jsa-ppe-chip:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.jsa-hazard-chip.selected,
.jsa-ppe-chip.selected {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.jsa-hazard-chip.selected .material-icons,
.jsa-ppe-chip.selected .material-icons {
  color: #FFFFFF;
}

/* JSA Task Rows */
.jsa-task-row {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px;
  margin-bottom: 8px;
  background: var(--bg-page);
}

.jsa-task-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.jsa-task-row .form-group {
  margin-bottom: 4px;
}

.jsa-task-row input[type="text"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

/* JSA Crew List */
.jsa-crew-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jsa-crew-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  transition: all 0.2s;
}

.jsa-crew-member.signed {
  border-color: var(--action-success);
  background: rgba(5, 150, 105, 0.04);
}

.jsa-crew-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jsa-crew-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.jsa-crew-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* JSA Signature Mini Preview */
.jsa-signature-mini {
  max-height: 36px;
  max-width: 100px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* JSA Detail View */
.jsa-detail-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.jsa-detail-section:last-child {
  border-bottom: none;
}

.jsa-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: 0.9rem;
}

.jsa-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.jsa-detail-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--border-light);
}

.jsa-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.jsa-detail-table th,
.jsa-detail-table td {
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  text-align: left;
}

.jsa-detail-table th {
  background: var(--bg-elevated);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.jsa-detail-crew {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jsa-detail-crew-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  font-size: 0.9rem;
}

.jsa-detail-crew-member > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* JSA Mobile Overrides */
@media (max-width: 768px) {
  .jsa-chip-grid {
    gap: 4px;
  }

  .jsa-hazard-chip,
  .jsa-ppe-chip {
    padding: 5px 8px;
    font-size: 0.75rem;
  }

  .jsa-hazard-chip .material-icons,
  .jsa-ppe-chip .material-icons {
    font-size: 14px;
  }

  .jsa-detail-grid {
    grid-template-columns: 1fr;
  }

  .jsa-task-row input[type="text"] {
    font-size: 16px; /* Prevent iOS zoom */
  }

  .jsa-crew-member {
    flex-wrap: wrap;
    gap: 6px;
  }

  .jsa-crew-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .dvir-tab-bar.roster-tabs {
    margin: 8px 8px 0;
  }
}

/* ============================================
   JSA — TITS/XTO MODE TOGGLE (Founder Only)
   ============================================ */
.jsa-mode-toggle {
  display: flex;
  gap: 0;
  padding: 4px;
  background: #E2E8F0;
  border-radius: 12px;
  margin: 0 16px 16px;
}
.jsa-mode-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  transition: all 0.25s ease;
  position: relative;
}
.jsa-mode-btn:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.5);
}
.jsa-mode-btn.active {
  background: #fff;
  color: var(--brand-blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* JSA Topic Chips (multi-select, TITS mode) */
.jsa-topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.jsa-topic-chip:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.jsa-topic-chip.selected {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Emergency Facility Section */
.jsa-emergency-location {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.jsa-facility-card {
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 6px;
}
.jsa-facility-card:hover {
  border-color: var(--brand-blue);
  background: var(--bg-secondary);
}
.jsa-facility-selected {
  padding: 10px 12px;
  border: 2px solid var(--action-success);
  border-radius: var(--radius-md);
  background: #f0fdf4;
}

/* ============================================
   JSA — XTO MODE STYLES (Founder Only)
   ============================================ */

/* XTO Signature Cards */
.xto-signatures {
  display: flex;
  gap: 12px;
  margin: 12px 4px;
}
.xto-sig-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.2s;
}
.xto-sig-card:hover {
  border-color: var(--brand-blue);
  background: var(--bg-secondary);
}
.xto-sig-card.signed {
  border-color: var(--action-success);
  border-style: solid;
  background: #f0fdf4;
}
.xto-sig-status {
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.xto-sig-card.signed .xto-sig-status {
  color: var(--action-success);
  font-weight: 600;
}

/* LSRA Card Grid */
.xto-lsra-section {
  margin: 12px 4px 0;
}
.xto-lsra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.xto-lsra-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.xto-lsra-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.xto-lsra-card-header .material-icons {
  font-size: 20px;
  color: var(--brand-blue);
}
.xto-lsra-card-body {
  padding: 8px 12px;
  display: none; /* Hidden until "Applicable" checked */
}
.xto-lsra-card-body .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.xto-lsra-item {
  margin-bottom: 2px;
}
.xto-lsra-subitems {
  padding-left: 28px;
  margin-top: 2px;
  margin-bottom: 4px;
}
.xto-lsra-subitem {
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 1px 0;
}
.xto-lsra-subitem::before {
  content: '\2022\00a0';
}

/* XTO Mobile Overrides */
@media (max-width: 768px) {
  .xto-lsra-grid {
    grid-template-columns: 1fr;
  }
  .xto-signatures {
    flex-direction: column;
    gap: 8px;
  }
  .jsa-mode-toggle {
    margin: 0 12px 12px;
  }
}

/* ============================================
   EDIT TICKET MODAL - Scrollable Form
   ============================================ */
#modal-ticket .modal-content {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  max-height: 90dvh;
  overflow: hidden;
}

#modal-ticket .modal-header {
  flex-shrink: 0;
}

#modal-ticket #form-ticket {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
  padding: 0 var(--spacing-lg) var(--spacing-lg);
}

#modal-ticket .form-actions {
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
  padding-top: var(--spacing-md);
  margin: 0 calc(-1 * var(--spacing-lg));
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}

/* Elevated Action Bar — billing modal footers */
#modal-view-ticket .form-actions,
#modal-billing-job .form-actions,
#modal-review-ticket .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 24px 20px;
  margin: 0;
  border-top: 1px solid var(--border-light);
  background: linear-gradient(to bottom, #F8FAFC, #fff);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
}

#modal-view-ticket .form-actions .btn,
#modal-billing-job .form-actions .btn,
#modal-review-ticket .form-actions .btn {
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: all 0.15s ease;
}

#modal-view-ticket .form-actions .btn:hover,
#modal-billing-job .form-actions .btn:hover,
#modal-review-ticket .form-actions .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

#modal-view-ticket .form-actions .btn-secondary,
#modal-billing-job .form-actions .btn-secondary,
#modal-review-ticket .form-actions .btn-secondary {
  background: #fff;
  border: 1px solid #CBD5E1;
  color: var(--text-primary);
}

#modal-view-ticket .form-actions .btn-primary,
#modal-billing-job .form-actions .btn-primary,
#modal-review-ticket .form-actions .btn-primary {
  border: none;
  color: #fff;
}

/* ============================================
   CUSTOMER RATES POPOVER (Item Codes Modal)
   ============================================ */
.customer-rates-popover {
  position: fixed;
  z-index: 1100;
  width: 280px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid var(--border-light);
  overflow: hidden;
}
.customer-rates-popover .crp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
  font-size: 13px;
}
.customer-rates-popover .crp-body {
  padding: 0;
}
.customer-rates-popover .crp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.customer-rates-popover .crp-row:hover {
  background: var(--bg-secondary);
}

/* ============================================
   BILLING LINES TABLE
   ============================================ */
.billing-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.billing-lines-table th,
.billing-lines-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.billing-lines-table th {
  background: var(--bg-elevated);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
}

.billing-lines-table td {
  color: var(--text-primary);
}

.billing-lines-table tbody tr:hover {
  background: var(--bg-hover);
}

.billing-lines-table tfoot td {
  border-top: 2px solid var(--border-medium);
  border-bottom: none;
  padding-top: 10px;
}

/* ============================================
   REVIEW TICKET MODAL
   ============================================ */
#review-ticket-modal-content {
  max-width: 960px;
}

.review-section {
  margin-bottom: var(--spacing-lg);
}

.review-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border-medium);
}

/* Review ticket banner — ticket # + status + date */
.review-ticket-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.review-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-ticket-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}

.review-status-pill {
  padding: 4px 12px;
  border-radius: 20px;
  border: 2px solid rgba(255,255,255,0.4);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.review-status-pill:hover,
.review-status-pill:focus {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
  outline: none;
}

.review-status-draft {
  background-color: #FEF3C7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2392400E'/%3E%3C/svg%3E");
  color: #92400E;
  border-color: #F59E0B;
}

.review-status-ready {
  background-color: #D1FAE5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23065F46'/%3E%3C/svg%3E");
  color: #065F46;
  border-color: #10B981;
}

.review-banner-right {
  display: flex;
  align-items: center;
}

.review-date-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 5px 10px;
  font-size: 0.85rem;
  font-weight: 500;
}

.review-date-input:focus {
  outline: none;
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.25);
}

.review-date-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Key fields — Customer + Job */
.review-key-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.review-key-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-key-field label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.review-key-field label .material-icons {
  font-size: 14px;
  color: var(--brand-blue);
}

.review-key-field select,
.review-key-field input[type="text"] {
  padding: 10px 12px;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.review-key-field select:focus,
.review-key-field input[type="text"]:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* Job details collapsible card */
.review-details-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
}

.review-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-elevated);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
  transition: background 0.15s;
}

.review-details-header:hover {
  background: #E2E8F0;
}

.review-details-header > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}

.review-details-header .material-icons {
  font-size: 16px;
}

.review-details-chevron {
  transition: transform 0.2s;
}

.review-details-card.collapsed .review-details-chevron {
  transform: rotate(180deg);
}

.review-details-card.collapsed .review-details-body {
  display: none;
}

.review-details-body {
  padding: 12px 14px;
}

/* Auto-expanding textarea for per-asset notes */
.textarea-auto-expand {
  resize: none;
  overflow: hidden;
  min-height: 38px;
  transition: height 0.1s ease;
}

.review-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm) var(--spacing-md);
}

.review-details-grid .form-group {
  margin-bottom: 0;
}

.review-details-grid label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.review-details-grid input {
  padding: 7px 10px;
  font-size: 0.875rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-primary);
}

.review-details-grid input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.billing-lines-table .review-input {
  width: 90px;
  padding: 4px 6px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  text-align: right;
  background: #fff;
  color: var(--text-primary);
}

.billing-lines-table .review-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.review-time-edit {
  padding: 2px !important;
  min-width: auto !important;
  width: 22px !important;
  height: 22px !important;
  opacity: 0.4;
  vertical-align: middle;
  margin-left: 2px;
}

.review-time-edit:hover {
  opacity: 1;
}

.review-time-edit .material-icons {
  font-size: 14px !important;
  color: var(--text-secondary);
}

.review-time-input {
  width: 160px;
  padding: 4px 6px;
  border: 1px solid var(--brand-blue);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  background: #fff;
  color: var(--text-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.review-time-display {
  white-space: nowrap;
}

.billing-lines-table .review-select {
  min-width: 120px;
  padding: 4px 6px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  background: #fff;
  color: var(--text-primary);
}

.billing-lines-table .review-select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* legacy — kept for compatibility, no longer rendered */

.review-grand-total {
  background: var(--brand-navy);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-lg);
}

.review-grand-total .review-gt-label {
  font-weight: 700;
  font-size: 1.125rem;
  color: #fff;
}

.review-grand-total .review-gt-amount {
  font-weight: 800;
  font-size: 1.5rem;
  color: #fff;
}

.review-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--spacing-sm);
  padding: 4px 12px;
  font-size: 0.8125rem;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.review-add-btn:hover {
  background: var(--bg-hover);
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.review-info-card {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  color: var(--text-primary);
  font-size: 0.8125rem;
}

.badge-active-shift {
  display: inline-block;
  background: #DCFCE7;
  color: #166534;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  #review-ticket-modal-content {
    max-width: 100%;
  }

  .review-key-fields {
    grid-template-columns: 1fr;
  }

  .review-details-grid {
    grid-template-columns: 1fr;
  }

  .review-ticket-banner {
    flex-wrap: wrap;
    gap: 8px;
  }

  .billing-lines-table .review-input {
    width: 72px;
  }

  .billing-lines-table .review-select {
    min-width: 100px;
  }
}

/* Clock-Out Summary */
.clock-out-summary {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.clock-out-summary .summary-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.clock-out-summary .summary-row strong {
  color: var(--text-primary);
}

/* Clock-Out Section Headers */
.clock-out-section h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Workforce View */
.workforce-view {
  padding: var(--spacing-lg);
}

.workforce-pills {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}

/* Workforce Export / Print action buttons — warm & friendly */
.wf-action-btn {
  background: #fff;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.wf-action-btn:hover {
  background: #EFF6FF;
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.12);
}

.wf-action-btn--export {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: #fff;
  border-color: #3B82F6;
}

.wf-action-btn--export:hover {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #fff;
  border-color: #2563EB;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.workforce-section {
  margin-bottom: var(--spacing-lg);
}

.workforce-section h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-sm);
}

.workforce-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-light);
}

.workforce-row:last-child {
  border-bottom: none;
}

/* Weekly Hours Table in Workforce */
.weekly-hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.weekly-hours-table th,
.weekly-hours-table td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
}

.weekly-hours-table th {
  background: var(--bg-elevated);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.weekly-hours-table td:first-child {
  text-align: left;
  font-weight: 500;
}

.weekly-hours-table .ot-cell {
  color: #EF4444;
  font-weight: 600;
}

/* Zebra striping & hover */
.weekly-hours-table tbody tr:nth-child(even) {
  background: var(--bg-elevated);
}
.weekly-hours-table tbody tr:hover {
  background: rgba(59,130,246,0.04);
}

/* Name cell — clickable */
.weekly-hours-table .wh-name-cell {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

/* Reg column */
.weekly-hours-table .wh-reg-cell {
  font-weight: 600;
  color: var(--text-primary);
}

/* OT red background tint */
.weekly-hours-table .wh-ot-bg {
  color: #EF4444;
  font-weight: 600;
  background: rgba(239,68,68,0.06);
}
.weekly-hours-table .wh-zero-ot {
  color: var(--text-secondary);
}

/* Today column highlight */
.weekly-hours-table .wh-today {
  background: rgba(59,130,246,0.05);
  font-weight: 700;
}
.weekly-hours-table thead .wh-today {
  color: var(--brand-blue);
}

/* Totals footer row */
.weekly-hours-table .wh-totals-row {
  border-top: 2px solid var(--border-medium);
}
.weekly-hours-table .wh-totals-cell {
  font-weight: 700;
  color: var(--text-primary);
}

/* Search input */
.wh-search-wrap {
  position: relative;
  margin-bottom: 8px;
  max-width: 300px;
}
.wh-search-icon {
  display: none;
}
.wh-search-input {
  width: 100%;
  padding: 7px 12px 7px 34px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' width='18' viewBox='0 0 24 24' fill='%23475569'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 10px center;
  outline: none;
  transition: border-color 0.15s;
  position: relative;
  z-index: 1;
}
.wh-search-input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
}
.wh-search-input::placeholder {
  color: var(--text-secondary);
}

/* Stats bar */
.wh-stats-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.wh-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
}
.wh-stat-pill strong {
  font-weight: 700;
}
.wh-stat-pill.wh-stat-ot {
  color: #EF4444;
  background: rgba(239,68,68,0.06);
  border-color: rgba(239,68,68,0.2);
}

@media (max-width: 768px) {
  .billing-lines-table th,
  .billing-lines-table td {
    padding: 6px 6px;
    font-size: 0.8125rem;
  }

  .weekly-hours-table {
    font-size: 0.75rem;
  }

  .weekly-hours-table th,
  .weekly-hours-table td {
    padding: 4px 4px;
  }
}

@media (max-width: 640px) {
  .wh-search-wrap {
    max-width: 100%;
  }
}

/* ============================================ */
/*   BILLING — COMPANY INFO CONTACT ROWS        */
/* ============================================ */

.billing-contact-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.billing-contact-row select {
  width: 110px;
}

.billing-contact-row input {
  flex: 1;
}

/* ============================================ */
/*   WORKFORCE HOURS — CARD UI                  */
/* ============================================ */

/* Stat cards grid */
.wf-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.wf-stat-card {
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--brand-blue);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wf-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.wf-stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wf-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Section headers */
.wf-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--spacing-sm);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.wf-section-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.4;
}

/* Card list container */
.wf-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Employee card row */
.wf-employee-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wf-employee-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Avatar circle */
.wf-employee-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* Info block */
.wf-employee-info {
  flex: 1;
  min-width: 0;
}

.wf-employee-name {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-employee-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Time block (right side) */
.wf-time-block {
  text-align: right;
  flex-shrink: 0;
}

.wf-time-duration {
  font-weight: 600;
}

.wf-time-detail {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Action buttons */
.wf-card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Weekly table mini avatar */
.wf-name-cell-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--brand-blue);
}

.wf-name-cell-inner:hover {
  text-decoration: underline;
}

.wf-table-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 0.625rem;
  flex-shrink: 0;
}

/* Mobile overrides */
@media (max-width: 768px) {
  .wf-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wf-employee-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }

  .wf-employee-card {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .wf-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs);
  }

  .wf-stat-card {
    padding: var(--spacing-sm);
  }

  .wf-stat-value {
    font-size: 1.25rem;
  }

  .wf-employee-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .wf-employee-meta {
    font-size: 0.75rem;
  }

  .wf-table-avatar {
    width: 20px;
    height: 20px;
    font-size: 0.55rem;
  }
}

/* ============================================ */
/*   BILLING CALENDAR                           */
/* ============================================ */

.billing-calendar-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  margin-bottom: var(--spacing-md);
}

.billing-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 6px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.billing-month-nav .btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.billing-month-nav .btn-icon:hover {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}

.billing-month-nav .btn-icon .material-icons {
  font-size: 1.5rem;
}

.billing-month-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 180px;
  text-align: center;
}

.billing-calendar-filters {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.billing-customer-filter-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  cursor: pointer;
}
.billing-customer-filter-wrap:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 2px 8px rgba(59,130,246,0.15);
}
.billing-customer-filter-wrap.active-filter {
  border-color: var(--brand-blue);
  background: #EFF6FF;
}
.billing-customer-filter-wrap.active-filter .billing-filter-icon {
  color: var(--brand-blue);
}
.billing-filter-icon {
  font-size: 20px;
  color: var(--text-secondary);
  pointer-events: none;
}
/* Customer label in filter trigger */
.billing-customer-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.bcf-chevron {
  font-size: 18px;
  color: var(--text-secondary);
  margin-left: -2px;
  transition: transform 0.2s;
  pointer-events: none;
}
.billing-customer-filter-wrap {
  position: relative;
}

/* Custom dropdown panel */
.bcf-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  max-width: 320px;
  background: #fff;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 200;
  overflow: hidden;
}
.bcf-dropdown.hidden {
  display: none;
}

/* Search inside dropdown */
.bcf-search-wrap {
  position: relative;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
}
.bcf-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--text-secondary);
  pointer-events: none;
  z-index: 1;
}
.bcf-search-input {
  width: 100%;
  padding: 7px 10px 7px 32px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--bg-elevated);
  outline: none;
}
.bcf-search-input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
}
.bcf-search-input::placeholder {
  color: var(--text-secondary);
}

/* Options list */
.bcf-options {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
}
.bcf-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.1s;
}
.bcf-option:hover {
  background: rgba(59,130,246,0.06);
}
.bcf-option .bcf-check {
  font-size: 16px;
  color: transparent;
  flex-shrink: 0;
}
.bcf-option.bcf-selected {
  font-weight: 600;
  color: var(--brand-blue);
}
.bcf-option.bcf-selected .bcf-check {
  color: var(--brand-blue);
}

/* Daily date nav bar */
.daily-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 16px;
  background: linear-gradient(to bottom, #F8FAFC, #EFF3F8);
  border-bottom: 1px solid var(--border-light);
}
.daily-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  background: #fff;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.daily-nav-arrow:hover {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}
.daily-nav-arrow .material-icons {
  font-size: 20px;
}
.daily-nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 160px;
  position: relative;
}
.daily-nav-day {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.2;
}
.daily-nav-date {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.3;
}
.daily-nav-today {
  margin-left: 8px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-blue);
  background: #EFF6FF;
  border: 1px solid var(--brand-blue);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.daily-nav-today:hover {
  background: var(--brand-blue);
  color: #fff;
}

/* Ticket list customer multi-select filter */
.tcf-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-light);
  background: #FAFBFC;
  position: relative;
}
.tcf-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.tcf-trigger:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.tcf-trigger.tcf-active {
  border-color: var(--brand-blue);
  background: #EFF6FF;
  color: var(--brand-blue);
  font-weight: 600;
}
.tcf-chevron { font-size: 18px; transition: transform 0.2s; }
.tcf-label { white-space: nowrap; }

/* Selected chips row */
.tcf-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.tcf-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--brand-blue);
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 12px;
  white-space: nowrap;
}
.tcf-chip button {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--brand-blue);
  opacity: 0.6;
}
.tcf-chip button:hover { opacity: 1; }
.tcf-chip button .material-icons { font-size: 13px; }
.tcf-clear {
  font-size: 0.7rem;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 4px;
}
.tcf-clear:hover { color: var(--status-danger); }

/* Dropdown panel */
.tcf-dropdown {
  position: absolute;
  top: 100%;
  left: 16px;
  margin-top: 4px;
  width: 280px;
  background: #fff;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 200;
  overflow: hidden;
}
.tcf-dropdown.hidden { display: none; }
.tcf-search-wrap {
  position: relative;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
}
.tcf-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--text-secondary);
  pointer-events: none;
  z-index: 1;
}
.tcf-search-input {
  width: 100%;
  padding: 7px 10px 7px 32px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text-primary);
  background: var(--bg-elevated);
  outline: none;
}
.tcf-search-input:focus { border-color: var(--brand-blue); }
.tcf-options {
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}
.tcf-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 0.8rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.1s;
}
.tcf-option:hover { background: rgba(59,130,246,0.06); }
.tcf-option input[type="checkbox"] {
  accent-color: var(--brand-blue);
  cursor: pointer;
  flex-shrink: 0;
}

.billing-month-view {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--border-light);
  margin-left: calc(-1 * var(--spacing-xl));
  margin-right: calc(-1 * var(--spacing-xl));
}

.billing-month-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--brand-navy);
}

.billing-weekday {
  padding: 10px 4px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.billing-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.billing-month-day {
  background: var(--bg-primary);
  min-height: 220px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  border-right: 2px solid var(--border-medium);
  border-bottom: 2px solid var(--border-medium);
}

.billing-month-day:nth-child(7n) {
  border-right: none;
}

.billing-month-day.empty {
  background: var(--bg-secondary);
  min-height: 50px;
}

.billing-month-day.today {
  background: #EFF6FF;
}

.billing-day-num {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 2px 4px;
  line-height: 1;
  margin-bottom: 2px;
}

.billing-day-num.today {
  background: var(--brand-blue);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}

.billing-job-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  min-height: 28px;
  transition: opacity 0.15s;
}

.billing-job-pill:hover {
  opacity: 0.85;
}

.billing-job-pill.invoiced {
  position: relative;
  opacity: 0.65;
  border: 1.5px solid rgba(255,255,255,0.5);
}
.billing-job-pill.invoiced::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.18) 3px,
    rgba(255,255,255,0.18) 6px
  );
  pointer-events: none;
}

.billing-job-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.billing-job-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  line-height: 1.3;
}

.billing-job-time {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
  flex-shrink: 0;
}

.billing-timeoff-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 5px;
  background: #F97316;
  overflow: hidden;
  min-height: 26px;
}

.billing-timeoff-pill .billing-job-name {
  color: #fff;
}

.billing-more-link {
  font-size: 0.75rem;
  color: var(--brand-blue);
  font-weight: 600;
  padding: 2px 4px;
  cursor: default;
}

.billing-ticket-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: 10px 14px;
  margin-bottom: var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Billing overflow menu (mobile) */
.billing-overflow-wrap {
  display: none;
  position: relative;
}
.billing-overflow-btn {
  padding: 6px !important;
  min-width: unset !important;
  font-size: 0 !important;
}
.billing-overflow-btn .material-icons {
  font-size: 20px;
  margin: 0;
}
.billing-overflow-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  margin-top: 4px;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  overflow: hidden;
}
.billing-overflow-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: #fff;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.billing-overflow-dropdown button:hover {
  background: var(--bg-secondary);
}
.billing-overflow-dropdown button .material-icons {
  font-size: 18px;
  color: var(--text-secondary);
}

/* Billing view bar (desktop: centered pills, bar actions hidden) */
.billing-view-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
}
.billing-view-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}
.billing-bar-actions {
  display: none;
}

/* Billing search wrap */
.billing-search-wrap {
  padding: 10px 16px 0;
}
.billing-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.billing-archived-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Permit attachment UI */
.permit-attach-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.permit-attach-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .billing-calendar-controls {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .billing-month-nav {
    justify-content: center;
    gap: 4px;
    padding: 4px 12px;
  }

  .billing-month-nav button {
    padding: 4px;
    min-width: unset;
  }

  .billing-calendar-filters {
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
  }

  .billing-customer-filter-wrap {
    flex: 1;
    max-width: 100%;
  }
  .billing-customer-label {
    max-width: 140px;
  }
  .bcf-dropdown {
    min-width: 220px;
    right: 0;
    left: auto;
  }

  .billing-month-view {
    margin: 0 -8px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-bottom: 70px;
  }

  .billing-month-day {
    min-height: 90px;
    padding: 2px;
    border-right-width: 1px;
    border-bottom-width: 1px;
  }

  .billing-month-day.empty {
    min-height: 20px;
  }

  .billing-day-num {
    font-size: 0.7rem;
  }

  .billing-day-num.today {
    width: 20px;
    height: 20px;
    font-size: 0.65rem;
  }

  .billing-job-pill {
    padding: 1px 3px;
    min-height: 16px;
    gap: 2px;
    border-radius: 3px;
  }

  .billing-job-dot {
    width: 5px;
    height: 5px;
  }

  .billing-job-name {
    font-size: 0.55rem;
  }

  .billing-job-time {
    display: none;
  }

  .billing-timeoff-pill {
    padding: 1px 3px;
    min-height: 16px;
    gap: 2px;
    border-radius: 3px;
  }

  .billing-more-link {
    font-size: 0.6rem;
  }

  .billing-weekday {
    font-size: 0.6rem;
    padding: 6px 1px;
    letter-spacing: 0;
  }

  .billing-month-title {
    font-size: 1.125rem;
    min-width: 140px;
  }

  /* Billing mobile: overflow menu + hide text buttons */
  .billing-overflow-wrap {
    display: block !important;
  }
  .billing-action-secondary {
    display: none !important;
  }
  /* Force-hide secondary buttons in case specificity loses */
  .tickets-view .view-actions .billing-action-secondary {
    display: none !important;
  }

  .billing-ticket-filter-bar {
    flex-wrap: wrap;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 4px 0;
    margin-bottom: 4px;
    gap: 8px;
    justify-content: flex-start;
  }
  .billing-ticket-filter-bar .btn-sm {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
  .billing-ticket-filter-bar > span,
  .billing-ticket-filter-bar > strong {
    font-size: 0.8rem !important;
  }

  .tickets-filters--mobile {
    margin-bottom: 8px;
  }

  .tcf-bar {
    background: none;
    border-bottom: none;
    padding: 4px 0;
  }

  .billing-search-wrap {
    padding: 4px 0;
  }
  .billing-search-wrap input[type="text"] {
    padding: 8px 14px 8px 40px !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
  }

  #billing-view-pills {
    margin-top: 0;
    margin-bottom: 2px;
  }

  /* Line Items modal mobile: stack dropdowns */
  #modal-billing-lineitems .input-with-action {
    min-width: 0;
  }

  #modal-billing-lineitems .input-with-action select {
    font-size: 14px;
  }

  /* Billing header: show small logo, center company name on mobile */
  .billing-logo-upload {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    border-radius: 10px !important;
  }
  .billing-logo-edit-badge {
    width: 22px;
    height: 22px;
    bottom: -4px;
    left: -4px;
  }
  .billing-logo-edit-badge .material-icons {
    font-size: 12px;
  }

  #billing-header-company-detail {
    display: none !important;
  }

  .tickets-view > .view-header .view-title {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }

  .tickets-view > .view-header {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 4px;
    padding: 0;
  }

  .tickets-view > .view-header .view-title {
    gap: 6px;
    min-width: 0;
  }

  .tickets-view > .view-header .view-title h1 {
    font-size: 1.1rem;
    margin: 0;
  }

  .tickets-view > .view-header .view-actions {
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: flex-end;
  }

  /* Icon-only buttons on mobile billing header */
  .tickets-view > .view-header .view-actions .btn {
    padding: 6px 8px;
    font-size: 0 !important;
    min-width: unset;
  }

  .tickets-view > .view-header .view-actions .btn .material-icons {
    font-size: 18px;
    margin: 0;
  }

  /* New Ticket also icon-only on mobile to prevent overflow */
  .tickets-view > .view-header .view-actions .btn-primary {
    font-size: 0 !important;
    padding: 6px 8px;
  }

  /* Billing view bar: pills centered, + and ... on right */
  .billing-view-bar {
    padding: 0;
    margin-bottom: 4px;
  }
  .billing-view-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
  }
  .billing-bar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .billing-bar-add {
    padding: 6px 10px !important;
    font-size: 0 !important;
    min-width: unset !important;
    border-radius: 10px;
  }
  .billing-bar-add .material-icons {
    font-size: 20px;
    margin: 0;
  }
  .billing-bar-overflow .billing-overflow-btn {
    padding: 6px 6px !important;
    min-width: unset !important;
    border-radius: 10px;
  }
  .billing-bar-overflow .billing-overflow-btn .material-icons {
    font-size: 20px;
  }

  /* Hide the original header actions row on mobile */
  .tickets-view > .view-header .view-actions {
    display: none !important;
  }

  #billing-view-pills .view-toggle {
    padding: 2px;
  }

  #billing-view-pills .view-btn {
    padding: 4px 12px;
  }

  .billing-calendar-controls {
    gap: 2px;
    padding: 0;
    margin-bottom: 4px;
  }

  .billing-calendar-filters {
    gap: 6px;
  }

  /* Billing ticket list: show compact strip, hide redundant desktop rows */
  .billing-mobile-compact {
    display: block !important;
  }
  .billing-ticket-filter-bar {
    display: none !important;
  }
  .tcf-bar {
    display: none !important;
  }
  .billing-search-wrap {
    display: none !important;
  }
  /* Show filter pills on mobile (override general hide at line 20353) */
  .tickets-filters--desktop {
    display: flex !important;
    gap: 4px;
    padding: 2px;
    margin-bottom: 6px;
  }
  .tickets-filters--desktop .filter-btn {
    padding: 5px 10px;
    font-size: 0.7rem;
    gap: 3px;
  }
  .tickets-filters--desktop .filter-btn .material-icons {
    font-size: 14px;
  }
  .tickets-filters--desktop .billing-export-btn {
    display: none !important;
  }
  .tickets-filters--mobile {
    display: none !important;
  }
}

/* Billing mobile-compact: merged filter/search strip */
.billing-mobile-compact {
  display: none;
}

.billing-mc-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.billing-mc-back {
  padding: 4px 6px !important;
  min-width: unset !important;
  flex-shrink: 0;
}
.billing-mc-back .material-icons { margin: 0; }

.billing-mc-filter {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  background: #fff;
  cursor: pointer;
}

.billing-mc-company {
  flex: 1;
  min-width: 0;
  padding: 5px 8px !important;
  font-size: 0.75rem !important;
  gap: 4px !important;
}
.billing-mc-company .tcf-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-mc-export {
  padding: 4px 8px !important;
  min-width: unset !important;
  background: linear-gradient(135deg,#2E7D32,#43A047) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  flex-shrink: 0;
}

.billing-mc-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

/* Billing PWA standalone mode — compact rules only on narrow screens */
@media (display-mode: standalone) and (max-width: 768px) {
  .billing-action-secondary {
    display: none !important;
  }
  .tickets-view .view-actions .billing-action-secondary {
    display: none !important;
  }
  #billing-header-company-detail {
    display: none !important;
  }
  .billing-logo-upload {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    border-radius: 10px !important;
  }
  .billing-logo-edit-badge {
    display: none !important;
  }
  .tickets-view > .view-header .view-title {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }
  .tickets-view > .view-header .view-actions {
    display: none !important;
  }
  .billing-bar-actions {
    display: flex !important;
  }

  /* Billing ticket list: show compact strip, hide redundant desktop rows */
  .billing-mobile-compact {
    display: block !important;
  }
  .billing-ticket-filter-bar {
    display: none !important;
  }
  .tcf-bar {
    display: none !important;
  }
  .billing-search-wrap {
    display: none !important;
  }
  .tickets-filters--desktop {
    display: flex !important;
    gap: 4px;
    padding: 2px;
    margin-bottom: 6px;
  }
  .tickets-filters--desktop .filter-btn {
    padding: 5px 10px;
    font-size: 0.7rem;
    gap: 3px;
  }
  .tickets-filters--desktop .filter-btn .material-icons {
    font-size: 14px;
  }
  .tickets-filters--desktop .billing-export-btn {
    display: none !important;
  }
  .tickets-filters--mobile {
    display: none !important;
  }
}

/* ============================================ */
/*   CRM MODULE                                 */
/* ============================================ */

.crm-view {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md);
}

.crm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.crm-header h1 {
  margin: 0;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.crm-header-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
}

.crm-subtitle {
  color: var(--text-secondary);
  margin: 2px 0 0 0;
  font-size: 0.8125rem;
}

/* CRM Tabs - pill style matching maintenance */
.crm-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  padding: 4px;
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--spacing-lg) auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  border: 1px solid var(--border-light);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.crm-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px 16px;
  background: transparent;
  white-space: nowrap;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.crm-tab .material-icons {
  font-size: 20px;
}

.crm-tab:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.crm-tab.active {
  background: linear-gradient(135deg, var(--brand-blue) 0%, #2563EB 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.crm-tab.active .material-icons {
  color: #fff;
}

.crm-tab-content {
  display: none;
}

.crm-tab-content.active {
  display: block;
}

/* CRM Quick Actions */
.crm-quick-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
}

.crm-quick-action-btn {
  flex: 1;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: all 0.2s;
}

.crm-quick-action-btn:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--qa-color, var(--border-light));
}

.crm-qa-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qa-color, #3B82F6);
}

.crm-qa-icon .material-icons {
  font-size: 24px;
  color: #fff;
}

.crm-qa-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* CRM Detail Modal Header — gradient brand bar */
.crm-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--brand-navy) 0%, #1E3A5F 50%, var(--brand-blue) 100%);
  color: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.crm-detail-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.crm-detail-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.crm-detail-header-icon .material-icons {
  font-size: 22px;
  color: #fff;
}

.crm-detail-header .modal-close {
  font-size: 24px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.crm-detail-header .modal-close:hover {
  color: #fff;
}

/* CRM Detail Tabs — icon-based pills */
.crm-detail-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.crm-detail-tabs::-webkit-scrollbar {
  display: none;
}

.crm-detail-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  flex: 0 0 auto;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}

.crm-detail-tab .material-icons {
  font-size: 16px;
}

.crm-detail-tab:hover {
  color: var(--text-primary);
  background: rgba(59, 130, 246, 0.04);
}

.crm-detail-tab.active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
  background: rgba(59, 130, 246, 0.06);
}

.crm-detail-tab.active .material-icons {
  color: var(--brand-blue);
}

.crm-detail-tab-label {
  font-size: 12px;
}

.crm-detail-tab-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.crm-detail-tab.active .crm-detail-tab-count {
  background: rgba(59, 130, 246, 0.12);
  color: var(--brand-blue);
}

/* CRM Overview Cards */
.crm-overview-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}

.crm-overview-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.crm-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.crm-overview-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}

.crm-overview-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

/* CRM Contact Form (inline in detail modal) */
.crm-contact-form {
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  background: var(--bg-secondary);
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--brand-blue), var(--accent-teal)) 1;
}

.crm-contact-form-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.crm-contact-form-title .material-icons {
  font-size: 20px;
  color: var(--brand-blue);
}

/* CRM Form Section Headers (shared by contact + customer forms) */
.crm-form-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}
.crm-form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.crm-form-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.crm-form-section-title .material-icons {
  font-size: 16px;
  color: var(--brand-blue);
}

/* CRM Customer Modal — gradient header + elevated footer */
#crm-customer-modal .crm-detail-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

#crm-customer-modal .modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border-light);
  background: linear-gradient(to bottom, #F8FAFC, #fff);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
}

#crm-customer-modal .modal-footer .btn {
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#crm-customer-modal .modal-footer .btn:hover {
  transform: translateY(-1px);
}

#crm-customer-modal .modal-footer .btn-secondary {
  background: #fff;
  border: 1px solid #CBD5E1;
}

/* CRM Contacts Horizontal Strip */
.crm-contacts-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.crm-contacts-strip::-webkit-scrollbar {
  height: 4px;
}

.crm-contacts-strip::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.crm-contact-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-card);
  transition: all 0.2s;
}

.crm-contact-card:hover {
  box-shadow: var(--shadow-md);
}

.crm-contact-card-active {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.crm-contact-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.crm-contact-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-contact-card-title {
  font-size: 12px;
  color: var(--text-secondary);
}

.crm-contact-card-btn {
  padding: 3px !important;
  min-width: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
}

.crm-contact-card-btn:hover {
  color: var(--brand-blue);
  background: var(--bg-secondary);
}

.crm-contact-card-btn-del:hover {
  color: var(--danger);
}

.crm-contact-dispatch-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #3B82F6;
  background: #DBEAFE;
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 2px;
}

.crm-contact-card-details {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crm-contact-card-details div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-contact-card-notes {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CRM Stats Grid */
.crm-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.crm-stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  border: 1px solid #d1d5db;
  transition: all 0.2s;
  overflow: hidden;
  min-width: 0;
}

.crm-stat-card > div:not(.crm-stat-icon) {
  min-width: 0;
}


.crm-stat-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

.crm-stat-clickable {
  cursor: pointer;
  border: 1px solid #93c5fd;
}

.crm-stat-clickable:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 4px 16px rgba(59,130,246,0.15);
}

.crm-stat-clickable.active {
  border-color: var(--brand-blue);
  background: #EFF6FF;
  box-shadow: 0 2px 8px rgba(59,130,246,0.12);
}

.crm-stat-clickable:hover {
  border-color: var(--brand-blue);
}

.crm-stat-clickable:active {
  transform: translateY(0);
}

.crm-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.crm-stat-icon .material-icons {
  font-size: 24px;
  color: inherit;
}

.crm-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-stat-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CRM Pipeline Board */
.crm-pipeline-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.crm-pipeline-col {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.crm-pipeline-header {
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
}

.crm-pipeline-header .count-badge {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.crm-pipeline-body {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-height: 80px;
}

.crm-pipeline-card {
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  cursor: pointer;
  transition: all 0.15s;
}

.crm-pipeline-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-medium);
  transform: translateY(-1px);
}

.crm-pipeline-card-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.crm-pipeline-card-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  gap: var(--spacing-md);
}

/* CRM Customer Grid */
.crm-customer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* CRM POC Rows (Add Customer inline contacts) */
.crm-poc-row {
  padding: 10px;
  margin-bottom: 8px;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

/* CRM Multi-Row Fields (phone, email, address on customer form) */
.crm-phone-row,
.crm-email-row,
.crm-address-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.crm-phone-row .phone-label,
.crm-email-row .email-label,
.crm-address-row .addr-label {
  flex-shrink: 0;
}

/* CRM Customer Card - thick border, deep shading */
.crm-customer-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  border: 2px solid var(--border-medium);
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.crm-customer-card:hover {
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  border-color: var(--brand-blue);
  transform: translateY(-2px);
}

/* CRM Revenue Chart */
.crm-revenue-bar-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.crm-revenue-bar-label {
  min-width: 140px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-revenue-bar-track {
  flex: 1;
  height: 28px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.crm-revenue-bar-fill {
  height: 100%;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--accent-teal) 100%);
  border-radius: var(--radius-sm);
  transition: width 0.4s ease;
  min-width: 2px;
}

.crm-revenue-bar-value {
  min-width: 80px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: left;
}

/* CRM Pipeline Snapshot (compact bar on dashboard) */
.crm-pipeline-snapshot {
  display: flex;
  height: 32px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.crm-pipeline-snapshot-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  transition: flex 0.3s ease;
  min-width: 30px;
}

/* CRM Recent Activity */
.crm-recent-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border-light);
}

.crm-recent-item:last-child {
  border-bottom: none;
}

.crm-recent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.crm-recent-name {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-primary);
  flex: 1;
}

.crm-recent-time {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* CRM Filter Bar (customers tab) */
.crm-type-toggle {
  padding: 6px 14px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.crm-type-toggle.active {
  background: #fff;
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.crm-filter-bar {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  margin-bottom: var(--spacing-md);
}

.crm-filter-bar input[type="text"] {
  flex: 1;
  min-width: 200px;
  padding: 6px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg-page);
}

.crm-filter-bar input[type="text"]:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* CRM Section Card (wraps sections on dashboard) */
.crm-section-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  padding: var(--spacing-lg);
}

.crm-section-title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.crm-section-title .material-icons {
  font-size: 20px;
  color: var(--brand-blue);
}

/* CRM Mobile Responsive */
@media (max-width: 768px) {
  .crm-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  .crm-quick-action-btn {
    min-width: 0;
    padding: 14px 10px;
  }

  .crm-qa-icon {
    width: 40px;
    height: 40px;
  }

  .crm-qa-icon .material-icons {
    font-size: 20px;
  }

  .crm-view {
    padding: var(--spacing-sm);
  }

  .crm-tabs {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-md);
    padding: 3px;
    margin-bottom: 8px;
  }

  .crm-tab {
    flex: 1;
    padding: 6px 2px;
    font-size: 0.75rem;
    white-space: nowrap;
    justify-content: center;
    gap: 0;
  }

  .crm-tab .material-icons {
    display: none;
  }

  .crm-quick-actions {
    gap: 6px;
    margin-bottom: 8px;
  }

  .crm-quick-action-btn {
    padding: 8px 4px;
  }

  .crm-qa-label {
    font-size: 0.7rem;
  }

  .crm-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  .crm-stat-card {
    padding: var(--spacing-md);
  }

  .crm-stat-icon {
    width: 40px;
    height: 40px;
  }

  .crm-stat-icon .material-icons {
    font-size: 20px;
  }

  .crm-stat-value {
    font-size: 1.25rem;
  }

  .crm-pipeline-board {
    grid-template-columns: 1fr;
  }

  .crm-customer-grid {
    grid-template-columns: 1fr;
  }

  .crm-revenue-bar-label {
    min-width: 80px;
    font-size: 0.75rem;
  }

  .crm-revenue-bar-value {
    min-width: 60px;
    font-size: 0.75rem;
  }

  .crm-filter-bar {
    padding: var(--spacing-sm);
  }

  .crm-header {
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
  }

  .crm-header h1 {
    font-size: 1.25rem;
  }

  .crm-subtitle {
    display: none;
  }

  .crm-header-actions {
    width: 100%;
    display: flex;
    gap: 6px;
  }

  .crm-header-actions .crm-action-btn {
    flex: 1;
    justify-content: center;
    white-space: nowrap;
    font-size: 12px;
    padding: 7px 6px;
    gap: 4px;
  }

  .crm-header-actions .crm-action-btn .material-icons {
    font-size: 16px;
  }

  .crm-dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  .crm-contact-card {
    flex: 0 0 180px;
  }

  .crm-contact-form {
    padding: var(--spacing-sm);
  }

  .crm-contact-form .form-group label {
    font-size: 12px;
  }

  .crm-detail-header {
    padding: 12px 16px;
  }

  .crm-detail-header-icon {
    width: 34px;
    height: 34px;
  }

  .crm-detail-header-icon .material-icons {
    font-size: 18px;
  }

  #crm-detail-title {
    font-size: 1rem !important;
  }

  .crm-detail-tab {
    padding: 8px 10px;
    gap: 4px;
    flex: 1 1 0;
    justify-content: center;
  }

  .crm-detail-tab .material-icons {
    font-size: 16px;
  }

  .crm-detail-tab-label {
    font-size: 11px;
  }

  .crm-overview-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================ */
/*   CRM OPPORTUNITIES & ACTIVITIES            */
/* ============================================ */

/* Opportunity Card (per-customer list) */
.crm-opp-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: var(--spacing-sm);
}

.crm-opp-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-medium);
  transform: translateY(-1px);
}

.crm-opp-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.crm-opp-card-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.crm-opp-card-meta {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.crm-opp-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.crm-opp-asset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.crm-opp-asset-chip {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
  font-size: 0.6875rem;
  color: var(--text-primary);
  font-weight: 500;
}

/* Opportunity Chips Container (form) */
.crm-opp-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
  padding: 4px 0;
}

.crm-opp-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8125rem;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-primary);
}

.crm-opp-chip:hover {
  border-color: var(--brand-blue);
}

.crm-opp-chip.selected {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  font-weight: 600;
}

/* ============================================ */
/*   CRM ACTIVITY TIMELINE                     */
/* ============================================ */

.crm-activity-quicklog {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.crm-activity-quicklog-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: var(--bg-card);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-primary);
}

.crm-activity-quicklog-btn .material-icons {
  font-size: 16px;
  color: var(--act-color);
}

.crm-activity-quicklog-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--act-color);
}

.crm-activity-timeline {
  position: relative;
}

.crm-activity-entry {
  display: flex;
  gap: 12px;
  position: relative;
  padding-bottom: var(--spacing-md);
  cursor: pointer;
}

.crm-activity-entry.followup {
  background: rgba(239, 68, 68, 0.04);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
  margin: 0 -4px;
}

.crm-activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}

.crm-activity-line {
  position: absolute;
  left: 15px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: var(--border-light);
}

.crm-activity-content {
  flex: 1;
  min-width: 0;
}

.crm-activity-subject {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.crm-activity-outcome {
  font-size: 0.875rem;
}

.crm-activity-followup-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.08);
  color: #DC2626;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 4px;
}

.crm-activity-notes {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 4px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s;
}

.crm-activity-notes.expanded {
  max-height: 200px;
}

.crm-activity-time {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Activity Type Selector (form) */
.crm-activity-type-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-activity-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.15s;
  min-width: 70px;
  color: var(--text-primary);
}

.crm-activity-type-btn .material-icons {
  font-size: 22px;
  color: var(--act-color);
}

.crm-activity-type-btn span:last-child {
  font-size: 0.6875rem;
  font-weight: 500;
}

.crm-activity-type-btn:hover {
  border-color: var(--act-color);
}

.crm-activity-type-btn.selected {
  border-color: var(--act-color);
  background: color-mix(in srgb, var(--act-color) 8%, transparent);
}

/* ============================================ */
/*   CRM KANBAN BOARD                          */
/* ============================================ */

.crm-kanban-board {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
  padding-bottom: var(--spacing-md);
  min-height: 400px;
}

.crm-kanban-col {
  min-width: 200px;
  flex: 1;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  transition: background 0.15s;
}

.crm-kanban-col.drag-over {
  background: rgba(59, 130, 246, 0.04);
  border-color: var(--brand-blue);
}

.crm-kanban-header {
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
}

.crm-kanban-body {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: 1;
  min-height: 60px;
}

.crm-kanban-card {
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: grab;
  transition: all 0.15s;
}

.crm-kanban-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-medium);
}

.crm-kanban-card:active {
  cursor: grabbing;
  opacity: 0.7;
  transform: rotate(1deg);
}

/* CRM On Hold Section — below kanban board */
.crm-onhold-section {
  margin-top: var(--spacing-lg);
  background: var(--bg-card);
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-lg);
  transition: all 0.2s;
}
.crm-onhold-section.drag-over {
  border-color: #F97316;
  background: rgba(249, 115, 22, 0.04);
}
.crm-pipeline-stage.drag-over {
  outline: 2px dashed var(--brand-blue);
  outline-offset: -2px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.03);
}
.crm-onhold-header {
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
}
.crm-onhold-body {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.crm-onhold-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-left: 3px solid #F97316;
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: grab;
  transition: all 0.15s;
}
.crm-onhold-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-medium);
}
.crm-onhold-card:active {
  cursor: grabbing;
  opacity: 0.7;
}
.crm-onhold-card-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.crm-onhold-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  margin-left: var(--spacing-md);
}

/* ============================================ */
/*   CRM OPPORTUNITY FULL FORM                */
/* ============================================ */

.opp-form-section {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}
.opp-form-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}
.opp-form-section-header .material-icons {
  font-size: 20px;
  color: var(--brand-blue);
}
.opp-form-section-body {
  padding: 16px;
}
.opp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.opp-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.opp-form-field label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-primary);
}
.opp-form-field input[type="text"],
.opp-form-field input[type="number"],
.opp-form-field input[type="date"],
.opp-form-field select,
.opp-form-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-primary);
  background: var(--bg-page);
}
.opp-form-field textarea {
  resize: vertical;
}
.opp-form-save-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding: 16px;
  background: linear-gradient(to bottom, #F8FAFC, #fff);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
  margin: 0 -16px -16px;
}

/* Bid Builder */
.opp-bid-table {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.opp-bid-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.opp-bid-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
}
.opp-bid-line:last-of-type {
  border-bottom: none;
}
.opp-bid-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-top: 2px solid var(--border-medium);
}
.opp-bid-pick-list {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.opp-bid-pick-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.1s;
}
.opp-bid-pick-item:last-child {
  border-bottom: none;
}
.opp-bid-pick-item:hover:not(.added) {
  background: rgba(59, 130, 246, 0.04);
}
.opp-bid-pick-item.added {
  opacity: 0.5;
  cursor: default;
}

/* People & Roles */
.opp-person-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--brand-blue);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--bg-page);
}

/* Portal Steps */
.opp-portal-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}
.opp-portal-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Comments */
#crm-opp-comments-list {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.opp-comment {
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  background: var(--bg-page);
}
.opp-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 8px;
}
.opp-comment-date {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.opp-comment-body {
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.5;
}
.opp-mention {
  background: rgba(59, 130, 246, 0.1);
  color: var(--brand-blue);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
}
.opp-comment-input-wrap {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-light);
}
.opp-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}
.opp-mention-dropdown.hidden {
  display: none;
}
.opp-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary);
}
.opp-mention-item:hover {
  background: rgba(59, 130, 246, 0.06);
}

@media (max-width: 768px) {
  .opp-form-grid {
    grid-template-columns: 1fr;
  }
  .opp-bid-header {
    display: none;
  }
  .opp-bid-line {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* ============================================ */
/*   CRM DEAL DESK PANEL                      */
/* ============================================ */

/* CRM Header Action Buttons — bigger and more colorful than standard btns */
.crm-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
}
.crm-action-btn .material-icons { font-size: 18px; }

.crm-action-secondary {
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #CBD5E1;
}
.crm-action-secondary:hover {
  background: #E2E8F0;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.crm-action-accent {
  background: linear-gradient(135deg, #06B6D4, #0891B2);
  color: #fff;
  box-shadow: 0 2px 8px rgba(6,182,212,0.3);
}
.crm-action-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6,182,212,0.4);
}

.crm-action-primary {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.crm-action-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.4);
}

.crm-dealdesk-panel {
  position: fixed;
  right: 0;
  top: 0;
  width: 380px;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-card);
  border-left: 1px solid var(--border-light);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}

.crm-dealdesk-panel.hidden {
  transform: translateX(100%);
  pointer-events: none;
}

.crm-dealdesk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(to bottom, #F8FAFC, var(--bg-card));
}

.crm-dealdesk-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.crm-dealdesk-msg {
  max-width: 90%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-primary);
}

.crm-dealdesk-msg.user {
  align-self: flex-end;
  background: var(--brand-blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.crm-dealdesk-msg.bot {
  align-self: flex-start;
  background: var(--bg-elevated);
  border-bottom-left-radius: 4px;
}

.crm-dealdesk-typing span {
  animation: dealdesk-dot 1.4s infinite both;
  font-size: 1.25rem;
}

.crm-dealdesk-typing span:nth-child(2) { animation-delay: 0.2s; }
.crm-dealdesk-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dealdesk-dot {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

.crm-dealdesk-confirm {
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-light);
  background: #FFFBEB;
}

.crm-dealdesk-input {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-light);
  background: linear-gradient(to bottom, var(--bg-card), #F8FAFC);
}

.crm-dealdesk-input input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  font-size: 0.875rem;
  background: var(--bg-card);
}

.crm-dealdesk-input input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.crm-dealdesk-input button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.crm-dealdesk-input button:hover {
  background: #2563EB;
  transform: scale(1.05);
}

.crm-dealdesk-input button .material-icons {
  font-size: 20px;
}

/* Deal Desk Tables */
.crm-dealdesk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  margin-top: 8px;
}

.crm-dealdesk-table th {
  text-align: left;
  padding: 4px 6px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}

.crm-dealdesk-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}

/* Deal Desk Bars */
.crm-dealdesk-bars {
  margin-top: 8px;
}

.crm-dealdesk-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.crm-dealdesk-bar-label {
  min-width: 80px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
}

.crm-dealdesk-bar-track {
  flex: 1;
  height: 16px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.crm-dealdesk-bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.3s;
}

.crm-dealdesk-bar-value {
  min-width: 50px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ============================================ */
/*   CRM OPPORTUNITY HOLD CARDS (Dispatch)     */
/* ============================================ */

.opp-hold-card {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 4px solid;
}

.opp-hold-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.opp-hold-card-title {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.opp-hold-card-meta {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Opportunity hold pills in lanes view — dashed border to distinguish from job pills */
.lanes-mini-pill.lanes-opp-hold-pill {
  border: 1.5px dashed rgba(255,255,255,0.7);
  opacity: 0.85;
}

/* ============================================ */
/*   CRM MOBILE RESPONSIVE (New sections)      */
/* ============================================ */

@media (max-width: 768px) {
  .crm-kanban-board {
    gap: 8px;
  }

  .crm-kanban-col {
    min-width: 250px;
  }

  .crm-dealdesk-panel {
    width: 100%;
  }

  .crm-activity-quicklog {
    gap: 4px;
  }

  .crm-activity-quicklog-btn {
    padding: 5px 10px;
    font-size: 0.75rem;
  }

  .crm-activity-type-selector {
    gap: 4px;
  }

  .crm-activity-type-btn {
    min-width: 60px;
    padding: 6px 8px;
  }

  .crm-opp-card-top {
    flex-direction: column;
    gap: 6px;
  }
}

/* CRM Tasks */
.crm-task-badge {
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  margin-left: 4px;
  vertical-align: middle;
}

.crm-tasks-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-tasks-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.crm-tasks-filter-pill:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.crm-tasks-filter-pill.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

.crm-task-pill-count {
  background: rgba(255,255,255,0.25);
  border-radius: 10px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

.crm-tasks-filter-pill:not(.active) .crm-task-pill-count {
  background: var(--bg-page);
  color: var(--text-secondary);
}

.crm-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-task-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: 10px;
  border-left: 4px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.15s ease;
}

.crm-task-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.crm-task-card.overdue {
  border-left-color: #EF4444;
  background: #FEF2F2;
}

.crm-task-card.due-today {
  border-left-color: #F59E0B;
}

.crm-task-card.snoozed {
  border-left-color: #94A3B8;
  opacity: 0.7;
}

.crm-task-card.completed {
  border-left-color: #10B981;
  opacity: 0.6;
}

.crm-task-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.crm-task-icon .material-icons {
  font-size: 20px;
}

.crm-task-body {
  flex: 1;
  min-width: 0;
}

.crm-task-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.crm-task-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.crm-task-due-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 4px;
}

.crm-task-due-badge.overdue {
  background: #FEE2E2;
  color: #DC2626;
}

.crm-task-due-badge.today {
  background: #FEF3C7;
  color: #D97706;
}

.crm-task-due-badge.snoozed {
  background: #F1F5F9;
  color: #64748B;
}

.crm-task-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.crm-task-actions .btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.crm-task-actions .btn-icon:hover {
  background: var(--bg-page);
}

.crm-task-actions .btn-icon .material-icons {
  font-size: 20px;
}

/* Snooze popup menu */
.crm-snooze-menu {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  overflow: hidden;
  min-width: 140px;
}

.crm-snooze-menu button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease;
}

.crm-snooze-menu button:hover {
  background: var(--bg-page);
}

.crm-snooze-menu button:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

/* CRM Tasks login banner */
.crm-tasks-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(135deg, #0EA5E9, #06B6D4);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.crm-tasks-banner .material-icons {
  font-size: 20px;
  color: #fff;
}

.crm-tasks-banner .btn {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.crm-tasks-banner .btn:hover {
  background: rgba(255,255,255,0.35);
}

.crm-tasks-banner .btn-icon {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

body.has-crm-banner #sidebar,
body.has-crm-banner #main-content {
  margin-top: 44px;
}

@media (max-width: 768px) {
  .crm-task-card {
    flex-wrap: wrap;
  }
  .crm-task-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
  }
}

/* ============================================
   SMART ASSISTANT WARNINGS
   Inline data quality warnings below form inputs
   ============================================ */

.smart-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.75rem;
  line-height: 1.4;
  animation: saFadeIn 0.2s ease-out;
  border: 1px solid transparent;
}

.smart-warning--duplicate {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
  color: #991B1B;
}

.smart-warning--similar {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.2);
  color: #92400E;
}

.smart-warning--format {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
  color: #1E40AF;
}

.smart-warning-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.smart-warning--duplicate .smart-warning-icon { color: #DC2626; }
.smart-warning--similar .smart-warning-icon { color: #D97706; }
.smart-warning--format .smart-warning-icon { color: #3B82F6; }

.smart-warning-text {
  flex: 1;
  min-width: 0;
}

.smart-warning-action {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  flex-shrink: 0;
  color: inherit;
}

.smart-warning-action:hover {
  opacity: 0.8;
}

.smart-warning-dismiss {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  flex-shrink: 0;
  color: inherit;
}

.smart-warning-dismiss:hover {
  opacity: 1;
}

@keyframes saFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.sa-focus-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  margin-bottom: 4px;
  background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(6,182,212,0.1));
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #3B82F6;
  pointer-events: none;
  animation: saFadeIn 0.15s ease-out;
  letter-spacing: 0.02em;
}

.sa-focus-badge .material-icons {
  color: #06B6D4;
}

/* ============================================
   FIELD TICKET v2 — Tooltips, Signatures, Stamps
   ============================================ */
.ft-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-secondary);
}
.ft-tooltip .ft-tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-navy);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 100;
  transition: opacity 0.2s;
  pointer-events: none;
}
.ft-tooltip:hover .ft-tooltip-text,
.ft-tooltip:focus .ft-tooltip-text {
  visibility: visible;
  opacity: 1;
}
@media (max-width: 768px) {
  .ft-tooltip .ft-tooltip-text { white-space: normal; max-width: 200px; }
}

/* Signature canvas */
.sig-canvas-wrap {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: #fff;
  position: relative;
  touch-action: none;
}
.sig-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 120px;
  cursor: crosshair;
}
.sig-canvas-wrap .sig-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}
.sig-canvas-wrap.signed .sig-placeholder { display: none; }
.sig-canvas-wrap.na { border-color: var(--text-muted); opacity: 0.5; }

/* Stamp photo preview */
.stamp-preview {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

/* Field ticket item row */
.ft-item-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.ft-item-row:last-child { border-bottom: none; }
.ft-item-row .ft-item-label {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.ft-item-row .ft-item-rate {
  font-size: 0.8rem;
  color: var(--text-secondary);
  min-width: 70px;
  text-align: right;
}
.ft-item-row input[type="number"] {
  width: 70px;
  padding: 4px 8px;
  font-size: 0.9rem;
  text-align: center;
}

/* ============================================
   DEMO → TRIAL CONVERSION CTAs
   ============================================ */

/* Sidebar Trial CTA */
.sidebar-trial-cta {
  padding: 8px 12px 4px;
}

.btn-sidebar-trial {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--brand-blue), var(--accent-teal));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-sidebar-trial:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-sidebar-trial .material-icons {
  font-size: 18px;
}

/* Demo Trial Banner (mobile top banner) */
.demo-trial-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: linear-gradient(135deg, #0F172A, #1E3A5F);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  min-height: 40px;
}

.demo-trial-banner.hidden {
  display: none;
}

/* Trial FAB */
.trial-fab {
  position: fixed;
  bottom: 90px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--brand-blue), var(--accent-teal));
  color: white;
  border: none;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 1000;
  transition: all 0.3s ease;
  animation: trial-fab-pulse 2s infinite;
}

.trial-fab:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
}

.trial-fab .material-icons {
  font-size: 20px;
}

@keyframes trial-fab-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4); }
  50% { box-shadow: 0 4px 30px rgba(59, 130, 246, 0.6); }
}

/* Demo Signup Modal */
.demo-signup-modal {
  max-width: 440px;
  width: calc(100% - 32px);
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
}

.demo-signup-modal .sales-lead-row {
  margin-bottom: 12px;
}

.demo-signup-modal .sales-lead-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: block;
}

.demo-signup-modal .sales-lead-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 0.9rem;
  transition: border-color 0.2s;
  color: var(--text-primary);
  background: #fff;
}

.demo-signup-modal .sales-lead-field input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Mobile adjustments for trial elements */
@media (max-width: 768px) {
  .trial-fab {
    bottom: 144px;
    right: 16px;
    padding: 10px 14px;
  }

  .trial-fab-label {
    display: none;
  }

  .trial-fab .material-icons {
    font-size: 22px;
  }

  .demo-signup-modal {
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }

  .demo-signup-modal .modal-header {
    border-radius: 0 !important;
  }
}

/* Desktop: hide banner (sidebar CTA is visible instead) */
@media (min-width: 769px) {
  .demo-trial-banner {
    display: none !important;
  }
}

/* =============================================================================
   SMS Credit Meter Component
   ============================================================================= */

.sms-credit-meter {
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
}

.sms-credit-meter.compact {
  padding: 10px 14px;
}

.sms-credit-meter.large {
  padding: 16px 20px;
}

.sms-meter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}

.sms-meter-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sms-meter-label .material-icons {
  font-size: 16px;
  color: var(--brand-blue);
}

.sms-meter-amount {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.sms-meter-bar-wrap {
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
}

.sms-credit-meter.compact .sms-meter-bar-wrap {
  height: 8px;
  background: #E2E8F0;
}

.sms-credit-meter.large .sms-meter-bar-wrap {
  height: 16px;
  background: #E2E8F0;
}

.sms-meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease, background 0.3s ease;
  min-width: 2px;
}

.sms-meter-fill.meter-green {
  background: linear-gradient(90deg, #059669, #10B981);
}

.sms-meter-fill.meter-yellow {
  background: linear-gradient(90deg, #D97706, #F59E0B);
}

.sms-meter-fill.meter-red {
  background: linear-gradient(90deg, #DC2626, #EF4444);
}

.sms-meter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  gap: 8px;
  flex-wrap: wrap;
}

.sms-meter-messages {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.sms-meter-cta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-blue);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
}

.sms-meter-cta:hover {
  color: var(--brand-blue-dark);
}

/* Badges */
.badge-unlimited {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--brand-blue), var(--accent-teal));
  color: #fff;
}

.badge-promo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.sms-meter-exhausted {
  background: #FEF2F2;
  border-color: #FECACA;
}

.sms-meter-exhausted .sms-meter-label .material-icons {
  color: var(--status-danger);
}

/* Founder unlimited variant */
.sms-meter-unlimited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sms-meter-unlimited .sms-meter-stat {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.sms-meter-unlimited .sms-meter-stat strong {
  color: var(--text-primary);
}

/* =============================================================================
   Account Management View
   ============================================================================= */

.account-view {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

.account-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.account-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-section-title .material-icons {
  font-size: 20px;
  color: var(--brand-blue);
}

.account-plan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.account-plan-info {
  flex: 1;
  min-width: 200px;
}

.account-plan-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.account-plan-price {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.account-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 6px;
}

.account-plan-badge.badge-active {
  background: #ECFDF5;
  color: #059669;
}

.account-plan-badge.badge-trial {
  background: #FEF3C7;
  color: #92400E;
}

.account-plan-badge.badge-founder {
  background: linear-gradient(135deg, var(--brand-blue), var(--accent-teal));
  color: #fff;
}

.account-addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-md);
}

.account-addon-card {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-addon-card.addon-active {
  border-color: #A7F3D0;
  background: #F0FDF4;
}

.account-addon-card.addon-coming-soon {
  opacity: 0.6;
}

.account-addon-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-addon-price {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.account-addon-status {
  font-size: 0.75rem;
  font-weight: 600;
}

.account-addon-status.status-active {
  color: #059669;
}

.account-addon-status.status-available {
  color: var(--brand-blue);
}

.account-addon-status.status-coming {
  color: var(--text-muted);
}

.account-info-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
}

.account-info-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.account-info-value {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 600;
}

.account-danger-zone {
  background: #FEF2F2;
  border-color: #FECACA;
}

.account-danger-zone .account-section-title .material-icons {
  color: var(--status-danger);
}

@media (max-width: 600px) {
  .account-view {
    padding: var(--spacing-md);
  }

  .account-plan-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .account-addon-grid {
    grid-template-columns: 1fr;
  }

  .account-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   MOBILE HEADER COMPACTION — Maintenance & DVIR
   Title inline with icon-only secondary buttons
   ============================================ */
@media (max-width: 768px) {
  /* --- Maintenance --- */
  .maintenance-subtitle { display: none; }

  .maintenance-header {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .maintenance-header-left {
    text-align: center;
    width: 100%;
  }
  .maintenance-header-left h1 { text-align: center; font-size: 1.25rem; }

  .maintenance-header-actions {
    flex-wrap: nowrap;
    gap: 6px;
  }

  /* Secondary buttons → icon-only */
  .maintenance-header-actions .btn-secondary {
    font-size: 0; padding: 8px; min-width: unset; width: auto;
  }
  .maintenance-header-actions .btn-secondary .material-icons {
    font-size: 20px; margin: 0;
  }

  /* Primary button → compact with text */
  .maintenance-header-actions .btn-primary {
    font-size: 0.85rem; padding: 8px 12px; width: auto;
  }

  /* --- DVIR/Pretrip --- */
  .pretrip-subtitle { display: none; }

  .pretrip-header {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .pretrip-header-left {
    text-align: center;
    width: 100%;
  }
  .pretrip-header-left h1 { font-size: 1.25rem; }

  .pretrip-header-actions {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .pretrip-header .btn { width: auto; }

  .pretrip-header-actions .btn-secondary {
    font-size: 0; padding: 8px; min-width: unset;
  }
  .pretrip-header-actions .btn-secondary .material-icons {
    font-size: 20px; margin: 0;
  }

  .pretrip-header-actions .btn-primary {
    font-size: 0.85rem; padding: 8px 12px;
  }
}

/* Hide zero-count badges globally */
.count-zero { display: none !important; }

/* ============================================
   BEREAVEMENT TIERS — Policy Editor
   ============================================ */
.bereavement-tiers-section {
  margin-top: var(--spacing-sm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  overflow: hidden;
}

.bereavement-tiers-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px var(--spacing-md);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.bereavement-tiers-header:hover {
  background: rgba(0, 0, 0, 0.03);
}

.bereavement-expand-icon {
  transition: transform 0.2s;
}

.bereavement-tiers-section.collapsed .bereavement-expand-icon {
  transform: rotate(-90deg);
}

.bereavement-tiers-section.collapsed .bereavement-tiers-body {
  display: none;
}

.bereavement-tiers-body {
  padding: 0 var(--spacing-md) var(--spacing-sm);
}

.bereavement-tier-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}

.bereavement-tier-row:last-child {
  border-bottom: none;
}

.bereavement-travel-divider {
  border-top: 2px dashed var(--border-light);
  margin: 8px 0;
}

/* Balance table — expandable bereavement toggle */
.balance-bereavement-toggle .material-icons {
  transition: transform 0.2s;
}

.balance-bereavement-toggle.expanded .material-icons {
  transform: rotate(180deg);
}

@media (max-width: 480px) {
  .bereavement-tier-row {
    flex-wrap: wrap;
  }
  .bereavement-tier-row > div:first-child {
    flex-basis: 100%;
    margin-bottom: 4px;
  }
}

/* ============================================
   INVOICE BUILDER — Split Panel Modal
   ============================================ */
.ib-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.ib-settings-panel {
  width: 40%;
  min-width: 320px;
  overflow-y: auto;
  padding: 20px;
  border-right: 1px solid var(--border-light);
  background: var(--bg-secondary);
  -webkit-overflow-scrolling: touch;
}

.ib-preview-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #E2E8F0;
}

.ib-preview-tabs {
  display: flex;
  gap: 0;
  padding: 12px 16px 0;
  flex-shrink: 0;
  background: #E2E8F0;
  border-radius: 10px 10px 0 0;
}

.ib-preview-tab {
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(0,0,0,0.06);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  margin-right: -1px;
  position: relative;
}

.ib-preview-tab.active {
  background: #fff;
  color: var(--text-primary);
  border-color: var(--border-light);
  box-shadow: 0 -2px 6px rgba(0,0,0,0.04);
  z-index: 1;
}

.ib-preview-tab:not(.active):hover {
  background: rgba(255,255,255,0.65);
  color: var(--text-primary);
}

.ib-preview-tab.disabled,
.ib-preview-tab.disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.ib-preview-frame {
  flex: 1;
  border: none;
  background: #fff;
  margin: 0 16px 16px;
  border-radius: 0 8px 8px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Settings panel sections */
.ib-section {
  margin-bottom: 20px;
}

.ib-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}

.ib-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.ib-toggle-row label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  margin: 0;
  flex: 1;
}

.ib-toggle-row input[type="checkbox"] {
  accent-color: var(--brand-blue);
  cursor: pointer;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Mode toggle (segmented control) */
.ib-mode-toggle {
  display: flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
}

.ib-mode-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ib-mode-btn.active {
  background: var(--brand-blue);
  color: #fff;
}

.ib-mode-btn:not(.active):hover {
  background: rgba(59, 130, 246, 0.08);
}

/* Column config table */
.ib-col-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ib-col-table th {
  text-align: center;
  padding: 6px 4px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--border-light);
}

.ib-col-table th:first-child {
  text-align: left;
  padding-left: 8px;
}

.ib-col-table td {
  padding: 6px 4px;
  text-align: center;
}

.ib-col-table td:first-child {
  text-align: left;
  padding-left: 8px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.ib-col-table input[type="checkbox"] {
  accent-color: var(--brand-blue);
  cursor: pointer;
}

/* Save bar */
.ib-save-bar {
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
  background: linear-gradient(to bottom, #F8FAFC, #fff);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
  flex-shrink: 0;
}

.ib-save-warning {
  font-size: 12px;
  color: #B45309;
  background: #FEF3C7;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ib-save-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Customer/contract picker */
.ib-picker {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ib-picker select {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-primary);
}

/* Loading overlay for preview */
.ib-preview-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
  font-size: 14px;
  gap: 8px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .ib-layout {
    flex-direction: column;
  }

  .ib-settings-panel {
    width: 100%;
    min-width: unset;
    max-height: 50dvh;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  .ib-preview-panel {
    min-height: 40dvh;
  }

  .ib-preview-frame {
    margin: 0 8px 8px;
  }

  .ib-preview-tabs {
    padding: 8px 8px 0;
  }
}

/* ============================================
   TICKET BUILDER
   ============================================ */
.tb-editor {
  flex: 1;
  overflow: hidden;
  background: #F1F5F9;
}

.tb-preview-scroll {
  padding: 16px;
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Dark header card (matches driver clock-out) */
.tb-header-card {
  background: linear-gradient(135deg, #1E293B, #0F172A);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  color: #fff;
}

.tb-header-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
}

.tb-header-close:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.tb-header-times {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}

.tb-header-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.tb-header-time-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.5);
}

.tb-header-time-value {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tb-time-green { color: #34D399; }
.tb-time-red { color: #F87171; }

.tb-header-hours {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.tb-header-hours strong {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.tb-header-hours span {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-transform: lowercase;
}

.tb-header-edit {
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
}

.tb-header-edit:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.tb-header-badges {
  display: flex;
  gap: 12px;
}

.tb-header-badge {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tb-badge-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.45);
}

.tb-badge-value {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* Ticket preview total */
.tb-preview-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.tb-preview-total span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tb-preview-total strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Timeclock inputs in preview */
.tb-preview-clocks {
  display: flex;
  gap: 12px;
}

.tb-preview-clocks .tb-field {
  flex: 1;
}

/* Left panel: section rows */
.tb-section-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: grab;
  user-select: none;
}

/* Toggle switch */
.tb-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  min-width: 40px;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-block;
}

.tb-toggle input[type="checkbox"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}

.tb-toggle-slider {
  position: absolute;
  inset: 0;
  background: #CBD5E1;
  border-radius: 11px;
  transition: background 0.2s;
}

.tb-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.tb-toggle input:checked + .tb-toggle-slider {
  background: var(--brand-blue);
}

.tb-toggle input:checked + .tb-toggle-slider::before {
  transform: translateX(18px);
}

/* Piece rate rows */
.tb-pr-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tb-pr-row input,
.tb-pr-row select {
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-elevated);
}

/* Keep shared TB styles */
.tb-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.tb-header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tb-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tb-field input,
.tb-field select,
.tb-field textarea {
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.tb-field textarea {
  resize: vertical;
  font-family: inherit;
}

.tb-field input:focus,
.tb-field select:focus,
.tb-field textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.tb-line-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.tb-line-remove:hover {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

.tb-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.tb-add-btn:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: rgba(59, 130, 246, 0.05);
}

@media (max-width: 768px) {
  .tb-header-badges {
    flex-direction: column;
  }

  .tb-preview-clocks {
    flex-direction: column;
  }

  .tb-pr-row {
    flex-direction: column;
    align-items: stretch;
  }

  .tb-pr-row input,
  .tb-pr-row select {
    width: 100% !important;
  }
}

/* ============================================
   COMPLIANCE MODULE
   ============================================ */

/* Alert Bar */
.compliance-alert-bar {
  display: flex;
  gap: 10px;
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.compliance-alert-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  border: 2px solid transparent;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--bg-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.compliance-alert-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.compliance-alert-chip.active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.compliance-alert-critical {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}
.compliance-alert-critical.active {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.compliance-alert-warning {
  color: #d97706;
  border-color: #fde68a;
  background: #fffbeb;
}
.compliance-alert-warning.active {
  background: #d97706;
  color: #fff;
  border-color: #d97706;
}

.compliance-alert-good {
  color: #059669;
  border-color: #a7f3d0;
  background: #ecfdf5;
}
.compliance-alert-good.active {
  background: #059669;
  color: #fff;
  border-color: #059669;
}

.compliance-alert-count {
  font-size: 1.1rem;
  font-weight: 700;
}

.compliance-alert-label {
  font-weight: 500;
}

/* Tab Bar */
.compliance-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: var(--spacing-md);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 4px;
  overflow-x: auto;
}

.compliance-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.compliance-tab:hover:not(.disabled) {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.compliance-tab.active {
  background: var(--bg-primary);
  color: var(--brand-blue);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.compliance-tab.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.compliance-coming-soon {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--bg-elevated);
  color: var(--text-muted);
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

/* Search Bar */
.compliance-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.compliance-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  color: var(--text-primary);
  outline: none;
}

.compliance-search-input::placeholder {
  color: var(--text-muted);
}

/* Card Grid */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

@media (max-width: 1024px) {
  .compliance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .compliance-grid {
    grid-template-columns: 1fr;
  }
}

/* Card */
.compliance-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  border-top: 3px solid var(--border-light);
}

.compliance-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.compliance-card-critical {
  border-top-color: #dc2626;
}

.compliance-card-warning {
  border-top-color: #d97706;
}

.compliance-card-good {
  border-top-color: #059669;
}

.compliance-card-header {
  margin-bottom: var(--spacing-sm);
}

.compliance-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.compliance-card-role {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.compliance-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Badges */
.compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.compliance-badge-critical {
  background: #fef2f2;
  color: #dc2626;
}

.compliance-badge-warning {
  background: #fffbeb;
  color: #d97706;
}

.compliance-badge-good {
  background: #ecfdf5;
  color: #059669;
}

.compliance-badge-gray {
  background: #f1f5f9;
  color: #64748b;
}

.compliance-badge-info {
  background: #eff6ff;
  color: var(--brand-blue);
}

/* Type Badge (truck/trailer) */
.compliance-type-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.compliance-type-truck {
  background: #eff6ff;
  color: var(--brand-blue);
}

.compliance-type-trailer {
  background: #f5f3ff;
  color: #7c3aed;
}

.compliance-type-asset {
  background: #fef3c7;
  color: #b45309;
}

/* Sub-Pills (asset category filter) */
.compliance-sub-pills {
  display: flex;
  gap: 6px;
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.compliance-sub-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 16px;
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.compliance-sub-pill:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.compliance-sub-pill.active {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}

.compliance-pill-count {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(0,0,0,0.08);
  min-width: 18px;
  text-align: center;
}

.compliance-sub-pill.active .compliance-pill-count {
  background: rgba(255,255,255,0.25);
}

/* Detail Modal */
.compliance-detail-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  border-top: 3px solid var(--border-light);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.compliance-detail-header-critical {
  border-top-color: #dc2626;
  background: #fef2f2;
}

.compliance-detail-header-warning {
  border-top-color: #d97706;
  background: #fffbeb;
}

.compliance-detail-header-good {
  border-top-color: #059669;
  background: #ecfdf5;
}

.compliance-detail-section {
  margin-bottom: var(--spacing-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.compliance-detail-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-light);
}

.compliance-detail-fields {
  padding: 4px 14px;
}

.compliance-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}

.compliance-detail-row:last-child {
  border-bottom: none;
}

.compliance-detail-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.compliance-detail-value {
  font-size: 0.8rem;
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
}

/* Timeline */
.compliance-timeline {
  padding: 8px 14px;
}

.compliance-timeline-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.compliance-timeline-item:last-child {
  border-bottom: none;
}

.compliance-timeline-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border-radius: 50%;
}

.compliance-timeline-content {
  flex: 1;
  min-width: 0;
}

/* Source Link */
.compliance-source-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
}

.compliance-source-link:hover {
  background: #eff6ff;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .compliance-alert-bar {
    gap: 6px;
  }

  .compliance-alert-chip {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .compliance-alert-count {
    font-size: 0.95rem;
  }

  .compliance-tab {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .compliance-card {
    padding: var(--spacing-sm);
  }
}

/* ============================================
   ACCOUNTS PAYABLE (AP) MODULE
   ============================================ */

/* AP View */
.ap-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* AP centered nav bar — matches billing pill style */
.ap-nav-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.ap-nav-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.ap-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.ap-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 6px 14px;
  flex: 1;
  max-width: 300px;
}

.ap-search-wrap input {
  border: none;
  outline: none;
  font-size: 0.8125rem;
  width: 100%;
  background: transparent;
}

.ap-filter-count {
  background: rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 4px;
}

.filter-btn.active .ap-filter-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* Summary Bar */
.ap-summary-bar {
  display: flex;
  gap: 24px;
  padding: 16px 20px;
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.ap-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ap-summary-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.ap-summary-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.ap-summary-open { color: #DC2626; }
.ap-summary-paid { color: #16A34A; }

/* Vendor Groups */
.ap-vendor-group {
  margin-bottom: 8px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.ap-vendor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.ap-vendor-header:hover {
  background: #F8FAFC;
}

.ap-vendor-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-vendor-chevron {
  font-size: 20px;
  color: var(--text-secondary);
  transition: transform 0.2s;
}

.ap-vendor-badge {
  background: var(--brand-blue);
  color: #fff;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 700;
}

.ap-vendor-total {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.ap-vendor-invoices {
  border-top: 1px solid var(--border-light);
  padding: 8px 12px;
}

/* Invoice Cards */
.ap-invoice-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}

.ap-invoice-card:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 2px 8px rgba(59,130,246,0.1);
}

.ap-invoice-card.ap-overdue {
  border-left: 4px solid #DC2626;
}

.ap-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 160px;
}

.ap-card-invnum {
  color: var(--brand-blue);
  font-weight: 700;
  font-size: 0.875rem;
}

.ap-card-po {
  color: var(--text-secondary);
  font-size: 0.75rem;
  background: #F1F5F9;
  padding: 1px 6px;
  border-radius: 4px;
}

.ap-card-body {
  flex: 1;
  min-width: 0;
}

.ap-card-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.ap-card-meta {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.ap-card-meta span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.ap-card-amount {
  text-align: right;
  flex-shrink: 0;
}

.ap-card-amount strong {
  font-size: 1rem;
  color: var(--text-primary);
}

.ap-card-paid-note {
  font-size: 0.7rem;
  color: var(--text-secondary);
  display: block;
}

/* AP Status Badges */
.badge-open {
  background: #DBEAFE;
  color: #1E40AF;
}

.badge-partial {
  background: #FEF3C7;
  color: #92400E;
}

.badge-overdue {
  background: #FEE2E2;
  color: #991B1B;
}

.badge-paid {
  background: #DCFCE7;
  color: #166534;
}

/* AP Invoice Modal */
.ap-invoice-modal-content {
  max-width: 720px;
}

.ap-line-items-section {
  margin-top: 16px;
  padding: 16px;
  background: #F8FAFC;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.ap-line-item {
  margin-bottom: 8px;
}

.ap-li-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ap-li-cat { flex: 0 0 130px; }
.ap-li-desc { flex: 1; }
.ap-li-qty { flex: 0 0 70px; }
.ap-li-rate { flex: 0 0 90px; }
.ap-li-person { flex: 0 0 140px; }

.ap-li-total {
  flex: 0 0 80px;
  text-align: right;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.ap-li-remove {
  flex: 0 0 32px;
  color: var(--text-secondary);
}

.ap-li-remove:hover { color: #DC2626; }

.ap-grand-total {
  margin-top: 12px;
  text-align: right;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  padding-top: 12px;
  border-top: 2px solid var(--border-light);
}

/* Payment Toggle */
.ap-payment-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  max-width: 300px;
}

.ap-pay-btn {
  flex: 1;
  padding: 8px 16px;
  border: none;
  background: #fff;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.15s;
}

.ap-pay-btn:not(:last-child) {
  border-right: 1px solid var(--border-light);
}

.ap-pay-btn.active {
  background: var(--brand-blue);
  color: #fff;
}

.ap-pay-btn:hover:not(.active) {
  background: #F8FAFC;
}

/* Document Grid */
.ap-doc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #F1F5F9;
  border-radius: 6px;
  font-size: 0.8125rem;
}

.ap-doc-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

/* View toggle divider */
.view-toggle-divider {
  width: 1px;
  height: 24px;
  background: var(--border-light);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Drag-to-paid drop zone */
.billing-paid-dropzone {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: 2px dashed #CBD5E1;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 12px;
  transition: all 0.2s;
}

.billing-paid-dropzone.visible {
  display: flex;
}

.billing-paid-dropzone .material-icons {
  font-size: 22px;
  color: #7C3AED;
}

.billing-paid-dropzone.drag-over {
  border-color: #7C3AED;
  background: #F5F3FF;
  color: #7C3AED;
}

/* Mobile responsiveness for AP */
@media (max-width: 768px) {
  .ap-summary-bar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .ap-invoice-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ap-card-header {
    min-width: auto;
    width: 100%;
    justify-content: space-between;
  }

  .ap-card-amount {
    text-align: left;
    width: 100%;
    padding-top: 4px;
    border-top: 1px solid var(--border-light);
  }

  .ap-li-row {
    flex-wrap: wrap;
  }

  .ap-li-cat { flex: 1 1 100%; }
  .ap-li-desc { flex: 1 1 100%; }
  .ap-li-person { flex: 1 1 100%; }
  .ap-li-qty { flex: 1 1 calc(50% - 4px); }
  .ap-li-rate { flex: 1 1 calc(50% - 4px); }

  .ap-filters-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .ap-nav-inner {
    flex-direction: column;
    gap: 8px;
  }
  .ap-nav-actions {
    width: 100%;
    justify-content: center;
  }
  .ap-search-wrap {
    max-width: none;
    flex: 1;
  }

  .ap-invoice-modal-content {
    max-width: 100%;
  }
}