/* United Cars / light grey, white and blue, matching the approved booking palette.
   Shared by booking, operations and confirmation. */
@font-face {
  font-family: "Dubai";
  src: url("assets/fonts/dubai/Dubai-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  --canvas: #ffffff;
  --surface-dark: #ffffff;
  --surface-raised: #f9f9fb;
  --line-dark: #d5d7dc;
  --on-dark: #17191c;
  --muted-dark: #626975;
  --accent: #0057ff;
  --accent-hover: #1f71ff;
  --ink: #1c2426;
  --muted: #5e686b;
  --slate: #5e686b;
  --line: #d5d7dc;
  --cloud: #e9eaed;
  --card: #e9eaed;
  --white: #fff;
  --blue: #0057ff;
  --blue-dark: #073fc4;
  --blue-soft: #dce9ff;
  --green: #0057ff;
  --red: #b22d3b;
  --amber: #9c690e;
  --radius: 22px;
  --control-radius: 12px;
  --control-border: #d5d7dc;
  --control-border-hover: #9aa3b1;
  --control-fill: #f9f9fb;
  --control-focus: #4f7cff80;
  --control-shadow: none;
  --action-shadow: none;
  --display: "Dubai", "Tajawal", Arial, sans-serif;
  --body: "Tajawal", Arial, sans-serif;
  --app-max-width: 1320px;
}
html { background: var(--canvas); color-scheme: light; }
body { background: var(--canvas); color: var(--ink); font-size: 16px; line-height: 1.65; }
button, input, select, textarea { font-family: var(--body); }
h1, h2, h3 { font-family: var(--display); text-transform: none; letter-spacing: normal; line-height: 1.4; }
html[lang="ar"] :is(h1,h2,h3,.stat-grid strong) { font-family: var(--display); letter-spacing: normal; line-height: 1.4; }
html[lang="ar"] :is(label,legend,dt,th,button) { letter-spacing: normal; }
input, select, textarea, time, .amount, .price-value { font-variant-numeric: tabular-nums; }
::selection { background: var(--accent); color: var(--canvas); }
:root :is(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid #4f7cff;
  outline-offset: 3px;
  box-shadow: none;
}
:root :is(button,a) { -webkit-tap-highlight-color: transparent; }
:root a.app-icon-action { color: var(--blue-dark); }
:root :is(.primary-action,.auth-submit,.show-cars-button,.select-button,.continue-button,.save-trip,
  .reservation-lookup-submit,.document-viewer-print,.reference-panel button,.confirmation-actions a,
  .customer-reservation-link,.customer-access-dialog [data-save],.support-actions a:first-child) {
  background: var(--accent);
  color: var(--canvas);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  box-shadow: none;
  font-weight: 700;
  min-height: 44px;
}
:root :is(.primary-action,.auth-submit,.show-cars-button,.select-button,.continue-button,.save-trip,
  .reservation-lookup-submit,.document-viewer-print,.reference-panel button,.confirmation-actions a,
  .customer-reservation-link,.customer-access-dialog [data-save],.support-actions a:first-child):hover:not(:disabled) {
  background: var(--accent-hover); color: var(--canvas); box-shadow: none;
}
:root :is(.language-icon-button,.icon-action,.modal-head button,.dialog-head button,.drawer-close,
  .customer-detail-head > button,.customer-blacklist-dialog header > button) { min-width: 44px; min-height: 44px; border-radius: 12px; }
:root :is(.auth-panel,.trip-dialog,.vehicle-dialog,.customer-access-dialog,.selection-drawer,
  .customer-blacklist-dialog,.customer-detail-dialog,.document-viewer) {
  color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 24px 90px #0005;
}
:root dialog::backdrop { background: #080c12b8; backdrop-filter: blur(5px); }
:root :is(.trip-dialog,.vehicle-dialog,.customer-detail-dialog,.customer-access-dialog) :is(h2,h3) { line-height: 1.4; }
:root :is(.auth-panel,.driver-fields,.form-grid,.dialog-grid,.customer-form-grid,.customer-side-panel,
  .loyalty-panel,.customer-tools,.promotion-settings-form,.assignment-select) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  border-color: var(--control-border); background: var(--control-fill); color: var(--ink); border-radius: 12px;
  font-size: 16px; box-shadow: none;
}
:root :is(.auth-panel,.driver-fields,.form-grid,.dialog-grid,.customer-form-grid,.customer-side-panel,
  .loyalty-panel,.customer-tools,.promotion-settings-form,.assignment-select) :is(input:not([type="checkbox"]):not([type="radio"]),select) { min-height: 48px; }
:root input::placeholder, :root textarea::placeholder { color: #687475; opacity: 1; }
:root input[type="checkbox"], :root input[type="radio"] { accent-color: #0057ff; }
.eyebrow,.auth-panel-head p,.modal-head p,.panel-head p,.settings-card-head p,
.customer-detail-head p,.customer-blacklist-dialog header p { color: var(--blue); letter-spacing: normal; }
.field-help,.warning-copy,.customer-form-grid label,.customer-side-panel label,
.customer-activity time,.customer-activity li p,.blacklist-entry p { color: var(--muted); }
.customer-phone-call { color: var(--blue); }
.customer-phone-call:hover { background: var(--blue-soft); }
.customer-detail-shell { background: var(--cloud); }
.customer-detail-head { padding-bottom: 14px; }
.customer-record-form,.customer-side-panel,.customer-rentals,.customer-activity { border-radius: 20px; }
.toast,.confirmation-toast { border: 1px solid var(--line-dark); border-radius: 14px; background: var(--surface-dark); color: var(--on-dark); font-size: 14px; }

/* Light navigation shell; preserve RTL order and the mobile drawer. */
.admin-shell { background: var(--canvas); gap: 8px; }
.admin-main { color: var(--on-dark); padding-inline: 28px; }
.sidebar { background: var(--canvas); padding-inline: 16px; border-inline-end: 1px solid var(--line-dark); }
.side-brand { border-color: var(--line-dark); padding-bottom: 22px; }
.side-logo { width: 150px; }
.side-brand small { color: var(--muted-dark); font-size: 11px; letter-spacing: normal; }
.side-nav { gap: 9px; }
.nav-item { min-height: 48px; border-radius: 14px; color: var(--muted-dark); font-size: 16px; }
.nav-item b { background: var(--surface-raised); color: var(--on-dark); font-size: 11px; min-height: 22px; }
.nav-item:hover { background: var(--surface-dark); }
.nav-item.active { background: var(--accent); color: var(--canvas); box-shadow: none; }
.nav-item.active b { background: #0d2f8a1a; color: var(--canvas); }
.side-bottom > a,.side-bottom > button { color: var(--muted-dark); font-size: 14px; border-radius: 12px; }
:root .side-language { color: var(--accent)!important; }
.admin-user { border-color: var(--line-dark); }
.admin-user > span { background: var(--surface-raised); color: var(--accent); }
.admin-user strong { font-size: 12px; }
.admin-user small { color: var(--muted-dark); }
.admin-header { min-height: 108px; border-color: var(--line-dark); gap: 16px; }
.admin-header h1 { color: var(--on-dark); font-size: 34px; }
.admin-header p { color: var(--muted-dark); font-size: 12px; }
.admin-search { background: var(--surface-dark); border: 1px solid var(--line-dark); border-radius: 14px; box-shadow: none; }
.admin-search input { background: transparent; color: var(--on-dark); }
.admin-search svg { stroke: var(--muted-dark); }
:root .admin-search input::placeholder { color: var(--muted-dark); }
.live-pill { color: var(--accent); background: #0057ff12; border: 1px solid #0057ff26; border-radius: 20px; }
.live-pill i { background: var(--accent); animation: none; }
.loading-bar span { background: var(--accent); }
.view { padding-top: 18px; }
.page-breadcrumbs { color: var(--muted-dark); }
.page-breadcrumbs :is(a,button) { color: var(--muted-dark); }
.page-breadcrumbs [aria-current] { color: var(--on-dark); }
.page-breadcrumbs :is(a,button):hover { background: var(--surface-raised); color: var(--accent); }
.admin-main > .page-breadcrumbs { margin-block: 12px 20px; }
.settings-tabs { background: var(--surface-dark); border-color: var(--line-dark); border-radius: 18px; padding: 6px; }
.settings-tabs [role="tab"] { color: var(--muted-dark); border-radius: 12px; }
.settings-tabs [role="tab"]:hover { color: var(--on-dark); background: var(--surface-raised); }
.settings-tabs [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--canvas); box-shadow: none; }
.section-toolbar > div > p { color: var(--accent); }
.section-toolbar label { color: var(--muted-dark); }
.section-toolbar select { min-height: 44px; font-size: 14px; }
.reservation-lookup { background: var(--surface-dark); color: var(--on-dark); border-color: var(--line-dark); border-radius: 22px; padding: 22px; margin-bottom: 20px; }
.reservation-lookup-copy h2,.reservation-lookup-field { color: var(--on-dark); }
.reservation-lookup-copy p,.reservation-lookup-results > p { color: var(--muted-dark); }
.reservation-lookup-results { border-color: var(--line-dark); }
.reservation-lookup-result { background: var(--white); border-radius: 16px; }
.reservation-lookup-result:hover { background: var(--blue-soft); border-color: var(--accent); }
.reservation-lookup-error { color: #b42318; }
.stat-grid { gap: 14px; }
.stat-grid article { background: var(--surface-dark); border: 1px solid var(--line-dark); border-radius: 22px; padding: 22px; }
.stat-grid article:first-child { background: var(--accent); color: var(--canvas); border-color: var(--accent); }
.stat-grid article:first-child::after { display: none; }
.stat-grid p,.stat-grid span { color: var(--muted-dark); letter-spacing: normal; }
.stat-grid strong { font-size: 38px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-grid b { color: inherit; }
.stat-grid article:first-child :is(p,span,b,strong) { color: #fff; }
.overview-grid { gap: 16px; margin-top: 20px; }
.panel,.data-table-wrap,.promotion-settings-form,.promotion-settings-preview,.table-empty { color: var(--ink); background: var(--white); border-color: var(--line); border-radius: 22px; }
.panel { padding: 24px; }
.panel-head { align-items: center; gap: 12px; }
.panel-head h2,.section-toolbar h2 { font-size: 25px; line-height: 1.4; }
.compact-booking { padding-block: 17px; gap: 12px; font-size: 14px; }
.compact-booking strong { font-size: 14px; }
.compact-booking small { font-size: 12px; }
.status-badge { font-size: 12px; letter-spacing: normal; border-radius: 8px; }
.data-table-wrap { overflow: auto; }
th { background: var(--cloud); color: var(--muted); letter-spacing: normal; text-align: start; }
td { font-size: 14px; padding-block: 16px; }
tbody tr:hover,.booking-row:hover,.booking-row:focus-within { background: var(--blue-soft); }
.vehicle-cell strong,.customer-cell strong { font-size: 14px; }
.inline-select,.assignment-button { font-size: 13px; min-height: 44px; border-radius: 10px; }
.table-actions { gap: 8px; }
.customer-card-container { background: var(--white); color: var(--ink); border-radius: 22px; border: 1px solid var(--line); box-shadow: none; }
.customer-card-container:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); transform: none; }
.customer-card-head { margin-bottom: 16px; }
.customer-card-block { width: 44px; height: 44px; }
.customer-tools input { background: var(--surface-dark); border-color: var(--line-dark); color: var(--on-dark); }
:root .customer-tools input { background: var(--surface-dark); border-color: var(--line-dark); color: var(--on-dark); }
:root .customer-tools input::placeholder { color: var(--muted-dark); }
.customer-empty { color: var(--ink); }
.loyalty-layout { gap: 18px; }
.loyalty-panel { min-height: 0; }
.loyalty-layout > .loyalty-panel:first-child { border-top: 4px solid var(--accent); }
.loyalty-example { background: var(--blue-soft); color: var(--blue-dark); border-radius: 12px; }
.loyalty-picker [role="option"]:hover,.loyalty-picker [role="option"].is-active { background: var(--blue-soft); color: var(--blue-dark); }
.loyalty-balance { background: var(--surface-dark); color: var(--on-dark); border-radius: 14px; padding: 16px; }
.loyalty-balance strong { color: var(--accent); font-size: 32px; }
.loyalty-notice { color: #4f79df; }
.loyalty-notice.error { color: #ffb3ad; }
.loyalty-history a { color: var(--blue-dark); }
.loyalty-badge { border-radius: 10px; }
.customer-loyalty-summary { background: var(--surface-dark); color: var(--on-dark); border-color: var(--line-dark); }
.customer-loyalty-summary dt { color: var(--muted-dark); }
.customer-loyalty-points { color: var(--accent); }
.customer-loyalty-summary dl > div + div { border-color: var(--line-dark); }
html[dir] .admin-auth { background: var(--canvas); }
.auth-panel { border-top: 5px solid var(--accent); }
.auth-security { color: var(--muted-dark); }

/* Booking: white planner, grey surround and blue primary actions. */
.site-header,.confirmation-header { height: 84px; padding-inline: 24px; background: var(--cloud); border-bottom: 1px solid var(--line-dark); color: var(--on-dark); }
.brand-logo,.confirmation-logo,.auth-logo { background: var(--white); border-radius: 12px; padding: 5px 9px; height: 56px; }
.header-actions { gap: 12px; }
.site-header .text-button,.site-header .text-button::after { color: var(--on-dark); font-size: 14px; }
.site-header .menu-button { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-dark); padding: 12px; }
.site-header .menu-button span { background: var(--on-dark); }
.site-header .language-icon-button,.confirmation-header .language-icon-button { color: var(--accent); background: var(--surface-dark); border-color: var(--line-dark); box-shadow: none; }
.mobile-menu { top: 78px; border-radius: 16px; }
.mobile-menu a,.mobile-menu button { font-size: 16px; min-height: 44px; text-align: start; }
.reservation-search-section { background: var(--cloud); padding-block: 12px 24px; }
.reservation-search-shell { background: var(--surface-dark); border: 1px solid var(--line-dark); border-radius: 24px; box-shadow: none; }
.reservation-search-form { background: var(--surface-dark); color: var(--on-dark); padding: 26px; }
.reservation-search-form :is(.reservation-field,.reservation-datetime-group legend) { color: var(--on-dark); }
.reservation-search-form .different-location-toggle { color: var(--muted-dark); }
.reservation-search-form .reservation-input-shell { background: var(--surface-raised); border-color: var(--line-dark); color: var(--on-dark); box-shadow: none; }
.reservation-search-form .reservation-input-shell :is(input,select) { color: var(--on-dark); background: transparent; font-size: 16px; color-scheme: light; }
.reservation-search-form select option { color: var(--on-dark); background: var(--surface-dark); }
.reservation-search-form .reservation-input-shell svg { stroke: var(--muted-dark); }
.reservation-search-form .trip-search-error { color: #b42318; }
.reservation-search-form .text-button { color: var(--accent); }
.reservation-promotion { border-color: var(--line-dark); background: var(--surface-raised); }
.reservation-contact { background: var(--surface-dark); color: var(--on-dark); border-color: var(--line-dark); }
.reservation-contact-link { background: #f2f6ff; color: var(--blue); border-color: #d4e0ff; border-radius: 14px; }
.reservation-contact-link.whatsapp { background: #eefaf3; color: #08783e; border-color: #c8e8d6; }
.reservation-contact-link svg { color: var(--accent); }
.reservation-contact-link.whatsapp svg { color: #08783e; }
.show-cars-button { margin-top: 8px; }
.different-location-toggle input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
.fleet-section { width: min(var(--app-max-width),calc(100% - 32px)); margin-inline: auto; padding: 22px 22px 30px; border: 0; border-radius: 28px; background: var(--white); min-height: 0; }
.controls-bar { background: transparent; padding-bottom: 18px; }
.filter-control { background: var(--control-fill); border-color: var(--line); border-radius: 12px; box-shadow: none; }
.sort-control { background: #1c1c1f; color: #fff; border-radius: 12px; box-shadow: none; }
.sort-control select { color: #fff; }
.sort-control select option { color: var(--ink); background: #fff; }
.car-grid { gap: 18px; }
.car-card { border: 1px solid var(--line); background: var(--cloud); border-radius: 20px; min-height: 0; }
.card-head h2 { font-family: var(--display); font-size: 26px; line-height: 1.4; }
.card-head p:last-child { color: var(--muted); font-size: 14px; }
.car-visual { border-radius: 16px; background: var(--white); }
.car-visual img { filter: none; }
.car-features { gap: 8px; }
.feature { color: var(--muted); background: #dcdfe4; font-size: 12px; }
.card-footer { padding: 18px; }
.price-value { font-size: 32px; }
.total-rate,.per-day { color: var(--muted); font-size: 13px; }
.support-section { border: 0; background: transparent; color: var(--on-dark); padding-block: 32px; }
.support-section p { color: var(--accent); }
.support-section span { color: var(--muted-dark); }
.support-actions a { color: var(--on-dark); border-color: var(--line-dark); border-radius: 12px; }
.support-actions a span { color: inherit; }
.site-footer { color: var(--muted-dark); background: transparent; border-color: var(--line-dark); font-size: 13px; }
.site-footer button { color: var(--accent); }
.auth-mode-switch,.reservation-tabs { background: var(--cloud); }
.auth-mode-switch button.active,.reservation-tabs button.active { background: var(--surface-dark); color: var(--on-dark); box-shadow: none; }
.reservation-tabs button.active b { color: var(--canvas); background: var(--accent); }
.time-pill { background: var(--blue-soft); color: var(--blue-dark); }
.progress-list li,.progress-step-button { border-radius: 12px; }

/* Confirmation retains the light document palette. */
.confirmation-main { margin-block: 24px 48px; }
.confirmation-card { padding: 30px; border-radius: 28px; box-shadow: none; }
.confirmation-title h1,html[dir="rtl"] .confirmation-title h1 { font-family: var(--display); font-size: 36px; }
.reference-panel { background: var(--surface-dark); border-color: var(--surface-dark); border-radius: 20px; padding: 24px; }
.reference-panel strong { color: var(--on-dark); font-family: var(--body); line-height: 1.4; }
.reference-panel span { color: var(--accent); }
.reference-panel p { color: var(--muted-dark); font-size: 13px; }
.summary-grid { background: var(--cloud); border-radius: 18px; }
.summary-item { padding: 18px; }
.confirmation-section { margin-top: 26px; padding-top: 24px; }
.confirmation-section h2 { font-family: var(--display); font-size: 22px; }
.trip-columns time { color: var(--blue-dark); background: var(--blue-soft); border-radius: 10px; }
.detail-list div { padding-block: 14px; }
.document-card { border-radius: 20px; }
.document-preview { border-radius: 14px; }
.document-preview-caption { background: var(--blue-soft); color: var(--blue-dark); font-size: 16px; }
.confirmation-loading,.confirmation-error { color: var(--on-dark); }
.confirmation-error p { color: var(--muted-dark); }
.confirmation-error a { color: var(--accent); }
.confirmation-actions { justify-content: flex-end; }

@media (max-width:1100px) and (min-width:761px) {
  .admin-shell { grid-template-columns: 200px minmax(0,1fr); }
  .admin-main { padding-inline: 20px; }
  .admin-header h1 { font-size: 28px; }
  .admin-header > div:first-of-type { min-width: 0; }
  .nav-item { padding-inline: 8px; }
}
@media (max-width:760px) {
  .admin-shell { gap: 0; }
  .admin-main { padding-inline: 14px; }
  .admin-header { min-height: 80px; }
  .admin-header h1 { font-size: 26px; }
  .sidebar { background: var(--canvas); }
  .stat-grid { gap: 10px; }
  .stat-grid article { padding: 16px; border-radius: 18px; }
  .stat-grid strong { font-size: 28px; }
  .panel,.loyalty-panel { padding: 18px; border-radius: 20px; }
  .reservation-lookup { padding: 18px; }
  .customer-detail-dialog { border-radius: 0; }
  .customer-detail-head { background: var(--cloud); }
  .site-header,.confirmation-header { height: 76px; padding-inline: 16px; }
  .brand-logo,.confirmation-logo { height: 48px; }
  .header-actions { gap: 6px; }
  .site-header .text-button { max-width: 140px; }
  .reservation-search-section { padding: 8px 12px 18px; }
  .reservation-search-shell { border-radius: 20px; }
  .reservation-search-form { padding: 18px 16px; }
  .reservation-promotion { order: 1; border-bottom: 0; border-top: 1px solid var(--line-dark); }
  .promotion-visual { display: none; }
  .reservation-promotion.has-custom-promotion .promotion-visual:not([hidden]) { display: block; }
  .reservation-contact { padding: 16px; }
  .fleet-section { width: calc(100% - 24px); padding: 16px 12px 24px; border-radius: 22px; }
  .car-grid { gap: 14px; }
  .controls-bar { gap: 10px; }
  .filter-control,.sort-control { min-height: 48px; }
  .support-section { padding-inline: 6px; }
  .confirmation-main { width: calc(100% - 24px); }
  .confirmation-card { padding: 20px 16px; border-radius: 22px; }
  .confirmation-title h1,html[dir="rtl"] .confirmation-title h1 { font-size: 28px; }
  .reference-panel { padding: 18px; }
  .reference-panel strong { font-size: clamp(22px,6vw,32px); overflow-wrap: anywhere; }
  .summary-item { padding: 12px; }
  .confirmation-actions { flex-direction: row; flex-wrap: wrap; }
  .confirmation-actions > a { flex: 1; width: auto; }
}
@media (max-width:380px) {
  .site-header .text-button { max-width: 105px; font-size: 12px; }
  .reservation-datetime-group { grid-template-columns: minmax(0,1fr); }
  .reservation-datetime-group .reservation-input-shell { min-height: 48px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior: auto!important; animation: none!important; transition: none!important; }
}
@media (prefers-contrast:more) {
  :root { --muted: #3f4a4d; --slate: #3f4a4d; --control-border: #657265; --line: #7e897f; --muted-dark: #e0e5e2; }
}
@media print {
  html,body { background: #fff; color: #000; }
  .confirmation-header,.confirmation-card,.reference-panel,.summary-grid,.document-viewer { background: #fff; color: #000; box-shadow: none; border-radius: 0; }
  .confirmation-header { border-color: #aaa; }
  .reference-panel { border: 1px solid #aaa; }
  .reference-panel :is(strong,span,p) { color: #000; }
  .confirmation-main { width: 100%; margin: 0; }
  .confirmation-card { padding: 0; }
  #copyReservationCode { display: none; }
}