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

:root {
  --sidebar-width: 260px;
  --bg-app: #f0f4f8;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #f8fafc;
  --border: rgba(0, 0, 0, 0.08);
  --brand-primary: #0d9488;
  --brand-secondary: #0ea5e9;
  --status-free: #10b981;
  --status-busy: #f59e0b;
  --status-break: #64748b;
  --status-alert: #f43f5e;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  /* Font */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Dashboard stat-card gradients. These were referenced by .stat-card.teal
     etc. but never defined, so the cards rendered transparent — white text on
     the near-white page, i.e. invisible numbers. Defined here so the four hero
     stats read clearly (white-on-colour, strong contrast) in both themes. */
  --gradient-teal:    linear-gradient(135deg, #0d9488 0%, #0ea5e9 100%);
  --gradient-indigo:  linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  --gradient-emerald: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-amber:   linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.app-layout {
  font-family: var(--font-family);
  background-color: var(--bg-app);
  color: var(--text-primary);
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  height: 100vh;
  overflow: hidden;
}

/* Sidebar Styling */
.sidebar {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: var(--text-inverse);
  display: flex;
  flex-direction: column;
  height: 100vh;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1000;
}

.sidebar-brand {
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-brand .brand-name {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0d9488 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-brand .brand-name i {
  -webkit-text-fill-color: #0d9488;
}

.sidebar-brand .brand-subtitle {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #94a3b8;
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 6px;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
}

.nav-item.active {
  background: rgba(13, 148, 136, 0.2);
  color: #5eead4;
  font-weight: 600;
}

.nav-item .nav-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.sync-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #64748b;
  transition: all 0.3s ease;
}

.dot.live {
  background-color: var(--status-free);
  box-shadow: 0 0 8px var(--status-free);
}

.dot.error {
  background-color: var(--status-alert);
  box-shadow: 0 0 8px var(--status-alert);
}

.version-tag {
  display: inline-block;
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* Main Content Layout */
.main-content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
}

.content-header {
  position: sticky;
  top: 0;
  background: rgba(240, 244, 248, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.content-body {
  flex: 1;
  padding: 24px 32px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* View Sections */
.view-section {
  display: none;
  animation: viewFadeIn 0.3s ease-out;
}

.view-section.active {
  display: block;
}

@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dashboard Elements */
.dashboard-greeting {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.dashboard-date {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  border-radius: 16px;
  padding: 24px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.stat-card .stat-emoji {
  font-size: 1.5rem;
  z-index: 2;
}

.stat-card .stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  z-index: 2;
}

.stat-card .stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.9;
  z-index: 2;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  z-index: 1;
}

.stat-card.teal { background: var(--gradient-teal); }
.stat-card.indigo { background: var(--gradient-indigo); }
.stat-card.emerald { background: var(--gradient-emerald); }
.stat-card.amber { background: var(--gradient-amber); }

.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

.quick-action-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
}

.quick-action-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(13, 148, 136, 0.3);
}

.quick-action-card .qa-icon {
  font-size: 2rem;
}

.quick-action-card .qa-text h4 {
  margin: 0;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1rem;
}

.quick-action-card .qa-text p {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.dashboard-section {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dashboard-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.01);
}

.dashboard-section-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-section-header .section-badge {
  font-size: 0.75rem;
  background: rgba(13, 148, 136, 0.1);
  color: var(--brand-primary);
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
}

.dashboard-section-body {
  padding: 16px;
  max-height: 480px;
  overflow-y: auto;
  flex: 1;
}

#dashboard-fleet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

#dashboard-fleet .card {
  margin-bottom: 0;
}

@media (max-width: 500px) {
  #dashboard-fleet {
    grid-template-columns: 1fr;
  }
}

.dashboard-section-body:empty::after {
  content: 'Nothing here yet';
  display: block;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-style: italic;
}

/* Fleet View */
.fleet-header {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fleet-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
}

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* Log Job View */
.log-job-container {
  max-width: 600px;
  background: var(--bg-card);
  padding: 32px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.log-job-container h2 {
  font-size: 1.5rem;
  margin-bottom: 24px;
  font-weight: 800;
}

/* Cards UI */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-muted);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.card:hover {
  transform: translateX(3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 0, 0, 0.12);
}

.card.free { border-left-color: var(--status-free); }
.card.busy { border-left-color: var(--status-busy); }
.card.break { border-left-color: var(--status-break); opacity: 0.75; }

.card.alert {
  border: 1px solid var(--status-alert);
  border-left: 4px solid var(--status-alert);
  animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
  0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(244, 63, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}

/* Buttons */
.btn-main, .btn-sec, .btn-warn, .btn-danger {
  border: none;
  padding: 12px 20px;
  width: 100%;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 8px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-family);
}

.btn-main {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2);
}
.btn-main:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(16, 185, 129, 0.3);
}

