/* ═══════════════════════════════════════════
   VARIABLES
═══════════════════════════════════════════ */
:root {
    --red:   #e8001e;
    --red-d: #c20019;
    --bg:    #080808;
    --bg-1:  #0e0e0e;
    --bg-2:  #131313;
    --bg-3:  #191919;
    --bg-4:  #1f1f1f;
    --bdr:   #1e1e1e;
    --bdr-2: #272727;
    --white: #ffffff;
    --off:   #f0f0f0;
    --muted: #868686;
    --dim:   #424242;
    --green: #22c55e;
    --amber: #f59e0b;
    --blue:  #3b82f6;
    --fd:    'Barlow Condensed', sans-serif;
    --fb:    'Barlow', 'Segoe UI', sans-serif;
    --fi:    'Inter', 'Segoe UI', sans-serif;
    --t:     0.18s ease;
    --r:     10px;
    --rs:    7px;
    --sb:    240px;
    --hh:    58px;
}

/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family:var(--fi); background:var(--bg); color:var(--white); -webkit-font-smoothing:antialiased; overflow:hidden; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { font-family:var(--fi); cursor:pointer; border:none; background:none; color:inherit; }
input, select, textarea { font-family:var(--fi); }
::selection { background:rgba(232,0,30,0.22); }
.hidden { display:none !important; }

