/* ─── Variables ──────────────────────────────────────────────────────────── */
:root {
  --navy:    #2D2E83;
  --magenta: #C5197D;
  --violet:  #6B2F8E;
  --dark:    #0E0E1F;
  --dark2:   #16162E;
  --dark3:   #1E1E38;
  --light:   #F8F7FC;
  --muted:   #8B8BAA;
  --border:  #2A2A4A;
  --borderl: #3A3A5A;
  --success: #22c55e;
  --warning: #f97316;
  --danger:  #ef4444;
  --grad:    linear-gradient(135deg,#2D2E83,#C5197D);
  --r:       12px;
  --rs:      8px;
  --shadow:  0 8px 32px rgba(0,0,0,.45);
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Inter',sans-serif;
  background:var(--dark);
  color:#fff;
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.6;
}
a { color:inherit; }
img { max-width:100%; }
button,input,select,textarea { font-family:inherit; }

/* ─── Navigation ─────────────────────────────────────────────────────────── */
.app-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem;
  background:rgba(14,14,31,.95);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
  gap:1rem;
}
.nav-logo img { height:44px; width:auto; display:block; }
.nav-links { display:flex; gap:.125rem; flex:1; padding-left:1rem; }
.nav-links a {
  color:var(--muted); text-decoration:none;
  padding:.5rem .875rem; border-radius:var(--rs);
  font-size:.875rem; font-weight:500;
  transition:color .15s,background .15s;
}
.nav-links a:hover { color:#fff; background:rgba(255,255,255,.06); }
.nav-links a.active { color:#fff; background:rgba(45,46,131,.3); }
.nav-user { position:relative; display:flex; align-items:center; gap:.625rem; cursor:pointer; user-select:none; }
.nav-user-avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem; flex-shrink:0;
}
.nav-user-name { font-size:.875rem; font-weight:500; display:flex; align-items:center; white-space:nowrap; }
.nav-user-dropdown {
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:220px;
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--r); padding:.5rem; box-shadow:var(--shadow);
  display:none; z-index:200;
}
.nav-user-dropdown.open { display:block; }
.nav-user-dropdown a,
.nav-user-dropdown button {
  display:flex; align-items:center; gap:.5rem;
  width:100%; padding:.6rem .75rem;
  color:var(--light); text-decoration:none;
  background:none; border:none; border-radius:var(--rs);
  font-size:.875rem; cursor:pointer; transition:background .15s;
  text-align:left;
}
.nav-user-dropdown a:hover,
.nav-user-dropdown button:hover { background:rgba(255,255,255,.06); }
.nav-user-dropdown .divider { height:1px; background:var(--border); margin:.375rem 0; }

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.app-main { min-height:100vh; }
.app-footer { border-top:1px solid var(--border); margin-top:4rem; }
.container { max-width:1200px; margin:0 auto; padding:2rem 1.5rem; }
.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:2rem; gap:1rem; flex-wrap:wrap;
}
.page-title { font-size:1.75rem; font-weight:800; letter-spacing:-.5px; }
.page-sub { color:var(--muted); font-size:.875rem; margin-top:.25rem; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.625rem 1.25rem; border:none; border-radius:var(--rs);
  font-size:.9rem; font-weight:600; cursor:pointer;
  text-decoration:none; white-space:nowrap; transition:all .2s;
}
.btn-primary { background:var(--grad); color:#fff; }
.btn-primary:hover { opacity:.88; transform:translateY(-1px); }
.btn-secondary { background:rgba(255,255,255,.07); color:#fff; border:1px solid var(--border); }
.btn-secondary:hover { background:rgba(255,255,255,.12); }
.btn-danger { background:rgba(239,68,68,.12); color:#ef4444; border:1px solid rgba(239,68,68,.3); }
.btn-danger:hover { background:rgba(239,68,68,.22); }
.btn-ghost { background:transparent; color:var(--muted); border:none; }
.btn-ghost:hover { color:#fff; }
.btn-sm { padding:.375rem .75rem; font-size:.8rem; }
.btn-lg { padding:.875rem 2rem; font-size:1rem; }
.btn-full { width:100%; }
.btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--r); padding:1.5rem;
}
.card + .card { margin-top:1rem; }
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.25rem;
}
.card-title { font-size:1rem; font-weight:700; }

/* ─── Stats ──────────────────────────────────────────────────────────────── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1rem; margin-bottom:2rem;
}
.stat-card {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--r); padding:1.25rem 1.5rem;
}
.stat-value { font-size:2.25rem; font-weight:800; line-height:1; }
.stat-label { font-size:.75rem; color:var(--muted); margin-top:.375rem; text-transform:uppercase; letter-spacing:.5px; }
.stat-sub { font-size:.8rem; color:var(--muted); margin-top:.5rem; }

/* ─── Vehicle cards ──────────────────────────────────────────────────────── */
.vehicles-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.25rem;
}
.vehicle-card {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
  text-decoration:none; color:inherit; display:block;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.vehicle-card:hover { border-color:var(--navy); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.vehicle-card.status-warning { border-color:rgba(249,115,22,.45); }
.vehicle-card.status-danger   { border-color:rgba(239,68,68,.45); }
.vehicle-card.status-critique { border-color:#ef4444; box-shadow:0 0 0 1px rgba(239,68,68,.25); }

.vehicle-photo {
  height:130px; background:var(--dark3);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.vehicle-photo img { width:100%; height:100%; object-fit:cover; }
.vehicle-photo-placeholder { font-size:3.5rem; opacity:.2; }
.vehicle-type-badge {
  position:absolute; top:.75rem; right:.75rem;
  padding:.2rem .6rem; border-radius:999px;
  background:rgba(14,14,31,.85); border:1px solid var(--border);
  font-size:.65rem; font-weight:700; letter-spacing:.5px;
}
.vehicle-card-body { padding:1.25rem; }
.vehicle-name { font-size:1.05rem; font-weight:700; margin-bottom:.2rem; }
.vehicle-meta { font-size:.8rem; color:var(--muted); }
.vehicle-plate {
  display:inline-block; margin-top:.5rem;
  background:var(--dark3); border:1px solid var(--border);
  border-radius:4px; padding:.1rem .5rem;
  font-family:monospace; font-size:.8rem; font-weight:700; letter-spacing:1.5px;
}
.vehicle-card-footer {
  display:flex; justify-content:space-between; align-items:center;
  padding:.875rem 1.25rem; border-top:1px solid var(--border);
  font-size:.8rem; color:var(--muted);
}

/* ─── Progress ───────────────────────────────────────────────────────────── */
.progress-wrap { margin:.875rem 0; }
.progress-header {
  display:flex; justify-content:space-between;
  font-size:.75rem; color:var(--muted); margin-bottom:.375rem;
}
.progress-bar {
  height:7px; background:rgba(255,255,255,.08);
  border-radius:999px; overflow:hidden;
}
.progress-fill {
  height:100%; border-radius:999px;
  background:var(--grad); transition:width .6s cubic-bezier(.4,0,.2,1);
}
.progress-fill.w { background:#f97316; }
.progress-fill.d { background:#ef4444; }
.progress-fill.c { background:#ef4444; box-shadow:0 0 6px rgba(239,68,68,.6); }

/* Big progress */
.progress-big { background:rgba(255,255,255,.07); border-radius:999px; height:18px; overflow:hidden; margin:1.5rem 0; }
.progress-big-fill { height:100%; border-radius:999px; background:var(--grad); transition:width .8s cubic-bezier(.4,0,.2,1); }
.progress-big-fill.w { background:linear-gradient(90deg,#f97316,#fb923c); }
.progress-big-fill.d,.progress-big-fill.c { background:linear-gradient(90deg,#dc2626,#ef4444); }

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .6rem; border-radius:999px;
  font-size:.7rem; font-weight:700; letter-spacing:.3px;
}
.badge-ok      { background:rgba(34,197,94,.15);  color:#22c55e; }
.badge-warning { background:rgba(249,115,22,.15); color:#f97316; }
.badge-danger  { background:rgba(239,68,68,.15);  color:#ef4444; }
.badge-critique{ background:rgba(239,68,68,.2);   color:#f87171; border:1px solid rgba(239,68,68,.4); }
.badge-info    { background:rgba(59,130,246,.15); color:#60a5fa; }
.badge-trial   { background:rgba(197,25,125,.15); color:#C5197D; }
.badge-active  { background:rgba(34,197,94,.15);  color:#22c55e; }
.badge-canceled{ background:rgba(239,68,68,.15);  color:#ef4444; }
.badge-loa     { background:rgba(45,46,131,.35);  color:#a0a4e8; }
.badge-lld     { background:rgba(107,47,142,.35); color:#c4a0e8; }

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.875rem 1rem; border-radius:var(--rs);
  margin-bottom:.625rem; font-size:.875rem;
}
.alert-icon { flex-shrink:0; font-size:1.1rem; }
.alert-warning { background:rgba(249,115,22,.1);  border:1px solid rgba(249,115,22,.3); color:#fed7aa; }
.alert-danger  { background:rgba(239,68,68,.1);   border:1px solid rgba(239,68,68,.3);  color:#fecaca; }
.alert-critique{ background:rgba(239,68,68,.15);  border:1px solid rgba(239,68,68,.4);  color:#f87171; }
.alert-success { background:rgba(34,197,94,.1);   border:1px solid rgba(34,197,94,.3);  color:#bbf7d0; }
.alert-info    { background:rgba(59,130,246,.1);  border:1px solid rgba(59,130,246,.3); color:#bfdbfe; }

.upgrade-banner {
  background:linear-gradient(135deg,rgba(197,25,125,.12),rgba(45,46,131,.12));
  border:1px solid rgba(197,25,125,.3); border-radius:var(--r);
  padding:1rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:2rem; flex-wrap:wrap;
}

/* Flash */
.flash-container {
  position:fixed; top:72px; right:1rem; z-index:300;
  display:flex; flex-direction:column; gap:.5rem; max-width:360px;
}
.flash-message {
  padding:.875rem 1rem; border-radius:var(--rs);
  font-size:.875rem; box-shadow:var(--shadow);
  animation:slideIn .3s ease; cursor:pointer;
}
@keyframes slideIn {
  from { opacity:0; transform:translateX(1rem); }
  to   { opacity:1; transform:translateX(0); }
}

/* ─── Forms ──────────────────────────────────────────────────────────────── */
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-size:.85rem; font-weight:600; color:var(--light); margin-bottom:.375rem; }
.form-label .req { color:var(--magenta); }
.form-control {
  display:block; width:100%;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  border-radius:var(--rs); color:#fff;
  padding:.625rem .875rem;
  font-size:.9rem; transition:border-color .2s; outline:none;
}
.form-control:focus { border-color:var(--navy); background:rgba(255,255,255,.07); }
.form-control::placeholder { color:var(--muted); }
.form-control option { background:var(--dark2); }
select.form-control { cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238B8BAA' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .875rem center; padding-right:2.5rem; }
textarea.form-control { resize:vertical; min-height:90px; }
.form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.form-text { font-size:.78rem; color:var(--muted); margin-top:.25rem; }
.form-error { font-size:.78rem; color:var(--danger); margin-top:.25rem; }
.input-group { display:flex; }
.input-group .form-control { border-radius:var(--rs) 0 0 var(--rs); }
.input-group-text {
  display:flex; align-items:center; padding:0 .875rem;
  background:rgba(255,255,255,.06); border:1px solid var(--border); border-left:none;
  border-radius:0 var(--rs) var(--rs) 0; font-size:.85rem; color:var(--muted); white-space:nowrap;
}

/* Auth */
.auth-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:2rem; background:var(--dark);
  background-image:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(45,46,131,.3) 0%,transparent 70%);
}
.auth-card {
  width:100%; max-width:440px;
  background:var(--dark2); border:1px solid var(--border);
  border-radius:16px; padding:2.5rem 2rem;
}
.auth-logo { text-align:center; margin-bottom:2rem; }
.auth-logo img { height:60px; }
.auth-title { font-size:1.5rem; font-weight:800; text-align:center; margin-bottom:.375rem; }
.auth-sub { text-align:center; color:var(--muted); font-size:.9rem; margin-bottom:2rem; }
.auth-footer { text-align:center; margin-top:1.5rem; font-size:.85rem; color:var(--muted); }
.auth-footer a { color:#fff; font-weight:500; text-decoration:none; }
.auth-footer a:hover { text-decoration:underline; }
.auth-divider { text-align:center; margin:1.5rem 0; position:relative; color:var(--muted); font-size:.8rem; }
.auth-divider::before,.auth-divider::after {
  content:''; position:absolute; top:50%; width:40%;
  height:1px; background:var(--border);
}
.auth-divider::before { left:0; }
.auth-divider::after  { right:0; }

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
.tabs {
  display:flex; gap:.125rem;
  border-bottom:1px solid var(--border);
  margin-bottom:2rem; overflow-x:auto;
}
.tab {
  padding:.75rem 1.25rem; color:var(--muted);
  text-decoration:none; font-size:.875rem; font-weight:500;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  white-space:nowrap; transition:color .15s; flex-shrink:0;
}
.tab:hover { color:#fff; }
.tab.active { color:#fff; border-bottom-color:var(--magenta); }

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:var(--r); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
thead th {
  padding:.75rem 1rem; text-align:left;
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--muted);
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
tbody tr { border-bottom:1px solid rgba(255,255,255,.04); }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(255,255,255,.025); }
tbody td { padding:.875rem 1rem; vertical-align:middle; }

/* ─── Km stats ───────────────────────────────────────────────────────────── */
.km-stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1rem; margin-bottom:1.5rem;
}
.km-stat {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--r); padding:1.25rem 1.5rem;
}
.km-stat-value { font-size:1.85rem; font-weight:800; line-height:1; }
.km-stat-label { font-size:.72rem; color:var(--muted); margin-top:.3rem; text-transform:uppercase; letter-spacing:.5px; }
.km-stat-sub   { font-size:.8rem; color:var(--muted); margin-top:.5rem; }

/* ─── Vehicle header ─────────────────────────────────────────────────────── */
.vehicle-header {
  display:flex; align-items:center; gap:1.5rem;
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--r); padding:1.5rem; margin-bottom:2rem; flex-wrap:wrap;
}
.vehicle-header-photo {
  width:80px; height:80px; border-radius:var(--r);
  background:var(--dark3); overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:2rem; opacity:.4;
}
.vehicle-header-photo img { width:100%; height:100%; object-fit:cover; opacity:1; }
.vehicle-header-info { flex:1; }
.vehicle-header-name { font-size:1.5rem; font-weight:800; letter-spacing:-.3px; }
.vehicle-header-meta { color:var(--muted); font-size:.9rem; margin-top:.25rem; }

/* ─── Charts ─────────────────────────────────────────────────────────────── */
.chart-wrap {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--r); padding:1.5rem; margin-bottom:1.5rem;
}
.chart-title { font-size:.9rem; font-weight:700; margin-bottom:1.25rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

/* ─── Empty state ────────────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:4rem 2rem; color:var(--muted); }
.empty-icon { font-size:3rem; margin-bottom:1rem; opacity:.6; }
.empty-title { font-size:1.1rem; font-weight:700; color:#fff; margin-bottom:.5rem; }

/* ─── Modal (Alpine.js) ──────────────────────────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.modal {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:16px; padding:2rem; width:100%; max-width:540px;
  max-height:90vh; overflow-y:auto;
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.5rem;
}
.modal-title { font-size:1.15rem; font-weight:700; }
.modal-close { background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.25rem; padding:.25rem; transition:color .15s; }
.modal-close:hover { color:#fff; }

/* ─── Documents ──────────────────────────────────────────────────────────── */
.doc-list { display:flex; flex-direction:column; gap:.5rem; }
.doc-item {
  display:flex; align-items:center; gap:1rem;
  background:var(--dark3); border:1px solid var(--border);
  border-radius:var(--rs); padding:.875rem 1rem;
}
.doc-icon { font-size:1.5rem; flex-shrink:0; }
.doc-info { flex:1; min-width:0; }
.doc-name { font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-meta { font-size:.75rem; color:var(--muted); margin-top:.1rem; }
.doc-actions { display:flex; gap:.5rem; flex-shrink:0; }

/* ─── Plan cards ─────────────────────────────────────────────────────────── */
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; margin-top:2rem; }
.plan-card {
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--r); padding:2rem; position:relative;
  transition:border-color .2s;
}
.plan-card.featured {
  border-color:var(--navy);
  box-shadow:0 0 0 1px var(--navy), 0 8px 32px rgba(45,46,131,.3);
}
.plan-card .plan-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff;
  padding:.25rem .875rem; border-radius:999px;
  font-size:.7rem; font-weight:700; white-space:nowrap;
}
.plan-name   { font-size:1.1rem; font-weight:700; margin-bottom:.5rem; }
.plan-price  { font-size:2.5rem; font-weight:900; letter-spacing:-1px; line-height:1; }
.plan-price span { font-size:1rem; font-weight:400; color:var(--muted); }
.plan-features { margin:1.5rem 0; display:flex; flex-direction:column; gap:.5rem; font-size:.875rem; }
.plan-feature { display:flex; align-items:center; gap:.5rem; }
.plan-feature::before { content:'✓'; color:var(--success); font-weight:700; }

/* ─── Helpers ────────────────────────────────────────────────────────────── */
.text-muted   { color:var(--muted); }
.text-success { color:var(--success); }
.text-warning { color:var(--warning); }
.text-danger  { color:var(--danger); }
.text-magenta { color:var(--magenta); }
.text-sm  { font-size:.85rem; }
.text-xs  { font-size:.75rem; }
.fw-700   { font-weight:700; }
.mt-1 { margin-top:.5rem; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.mt-4 { margin-top:2rem; }
.mb-1 { margin-bottom:.5rem; }
.mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; }
.flex { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-1 { gap:.5rem; }
.gap-2 { gap:1rem; }
.d-none { display:none; }
.w-full { width:100%; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:768px) {
  .container { padding:1.5rem 1rem; }
  .page-title { font-size:1.4rem; }
  .nav-links { display:none; }
  .nav-user-name { display:none; }
  .vehicles-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .km-stats-grid { grid-template-columns:repeat(2,1fr); }
  .plan-grid { grid-template-columns:1fr; }
  .vehicle-header { gap:1rem; }
  .modal { padding:1.5rem 1.25rem; }
  .tabs { gap:0; }
  .tab { padding:.625rem .875rem; font-size:.8rem; }
}
@media (max-width:480px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .km-stats-grid { grid-template-columns:1fr 1fr; }
  .auth-card { padding:2rem 1.5rem; }
}