.btn-sec {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
}
.btn-sec:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3);
}

.btn-warn {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  box-shadow: 0 4px 6px rgba(100, 116, 139, 0.2);
}
.btn-warn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(100, 116, 139, 0.3);
}

.btn-danger {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  box-shadow: 0 4px 6px rgba(244, 63, 94, 0.2);
}
.btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(244, 63, 94, 0.3);
}

.btn-cancel-job {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-cancel-job:hover {
  background: rgba(244, 63, 94, 0.1);
  color: var(--status-alert);
  border-color: rgba(244, 63, 94, 0.2);
}

.btn-head {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-head:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
}

.btn-head.logout {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.2);
  color: var(--status-alert);
}

.btn-head.logout:hover {
  background: rgba(244, 63, 94, 0.15);
  color: #e11d48;
}

/* ---- Map-style header controls: view toggle + View/Tools dropdown menus.
   Mirrors the Map console header (style.css) but themed with the Dashboard's
   own CSS variables so it adapts to light and dark mode automatically. ---- */
.seg { display: inline-flex; background: rgba(0, 0, 0, 0.05); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; }
.seg button { border: none; background: transparent; height: 30px; padding: 0 12px; border-radius: 6px; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button.on { background: var(--brand-secondary); color: #fff; }
.seg button:not(.on):hover { background: rgba(0, 0, 0, 0.06); color: var(--text-primary); }

.hmenu { position: relative; }
.hmenu-panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 244px; z-index: 6500; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.25)); padding: 6px; display: none; }
.hmenu.open .hmenu-panel { display: block; }
.hmenu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; padding: 9px 10px; border-radius: 6px; font-size: 0.85rem; color: var(--text-primary); cursor: pointer; }
.hmenu-item:hover { background: rgba(14, 165, 233, 0.12); }
.hmenu-ic { width: 20px; text-align: center; color: var(--text-muted); flex: none; }
.hmenu-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); padding: 7px 10px 3px; font-weight: 800; }
.hmenu-sep { height: 1px; background: var(--border); margin: 5px 4px; }
.hmenu-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 0.82rem; color: var(--text-primary); }

/* Inputs and Labels */
.input-std {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-family: var(--font-family);
  outline: none;
}

.input-std:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.lbl {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: block;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#preview-box {
  background: rgba(13, 148, 136, 0.05);
  border: 1px solid rgba(13, 148, 136, 0.15);
  color: #0b7a70;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  margin-bottom: 16px;
  display: none;
  font-weight: 500;
}

/* Database Table Styles */
.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  text-align: left;
}

.db-table th {
  background: rgba(0, 0, 0, 0.02);
  padding: 12px 16px;
  border-bottom: 2px solid var(--border);
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.db-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
  vertical-align: middle;
}

.btn-edit {
  color: #2563eb;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.08);
  margin-right: 6px;
  display: inline-block;
  transition: all 0.2s ease;
  font-size: 0.8rem;
  border: none;
}

.btn-edit:hover {
  background: rgba(37, 99, 235, 0.15);
}

.btn-del {
  color: #e11d48;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(244, 63, 94, 0.08);
  display: inline-block;
  transition: all 0.2s ease;
  font-size: 0.8rem;
  border: none;
}

.btn-del:hover {
  background: rgba(244, 63, 94, 0.15);
}

/* Tab Switching Group */
.tab-group {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: rgba(0, 0, 0, 0.04);
  padding: 4px;
  border-radius: 10px;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: var(--font-family);
  transition: all 0.2s ease;
  font-size: 0.85rem;
}

.tab-btn.active {
  background: #ffffff;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Modals Overlay & Body */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 5000;
}

.modal {
  background: #ffffff;
  padding: 32px;
  border-radius: 20px;
  width: 550px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 800;
  color: var(--text-primary);
  font-size: 1.5rem;
}

@keyframes modalPop {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Login Screen Cover */
#login-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0d9488 100%);
}