/* ═══════════════════════════════════════════
   SCREENS (auth)
═══════════════════════════════════════════ */
.screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); z-index:1000; overflow-y:auto; padding:24px; }
.auth-wrap { width:100%; max-width:420px; }
.auth-brand { display:flex; align-items:center; gap:10px; margin-bottom:32px; }
.auth-logo-mark { color:var(--red); font-size:1.5rem; }
.auth-logo-name { font-family:var(--fb); font-size:1.3rem; font-weight:600; }
.auth-logo-name strong { color:var(--red); font-weight:800; }
.auth-box { background:var(--bg-1); border:1px solid var(--bdr); border-radius:var(--r); padding:32px; }
.auth-box h2 { font-family:var(--fd); font-size:1.8rem; font-weight:800; text-transform:uppercase; letter-spacing:-0.5px; margin-bottom:4px; }
.auth-sub { font-size:0.84rem; color:var(--muted); margin-bottom:28px; }
.af-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.af-field label { font-size:0.68rem; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:0.8px; }
.af-field input { background:var(--bg-2); border:1px solid var(--bdr-2); border-radius:var(--rs); color:var(--white); font-size:0.9rem; padding:11px 14px; outline:none; transition:border-color var(--t); }
.af-field input:focus { border-color:var(--red); }
.auth-error { background:rgba(232,0,30,0.08); border:1px solid rgba(232,0,30,0.25); color:#ff6b6b; border-radius:var(--rs); padding:10px 14px; font-size:0.82rem; margin-bottom:14px; }
.auth-btn { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:13px; background:var(--red); color:#fff; font-family:var(--fb); font-size:0.9rem; font-weight:700; border-radius:var(--rs); transition:background var(--t); margin-top:6px; }
.auth-btn:hover { background:var(--red-d); }
.auth-btn:disabled { opacity:0.6; cursor:not-allowed; }
.auth-setup-link { display:block; text-align:center; font-size:0.78rem; color:var(--dim); margin-top:16px; transition:color var(--t); }
.auth-setup-link:hover { color:var(--red); }
.setup-account-card { display:flex; align-items:center; gap:12px; background:var(--bg-2); border:1px solid var(--bdr-2); border-radius:var(--rs); padding:12px 14px; margin-bottom:12px; }
.sac-avatar { width:36px; height:36px; background:rgba(232,0,30,0.1); border:1px solid rgba(232,0,30,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--fb); font-size:0.72rem; font-weight:800; color:var(--red); flex-shrink:0; }
.sac-info strong { display:block; font-family:var(--fb); font-size:0.86rem; font-weight:700; }
.sac-info span { font-size:0.75rem; color:var(--muted); }
.setup-progress { font-size:0.82rem; color:var(--amber); padding:8px 0; }

/* ═══════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════ */
#app { display:flex; height:100vh; overflow:hidden; }
#app.hidden { display:none; }

/* Sidebar */
.sidebar { width:var(--sb); background:var(--bg-1); border-right:1px solid var(--bdr); display:flex; flex-direction:column; flex-shrink:0; z-index:300; transition:transform var(--t); }
.sb-top { display:flex; align-items:center; justify-content:space-between; padding:0 18px; height:var(--hh); border-bottom:1px solid var(--bdr); flex-shrink:0; }
.sb-logo { display:flex; align-items:center; gap:9px; }
.sb-logo-mark { color:var(--red); font-size:1.1rem; }
.sb-logo-name { font-family:var(--fb); font-size:1.1rem; font-weight:600; }
.sb-logo-name strong { color:var(--red); font-weight:800; }
.sb-close { display:none; color:var(--dim); font-size:1rem; padding:4px; }
.sb-nav { flex:1; overflow-y:auto; padding:10px 0; display:flex; flex-direction:column; gap:2px; }
.sb-nav::-webkit-scrollbar { width:3px; }
.sb-nav::-webkit-scrollbar-thumb { background:var(--bdr-2); border-radius:2px; }
.sn-item { display:flex; align-items:center; gap:10px; padding:9px 18px; font-family:var(--fb); font-size:0.82rem; font-weight:500; color:var(--muted); cursor:pointer; transition:color var(--t), background var(--t); border-radius:0; position:relative; }
.sn-item:hover { color:var(--off); background:var(--bg-2); }
.sn-item.active { color:var(--white); background:var(--bg-3); border-right:2px solid var(--red); }
.sn-item i { font-size:0.82rem; width:16px; flex-shrink:0; }
.sn-item > span { flex:1; }
.sn-badge { background:var(--bg-4); color:var(--muted); font-family:var(--fi); font-size:0.6rem; font-weight:700; padding:1px 5px; border-radius:4px; }
.sn-badge.sn-red { background:rgba(232,0,30,0.15); color:var(--red); }
.sn-sep { height:1px; background:var(--bdr); margin:8px 0; }
.sb-user { display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid var(--bdr); flex-shrink:0; }
.su-av { width:32px; height:32px; background:rgba(232,0,30,0.1); border:1px solid rgba(232,0,30,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--fb); font-size:0.68rem; font-weight:800; color:var(--red); flex-shrink:0; }
.sb-user strong { display:block; font-family:var(--fb); font-size:0.82rem; font-weight:700; color:var(--white); }
.sb-user span { font-size:0.72rem; color:var(--dim); }
.su-logout { margin-left:auto; color:var(--dim); font-size:0.9rem; padding:4px; transition:color var(--t); }
.su-logout:hover { color:var(--red); }
.sb-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:299; }

/* App body */
.app-body { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.app-header { height:var(--hh); background:var(--bg-1); border-bottom:1px solid var(--bdr); display:flex; align-items:center; justify-content:space-between; padding:0 24px; flex-shrink:0; gap:16px; }
.ah-left { display:flex; align-items:center; gap:14px; min-width:0; }
.ah-menu { color:var(--dim); font-size:1rem; padding:4px; display:none; }
.ah-title { font-family:var(--fd); font-size:1.3rem; font-weight:800; text-transform:uppercase; letter-spacing:-0.3px; color:var(--white); white-space:nowrap; }
.ah-right { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.ah-date { font-size:0.75rem; color:var(--dim); }
.ah-ext { color:var(--dim); font-size:0.9rem; transition:color var(--t); }
.ah-ext:hover { color:var(--red); }
.app-content { flex:1; overflow-y:auto; padding:28px; }
.app-content::-webkit-scrollbar { width:4px; }
.app-content::-webkit-scrollbar-thumb { background:var(--bdr-2); border-radius:2px; }
.page-loading { display:flex; align-items:center; justify-content:center; height:200px; color:var(--dim); font-size:1.5rem; }

/* ═══════════════════════════════════════════
   COMMON UI COMPONENTS
═══════════════════════════════════════════ */
/* Page header */
.page-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap; }
.page-hd h1 { font-family:var(--fd); font-size:2rem; font-weight:900; text-transform:uppercase; letter-spacing:-0.5px; }
.page-hd p { font-size:0.84rem; color:var(--muted); margin-top:2px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:var(--rs); font-family:var(--fb); font-size:0.8rem; font-weight:700; cursor:pointer; transition:var(--t); border:none; }
.btn-red { background:var(--red); color:#fff; }
.btn-red:hover { background:var(--red-d); }
.btn-ghost { background:transparent; border:1px solid var(--bdr-2); color:var(--muted); }
.btn-ghost:hover { border-color:var(--off); color:var(--off); }
.btn-sm { padding:6px 12px; font-size:0.74rem; }
.btn-icon { width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; }

/* KPI cards */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:1px; background:var(--bdr); border:1px solid var(--bdr); border-radius:var(--r); overflow:hidden; margin-bottom:28px; }
.kpi-card { background:var(--bg-1); padding:22px 24px; }
.kpi-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.kpi-label i { color:var(--red); }
.kpi-value { font-family:var(--fd); font-size:2.4rem; font-weight:900; line-height:1; letter-spacing:-1px; color:var(--white); }
.kpi-value.red { color:var(--red); }
.kpi-value.green { color:var(--green); }
.kpi-sub { font-size:0.74rem; color:var(--dim); margin-top:5px; }

/* Table */
.tbl-wrap { background:var(--bg-1); border:1px solid var(--bdr); border-radius:var(--r); overflow:hidden; }
.tbl-top { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--bdr); gap:12px; flex-wrap:wrap; }
.tbl-top h3 { font-family:var(--fb); font-size:0.9rem; font-weight:700; color:var(--white); }
.tbl-search { display:flex; align-items:center; gap:8px; background:var(--bg-2); border:1px solid var(--bdr-2); border-radius:var(--rs); padding:6px 12px; }
.tbl-search i { color:var(--dim); font-size:0.75rem; }
.tbl-search input { background:none; border:none; outline:none; color:var(--white); font-size:0.82rem; width:180px; }
.tbl-search input::placeholder { color:var(--dim); }
table { width:100%; border-collapse:collapse; }
thead th { padding:10px 16px; text-align:left; font-family:var(--fi); font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--dim); border-bottom:1px solid var(--bdr); white-space:nowrap; }
tbody tr { border-bottom:1px solid var(--bdr); transition:background var(--t); }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--bg-2); }
tbody td { padding:12px 16px; font-size:0.82rem; color:var(--off); vertical-align:middle; }
.td-muted { color:var(--muted) !important; }
.td-actions { display:flex; gap:6px; }

