/* Local font bundle for offline desktop usage */
@font-face {
  font-family: 'DM Sans';
  src: url('./assets/fonts/DM-Sans-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./assets/fonts/DM-Sans-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./assets/fonts/DM-Sans-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('./assets/fonts/JetBrainsMono-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('./assets/fonts/JetBrainsMono-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* CSS Custom Properties */
:root {
  --color-primary: #1e3a5f;
  --color-primary-dark: #0f2744;
  --color-primary-light: #2d5a8a;
  --color-accent: #f59e0b;
  --color-accent-dark: #d97706;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;
  
  --color-bg: #f8fafc;
  --color-bg-alt: #f1f5f9;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
}

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

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
}

html[data-brand-loading='true'] .logo,
html[data-brand-loading='true'] [data-brand-app-name] {
  visibility: hidden;
}

html[data-auth-loading='true'] body {
  visibility: hidden;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.login-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.login-card {
  max-width: 440px;
  width: 100%;
}

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

/* Navigation */
.navbar {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  padding: 0;
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  background-image: var(--brand-logo-image, url('./assets/brand/logo-mark.svg'));
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 8px;
}

.nav-links > li {
  flex: 0 0 auto;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius);
  transition: all 0.2s;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
}

.nav-links a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.nav-links a.active {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius);
  transition: all 0.2s;
  font-weight: 500;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.nav-dropdown-toggle.active {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  display: none;
  z-index: 160;
}

.nav-dropdown.open .nav-dropdown-menu {
  display: grid;
  gap: 4px;
}

.nav-dropdown-menu a {
  display: block;
  color: var(--color-text);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.nav-dropdown-menu a:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

.nav-dropdown-menu a.active {
  background: rgba(0, 129, 149, 0.08);
  color: var(--color-primary);
}

/* Main Content */
main {
  padding: var(--spacing-xl) 0;
  padding-top: var(--spacing-2xl);
  min-height: calc(100vh - 64px);
}

/* Page Header */
.page-header {
  margin-bottom: var(--spacing-xl);
  margin-top: var(--spacing-md);
}

.page-header h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.page-header p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

/* Hero Section */
.hero {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  margin-top: var(--spacing-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-xl);
  color: white;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: var(--spacing-md);
  position: relative;
}

.hero p {
  font-size: 1.2rem;
  opacity: 0.9;
  position: relative;
}

/* Quick Actions Grid */
.quick-actions {
  margin-bottom: var(--spacing-2xl);
  margin-top: var(--spacing-lg);
}

.quick-actions h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.action-card {
  background: var(--color-surface);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: all 0.3s;
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

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

.action-card:hover::before {
  transform: scaleX(1);
}

.action-card h4 {
  color: var(--color-primary);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.action-card p {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
  font-size: 0.95rem;
}

/* Stats Section */
.stats {
  margin-bottom: var(--spacing-2xl);
  margin-top: var(--spacing-lg);
}

.stats h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.stat-card {
  background: var(--color-surface);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-align: center;
  border: 1px solid var(--color-border);
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
  font-family: var(--font-mono);
}

.stat-label {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

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

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

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

.btn-primary {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}

.btn-primary:hover {
  background: var(--color-accent-dark);
}

.btn-secondary {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-border);
}

.btn-success {
  background: var(--color-success);
  color: white;
}

.btn-success:hover {
  background: #059669;
}

.btn-danger {
  background: var(--color-danger);
  color: white;
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-small {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.btn-icon {
  padding: 8px;
  min-width: 36px;
}

/* Forms */
.form-container {
  background: var(--color-surface);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  margin-top: var(--spacing-md);
}

.form-section {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
}

.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-section h3 {
  color: var(--color-primary);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.form-section h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background: var(--color-accent);
  border-radius: 2px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-row.three-col {
  grid-template-columns: repeat(3, 1fr);
}

.form-row.four-col {
  grid-template-columns: repeat(4, 1fr);
}

.form-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.form-group label {
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
  font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-bg);
  transition: all 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.form-group small {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.form-group small a {
  color: var(--color-info);
  text-decoration: none;
  font-weight: 500;
}

.form-group small a:hover {
  text-decoration: underline;
}

/* Autocomplete Dropdown */
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  margin-top: 4px;
  max-height: 250px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: none;
}

.autocomplete-dropdown.show {
  display: block;
}

.autocomplete-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover {
  background-color: var(--color-bg);
}

.form-error-summary {
  display: none;
  margin-bottom: var(--spacing-lg);
  padding: 14px 16px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: var(--radius);
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
}

.form-error-summary.show {
  display: block;
}

.form-error-summary ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.form-error-group + .form-error-group {
  margin-top: 12px;
}

.form-error-group-title {
  font-weight: 700;
  margin-top: 10px;
}

.form-error-summary__override {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(153, 27, 27, 0.18);
}

.form-error-summary__override .checkbox-group {
  margin-bottom: 10px;
}

.form-error-summary__note {
  margin-top: 10px;
  font-size: 0.92rem;
}

.trip-form-tabs {
  display: grid;
  gap: 20px;
}

.trip-form-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 4px;
}

.trip-form-tab {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.trip-form-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.trip-form-tab.active,
.trip-form-tab[aria-selected="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary-dark);
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.22);
}

.trip-form-panel[hidden] {
  display: none !important;
}

.phone-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.34 1.78.66 2.62a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.46-1.23a2 2 0 0 1 2.11-.45c.84.32 1.72.54 2.62.66A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  padding-left: 42px !important;
}

.searchable-select-native {
  display: none !important;
}

.searchable-select {
  position: relative;
}

.searchable-select-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
}

.searchable-select-input {
  width: 100%;
  padding-right: 48px;
}

.searchable-select-toggle {
  margin-left: -42px;
  width: 42px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.85rem;
}

.searchable-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1100;
  display: none;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.searchable-select.open .searchable-select-dropdown {
  display: block;
}

.searchable-select-option,
.searchable-select-empty {
  width: 100%;
  text-align: left;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 10px 12px;
  color: var(--color-text);
}

.searchable-select-option {
  cursor: pointer;
}

.searchable-select-option:hover,
.searchable-select-option.selected {
  background: var(--color-bg);
}

.searchable-select-empty {
  color: var(--color-text-muted);
}

.picker-text-input {
  cursor: text;
}

.picker-text-input[data-picker-type="date"] {
  cursor: pointer;
}

.picker-input-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.picker-input-shell .picker-text-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.picker-input-trigger {
  border: 1px solid var(--color-border);
  border-left: none;
  background: var(--color-bg);
  color: var(--color-text);
  padding: 0 14px;
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  cursor: pointer;
}

.picker-input-trigger:hover {
  background: var(--color-bg-alt);
}

.picker-popover {
  position: absolute;
  z-index: 1400;
}

.picker-shell {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.picker-header,
.picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.picker-footer {
  border-top: 1px solid var(--color-border);
  border-bottom: none;
}

.picker-header-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.picker-nav-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
}

.picker-date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding: 12px;
}

.picker-date-weekday {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.picker-date-cell {
  height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}

.picker-date-cell:hover {
  background: var(--color-bg);
}

.picker-date-cell-empty {
  pointer-events: none;
  visibility: hidden;
}

.picker-date-cell-today {
  border-color: var(--color-accent);
}

.picker-date-cell-selected {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.picker-time-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
}

.picker-time-option {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}

.picker-time-option small {
  color: var(--color-text-muted);
}

.picker-time-option:hover,
.picker-time-option-selected {
  background: var(--color-bg);
}

.required {
  color: var(--color-danger);
}

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

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-alt) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

input[type="checkbox"]:hover {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(0, 129, 149, 0.08);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.2 6.1 11.3 13 4.7' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'/%3E%3C/svg%3E");
  /* Position, repeat and size are repeated here on purpose, even though the
     base rule already sets them.

     Any rule that later uses the `background` SHORTHAND on a checkbox --
     `.filter-group input { background: var(--color-bg) }`,
     `.trip-card-selector { background: rgba(255,255,255,.98) }` -- silently
     resets all three to their initial values: repeat, 0% 0%, auto. The tick
     then tiles from the top-left corner, which reads as an off-centre
     checkmark with a second one appearing beside it.

     Declaring them on :checked fixes every such case at once, because
     `input[type="checkbox"]:checked` (0,2,1) outranks a `.class element`
     rule (0,1,1). Guarded by test/checkbox-rendering.test.js. */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

input[type="checkbox"]:active {
  transform: scale(0.96);
}

input[type="checkbox"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Checkbox Group */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.checkbox-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.checkbox-group label {
  margin-bottom: 0;
  cursor: pointer;
}

/* View Toggle */
.view-controls {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.view-toggle {
  display: flex;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 4px;
  border: 1px solid var(--color-border);
}

.view-toggle button {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: all 0.2s;
  font-family: inherit;
  font-size: 0.9rem;
}

.view-toggle button.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.view-toggle button:hover:not(.active) {
  color: var(--color-text);
}

/* Search and Filters */
.filters-container {
  background: var(--color-surface);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: var(--spacing-xl);
  margin-top: var(--spacing-md);
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  align-items: flex-end;
  border: 1px solid var(--color-border);
}

.filter-group {
  flex: 1;
  min-width: 200px;
}

/* A filters bar holding only the School Year group (Payments). Without this the
   lone group stretches to the full row width at flex:1. */
.school-year-only-filters {
  justify-content: flex-start;
}

.school-year-only-filters .school-year-filter {
  flex: 0 1 280px;
}

/* Inline hint under a form field (currently: which school year a reservation
   number files under). The warning variant is advisory only -- the server
   enforces the permission. */
.field-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* Doubled class on purpose: `.form-group small { color: var(--color-text-muted) }`
   is (0,1,1) and would otherwise win over a single class, leaving the warning
   the same muted colour as an ordinary hint. Verified in-browser -- it computed
   to rgb(79,95,140) before this. */
.field-hint.field-hint--warning {
  /* NOT var(--color-danger): brand theming resolves it to #d94d3f here, which
     measures 3.95:1 on the card background. This text is 0.78rem bold, so it is
     not "large" under WCAG and needs 4.5:1. #b42318 measures 6.28:1 on the card
     and 6.57:1 on white. Measured in-browser, not assumed -- the brand token's
     value is not what the stylesheet's own fallback suggests. */
  color: #b42318;
  font-weight: 600;
}

:root:not([data-theme="light"]) .field-hint.field-hint--warning,
:root[data-theme="dark"] .field-hint.field-hint--warning {
  /* The dark surface needs the light end of the same hue instead. */
  color: #ff9b8f;
}

/* School Year filter: the label and the all-years checkbox share one line, so
   this group is the same height as its siblings. The container aligns to
   flex-end, so an extra row here would lift this select above the others. */
.school-year-head {
  display: flex;
  align-items: center;
  /* flex-start, not space-between: the checkbox belongs beside its own label,
     not pushed to the group's far edge where it crowds the next filter. */
  justify-content: flex-start;
  gap: var(--spacing-md);
}

.school-year-head label {
  margin-bottom: var(--spacing-sm);
}

/* `.filter-group label` is display:block for field labels, which would stack
   this checkbox above its text and stretch it across the column. */
.school-year-legacy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

/* `.filter-group input, .filter-group select { width:100%; padding:10px 14px }`
   has the same specificity as the global `input[type="checkbox"]` rule and is
   declared later, so it wins and stretches this checkbox into an 86px box.
   Scoping through both classes outranks it. Verified in-browser: without this
   the checkbox computes to 86x22 instead of 18x18. */
.filter-group .school-year-legacy input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  flex: 0 0 auto;
}

.filter-group label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
  font-size: 0.9rem;
}

.filter-group input,
.filter-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--color-bg);
}

.filter-group input:focus,
.filter-group select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.search-box {
  position: relative;
  flex: 2;
  min-width: 300px;
}

.search-box input {
  width: 100%;
  padding: 10px 14px 10px 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--color-bg);
}

.search-box::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Sort Controls */
.sort-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.sort-controls label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.sort-controls select {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--color-surface);
}

.compact-control {
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.compact-control::placeholder {
  color: var(--color-text-light);
}

.compact-control:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.compact-control-wide {
  min-width: 220px;
}

.compact-control-narrow {
  width: 150px;
}

.compact-control-date {
  min-height: 36px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 0.85rem;
}

.bulk-actions-bar {
  margin-top: 14px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.bulk-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.bulk-actions-divider {
  width: 1px;
  height: 24px;
  background: var(--color-border);
  margin: 0 4px;
}

/* Trip Cards Grid */
.trips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--spacing-lg);
  align-items: start;
}

.trip-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: all 0.3s;
  border: 1px solid var(--color-border);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: auto;
}

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

