:root {
--primary-color: #222;
--secondary-color: #286090;
--accent-color: #b3e5fc;
--success-color: #43a047;
--warning-color: #ffe082;
--info-color: #5bc0de;
--danger-color: #dc3545;
--background-color: #f5f5f5;
--container-bg: #fff;
--text-primary: #333;
--text-secondary: #666;
--border-color: #e2e8f0;
--table-bg: #f8fafd;
--table-header-bg: #e3eaf5;
--table-border: #e2e8f0;

/* Theme colors */
--theme-bg: var(--background-color);
--theme-surface: var(--container-bg);
--theme-text: var(--text-primary);
--theme-text-secondary: var(--text-secondary);
--theme-border: var(--border-color);

/* Responsive breakpoints */
--mobile-sm: 480px;
--mobile-md: 768px;
--tablet: 1024px;
--desktop: 1200px;
}

/* Dark theme variables */
[data-theme="dark"] {
--primary-color: #1a1a1a;
--background-color: #121212;
--container-bg: #1e1e1e;
--text-primary: #ffffff;
--text-secondary: #b0b0b0;
--border-color: #404040;
--table-bg: #2a2a2a;
--table-header-bg: #333333;
--table-border: #404040;
--accent-color: #81d4fa;
--secondary-color: #3498db;

--theme-bg: var(--background-color);
--theme-surface: var(--container-bg);
--theme-text: var(--text-primary);
--theme-text-secondary: var(--text-secondary);
--theme-border: var(--border-color);
}

/* Reset and base styles */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: var(--theme-bg);
color: var(--theme-text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
width: 100vw;
overflow-x: hidden;
display: flex;
flex-direction: column;
font-size: 16px;
line-height: 1.5;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header styles */
.header {
background: var(--primary-color);
color: #fff;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
min-height: 60px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
flex-wrap: nowrap;
}
.header .logo {
display: flex;
align-items: center;
font-size: 1.4em;
font-weight: 600;
}
.header .logo img {
height: 132px;
width: 132px;
margin-right: 8px;
object-fit: contain;
}
.header .header-subtext {
font-size: 0.8em;
font-weight: normal;
color: var(--accent-color);
margin-left: 10px;
white-space: nowrap;
}
.header .right {
display: flex;
align-items: center;
gap: 12px;
}
.side-menu-backdrop {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
backdrop-filter: blur(2px);
}
.side-menu {
position: fixed;
right: -320px;
top: 0;
width: 320px;
max-width: 85vw;
height: 100vh;
background: var(--secondary-color);
color: #fff;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
z-index: 1000;
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.side-menu::-webkit-scrollbar {
width: 6px;
}
.side-menu::-webkit-scrollbar-track {
background: transparent;
}
.side-menu::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}
.side-menu::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
.side-menu.open {
right: 0;
}
.side-menu .side-header {
background: #204d74;
padding: 20px 18px 16px 18px;
font-size: 1.1em;
font-weight: 600;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 10;
}
.side-menu .side-header img {
height: 28px;
width: 28px;
object-fit: contain;
}
.business-name {
font-size: 0.9em;
color: var(--accent-color);
padding: 0 18px 12px 18px;
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 8px;
font-weight: 500;
}
.side-menu .side-links {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 12px;
padding-bottom: 20px;
}
.side-menu .side-link {
color: #fff;
text-decoration: none;
padding: 14px 16px;
font-size: 1em;
border-radius: 6px;
margin: 1px 0;
font-weight: 500;
transition: background 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
flex-shrink: 0;
}
.side-menu .side-link.active,
.side-menu .side-link:hover {
background: #204d74;
outline: none;
}
.side-menu .side-link:focus-visible {
outline: 2px solid #b3e5fc;
outline-offset: -2px;
}
.theme-dropdown {
position: relative;
margin: 4px 12px 8px 12px;
flex-shrink: 0;
}
.theme-toggle {
color: #fff;
text-decoration: none;
padding: 14px 16px;
font-size: 1em;
border-radius: 6px;
font-weight: 500;
transition: background 0.2s ease;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 44px;
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
}
.theme-toggle:hover,
.theme-toggle:focus {
background: #204d74;
outline: none;
}
.theme-toggle .arrow {
transition: transform 0.2s ease;
font-size: 0.8em;
}
.theme-toggle.active .arrow {
transform: rotate(180deg);
}
.theme-options {
display: none;
background: #1a4a6b;
border-radius: 6px;
margin-top: 4px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.theme-options.show {
display: block;
animation: slideDown 0.2s ease;
}
@keyframes slideDown {
from {
  opacity: 0;
  transform: translateY(-10px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}
.theme-option {
color: #fff;
text-decoration: none;
padding: 12px 20px;
font-size: 0.95em;
font-weight: 500;
transition: background 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
min-height: 40px;
}
.theme-option:hover,
.theme-option:focus {
background: #204d74;
outline: none;
}
.theme-option.active {
background: #204d74;
position: relative;
}
.theme-option.active::after {
content: '';
margin-left: auto;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-color);
}

/* Main container styling */
.container {
max-width: var(--desktop);
margin: 24px auto;
background: var(--theme-surface);
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
padding: 24px;
min-height: 60vh;
flex: 1 0 auto;
width: calc(100% - 32px);
transition: background-color 0.3s ease;
}

/* Page Header */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}

.page-title {
font-size: 2em;
font-weight: 600;
color: var(--theme-text);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}

.page-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}

.btn {
padding: 10px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 0.95em;
transition: all 0.2s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}

.btn-primary {
background: var(--success-color);
color: #fff;
}

.btn-primary:hover {
background: #2e7d32;
transform: translateY(-1px);
}

.btn-secondary {
background: var(--secondary-color);
color: #fff;
}

.btn-secondary:hover {
background: #204d74;
transform: translateY(-1px);
}

/* Summary Cards */
.summary-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}

