/* dashboard-pro-dark.css — palette dark commune dashboards individuels (particulier-v3, futurs).
 * Extrait du CSS inline de client-dashboard-v3-new.html, factorisé pour éviter la duplication
 * lors de l'ajout de nouveaux dashboards individuels (particulier, pro mono, taxi indépendant).
 * client-dashboard-v3-new.html garde son CSS inline pour l'instant (refacto à part, hors PR).
 */

:root {
    --navy:#0A1628;--blue:#2E86DE;--blue-light:#54A0FF;
    --blue-dim:rgba(46,134,222,0.12);--blue-border:rgba(46,134,222,0.3);
    --green:#22c55e;--green-dim:rgba(34,197,94,0.1);--green-border:rgba(34,197,94,0.25);
    --orange:#f97316;--orange-dim:rgba(249,115,22,0.1);--orange-border:rgba(249,115,22,0.25);
    --red:#ef4444;--red-dim:rgba(239,68,68,0.1);--red-border:rgba(239,68,68,0.25);
    --yellow:#eab308;--yellow-dim:rgba(234,179,8,0.1);--yellow-border:rgba(234,179,8,0.25);
    --surface:#1A2535;--surface2:#1F2D40;--surface3:#243447;
    --bg:#0F1923;--border:#2A3548;--border-hover:#3A4A5E;
    --text:#FFFFFF;--text-2:#8B9BB4;--text-3:#5E7088;
    --radius:16px;--radius-sm:10px;--radius-xs:6px;
    --shadow:0 1px 3px rgba(0,0,0,0.2),0 4px 16px rgba(0,0,0,0.15);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;}

/* HEADER */
header{position:sticky;top:0;z-index:200;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--navy);box-shadow:0 2px 12px rgba(0,0,0,0.2);}
.header-left{display:flex;align-items:center;gap:8px;}
.header-left img{width:28px;height:28px;border-radius:7px;object-fit:cover;}
.header-brand{font-size:14px;font-weight:800;color:#fff;}
.header-greeting{font-size:12px;color:var(--text-2);font-weight:500;}
.header-logout{background:none;border:none;color:var(--text-3);font-size:11px;cursor:pointer;font-family:inherit;text-decoration:underline;padding:4px 8px;}
.header-logout:hover{color:var(--text-2);}

.container{max-width:520px;margin:0 auto;padding:16px;}

/* VEHICLE SELECTOR (multi-vehicle particulier) */
.veh-select-wrap{margin-bottom:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;display:flex;align-items:center;gap:10px;}
.veh-select-wrap label{font-size:11px;color:var(--text-2);font-weight:600;flex-shrink:0;}
.veh-select{flex:1;padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-size:13px;font-family:inherit;outline:none;}
.veh-select:focus{border-color:var(--blue);}

/* TABS (responsive desktop / tablet / mobile bottom-nav) */
.tabs{display:flex;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:6px;margin:0 auto 18px;box-shadow:var(--shadow);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:880px;}
.tabs::-webkit-scrollbar{display:none;}
.tab{flex:1 0 auto;padding:11px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;color:var(--text-3);background:transparent;white-space:nowrap;min-width:0;transition:background .18s,color .18s,box-shadow .18s,transform .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.tab:hover{color:var(--text);background:rgba(46,134,222,.08);}
.tab.active{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(46,134,222,.35);transform:translateY(-1px);}
@media (min-width:768px){.tab{padding:12px 18px;font-size:14px;gap:8px;}.tabs{gap:10px;padding:8px;}}
@media (max-width:767px){
  .tabs{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;border-radius:0;border-left:0;border-right:0;border-bottom:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:40;background:var(--surface);box-shadow:0 -4px 16px rgba(0,0,0,.18);overflow-x:auto;}
  .tab{flex:1 1 0;flex-direction:column;font-size:10px;padding:8px 4px;gap:2px;line-height:1.1;border-radius:8px;min-height:48px;}
  .tab.active{transform:none;}
  body{padding-bottom:74px;}
}
.panel{display:none;}.panel.active{display:block;}

/* CARDS */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;box-shadow:var(--shadow);overflow:hidden;}
.card-inner{padding:20px;}
.card-title{font-size:15px;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.card-sub{font-size:11px;color:var(--text-2);margin-bottom:14px;}

/* HERO */
.hero{text-align:center;padding:20px 16px 12px;}
.hero-greeting{font-size:13px;color:var(--text-2);margin-bottom:4px;}
.hero-name{font-size:22px;font-weight:800;letter-spacing:-0.03em;margin-bottom:14px;}
.hero-photo{width:100%;height:220px;border-radius:var(--radius-sm);object-fit:contain;background:linear-gradient(135deg,#0f1722,#1a2332);cursor:pointer;}
@media (max-width:480px){.hero-photo{height:180px;}}
.hero-placeholder{width:100%;height:160px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--surface2),var(--surface3));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;}
.hero-initials{font-size:48px;font-weight:900;color:var(--blue);}
.upload-wrap{padding:10px 20px;border-top:1px solid var(--border);}
.upload-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;background:var(--surface2);border:1.5px dashed var(--border-hover);border-radius:8px;font-size:12px;font-weight:600;color:var(--blue);cursor:pointer;font-family:inherit;}
.plate-wrap{display:flex;justify-content:center;padding:14px 20px;}
.plate{background:var(--navy);border:2px solid var(--blue-border);border-radius:10px;padding:8px 24px;font-size:18px;font-weight:900;color:var(--blue-light);letter-spacing:0.06em;}
.hero-model{font-size:12px;color:var(--text-2);margin-top:6px;}

/* OBD live cells */
.obd-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--border);background:var(--surface2);}
.obd-cell{padding:12px 6px;text-align:center;border-right:1px solid var(--border);}.obd-cell:last-child{border-right:none;}
.obd-icon{font-size:16px;}.obd-val{font-size:14px;font-weight:800;font-family:'Inter',monospace;margin-top:2px;}.obd-lbl{font-size:8px;color:var(--text-3);text-transform:uppercase;font-weight:600;}
@media(max-width:480px){.obd-grid{grid-template-columns:repeat(3,1fr);}.obd-cell:nth-child(3){border-right:none;}}

