:root{
  --bg:#eef4ff;
  --bg-soft:#f8fbff;
  --surface:rgba(255,255,255,.9);
  --surface-strong:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#2563eb;
  --primary-2:#1e3a8a;
  --primary-soft:#dbeafe;
  --danger:#b91c1c;
  --danger-bg:#fee2e2;
  --success-bg:#dcfce7;
  --success-border:#bbf7d0;
  --border:#d7e3f4;
  --shadow:0 20px 50px rgba(15,23,42,.09);
  --shadow-soft:0 10px 26px rgba(15,23,42,.05);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --sidebar-width:290px;
  --sidebar-collapsed:88px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Tahoma,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 24%),
    radial-gradient(circle at top right, rgba(96,165,250,.10), transparent 22%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%);
  min-height:100vh;
  opacity:.86;
  transition:opacity .28s ease;
}

body.page-ready{opacity:1}
body.sidebar-open{overflow:hidden}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
img{max-width:100%;display:block}
h1,h2,h3,p{margin-top:0}

.layout-shell{padding:16px}
.app-shell{
  display:grid;
  grid-template-columns:var(--sidebar-width) 1fr;
  min-height:calc(100vh - 32px);
  gap:16px;
  transition:grid-template-columns .24s ease;
}
.app-shell.is-collapsed{grid-template-columns:var(--sidebar-collapsed) 1fr}

.sidebar{
  background:linear-gradient(180deg,#0f172a 0%,#1e293b 55%,#334155 100%);
  color:#fff;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:16px;
  height:calc(100vh - 32px);
  overflow:hidden;
  transition:width .24s ease,padding .24s ease,transform .24s ease;
}

.sidebar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.brand-lockup{display:flex;align-items:flex-start;gap:14px;min-width:0}
.brand-mark{
  width:54px;
  height:54px;
  border-radius:18px;
  background:linear-gradient(135deg,#2563eb,#1e3a8a);
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:20px;
  box-shadow:0 12px 24px rgba(37,99,235,.24);
  flex:0 0 auto;
  color:#fff;
}
.brand-mark.has-logo{background:#fff;padding:6px;color:transparent}
.brand-mark.has-logo img{width:100%;height:100%;object-fit:contain;border-radius:12px}
.brand-copy{min-width:0}
.brand{font-weight:700;line-height:1.45;font-size:18px}
.brand-subtitle{color:rgba(255,255,255,.72);font-size:13px;margin-top:6px}

.nav-menu{display:flex;flex-direction:column;gap:10px;margin-top:28px;flex:1}
.nav-link{
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  transition:.18s ease;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
}
.nav-link:hover,.nav-link.active{
  transform:translateY(-1px);
  background:rgba(37,99,235,.14);
  border-color:rgba(96,165,250,.28);
}
.nav-icon{width:24px;text-align:center;font-size:18px;flex:0 0 24px}
.nav-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sidebar-foot{margin-top:14px}
.sidebar-card{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  border-radius:20px;
  padding:14px;
}
.sidebar-card-title{font-size:13px;color:rgba(255,255,255,.72)}
.sidebar-card-text{margin-top:8px;font-weight:700}

.app-shell.is-collapsed .brand-copy,
.app-shell.is-collapsed .nav-text,
.app-shell.is-collapsed .sidebar-foot{display:none}
.app-shell.is-collapsed .sidebar{padding-inline:12px}
.app-shell.is-collapsed .sidebar-head{justify-content:center}
.app-shell.is-collapsed .nav-link{justify-content:center;padding-inline:10px}

.main{padding:4px;min-width:0}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  background:var(--surface);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);
  padding:18px 20px;
  border-radius:24px;
  box-shadow:var(--shadow-soft);
}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.topbar-title{font-size:24px;font-weight:700}
.topbar-subtitle{color:var(--muted);margin-top:4px;font-size:13px}
.top-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Modern badges */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.94));
  color:#0f172a;
  font-weight:700;
  font-size:13px;
  line-height:1;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    filter .18s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.badge::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 48%, transparent 100%);
  transform:translateX(-130%);
  transition:transform .45s ease;
  pointer-events:none;
}
.badge:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(15,23,42,.12);
  border-color:rgba(37,99,235,.24);
}
.badge:hover::before{
  transform:translateX(130%);
}
.badge:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
.badge:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(147,197,253,.28), 0 14px 28px rgba(15,23,42,.12);
}

