
  :root{
    --bg:#f5f7ff; --surface:#ffffff; --surface-2:#f0f2fc;
    --ink:#161a3e; --muted:#6c7293; --muted-2:#9a9fc0;
    --line:#e7e9f7; --line-strong:#d6d9f0;
    --blue:#3e7bfa; --blue-dark:#2f5fe0; --purple:#8a4ff0;
    --gradient:linear-gradient(135deg,#3e7bfa 0%, #8a4ff0 100%);
    --gradient-soft:linear-gradient(135deg, rgba(62,123,250,0.10), rgba(138,79,240,0.10));
    --good:#1fa971; --good-soft:rgba(31,169,113,0.12);
    --warn:#c98a1a; --warn-soft:rgba(201,138,26,0.12);
    --bad:#e0475a; --bad-soft:rgba(224,71,90,0.12);
    --shadow: 0 25px 60px -25px rgba(40,45,120,0.22);
    --shadow-sm: 0 12px 30px -14px rgba(40,45,120,0.16);
    --ease: cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box;}
  body{margin:0; background:var(--bg); color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; -webkit-font-smoothing:antialiased;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer;}
  h1,h2,h3{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:-0.01em; margin:0; color:var(--ink);}
  :focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  ::selection{background:var(--blue); color:#fff;}
  .mono{font-family:'JetBrains Mono',monospace;}

  .btn{display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:10px; font-size:13.5px; font-weight:700; border:1px solid transparent; white-space:nowrap; transition:.25s;}
  .btn-primary{background:var(--gradient); color:#fff; box-shadow:0 10px 22px -10px rgba(62,86,240,0.5);}
  .btn-primary:hover{transform:translateY(-1px); box-shadow:0 14px 26px -8px rgba(62,86,240,0.55);}
  .btn-ghost{border-color:var(--line-strong); color:var(--ink); background:#fff;}
  .btn-ghost:hover{border-color:var(--blue); background:var(--gradient-soft);}
  .btn-sm{padding:7px 12px; font-size:12px; border-radius:8px;}
  .btn-danger{color:var(--bad); border-color:rgba(224,71,90,0.3); background:#fff;}
  .btn-danger:hover{background:var(--bad-soft);}

  /* ---------- SHELL ---------- */
  .dash-shell{display:grid; grid-template-columns:250px 1fr; min-height:100vh;}
  .sidebar{background:var(--surface); border-right:1px solid var(--line); padding:28px 22px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;}
  .sidebar .logo{display:flex; align-items:center; gap:10px; font-size:21px; font-weight:800;}
  .logo-badge{width:32px; height:32px; border-radius:9px; background:var(--gradient); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); flex-shrink:0;}
  .sidebar-sub{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-2); margin:8px 0 34px;}
  .nav-item{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:none; color:var(--muted); padding:12px 12px; border-radius:10px; font-size:14px; font-weight:700; margin-bottom:4px; transition:.2s;}
  .nav-item:hover{background:var(--surface-2); color:var(--ink);}
  .nav-item.active{background:var(--gradient-soft); color:var(--blue-dark);}
  .nav-item .dot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.6; flex-shrink:0;}
  .sidebar-foot{margin-top:auto; padding-top:20px; border-top:1px solid var(--line);}
  .back-link{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; font-weight:600;}
  .back-link:hover{color:var(--blue-dark);}

  .dash-main{padding:38px 44px; max-width:1180px;}
  .dash-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; flex-wrap:wrap; gap:16px;}
  .dash-header h1{font-size:27px;}
  .dash-header p{color:var(--muted); font-size:13px; margin-top:4px;}

  .dash-view{display:none;}
  .dash-view.active{display:block;}

  /* ---------- STAT CARDS ---------- */
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px;}
  .stat-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow-sm);}
  .stat-card .label{font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted-2);}
  .stat-card .value{font-size:28px; font-weight:800; margin-top:10px; color:var(--ink);}
  .stat-card .sub{font-size:12px; color:var(--muted); margin-top:4px;}

  .panel{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px; margin-bottom:22px; box-shadow:var(--shadow-sm);}
  .panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
  .panel-head h2{font-size:17px;}

  /* ---------- CHART ---------- */
  .bars{display:flex; align-items:flex-end; gap:12px; height:140px; padding-top:10px;}
  .bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
  .bar{width:100%; max-width:34px; background:var(--gradient); border-radius:6px 6px 0 0; min-height:3px; transition:height .5s var(--ease);}
  .bar-col .day-label{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted-2);}

  /* ---------- TABLE ---------- */
  .filters{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;}
  .filter-chip{padding:7px 14px; border-radius:20px; border:1px solid var(--line-strong); font-size:12.5px; color:var(--muted); background:#fff; font-weight:600;}
  .filter-chip.active{background:var(--gradient); color:#fff; border-color:transparent;}

  table{width:100%; border-collapse:collapse;}
  thead th{text-align:left; font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted-2); padding:0 12px 12px; border-bottom:1px solid var(--line);}
  tbody td{padding:14px 12px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
  tbody tr:hover{background:var(--surface-2);}
  .cell-main{color:var(--ink); font-weight:700;}
  .cell-sub{color:var(--muted-2); font-size:12px; margin-top:2px;}

  .badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:700;}
  .badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
  .badge-a_venir{color:var(--blue-dark); background:var(--gradient-soft);}
  .badge-confirmee{color:var(--blue-dark); background:var(--gradient-soft);}
  .badge-en_cours{color:var(--warn); background:var(--warn-soft);}
  .badge-terminee{color:var(--good); background:var(--good-soft);}
  .badge-annulee{color:var(--bad); background:var(--bad-soft);}
  .badge-paye{color:var(--good); background:var(--good-soft);}
  .badge-en_attente{color:var(--warn); background:var(--warn-soft);}

  .row-actions{display:flex; gap:6px;}
  .icon-btn{background:#fff; border:1px solid var(--line-strong); color:var(--muted); width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;}
  .icon-btn:hover{border-color:var(--blue); color:var(--blue-dark);}

  .empty-state{text-align:center; padding:50px 20px; color:var(--muted);}
  .empty-state h3{color:var(--ink); margin-bottom:8px; font-size:18px;}

  /* ---------- DRIVER CARDS ---------- */
  .drivers-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px;}
  .driver-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow-sm);}
  .driver-card .d-top{display:flex; justify-content:space-between; align-items:flex-start;}
  .driver-avatar{width:44px; height:44px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:16px;}
  .driver-card h3{font-size:16px; margin-top:14px;}
  .driver-card .tel{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted-2); margin-top:2px;}
  .driver-card .veh{font-size:12.5px; color:var(--muted); margin-top:10px;}
  .driver-card .d-actions{display:flex; gap:6px; margin-top:16px;}

  /* ---------- MODAL ---------- */
  .modal-overlay{position:fixed; inset:0; background:rgba(22,26,62,0.45); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:200; padding:20px;}
  .modal-overlay.open{display:flex;}
  .modal{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px; width:100%; max-width:520px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow);}
  .modal h2{font-size:20px; margin-bottom:20px;}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .form-grid .full{grid-column:1/-1;}
  .field{display:flex; flex-direction:column; gap:6px;}
  label{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted);}
  input,select{background:var(--surface-2); border:1px solid var(--line); color:var(--ink); padding:11px 12px; border-radius:9px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px;}
  input:focus, select:focus{border-color:var(--blue); outline:none; background:#fff;}
  .modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:24px;}

  .toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); border:1px solid rgba(255,255,255,0.1); color:#fff; padding:13px 22px; border-radius:10px; font-size:13.5px; z-index:300; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; box-shadow:var(--shadow);}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  .loading-note{color:var(--muted-2); font-size:12.5px; font-family:'JetBrains Mono',monospace;}

  @media (max-width:900px){
    .dash-shell{grid-template-columns:1fr;}
    .sidebar{position:relative; height:auto; flex-direction:row; align-items:center; padding:16px 20px; gap:20px; overflow-x:auto;}
    .sidebar-sub{display:none;}
    .sidebar nav{display:flex; gap:6px;}
    .sidebar-foot{margin:0 0 0 auto; padding:0;}
    .dash-main{padding:26px 20px;}
    .stats-grid{grid-template-columns:1fr 1fr;}
    .form-grid{grid-template-columns:1fr;}
  }

  /* ---------- AJOUTS PARTAGÉS (multi-dashboards) ---------- */
  textarea{background:var(--surface-2); border:1px solid var(--line); color:var(--ink); padding:11px 12px; border-radius:9px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; resize:vertical; min-height:80px;}
  textarea:focus{border-color:var(--blue); outline:none; background:#fff;}

  .page-note{background:var(--gradient-soft); border:1px solid rgba(62,123,250,0.25); color:var(--blue-dark); border-radius:12px; padding:14px 18px; font-size:13px; margin-bottom:22px; display:flex; gap:10px; align-items:flex-start;}
  .page-note b{color:var(--ink);}

  .auth-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
  .auth-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:40px; width:100%; max-width:400px; box-shadow:var(--shadow);}
  .auth-card .logo{display:flex; align-items:center; gap:10px; font-size:22px; font-weight:800; margin-bottom:6px;}
  .auth-card p.sub{color:var(--muted); font-size:13.5px; margin:0 0 26px;}

  .avail-toggle{display:flex; gap:8px; flex-wrap:wrap;}
  .avail-option{flex:1; min-width:120px; padding:14px; border:1px solid var(--line-strong); border-radius:12px; text-align:center; cursor:pointer; font-size:13px; font-weight:700; color:var(--muted); background:#fff; transition:.2s;}
  .avail-option.active{border-color:var(--blue); background:var(--gradient-soft); color:var(--blue-dark);}

  select{background:var(--surface-2); border:1px solid var(--line); color:var(--ink); padding:11px 12px; border-radius:9px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; width:100%;}
  select:focus{border-color:var(--blue); outline:none; background:#fff;}

  .loading-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:13px;}