/* SCORE — santé score */
.score-section{text-align:center;padding:20px;}
.score-num{font-size:64px;font-weight:900;letter-spacing:-0.05em;line-height:1;}
.score-label{font-size:11px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:0.08em;margin-top:4px;}
.score-msg{font-size:13px;font-weight:600;margin-top:8px;}
.status-row{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px;border-top:1px solid var(--border);}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;}
.badge-green{background:var(--green-dim);color:var(--green);border:1px solid var(--green-border);}
.badge-yellow{background:var(--yellow-dim);color:var(--yellow);border:1px solid var(--yellow-border);}
.badge-orange{background:var(--orange-dim);color:var(--orange);border:1px solid var(--orange-border);}
.badge-red{background:var(--red-dim);color:var(--red);border:1px solid var(--red-border);}
.badge-muted{background:var(--surface3);color:var(--text-3);border:1px solid var(--border);}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor;}

/* WEAR tracking */
.wear-km{display:inline-flex;align-items:center;gap:6px;background:var(--blue-dim);color:var(--blue);padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;margin-bottom:14px;}
.comp{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border);}.comp:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.comp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.comp-name{font-size:13px;font-weight:700;}.comp-st{font-size:9px;font-weight:700;padding:2px 8px;border-radius:20px;}
.st-ok{background:var(--green-dim);color:var(--green);border:1px solid var(--green-border);}
.st-attention{background:var(--yellow-dim);color:var(--yellow);border:1px solid var(--yellow-border);}
.st-urgent{background:var(--orange-dim);color:var(--orange);border:1px solid var(--orange-border);}
.st-critique{background:var(--red-dim);color:var(--red);border:1px solid var(--red-border);}
.comp-desc{font-size:11px;color:var(--text-2);margin-bottom:6px;}.comp-bar{height:6px;background:var(--surface3);border-radius:999px;overflow:hidden;margin-bottom:5px;}
.comp-fill{height:100%;border-radius:999px;transition:width 1.2s ease;}
.fill-green{background:linear-gradient(90deg,#22c55e,#4ade80);}.fill-yellow{background:linear-gradient(90deg,#eab308,#facc15);}.fill-orange{background:linear-gradient(90deg,#f97316,#fb923c);}.fill-red{background:linear-gradient(90deg,#ef4444,#f87171);}
.comp-foot{display:flex;justify-content:space-between;font-size:10px;}.comp-km{color:var(--text-3);}.comp-days{font-weight:700;}

/* HISTORY (entretiens timeline) */
.hist-tl{position:relative;padding-left:24px;}.hist-tl::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--blue),var(--border));border-radius:999px;}
.hist-item{position:relative;margin-bottom:14px;}.hist-dot{position:absolute;left:-20px;top:10px;width:12px;height:12px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 2px var(--blue);background:var(--blue);z-index:1;}
.hist-card{background:var(--surface2);border-radius:12px;padding:12px 14px;border:1px solid var(--border);}
.hist-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;}.hist-type{font-size:13px;font-weight:700;}.hist-date{font-family:monospace;font-size:10px;color:var(--text-3);}
.hist-km{font-family:monospace;font-size:11px;color:var(--blue);font-weight:600;margin-bottom:3px;}.hist-desc{font-size:11px;color:var(--text-2);margin-bottom:6px;}
.hist-foot{display:flex;align-items:center;justify-content:space-between;}.hist-cost{font-size:13px;font-weight:800;}