.trip-card.cancelled {
  opacity: 0.6;
}

.trip-card.cancelled .trip-header {
  background: var(--color-text-muted);
}

.trip-header {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trip-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

.trip-card-selector {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: none;
}

.trip-card-selector:hover {
  border-color: white;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}

.trip-card-selector:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.trip-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.trip-badge-stack {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.badge-paid {
  background: var(--color-success);
  color: white;
}

.badge-unpaid {
  background: var(--color-warning);
  color: var(--color-primary-dark);
}

.badge-overdue {
  background: var(--color-danger);
  color: white;
}

.badge-cancelled {
  background: var(--color-text-muted);
  color: white;
}

.badge-confirmed {
  background: rgba(0, 159, 184, 0.14);
  color: var(--color-info);
  border: 1px solid rgba(0, 159, 184, 0.28);
}

.trip-body {
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface) 72%, var(--color-bg-alt) 100%);
}

.trip-field {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.trip-field:last-child {
  border-bottom: none;
}

.field-label {
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.field-value {
  color: var(--color-text);
  font-weight: 500;
  text-align: right;
  max-width: 60%;
}

.field-value-badges {
  max-width: none;
  text-align: left;
}

.field-value-muted {
  color: var(--color-text-muted);
}

.trip-field-wide {
  gap: 12px;
}

.trip-field-po {
  margin-top: var(--spacing-sm);
}

.trip-field-empty {
  padding: 14px 16px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-alt) 100%);
}