.summary-card {
background: var(--table-bg);
border: 1px solid var(--theme-border);
border-radius: 8px;
padding: 20px;
text-align: center;
transition: transform 0.2s ease;
}

.summary-card:hover {
transform: translateY(-2px);
}

.summary-value {
font-size: 1.8em;
font-weight: 700;
color: var(--theme-text);
margin-bottom: 4px;
}

.summary-label {
font-size: 0.9em;
color: var(--theme-text-secondary);
font-weight: 500;
}

.summary-card.active .summary-value {
color: var(--secondary-color);
}

.summary-card.completed .summary-value {
color: var(--success-color);
}

.summary-card.outstanding .summary-value {
color: var(--danger-color);
}

/* Filter Controls */
.filter-controls {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
align-items: center;
}

.filter-select {
padding: 8px 12px;
border: 1px solid var(--theme-border);
border-radius: 6px;
background: var(--theme-surface);
color: var(--theme-text);
font-size: 0.9em;
}

.filter-select:focus {
outline: none;
border-color: var(--secondary-color);
box-shadow: 0 0 0 2px rgba(40, 96, 144, 0.2);
}

/* Table Styles */
.table-container {
background: var(--theme-surface);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border: 1px solid var(--theme-border);
overflow-x: auto;
}

.recovery-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95em;
background: var(--theme-surface);
min-width: 1280px;
}

.recovery-table th {
background: var(--table-header-bg);
color: var(--theme-text);
font-weight: 600;
padding: 16px 12px;
text-align: left;
border-bottom: 2px solid var(--theme-border);
font-size: 0.9em;
white-space: nowrap;
}

.recovery-table td {
padding: 12px;
border-bottom: 1px solid var(--theme-border);
color: var(--theme-text);
vertical-align: middle;
}

.recovery-table tbody tr {
cursor: pointer;
transition: background 0.2s;
}

.recovery-table tbody tr:hover {
background: var(--table-bg);
}

.recovery-table tr:last-child td {
border-bottom: none;
}

.recovery-table a {
color: var(--secondary-color);
text-decoration: none;
font-weight: 500;
}

.recovery-table a:hover {
text-decoration: underline;
}

