/* ============================================================
   Avto360 Design System — Premium SaaS UI
   Colors: Navy #1a3a6b | Blue #2563eb | Sky #0ea5e9
   ============================================================ */


/* ── Variables ─────────────────────────────────────────────── */
:root {
  --dx-primary:        #1a3a6b;
  --dx-primary-dark:   #0f2347;
  --dx-primary-light:  #2a5298;
  --dx-primary-xlight: #e8f0fe;
  --dx-secondary:      #2563eb;
  --dx-secondary-dark: #1d4ed8;
  --dx-accent:         #0ea5e9;
  --dx-accent-soft:    rgba(14,165,233,.1);

  --dx-gray-50:  #f8fafc;
  --dx-gray-100: #f1f5f9;
  --dx-gray-200: #e2e8f0;
  --dx-gray-300: #cbd5e1;
  --dx-gray-400: #94a3b8;
  --dx-gray-500: #64748b;
  --dx-gray-600: #475569;
  --dx-gray-700: #334155;
  --dx-gray-800: #1e293b;
  --dx-gray-900: #0f172a;

  --dx-success:     #10b981;
  --dx-success-bg:  #ecfdf5;
  --dx-warning:     #f59e0b;
  --dx-warning-bg:  #fffbeb;
  --dx-danger:      #ef4444;
  --dx-danger-bg:   #fef2f2;
  --dx-info:        #0ea5e9;
  --dx-info-bg:     #e0f2fe;

  --dx-sidebar-w: 260px;
  --dx-topbar-h:  60px;

  --bg:      #f8fafc;
  --surface: #ffffff;
  --border:  #e2e8f0;
  --muted:   #64748b;

  --dx-shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --dx-shadow-sm: 0 1px 3px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06);
  --dx-shadow-md: 0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.05);
  --dx-shadow-lg: 0 10px 15px rgba(0,0,0,.10),0 4px 6px rgba(0,0,0,.05);
  --dx-shadow-xl: 0 20px 25px rgba(0,0,0,.10),0 10px 10px rgba(0,0,0,.04);

  --dx-radius-sm: 6px;
  --dx-radius:    10px;
  --dx-radius-lg: 14px;
  --dx-radius-xl: 20px;

  --dx-font:      Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;
  --dx-font-mono: 'JetBrains Mono','Fira Code',monospace;
  --dx-transition: .18s ease;

  /* Legacy aliases — keep old var names working */
  --sidebar-w:  260px;
  --topbar-h:   60px;
  --radius:     10px;
  --radius-sm:  6px;
  --shadow:     0 1px 3px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.10),0 4px 6px rgba(0,0,0,.05);
  --transition: all .18s ease;
  --text:       #1e293b;
}