.trip-field-empty .field-label,
.trip-field-empty .field-value {
  color: var(--color-text-muted);
}

.trip-placeholder-chip,
.po-progress-chip {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.trip-placeholder-chip {
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  font-style: italic;
}

.po-progress-chip.done {
  color: #065f46;
  background: #d1fae5;
  border: 1px solid #10b981;
}

.po-progress-chip.pending {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #f59e0b;
}

.trip-actions {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-alt);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

/* Calendar View */
.calendar-container {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  margin-top: var(--spacing-md);
}

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

.calendar-header h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-primary);
}

.calendar-nav {
  display: flex;
  gap: var(--spacing-sm);
}

.calendar-nav button {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s;
}

.calendar-nav button:hover {
  background: var(--color-bg-alt);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.calendar-day-header {
  background: var(--color-primary);
  color: white;
  padding: 12px;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
}

.calendar-day {
  background: var(--color-surface);
  min-height: 100px;
  padding: var(--spacing-sm);
  position: relative;
}

.calendar-day.other-month {
  background: var(--color-bg-alt);
}

.calendar-day.today {
  background: rgba(245, 158, 11, 0.1);
}

.calendar-date {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.calendar-day.today .calendar-date {
  color: var(--color-accent);
}

.calendar-day-summary {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.calendar-event {
  background: var(--color-primary-light);
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  margin-bottom: var(--spacing-xs);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s;
}

.calendar-event:hover {
  background: var(--color-primary);
}

.calendar-event.needs-reconfirm {
  background: var(--color-warning);
  color: var(--color-primary-dark);
}

.calendar-event.cancelled {
  background: var(--color-text-muted);
  text-decoration: line-through;
}

.calendar-more {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.day-trip-summary {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

/* Upcoming Trips Sidebar */
.upcoming-trips {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  margin-bottom: var(--spacing-lg);
}

.upcoming-trips h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

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

.upcoming-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.upcoming-item:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-accent);
}

.upcoming-item.needs-reconfirm {
  border-left: 4px solid var(--color-warning);
}

.upcoming-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius);
  padding: var(--spacing-sm);
}

.upcoming-date .month {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 600;
}

.upcoming-date .day {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.upcoming-info {
  flex: 1;
}

.upcoming-info h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

.upcoming-info p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.reconfirm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--color-warning);
  color: var(--color-primary-dark);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: var(--spacing-sm);
}