/* Strong active state for top tabs and selected chips */
.badge.active{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(135deg,var(--primary),var(--primary-2));
  border-color:transparent;
  color:#fff;
  box-shadow:
    0 14px 28px rgba(37,99,235,.24),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.badge.active:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 34px rgba(37,99,235,.28),
    inset 0 1px 0 rgba(255,255,255,.2);
  filter:saturate(1.03);
}
.badge.active:active{
  transform:translateY(0);
  box-shadow:
    0 10px 20px rgba(37,99,235,.2),
    inset 0 1px 0 rgba(255,255,255,.16);
}

/* Gray badge style for neutral actions like view */
.badge.neutral{
  background:linear-gradient(180deg, rgba(248,250,252,.98), rgba(226,232,240,.94));
  color:#334155;
  border-color:rgba(148,163,184,.24);
}

/* Blue badge style for edit */
.badge.edit{
  background:linear-gradient(135deg, #eff6ff, #dbeafe);
  color:#1d4ed8;
  border-color:#bfdbfe;
  box-shadow:0 10px 24px rgba(37,99,235,.12);
}

/* Red badge style */
.badge.danger{
  background:linear-gradient(135deg, #fff1f2, #fee2e2);
  color:#b91c1c;
  border-color:#fecaca;
  box-shadow:0 10px 24px rgba(220,38,38,.1);
}

/* Modern icon buttons */
.icon-btn,.sidebar-toggle{
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,245,249,.92));
  cursor:pointer;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.icon-btn:hover,.sidebar-toggle:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(15,23,42,.12);
  border-color:rgba(37,99,235,.22);
}
.icon-btn:active,.sidebar-toggle:active{
  transform:translateY(0);
}
.icon-btn:focus-visible,.sidebar-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(147,197,253,.28), 0 14px 28px rgba(15,23,42,.12);
}

.logout-form{margin:0}
.logout-form .badge{cursor:pointer}
.theme-toggle{cursor:pointer}

.alert{
  padding:14px 16px;
  border-radius:18px;
  margin-bottom:16px;
  background:var(--success-bg);
  border:1px solid var(--success-border);
  box-shadow:0 8px 20px rgba(34,197,94,.07);
}
.alert.error{background:var(--danger-bg);border-color:#fecaca}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{
  grid-column:span 12;
  background:var(--surface);
  border:1px solid rgba(216,227,236,.95);
  border-radius:24px;
  padding:18px;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(8px);
}

.stat{
  grid-column:span 3;
  position:relative;
  overflow:hidden;
}
.stat::after{
  content:"";
  position:absolute;
  inset:auto -50px -50px auto;
  width:140px;
  height:140px;
  background:radial-gradient(circle, rgba(37,99,235,.14), transparent 60%);
}
.stat .label,.stat>div:first-child{color:var(--muted);font-size:13px}
.stat .value{font-size:30px;font-weight:700;margin-top:10px}

.page-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

