/* CSS Design System - โรงเรียนมหาชนะชัย (Mahachana Chai School Vehicle Booking) */

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

:root {
  /* Color Palette - MCMATH school identity */
  --primary-blue: #c41f2a;
  --primary-hover: #9e141d;
  --primary-light: #fef2f2;
  --primary-border: #fca5a5;
  
  --secondary-amber: #d97706;
  --secondary-hover: #b45309;
  --secondary-light: #fffbeb;

  --accent-green: #15803d;
  --accent-green-light: #f0fdf4;
  --accent-red: #dc2626;

  --bg-gradient: linear-gradient(180deg, #fcedee 0%, #fff0f1 16%, #fff8f8 38%, #fbfbfc 100%);
  --card-bg: #ffffff;
  --text-main: #0f172a;
  --text-muted: #475569;
  --border-color: #cbd5e1;

  /* Senior & High Accessibility Defaults */
  --font-base: 'Sarabun', sans-serif;
  --font-heading: 'Kanit', sans-serif;
  --font-scale: 1rem; /* 16px default base */
  --touch-target: 56px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-card: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 20px 30px -10px rgba(196, 31, 42, 0.2);
}

/* Senior High Contrast / Extra Large Mode */
body.senior-mode {
  --font-scale: 1.2rem;
  --touch-target: 64px;
  --text-main: #000000;
  --text-muted: #1e293b;
  --border-color: #64748b;
  --primary-blue: #7f1019;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-base);
  font-size: var(--font-scale);
  color: var(--text-main);
  background: var(--bg-gradient);
  min-height: 100vh;
  line-height: 1.6;
  padding-bottom: 60px;
}

/* Header & Top Bar */
.app-header {
  background: linear-gradient(135deg, #881722 0%, #c41f2a 100%);
  color: #ffffff;
  padding: 16px 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 14px;
}

.school-badge {
  width: 52px;
  height: 52px;
  background: #ffffff;
  color: #881722;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border: 2px solid #fbbf24;
}

.brand-titles h1 {
  font-family: var(--font-heading);
  font-size: calc(1.4rem * var(--font-scale));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.brand-titles p {
  font-size: calc(0.95rem * var(--font-scale));
  opacity: 0.9;
  color: #e0e7ff;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-senior-toggle {
  background: #fbbf24;
  color: #78350f;
  border: 2px solid #f59e0b;
  padding: 8px 16px;
  border-radius: 30px;
  font-family: var(--font-heading);
  font-size: calc(0.95rem * var(--font-scale));
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-senior-toggle:hover {
  background: #f59e0b;
  color: #ffffff;
  transform: translateY(-2px);
}

/* Navigation Tabs */
.app-tabs {
  max-width: 1000px;
  margin: 20px auto 0;
  padding: 0 16px;
  display: flex;
  gap: 10px;
}

.tab-btn {
  flex: 1;
  background: #ffffff;
  color: var(--text-muted);
  border: 2px solid var(--border-color);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: calc(1.1rem * var(--font-scale));
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch-target);
  transition: all 0.2s ease;
}

.tab-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary-border);
  color: var(--primary-blue);
}

.tab-btn.active {
  background: var(--primary-blue);
  color: #ffffff;
  border-color: var(--primary-blue);
  box-shadow: 0 6px 15px rgba(196, 31, 42, 0.3);
}

/* Main Container Layout */
.main-wrapper {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 16px;
}

/* Wizard Card Container */
.wizard-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 2px solid #e2e8f0;
  overflow: hidden;
}