/* Status badges */
.badge { display:inline-flex; align-items:center; gap:4px; font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:3px 8px; border-radius:4px; }
.badge::before { content:''; width:4px; height:4px; border-radius:50%; flex-shrink:0; }
.badge-green  { background:rgba(34,197,94,0.1);  color:var(--green); }   .badge-green::before  { background:var(--green); }
.badge-red    { background:rgba(232,0,30,0.1);   color:var(--red); }     .badge-red::before    { background:var(--red); }
.badge-amber  { background:rgba(245,158,11,0.1); color:var(--amber); }   .badge-amber::before  { background:var(--amber); }
.badge-blue   { background:rgba(59,130,246,0.1); color:var(--blue); }    .badge-blue::before   { background:var(--blue); }
.badge-gray   { background:var(--bg-3); color:var(--dim); }              .badge-gray::before   { background:var(--dim); }

/* Empty state */
.empty-state { padding:60px 24px; text-align:center; color:var(--dim); }
.empty-state i { font-size:2.5rem; margin-bottom:14px; display:block; opacity:0.3; }
.empty-state p { font-size:0.9rem; }

/* Filters bar */
.filter-bar { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; align-items:center; }
.filter-btn { padding:6px 14px; border:1px solid var(--bdr-2); border-radius:4px; font-family:var(--fb); font-size:0.74rem; font-weight:700; color:var(--muted); background:none; cursor:pointer; transition:var(--t); text-transform:uppercase; letter-spacing:0.5px; }
.filter-btn:hover { border-color:var(--dim); color:var(--off); }
.filter-btn.active { background:var(--red); border-color:var(--red); color:#fff; }

/* 2-column content grid */
.content-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.content-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* Section card */
.sec-card { background:var(--bg-1); border:1px solid var(--bdr); border-radius:var(--r); }
.sec-card-hd { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--bdr); }
.sec-card-hd h3 { font-family:var(--fb); font-size:0.88rem; font-weight:700; }
.sec-card-hd .badge { flex-shrink:0; }

/* ═══════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════ */
.dash-grid { display:grid; grid-template-columns:1fr 360px; gap:20px; }
.activity-feed { display:flex; flex-direction:column; gap:0; }
.af-item { display:flex; align-items:flex-start; gap:12px; padding:14px 20px; border-bottom:1px solid var(--bdr); }
.af-item:last-child { border-bottom:none; }
.af-icon { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.72rem; flex-shrink:0; margin-top:1px; }
.af-icon.red  { background:rgba(232,0,30,0.1);   color:var(--red); }
.af-icon.green { background:rgba(34,197,94,0.1);  color:var(--green); }
.af-icon.amber { background:rgba(245,158,11,0.1); color:var(--amber); }
.af-text strong { display:block; font-family:var(--fb); font-size:0.82rem; font-weight:700; color:var(--white); margin-bottom:2px; }
.af-text span { font-size:0.75rem; color:var(--muted); }
.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.qa-btn { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px; background:var(--bg-2); border:1px solid var(--bdr-2); border-radius:var(--rs); cursor:pointer; transition:var(--t); text-align:center; }
.qa-btn:hover { border-color:var(--red); background:rgba(232,0,30,0.04); }
.qa-btn i { font-size:1.1rem; color:var(--red); }
.qa-btn span { font-family:var(--fb); font-size:0.76rem; font-weight:700; color:var(--off); }