#login-box {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  padding: 48px;
  border-radius: 24px;
  text-align: center;
  width: 380px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  animation: modalPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#login-box h1 {
  margin-top: 0;
  font-size: 2.2rem;
  margin-bottom: 5px;
  color: #0f172a;
  font-weight: 800;
}

#login-box h1 i {
  color: #0d9488;
  margin-right: 8px;
}

#login-box input {
  width: 100%;
  padding: 14px;
  margin-top: 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 1rem;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  font-family: var(--font-family);
  transition: all 0.2s ease;
}

#login-box input:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

#login-box button {
  width: 100%;
  padding: 14px;
  margin-top: 12px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #0d9488, #0ea5e9);
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-family);
}

#login-box button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.35);
}

/* Toast System */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 4px solid #3b82f6;
  color: #0f172a;
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  font-size: 0.9rem;
  font-weight: 600;
  transform: translateX(120%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, max-width 0.3s;
  opacity: 0;
  max-width: 350px;
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast.success { border-left-color: #10b981; }
.toast.error { border-left-color: #f43f5e; }
.toast.warning { border-left-color: #f59e0b; }
.toast.info { border-left-color: #0ea5e9; }

/* SKELETON / SHIMMER LOADING PLACEHOLDERS
   Same helper as style.css, so a placeholder looks identical in either console.
   Decorative only; call sites mark the wrapper aria-hidden. */
.sk-card {
  pointer-events: none;
}

.sk-line {
  height: 12px;
  margin: 10px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.16) 37%, rgba(255, 255, 255, 0.06) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}

@keyframes sk-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-line { animation: none; }
}

/* Vehicle Toggle Buttons */
.veh-btn {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-primary);
  transition: all 0.2s ease;
  font-family: var(--font-family);
}

.veh-btn.active {
  background: rgba(13, 148, 136, 0.1);
  color: #0d9488;
  border-color: rgba(13, 148, 136, 0.3);
}

/* Badges and tags */
.time-badge {
  font-size: 0.75rem;
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  display: inline-block;
}

.mileage-tag {
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  display: inline-block;
}

/* History Inline View Styles */
.history-header {
  margin-bottom: 20px;
}

.history-header h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.history-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.history-time-filters {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: rgba(0, 0, 0, 0.04);
  padding: 4px;
  border-radius: 10px;
}

.history-time-btn {
  flex: 1;
  padding: 8px 6px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-family);
}

.history-time-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.history-time-btn.active {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.15), rgba(14, 165, 233, 0.1));
  color: #0d9488;
  box-shadow: var(--shadow-sm);
}

.history-search-row {
  margin-bottom: 16px;
}

.history-stats {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.stat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.stat-chip i { font-size: 0.75rem; }
.stat-chip:nth-child(1) i { color: #10b981; }
.stat-chip:nth-child(2) i { color: #0ea5e9; }
.stat-chip:nth-child(3) i { color: #6366f1; }

.history-results {
  max-height: 550px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  padding: 16px;
}

.history-date-group {
  margin-bottom: 20px;
}

.history-date-group:last-child {
  margin-bottom: 0;
}

.history-date-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.history-date-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: #6366f1;
  white-space: nowrap;
}

.history-date-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.history-date-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.history-job {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.01);
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition: all 0.15s ease;
  animation: histFadeIn 0.3s ease-out;
}

.history-job:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(99, 102, 241, 0.15);
}

.history-job:last-child {
  margin-bottom: 0;
}

.history-job-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-job-ref {
  font-weight: 800;
  font-size: 0.85rem;
  color: #0ea5e9;
}

.history-job-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.history-job-route {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.history-job-route .arrow {
  color: var(--text-muted);
  margin: 0 4px;
}

.history-job-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.history-job-detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.history-job-detail i {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.history-job-miles {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.15);
  color: #0ea5e9;
  white-space: nowrap;
  align-self: center;
}

.history-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.history-empty i {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 14px;
  opacity: 0.4;
}

.history-empty p {
  margin: 0;
  font-size: 0.9rem;
}

@keyframes histFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Controller Quick Guide Styles */
#controller-guide {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

#controller-guide h4 {
  margin: 0 0 14px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

#controller-guide h4 i {
  color: #6366f1;
}

.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #0ea5e9);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.step-text {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.step-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.step-text em {
  color: #0d9488;
  font-style: normal;
  font-weight: 600;
}

.guide-reminder {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.15);
  margin-top: 8px;
}