/* Payment Section */
.payment-section {
  margin-bottom: var(--spacing-2xl);
}

.payment-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin-top: var(--spacing-md);
}

.payment-header {
  background: var(--color-bg-alt);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-header h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary);
}

.payment-body {
  padding: var(--spacing-lg);
}

/* Trip Count */
.trip-count {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.trips-table-shell {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

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

.trips-table th {
  white-space: nowrap;
}

.trip-table-row {
  cursor: pointer;
}

.trip-table-row td {
  vertical-align: middle;
}

.trip-table-row-cancelled {
  opacity: 0.7;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background-color: var(--color-surface);
  margin: 3% auto;
  padding: 0;
  border-radius: var(--radius-xl);
  width: 90%;
  max-width: 700px;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s ease-out;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

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

.modal-content.modal-large {
  max-width: 900px;
}

.modal-content.modal-xl {
  max-width: 1100px;
}

.modal-content.modal-small {
  max-width: 480px;
}

.modal-content.modal-print-preview {
  max-width: 95vw;
  width: 95vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Groups a header's affirmative action with the close button so the two sit
   together on the right of the space-between header. */
.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* An affirmative button sitting ON the modal header, which paints
   var(--color-primary). Brand theming can set that to any saturated color, so
   this uses a solid white surface with primary-colored text rather than a
   tinted overlay: white-on-brand stays legible whatever the brand color turns
   out to be, where a translucent fill's contrast would depend entirely on it. */
.btn.btn-on-header {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.9);
  font-weight: 700;
  white-space: nowrap;
}

.btn.btn-on-header:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.88);
}

.btn.btn-on-header:disabled {
  opacity: 0.65;
  cursor: default;
}

.modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  /* Wrap, always. With justify-content:flex-end and nowrap, a footer that
     outgrows its width pushes the overflow off the START edge -- buttons land
     at negative x where they cannot even be scrolled to. Measured on a 390px
     viewport: Payment sat at x:-174 and Close at x:-55, leaving the header X as
     the only way to dismiss the dialog. Guarded by test/modal-mobile-layout.test.js. */
  flex-wrap: wrap;
}

/* Below this width the footer is a stack, not a row: six side-by-side buttons
   shrink past the point of being readable or tappable long before they fit. */
@media (max-width: 640px) {
  .modal-footer {
    justify-content: stretch;
  }

  .modal-footer button,
  .modal-footer .btn {
    /* Two per row, not one. A details footer can carry six buttons; stacked
       full-width they took 357px of an 844px phone screen -- 42% -- and pushed
       the trip's own details off the fold. Two-up halves that while leaving each
       button ~170px wide, well clear of a comfortable touch target. */
    flex: 1 1 calc(50% - var(--spacing-md));
    min-width: 0;
    /* Overrides the desktop `margin-right: auto` some footers use to push one
       button away from the destructive group; in a stack it would add a gap. */
    margin-right: 0 !important;
  }
}

.close,
.modal-close {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: white;
  font-size: 28px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.88;
  transition: opacity 0.2s, background-color 0.2s, transform 0.2s, box-shadow 0.2s;
  line-height: 1;
}

.close:hover,
.modal-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.close:focus-visible,
.modal-close:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
}

/* Trip Details Modal */
.trip-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.detail-group {
  padding: var(--spacing-md);
  background: var(--color-bg);
  border-radius: var(--radius);
}

.detail-group.full-width {
  grid-column: 1 / -1;
}

.detail-group h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.detail-group p {
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 500;
}

/* Document Buttons */
.document-actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.document-btn {
  flex: 1;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.document-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
}

.document-btn svg {
  width: 32px;
  height: 32px;
  fill: var(--color-primary);
}

.document-btn span {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
}

/* Data List */
.data-list {
  list-style: none;
  max-height: 300px;
  overflow-y: auto;
}

.data-list li {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.data-list li:last-child {
  border-bottom: none;
}

/* Selectable Table */
.selectable-table {
  width: 100%;
  border-collapse: collapse;
}

.selectable-table th,
.selectable-table td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.selectable-table th {
  background: var(--color-bg-alt);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}

.selectable-table tr:hover {
  background: var(--color-bg);
}

.selectable-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* No Data */
.no-data {
  text-align: center;
  padding: 60px var(--spacing-lg);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
}

.no-data-icon {
  width: 80px;
  height: 80px;
  background: var(--color-bg-alt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
}

.no-data-icon svg {
  width: 40px;
  height: 40px;
  fill: var(--color-text-muted);
}

.no-data h3 {
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

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

.no-data a {
  color: var(--color-info);
  text-decoration: none;
  font-weight: 500;
}

.no-data a:hover {
  text-decoration: underline;
}

/* Messages/Toasts */
.message {
  position: fixed;
  top: 80px;
  right: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  animation: slideIn 0.3s ease-out;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-weight: 500;
}

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

.message-success {
  background: var(--color-success);
  color: white;
}

.message-error {
  background: var(--color-danger);
  color: white;
}

.message-warning {
  background: var(--color-warning);
  color: var(--color-primary-dark);
}

.message-info {
  background: var(--color-info);
  color: white;
}

/* Dashboard Layout */
.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-lg);
}

.dashboard-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* Alerts */
.alert-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-warning);
  margin-bottom: var(--spacing-lg);
}