/* ═══════════════════════════════════════════
   URGENT REQUESTS
═══════════════════════════════════════════ */
.urgent-card { background:var(--bg-1); border:1px solid var(--bdr); border-radius:var(--r); padding:18px 20px; margin-bottom:10px; display:flex; gap:14px; align-items:flex-start; }
.urgent-card.priority-high { border-left:3px solid var(--red); }
.urgent-card.priority-medium { border-left:3px solid var(--amber); }
.uc-icon { width:36px; height:36px; border-radius:50%; background:rgba(232,0,30,0.1); border:1px solid rgba(232,0,30,0.2); display:flex; align-items:center; justify-content:center; color:var(--red); font-size:0.9rem; flex-shrink:0; }
.uc-body { flex:1; min-width:0; }
.uc-body h4 { font-family:var(--fb); font-size:0.9rem; font-weight:700; color:var(--white); margin-bottom:3px; }
.uc-body p { font-size:0.78rem; color:var(--muted); margin-bottom:8px; }
.uc-meta { display:flex; gap:10px; flex-wrap:wrap; }
.uc-meta span { font-size:0.72rem; color:var(--dim); display:flex; align-items:center; gap:4px; }
.uc-meta i { color:var(--red); font-size:0.6rem; }
.uc-actions { display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════
   FLEET GRID
═══════════════════════════════════════════ */
.fleet-app-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.vehicle-card { background:var(--bg-1); border:1px solid var(--bdr); border-radius:var(--r); padding:18px 20px; transition:border-color var(--t); border-top:2px solid transparent; }
.vehicle-card:hover { border-top-color:var(--red); }
.vc-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.vc-name { font-family:var(--fb); font-size:0.96rem; font-weight:700; color:var(--white); }
.vc-cat { font-size:0.7rem; color:var(--dim); margin-top:2px; }
.vc-details { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.vc-detail { display:flex; align-items:center; gap:8px; font-size:0.78rem; color:var(--muted); }
.vc-detail i { color:var(--dim); font-size:0.7rem; width:12px; }
.vc-foot { display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid var(--bdr); }
.vc-plate { font-family:var(--fd); font-size:0.9rem; font-weight:800; color:var(--dim); letter-spacing:1px; }

/* ═══════════════════════════════════════════
   MODAL
═══════════════════════════════════════════ */
#modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.72); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
.modal-box { background:var(--bg-1); border:1px solid var(--bdr-2); border-radius:var(--r); width:100%; max-width:540px; max-height:90vh; overflow-y:auto; box-shadow:0 32px 80px rgba(0,0,0,0.8); }
.modal-box::-webkit-scrollbar { width:3px; }
.modal-box::-webkit-scrollbar-thumb { background:var(--bdr-2); }
.modal-hd { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--bdr); }
.modal-hd h3 { font-family:var(--fd); font-size:1.2rem; font-weight:800; text-transform:uppercase; letter-spacing:-0.3px; }
.modal-close { width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:1rem; border-radius:50%; transition:var(--t); }
.modal-close:hover { background:var(--bg-3); color:var(--white); }
.modal-bd { padding:22px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid.full { grid-template-columns:1fr; }
.form-field { display:flex; flex-direction:column; gap:5px; }
.form-field.span2 { grid-column:span 2; }
.form-field label { font-size:0.67rem; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:0.8px; }
.form-field input, .form-field select, .form-field textarea { background:var(--bg-2); border:1px solid var(--bdr-2); border-radius:var(--rs); color:var(--white); font-size:0.86rem; padding:10px 13px; outline:none; transition:border-color var(--t); width:100%; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:var(--red); }
.form-field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23424242' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; background-size:13px; background-color:var(--bg-2); padding-right:34px; cursor:pointer; }
.form-field select option { background:var(--bg-1); }
.form-field textarea { resize:vertical; min-height:90px; }
.modal-foot { display:flex; gap:10px; justify-content:flex-end; padding-top:18px; border-top:1px solid var(--bdr); margin-top:18px; }

/* ═══════════════════════════════════════════
   TOAST
═══════════════════════════════════════════ */
#toast-wrap { position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:8px; z-index:2000; }
.toast { display:flex; align-items:center; gap:10px; background:var(--bg-3); border:1px solid var(--bdr-2); border-radius:var(--rs); padding:12px 16px; font-size:0.82rem; color:var(--off); box-shadow:0 8px 24px rgba(0,0,0,0.5); animation:toastIn 0.2s ease; min-width:260px; max-width:340px; }
.toast i { font-size:0.9rem; flex-shrink:0; }
.toast.success { border-left:3px solid var(--green); }
.toast.success i { color:var(--green); }
.toast.error { border-left:3px solid var(--red); }
.toast.error i { color:var(--red); }
.toast.info { border-left:3px solid var(--blue); }
.toast.info i { color:var(--blue); }
@keyframes toastIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

/* ═══════════════════════════════════════════
   MESSAGES
═══════════════════════════════════════════ */
.msg-feed { display:flex; flex-direction:column; gap:10px; max-height:400px; overflow-y:auto; padding:16px 20px; }
.msg-item { display:flex; gap:10px; }
.msg-av { width:28px; height:28px; border-radius:50%; background:rgba(232,0,30,0.1); border:1px solid rgba(232,0,30,0.2); display:flex; align-items:center; justify-content:center; font-family:var(--fb); font-size:0.62rem; font-weight:800; color:var(--red); flex-shrink:0; }
.msg-bubble { background:var(--bg-2); border:1px solid var(--bdr); border-radius:var(--rs); padding:10px 13px; flex:1; }
.msg-bubble strong { display:block; font-family:var(--fb); font-size:0.78rem; font-weight:700; color:var(--white); margin-bottom:3px; }
.msg-bubble p { font-size:0.8rem; color:var(--muted); line-height:1.6; }
.msg-bubble time { font-size:0.65rem; color:var(--dim); margin-top:4px; display:block; }
.msg-bubble.urgent { border-color:rgba(232,0,30,0.3); }
.msg-compose { display:flex; gap:8px; padding:14px 20px; border-top:1px solid var(--bdr); }
.msg-input { flex:1; background:var(--bg-2); border:1px solid var(--bdr-2); border-radius:var(--rs); color:var(--white); font-size:0.84rem; padding:9px 13px; outline:none; transition:border-color var(--t); }
.msg-input:focus { border-color:var(--red); }

/* ═══════════════════════════════════════════
   TEAM
═══════════════════════════════════════════ */
.team-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.team-card { background:var(--bg-1); border:1px solid var(--bdr); border-radius:var(--r); padding:20px; text-align:center; }
.tc-av { width:52px; height:52px; border-radius:50%; background:rgba(232,0,30,0.1); border:1px solid rgba(232,0,30,0.2); display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:1.1rem; font-weight:800; color:var(--red); margin:0 auto 12px; }
.tc-name { font-family:var(--fb); font-size:0.9rem; font-weight:700; color:var(--white); margin-bottom:3px; }
.tc-email { font-size:0.74rem; color:var(--muted); margin-bottom:10px; }
.tc-actions { display:flex; gap:6px; justify-content:center; }

/* ═══════════════════════════════════════════
   ANIMATIONS & TRANSITIONS
═══════════════════════════════════════════ */
@keyframes fadeUp    { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 0 0 rgba(232,0,30,0.35)} 50%{box-shadow:0 0 0 5px rgba(232,0,30,0)} }
@keyframes shimmer   { from{background-position:-400px 0} to{background-position:400px 0} }
@keyframes spin      { to{transform:rotate(360deg)} }

.page-fade { animation:fadeUp 0.24s ease; }

/* Sidebar active — left pill indicator */
.sn-item { transition:color var(--t), background var(--t), padding-left var(--t); }
.sn-item.active { border-right:none; background:rgba(232,0,30,0.08); color:var(--white); padding-left:22px; }
.sn-item.active i { color:var(--red); }
.sn-item.active::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--red); border-radius:0 3px 3px 0; }
.sn-badge.sn-red { animation:pulse-glow 2.5s infinite; }