/* Modern buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:11px 18px;
  border:none;
  border-radius:16px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:
    0 14px 28px rgba(37,99,235,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    background .18s ease;
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 45%, transparent 100%);
  transform:translateX(-120%);
  transition:transform .45s ease;
  pointer-events:none;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 34px rgba(37,99,235,.26),
    inset 0 1px 0 rgba(255,255,255,.2);
  filter:saturate(1.03);
}
.btn:hover::before{
  transform:translateX(120%);
}
.btn:active{
  transform:translateY(0);
  box-shadow:
    0 10px 20px rgba(37,99,235,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 4px rgba(147,197,253,.28),
    0 18px 34px rgba(37,99,235,.26),
    inset 0 1px 0 rgba(255,255,255,.2);
}

.btn.secondary{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(135deg,#64748b,#475569);
  color:#fff;
  box-shadow:
    0 12px 24px rgba(71,85,105,.2),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.btn.secondary:hover{
  box-shadow:
    0 16px 30px rgba(71,85,105,.24),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.btn.danger{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.16), transparent 40%),
    linear-gradient(135deg,#ef4444,#b91c1c);
  color:#fff;
  box-shadow:
    0 14px 28px rgba(220,38,38,.22),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.btn.danger:hover{
  box-shadow:
    0 18px 34px rgba(220,38,38,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.btn.light{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.94));
  color:var(--text);
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.btn.light:hover{
  border-color:rgba(37,99,235,.24);
  box-shadow:0 14px 28px rgba(15,23,42,.12);
}

table{width:100%;border-collapse:separate;border-spacing:0}
th,td{
  padding:13px 12px;
  border-bottom:1px solid var(--border);
  text-align:start;
  vertical-align:top;
}
th{
  background:#f8fafc;
  color:#334155;
  font-size:13px;
  position:sticky;
  top:0;
  z-index:1;
}
tr:hover td{background:#fcfdff}

.table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
}
.table-wrap table{min-width:700px}

input,select,textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid #cbd5e1;
  border-radius:14px;
  background:#fff;
  outline:none;
  transition:.15s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 4px rgba(147,197,253,.2);
}
textarea{min-height:100px;resize:vertical}
label{display:block;font-size:13px;color:#334155;margin-bottom:7px;font-weight:700}

.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
.muted{color:var(--muted)}

.login-wrap{
  display:grid;
  place-items:center;
  min-height:100vh;
  padding:18px;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.14), transparent 25%),
    radial-gradient(circle at bottom right, rgba(96,165,250,.10), transparent 24%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%);
}
.login-card{
  width:min(520px,100%);
  background:var(--surface);
  border:1px solid rgba(216,227,236,.95);
  border-radius:32px;
  padding:28px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.login-brand .brand-mark{margin:0}
.login-title{font-size:28px;font-weight:700}
.login-actions{display:flex;gap:10px;flex-wrap:wrap}

.mobile-overlay{display:none}

[data-theme="dark"]{
  --bg:#0b1220;
  --bg-soft:#111827;
  --surface:rgba(15,23,42,.84);
  --surface-strong:#0f172a;
  --text:#e5eefb;
  --muted:#94a3b8;
  --border:#23324a;
  --shadow:0 20px 50px rgba(2,6,23,.35);
  --shadow-soft:0 10px 26px rgba(2,6,23,.24);
}

body[data-theme="dark"]{
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 24%),
    radial-gradient(circle at top right, rgba(96,165,250,.08), transparent 22%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%);
}

body[data-theme="dark"] .topbar,
body[data-theme="dark"] .card,
body[data-theme="dark"] .login-card,
body[data-theme="dark"] .table-wrap,
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .badge,
body[data-theme="dark"] .icon-btn,
body[data-theme="dark"] .sidebar-toggle{
  background:rgba(15,23,42,.9);
  color:var(--text);
  border-color:var(--border);
}

body[data-theme="dark"] .btn.light{
  background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.94));
  color:var(--text);
  border-color:var(--border);
  box-shadow:0 10px 24px rgba(2,6,23,.28);
}

body[data-theme="dark"] .badge{
  background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.92));
  color:var(--text);
  border-color:rgba(59,130,246,.14);
  box-shadow:0 10px 22px rgba(2,6,23,.24);
}

body[data-theme="dark"] .badge.active{
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 38%),
    linear-gradient(135deg,#2563eb,#1d4ed8);
  border-color:transparent;
  color:#fff;
  box-shadow:
    0 14px 28px rgba(37,99,235,.28),
    inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-theme="dark"] .badge.edit{
  background:linear-gradient(135deg, rgba(30,64,175,.92), rgba(37,99,235,.88));
  color:#fff;
  border-color:rgba(96,165,250,.28);
}

body[data-theme="dark"] .badge.neutral{
  background:linear-gradient(180deg, rgba(51,65,85,.96), rgba(30,41,59,.94));
  color:#e2e8f0;
  border-color:rgba(148,163,184,.16);
}

body[data-theme="dark"] .badge.danger{
  background:linear-gradient(180deg, rgba(69,10,10,.92), rgba(63,17,17,.95));
  border-color:#7f1d1d;
  color:#fecaca;
}

body[data-theme="dark"] th{background:#111827;color:#cbd5e1}
body[data-theme="dark"] tr:hover td{background:#0f172a}
body[data-theme="dark"] .sidebar{background:linear-gradient(180deg,#020617 0%,#0f172a 50%,#1e293b 100%)}

@media (max-width:1100px){
  .layout-shell{padding:12px}
  .app-shell{grid-template-columns:1fr}
  .sidebar{
    position:fixed;
    top:12px;
    bottom:12px;
    height:auto;
    width:min(320px,calc(100vw - 24px));
    z-index:50;
    transform:translateX(-120%);
  }
  body.rtl .sidebar{transform:translateX(120%)}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .mobile-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.4);
    opacity:0;
    pointer-events:none;
    transition:.2s ease;
    z-index:40;
  }
  body.sidebar-open .mobile-overlay{opacity:1;pointer-events:auto}
  .topbar{padding:16px}
  .topbar-title{font-size:20px}
  .stat{grid-column:span 6}
  .col-3,.col-4,.col-6,.col-8{grid-column:span 12}
}

@media (max-width:700px){
  .layout-shell{padding:10px}
  .topbar{flex-direction:column;align-items:stretch}
  .top-actions{justify-content:flex-start}
  .stat{grid-column:span 12}
  .table-wrap table{min-width:620px}
}

.hero-panel,.stats-grid,.dashboard-grid{display:grid;gap:16px}
.hero-panel{
  grid-template-columns:1.5fr auto;
  align-items:center;
  background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(219,234,254,.7));
  border:1px solid var(--border);
  border-radius:28px;
  padding:24px;
  box-shadow:var(--shadow-soft);
  margin-bottom:16px;
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:8px}
.stats-grid{grid-template-columns:repeat(12,1fr);margin-bottom:16px}
.premium-stat{grid-column:span 12}
.premium-stat .value{font-size:32px}

@media (min-width:900px){
  .premium-stat{grid-column:span 2}
  .dashboard-grid{grid-template-columns:repeat(12,1fr)}
  .dashboard-grid>.card:nth-child(1),
  .dashboard-grid>.card:nth-child(2){grid-column:span 6}
}

.mini-chart{width:100%;height:240px;display:block}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.status-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#e2e8f0;
  color:#334155;
  font-size:12px;
  font-weight:700;
}
.report-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.report-links a{
  display:block;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.7);
  transition:.18s ease;
}
.report-links a:hover{
  transform:translateY(-1px);
  border-color:#93c5fd;
  background:#fff;
}
.filters-bar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;align-items:end}
.filter-item{grid-column:span 3}
.filter-buttons{grid-column:span 3;display:flex;gap:10px;flex-wrap:wrap}
.filter-buttons .btn,.filter-buttons .btn.secondary{width:auto}

body[data-theme="dark"] .hero-panel{background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(30,41,59,.88))}
body[data-theme="dark"] .report-links a{background:rgba(15,23,42,.86)}

@media (max-width:900px){
  .hero-panel{grid-template-columns:1fr}
  .report-links{grid-template-columns:1fr}
  .filter-item,.filter-buttons{grid-column:span 12}
}

@media print{
  body{background:#fff;color:#000;opacity:1}
  .layout-shell,.app-shell,.main{padding:0;display:block;min-height:auto}
  .sidebar,.topbar,.no-print,.mobile-overlay{display:none !important}
  .card,.hero-panel,.table-wrap{
    box-shadow:none;
    border:1px solid #cbd5e1;
    border-radius:0;
    background:#fff;
  }
  .page-title{margin:0 0 12px}
  .page-title::before{
    content:"MOEL Vehicle Management";
    display:block;
    font-size:22px;
    font-weight:700;
    margin-bottom:6px;
  }
  .table-wrap{overflow:visible}
  table{min-width:0 !important}
  th,td{padding:8px 6px;border-color:#d1d5db}
  .report-links{display:none !important}
}
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}
.page-link,.page-dots{
  min-width:38px;
  height:38px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  text-decoration:none;
  background:rgba(255,255,255,.86);
  color:var(--text);
}
.page-link:hover,.page-link.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.page-dots{border-color:transparent;background:transparent;color:var(--muted)}
body[data-theme="dark"] .page-link{background:rgba(15,23,42,.86)}
body[data-theme="dark"] .page-link:hover,body[data-theme="dark"] .page-link.active{background:var(--primary)}