.alert-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.alert-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.alert-count {
  background: var(--color-warning);
  color: var(--color-primary-dark);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Two Column Layout */
.two-column {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--spacing-lg);
}

/* Settings Page */
.settings-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--spacing-xl);
  min-height: 600px;
  margin-top: var(--spacing-md);
}

.settings-nav {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  padding: var(--spacing-md);
}

.settings-nav-item {
  display: block;
  width: 100%;
  padding: var(--spacing-md);
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: var(--spacing-xs);
}

.settings-nav-item:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.settings-nav-item.active {
  background: var(--color-primary);
  color: white;
}

.settings-content {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  padding: var(--spacing-xl);
}

.settings-section {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
}

.settings-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.settings-section h3 {
  font-size: 1.15rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

/* Daily Sheet Styles */
.daily-sheet-controls {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-end;
  margin-bottom: var(--spacing-xl);
  margin-top: var(--spacing-md);
  flex-wrap: wrap;
  background: var(--color-surface);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}

.daily-sheet-badge-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 220px;
}

.daily-sheet-control-label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
  font-size: 0.9rem;
}

.daily-sheet-type-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
}

.daily-sheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.daily-sheet-table th,
.daily-sheet-table td {
  border: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
}

.daily-sheet-table th {
  background: var(--color-primary);
  color: white;
  font-weight: 600;
}

.daily-sheet-table tr:nth-child(even) {
  background: var(--color-bg);
}

.daily-sheet-table input {
  width: 100%;
  padding: var(--spacing-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: inherit;
}

.print-sheet-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.2fr);
  gap: var(--spacing-lg);
  align-items: start;
}

.print-preview-card {
  min-height: 760px;
}

.print-preview-body {
  padding: var(--spacing-lg) !important;
  height: 720px;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--color-bg-alt);
}

.print-preview-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

/* Touch targets. An 18px checkbox is comfortable with a mouse and fiddly with a
   thumb; row-selection checkboxes have no label to widen the target either.
   Bumped rather than redesigned: the background-position/repeat/size on
   :checked are what keep the tick centred at any size, so this stays a size
   change and nothing more. */
@media (max-width: 640px) {
  input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }

  /* The tick size lives on :checked (0,2,1), which outranks the bare element
     rule above -- a media query adds no specificity of its own. Without this the
     tick stays 12px inside a 24px box and looks lost. */
  input[type="checkbox"]:checked {
    background-size: 16px 16px;
  }

  /* Two rules size checkboxes more specifically than the bare element selector
     above, and a media query adds NO specificity -- so each must be matched or
     those checkboxes stay 18px while the rest grow. Row-selection checkboxes in
     a table are the ones that most need the bigger target, having no label to
     widen it. */
  .filter-group .school-year-legacy input[type="checkbox"],
  .selectable-table input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }
}

/* A card body holding a wide table must be able to scroll sideways, or the
   right-hand columns are simply unreachable -- the page itself does not scroll,
   so the table is clipped rather than pannable. Measured at 390px: the
   organizations table reached x:579 and contacts x:630 with nothing able to
   scroll to them. payments.html already set this inline; this makes it the rule
   rather than something each page has to remember. */
.payment-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* On a phone the preview iframe is NOT narrowed to the screen. A letter-width
   document (816px at 96dpi) squeezed into ~370px reflows catastrophically --
   measured on a 390px viewport, table cells wrapped to one character per line,
   so the preview bore no resemblance to the printed page.

   Instead the frame keeps its true page width and is scaled down as a whole, so
   the preview stays a faithful miniature. --print-preview-scale is set by
   showPrintPreview() from the container width; the fallback suits a 390px
   phone if that ever fails to run. */
@media (max-width: 640px) {
  .print-preview-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .print-preview-frame {
    width: 816px;
    min-width: 816px;
    height: 1056px;
    transform: scale(var(--print-preview-scale, 0.45));
    transform-origin: top left;
    box-shadow: none;
  }

  /* The preview header carries a title, a timestamp toggle, an invoice-date
     field and page navigation. Both the header AND the inner control group must
     wrap: wrapping only the outer one still ran the buttons to x:545 on a 390px
     screen, because they live in a nested flex row of their own. */
  .modal-print-preview .modal-header,
  .modal-print-preview .modal-header > div {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .modal-print-preview .modal-header input[type="text"],
  .modal-print-preview .modal-header input[type="date"] {
    min-width: 0;
    max-width: 100%;
  }
}

/* Modifier for print-preview viewers embedded in a modal (trips.html,
   daily-sheets.html). The modal's flex column (.modal-content.modal-print-preview)
   sizes .modal-body via `flex: 1` with a 0% flex-basis, so the fixed
   `height: 720px` from .print-preview-body is never used as the item's main
   size there -- but we override it explicitly to `auto` anyway so the modal's
   sizing isn't left to depend on that flex-basis nuance. */
.print-preview-body--modal {
  height: auto;
}

.selected-print-row {
  background: rgba(0, 129, 149, 0.08) !important;
}

/* Address Autocomplete */
.address-input-wrapper {
  position: relative;
}

.address-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
}