/* Buttons glow */
.btn-red { box-shadow:0 0 0 0 rgba(232,0,30,0); transition:background var(--t), box-shadow var(--t), transform var(--t); }
.btn-red:hover { box-shadow:0 0 22px rgba(232,0,30,0.3); transform:translateY(-1px); }
.btn-red:active { transform:translateY(0); }

/* Modal slide-in */
.modal-box { animation:fadeUp 0.2s cubic-bezier(.16,1,.3,1); }
#modal-overlay { backdrop-filter:blur(4px); }

/* KPI hover */
.kpi-card { cursor:default; transition:background var(--t); }
.kpi-card:hover { background:var(--bg-2); }

/* Table row animate */
tbody tr { animation:fadeIn 0.15s ease; }

/* Vehicle card glow */
.vehicle-card { transition:border-color var(--t), box-shadow var(--t), transform var(--t); }
.vehicle-card:hover { border-top-color:var(--red); box-shadow:0 8px 32px rgba(0,0,0,0.4); transform:translateY(-2px); }

/* Skeleton */
.skeleton { background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-3) 50%,var(--bg-2) 75%); background-size:600px 100%; animation:shimmer 1.6s infinite; border-radius:var(--rs); }

/* ═══════════════════════════════════════════
   PLANNING / CALENDAR
═══════════════════════════════════════════ */
.planning-controls { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap; }
.planning-nav { display:flex; align-items:center; gap:6px; }
.planning-week-label { font-family:var(--fb); font-size:0.92rem; font-weight:700; color:var(--white); padding:0 10px; min-width:220px; text-align:center; }