/* DOCS (carte grise, assurance, CT, etc.) */
.doc-card{display:flex;align-items:center;gap:12px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;}
.doc-ico{width:44px;height:44px;border-radius:10px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.doc-body{flex:1;min-width:0;}
.doc-type{font-size:13px;font-weight:700;margin-bottom:2px;}
.doc-meta{font-size:11px;color:var(--text-2);margin-bottom:4px;}
.doc-expiry{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;}
.doc-expiry.ok{background:var(--green-dim);color:var(--green);border:1px solid var(--green-border);}
.doc-expiry.soon{background:var(--orange-dim);color:var(--orange);border:1px solid var(--orange-border);}
.doc-expiry.exp{background:var(--red-dim);color:var(--red);border:1px solid var(--red-border);}
.doc-expiry.none{background:var(--surface3);color:var(--text-3);border:1px solid var(--border);}
.doc-actions{display:flex;gap:4px;flex-shrink:0;}
.doc-action{padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text-2);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
.doc-action.primary{background:var(--blue-dim);color:var(--blue);border-color:var(--blue-border);}
.doc-action.danger{background:var(--red-dim);color:var(--red);border-color:var(--red-border);}
.doc-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:12px;background:var(--blue-dim);color:var(--blue);border:1.5px dashed var(--blue-border);border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:6px;}

/* ALERTS */
.alert-item{display:flex;align-items:center;gap:10px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;box-shadow:var(--shadow);}
.alert-item.critical{border-left:3px solid var(--red);}.alert-item.warning{border-left:3px solid var(--orange);}
.alert-item.info{border-left:3px solid var(--blue);}
.alert-icon{font-size:20px;flex-shrink:0;}.alert-body{flex:1;}.alert-msg{font-size:13px;font-weight:600;}.alert-time{font-size:10px;color:var(--text-3);margin-top:2px;}

/* ECO gauge */
.eco-gauge-wrap{display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.eco-gauge{position:relative;width:130px;height:130px;}.eco-gauge svg{transform:rotate(-90deg);}
.eco-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.eco-gauge-val{font-size:30px;font-weight:900;}.eco-gauge-lbl{font-size:10px;color:var(--text-3);font-weight:600;}
.eco-msg{background:var(--surface2);border-radius:10px;padding:12px;font-size:12px;color:var(--text-2);line-height:1.5;border-left:3px solid;}
.eco-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px;}
.eco-stat{background:var(--surface2);border-radius:8px;padding:8px;text-align:center;}
.eco-stat-val{font-size:14px;font-weight:800;}.eco-stat-lbl{font-size:8px;color:var(--text-3);margin-top:1px;}

/* OBD BANNER sticky sous header */
#obd-banner{position:sticky;top:52px;z-index:199;background:linear-gradient(90deg,#7f1d1d,#b91c1c);border-bottom:1px solid rgba(0,0,0,0.3);padding:8px 12px;display:none;box-shadow:0 2px 8px rgba(0,0,0,0.25);}
#obd-banner.open{display:block;animation:obdSlide .25s ease;}
@keyframes obdSlide{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
.obd-banner-inner{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.obd-banner-title{font-size:11px;font-weight:800;color:#fff;letter-spacing:0.04em;text-transform:uppercase;margin-right:4px;}

/* MODAL (add vehicle, etc.) */
.modal-bg{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;}.modal-bg.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-width:420px;width:92%;max-height:85vh;overflow-y:auto;box-shadow:0 4px 24px rgba(0,0,0,0.25);}
.modal h3{font-size:16px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px;color:var(--text);}
.modal-close{margin-left:auto;background:none;border:none;color:var(--text-3);font-size:20px;cursor:pointer;}
.m-field{width:100%;padding:12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:inherit;outline:none;margin-bottom:10px;}
.m-field:focus{border-color:var(--blue);}
.m-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.m-label{display:block;font-size:11px;font-weight:600;color:var(--text-2);margin-bottom:4px;}
.m-submit{width:100%;padding:14px;background:var(--blue);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:6px;}.m-submit:disabled{opacity:0.5;}

/* UTILS */
.loader{display:flex;align-items:center;justify-content:center;min-height:200px;}.spin{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.fade{animation:fadeUp .3s ease forwards;opacity:0;}.d1{animation-delay:.05s;}.d2{animation-delay:.1s;}.d3{animation-delay:.15s;}
.empty{text-align:center;padding:32px;color:var(--text-3);font-size:13px;}
.empty .ico{font-size:36px;margin-bottom:10px;display:block;}
.empty .cta{display:inline-block;margin-top:12px;padding:10px 20px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--green);color:#fff;padding:12px 24px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;opacity:0;transition:all .3s;z-index:600;}.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
.btn-logout-big{display:block;width:100%;padding:14px;background:var(--red-dim);color:var(--red);border:1px solid var(--red-border);border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:16px;text-align:center;}