.address-suggestion {
  padding: var(--spacing-md);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.2s;
}

.address-suggestion:last-child {
  border-bottom: none;
}

.address-suggestion:hover {
  background: var(--color-bg);
}

.saved-address-suggestions {
  z-index: 120;
}

/* Travel Time Display */
.travel-time-info {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

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

.travel-time-item svg {
  width: 20px;
  height: 20px;
  fill: var(--color-primary);
}

.travel-time-item span {
  font-weight: 500;
  color: var(--color-text);
}

.travel-time-item small {
  color: var(--color-text-muted);
  margin-left: var(--spacing-xs);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }
  
  .two-column {
    grid-template-columns: 1fr;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }

  .settings-nav-item {
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .navbar .container {
    flex-direction: column;
    height: auto;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
  }

  .nav-dropdown-menu {
    right: auto;
    left: 0;
  }

  .hero h2 {
    font-size: 1.8rem;
  }

  .action-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .trips-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-row.three-col,
  .form-row.four-col {
    grid-template-columns: 1fr;
  }

  .filters-container {
    flex-direction: column;
  }

  .daily-sheet-controls {
    align-items: stretch;
  }

  .daily-sheet-badge-group {
    min-width: unset;
  }

  .print-sheet-layout {
    grid-template-columns: 1fr;
  }

  .print-preview-card {
    min-height: 640px;
  }

  .print-preview-body {
    height: 600px;
  }

  .filter-group,
  .search-box {
    width: 100%;
    min-width: unset;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
  }

  .modal-content {
    width: 95%;
    margin: 10px auto;
    max-height: calc(100vh - 20px);
  }

  .trip-details-grid {
    grid-template-columns: 1fr;
  }

  .calendar-grid {
    font-size: 0.8rem;
  }

  .calendar-day {
    min-height: 60px;
    padding: var(--spacing-xs);
  }

  .document-actions {
    flex-direction: column;
  }

  .document-btn {
    min-width: unset;
  }
}

/* Print Styles */
@media print {
  .navbar,
  .form-actions,
  .trip-actions,
  .document-actions,
  .view-controls,
  .filters-container {
    display: none !important;
  }
  
  body {
    background: white;
  }
  
  .container {
    max-width: 100%;
    padding: 0;
  }

  .modal-content {
    box-shadow: none;
    border: none;
  }
}

/* ==========================================================================
   Create-trip combobox (V3 organization / contact picker)
   Search input + always-below listbox. The hidden <select> still carries the
   form value and keeps the existing test/quick-add contract intact.
   ========================================================================== */

.combobox {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.combobox-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.combobox-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.combobox-input:disabled {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.combobox-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.combobox-toggle:hover:not(:disabled) {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

.combobox-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.combobox[data-open="true"] .combobox-toggle {
  transform: translateY(-50%) rotate(180deg);
}

.combobox-listbox {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.combobox-listbox[hidden] {
  display: none;
}

.combobox-option {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
}

.combobox-option[aria-selected="true"] {
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-weight: 600;
}

.combobox-option.is-active,
.combobox-option:hover {
  background: var(--color-primary);
  color: #fff;
}

.combobox-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--color-text-muted);
  font-style: italic;
  cursor: not-allowed;
}

.combobox-hidden-select {
  /* Keep the <select> in the DOM for form serialization + tests, but
     remove it from the visible layout. `display: none` is the simplest way
     that still lets required validation + `.options` inspection work. */
  display: none !important;
}

/* ============================================================
   Pickup Stops (multi-pickup trips) — reorderable stop cards.
   Used on create-trip, edit-trip, and shuttle/multi-day legs.
   ============================================================ */

.pickup-stop-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.pickup-stop-card--compact {
  padding: 10px 12px;
  border-left-width: 3px;
}

.pickup-stop-card[draggable="true"] {
  cursor: grab;
}

.pickup-stop-card--dragging {
  opacity: 0.55;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  cursor: grabbing;
}

.pickup-stop-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pickup-stop-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
}

.pickup-stop-card__drag {
  display: inline-flex;
  width: 20px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 14px;
  cursor: grab;
}

.pickup-stop-card__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pickup-stop-card__actions .btn {
  padding: 4px 10px;
  min-width: 0;
}

.pickup-stops-sublist {
  display: flex;
  flex-direction: column;
}

.return-stops-preview {
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.return-stops-preview__list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--color-text);
}

.return-stops-preview__list li {
  margin-bottom: 6px;
}

.pricing-default-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pricing-default-btn.is-selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 129, 149, 0.16);
}

.pricing-default-btn.is-selected:hover,
.pricing-default-btn.is-selected:focus {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}