/* Route cell - pickup -> dropoff */
.route-cell {
font-size: 0.85em;
color: var(--theme-text-secondary);
line-height: 1.4;
max-width: 240px;
}
.route-cell .route-from,
.route-cell .route-to {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.route-cell .route-arrow {
color: var(--secondary-color);
font-weight: 600;
}

/* Vehicle reg badge */
.vehicle-reg {
background: #ffd400;
color: #000;
font-family: "UKNumberPlate", "Charles Wright", monospace;
font-weight: 700;
padding: 3px 8px;
border-radius: 3px;
font-size: 0.85em;
letter-spacing: 0.5px;
text-transform: uppercase;
display: inline-block;
border: 1px solid #c8a800;
}

/* Status badges */
.status-badge {
padding: 4px 8px;
border-radius: 4px;
font-size: 0.85em;
font-weight: 500;
text-align: center;
min-width: 80px;
display: inline-block;
white-space: nowrap;
}

.status-pending {
background: rgba(255, 193, 7, 0.1);
color: #f57c00;
border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-dispatched {
background: rgba(33, 150, 243, 0.1);
color: #1976d2;
border: 1px solid rgba(33, 150, 243, 0.3);
}

.status-on-scene {
background: rgba(139, 92, 246, 0.1);
color: #7c3aed;
border: 1px solid rgba(139, 92, 246, 0.3);
}

.status-in-transit {
background: rgba(91, 192, 222, 0.15);
color: #0891b2;
border: 1px solid rgba(91, 192, 222, 0.4);
}

.status-completed {
background: rgba(67, 160, 71, 0.1);
color: var(--success-color);
border: 1px solid rgba(67, 160, 71, 0.3);
}

.status-cancelled {
background: rgba(158, 158, 158, 0.1);
color: #757575;
border: 1px solid rgba(158, 158, 158, 0.3);
}

/* Recovery type badges */
.recovery-type {
padding: 2px 6px;
border-radius: 3px;
font-size: 0.75em;
font-weight: 500;
text-transform: uppercase;
margin-left: 8px;
white-space: nowrap;
}
.recovery-type.breakdown { background: rgba(33, 150, 243, 0.15);  color: #1976d2; }
.recovery-type.accident  { background: rgba(244, 67, 54, 0.15);   color: #d32f2f; }
.recovery-type.transport { background: rgba(16, 185, 129, 0.15);  color: #059669; }
.recovery-type.scrap     { background: rgba(249, 115, 22, 0.15);  color: #ea580c; }
.recovery-type.impound   { background: rgba(139, 92, 246, 0.15);  color: #7c3aed; }
.recovery-type.jumpstart { background: rgba(234, 179, 8, 0.15);   color: #ca8a04; }
.recovery-type.tyre      { background: rgba(71, 85, 105, 0.15);   color: #334155; }
.recovery-type.fuel      { background: rgba(245, 158, 11, 0.15);  color: #b45309; }
.recovery-type.other     { background: rgba(100, 116, 139, 0.15); color: #475569; }

/* Loading state */
.loading-container {
text-align: center;
padding: 60px 20px;
color: var(--theme-text-secondary);
}

.loading-spinner {
display: inline-block;
width: 40px;
height: 40px;
border: 3px solid var(--border-color);
border-radius: 50%;
border-top-color: var(--secondary-color);
animation: spin 1s ease-in-out infinite;
}

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

.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--theme-text-secondary);
}

.empty-state-title {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 8px;
color: var(--theme-text);
}

.empty-state-cta {
margin-top: 20px;
}

/* Footer styling */
.footer {
background: var(--primary-color);
color: var(--accent-color);
font-size: 0.9em;
text-align: center;
padding: 20px 16px;
margin-top: auto;
letter-spacing: 0.3px;
border-top: 1px solid #2c5070;
width: 100%;
}
.footer a {
color: var(--accent-color);
text-decoration: none;
margin: 0 8px;
font-weight: 500;
transition: opacity 0.2s;
}
.footer a:hover {
opacity: 0.8;
text-decoration: underline;
}
.footer .sep {
color: #4fc3f7;
font-weight: 700;
margin: 0 8px;
}

/* Responsive styles */
@media (max-width: 1024px) {
.container {
  margin: 16px auto;
  padding: 20px;
  width: calc(100% - 24px);
}
/* v2 2026-06-23 Tue — drop summary cards to 2x2 here, not at 768px.
   At 769–1024px, four cards in one row were cramped enough that one
   wrapped to a 2nd row alone (the 3+1 layout). House rule for 4 cards
   is 4→2→1; this brings the 4→2 transition up to 1024px to match. */
.summary-cards {
  grid-template-columns: repeat(2, 1fr);
}
.recovery-table {
  font-size: 0.9em;
}
.recovery-table th,
.recovery-table td {
  padding: 10px 8px;
}
}

@media (max-width: 768px) {
.header {
  padding: 10px 12px;
  min-height: 56px;
}
.header .logo {
  font-size: 1.2em;
}
.header .logo img {
  height: 138px;
  width: 138px;
}
.container {
  margin: 12px auto;
  padding: 16px;
  width: calc(100% - 16px);
  border-radius: 6px;
}
.page-header {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.page-actions {
  justify-content: center;
}

.filter-controls {
  justify-content: center;
}
.recovery-table {
  min-width: 900px;
  font-size: 0.85em;
}
.recovery-table th,
.recovery-table td {
  padding: 8px 6px;
}
}

@media (max-width: 480px) {
body {
  font-size: 14px;
}
.header {
  padding: 8px 12px;
  min-height: 52px;
}
.header .logo {
  font-size: 1.1em;
}
.header .header-subtext {
  display: none;
}
.container {
  margin: 8px auto;
  padding: 12px;
  width: calc(100% - 12px);
  border-radius: 4px;
}
.page-title {
  font-size: 1.5em;
}
.btn {
  padding: 8px 12px;
  font-size: 0.9em;
}
.summary-cards {
  grid-template-columns: 1fr;
}
.recovery-table {
  font-size: 0.8em;
}
.recovery-table th,
.recovery-table td {
  padding: 6px 4px;
}
}

@media print {
.header,
.burger,
.side-menu,
.side-menu-backdrop,
.footer,
.page-actions {
  display: none !important;
}
.container {
  margin: 0;
  padding: 0;
  box-shadow: none;
  max-width: none;
  width: 100%;
}
}