.guide-reminder > i {
  color: #f59e0b;
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.guide-reminder strong {
  display: block;
  font-size: 0.8rem;
  color: #d97706;
  margin-bottom: 4px;
  font-weight: 700;
}

.guide-reminder p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* NOK display inside rider menu modal */
.nok-warning-box {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.15);
  color: #92400e;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Mobile Nav Bottom Bar */
#mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: #ffffff;
  border-top: 1px solid var(--border);
  z-index: 3000;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.nav-item-mobile {
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 500;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  gap: 2px;
}

.nav-item-mobile.active {
  color: #0d9488;
  font-weight: 600;
}

.nav-item-mobile i {
  font-size: 1.3rem;
  margin-bottom: 2px;
}

/* Custom Scrollbars */
.main-content::-webkit-scrollbar {
  width: 6px;
}
.main-content::-webkit-scrollbar-track {
  background: transparent;
}
.main-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.dashboard-section-body::-webkit-scrollbar,
.history-results::-webkit-scrollbar {
  width: 5px;
}
.dashboard-section-body::-webkit-scrollbar-track,
.history-results::-webkit-scrollbar-track {
  background: transparent;
}
.dashboard-section-body::-webkit-scrollbar-thumb,
.history-results::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

/* ============================================================
   DARK THEME OVERRIDES
   ============================================================ */
.dark-theme {
  --bg-app: #0f172a;
  --bg-card: #1e293b;
  --bg-card-hover: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border: rgba(255, 255, 255, 0.08);
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
}

.dark-theme .content-header {
  background: rgba(15, 23, 42, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dark-theme .card {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.06);
}

.dark-theme .card:hover {
  background: var(--bg-card-hover);
}

.dark-theme .dashboard-section {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.06);
}

.dark-theme .dashboard-section-header {
  background: rgba(255, 255, 255, 0.02);
}

.dark-theme .quick-action-card {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.06);
}

.dark-theme .quick-action-card:hover {
  background: var(--bg-card-hover);
}