.pricing-default-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.updates-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.updates-panel__subtitle {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.updates-view-switcher {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.updates-view-switcher .btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.updates-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.updates-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.updates-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.updates-card__date {
  margin: 0 0 6px;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.updates-card h4 {
  margin: 0;
  color: var(--color-primary);
  font-size: 1.1rem;
}

.updates-card__summary {
  margin: 0;
  color: var(--color-text);
  line-height: 1.6;
}

.updates-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.updates-status--todo {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.updates-status--current {
  background: rgba(0, 129, 149, 0.12);
  color: var(--color-primary);
}

.updates-status--completed {
  background: rgba(5, 150, 105, 0.14);
  color: #047857;
}

.updates-empty {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 22px 18px;
  color: var(--color-text-muted);
  text-align: center;
  background: var(--color-bg);
}

.audit-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.audit-view-switcher {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.audit-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.audit-panel h3 {
  margin-bottom: 8px;
}

.audit-panel p {
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.audit-panel form,
.audit-panel .audit-panel-controls {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}

.audit-panel .form-group {
  flex: 1 1 220px;
  margin-bottom: 0;
}

.audit-notice {
  display: none;
  margin-bottom: 20px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 12%, white);
}

.audit-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audit-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.audit-pagination__label {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.audit-reservation-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.audit-reservation-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
}

.audit-reservation-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.audit-reservation-timeline {
  border-top: 1px solid var(--color-border);
  padding: 0 20px 20px;
}

.audit-entry-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.audit-entry {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  padding: 16px;
}

.audit-entry-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 12px;
}

.audit-entry-meta {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.audit-entry-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.audit-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--color-primary-light, rgba(0, 0, 0, 0.06));
  color: var(--color-primary);
}

.audit-change-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.audit-change-row {
  border-left: 3px solid var(--color-border);
  padding-left: 12px;
}

.audit-change-path {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--color-text);
}

.audit-change-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.audit-change-box {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.audit-change-box strong {
  display: block;
  margin-bottom: 4px;
}

.audit-value {
  font-family: var(--font-mono);
  word-break: break-word;
}

.audit-entry-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.audit-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 24px 12px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

@media (max-width: 720px) {
  .audit-reservation-header,
  .audit-entry-header {
    flex-direction: column;
    align-items: stretch;
  }

  .audit-change-values {
    grid-template-columns: 1fr;
  }
}

/* ===== Quotes feature ===== */
.record-type-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.record-type-toggle__label {
  font-weight: 600;
  color: var(--color-text-muted);
}
.record-type-toggle__options {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.record-type-toggle__btn {
  border: none;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  padding: 6px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.record-type-toggle__btn + .record-type-toggle__btn {
  border-left: 1px solid var(--color-border);
}
.record-type-toggle__btn.is-active {
  background: var(--color-primary);
  color: #fff;
}
.record-type-toggle__btn[data-record-type="quote"].is-active {
  background: var(--color-accent);
}
.record-type-toggle__hint {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Quote mode tints the form so it is obvious you are not booking a reservation. */
.form-container.quote-mode {
  box-shadow: inset 0 0 0 2px var(--color-accent);
  background: #fffbeb;
}

/* Quote badge reused across calendar, trips list, and inbox. */
.quote-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Quote events on the calendar are visually distinct from reservations. */
.calendar-event.is-quote,
.calendar-trip.is-quote,
.trip-pill.is-quote {
  background: #fff7ed !important;
  border: 1px dashed var(--color-accent) !important;
  color: var(--color-accent-dark) !important;
}

/* Record-type filter shared by calendar + trips list. */
.record-type-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.record-type-filter button {
  border: none;
  background: var(--color-surface);
  color: var(--color-text-muted);
  padding: 6px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.record-type-filter button + button {
  border-left: 1px solid var(--color-border);
}
.record-type-filter button.is-active {
  background: var(--color-primary);
  color: #fff;
}
.record-type-filter button[data-record-type="quote"].is-active {
  background: var(--color-accent);
}

/* =====================================================================
   UI Overhaul 2026 - additive enhancement layer
   ---------------------------------------------------------------------
   Appended last so it augments (not replaces) the existing components.
   Brand-agnostic: only references runtime brand vars + neutral rgba, so
   the brand pipeline and built tailwind.css stay brand-independent.
   Safe to remove this whole block to revert to the prior look.
   ===================================================================== */

:root {
  /* Softer, layered elevation for a more modern surface feel. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06);
  --ring-accent: 0 0 0 3px color-mix(in srgb, var(--color-accent) 45%, transparent);
  --transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Accessible focus rings everywhere keyboard users land. */
.btn:focus-visible,
.nav-links a:focus-visible,
.nav-dropdown-toggle:focus-visible,
.calendar-nav button:focus-visible,
.record-type-filter button:focus-visible,
.upcoming-item:focus-visible {
  outline: none;
  box-shadow: var(--ring-accent);
}

/* Buttons: subtle depth + smoother motion. */
.btn {
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    background-color var(--transition-base);
}
.btn-primary,
.btn-success,
.btn-danger {
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover {
  box-shadow: var(--shadow-md);
}

/* Stat cards: accent rail + lift, monospace value pops. */
.stat-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-primary-light));
  opacity: 0.85;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Alert cards: tinted surface so they read as call-outs, not plain cards. */
.alert-card {
  background: color-mix(in srgb, var(--color-warning) 7%, var(--color-surface));
}

/* Calendar: rounded cells, clearer today, lifted event chips. */
.calendar-grid {
  gap: 1px;
  border: 1px solid var(--color-border);
}
.calendar-day {
  transition: background-color var(--transition-base);
}
.calendar-day:hover {
  background: var(--color-bg-alt);
}
.calendar-day.today {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.calendar-day-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.calendar-event {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    background-color var(--transition-base);
}
.calendar-event:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Upcoming list items: smoother hover affordance. */
.upcoming-item {
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    background-color var(--transition-base), border-color var(--transition-base);
}
.upcoming-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.upcoming-date {
  background: linear-gradient(160deg, var(--color-primary-light), var(--color-primary));
}

/* Navbar active pill gets a touch of depth. */
.nav-links a.active,
.nav-dropdown-toggle.active {
  box-shadow: var(--shadow-sm);
}

/* Honor reduced-motion preferences: drop lifts and transitions. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .stat-card,
  .action-card,
  .calendar-event,
  .calendar-day,
  .upcoming-item {
    transition: none !important;
  }
  .btn:hover,
  .stat-card:hover,
  .action-card:hover,
  .calendar-event:hover,
  .upcoming-item:hover {
    transform: none !important;
  }
}

/* =====================================================================
   UI Overhaul 2026 - BOLD addendum
   ---------------------------------------------------------------------
   Higher-contrast, clearly-visible restyle on top of the subtle layer.
   Still brand-agnostic (runtime vars + color-mix) and behavior-neutral.
   ===================================================================== */

/* Ambient, brand-tinted page background instead of a flat fill. */
body {
  background:
    radial-gradient(1100px 560px at 100% -8%,
      color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 60%),
    radial-gradient(820px 460px at -8% 2%,
      color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 55%),
    var(--color-bg);
  background-attachment: fixed;
}

/* Navbar: deeper gradient + glow so it anchors the page. */
.navbar {
  background: linear-gradient(120deg,
    var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--color-primary-light) 130%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--color-primary) 32%, transparent);
}

/* Hero: bigger, richer, with depth. */
.hero {
  padding: 64px 40px;
  background: linear-gradient(135deg,
    var(--color-primary-dark) 0%, var(--color-primary) 45%, var(--color-primary-light) 120%);
  box-shadow: 0 24px 50px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.hero h2 {
  font-size: 3rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.22);
}
.hero p { font-size: 1.3rem; }

/* Page + section headings get an accent bar so structure reads instantly. */
.page-header h2 { font-size: 2.25rem; letter-spacing: -0.01em; }
.quick-actions h3,
.stats h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.4rem;
}
.quick-actions h3::before,
.stats h3::before {
  content: '';
  width: 6px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-primary-light));
}

/* Surfaces: rounder corners + a real drop shadow. */
.action-card,
.stat-card,
.alert-card,
.upcoming-trips,
.calendar-container,
.form-container,
.payment-card,
.settings-nav {
  border-radius: 18px;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* Stat cards: full-width gradient cap, larger numerals. */
.stat-card { padding: 28px 24px; }
.stat-card::before {
  inset: 0 0 auto 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary-light));
  opacity: 1;
}
.stat-value { font-size: 3rem; }

/* Primary actions become gradient pills; all buttons get a pill radius. */
.btn { border-radius: 999px; }
.btn-primary {
  background: linear-gradient(120deg, var(--color-accent), var(--color-accent-dark));
  color: var(--color-primary-dark);
}
.btn-primary:hover {
  background: linear-gradient(120deg, var(--color-accent-dark), var(--color-accent));
}

/* Calendar reads as a richer board. */
.calendar-day { min-height: 118px; }
.calendar-event {
  padding: 5px 9px;
  font-size: 0.78rem;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

/* Navbar active item pops against the deeper bar. */
.nav-links a.active,
.nav-dropdown-toggle.active {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* Trip price history (payments Mismatches tab + trip details modal) */
.price-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.price-history__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.price-history__amount {
  font-variant-numeric: tabular-nums;
}

.price-history__amount--old {
  color: var(--color-text-muted);
}

.price-history__amount--current {
  color: var(--color-text);
}

.price-history__meta,
.price-history__empty {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.price-history__empty {
  margin: 0;
}

.price-history__error {
  margin: 0;
  color: var(--color-danger);
  font-size: 0.85rem;
}

.price-history-group + .price-history-group {
  margin-top: 12px;
}

.price-history-group h5 {
  margin: 0 0 6px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Payments page tab-strip */
.payments-view-switcher {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.payments-view-switcher .btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.payments-view-switcher .trip-count {
  margin-left: 6px;
}

/* Payments Mismatches tab */
.mismatch-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  background: #fef3c7;
  color: #92400e;
}

.mismatch-badge--per-trip-allocation {
  background: #dbe4ee;
  color: #173b63;
}

.mismatch-diff {
  font-weight: 700;
  white-space: nowrap;
}

.mismatch-diff--short {
  color: var(--color-danger);
}

.mismatch-diff--over {
  color: var(--color-warning);
}

/* Reconciles exactly at the payment level (flagged for allocation only). */
.mismatch-diff--even {
  color: var(--color-text-muted);
}

/* Price history, Acknowledge and Edit share one cell, and are allowed to wrap
   onto a second line, so the table stays narrow enough that its actions are
   reachable without horizontal scrolling. Forcing them onto one line pushed
   this column to ~366px and the actions off-screen entirely. */
.mismatch-actions-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  max-width: 180px;
}

.mismatch-acknowledged-note {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.mismatch-price-history-body {
  padding: 12px 4px;
}