/* Wizard Top Control Bar */
.wizard-topbar {
  background: #f8fafc;
  padding: 16px 24px;
  border-bottom: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-back-global {
  background: #fef08a;
  color: #854d0e;
  border: 2px solid #eab308;
  padding: 10px 22px;
  border-radius: 40px;
  font-family: var(--font-heading);
  font-size: calc(1.15rem * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--touch-target);
  box-shadow: 0 4px 10px rgba(234, 179, 8, 0.25);
  transition: all 0.2s ease;
}

.btn-back-global:hover {
  background: #fde047;
  color: #713f12;
  transform: translateX(-3px);
}

.step-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-pill {
  background: var(--primary-light);
  color: var(--primary-blue);
  border: 1.5px solid var(--primary-border);
  padding: 6px 16px;
  border-radius: 30px;
  font-family: var(--font-heading);
  font-size: calc(1.05rem * var(--font-scale));
  font-weight: 700;
}

.step-title-header {
  font-family: var(--font-heading);
  font-size: calc(1.25rem * var(--font-scale));
  font-weight: 700;
  color: var(--text-main);
}

/* Step Progress Bar */
.progress-container {
  width: 100%;
  background: #e2e8f0;
  height: 10px;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #e4525c 0%, #9e141d 100%);
  width: 12.5%; /* 1 of 8 = 12.5% */
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wizard Body */
.wizard-body {
  padding: 32px 24px;
}

.step-content-box {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.step-content-box.active {
  display: block;
}

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

.step-prompt {
  margin-bottom: 24px;
  border-left: 6px solid var(--primary-blue);
  padding-left: 16px;
}

.step-prompt h2 {
  font-family: var(--font-heading);
  font-size: calc(1.5rem * var(--font-scale));
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 4px;
}

.step-prompt p {
  font-size: calc(1.05rem * var(--font-scale));
  color: var(--text-muted);
}

/* STEP 1: VEHICLES GRID */
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.vehicle-card {
  background: #ffffff;
  border: 3px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25 ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.vehicle-card:hover {
  border-color: var(--primary-blue);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.vehicle-card.selected {
  border-color: var(--primary-blue);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(196, 31, 42, 0.3);
}

.vehicle-img-wrapper {
  height: 180px;
  width: 100%;
  background: #f1f5f9;
  position: relative;
  overflow: hidden;
}

.vehicle-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge-capacity {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #881722;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: calc(0.95rem * var(--font-scale));
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.vehicle-info {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vehicle-name {
  font-family: var(--font-heading);
  font-size: calc(1.35rem * var(--font-scale));
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.vehicle-plate {
  font-size: calc(1.05rem * var(--font-scale));
  color: #c41f2a;
  font-weight: 600;
  margin-bottom: 12px;
}

.vehicle-features {
  list-style: none;
  margin-bottom: 16px;
}

.vehicle-features li {
  font-size: calc(0.95rem * var(--font-scale));
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.btn-select-vehicle {
  width: 100%;
  background: var(--primary-blue);
  color: #ffffff;
  border: none;
  padding: 12px;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: calc(1.15rem * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch-target);
  transition: background 0.2s;
}

.vehicle-card.selected .btn-select-vehicle {
  background: var(--accent-green);
}

/* STEP 2: DATES & TIMES */
.date-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.date-card {
  background: #f8fafc;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
}

.date-card label {
  display: block;
  font-family: var(--font-heading);
  font-size: calc(1.2rem * var(--font-scale));
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 10px;
}

.input-datetime {
  width: 100%;
  font-family: var(--font-base);
  font-size: calc(1.2rem * var(--font-scale));
  font-weight: 600;
  padding: 14px;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  background: #ffffff;
  min-height: var(--touch-target);
}

.preset-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.btn-preset {
  background: #ffffff;
  border: 2px solid #cbd5e1;
  color: var(--text-main);
  padding: 8px 14px;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: calc(0.95rem * var(--font-scale));
  font-weight: 600;
  cursor: pointer;
}

.btn-preset:hover {
  border-color: var(--primary-blue);
  background: var(--primary-light);
  color: var(--primary-blue);
}

/* STEP 3: DRIVER SELECTION */
.driver-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.driver-card {
  background: #ffffff;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s;
}

.driver-card:hover {
  border-color: var(--primary-blue);
  background: var(--primary-light);
}

.driver-card.selected {
  border-color: var(--primary-blue);
  background: var(--primary-light);
  box-shadow: 0 0 0 2px var(--primary-blue);
}

.driver-radio {
  width: 28px;
  height: 28px;
  accent-color: var(--primary-blue);
  cursor: pointer;
}

.driver-info {
  flex: 1;
}

.driver-name {
  font-family: var(--font-heading);
  font-size: calc(1.25rem * var(--font-scale));
  font-weight: 700;
  color: var(--text-main);
}

.driver-role {
  font-size: calc(1.05rem * var(--font-scale));
  color: var(--text-muted);
}

/* STEP 4 & 5: DESTINATION & PURPOSE FORM */
.form-large-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-large-group label {
  font-family: var(--font-heading);
  font-size: calc(1.3rem * var(--font-scale));
  font-weight: 700;
  color: var(--text-main);
}

.input-large-text {
  width: 100%;
  font-family: var(--font-base);
  font-size: calc(1.25rem * var(--font-scale));
  padding: 16px 20px;
  border: 3px solid var(--border-color);
  border-radius: var(--radius-md);
  min-height: var(--touch-target);
  background: #ffffff;
}

.input-large-text:focus {
  border-color: var(--primary-blue);
  outline: none;
  box-shadow: 0 0 0 4px rgba(196, 31, 42, 0.15);
}

.quick-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.suggestion-chip {
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: calc(1.05rem * var(--font-scale));
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}

.suggestion-chip:hover {
  background: #e2e8f0;
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

/* STEP 6: DEPARTMENT SELECTION */
.department-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.department-card {
  background: #ffffff;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s;
}

.department-card:hover {
  border-color: var(--primary-blue);
  background: var(--primary-light);
  transform: translateY(-2px);
}

.department-card.selected {
  border-color: var(--primary-blue);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(196, 31, 42, 0.25);
}

.dep-icon {
  font-size: 32px;
}

.dep-name {
  font-family: var(--font-heading);
  font-size: calc(1.15rem * var(--font-scale));
  font-weight: 700;
  color: var(--text-main);
}

/* STEP 7: PASSENGERS NAME LIST */
.passenger-name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.passenger-name-card {
  background: #ffffff;
  border: 3px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.passenger-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.passenger-card-title {
  font-family: var(--font-heading);
  font-size: calc(1.25rem * var(--font-scale));
  font-weight: 700;
  color: var(--primary-blue);
}

.badge-count-pill {
  background: #fef2f2;
  color: #c41f2a;
  border: 1.5px solid #fca5a5;
  padding: 4px 14px;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--font-scale));
  font-weight: 700;
}

.input-large-textarea {
  width: 100%;
  font-family: var(--font-base);
  font-size: calc(1.15rem * var(--font-scale));
  line-height: 1.6;
  padding: 16px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: #f8fafc;
  resize: vertical;
  min-height: 140px;
}

.input-large-textarea:focus {
  border-color: var(--primary-blue);
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 4px rgba(196, 31, 42, 0.15);
}

.passenger-summary-badge {
  margin-top: 24px;
  background: var(--secondary-light);
  border: 2px solid var(--secondary-amber);
  color: var(--secondary-amber);
  padding: 14px 20px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: calc(1.2rem * var(--font-scale));
  font-weight: 700;
  width: 100%;
  text-align: center;
}

/* STEP 8: REQUESTER FORM */
.requester-form-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-family: var(--font-heading);
  font-size: calc(1.15rem * var(--font-scale));
  font-weight: 700;
  color: var(--text-main);
}

/* SUMMARY PAGE */
.summary-container {
  background: #f8fafc;
  border: 3px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 28px;
}

.summary-header-badge {
  background: #881722;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: calc(1.3rem * var(--font-scale));
  font-weight: 700;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.summary-item-card {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  position: relative;
}

.summary-label {
  font-size: calc(0.95rem * var(--font-scale));
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.summary-value {
  font-family: var(--font-heading);
  font-size: calc(1.25rem * var(--font-scale));
  font-weight: 700;
  color: var(--text-main);
}

.btn-edit-step {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #c41f2a;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: calc(0.85rem * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
}

.btn-edit-step:hover {
  background: var(--primary-light);
  border-color: var(--primary-blue);
}

/* WIZARD NAVIGATION BUTTONS */
.wizard-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.btn-wizard {
  padding: 16px 32px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: calc(1.3rem * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--touch-target);
  transition: all 0.2s ease;
  border: none;
}

.btn-wizard-prev {
  background: #e2e8f0;
  color: #334155;
  border: 2px solid #cbd5e1;
}

.btn-wizard-prev:hover {
  background: #cbd5e1;
  color: #0f172a;
}

.btn-wizard-next {
  background: var(--primary-blue);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(196, 31, 42, 0.3);
}

.btn-wizard-next:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}

.btn-wizard-submit {
  background: var(--accent-green);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(21, 128, 61, 0.35);
  width: 100%;
}

.btn-wizard-submit:hover {
  background: #166534;
  transform: translateY(-2px);
}

/* CALENDAR & LIST TABS */
.schedule-view, .history-view {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  border: 2px solid #e2e8f0;
}

.booking-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.booking-table th, .booking-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1.5px solid #e2e8f0;
  font-size: calc(1rem * var(--font-scale));
}

.booking-table th {
  font-family: var(--font-heading);
  background: #f8fafc;
  color: var(--primary-blue);
  font-size: calc(1.1rem * var(--font-scale));
  font-weight: 700;
}

.status-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-size: calc(0.9rem * var(--font-scale));
}

.status-approved {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.status-pending {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde047;
}

/* MODAL CONFIRMATION */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 16px;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  padding: 32px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  text-align: center;
  animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.success-icon {
  width: 80px;
  height: 80px;
  background: #dcfce7;
  color: #166534;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 20px;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 640px) {
  .app-header {
    padding: 12px 16px;
  }
  .wizard-topbar {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-back-global {
    width: 100%;
    justify-content: center;
  }
  .wizard-footer {
    flex-direction: column-reverse;
  }
  .btn-wizard {
    width: 100%;
  }
}

/* School crest shared with the MCMATH registration app */
.school-badge { background: #fff; border: 0; padding: 4px; flex: 0 0 52px; }
.school-badge img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Keep navigation and actions usable on narrow phones. */
@media (max-width: 640px) {
  .brand-section { min-width: 0; }
  .brand-titles h1 { font-size: 1.15em; overflow-wrap: anywhere; }
  .top-actions { flex-wrap: wrap; width: 100%; }
  .app-tabs { flex-direction: column; }
  .tab-btn { min-height: 48px; padding: 10px; }
  .app-header { position: static; }
  .fc .fc-toolbar { flex-wrap: wrap; gap: 12px; }
}
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid #881722; outline-offset: 3px; }
[hidden] { display: none !important; }

@media (max-width: 640px) { .wizard-body { padding: 16px; } .summary-header-badge { gap: 12px; flex-wrap: wrap; } }

/* Admin resource management */
.resource-button,.resource-primary,.resource-secondary,.resource-close,.resource-tab { font: inherit; cursor: pointer; border-radius: 9px; padding: 9px 14px; }
.resource-button,.resource-primary { color:#fff; background:#a6192e; border:1px solid #a6192e; font-weight:700; }
.resource-secondary,.resource-close,.resource-tab { color:#71303a; background:#fff; border:1px solid #e5cbd0; }
.resource-dialog { width:min(760px,calc(100% - 24px)); max-height:min(calc(100vh - 24px),900px); margin:auto; padding:0; border:0; border-radius:18px; box-shadow:0 20px 70px #35000c55; color:#253044; }
.resource-dialog::backdrop { background:#18060bb8; }
.resource-header { display:flex; align-items:start; justify-content:space-between; gap:16px; padding:22px 24px; border-bottom:1px solid #f0e3e5; }
.resource-header h2 { margin:0; font-size:1.25rem; color:#881722; }.resource-header p { margin:5px 0 0; color:#64748b; font-size:.9rem; }
.resource-body { padding:20px 24px 24px; }.resource-tabs,.resource-controls,.resource-actions,.resource-pagination { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.resource-tabs { margin-bottom:16px; }.resource-tab.active { background:#fbeaec; border-color:#a6192e; color:#881722; font-weight:700; }
.resource-controls { margin-bottom:16px; }.resource-controls input { flex:1; min-width:180px; }
.resource-controls input,.resource-field input,.resource-field select { width:100%; padding:10px 12px; border:1px solid #cbd5e1; border-radius:9px; font:inherit; background:white; }
.resource-list { border-top:1px solid #eee; }.resource-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid #eee; }.resource-row p { margin:3px 0 0; color:#64748b; font-size:.85rem; }
.resource-pagination { justify-content:center; margin-top:16px; font-size:.9rem; }.resource-empty { padding:24px 0; color:#64748b; }.resource-error { color:#a6192e; }.resource-success { color:#176b46; font-weight:700; }
.resource-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.resource-field { display:grid; gap:5px; font-weight:600; font-size:.9rem; }.resource-actions { grid-column:1 / -1; justify-content:flex-end; margin-top:16px; }.resource-review { display:grid; grid-template-columns:minmax(130px,1fr) 2fr; gap:10px; }.resource-review dt { color:#64748b; }.resource-review dd { margin:0; overflow-wrap:anywhere; }.resource-dialog button:disabled { opacity:.5; cursor:not-allowed; }.resource-dialog :focus-visible { outline:3px solid #ea8d42; outline-offset:2px; }
@media(max-width:600px) { .resource-header,.resource-body { padding:16px; }.resource-form { grid-template-columns:1fr; }.resource-controls input { flex-basis:100%; }.resource-tabs { display:grid; grid-template-columns:repeat(2,1fr); }.resource-review { grid-template-columns:1fr; gap:3px; }.resource-review dd { margin-bottom:8px; } }

.vehicle-avatar-preview { width: 160px; height: 96px; object-fit: contain; border-radius: 12px; }