/* ═══════════════════════════════════════════════════════════════════════════
   au2bay AWM — Au2rides Brand Design System v1.0
   Primary: #1478B5 (Au2rides Brand Blue)
   Source: platform-brain/_branding/design_tokens.json
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Design tokens — Au2rides Brand ─────────────────────────────────── */
:root {
  /* Au2rides primary = Brand Blue */
  --sa-primary:        #1478B5;
  --sa-primary-rgb:    20, 120, 181;
  --sa-primary-dark:   #0D5F94;
  --sa-success:        #34A853;
  --sa-info:           #27bcfd;
  --sa-warning:        #FBBC04;
  --sa-danger:         #EA4335;
  --sa-secondary:      #5F6368;

  --sa-gray-100:       #F8F9FA;
  --sa-gray-200:       #F1F3F4;
  --sa-gray-300:       #E8EAED;
  --sa-gray-400:       #DADCE0;
  --sa-gray-500:       #9AA0A6;
  --sa-gray-600:       #80868B;
  --sa-gray-700:       #5F6368;
  --sa-gray-800:       #3C4043;
  --sa-gray-900:       #202124;
  --sa-gray-1000:      #171717;
  --sa-gray-1100:      #0d0d0d;

  --sa-body-color:     #5F6368;
  --sa-heading-color:  #202124;
  --sa-muted-color:    #9AA0A6;
  --sa-body-bg:        #F8F9FA;
  --sa-card-bg:        #ffffff;
  --sa-border-color:   #E8EAED;

  --sa-primary-lt:     #E3F2FA;
  --sa-success-lt:     #E6F4EA;
  --sa-info-lt:        #e5f7ff;
  --sa-warning-lt:     #FEF7E0;
  --sa-danger-lt:      #FCE8E6;
  --sa-secondary-lt:   #F1F3F4;

  --sa-primary-text:   #0D5F94;
  --sa-success-text:   #1a7431;
  --sa-info-text:      #177198;
  --sa-warning-text:   #7B5800;
  --sa-danger-text:    #B31412;

  --sa-card-shadow:    rgba(65,69,88,.1) 0px 7px 14px 0px, rgba(0,0,0,.07) 0px 3px 6px 0px;

  --sa-font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sa-font-ui:   "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sa-font-ar:   "Cairo", "Noto Sans Arabic", "Segoe UI", sans-serif;

  /* Tabler variable overrides */
  --tblr-primary:             #1478B5;
  --tblr-primary-rgb:         20, 120, 181;
  --tblr-success:             #34A853;
  --tblr-info:                #27bcfd;
  --tblr-warning:             #FBBC04;
  --tblr-danger:              #EA4335;
  --tblr-body-bg:             #F8F9FA;
  --tblr-body-color:          #5F6368;
  --tblr-border-color:        #E8EAED;
  --tblr-card-bg:             #ffffff;
  --tblr-card-border-color:   transparent;
  --tblr-muted:               #9AA0A6;
  --tblr-link-color:          #1478B5;
  --tblr-font-sans-serif:     "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tblr-heading-font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── 2. Body & typography ────────────────────────────────────────────────── */
body {
  font-family: var(--sa-font-body) !important;
  font-size: 16px !important;
  color: var(--sa-body-color) !important;
  background-color: var(--sa-body-bg) !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--sa-font-ui) !important;
  color: var(--sa-heading-color) !important;
}
h6, .h6 {
  font-size: 0.875rem !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

/* ── 3. Cards ────────────────────────────────────────────────────────────── */
.card {
  background-color: var(--sa-card-bg) !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: var(--sa-card-shadow) !important;
}
.card-header {
  background-color: var(--sa-gray-100) !important;
  border-bottom: 1px solid var(--sa-border-color) !important;
  padding: 0.5rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 2.875rem;
}
.card-title {
  font-family: var(--sa-font-ui) !important;
  color: var(--sa-heading-color) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  text-transform: none !important;
}
.card-body { padding: 1rem 1.25rem !important; }

/* ── 4. Tables ───────────────────────────────────────────────────────────── */
.table { color: var(--sa-body-color); font-family: var(--sa-font-body); }
.table thead th {
  font-family: var(--sa-font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--sa-heading-color) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border-bottom: 1px solid var(--sa-body-bg) !important;
  background: transparent !important;
  padding: 12px 12px 12px 20px !important;
}
.table td {
  border-color: var(--sa-body-bg) !important;
  vertical-align: middle;
  font-size: 0.875rem;
  padding: 10px 12px 10px 20px;
}
.table th { border-color: var(--sa-body-bg) !important; }

/* ── 5. Badges ───────────────────────────────────────────────────────────── */
.badge {
  font-family: var(--sa-font-ui) !important;
  font-size: .6944444444rem !important;
  font-weight: 600 !important;
  border-radius: 50rem !important;
  padding: 0.2em 0.65em !important;
}

/* ── 6. Text utilities ───────────────────────────────────────────────────── */
.text-muted, .text-secondary { color: var(--sa-secondary) !important; }
.text-dark   { color: var(--sa-heading-color) !important; }
.text-primary { color: var(--sa-primary) !important; }
.text-success { color: var(--sa-success) !important; }
.text-danger  { color: var(--sa-danger)  !important; }
.text-warning { color: var(--sa-warning) !important; }
.text-info    { color: var(--sa-info)    !important; }

/* ── 7. Buttons ──────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--sa-font-ui) !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  border-radius: 0.25rem !important;
}
.btn-primary { background: var(--sa-primary) !important; border-color: var(--sa-primary) !important; color: #fff !important; }
.btn-primary:hover { background: #0D5F94 !important; border-color: #0D5F94 !important; }
.btn-ghost-secondary { color: var(--sa-body-color) !important; }
.btn-ghost-secondary:hover { background: rgba(20,120,181,.07) !important; }

/* ── 8. Links ────────────────────────────────────────────────────────────── */
a { color: var(--sa-primary); text-decoration: none; }
a:hover { color: #b91c1c; }

/* ── 9. SIDEBAR — white, Falcon v3.15.0 exact, AWM red accent ───────────── */
.navbar-vertical {
  position: fixed !important;
  top: 3.625rem !important;
  left: 0 !important;
  width: 18.9375rem !important;
  height: calc(100vh - 3.625rem) !important;
  background-color: #fff !important;
  border-right: 1px solid var(--sa-border-color) !important;
  overflow: hidden !important;
  z-index: 1030 !important;
  transition: width .2s ease !important;
  box-shadow: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.navbar-vertical-content {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
  flex: 1 1 auto;
  padding: 0.5rem 0 2rem;
}

.navbar-vertical .navbar-nav { padding: 0.5rem 0; }
.navbar-vertical .navbar-nav > .nav-item { display: block; }

.navbar-vertical .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-family: var(--sa-font-ui) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #5e6e82 !important;
  padding: 0.375rem 1rem 0.375rem 2.25rem !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transition: color .15s ease, background-color .15s ease !important;
  white-space: nowrap;
}
.navbar-vertical .nav-link:hover {
  color: var(--sa-heading-color) !important;
  background-color: rgba(20,120,181,.06) !important;
}
.navbar-vertical .nav-link.active {
  color: var(--sa-primary) !important;
  background-color: rgba(20,120,181,.10) !important;
  font-weight: 600 !important;
}
.navbar-vertical .nav-link.active .nav-link-icon { opacity: 1 !important; color: var(--sa-primary) !important; }

.navbar-vertical .nav-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  font-size: 1.0625rem;
  color: inherit;
  opacity: 0.85;
  flex-shrink: 0;
}

/* Section labels — Falcon navbar-vertical-label-wrapper pattern */
.navbar-vertical h6,
.navbar-vertical .navbar-header,
.navbar-vertical-label-wrapper {
  display: flex !important;
  align-items: center !important;
  padding: 0 1rem !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
}
.navbar-vertical h6,
.navbar-vertical .navbar-header,
.navbar-vertical-label {
  font-family: var(--sa-font-ui) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #9da9bb !important;
  padding-right: 0.5rem !important;
  white-space: nowrap;
}
.navbar-vertical-divider,
.navbar-vertical .navbar-divider {
  border: 0 !important;
  border-top: 1px solid var(--sa-border-color) !important;
  opacity: 1 !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Lang switcher — light sidebar */
.navbar-vertical .lang-switcher {
  color: #5e6e82 !important;
  border-color: var(--sa-border-color) !important;
  background: transparent !important;
}
.navbar-vertical .lang-switcher:hover {
  color: var(--sa-heading-color) !important;
  background: rgba(20,120,181,.06) !important;
  border-color: var(--sa-primary) !important;
}
.navbar-vertical .lang-switcher .badge { background: var(--sa-primary-lt) !important; color: var(--sa-primary) !important; }

/* Border-top separator — light sidebar */
.navbar-vertical .border-top { border-top-color: var(--sa-border-color) !important; }

/* ── 10. Header ──────────────────────────────────────────────────────────── */
header.d-print-none {
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid var(--sa-border-color) !important;
  backdrop-filter: blur(4px);
}

/* ── 11. Page wrapper & body ─────────────────────────────────────────────── */
.wrapper           { background: var(--sa-body-bg) !important; }
.page-wrapper      {
  margin-left: 18.9375rem !important;
  background: var(--sa-body-bg) !important;
  transition: margin-left 0.2s ease;
}
.page-body         { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.page-header       { border-bottom: none !important; }
.page-header .container-xl,
.page-body   .container-xl { max-width: 100% !important; padding-inline: 1.25rem !important; }
.page-pretitle {
  font-family: var(--sa-font-ui) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--sa-muted-color) !important;
}
.page-title {
  font-family: var(--sa-font-ui) !important;
  color: var(--sa-heading-color) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
}

/* ── 12. Sidebar collapse ────────────────────────────────────────────────── */
body.sidebar-collapsed .navbar-vertical { width: 3.125rem !important; }
body.sidebar-collapsed .navbar-vertical .nav-link-text,
body.sidebar-collapsed .navbar-vertical .navbar-vertical-label-wrapper,
body.sidebar-collapsed .navbar-vertical h6,
body.sidebar-collapsed .navbar-vertical .navbar-header { display: none !important; }
body.sidebar-collapsed .navbar-vertical .nav-link {
  justify-content: center !important;
  padding: 0.5rem !important;
}
body.sidebar-collapsed .navbar-vertical .nav-link-icon { width: auto !important; margin: 0 auto !important; }
body.sidebar-collapsed .page-wrapper { margin-left: 3.125rem !important; }

/* ── 13. Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(182,193,210,.6); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b6c1d2; }

/* ── 14. Footer ──────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--sa-border-color) !important; background: transparent !important; }

/* ── 15. Forms ───────────────────────────────────────────────────────────── */
.form-control, .form-select {
  font-family: var(--sa-font-body) !important;
  font-size: 0.875rem !important;
  border-color: var(--sa-border-color) !important;
  border-radius: 0.25rem !important;
  color: var(--sa-heading-color) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sa-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(20,120,181,.15) !important;
}
.form-label {
  font-family: var(--sa-font-ui) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--sa-heading-color) !important;
}

/* ── 16. Dropdown ────────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 0 !important;
  box-shadow: var(--sa-card-shadow) !important;
  border-radius: 6px !important;
  font-family: var(--sa-font-ui) !important;
  font-size: 0.8125rem !important;
}
.dropdown-item { color: var(--sa-body-color) !important; font-weight: 500; }
.dropdown-item:hover { background: rgba(20,120,181,.07) !important; color: var(--sa-heading-color) !important; }

/* ── 17. Blazor errors ───────────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--sa-success); }
.invalid { outline: 1px solid var(--sa-danger); }
.validation-message { color: var(--sa-danger); }
#blazor-error-ui {
  background: var(--sa-warning-lt);
  border-top: 1px solid #fbccb2;
  color: #ac5a2b;
  bottom: 0; display: none; left: 0;
  padding: 0.6rem 1.25rem 0.7rem;
  position: fixed; width: 100%; z-index: 1000;
}

/* ── 18. Misc helpers ────────────────────────────────────────────────────── */
.table-hover tbody tr:hover { background-color: rgba(20,120,181,.04); }
.spinner-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/* ── RTL / Arabic support ────────────────────────────────────────────────── */
[dir="rtl"] body { font-family: var(--sa-font-ar) !important; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5,[dir="rtl"] h6 {
  font-family: var(--sa-font-ar) !important;
}
[dir="rtl"] .navbar-vertical { left: auto !important; right: 0 !important; border-right: 0 !important; border-left: 1px solid var(--sa-border-color) !important; }
[dir="rtl"] .page-wrapper { margin-left: 0 !important; margin-right: 18.9375rem !important; }
[dir="rtl"] body.sidebar-collapsed .page-wrapper { margin-left: 0 !important; margin-right: 3.125rem !important; }
[dir="rtl"] .navbar-vertical .nav-link { padding: 0.375rem 2.25rem 0.375rem 1rem !important; }
[dir="rtl"] .navbar-vertical .nav-link-icon { margin-left: 0.5rem; }
[dir="rtl"] .dropdown-menu-end { --bs-position: start; }
[dir="rtl"] .text-end { text-align: left !important; }
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .table thead th { text-align: right; }
[dir="rtl"] .table td { text-align: right; }

/* ── Language switcher button ────────────────────────────────────────────── */
.lang-switcher {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--sa-font-ui); font-size: 0.8rem; font-weight: 600;
  color: var(--sa-body-color); text-decoration: none; cursor: pointer;
  padding: 0.25rem 0.5rem; border-radius: 4px; border: 1px solid var(--sa-border-color);
  transition: background .15s;
}
.lang-switcher:hover { background: var(--sa-primary-lt); color: var(--sa-primary); border-color: var(--sa-primary); }

/* ── KPI stat cards (AWM style) ──────────────────────────────────────────── */
.kpi-card { border-radius: 8px !important; }
.kpi-value { font-family: var(--sa-font-ui) !important; font-size: 2rem !important; font-weight: 700 !important; color: var(--sa-heading-color) !important; line-height: 1; }
.kpi-label { font-family: var(--sa-font-ui) !important; font-size: 0.75rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--sa-muted-color) !important; }
.kpi-trend-up   { color: var(--sa-success) !important; font-size: 0.8rem; }
.kpi-trend-down { color: var(--sa-danger)  !important; font-size: 0.8rem; }