.dark-theme .input-std {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.dark-theme .input-std option {
  background: #1e293b;
  color: #f8fafc;
}

.dark-theme .db-table th {
  background: rgba(0, 0, 0, 0.2);
  color: #94a3b8;
}

.dark-theme .db-table td {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

.dark-theme .tab-group {
  background: rgba(0, 0, 0, 0.2);
}

.dark-theme .tab-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.dark-theme .modal {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-theme .modal h2 {
  color: #f8fafc;
}

.dark-theme #login-box {
  background: rgba(30, 41, 59, 0.95);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.dark-theme #login-box h1 {
  color: #f8fafc;
}

.dark-theme #login-box input {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.dark-theme .toast {
  background: rgba(30, 41, 59, 0.95);
  color: #f8fafc;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.dark-theme .btn-cancel-job {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.dark-theme .btn-cancel-job:hover {
  background: rgba(244, 63, 94, 0.15);
  color: var(--status-alert);
}

.dark-theme .veh-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

.dark-theme .veh-btn.active {
  background: rgba(13, 148, 136, 0.2);
  color: #5eead4;
}

.dark-theme .history-time-filters {
  background: rgba(0, 0, 0, 0.2);
}

.dark-theme .stat-chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

.dark-theme .history-results {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-theme .history-job {
  background: rgba(255, 255, 255, 0.01);
  border-color: rgba(255, 255, 255, 0.03);
}

.dark-theme .history-job:hover {
  background: rgba(255, 255, 255, 0.03);
}

.dark-theme .nok-warning-box {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
}

.dark-theme #mobile-nav {
  background: #1e293b;
  border-top-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.dark-theme .btn-head {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-theme .btn-head:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dark-theme .main-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   MOBILE RESPONSIVENESS
   ============================================================ */
@media (max-width: 768px) {
  body.app-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 64px;
    height: 100vh;
  }
  
  .sidebar {
    display: none; /* Hidden on mobile, replaced by bottom nav */
  }
  
  .main-content {
    grid-row: 1;
    height: calc(100vh - 64px);
  }
  
  #mobile-nav {
    display: flex !important;
    grid-row: 2;
  }
  
  .content-header {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .content-header > div {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }
  .content-header .btn-head {
    padding: 7px 9px;
    font-size: 0.78rem;
  }
  .content-header .btn-head[title="Analytics"] { display: none; }

  .content-body {
    padding: 16px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .quick-actions {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .fleet-grid {
    grid-template-columns: 1fr;
  }
  
  .modal {
    width: 95% !important;
    max-height: 85vh;
    padding: 20px;
    border-radius: 16px;
  }
  
  .stat-card .stat-value {
    font-size: 2rem;
  }
  
  .history-job {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .history-job-miles {
    align-self: flex-start;
  }
  
  .history-time-filters {
    flex-wrap: wrap;
  }
}

@media (max-width: 500px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .stat-card {
    padding: 16px;
    min-height: 90px;
  }
  
  .stat-card .stat-value {
    font-size: 1.6rem;
  }
  
  .modal .row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .dashboard-greeting {
    font-size: 1.4rem;
  }
}

/* --- 14-DAY CALENDAR ROTA --- */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 15px;
}
.calendar-day {
    background: var(--bg-app, #ffffff);
    border: 1px solid var(--border, rgba(0,0,0,0.1));
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 120px;
}
.calendar-day.today {
    border-color: #0ea5e9;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.2);
}
.calendar-day.warning {
    border-color: #f43f5e;
}
.calendar-day-header {
    background: rgba(0,0,0,0.03);
    padding: 8px 10px;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.05));
    color: var(--text-primary, #0f172a);
}
.coverage-badge {
    background: rgba(244, 63, 94, 0.15);
    color: #f43f5e;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}
.calendar-day-body {
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.no-shifts {
    color: var(--text-muted, #94a3b8);
    font-size: 0.8rem;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
}
.shift-entry {
    background: rgba(0,0,0,0.03);
    border-radius: 6px;
    padding: 6px;
    font-size: 0.8rem;
    border-left: 3px solid #0ea5e9;
}
.shift-time {
    color: var(--text-muted, #94a3b8);
    font-size: 0.75rem;
    margin-bottom: 3px;
}
.shift-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.shift-person {
    color: var(--text-primary, #0f172a);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}
.btn-del-shift {
    background: none;
    border: none;
    color: #f43f5e;
    cursor: pointer;
    opacity: 0.7;
}
.btn-del-shift:hover {
    opacity: 1;
}

/* --- ITEM SELECTOR --- */
.item-selector-btn {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--bg-card-hover, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
    box-sizing: border-box;
}
.item-selector-btn:hover {
    border-color: var(--primary, #0ea5e9);
    background: var(--bg-card, #ffffff);
}

.item-category {
    margin-bottom: 8px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}
.item-category-header {
    background: var(--bg-card-hover, #f1f5f9);
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}
.item-category-header:hover {
    background: var(--border, #e2e8f0);
}
.item-category-body {
    background: var(--bg-card, #ffffff);
}
.item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    border-top: 1px solid var(--border, #e2e8f0);
    font-size: 0.9rem;
    color: var(--text-primary, #1e293b);
}
.item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-qty {
    background: var(--bg-card-hover, #f1f5f9);
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    color: var(--text-primary, #0f172a);
}
.btn-qty:hover {
    background: var(--primary, #0ea5e9);
    color: #ffffff;
    border-color: var(--primary, #0ea5e9);
}
.item-qty {
    min-width: 20px;
    text-align: center;
    font-weight: 600;
}

/* ============================================================
   v2.24 VISUAL IMPROVEMENTS
   (urgent pulse · job-age colours · status chips · focus polish
    · empty states) — Dashboard is light-first, dark overrides below
   ============================================================ */

/* --- Urgent jobs pulse slowly so they physically draw the eye --- */
@keyframes urgent-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.urgent-pulse { animation: urgent-pulse 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .urgent-pulse, .card.alert { animation: none; }
  .urgent-pulse { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.5); }
}

/* --- Job age: neutral < 30 min, amber 30–60, red > 60 --- */
.job-age-warn {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #92400e !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  border-radius: 12px; padding: 2px 8px;
}
.job-age-late {
  background: rgba(220, 38, 38, 0.12) !important;
  color: #991b1b !important;
  border: 1px solid rgba(220, 38, 38, 0.4) !important;
  border-radius: 12px; padding: 2px 8px; font-weight: 700;
}
.dark-theme .job-age-warn { color: #fbbf24 !important; background: rgba(245, 158, 11, 0.22) !important; }
.dark-theme .job-age-late { color: #fca5a5 !important; background: rgba(220, 38, 38, 0.22) !important; }

/* --- Rider acceptance line on a job (awaiting vs accepted) --- */
/* Solid colours + dark text so it's unmistakable and reads in both themes. */
.job-accept { margin-top: 6px; border-radius: 6px; padding: 5px 10px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em; }
.job-accept.accepted { background: #10b981; color: #04231a; }
.job-accept.awaiting { background: #f59e0b; color: #1f2933; }

/* --- Status chips: one consistent style, symbol + word (colour-blind safe) --- */
.status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 2px 9px; border-radius: 10px; text-transform: uppercase;
  white-space: nowrap; vertical-align: middle; line-height: 1.5;
}
.status-chip.free    { background: rgba(16, 185, 129, 0.12);  color: #047857; border: 1px solid rgba(16, 185, 129, 0.3); }
.status-chip.busy    { background: rgba(245, 158, 11, 0.14);  color: #92400e; border: 1px solid rgba(245, 158, 11, 0.35); }
.status-chip.break   { background: rgba(100, 116, 139, 0.12); color: #475569; border: 1px solid rgba(100, 116, 139, 0.3); }
.status-chip.onboard { background: rgba(142, 68, 173, 0.12);  color: #6b21a8; border: 1px solid rgba(142, 68, 173, 0.3); }
.dark-theme .status-chip.free    { color: #34d399; }
.dark-theme .status-chip.busy    { color: #fbbf24; }
.dark-theme .status-chip.break   { color: #a8b3c2; }
.dark-theme .status-chip.onboard { color: #d8b4fe; }

/* --- Keyboard-focus visibility (accessibility) --- */
button:focus-visible, a:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [onclick]:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
  border-radius: 4px;
}
.dark-theme button:focus-visible, .dark-theme a:focus-visible,
.dark-theme select:focus-visible, .dark-theme input:focus-visible,
.dark-theme textarea:focus-visible, .dark-theme [onclick]:focus-visible {
  outline-color: #5eead4;
}

/* --- Empty-state panels (friendlier than bare text) --- */
.empty-state {
  text-align: center; padding: 30px 16px; color: var(--text-muted);
}
.empty-state i { font-size: 1.8rem; display: block; margin-bottom: 8px; opacity: 0.45; }
.empty-state .es-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 3px; color: var(--text-secondary); }
.empty-state .es-hint { font-size: 0.78rem; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════
   REDESIGN 2026 — "Artery Control" visual language (v2.49 experiment)
   Appended as one block so the whole treatment can be reasoned about —
   and removed — in one place. Two deliberate shifts:
   1. RED MEANS ACT. The brand red is reserved for URGENT/SOS/alerts;
      routine actions move to a calm blue, good states to green.
   2. The nav rail is a dark instrument panel in BOTH themes, so the
      console reads as one product whether on day or night shift.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --bg-app: #EDF1F7;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F6F9FD;
  --text-primary: #101828;
  --text-secondary: #46556E;
  --text-muted: #8593AB;
  --border: #E2E8F2;
  --brand-primary: #2E5EAA;      /* calm action blue (was teal) */
  --brand-secondary: #3B82D8;
  --status-free: #17A45C;
  --status-busy: #D97706;        /* amber = waiting on a human */
  --status-break: #64748B;
  --status-alert: #E11D2E;       /* the artery red — urgent only */
  --rail-bg: #0D1522;            /* instrument rail, both themes */
  --rail-line: #20304B;
  --rail-text: #8DA1BF;
}
.dark-theme {
  --bg-app: #0B1120;
  --bg-card: #101929;
  --bg-card-hover: #14203466;
  --text-primary: #E9EEF7;
  --text-secondary: #A9B8D0;
  --text-muted: #8DA1BF;
  --border: #20304B;
  --brand-primary: #3B82D8;
  --brand-secondary: #4FA3F2;
  --status-free: #2BD576;
  --status-busy: #F5B93E;
  --status-break: #64748B;
  --status-alert: #E11D2E;
}

/* ---- nav rail: dark instrument panel in both themes ---- */
.sidebar { background: var(--rail-bg); border-right: 1px solid var(--rail-line); }
.sidebar .nav-item { color: var(--rail-text); border-radius: 10px; margin: 2px 10px; transition: background .15s, color .15s; }
.sidebar .nav-item:hover { background: #16223A66; color: #E9EEF7; }
.sidebar .nav-item.active { background: #16223A; color: #E9EEF7; box-shadow: inset 3px 0 0 var(--status-alert); }
.sidebar-brand, .sidebar-footer { color: #E9EEF7; border-color: var(--rail-line); }
.sidebar-brand .version-badge { background: #16223A; color: var(--rail-text); }

/* ---- cards: seams instead of shadows ---- */
.card { border: 1px solid var(--border); box-shadow: none; border-radius: 10px; }
.card:hover { box-shadow: 0 4px 16px rgba(10, 20, 40, .10); }
.dark-theme .card { background: var(--bg-card); border-color: var(--border); }
.dark-theme .card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.dashboard-section, .dark-theme .dashboard-section { border: 1px solid var(--border); box-shadow: none; border-radius: 12px; background: var(--bg-card); }
.dashboard-section-header, .dark-theme .dashboard-section-header { background: transparent; border-bottom: 1px solid var(--border); }

/* ---- stat tiles: quiet chips, colour only in the number ---- */
.stat-card, .stat-card.teal, .stat-card.indigo, .stat-card.emerald, .stat-card.amber {
  background: var(--bg-card); border: 1px solid var(--border); box-shadow: none; border-radius: 12px;
}
.stat-card::before, .stat-card::after { display: none; }   /* retire the corner blob */
.stat-card .stat-emoji { font-size: 1.05rem; opacity: .85; }
.stat-card .stat-value, .stat-card .stat-label { color: var(--text-muted); }
.stat-card .stat-value { font-variant-numeric: tabular-nums; font-weight: 800; }
.stat-card.teal .stat-value { color: var(--brand-secondary); }
.stat-card.indigo .stat-value { color: var(--text-primary); }
.stat-card.emerald .stat-value { color: var(--status-free); }
.stat-card.amber .stat-value { color: var(--status-busy); }

/* ---- attention lanes on the job board ---- */
.lane-h { display: flex; align-items: center; gap: 8px; margin: 14px 2px 8px;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.lane-h:first-child { margin-top: 2px; }
.lane-dot { width: 8px; height: 8px; border-radius: 50%; }
.lane-cnt { margin-left: auto; font-weight: 600; color: var(--text-muted); opacity: .8; font-variant-numeric: tabular-nums; }
.done-mini { display: flex; align-items: center; gap: 10px; padding: 8px 12px; opacity: .82; font-size: .8rem; cursor: default; }
.done-mini .dm-ref { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.done-mini .dm-route { flex: 1; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.done-mini .dm-tag { color: var(--status-free); font-weight: 700; font-size: .74rem; white-space: nowrap; }
/* Closed-not-delivered (stood down, NTC, etc.) must not read as a green delivery */
.done-mini .dm-tag-closed { color: var(--text-secondary); font-weight: 600; }
.done-more { text-align: center; font-size: .78rem; color: var(--brand-secondary); cursor: pointer; padding: 7px; }
.done-more:hover { text-decoration: underline; }

/* ---- acceptance pills: amber = waiting, green = go ---- */
.job-accept.awaiting { background: rgba(245, 185, 62, .16); color: #B45309; border: 1px solid rgba(245, 185, 62, .45); }
.dark-theme .job-accept.awaiting { color: #F5B93E; }
.job-accept.accepted { background: rgba(43, 213, 118, .14); color: #15803D; border: 1px solid rgba(43, 213, 118, .4); }
.dark-theme .job-accept.accepted { color: #2BD576; }

/* ---- board-first dashboard shape (Phase 1.5) ---- */
.ops-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.ops-top .ops-greet { min-width: 200px; }
.ops-top .dashboard-greeting { font-size: 1.25rem; margin-bottom: 0; }
.ops-top .dashboard-date { font-size: .78rem; margin-bottom: 0; }
.ops-top .stats-grid { display: flex; gap: 10px; margin: 0; flex: 1; }
.ops-top .stat-card { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; flex: 0 1 auto; }
.ops-top .stat-card .stat-emoji { display: none; }
.ops-top .stat-card .stat-value { font-size: 1.25rem; margin: 0; }
.ops-top .stat-card .stat-label { font-size: .62rem; letter-spacing: .1em; margin: 0; white-space: nowrap; }
.ops-top .quick-actions { display: flex; gap: 10px; margin: 0; }
.ops-top .quick-action-card { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 0; border-radius: 10px; }
.ops-top .quick-action-card .qa-icon { font-size: 1.1rem; }
.ops-top .quick-action-card .qa-text h4 { font-size: .82rem; margin: 0; }
.ops-top .quick-action-card .qa-text p { display: none; }
.ops-top .quick-action-card:first-child { background: var(--brand-primary); border-color: var(--brand-primary); }
.ops-top .quick-action-card:first-child h4 { color: #fff; }

.ops-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
@media (max-width: 1150px) { .ops-grid { grid-template-columns: 1fr; } }
.ops-board .dashboard-section-body { max-height: none; }
/* Active Fleet needs the same uncapped-height treatment as the Job Board —
   the base .dashboard-section-body max-height:480px (line ~395) was only
   ever overridden for .ops-board, so with a full team on shift the fleet
   list exceeded 480px and had to scroll/clip inside its own box instead of
   just growing with the page, which is what produced the visual glitching
   reported with a large roster (fine with few riders, broken with many). */
.ops-fleetcol .dashboard-section-body { max-height: none; }

.lanes-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; align-items: start; }
.lane-col { background: var(--bg-app); border: 1px solid var(--border); border-radius: 10px; padding: 10px; min-height: 120px; }
.dark-theme .lane-col { background: #0D1522; }
.lane-col .card { margin-bottom: 10px; }
.lane-col .card:last-child { margin-bottom: 0; }
.lane-empty { border: 1px dashed var(--border); border-radius: 8px; text-align: center; color: var(--text-muted); font-size: .78rem; padding: 18px 8px; }

/* fleet column: compact rows */
.ops-fleetcol #dashboard-fleet { display: flex; flex-direction: column; gap: 8px; }
.ops-fleetcol #dashboard-fleet .card { padding: 10px 12px; margin: 0; min-height: 0; }

/* ---- journey spine: Accepted → Collecting → Delivered ---- */
.spine { display: flex; align-items: center; margin-top: 10px; }
.spine .node { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-card); flex: 0 0 auto; }
.spine .node.done { background: var(--status-free); border-color: var(--status-free); }
.spine .node.now { border-color: var(--brand-secondary); box-shadow: 0 0 0 3px rgba(79, 163, 242, .22); }
.spine .seg { flex: 1; height: 2px; background: var(--border); }
.spine .seg.done { background: var(--status-free); }
.spine-l { display: flex; justify-content: space-between; font-size: .6rem; color: var(--text-muted); margin-top: 3px; letter-spacing: .06em; text-transform: uppercase; }

/* ---- mobile bottom nav now carries ALL destinations (8 items) ----
   Trends / Events / Rota were unreachable on phones before; tighten the
   items so the full set fits a 360px screen. */
.nav-item-mobile { font-size: 0.56rem; gap: 1px; min-width: 0; padding: 0 1px; }
.nav-item-mobile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item-mobile i { font-size: 1.05rem; margin-bottom: 1px; }
.nav-item-mobile.active { color: var(--brand-secondary); }

/* ---- urgent: a steady red ring, not a strobing card ---- */
.urgent-pulse { animation: none; box-shadow: 0 0 0 1px rgba(225, 29, 46, .45), 0 6px 22px rgba(225, 29, 46, .10); }
@media (prefers-reduced-motion: no-preference) {
  .urgent-pulse { animation: urgent-breathe 2.6s ease-in-out infinite; }
  @keyframes urgent-breathe {
    0%, 100% { box-shadow: 0 0 0 1px rgba(225, 29, 46, .45), 0 6px 22px rgba(225, 29, 46, .10); }
    50%      { box-shadow: 0 0 0 2px rgba(225, 29, 46, .70), 0 6px 26px rgba(225, 29, 46, .22); }
  }
}

/* ---------------------------------------------------------------------------
   Header dropdowns on a phone.
   .hmenu-panel is anchored right:0 to its button and is 244px wide. In a header
   that has wrapped onto two rows the button sits near the LEFT edge, so the
   panel extends 244px further left — off the screen entirely. A controller
   working from a phone that cannot be rotated then has no way to reach Tools.
   On narrow screens the panel is anchored to the HEADER instead of the button
   and spans the full width, so it can never leave the viewport.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* .content-header is position:sticky, which already makes it a positioned
       ancestor — the panel just needs to stop anchoring to the button. */
    .hmenu { position: static; }
    .hmenu-panel {
        left: 10px;
        right: 10px;
        top: calc(100% + 6px);
        min-width: 0;
        width: auto;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Site-kind artwork (v3.30) ---------------------------------------------
   Hospitals and GP surgeries draw as pictures rather than emoji, because 🏥
   and 🩺 read as the same blob at small sizes. This console has no map, but it
   shows the same Locations directory, so it needs the same rule — kept
   identical to the copy in style.css. Sized in `em` so it follows whatever
   text it sits beside. */
img.loc-ic { width: 1.15em; height: 1.15em; object-fit: contain; vertical-align: -0.2em; }