.planning-grid-wrap { background:var(--bg-1); border:1px solid var(--bdr); border-radius:var(--r); overflow-x:auto; }
.planning-header { display:grid; grid-template-columns:170px repeat(7,1fr); border-bottom:1px solid var(--bdr); min-width:700px; }
.pg-corner { padding:12px 16px; border-right:1px solid var(--bdr); display:flex; align-items:center; }
.pg-corner span { font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--dim); }
.pg-day-hd { padding:10px 6px; text-align:center; border-right:1px solid var(--bdr); }
.pg-day-hd:last-child { border-right:none; }
.pg-day-name { display:block; font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--dim); }
.pg-day-num { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-family:var(--fd); font-size:1.05rem; font-weight:800; color:var(--white); margin:4px auto 0; transition:background var(--t); }
.pg-day-num.today { background:var(--red); color:#fff; }

.pg-body { display:flex; flex-direction:column; min-width:700px; }
.pg-row { display:grid; grid-template-columns:170px 1fr; border-bottom:1px solid var(--bdr); min-height:54px; }
.pg-row:last-child { border-bottom:none; }
.pg-row:hover .pg-vehicle-label { background:var(--bg-3); }
.pg-vehicle-label { padding:10px 14px; border-right:1px solid var(--bdr); display:flex; flex-direction:column; justify-content:center; gap:2px; background:var(--bg-2); flex-shrink:0; transition:background var(--t); }
.pg-vname { font-family:var(--fb); font-size:0.8rem; font-weight:700; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pg-vcat { font-size:0.62rem; color:var(--dim); text-transform:uppercase; letter-spacing:0.5px; }
.pg-vstatus { width:6px; height:6px; border-radius:50%; margin-top:3px; }

.pg-days { position:relative; display:grid; grid-template-columns:repeat(7,1fr); }
.pg-cell { border-right:1px solid var(--bdr); min-height:54px; transition:background var(--t); }
.pg-cell:last-child { border-right:none; }
.pg-cell.today { background:rgba(232,0,30,0.025); }

.pg-events-layer { position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; }
.pg-event { position:absolute; height:30px; top:50%; transform:translateY(-50%); border-radius:5px; display:flex; align-items:center; padding:0 8px; cursor:pointer; pointer-events:all; font-size:0.69rem; font-weight:700; font-family:var(--fb); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:filter var(--t), transform var(--t), box-shadow var(--t); z-index:2; }
.pg-event:hover { filter:brightness(1.25); transform:translateY(calc(-50% - 2px)); box-shadow:0 4px 16px rgba(0,0,0,0.4); }
.pg-event.status-pending   { background:rgba(245,158,11,0.18); border:1px solid rgba(245,158,11,0.45); color:#fbbf24; }
.pg-event.status-confirmed { background:rgba(59,130,246,0.18); border:1px solid rgba(59,130,246,0.45); color:#60a5fa; }
.pg-event.status-active    { background:rgba(34,197,94,0.18);  border:1px solid rgba(34,197,94,0.45);  color:#4ade80; }
.pg-event.status-completed { background:rgba(60,60,60,0.3);    border:1px solid rgba(80,80,80,0.3);    color:var(--dim); }

.planning-legend { display:flex; gap:20px; margin-top:14px; flex-wrap:wrap; align-items:center; }
.planning-legend > span { display:flex; align-items:center; gap:6px; font-size:0.74rem; color:var(--muted); }
.pg-dot { width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.pg-dot.status-pending   { background:rgba(245,158,11,0.7); }
.pg-dot.status-confirmed { background:rgba(59,130,246,0.7); }
.pg-dot.status-active    { background:rgba(34,197,94,0.7); }
.pg-dot.status-completed { background:var(--bg-5); }

/* ═══════════════════════════════════════════
   FLEET ENHANCEMENTS
═══════════════════════════════════════════ */
.fleet-tabs { display:flex; gap:2px; background:var(--bg-2); border:1px solid var(--bdr); border-radius:var(--r); padding:4px; width:fit-content; margin-bottom:20px; }
.fleet-tab { display:flex; align-items:center; gap:7px; padding:7px 16px; border-radius:var(--rs); font-family:var(--fb); font-size:0.78rem; font-weight:700; color:var(--muted); cursor:pointer; transition:var(--t); }
.fleet-tab:hover { color:var(--off); }
.fleet-tab.active { background:var(--bg-4); color:var(--white); box-shadow:0 1px 6px rgba(0,0,0,0.3); }
.fleet-tab i { font-size:0.75rem; }

/* Vehicle health */
.health-row { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--bdr); }
.health-bar { flex:1; height:3px; background:var(--bg-4); border-radius:2px; overflow:hidden; }
.health-bar-fill { height:100%; border-radius:2px; transition:width 0.5s ease; }
.health-bar-fill.good { background:var(--green); }
.health-bar-fill.warn { background:var(--amber); }
.health-bar-fill.crit { background:var(--red); }
.health-label { font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; white-space:nowrap; }
.health-label.good { color:var(--green); }
.health-label.warn { color:var(--amber); }
.health-label.crit { color:var(--red); }

/* Maintenance cards */
.maint-alert-banner { border-radius:var(--r); padding:12px 18px; margin-bottom:14px; display:flex; align-items:center; gap:12px; }
.maint-alert-banner.warn { background:rgba(245,158,11,0.07); border:1px solid rgba(245,158,11,0.2); }
.maint-alert-banner.crit { background:rgba(232,0,30,0.07); border:1px solid rgba(232,0,30,0.2); }
.maintenance-list { display:flex; flex-direction:column; gap:8px; }
.maint-card { background:var(--bg-1); border:1px solid var(--bdr); border-radius:var(--r); padding:16px 20px; display:flex; align-items:center; gap:14px; transition:border-color var(--t); }
.maint-card:hover { border-color:var(--bdr-2); background:var(--bg-2); }
.maint-indicator { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.maint-card-body { flex:1; min-width:0; }
.maint-card-name { font-family:var(--fb); font-size:0.88rem; font-weight:700; color:var(--white); margin-bottom:3px; }
.maint-card-sub { font-size:0.73rem; color:var(--muted); }
.maint-days { font-family:var(--fd); font-size:1.6rem; font-weight:900; line-height:1; }

/* Fleet stats */
.stats-vgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.stat-vehicle-card { background:var(--bg-1); border:1px solid var(--bdr); border-radius:var(--r); padding:18px 20px; transition:border-color var(--t); }
.stat-vehicle-card:hover { border-color:var(--bdr-2); }
.svc-name { font-family:var(--fb); font-size:0.9rem; font-weight:700; color:var(--white); margin-bottom:14px; display:flex; align-items:baseline; gap:6px; }
.svc-name small { font-size:0.68rem; color:var(--dim); font-weight:400; }
.svc-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.svc-row-label { font-size:0.68rem; color:var(--muted); display:flex; align-items:center; gap:5px; }
.svc-row-val { font-family:var(--fd); font-size:0.92rem; font-weight:800; color:var(--white); }
.svc-bar { height:4px; background:var(--bg-3); border-radius:3px; margin-bottom:12px; overflow:hidden; }
.svc-bar-fill { height:100%; border-radius:3px; transition:width 0.6s cubic-bezier(.16,1,.3,1); }
.svc-nums { display:flex; gap:20px; margin-top:10px; padding-top:10px; border-top:1px solid var(--bdr); }
.svc-num { display:flex; flex-direction:column; gap:1px; }
.svc-num-val { font-family:var(--fd); font-size:1.4rem; font-weight:900; color:var(--white); line-height:1; }
.svc-num-label { font-size:0.62rem; color:var(--dim); text-transform:uppercase; letter-spacing:0.5px; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:900px) {
    .dash-grid { grid-template-columns:1fr; }
    .content-grid { grid-template-columns:1fr; }
    .content-grid-3 { grid-template-columns:1fr 1fr; }
    .form-grid { grid-template-columns:1fr; }
    .form-field.span2 { grid-column:span 1; }
}
@media (max-width:768px) {
    .sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .sb-close { display:block; }
    .sb-overlay.open { display:block; }
    .ah-menu { display:block; }
    .content-grid-3 { grid-template-columns:1fr; }
    .app-content { padding:16px; }
    .kpi-grid { grid-template-columns:1fr 1fr; }
    .modal-box { max-width:100%; }
}
@media (max-width:480px) {
    .kpi-grid { grid-template-columns:1fr; }
    .fleet-app-grid { grid-template-columns:1fr; }
    .team-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════
   PRO POLISH — v2
═══════════════════════════════════════════ */

/* Header search */
.ah-cmd { display:flex; align-items:center; gap:8px; padding:7px 12px; background:var(--bg-2); border:1px solid var(--bdr-2); border-radius:var(--rs); color:var(--muted); font-size:0.78rem; transition:all var(--t); cursor:pointer; }
.ah-cmd:hover { border-color:var(--red); color:var(--white); }
.ah-cmd kbd { background:var(--bg-4); border:1px solid var(--bdr-2); border-radius:4px; padding:1px 5px; font-family:var(--fb); font-size:0.66rem; color:var(--dim); }
.ah-cmd:hover kbd { color:var(--off); border-color:var(--bdr-2); }
@media (max-width:720px) { .ah-cmd span { display:none; } .ah-cmd kbd { display:none; } }

/* Dashboard hero */
.dash-hero { display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:18px; }
.dash-hero-card { background:linear-gradient(135deg,#101010,#0a0a0a); border:1px solid var(--bdr); border-radius:var(--r); padding:20px 22px; position:relative; overflow:hidden; }
.dash-hero-card::before { content:''; position:absolute; inset:-1px; border-radius:var(--r); background:linear-gradient(120deg,transparent 60%,rgba(232,0,30,0.08)); pointer-events:none; }
.dh-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--dim); margin-bottom:6px; }
.dh-value { font-family:var(--fd); font-size:2.4rem; font-weight:900; letter-spacing:-1px; line-height:1; margin-bottom:14px; }
.dh-spark { width:100%; height:50px; display:block; }
.dh-sub { font-size:0.74rem; color:var(--muted); margin-top:8px; }
.dash-hero-mini { display:flex; flex-direction:column; gap:12px; }
.dhm-card { flex:1; background:var(--bg-1); border:1px solid var(--bdr); border-radius:var(--r); padding:16px 18px; display:flex; flex-direction:column; justify-content:center; gap:6px; transition:border-color var(--t); }
.dhm-card:hover { border-color:var(--bdr-2); }
.dhm-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--dim); }
.dhm-val { font-family:var(--fd); font-size:1.6rem; font-weight:900; letter-spacing:-0.5px; }
.dhm-val.green { color:var(--green); }
@media (max-width:880px) { .dash-hero { grid-template-columns:1fr; } .dash-hero-mini { flex-direction:row; } }

/* KPI cliquables */
.kpi-card.clickable { cursor:pointer; transition:transform var(--t), border-color var(--t); }
.kpi-card.clickable:hover { transform:translateY(-2px); border-color:var(--red); }

/* Alert strip */
.alert-strip { background:var(--bg-1); border:1px solid var(--bdr); border-radius:var(--r); padding:14px 18px; margin-bottom:18px; }
.as-title { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--amber); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.as-list { display:flex; flex-direction:column; gap:6px; }
.as-item { display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--bg-2); border:1px solid var(--bdr); border-left:3px solid var(--amber); border-radius:var(--rs); cursor:pointer; transition:all var(--t); font-size:0.82rem; }
.as-item.crit { border-left-color:var(--red); background:rgba(232,0,30,0.04); }
.as-item:hover { background:var(--bg-3); transform:translateX(2px); }
.as-item > i:first-child { color:var(--amber); font-size:0.85rem; width:18px; }
.as-item.crit > i:first-child { color:var(--red); }
.as-item span { flex:1; color:var(--off); }
.as-arrow { color:var(--dim); font-size:0.7rem; }

/* Command palette */
#cmd-palette { position:fixed; inset:0; z-index:9999; display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; animation:cpFade 0.16s ease; }
.cp-back { position:absolute; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); }
.cp-box { position:relative; width:100%; max-width:560px; background:var(--bg-1); border:1px solid var(--bdr-2); border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,0.6); overflow:hidden; animation:cpRise 0.18s ease; }
.cp-search { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--bdr); }
.cp-search i { color:var(--dim); }
.cp-search input { flex:1; background:transparent; border:none; outline:none; color:var(--white); font-size:0.95rem; font-family:var(--fi); }
.cp-list { max-height:50vh; overflow-y:auto; padding:6px; }
.cp-list::-webkit-scrollbar { width:6px; }
.cp-list::-webkit-scrollbar-thumb { background:var(--bdr-2); border-radius:3px; }
.cp-item { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:var(--rs); cursor:pointer; font-size:0.86rem; color:var(--off); }
.cp-item i { color:var(--dim); width:18px; font-size:0.82rem; }
.cp-item.sel, .cp-item:hover { background:var(--bg-3); }
.cp-item.sel i, .cp-item:hover i { color:var(--red); }
.cp-lbl { flex:1; }
.cp-hint { font-size:0.7rem; color:var(--dim); text-transform:uppercase; letter-spacing:0.6px; }
.cp-empty { padding:30px; text-align:center; color:var(--dim); font-size:0.85rem; }
.cp-foot { display:flex; gap:14px; padding:8px 16px; border-top:1px solid var(--bdr); font-size:0.7rem; color:var(--dim); }
.cp-foot kbd { background:var(--bg-3); border:1px solid var(--bdr-2); border-radius:3px; padding:0 4px; font-family:var(--fb); font-size:0.65rem; }
@keyframes cpFade { from { opacity:0; } to { opacity:1; } }
@keyframes cpRise { from { transform:translateY(-8px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* Fiche client */
.cust-detail { display:flex; flex-direction:column; gap:14px; }
.cd-top { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.cd-stat { background:var(--bg-2); border:1px solid var(--bdr); border-radius:var(--rs); padding:12px; display:flex; flex-direction:column; gap:4px; }
.cd-stat span { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--dim); }
.cd-stat strong { font-family:var(--fd); font-size:1.3rem; font-weight:900; }
.cd-info { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; padding:14px; background:var(--bg-2); border:1px solid var(--bdr); border-radius:var(--rs); font-size:0.84rem; }
.cd-info > div { display:flex; flex-direction:column; gap:2px; }
.cd-info span { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--dim); }
.cd-info a { color:var(--off); }
.cd-info a:hover { color:var(--red); }
@media (max-width:640px) { .cd-top { grid-template-columns:repeat(2,1fr); } .cd-info { grid-template-columns:1fr; } }

/* Page transitions */
.app-content { animation:pageIn 0.22s ease; }
@keyframes pageIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* Tables hover sur lignes cliquables */
table tbody tr { transition:background var(--t); }