/* ============================================================
   DELSON TECH PLUS — Design system
   Palette : nuit tech / circuit bleu-argent (inspirée du logo DTP)
   ============================================================ */
:root{
  --bg:#0a0e16;
  --bg2:#0f1420;
  --bg3:#141b2b;
  --card:#141a28;
  --border:#232c40;
  --border-soft:#1b2233;
  --blue:#2f6fed;
  --blue2:#1e4fc0;
  --cyan:#29c5f6;
  --silver:#c3cde0;
  --text:#e9edf5;
  --text2:#8b96ac;
  --text3:#5c6580;
  --ok:#2ecc71;
  --warn:#f5a623;
  --danger:#ef4444;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --glow:0 0 0 1px rgba(47,111,237,.25), 0 0 24px rgba(41,197,246,.08);
  font-family:'Inter',sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(47,111,237,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(41,197,246,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:'Sora',sans-serif; letter-spacing:.2px;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit; text-decoration:none;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:#202a3d; border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}

/* ---- brand lockup ---- */
.brand{display:flex; align-items:center; gap:10px;}
.brand img{width:36px; height:36px; border-radius:9px; object-fit:cover; box-shadow:var(--glow);}
.brand .name{font-family:'Sora',sans-serif; font-weight:700; font-size:15px; line-height:1.1;}
.brand .name small{display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:10px; color:var(--cyan); letter-spacing:.6px; text-transform:uppercase;}

/* ---- sync pill (élément signature : preuve visible de synchronisation) ---- */
.sync-pill{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--bg3); border:1px solid var(--border-soft);
  padding:6px 12px; border-radius:999px; font-size:11.5px; color:var(--text2);
}
.sync-dot{width:7px; height:7px; border-radius:50%; background:var(--text3); flex:none;}
.sync-pill.online .sync-dot{background:var(--ok); box-shadow:0 0 0 3px rgba(46,204,113,.18); animation:pulse 2s infinite;}
.sync-pill.syncing .sync-dot{background:var(--cyan); box-shadow:0 0 0 3px rgba(41,197,246,.2); animation:pulse 1s infinite;}
.sync-pill.offline .sync-dot{background:var(--warn);}
@keyframes pulse{0%{transform:scale(1);opacity:1} 50%{transform:scale(1.6);opacity:.4} 100%{transform:scale(1);opacity:1}}
.shop-loader{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; grid-column:1/-1; text-align:center; color:var(--text2); font-size:13px;}
.shop-loader .spinner{width:34px; height:34px; border:3px solid var(--border); border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; margin-bottom:14px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- layout ---- */
.app{display:flex; min-height:100vh;}
.sidebar{
  width:250px; flex:none; background:var(--bg2); border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; height:100vh; position:sticky; top:0; z-index:40;
  transition:transform .25s ease;
}
.sidebar .brand-row{padding:18px 16px; border-bottom:1px solid var(--border-soft);}
.nav{flex:1; overflow-y:auto; padding:10px;}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:var(--text2); font-size:13.5px; font-weight:500; cursor:pointer; margin-bottom:2px;
  border:1px solid transparent;
}
.nav-item .ic{width:18px; text-align:center; font-size:15px;}
.nav-item:hover{background:var(--bg3); color:var(--text);}
.nav-item.active{background:linear-gradient(90deg, rgba(47,111,237,.18), rgba(41,197,246,.05)); color:#fff; border-color:rgba(47,111,237,.35);}
.nav-section{font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text3); padding:14px 12px 6px;}
.sidebar-foot{padding:12px; border-top:1px solid var(--border-soft); font-size:12px; color:var(--text2);}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  height:62px; flex:none; background:var(--bg2); border-bottom:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between; padding:0 20px; position:sticky; top:0; z-index:30;
  gap:12px;
}
.hamburger{display:flex; align-items:center; gap:7px; background:var(--bg3); border:1px solid var(--border); color:var(--text); font-size:13px; font-weight:700; cursor:pointer; padding:9px 14px; border-radius:10px;}
.hamburger:hover{border-color:var(--blue);}
.topbar-clock{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--text2); display:none;}
@media(min-width:640px){.topbar-clock{display:block;}}
.role-badge{display:flex; align-items:center; gap:7px; background:var(--bg3); border:1px solid var(--border); padding:7px 12px; border-radius:10px; font-size:12px; color:var(--text2); white-space:nowrap;}
.role-badge b{color:var(--text);}
.topbar-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.content{padding:22px; flex:1;}
.page{display:none;}
.page.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* ---- generic components ---- */
.grid{display:grid; gap:16px;}
.g4{grid-template-columns:repeat(4,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.g4,.g3,.g2{grid-template-columns:1fr;}}

.card{background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);}
.stat-card{position:relative; overflow:hidden;}
.stat-card .label{font-size:11.5px; color:var(--text2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px;}
.stat-card .value{font-family:'Sora',sans-serif; font-size:24px; font-weight:700;}
.stat-card .sub{font-size:11px; color:var(--text3); margin-top:4px;}
.stat-card .ic{position:absolute; right:14px; top:14px; font-size:20px; opacity:.5;}

.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  background:var(--bg3); color:var(--text); border:1px solid var(--border);
  padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer;
  letter-spacing:.1px; user-select:none;
  box-shadow:0 1px 2px rgba(0,0,0,.14);
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease, filter .15s ease, color .15s ease;
}
.btn:hover{border-color:var(--blue); background:var(--bg2); box-shadow:0 4px 14px rgba(0,0,0,.18); transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.97); box-shadow:0 1px 3px rgba(0,0,0,.2);}
.btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}
.btn.primary{background:linear-gradient(135deg, var(--blue), var(--blue2)); border-color:transparent; color:#fff; box-shadow:0 6px 18px rgba(47,111,237,.35);}
.btn.primary:hover{filter:brightness(1.1); box-shadow:0 8px 22px rgba(47,111,237,.45); transform:translateY(-1px);}
.btn.primary:active{filter:brightness(1); transform:translateY(0) scale(.97);}
.btn.ok{background:rgba(46,204,113,.14); border-color:rgba(46,204,113,.35); color:#7be6a4;}
.btn.ok:hover{background:rgba(46,204,113,.22); border-color:rgba(46,204,113,.55); color:#9cf0bb;}
.btn.danger{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:#f39a9a;}
.btn.danger:hover{background:rgba(239,68,68,.2); border-color:rgba(239,68,68,.65); color:#ffb8b8;}
.btn.sm{padding:6px 12px; font-size:12px; border-radius:8px;}
.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none; transform:none !important; filter:none;}
.btn.block{width:100%;}
.icon-btn{
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
  width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:color .15s ease, border-color .15s ease, background .15s ease, transform .1s ease;
}
.icon-btn:hover{color:var(--text); border-color:var(--blue); background:var(--bg2); transform:translateY(-1px);}
.icon-btn:active{transform:translateY(0) scale(.93);}
.icon-btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}

input,select,textarea{
  width:100%; background:var(--bg3); border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:9px; font-size:13.5px; font-family:inherit;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue);}
label{display:block; font-size:12px; color:var(--text2); margin-bottom:6px; font-weight:500;}
.field{margin-bottom:13px;}
.row{display:flex; gap:12px; flex-wrap:wrap;}
.row > *{flex:1; min-width:140px;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; color:var(--text2); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.4px; padding:10px 12px; border-bottom:1px solid var(--border-soft);}
td{padding:11px 12px; border-bottom:1px solid var(--border-soft);}
tr:hover td{background:rgba(255,255,255,.015);}
.table-wrap{overflow-x:auto;}

.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600;}
.badge.ok{background:rgba(46,204,113,.14); color:#5ee89a;}
.badge.warn{background:rgba(245,166,35,.14); color:#f5b95a;}
.badge.danger{background:rgba(239,68,68,.14); color:#f38686;}
.badge.info{background:rgba(41,197,246,.14); color:#5cd6f8;}
.badge.muted{background:var(--bg3); color:var(--text2);}
.msg-bubble{max-width:80%; padding:9px 13px; border-radius:12px; font-size:13px; margin-bottom:8px;}
.msg-bubble.me{background:var(--blue); color:#fff; margin-left:auto;}
.msg-bubble.them{background:var(--bg3);}

.modal-bg{display:none; position:fixed; inset:0; background:rgba(5,8,14,.72); backdrop-filter:blur(3px); z-index:200; align-items:center; justify-content:center; padding:16px;}
.modal-bg.active{display:flex;}
.modal{background:var(--card); border:1px solid var(--border); border-radius:16px; width:100%; max-width:520px; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.modal.wide{max-width:820px;}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border-soft); position:sticky; top:0; background:var(--card);}
.modal-body{padding:20px;}
.modal-foot{padding:14px 20px; border-top:1px solid var(--border-soft); display:flex; justify-content:flex-end; gap:10px; position:sticky; bottom:0; background:var(--card);}

.toast-wrap{position:fixed; top:16px; right:16px; z-index:400; display:flex; flex-direction:column; gap:8px;}
.toast{background:var(--card); border:1px solid var(--border); border-left:3px solid var(--blue); padding:11px 16px; border-radius:10px; font-size:13px; box-shadow:var(--shadow); min-width:220px; animation:slideIn .2s ease;}
.toast.ok{border-left-color:var(--ok);}
.toast.err{border-left-color:var(--danger);}
.toast.warn{border-left-color:var(--warn);}
@keyframes slideIn{from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);}}

.empty{padding:40px 20px; text-align:center; color:var(--text3);}
.empty .ic{font-size:32px; margin-bottom:10px;}

.tag-pick{display:flex; gap:8px; flex-wrap:wrap;}
.tag-pick .tp{padding:8px 13px; border-radius:9px; background:var(--bg3); border:1px solid var(--border); cursor:pointer; font-size:12.5px;}
.tag-pick .tp.sel{background:rgba(47,111,237,.18); border-color:var(--blue); color:#fff;}

.section-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px;}
.section-title h2{font-size:19px;}
.section-title .desc{font-size:12.5px; color:var(--text2); margin-top:2px;}

@media(max-width:900px){
  .sidebar{position:fixed; left:0; top:0; transform:translateX(-100%); box-shadow:0 0 40px rgba(0,0,0,.5);}
  .sidebar.open{transform:translateX(0);}
  .hamburger span.lbl{display:none;}
  .content{padding:14px;}
}
.overlay-dim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:39;}
.overlay-dim.show{display:block;}
.sidebar.desktop-collapsed{width:0; border:none; overflow:hidden;}
.sidebar.desktop-collapsed .brand-row, .sidebar.desktop-collapsed .nav, .sidebar.desktop-collapsed .sidebar-foot{opacity:0; pointer-events:none;}

.perm-denied{padding:60px 20px; text-align:center; color:var(--text2);}
.perm-denied .ic{font-size:40px; margin-bottom:12px;}

/* receipt (58mm print) */
@media print{
  body *{visibility:hidden;}
  #receipt58, #receipt58 *{visibility:visible;}
  #receipt58{position:absolute; left:0; top:0; width:58mm;}
}
#receipt58{width:58mm; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#000; background:#fff; padding:6px; display:none;}
#receipt58 .c{text-align:center;}
#receipt58 hr{border:none; border-top:1px dashed #000; margin:4px 0;}
#receipt58 table{width:100%; font-size:10px;}
#receipt58 td{padding:1px 0; border:none;}

/* ============================================================
   THÈME CLAIR (blanc) — activé via <html data-theme="light">
   Choix personnel par appareil (admin, employé ou client boutique),
   sauvegardé en local — ne change rien pour les autres utilisateurs.
   ============================================================ */
html[data-theme="light"]{
  --bg:#e7ebf3;
  --bg2:#ffffff;
  --bg3:#e4e9f2;
  --card:#ffffff;
  --border:#c3cddf;
  --border-soft:#d5dce9;
  --blue:#2f6fed;
  --blue2:#1e4fc0;
  --cyan:#0c7f92;
  --silver:#5b6b85;
  --text:#10141f;
  --text2:#4d5670;
  --text3:#79839a;
  --ok:#158a46;
  --warn:#b96a05;
  --danger:#cc2f2f;
  --shadow:0 4px 14px rgba(20,30,50,.09), 0 1px 3px rgba(20,30,50,.10);
  --glow:0 0 0 1px rgba(47,111,237,.18), 0 0 20px rgba(41,197,246,.08);
}
html[data-theme="light"] .topbar{ background:var(--bg2); border-bottom:1px solid var(--border); box-shadow:0 1px 4px rgba(20,30,50,.06); }
html[data-theme="light"] .sidebar{ border-right:1px solid var(--border); }
html[data-theme="light"] .card{ border-color:var(--border); }
html[data-theme="light"] .table-wrap table thead th{ background:var(--bg3); }
html[data-theme="light"] tr:hover td{ background:rgba(20,30,50,.03); }
html[data-theme="light"] body{
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(47,111,237,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(41,197,246,.05), transparent 60%),
    var(--bg);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c7cfdf;}
html[data-theme="light"] .pin-pad button{color:var(--text);}

/* ---- bouton de bascule sombre / clair ---- */
.theme-toggle-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); cursor:pointer; font-size:15px; flex:none;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.theme-toggle-btn:hover{border-color:var(--blue); background:var(--bg2); transform:translateY(-1px);}
.theme-toggle-btn:active{transform:translateY(0) scale(.93);}

/* Raccourcis clavier affichés dans le menu */
.nav-item .kbd-sc{margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:5px; background:var(--bg3); color:var(--text2); border:1px solid var(--border,rgba(255,255,255,.12)); white-space:nowrap;}
.nav-item.active .kbd-sc{color:var(--cyan);}
.nav-item .kbd-sc + #msgBadge{margin-left:6px;}
@media (max-width:900px){ .nav-item .kbd-sc{display:none;} }

.nav-item .kbd-sc.shift{color:#f5a623; border-color:rgba(245,166,35,.45);}

/* ============================================================
   DELSON TECH PLUS — Professional UI refresh v5.8
   ============================================================ */
:root{
  --bg:#f4f7fb;
  --bg2:#ffffff;
  --bg3:#f7f9fc;
  --card:#ffffff;
  --border:#dfe6f0;
  --border-soft:#e8edf4;
  --blue:#1769e8;
  --blue2:#0d4fc0;
  --cyan:#11a8d9;
  --silver:#64748b;
  --text:#172033;
  --text2:#68758a;
  --text3:#98a4b5;
  --shadow:0 8px 28px rgba(25,43,72,.08);
  --glow:0 0 0 1px rgba(23,105,232,.12),0 8px 24px rgba(23,105,232,.08);
}
body{
  background:linear-gradient(180deg,#f7faff 0%,#f2f5fa 100%);
  color:var(--text);
}
.app{background:transparent}
.sidebar{
  width:274px;
  background:linear-gradient(180deg,#071c3c 0%,#06244c 52%,#071a35 100%);
  border-right:0;
  box-shadow:8px 0 30px rgba(5,25,55,.12);
}
.sidebar .brand-row{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.10)}
.brand{gap:12px}.brand img{width:42px;height:42px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.brand .name{font-size:15px;color:#fff}.brand .name small{color:#7fd8ff}
.nav{padding:12px 11px}.nav-section{padding:15px 11px 7px;color:#82a4c9;font-size:9.5px;letter-spacing:1.25px}
.nav-item{
  color:#b8c8dc;border-radius:10px;margin:2px 0;padding:10px 12px;border:1px solid transparent;
  transition:.18s ease;position:relative;
}
.nav-item .ic{width:20px;color:#a9c4e7}.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.active{background:linear-gradient(90deg,#1976ed,#1160ca);border-color:rgba(255,255,255,.08);color:#fff;box-shadow:0 7px 18px rgba(0,72,180,.25)}
.nav-item.active:before{content:"";position:absolute;left:-11px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:#62d5ff}
.nav-external{margin-left:auto;color:#83a9d4}.nav-shop{margin-top:8px;background:rgba(255,255,255,.045)}
.sidebar-foot{border-top:1px solid rgba(255,255,255,.10);padding:13px;color:#aac0db}.sidebar-foot .btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff}
.main{background:transparent}
.topbar{height:72px;background:rgba(255,255,255,.92);border-bottom:1px solid #e5eaf2;padding:0 24px;box-shadow:0 2px 12px rgba(23,41,70,.04);backdrop-filter:blur(12px)}
.topbar-left{display:flex;align-items:center;gap:13px;min-width:0}.topbar-context{display:flex;flex-direction:column;min-width:110px}.topbar-context .eyebrow{font-size:8px;letter-spacing:1.4px;color:#7d8ba0;font-weight:700}.topbar-context strong{font-family:'Sora',sans-serif;font-size:14px;color:#1a2941}
.hamburger{background:#f4f7fb;border-color:#e1e7ef;color:#24324a;padding:9px 12px}.hamburger:hover{background:#edf4ff}
.sync-pill{background:#f4f8fd;border-color:#dfe7f1;color:#66758b}.role-badge{background:#f5f8fc;border-color:#e1e7ef;color:#68758a}.role-badge b{color:#1d2a3f}
.topbar-clock{color:#66758b}.content{padding:24px;max-width:1700px;width:100%;margin:0 auto}
.card{background:#fff;border-color:#e5eaf1;box-shadow:var(--shadow);border-radius:15px}
.section-title{margin-bottom:18px}.section-title h2{font-size:21px;color:#15233a}.section-title .desc{color:#738096}
.stat-card{min-height:112px;border:1px solid #e6ebf2;background:linear-gradient(180deg,#fff,#fbfcfe);transition:.2s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(24,52,90,.10)}
.stat-card .label{color:#718096;font-size:10.5px}.stat-card .value{font-size:23px;color:#16243b}.stat-card .sub{color:#8a96a7}.stat-card .ic{opacity:.75;background:#edf5ff;border-radius:10px;padding:7px;right:13px;top:13px}
.btn{background:#fff;border-color:#dce4ee;color:#2a3950}.btn:hover{background:#f7faff}.btn.primary{background:linear-gradient(135deg,#1d75ee,#155ac9);box-shadow:0 7px 18px rgba(23,105,232,.25)}
input,select,textarea{background:#fff;border-color:#dce4ee;color:#24324a}input::placeholder,textarea::placeholder{color:#a1acba}
table th{color:#7a8799;border-color:#edf0f5}table td{border-color:#edf0f5}tr:hover td{background:#f8fbff}
.badge{font-size:10.5px}.modal{background:#fff;border-color:#e2e8f0}.modal-head,.modal-foot{background:#fff;border-color:#e8edf3}
.empty{color:#7c899d}

@media(max-width:900px){
  .topbar{padding:0 14px;height:64px}.topbar-context{display:none}.content{padding:14px}
  .sidebar{width:285px}.sidebar .brand-row{padding-top:18px}
}
@media(max-width:640px){
  .topbar-right{gap:6px}.topbar-right select{display:none}.role-badge{padding:6px 8px}.topbar .btn.sm{font-size:0;padding:7px 9px}.topbar .btn.sm::before{content:'↪';font-size:15px}
  .stat-card .value{font-size:21px}.card{padding:14px}.section-title h2{font-size:18px}
}

/* Keep the original dark mode available through the existing toggle. */
html[data-theme="dark"]{
  --bg:#0a0e16;--bg2:#0f1420;--bg3:#141b2b;--card:#141a28;--border:#232c40;--border-soft:#1b2233;
  --blue:#2f6fed;--blue2:#1e4fc0;--cyan:#29c5f6;--text:#e9edf5;--text2:#8b96ac;--text3:#5c6580;
  background:radial-gradient(1100px 600px at 85% -10%,rgba(47,111,237,.14),transparent 60%),var(--bg);
}
html[data-theme="dark"] .topbar{background:rgba(15,20,32,.94);border-color:#1b2233}html[data-theme="dark"] .topbar-context strong{color:#fff}html[data-theme="dark"] .topbar-context .eyebrow{color:#7891b1}
html[data-theme="dark"] .hamburger,html[data-theme="dark"] .role-badge,html[data-theme="dark"] .sync-pill{background:#141b2b;border-color:#232c40;color:#cbd5e1}
html[data-theme="dark"] .card{background:#141a28;border-color:#232c40}html[data-theme="dark"] .stat-card{background:#141a28}html[data-theme="dark"] .stat-card .value{color:#fff}

/* ============================================================
   DASHBOARD PREMIUM — calqué sur le mockup Delson Tech Plus
   ============================================================ */
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:16px}
.dash-kicker{font-size:10px;letter-spacing:1.8px;font-weight:800;color:var(--blue);margin-bottom:5px}
.dash-head h1{font-size:25px;margin-bottom:4px}.dash-head p{font-size:12.5px;color:var(--text2)}
.dash-head-actions{display:flex;align-items:center;gap:10px}.dash-date{font-size:11.5px;color:var(--text2);padding:9px 12px;background:var(--card);border:1px solid var(--border-soft);border-radius:9px}
.dash-hero{background:linear-gradient(110deg,#eaf3ff 0%,#dceaff 58%,#edf7ff 100%);border:1px solid #c8dcf7;border-radius:14px;padding:14px 18px;color:#123a6b;display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px;box-shadow:0 5px 18px rgba(47,111,237,.08)}
.dash-hero>div:first-child{display:flex;align-items:center;gap:13px}.hero-icon{width:42px;height:42px;border-radius:11px;background:#2475e8;color:#fff;display:grid;place-items:center;font-size:21px;box-shadow:0 5px 12px rgba(36,117,232,.25)}
.dash-hero b{font-family:'Sora';font-size:16px;display:block}.dash-hero small{display:block;font-size:11px;color:#54708e;margin-top:3px}.hero-meta{display:flex;gap:13px;font-size:10.5px;color:#337f5b;white-space:nowrap}
.dash-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}.dash-kpi{background:var(--card);border:1px solid var(--border-soft);border-radius:13px;padding:14px;min-height:126px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.dash-kpi:after{content:"";position:absolute;inset:auto -25px -45px auto;width:100px;height:100px;border-radius:50%;background:rgba(47,111,237,.06)}.kpi-icon{width:38px;height:38px;border-radius:10px;background:rgba(47,111,237,.12);display:grid;place-items:center;font-size:18px;margin-bottom:9px}.kpi-label{font-size:10.5px;color:var(--text2);font-weight:600}.kpi-value{font-family:'Sora';font-size:20px;font-weight:800;margin-top:3px}.kpi-sub{font-size:10px;color:#24a866;margin-top:4px}.kpi-sub.down{color:var(--danger)}
.dash-main-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr) 310px;gap:14px;margin-bottom:14px}.dash-panel{background:var(--card);border:1px solid var(--border-soft);border-radius:13px;padding:15px;box-shadow:var(--shadow);min-width:0}.dash-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}.dash-panel-head h3{font-size:13px}.dash-panel-head p{font-size:10.5px;color:var(--text3);margin-top:3px}.dash-link{background:none;border:0;color:var(--blue);font-size:10.5px;font-weight:700;cursor:pointer}.chart-legend{font-size:10px;color:var(--text2)}.chart-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:4px}.chart-panel canvas{max-height:190px!important}
.dash-side{display:flex;flex-direction:column;gap:14px}.dash-notice{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--border-soft)}.dash-notice:last-child{border-bottom:0}.notice-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}.notice-ic.green{background:rgba(46,204,113,.14)}.notice-ic.orange{background:rgba(245,166,35,.14)}.notice-ic.red{background:rgba(239,68,68,.14)}.dash-notice b{display:block;font-size:10.8px}.dash-notice small{display:block;font-size:9.5px;color:var(--text3);margin-top:2px}.dash-online{font-size:9.5px;color:#22a866;font-weight:700}.system-row{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;padding:8px 0;border-bottom:1px solid var(--border-soft)}.system-row:last-child{border-bottom:0}.system-row span{color:var(--text2)}
.quick-panel{margin-bottom:14px}.quick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.quick-btn{border:1px solid var(--border-soft);background:var(--bg3);color:var(--text);border-radius:9px;padding:9px 7px;display:flex;align-items:center;gap:7px;cursor:pointer;text-align:left;min-width:0;transition:.15s}.quick-btn:hover{border-color:var(--blue);transform:translateY(-1px);background:var(--bg2)}.quick-btn span{width:26px;height:26px;border-radius:7px;background:rgba(47,111,237,.13);display:grid;place-items:center;flex:none;font-size:13px}.quick-btn b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-bottom-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-bottom:12px}.dash-panel table{font-size:10.5px}.dash-panel th{font-size:9px;padding:8px}.dash-panel td{padding:9px}.top-products{display:flex;flex-direction:column}.top-product{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--border-soft);font-size:10.5px}.top-product:last-child{border-bottom:0}.rank{width:22px;height:22px;border-radius:7px;background:var(--bg3);display:grid;place-items:center;font-weight:800;color:var(--blue)}.tp-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-product b{font-size:9.5px;color:var(--text2)}.dash-visits-collapsed{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--text3);font-size:9.5px;padding:5px 2px}.dash-visits-collapsed input{width:135px;padding:6px 8px;font-size:10px}.dash-visits-collapsed #visitDateResult{color:var(--text2)}
html[data-theme="light"] .dash-hero{background:linear-gradient(110deg,#eaf3ff,#f6faff)}
@media(max-width:1200px){.dash-main-grid{grid-template-columns:1fr 1fr}.dash-side{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.dash-kpis{grid-template-columns:repeat(3,1fr)}.quick-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.dash-head{align-items:flex-start;flex-direction:column}.dash-head-actions{width:100%;justify-content:space-between}.dash-hero{align-items:flex-start;flex-direction:column}.hero-meta{width:100%;justify-content:flex-end}.dash-kpis{grid-template-columns:repeat(2,1fr)}.dash-main-grid,.dash-bottom-grid{grid-template-columns:1fr}.dash-side{display:grid;grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.dash-kpis{grid-template-columns:1fr 1fr;gap:8px}.dash-kpi{padding:11px;min-height:112px}.kpi-value{font-size:16px}.dash-head h1{font-size:20px}.dash-date{display:none}.dash-panel{padding:12px}.quick-grid{gap:6px}.quick-btn{padding:8px 6px}.quick-btn b{font-size:9px}}