/* ── Slide-over Drawer ───────────────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 1040; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: all; }

.drawer-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 550px; max-width: 98vw;
  background: #fff; z-index: 1041;
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.drawer-panel.open { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--sa-border-color);
  flex-shrink: 0;
}
.drawer-header h5 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--sa-heading-color); font-family: var(--sa-font-ui); }
.drawer-close {
  background: none; border: 0; padding: .35rem; border-radius: 6px;
  color: var(--sa-muted-color); cursor: pointer; line-height: 1;
  transition: background .15s, color .15s;
}
.drawer-close:hover { background: var(--sa-gray-200); color: var(--sa-heading-color); }

.drawer-body {
  flex: 1; overflow-y: auto; padding: 1.25rem;
}
.drawer-footer {
  flex-shrink: 0; padding: .875rem 1.25rem;
  border-top: 1px solid var(--sa-border-color);
  display: flex; gap: .5rem; justify-content: flex-end;
}

/* Customer type badge pills */
.cust-type-individual { background: #E3F2FA; color: #0D5F94; }
.cust-type-fleet      { background: #E6F4EA; color: #1e7e34; }
.cust-type-community  { background: #FEF7E0; color: #856404; }

/* Customer avatar (large, in drawer) */
.cust-avatar-lg {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--sa-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 700; font-family: var(--sa-font-ui);
  flex-shrink: 0;
}

/* Vehicle avatar (large, in drawer) */
.veh-avatar-lg {
  width: 56px; height: 56px; border-radius: 12px;
  background: var(--sa-gray-100); color: var(--sa-primary);
  border: 1px solid var(--sa-border-color);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Vehicle mini-card in drawer */
.vehicle-mini-card {
  border: 1px solid var(--sa-border-color); border-radius: 8px;
  padding: .625rem .875rem;
  display: flex; align-items: center; gap: .75rem;
  font-size: .85rem;
}
.vehicle-mini-card .vmc-icon {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--sa-gray-100); color: var(--sa-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Status badge colour map ─────────────────────────────────────────────── */
.badge-status-1 { background: #e2e8f0; color: #475569; }   /* Draft */
.badge-status-2 { background: #dbeafe; color: #1d4ed8; }   /* Open */
.badge-status-3 { background: #dbeafe; color: #1e40af; }   /* In Progress */
.badge-status-4 { background: #fef3c7; color: #92400e; }   /* Awaiting Parts */
.badge-status-5 { background: #ffedd5; color: #9a3412; }   /* Awaiting Approval */
.badge-status-6 { background: #d1fae5; color: #065f46; }   /* Completed */
.badge-status-7 { background: #ccfbf1; color: #0f766e; }   /* Invoiced */
.badge-status-8 { background: #fee2e2; color: #991b1b; }   /* Cancelled */

/* ── AWM nav active state — already handled in section 9 above ──────────── */

/* ── Page filter row ─────────────────────────────────────────────────────── */
.filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 1rem 0 0.5rem; }
.filter-row .form-control, .filter-row .form-select { max-width: 220px; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--sa-muted-color); }
.empty-state .ti { font-size: 3rem; display: block; margin-bottom: 1rem; opacity: .4; }

/* ── Bay status cards (Dashboard) ─────────────────────────────────────────── */
.bay-card {
  border-radius: 8px; padding: 0.75rem 1rem;
  border: 1px solid var(--sa-border-color);
  border-left: 4px solid var(--sa-border-color);
  transition: box-shadow .15s;
}
.bay-card:hover { box-shadow: var(--sa-card-shadow); }
.bay-card.bay-available  { background: #f0fdf4; border-left-color: #16a34a; }
.bay-card.bay-occupied   { background: #fff7ed; border-left-color: #f59e0b; }
.bay-card.bay-maintenance{ background: #f1f5f9; border-left-color: #64748b; }
.bay-card.bay-available  .bay-name { color: #15803d; }
.bay-card.bay-occupied   .bay-name { color: #b45309; }
.bay-card.bay-maintenance .bay-name { color: #475569; }
.bay-name { font-weight: 700; font-size: 0.875rem; font-family: var(--sa-font-ui); }
.bay-vehicle { font-size: 0.8rem; color: var(--sa-body-color); }
.bay-status-text { font-size: 0.75rem; font-weight: 600; }

/* ── KPI card accent bar ───────────────────────────────────────────────────── */
.kpi-bar { height: 3px; border-radius: 2px; margin-top: 0.75rem; opacity: .7; }