[data-theme="dark"] {
  --bg:      #0f172a;
  --surface: #1e293b;
  --border:  #334155;
  --muted:   #94a3b8;
  --text:    #e2e8f0;

  /* Gray scale — invert for dark backgrounds */
  --dx-gray-700: #cbd5e1;
  --dx-gray-800: #e2e8f0;
  --dx-gray-900: #f1f5f9;

  /* Component-level tokens */
  --dx-table-header-bg:   #1e293b;
  --dx-table-header-text: #e2e8f0;
  --dx-table-stripe:      #1a2535;
  --dx-dropdown-bg:       #1e293b;
  --dx-dropdown-text:     #e2e8f0;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--dx-font);
  background:var(--bg);
  color:var(--dx-gray-800);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
a:hover { color:var(--dx-secondary); }
img { max-width:100%; display:block; }
ul { list-style:none; }
button { font-family:var(--dx-font); }
input,textarea,select { font-family:var(--dx-font); }

/* ── Layout ─────────────────────────────────────────────────── */
.dx-sidebar {
  position:fixed; left:0; top:0; bottom:0;
  width:var(--dx-sidebar-w);
  background:linear-gradient(180deg,var(--dx-primary-dark) 0%,var(--dx-primary) 100%);
  color:#fff;
  display:flex; flex-direction:column;
  box-shadow:4px 0 24px rgba(0,0,0,.15);
  z-index:1000;
  transition:transform .3s ease;
  overflow:hidden;
}
.dx-sidebar.collapsed { transform:translateX(-100%); }

.dx-sidebar-logo {
  padding:1.25rem 1.5rem;
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.dx-logo-text {
  font-size:1.5rem; font-weight:900;
  letter-spacing:-.03em; color:#fff;
  text-decoration:none; display:block;
}
.dx-logo-x { color:var(--dx-accent); }

.dx-sidebar-close {
  display:none; background:none; border:none;
  color:rgba(255,255,255,.7); font-size:1.25rem;
  cursor:pointer; padding:.25rem; border-radius:var(--dx-radius-sm);
  transition:color var(--dx-transition);
}
.dx-sidebar-close:hover { color:#fff; }

.dx-sidebar-nav {
  padding:.75rem 0; overflow-y:auto; overflow-x:hidden; flex:1; min-height:0;
}
.dx-sidebar-nav::-webkit-scrollbar { width:4px; }
.dx-sidebar-nav::-webkit-scrollbar-track { background:transparent; }
.dx-sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2); border-radius:2px; }

.dx-nav-section {
  font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  color:rgba(255,255,255,.4);
  padding:1.25rem 1.5rem .375rem;
  margin-top:.25rem;
}

.dx-nav-item { display:block; }

.dx-nav-link {
  display:flex; align-items:center; gap:.75rem;
  padding:.625rem 1.5rem;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  font-size:.875rem; font-weight:500;
  transition:all .15s;
  border-left:3px solid transparent;
  position:relative;
}
.dx-nav-link:hover {
  color:#fff;
  background:rgba(255,255,255,.08);
  border-left-color:rgba(255,255,255,.3);
}
.dx-nav-link.active {
  color:#fff;
  background:rgba(255,255,255,.14);
  border-left-color:var(--dx-accent);
  font-weight:600;
}
.dx-nav-icon {
  width:18px; text-align:center;
  font-size:1rem; flex-shrink:0;
  opacity:.85; font-style:normal;
}
.dx-nav-label {
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.dx-sidebar-footer {
  padding:1rem 1.5rem;
  border-top:1px solid rgba(255,255,255,.1);
  flex-shrink:0;
}
.dx-sidebar-user {
  display:flex; align-items:center; gap:.75rem;
  margin-bottom:.75rem;
}
.dx-sidebar-user-info { flex:1; overflow:hidden; }
.dx-sidebar-user-name {
  font-size:.8125rem; font-weight:600; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dx-sidebar-user-role {
  font-size:.7rem; color:rgba(255,255,255,.5);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dx-nav-logout { color:rgba(255,120,120,.8) !important; }
.dx-nav-logout:hover { color:rgba(255,160,160,1) !important; background:rgba(239,68,68,.1) !important; }

.dx-main {
  margin-left:var(--dx-sidebar-w);
  min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--bg);
  transition:margin-left .3s ease;
}
.dx-main.expanded { margin-left:0; }

.dx-topbar {
  height:var(--dx-topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  padding:0 1.5rem; gap:1rem;
  position:sticky; top:0; z-index:100;
  box-shadow:var(--dx-shadow-xs);
  flex-shrink:0;
}
.dx-topbar-title {
  flex:1;
  font-size:.875rem; font-weight:600;
  color:var(--dx-gray-600);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dx-topbar-right {
  display:flex; align-items:center; gap:.625rem;
  flex-shrink:0;
}

.dx-hamburger {
  background:none; border:none;
  font-size:1.25rem; cursor:pointer;
  color:var(--dx-gray-600);
  padding:.4rem; border-radius:var(--dx-radius-sm);
  transition:background var(--dx-transition);
  display:none;
}
.dx-hamburger:hover { background:var(--dx-gray-100); }

.dx-page-content { padding:1.75rem; flex:1; }

/* ── Container & Grid ───────────────────────────────────────── */
.dx-container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.dx-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.dx-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.dx-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.dx-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.dx-kpi-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }

/* ── Cards ──────────────────────────────────────────────────── */
.dx-card {
  background:var(--surface);
  border-radius:var(--dx-radius);
  border:1px solid var(--border);
  box-shadow:var(--dx-shadow-sm);
  overflow:hidden;
  margin-bottom:1.25rem;
  color:var(--text);
}
.dx-card-header {
  padding:.875rem 1.25rem;
  font-size:.875rem; font-weight:700;
  color:var(--dx-gray-800);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  letter-spacing:-.01em;
}
.dx-card-body { padding:1.25rem; }
.dx-card-footer {
  padding:.75rem 1.25rem;
  border-top:1px solid var(--border);
  background:var(--dx-gray-50);
  display:flex; align-items:center; justify-content:flex-end; gap:.5rem;
}
.dx-card-highlight {
  border-color:var(--dx-secondary);
  box-shadow:0 0 0 1px var(--dx-secondary),0 4px 6px rgba(37,99,235,.1);
}

/* ── KPI Cards ──────────────────────────────────────────────── */
.dx-kpi-card {
  background:var(--surface);
  border-radius:var(--dx-radius-lg);
  padding:1.5rem;
  border:1px solid var(--border);
  box-shadow:var(--dx-shadow-sm);
  position:relative; overflow:hidden;
  transition:box-shadow var(--dx-transition),transform var(--dx-transition);
}
.dx-kpi-card:hover {
  box-shadow:var(--dx-shadow-md);
  transform:translateY(-1px);
}
.dx-kpi-card::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:3px;
  background:var(--dx-secondary);
}
.dx-kpi-card.kpi-primary::before  { background:var(--dx-secondary); }
.dx-kpi-card.kpi-success::before  { background:var(--dx-success); }
.dx-kpi-card.kpi-warning::before  { background:var(--dx-warning); }
.dx-kpi-card.kpi-danger::before   { background:var(--dx-danger); }
.dx-kpi-card.kpi-info::before     { background:var(--dx-accent); }

.dx-kpi-icon {
  width:48px; height:48px; border-radius:var(--dx-radius);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:1rem; flex-shrink:0;
  background:rgba(37,99,235,.1);
}
.dx-kpi-icon.icon-primary { background:var(--dx-primary-xlight); }
.dx-kpi-icon.icon-success { background:var(--dx-success-bg); }
.dx-kpi-icon.icon-warning { background:var(--dx-warning-bg); }
.dx-kpi-icon.icon-danger  { background:var(--dx-danger-bg); }
.dx-kpi-icon.icon-info    { background:var(--dx-info-bg); }

.dx-kpi-value {
  font-size:1.875rem; font-weight:800;
  color:var(--dx-gray-900); line-height:1;
  letter-spacing:-.03em;
}
.dx-kpi-label {
  font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin-top:.375rem;
}
.dx-kpi-trend {
  font-size:.75rem; font-weight:600;
  margin-top:.5rem; display:flex; align-items:center; gap:.25rem;
}
.dx-kpi-trend.up   { color:var(--dx-success); }
.dx-kpi-trend.down { color:var(--dx-danger); }

/* ── Tables ─────────────────────────────────────────────────── */
.dx-table-wrapper { overflow-x:auto; }
.dx-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.dx-table thead th,
.dx-table th {
  background:var(--dx-table-header-bg, var(--dx-gray-50));
  font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--dx-table-header-text, var(--muted)); padding:.75rem 1rem;
  border-bottom:2px solid var(--border);
  text-align:left; white-space:nowrap;
}
.dx-table tbody td,
.dx-table td {
  padding:.875rem 1rem;
  border-bottom:1px solid var(--border);
  color:var(--dx-gray-700);
  vertical-align:middle;
}
.dx-table tbody tr:nth-child(even) { background:var(--dx-table-stripe, transparent); }
.dx-table tbody tr:hover td,
.dx-table tbody tr:hover { background:var(--dx-gray-50); }
.dx-table tbody tr:last-child td,
.dx-table tr:last-child td { border-bottom:none; }
.dx-table .dx-actions { display:flex; gap:.4rem; align-items:center; }

/* ── Badges ─────────────────────────────────────────────────── */
.dx-badge {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .625rem; border-radius:999px;
  font-size:.68rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; line-height:1;
}
.dx-badge::before {
  content:''; width:5px; height:5px;
  border-radius:50%; background:currentColor; flex-shrink:0;
}
.dx-badge-success,
.dx-badge-verified,
.dx-badge-completed  { background:var(--dx-success-bg); color:#065f46; }
.dx-badge-warning,
.dx-badge-pending    { background:var(--dx-warning-bg); color:#92400e; }
.dx-badge-danger,
.dx-badge-rejected,
.dx-badge-cancelled  { background:var(--dx-danger-bg);  color:#991b1b; }
.dx-badge-info,
.dx-badge-confirmed  { background:var(--dx-info-bg);    color:#0369a1; }
.dx-badge-muted,
.dx-badge-gray,
.dx-badge-suspended,
.dx-badge-inactive   { background:var(--dx-gray-100);   color:var(--dx-gray-600); }
.dx-badge-primary    { background:var(--dx-primary-xlight); color:var(--dx-primary); }

/* ── Buttons ────────────────────────────────────────────────── */
.dx-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.4rem; padding:.5rem 1rem;
  border-radius:var(--dx-radius-sm);
  font-size:.875rem; font-weight:600;
  border:1.5px solid transparent;
  cursor:pointer; transition:all var(--dx-transition);
  text-decoration:none; white-space:nowrap; line-height:1.4;
  font-family:var(--dx-font);
}
.dx-btn:focus-visible { outline:2px solid var(--dx-accent); outline-offset:2px; }
.dx-btn:disabled,.dx-btn[disabled] { opacity:.5; cursor:not-allowed; transform:none !important; }

.dx-btn-primary {
  background:var(--dx-secondary); color:#fff;
  border-color:var(--dx-secondary);
  box-shadow:0 1px 2px rgba(37,99,235,.3);
}
.dx-btn-primary:hover {
  background:var(--dx-secondary-dark);
  box-shadow:0 4px 8px rgba(37,99,235,.35);
  transform:translateY(-1px); color:#fff;
}
.dx-btn-secondary {
  background:var(--surface); color:var(--dx-gray-700);
  border-color:var(--border); box-shadow:var(--dx-shadow-xs);
}
.dx-btn-secondary:hover {
  background:var(--dx-gray-50); border-color:var(--dx-gray-300);
}
.dx-btn-danger {
  background:var(--dx-danger); color:#fff; border-color:var(--dx-danger);
}
.dx-btn-danger:hover { background:#dc2626; border-color:#dc2626; transform:translateY(-1px); color:#fff; }
.dx-btn-success {
  background:var(--dx-success); color:#fff; border-color:var(--dx-success);
}
.dx-btn-success:hover { background:#059669; border-color:#059669; transform:translateY(-1px); color:#fff; }
.dx-btn-warning {
  background:var(--dx-warning); color:#fff; border-color:var(--dx-warning);
}
.dx-btn-warning:hover { background:#d97706; color:#fff; }
.dx-btn-outline {
  background:transparent; color:var(--dx-secondary); border-color:var(--dx-secondary);
}
.dx-btn-outline:hover { background:var(--dx-primary-xlight); }
.dx-btn-sm  { padding:.3rem .625rem; font-size:.75rem; }
.dx-btn-lg  { padding:.75rem 1.5rem; font-size:.9375rem; }
.dx-btn-icon{ width:36px; height:36px; padding:0; border-radius:var(--dx-radius-sm); }
.dx-btn-xs  { padding:.2rem .5rem; font-size:.7rem; }

/* ── Forms ──────────────────────────────────────────────────── */
.dx-form-group { margin-bottom:1.25rem; }
.dx-form-row   { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.dx-form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
@media (max-width:600px) { .dx-form-row,.dx-form-row-3 { grid-template-columns:1fr; } }

.dx-label {
  display:block; font-size:.8125rem; font-weight:600;
  color:var(--dx-gray-700); margin-bottom:.375rem; letter-spacing:-.01em;
}
.dx-label .req { color:var(--dx-danger); margin-left:2px; }

.dx-input,
.dx-textarea,
.dx-select {
  width:100%; padding:.5625rem .875rem;
  border:1.5px solid var(--border);
  border-radius:var(--dx-radius-sm);
  font-size:.875rem; color:var(--dx-gray-800);
  background:var(--surface);
  transition:border-color var(--dx-transition),box-shadow var(--dx-transition);
  outline:none; font-family:var(--dx-font); line-height:1.5;
}
.dx-input:focus,
.dx-textarea:focus,
.dx-select:focus {
  border-color:var(--dx-secondary);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.dx-input.error,.dx-input.is-invalid { border-color:var(--dx-danger); }
.dx-input-lg  { padding:.8rem 1rem; font-size:1rem; }
.dx-input::placeholder,
.dx-textarea::placeholder { color:var(--dx-gray-400); }
.dx-textarea { resize:vertical; min-height:100px; }
.dx-select { cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center; background-size:16px;
  padding-right:2.25rem;
}
.dx-input-group { position:relative; display:flex; }
.dx-input-group > .dx-input { border-radius:var(--dx-radius-sm) 0 0 var(--dx-radius-sm); flex:1; }
.dx-input-group > .dx-btn  { border-radius:0 var(--dx-radius-sm) var(--dx-radius-sm) 0; border-left:none; }
.dx-input-group .dx-input-icon {
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:.9rem; pointer-events:none;
}
.dx-form-hint,.dx-help  { font-size:.75rem; color:var(--muted); margin-top:.25rem; display:block; }
.dx-form-error,.dx-error { font-size:.75rem; color:var(--dx-danger); margin-top:.25rem; font-weight:500; display:block; }
.dx-checkbox-label { display:flex; align-items:center; gap:.6rem; font-size:.875rem; cursor:pointer; }
.dx-checkbox-label input { width:16px; height:16px; cursor:pointer; accent-color:var(--dx-secondary); }

/* ── Page Header ────────────────────────────────────────────── */
.dx-page-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem;
}
.dx-page-header h1 {
  font-size:1.375rem; font-weight:800;
  color:var(--dx-gray-900); letter-spacing:-.02em; margin:0;
}
.dx-page-header p { font-size:.875rem; color:var(--muted); margin:.125rem 0 0; }
.dx-page-header-left  {}
.dx-page-header-right { display:flex; gap:.625rem; align-items:center; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.dx-breadcrumb {
  display:flex; align-items:center; gap:.375rem;
  font-size:.8rem; color:var(--muted); margin-bottom:1rem;
}
.dx-breadcrumb a { color:var(--muted); text-decoration:none; transition:color var(--dx-transition); }
.dx-breadcrumb a:hover { color:var(--dx-secondary); }
.dx-breadcrumb span::before,
.dx-breadcrumb-sep { color:var(--dx-gray-300); content:'/'; margin:0 .2rem; }
.dx-breadcrumb span::before { margin-right:.4rem; }

/* ── Alerts ─────────────────────────────────────────────────── */
.dx-alert {
  padding:.875rem 1rem; border-radius:var(--dx-radius-sm);
  border:1px solid transparent; font-size:.875rem;
  display:flex; align-items:flex-start; gap:.625rem;
  margin-bottom:1rem;
  animation:dx-alert-in .2s ease;
  border-left-width:4px;
}
.dx-alert-success { background:var(--dx-success-bg); border-color:#6ee7b7; color:#065f46; }
.dx-alert-danger  { background:var(--dx-danger-bg);  border-color:#fca5a5; color:#991b1b; }
.dx-alert-warning { background:var(--dx-warning-bg); border-color:#fcd34d; color:#92400e; }
.dx-alert-info    { background:var(--dx-info-bg);    border-color:#7dd3fc; color:#0c4a6e; }
[data-theme="dark"] .dx-alert-success { color:#6ee7b7; }
[data-theme="dark"] .dx-alert-danger  { color:#fca5a5; }
[data-theme="dark"] .dx-alert-warning { color:#fcd34d; }
[data-theme="dark"] .dx-alert-info    { color:#93c5fd; }
@keyframes dx-alert-in {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Notifications ──────────────────────────────────────────── */
.dx-notif-wrapper { position:relative; }
.dx-notif-btn {
  background:none; border:1px solid var(--border); cursor:pointer;
  padding:.4rem .75rem; border-radius:var(--dx-radius-sm);
  color:var(--dx-gray-600); font-size:1.1rem;
  position:relative; transition:background var(--dx-transition);
  display:flex; align-items:center; gap:.4rem;
}
.dx-notif-btn:hover { background:var(--dx-gray-100); }
.dx-notif-badge {
  position:absolute; top:-4px; right:-4px;
  background:var(--dx-danger); color:#fff;
  font-size:.6rem; font-weight:800;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--surface);
}
.dx-notif-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  width:340px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--dx-radius-lg);
  box-shadow:var(--dx-shadow-xl); z-index:200;
  display:none; overflow:hidden;
  animation:dx-dropdown-in .15s ease;
}
.dx-notif-dropdown.open { display:block; }
.dx-notif-header {
  padding:.875rem 1rem; font-size:.8125rem; font-weight:700;
  color:var(--dx-gray-800); border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.dx-notif-header a { font-weight:400; font-size:.75rem; color:var(--dx-secondary); text-decoration:none; }
.dx-notif-item {
  padding:.875rem 1rem; border-bottom:1px solid var(--border);
  cursor:pointer; transition:background var(--dx-transition);
  font-size:.8125rem; display:flex; gap:.75rem; align-items:flex-start;
}
.dx-notif-item:hover { background:var(--dx-gray-50); }
.dx-notif-item.unread { background:rgba(14,165,233,.05); }
.dx-notif-time { font-size:.7rem; color:var(--muted); margin-top:.2rem; }

/* ── User Menu ──────────────────────────────────────────────── */
.dx-user-menu { position:relative; }
.dx-user-btn {
  display:flex; align-items:center; gap:.5rem;
  background:none; border:1px solid var(--border); cursor:pointer;
  padding:.4rem .75rem; border-radius:var(--dx-radius-sm);
  font-size:.875rem; font-weight:600; color:var(--dx-gray-700);
  transition:background var(--dx-transition); font-family:var(--dx-font);
}
.dx-user-btn:hover { background:var(--dx-gray-100); }
.dx-user-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:180px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--dx-radius);
  box-shadow:var(--dx-shadow-lg); z-index:200;
  display:none; animation:dx-dropdown-in .15s ease; overflow:hidden;
  width:180px;
}
.dx-user-dropdown.open { display:block; }
.dx-user-dropdown a {
  display:flex; align-items:center; gap:.5rem;
  padding:.625rem 1rem; font-size:.875rem;
  color:var(--dx-gray-700); text-decoration:none;
  transition:background var(--dx-transition);
}
.dx-user-dropdown a:hover { background:var(--dx-gray-50); }
.dx-user-dropdown hr { border:none; border-top:1px solid var(--border); margin:.25rem 0; }

/* ── Theme Toggle ───────────────────────────────────────────── */
.dx-theme-toggle {
  background:none; border:1.5px solid var(--border);
  cursor:pointer; padding:.35rem .5rem;
  border-radius:var(--dx-radius-sm); font-size:.9rem;
  color:var(--dx-gray-600); transition:all var(--dx-transition);
}
.dx-theme-toggle:hover { background:var(--dx-gray-100); border-color:var(--dx-gray-300); }

/* ── Avatar ─────────────────────────────────────────────────── */
.dx-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--dx-secondary),var(--dx-accent));
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:.875rem; font-weight:700; flex-shrink:0; user-select:none; object-fit:cover;
}
.dx-avatar-sm  { width:32px; height:32px; font-size:.8125rem; }
.dx-avatar-lg  { width:64px; height:64px; font-size:1.5rem; }
.dx-avatar-xl  { width:96px; height:96px; font-size:2rem; }

/* ── Modal ──────────────────────────────────────────────────── */
.dx-modal-overlay {
  position:fixed; inset:0;
  background:rgba(15,23,42,.55);
  z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:1rem;
  opacity:0; pointer-events:none; transition:opacity .2s;
  backdrop-filter:blur(4px);
}
.dx-modal-overlay.open { opacity:1; pointer-events:all; }
.dx-modal {
  background:var(--surface); border-radius:var(--dx-radius-xl);
  box-shadow:var(--dx-shadow-xl);
  width:100%; max-width:520px; max-height:90vh;
  display:flex; flex-direction:column;
  transform:translateY(-16px) scale(.98); transition:transform .2s;
  overflow:hidden;
}
.dx-modal-overlay.open .dx-modal { transform:none; }
.dx-modal-header {
  padding:1.25rem 1.5rem; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  font-size:1rem; font-weight:700; color:var(--dx-gray-900); flex-shrink:0;
}
.dx-modal-body  { padding:1.5rem; overflow-y:auto; flex:1; }
.dx-modal-footer {
  padding:1rem 1.5rem; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:.75rem; flex-shrink:0;
}
.dx-modal-close {
  background:none; border:none; cursor:pointer;
  font-size:1.25rem; color:var(--muted);
  padding:.25rem; border-radius:var(--dx-radius-sm); line-height:1;
  transition:color var(--dx-transition);
}
.dx-modal-close:hover { color:var(--dx-gray-800); }

/* ── Pagination ─────────────────────────────────────────────── */
.dx-pagination {
  display:flex; align-items:center; justify-content:flex-end;
  gap:.25rem; margin-top:1.25rem; flex-wrap:wrap;
}
.dx-pagination a,
.dx-pagination span {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 .5rem;
  border-radius:var(--dx-radius-sm);
  font-size:.8125rem; font-weight:600; text-decoration:none;
  color:var(--dx-gray-600); border:1px solid var(--border);
  background:var(--surface); transition:all var(--dx-transition);
}
.dx-pagination a:hover { border-color:var(--dx-secondary); color:var(--dx-secondary); }
.dx-pagination .active { background:var(--dx-secondary); color:#fff; border-color:var(--dx-secondary); font-weight:700; }
.dx-pagination .disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }

/* ── Empty State ────────────────────────────────────────────── */
.dx-empty {
  text-align:center; padding:4rem 2rem; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.dx-empty-icon { font-size:3rem; opacity:.45; }
.dx-empty-title { font-size:1rem; font-weight:700; color:var(--dx-gray-700); margin-bottom:.5rem; }
.dx-empty-text,.dx-empty-desc {
  font-size:.875rem; line-height:1.6;
  max-width:320px; margin:0 auto;
}

/* ── Spinner ────────────────────────────────────────────────── */
.dx-spinner {
  width:24px; height:24px;
  border:2.5px solid var(--border);
  border-top-color:var(--dx-secondary);
  border-radius:50%;
  animation:dx-spin .75s linear infinite;
  display:inline-block;
}
.dx-spinner-sm { width:16px; height:16px; border-width:2px; }
.dx-spinner-lg { width:40px; height:40px; border-width:3px; }
@keyframes dx-spin { to { transform:rotate(360deg); } }

/* ── Filter Bar ─────────────────────────────────────────────── */
.dx-filter-bar {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--dx-radius); padding:1rem 1.25rem; margin-bottom:1.25rem;
}
.dx-filter-row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-end; }
.dx-filter-row .dx-input,.dx-filter-row .dx-select { max-width:220px; }
.dx-category-pills { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
.dx-pill {
  display:inline-flex; align-items:center; padding:.3rem .85rem;
  border-radius:20px; border:1px solid var(--border); font-size:.8rem;
  color:var(--muted); cursor:pointer; transition:var(--dx-transition); text-decoration:none;
}
.dx-pill:hover,.dx-pill.active {
  background:var(--dx-secondary); color:#fff; border-color:var(--dx-secondary);
}

/* ── Tabs ───────────────────────────────────────────────────── */
.dx-tabs { display:flex; border-bottom:2px solid var(--border); gap:0; margin-bottom:1.5rem; }
.dx-tab {
  padding:.625rem 1.25rem; font-size:.875rem; font-weight:600;
  color:var(--muted); text-decoration:none; border-bottom:2px solid transparent;
  margin-bottom:-2px; transition:all var(--dx-transition); cursor:pointer;
  background:none; border-top:none; border-left:none; border-right:none;
  font-family:var(--dx-font);
}
.dx-tab:hover { color:var(--dx-gray-700); }
.dx-tab.active { color:var(--dx-secondary); border-bottom-color:var(--dx-secondary); }

/* ── Status Timeline ────────────────────────────────────────── */
.dx-timeline { position:relative; padding-left:1.5rem; }
.dx-timeline::before { content:''; position:absolute; left:7px; top:8px; bottom:8px;
  width:2px; background:var(--border); }
.dx-timeline-item { position:relative; margin-bottom:1.25rem; padding-left:1rem; }
.dx-timeline-item::before {
  content:''; position:absolute; left:-1.5rem; top:5px;
  width:14px; height:14px; border-radius:50%; background:var(--border);
  border:2px solid var(--surface);
}
.dx-timeline-item.done::before   { background:var(--dx-success); }
.dx-timeline-item.active::before { background:var(--dx-secondary); box-shadow:0 0 0 4px rgba(37,99,235,.2); }
.dx-timeline-date  { font-size:.75rem; color:var(--muted); }
.dx-timeline-label { font-size:.875rem; font-weight:600; }

/* ── Toast Notifications ────────────────────────────────────── */
#dx-toast-container {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
  display:flex; flex-direction:column; gap:.625rem; pointer-events:none;
}
.dx-toast {
  background:var(--dx-gray-900); color:#fff;
  padding:.875rem 1.25rem; border-radius:var(--dx-radius);
  box-shadow:var(--dx-shadow-xl); font-size:.875rem; font-weight:500;
  display:flex; align-items:center; gap:.75rem;
  min-width:280px; max-width:380px;
  animation:dx-toast-in .25s ease;
  pointer-events:auto;
}
.dx-toast.success { border-left:4px solid var(--dx-success); }
.dx-toast.error   { border-left:4px solid var(--dx-danger); }
.dx-toast.warning { border-left:4px solid var(--dx-warning); }
.dx-toast.info    { border-left:4px solid var(--dx-info); }
.dx-toast-close { margin-left:auto; background:none; border:none; color:rgba(255,255,255,.6); cursor:pointer; font-size:1rem; }
@keyframes dx-toast-in {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:none; }
}

/* ── Chart Wrapper ──────────────────────────────────────────── */
.dx-chart-wrapper { position:relative; width:100%; }

/* ── Sidebar Backdrop ───────────────────────────────────────── */
.dx-sidebar-backdrop {
  position:fixed; inset:0;
  background:rgba(0,0,0,.4); z-index:999;
  display:none; opacity:0; pointer-events:none; transition:opacity .3s;
}
.dx-sidebar-backdrop.open { display:block; opacity:1; pointer-events:all; }

/* ── Public Layout ──────────────────────────────────────────── */
.dx-public-nav {
  background:var(--dx-primary); padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between;
  height:64px; position:sticky; top:0; z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.dx-public-nav .dx-logo-text { font-size:1.5rem; }
.dx-public-nav-links { display:flex; align-items:center; gap:1.5rem; }
.dx-public-nav-links a { color:rgba(255,255,255,.8); font-size:.875rem; font-weight:500; transition:color var(--dx-transition); }
.dx-public-nav-links a:hover { color:#fff; }
.dx-public-footer {
  background:var(--dx-primary); color:rgba(255,255,255,.7);
  padding:3rem 2rem 1.5rem; margin-top:4rem;
}
.dx-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
.dx-footer-brand .dx-logo-text { font-size:1.8rem; color:#fff; }
.dx-footer-brand p { margin-top:.75rem; font-size:.875rem; line-height:1.7; }
.dx-footer-col h4 { color:#fff; font-size:.875rem; margin-bottom:.75rem; }
.dx-footer-col a { display:block; color:rgba(255,255,255,.6); font-size:.85rem; margin-bottom:.4rem; }
.dx-footer-col a:hover { color:#fff; }
.dx-footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:1.5rem;
  display:flex; justify-content:space-between; font-size:.8rem; }

/* ── Hero ───────────────────────────────────────────────────── */
.dx-hero {
  background:linear-gradient(135deg,var(--dx-primary) 0%,#1d4ed8 100%);
  color:#fff; padding:5rem 2rem; text-align:center;
}
.dx-hero h1 { font-size:2.5rem; font-weight:800; margin-bottom:1rem; line-height:1.2; }
.dx-hero h1 span { color:var(--dx-accent); }
.dx-hero p { font-size:1.1rem; opacity:.85; max-width:580px; margin:0 auto 2rem; }
.dx-hero-cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.dx-section { padding:4rem 0; }
.dx-section-title { text-align:center; font-size:1.75rem; font-weight:800; margin-bottom:.75rem; }
.dx-section-sub { text-align:center; color:var(--muted); margin-bottom:2.5rem; }

/* ── Category Grid ──────────────────────────────────────────── */
.dx-category-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1rem;
}
.dx-category-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--dx-radius);
  padding:1.25rem 1rem; text-align:center; transition:all var(--dx-transition); cursor:pointer;
  text-decoration:none; color:var(--dx-gray-700);
}
.dx-category-card:hover {
  border-color:var(--dx-secondary); box-shadow:var(--dx-shadow-md);
  transform:translateY(-2px); color:var(--dx-secondary);
}
.dx-category-card .icon { font-size:2rem; margin-bottom:.5rem; }
.dx-category-card .label { font-size:.8rem; font-weight:600; }

/* ── Partner Cards ──────────────────────────────────────────── */
.dx-partner-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; }
.dx-partner-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--dx-radius);
  box-shadow:var(--dx-shadow-sm); overflow:hidden; transition:all var(--dx-transition);
}
.dx-partner-card:hover { box-shadow:var(--dx-shadow-md); transform:translateY(-2px); }
.dx-partner-card-img {
  height:140px; background:var(--dx-primary); display:flex; align-items:center;
  justify-content:center; position:relative; overflow:hidden;
}
.dx-partner-card-img img { width:100%; height:100%; object-fit:cover; }
.dx-partner-card-placeholder { font-size:3rem; color:rgba(255,255,255,.5); font-weight:800; }
.dx-featured-badge { position:absolute; top:.5rem; left:.5rem;
  background:var(--dx-warning); color:#fff; font-size:.7rem; font-weight:700;
  padding:.2rem .5rem; border-radius:4px; }
.dx-partner-card-body { padding:1rem; }
.dx-partner-card-category { font-size:.72rem; font-weight:700; color:var(--dx-secondary);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:.3rem; }
.dx-partner-card-name { font-weight:700; font-size:1rem; margin-bottom:.35rem; }
.dx-partner-card-city { font-size:.8rem; color:var(--muted); margin-bottom:.5rem; }
.dx-partner-card-rating { display:flex; align-items:center; gap:.25rem; font-size:.85rem; }
.dx-star { color:var(--border); }
.dx-star.active,.dx-star-filled { color:var(--dx-warning); }
.dx-star-empty { color:var(--dx-gray-300); }
.dx-rating-val { font-weight:700; color:var(--dx-gray-700); }
.dx-review-count { color:var(--muted); font-size:.75rem; }
.dx-partner-card-footer { padding:.75rem 1rem; border-top:1px solid var(--border); display:flex; gap:.5rem; }

/* ── Steps ──────────────────────────────────────────────────── */
.dx-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; }
.dx-step { padding:1.5rem; }
.dx-step-num {
  width:52px; height:52px; border-radius:50%; background:var(--dx-secondary);
  color:#fff; font-size:1.3rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1rem;
}
.dx-step h3 { font-weight:700; margin-bottom:.5rem; }
.dx-step p { color:var(--muted); font-size:.9rem; }

/* ── Auth Layout ────────────────────────────────────────────── */
.dx-auth-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--dx-primary) 0%,#1e40af 100%);
  padding:1.5rem;
}
.dx-auth-card {
  background:var(--surface); border-radius:var(--dx-radius-lg);
  box-shadow:var(--dx-shadow-xl); width:100%; max-width:440px; padding:2.5rem;
}
.dx-auth-logo { text-align:center; margin-bottom:1.75rem; }
.dx-auth-logo .dx-logo-text { font-size:2rem; }
.dx-auth-title { font-size:1.3rem; font-weight:700; text-align:center; margin-bottom:.35rem; }
.dx-auth-sub { text-align:center; color:var(--muted); font-size:.875rem; margin-bottom:1.75rem; }
.dx-auth-divider { text-align:center; color:var(--muted); font-size:.8rem; margin:1rem 0; position:relative; }
.dx-auth-divider::before,.dx-auth-divider::after {
  content:''; position:absolute; top:50%; width:42%; height:1px; background:var(--border);
}
.dx-auth-divider::before { left:0; }
.dx-auth-divider::after  { right:0; }
.dx-auth-switch { text-align:center; margin-top:1.25rem; font-size:.875rem; color:var(--muted); }
.dx-auth-tabs { display:flex; border:1px solid var(--border); border-radius:var(--dx-radius-sm);
  margin-bottom:1.5rem; overflow:hidden; }
.dx-auth-tab { flex:1; padding:.65rem; text-align:center; font-size:.875rem;
  font-weight:600; cursor:pointer; border:none; background:none; color:var(--muted);
  transition:all var(--dx-transition); font-family:var(--dx-font); }
.dx-auth-tab.active { background:var(--dx-secondary); color:#fff; }

/* ── Car Widget ─────────────────────────────────────────────── */
.dx-car-widget .dx-car-info { display:flex; align-items:center; gap:1.25rem; }
.dx-car-plate {
  font-size:1.2rem; font-weight:800; background:var(--bg); padding:.4rem .875rem;
  border-radius:var(--dx-radius-sm); border:2px solid var(--border); letter-spacing:2px;
  font-family:var(--dx-font-mono);
}
.dx-car-model { font-weight:700; font-size:1rem; }
.dx-car-year  { color:var(--muted); font-size:.875rem; }
.dx-service-reminder { margin-top:1rem; }

/* ── Promo Code Display ─────────────────────────────────────── */
.dx-promo-code-display {
  background:linear-gradient(135deg,var(--dx-primary),var(--dx-secondary));
  color:#fff; border-radius:var(--dx-radius-lg);
  padding:2rem; text-align:center;
}
.dx-promo-code-value {
  font-size:2rem; font-weight:900; letter-spacing:.15em;
  font-family:var(--dx-font-mono);
  text-shadow:0 2px 4px rgba(0,0,0,.2);
  cursor:pointer; user-select:all;
}
.dx-promo-code-expiry { font-size:.8rem; margin-top:.5rem; opacity:.8; }

/* ── Redeem Widget ──────────────────────────────────────────── */
.dx-redeem-card .dx-form-row { align-items:flex-end; }

/* ── Settings ───────────────────────────────────────────────── */
.dx-settings-group { margin-bottom:2rem; }
.dx-settings-group-title { font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin-bottom:1rem;
  padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.dx-toggle-row { display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 0; border-bottom:1px solid var(--border); }
.dx-toggle-label { font-size:.9rem; font-weight:500; }
.dx-toggle-desc  { font-size:.78rem; color:var(--muted); }
.dx-toggle { position:relative; width:44px; height:24px; }
.dx-toggle input { opacity:0; width:0; height:0; }
.dx-toggle-slider {
  position:absolute; cursor:pointer; inset:0;
  background:var(--border); border-radius:24px; transition:.3s;
}
.dx-toggle-slider::before {
  content:''; position:absolute; height:18px; width:18px;
  left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s;
}
.dx-toggle input:checked + .dx-toggle-slider { background:var(--dx-success); }
.dx-toggle input:checked + .dx-toggle-slider::before { transform:translateX(20px); }

/* ── Audit Log ──────────────────────────────────────────────── */
.dx-audit-action { font-family:var(--dx-font-mono); font-size:.78rem;
  background:var(--bg); padding:.15rem .45rem; border-radius:4px; }
.dx-json-preview { max-height:120px; overflow-y:auto; font-family:var(--dx-font-mono);
  font-size:.72rem; background:var(--bg); padding:.5rem; border-radius:4px;
  white-space:pre-wrap; word-break:break-all; }

/* ── Partner Detail ─────────────────────────────────────────── */
.dx-partner-hero { position:relative; height:240px; background:var(--dx-primary); overflow:hidden; }
.dx-partner-hero img { width:100%; height:100%; object-fit:cover; }
.dx-partner-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%);
  display:flex; align-items:flex-end; padding:1.5rem;
}
.dx-partner-logo-wrap { position:relative; }
.dx-partner-logo-lg {
  width:80px; height:80px; border-radius:var(--dx-radius);
  border:3px solid #fff; background:var(--dx-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:#fff; font-weight:800; overflow:hidden;
  flex-shrink:0;
}
.dx-partner-logo-lg img { width:100%; height:100%; object-fit:cover; }
.dx-partner-hero-info { color:#fff; }
.dx-partner-hero-info h1 { font-size:1.5rem; font-weight:800; }

/* ── Working Hours ──────────────────────────────────────────── */
.dx-hours-table { width:100%; font-size:.875rem; }
.dx-hours-table td { padding:.4rem .5rem; }
.dx-hours-table td:first-child { font-weight:600; color:var(--muted); width:100px; }
.dx-hours-closed { color:var(--dx-danger); }

/* ── Results Header ─────────────────────────────────────────── */
.dx-results-header { display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1rem; color:var(--muted); font-size:.875rem; }

/* ── Flash Container ────────────────────────────────────────── */
.dx-flash-container { margin-bottom:.5rem; }

/* ── Stars ──────────────────────────────────────────────────── */
.dx-stars { display:inline-flex; gap:1px; }

/* ── Progress Bar ───────────────────────────────────────────── */
.dx-progress { height:6px; background:var(--dx-gray-200); border-radius:999px; overflow:hidden; }
.dx-progress-bar { height:100%; background:var(--dx-secondary); border-radius:999px; transition:width .4s ease; }

/* ── Detail Row ─────────────────────────────────────────────── */
.dx-detail-row {
  display:flex; gap:1rem; padding:.625rem 0;
  border-bottom:1px solid var(--border); font-size:.875rem;
}
.dx-detail-label { color:var(--muted); font-weight:500; min-width:140px; flex-shrink:0; }
.dx-detail-value { color:var(--dx-gray-800); font-weight:500; }

/* ── Divider ────────────────────────────────────────────────── */
.dx-divider { border:none; border-top:1px solid var(--border); margin:1.5rem 0; }

/* ── Keyframe Animations ────────────────────────────────────── */
@keyframes dx-dropdown-in {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes dx-modal-in {
  from { opacity:0; transform:scale(.95); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes dx-overlay-in {
  from { opacity:0; }
  to   { opacity:1; }
}

/* ── Utility Classes ────────────────────────────────────────── */
.dx-flex         { display:flex; }
.dx-flex-center  { display:flex; align-items:center; justify-content:center; }
.dx-flex-between { display:flex; align-items:center; justify-content:space-between; }
.dx-flex-wrap    { flex-wrap:wrap; }
.dx-gap-1        { gap:.5rem; }
.dx-gap-2        { gap:1rem; }
.dx-gap-3        { gap:1.5rem; }
.dx-mt-0         { margin-top:0; }
.dx-mt-1         { margin-top:.5rem; }
.dx-mt-2         { margin-top:1rem; }
.dx-mt-3         { margin-top:1.5rem; }
.dx-mt-4         { margin-top:2rem; }
.dx-mb-0         { margin-bottom:0; }
.dx-mb-1         { margin-bottom:.5rem; }
.dx-mb-2         { margin-bottom:1rem; }
.dx-mb-3         { margin-bottom:1.5rem; }
.dx-mb-4         { margin-bottom:2rem; }
.dx-p-0          { padding:0; }
.dx-p-1          { padding:.5rem; }
.dx-p-2          { padding:1rem; }
.dx-p-3          { padding:1.5rem; }
.dx-text-muted   { color:var(--muted); font-size:.875rem; }
.dx-text-sm      { font-size:.875rem; }
.dx-text-xs      { font-size:.75rem; }
.dx-text-lg      { font-size:1.125rem; }
.dx-text-right   { text-align:right; }
.dx-text-center  { text-align:center; }
.dx-font-bold    { font-weight:700; }
.dx-font-semibold{ font-weight:600; }
.dx-font-mono    { font-family:var(--dx-font-mono); }
.dx-truncate     { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dx-w-full       { width:100%; }
.dx-border-top   { border-top:1px solid var(--border); }
.dx-border-bottom{ border-bottom:1px solid var(--border); }
.dx-rounded      { border-radius:var(--dx-radius); }
.dx-rounded-lg   { border-radius:var(--dx-radius-lg); }
.dx-shadow       { box-shadow:var(--dx-shadow-sm); }
.dx-shadow-md    { box-shadow:var(--dx-shadow-md); }
.dx-hidden       { display:none !important; }
.dx-sr-only      { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0; }

/* ── Responsive (inline critical) ──────────────────────────── */
@media (max-width:900px) {
  .dx-grid-2,.dx-grid-3 { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .dx-sidebar { transform:translateX(-100%); }
  .dx-sidebar.open { transform:translateX(0); z-index:1001; }
  .dx-sidebar-close { display:block; }
  .dx-sidebar-backdrop.open { display:block; }
  .dx-hamburger { display:block; }
  .dx-main { margin-left:0; }
  .dx-hero h1 { font-size:1.75rem; }
  .dx-steps { grid-template-columns:1fr; }
  .dx-footer-grid { grid-template-columns:1fr 1fr; }
  .dx-kpi-grid { grid-template-columns:repeat(2,1fr); }
  .dx-kpi-grid-3 { grid-template-columns:repeat(2,1fr); }
  .dx-page-content { padding:1rem; }
  .dx-topbar { padding:0 1rem; }
}
@media (max-width:480px) {
  .dx-footer-grid { grid-template-columns:1fr; }
  .dx-kpi-grid { grid-template-columns:1fr 1fr; }
  .dx-kpi-grid-3 { grid-template-columns:1fr 1fr; }
  .dx-auth-card { padding:1.75rem 1.25rem; }
  .dx-hero-cta { flex-direction:column; align-items:center; }
  .dx-kpi-value { font-size:1.5rem; }
  .dx-modal { border-radius:var(--dx-radius-lg); }
}

/* ── Missing classes (audit fix) ───────────────────────────── */
/* .dx-kpi-body: inner wrapper used in all three dashboard views */
.dx-kpi-body {
  display:flex; flex-direction:column; gap:.25rem; margin-top:.25rem;
}
/* .dx-topbar-title: breadcrumb/page title in topbar */
.dx-topbar-title {
  flex:1; font-size:.875rem; font-weight:600;
  color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* .dx-card-body-flush: removes padding from card body (table goes edge-to-edge) */
.dx-card-body-flush { padding:0 !important; }
/* .dx-filter-bar: filter row above tables */
.dx-filter-bar {
  display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap;
  margin-bottom:1.25rem;
}

/* ── Final Polish Utilities ── */
.dx-partner-logo-img {
  width:80px; height:80px; border-radius:12px;
  object-fit:cover; border:2px solid var(--border);
  background:var(--surface);
}
.dx-faq-summary {
  padding:.875rem 1.25rem;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--text);
  list-style:none;
}
.dx-faq-summary::-webkit-details-marker { display:none; }
.dx-booking-avatar {
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:700;
  background:var(--dx-primary-xlight, #dbeafe); color:var(--dx-primary);
  flex-shrink:0;
}
.dx-card-list-item {
  padding:.875rem 1.25rem;
  border-bottom:1px solid var(--border);
}
.dx-card-list-item:last-child { border-bottom:none; }
.dx-stats-note {
  text-align:center;
  color:var(--muted);
  font-size:.8125rem;
  margin-top:-.5rem;
  margin-bottom:1.5rem;
}

/* ── Inline-style extractions (cleanup pass) ────────────────── */

/* Shared list-item row inside a card (no padding card-body) */
.dx-booking-list-item {
  padding:.875rem 1.25rem;
  border-bottom:1px solid var(--border);
}
.dx-booking-list-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}

/* Admin dashboard — pending partner row */
.dx-partner-list-item {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.875rem 1.25rem;
  border-bottom:1px solid var(--border);
}
.dx-name-truncate {
  font-weight:600;
  font-size:.875rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Driver cars — detail grid + repeated label + plate */
.dx-car-detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.875rem;
  font-size:.875rem;
}
.dx-car-detail-label {
  color:var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.25rem;
}
.dx-car-plate-display {
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:2px;
  font-family:monospace;
  color:var(--dx-primary);
}
.dx-service-divider {
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--border);
}

/* Driver reminders list */
.dx-reminder-list {
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.dx-reminder-header-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
}

/* Partner dashboard — promo code input styling */
.dx-promo-code-input {
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:1.3rem;
  text-align:center;
  font-weight:700;
}

/* Partner dashboard — value callout flex row */
.dx-value-callout-row {
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
}

/* Partner promos — quick redeem form */
.dx-redeem-form {
  display:flex;
  gap:1rem;
  align-items:flex-end;
  flex-wrap:wrap;
}

/* Partner promos — promo code input (slightly different spacing) */
.dx-promo-code-input-sm {
  text-transform:uppercase;
  letter-spacing:3px;
  font-family:monospace;
  font-size:1.1rem;
}

/* Driver bookings list */
.dx-bookings-list {
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.dx-booking-card-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:1rem;
}
.dx-booking-ref-row {
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.dx-booking-ref-span {
  font-family:monospace;
  font-size:.8rem;
  background:var(--bg);
  padding:.2rem .6rem;
  border-radius:6px;
  color:var(--muted);
}

/* Shared detail section label (used in bookings list and show) */
.dx-detail-label {
  font-size:.72rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.25rem;
}

/* Driver bookings — notes block */
.dx-booking-notes {
  margin-top:.875rem;
  font-size:.8rem;
  color:var(--muted);
  background:var(--bg);
  padding:.5rem .875rem;
  border-radius:8px;
  line-height:1.5;
}

/* Driver booking show — detail definition list */
.dx-detail-dl {
  display:grid;
  grid-template-columns:140px 1fr;
  gap:.5rem .75rem;
  font-size:.875rem;
}

/* Driver booking show — cancel section */
.dx-cancel-section {
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid var(--border);
}

/* Admin users — user cell flex */
.dx-user-cell {
  display:flex;
  align-items:center;
  gap:.75rem;
}

/* Driver promos — active promo grid */
.dx-promo-active-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1rem;
}

/* Driver promos — expiry fine print */
.dx-promo-expiry-note {
  font-size:.72rem;
  color:var(--muted);
  margin-top:.4rem;
}

/* Driver promos / general — centered muted hint text */
.dx-hint-centered {
  color:var(--muted);
  font-size:.875rem;
  text-align:center;
}

/* Profile — notification checkbox row */
.dx-check-row {
  display:flex;
  gap:1.5rem;
  margin-top:.5rem;
}

/* Car form / general — action button row */
.dx-form-actions {
  display:flex;
  gap:.75rem;
  margin-top:1.5rem;
}

/* Car form / general — section divider hr */
.dx-section-hr {
  margin:1.5rem 0;
  border:none;
  border-top:1px solid var(--border);
}

/* Admin partners show — description section */
.dx-description-section {
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--border);
}
.dx-description-label {
  color:var(--muted);
  font-size:.75rem;
  margin-bottom:.4rem;
}

/* Admin partners show — branch list item */
.dx-branch-list-item {
  padding:.875rem 1.25rem;
  border-bottom:1px solid var(--border);
}

/* Audit log — before/after label */
.dx-audit-sublabel {
  font-size:.7rem;
  color:var(--muted);
  margin-bottom:.2rem;
}

/* Audit logs table cells */
.dx-audit-ts {
  white-space:nowrap;
  font-size:.8rem;
  color:var(--muted);
}
.dx-audit-ip {
  font-size:.75rem;
  color:var(--muted);
  font-family:monospace;
}
.dx-audit-summary {
  font-size:.75rem;
  cursor:pointer;
  color:var(--dx-secondary);
}

/* Reminder notes text */
.dx-reminder-notes {
  margin-top:.5rem;
  font-size:.8rem;
  color:var(--muted);
}

/* Timeline note text */
.dx-timeline-note {
  font-size:.8rem;
  color:var(--muted);
  margin-top:.25rem;
}

/* Badge — small inline display used in list items */
.dx-badge-inline-sm {
  font-size:.7rem;
  margin-top:.35rem;
  display:inline-block;
}

/* Empty-state table cell (used across all tables) */
.dx-td-empty {
  text-align:center;
  padding:3rem;
  color:var(--muted);
}
.dx-td-empty-sm {
  text-align:center;
  padding:2rem;
  color:var(--muted);
}

/* Promo code span (admin table) */
.dx-promo-code-span {
  font-family:monospace;
  font-weight:700;
  letter-spacing:2px;
  font-size:.9rem;
}

/* Branch card — header row */
.dx-branch-header {
  display:flex;
  justify-content:space-between;
  margin-bottom:.5rem;
}

/* Branch card / general — muted detail row */
.dx-branch-detail {
  font-size:.875rem;
  color:var(--muted);
  margin-bottom:.25rem;
}

/* Booking date display — muted, no-wrap */
.dx-booking-date {
  font-size:.875rem;
  color:var(--muted);
  white-space:nowrap;
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  .dx-sidebar,.dx-topbar,.dx-btn,.dx-filter-bar,
  .dx-pagination,.dx-hamburger { display:none !important; }
  .dx-main { margin-left:0; }
  .dx-card { box-shadow:none; border:1px solid #ddd; }
  .dx-page-content { padding:0; }
}