:root{
  --ink:#131320;
  --ink-soft:#5B5B70;
  --bg:#FAFAFC;
  --surface:#FFFFFF;
  --surface-tint:#F1EFFB;
  --line:#E7E5F2;
  --primary:#3A2E6E;
  --primary-deep:#241C4A;
  --boost:#FF3D71;
  --boost-deep:#E01F55;
  --grow:#00C896;
  --grow-deep:#00A57D;
  --warn:#F2A93B;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --shadow-soft:0 20px 50px -25px rgba(36,28,74,0.35);
  --shadow-card:0 12px 30px -18px rgba(36,28,74,0.28);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3,h4,.display{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0;
  color:var(--ink);
}
.mono{font-family:'IBM Plex Mono',monospace;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:3px solid var(--boost);outline-offset:3px;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:999px;font-weight:700;font-size:14.5px;
  border:2px solid transparent;transition:transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-primary{
  background:linear-gradient(135deg,var(--boost),var(--boost-deep));
  color:#fff;
  box-shadow:0 14px 30px -12px rgba(255,61,113,0.55);
}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--primary);background:var(--surface-tint);}
.btn-light{background:#fff;color:var(--primary-deep);box-shadow:0 14px 30px -12px rgba(0,0,0,0.25);}
.btn-block{width:100%;}
.btn-sm{padding:10px 18px;font-size:13px;}

/* ---------- FORMS (shared) ---------- */
.field{margin-bottom:18px;}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px;color:var(--ink);}
.field .hint{display:block;font-size:12px;color:var(--ink-soft);margin-top:6px;font-weight:500;}
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],input[type="url"],select,textarea{
  width:100%;padding:13px 15px;border-radius:var(--radius-sm);border:1.5px solid var(--line);
  background:var(--surface);font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 4px rgba(58,46,110,0.12);outline:none;
}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.error-msg{
  background:#FDECEE;border:1px solid #F6C3CC;color:var(--boost-deep);
  padding:12px 16px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;margin-bottom:20px;
}
.success-msg{
  background:#E7FAF3;border:1px solid #B4EEDA;color:var(--grow-deep);
  padding:12px 16px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;margin-bottom:20px;
}

/* ---------- AUTH LAYOUT ---------- */
.auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;}
.auth-visual{
  background:linear-gradient(150deg,var(--primary-deep),var(--primary) 70%, var(--boost-deep) 140%);
  position:relative;overflow:hidden;padding:56px;display:flex;flex-direction:column;justify-content:space-between;
}
.auth-visual::after{
  content:"";position:absolute;right:-120px;bottom:-120px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
}
.auth-visual-quote{color:#fff;max-width:380px;position:relative;}
.auth-visual-quote h2{color:#fff;font-size:26px;line-height:1.25;}
.auth-visual-quote p{color:rgba(255,255,255,0.75);margin-top:14px;font-size:14.5px;}
.auth-panel{
  display:flex;align-items:center;justify-content:center;padding:40px 24px;
}
.auth-card{width:100%;max-width:420px;}
.auth-card .logo{margin-bottom:28px;}
.auth-card h1{font-size:26px;margin-bottom:8px;}
.auth-card .sub{color:var(--ink-soft);font-size:14.5px;margin-bottom:28px;}
.auth-foot{margin-top:22px;text-align:center;font-size:13.5px;color:var(--ink-soft);}
.auth-foot a{color:var(--primary);font-weight:700;}

.logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;color:var(--primary-deep);}
.logo-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--boost) 0%, var(--primary) 100%);position:relative;flex:none;}
.logo-mark::after{content:"";position:absolute;inset:9px;border-radius:4px;background:#fff;clip-path:polygon(0 100%, 0 40%, 35% 40%, 35% 0, 65% 0, 65% 70%, 100% 70%, 100% 100%);}
.logo.on-dark{color:#fff;}

@media (max-width:900px){
  .auth-shell{grid-template-columns:1fr;}
  .auth-visual{display:none;}
}

/* ---------- APP SHELL (dashboard/orders) ---------- */
.app-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh;}
.sidebar{
  background:var(--primary-deep);color:#fff;padding:28px 20px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.sidebar .logo{color:#fff;margin-bottom:34px;}
.sidebar nav{display:flex;flex-direction:column;gap:4px;flex:1;}
.sidebar nav a{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  font-weight:600;font-size:14.5px;color:rgba(255,255,255,0.7);transition:background .15s, color .15s;
}
.sidebar nav a:hover{background:rgba(255,255,255,0.08);color:#fff;}
.sidebar nav a.active{background:rgba(255,255,255,0.14);color:#fff;}
.sidebar nav a .ic{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,0.15);flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.sidebar .logout-link{color:rgba(255,255,255,0.55);font-size:13.5px;font-weight:600;margin-top:auto;padding:12px 14px;}
.sidebar .logout-link:hover{color:#fff;}

.main-area{min-width:0;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 32px;border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:20;
}
.topbar .greet{font-size:15px;font-weight:700;}
.topbar .greet span{color:var(--ink-soft);font-weight:500;display:block;font-size:12.5px;}
.topbar-actions{display:flex;align-items:center;gap:12px;}
.balance-chip{
  display:flex;align-items:center;gap:10px;background:var(--surface-tint);
  border:1px solid var(--line);border-radius:999px;padding:9px 16px 9px 8px;font-weight:700;font-size:14px;
}
.balance-chip .dot{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--grow),var(--grow-deep));display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;}
.menu-toggle{display:none;background:none;border:none;padding:6px;}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;}

.content{padding:32px;max-width:1080px;}
.page-head{margin-bottom:26px;}
.page-head h1{font-size:26px;}
.page-head p{color:var(--ink-soft);font-size:14.5px;margin-top:6px;}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:28px;}

/* network picker */
.network-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:26px;}
.network-card{
  border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:16px 10px;text-align:center;
  background:var(--surface);transition:border-color .15s, box-shadow .15s, transform .15s;
}
.network-card:hover{transform:translateY(-2px);}
.network-card.selected{border-color:var(--primary);box-shadow:0 0 0 3px rgba(58,46,110,0.14);}
.network-card .n-icon{
  width:38px;height:38px;border-radius:11px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:13px;
}
.network-card .n-label{font-size:12.5px;font-weight:700;}

.price-preview{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--surface-tint);border-radius:var(--radius-sm);padding:16px 20px;margin:22px 0;
}
.price-preview .pp-total{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;color:var(--primary-deep);}
.price-preview .pp-label{font-size:12.5px;color:var(--ink-soft);font-weight:600;}

/* status badges */
.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;}
.status-badge.en_cours{background:#FFF3E0;color:#B5720B;}
.status-badge.finalise{background:#E7FAF3;color:var(--grow-deep);}
.status-badge .sdot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* orders table */
.orders-table{width:100%;border-collapse:collapse;}
.orders-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:10px 14px;border-bottom:1px solid var(--line);}
.orders-table td{padding:14px;border-bottom:1px solid var(--line);font-size:14px;}
.orders-table tr:last-child td{border-bottom:none;}
.orders-table .net-tag{display:inline-flex;align-items:center;gap:8px;font-weight:700;}
.orders-table .net-tag .p-icon{width:22px;height:22px;font-size:10px;}

.p-icon{border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;flex:none;}

.empty-state{text-align:center;padding:60px 20px;color:var(--ink-soft);}
.empty-state h3{color:var(--ink);margin-bottom:8px;}

/* modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(19,19,32,0.55);display:none;align-items:center;justify-content:center;
  z-index:200;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:#fff;border-radius:var(--radius-md);padding:30px;max-width:440px;width:100%;box-shadow:var(--shadow-soft);
}
.modal-box .m-icon{
  width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--boost),var(--primary));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;margin-bottom:18px;
}
.modal-box h3{font-size:19px;margin-bottom:10px;}
.modal-box p{color:var(--ink-soft);font-size:14px;line-height:1.6;}
.modal-box ul{margin:14px 0 0;padding-left:18px;color:var(--ink-soft);font-size:13.5px;line-height:1.7;}
.modal-actions{display:flex;gap:12px;margin-top:24px;}

/* mobile cards for orders (shown < 720px) */
.order-cards{display:none;flex-direction:column;gap:12px;}
.order-card{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;}
.order-card .oc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.order-card .oc-row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft);padding:4px 0;}
.order-card .oc-row b{color:var(--ink);font-weight:600;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .network-grid{grid-template-columns:repeat(3,1fr);}
  .row-2{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .app-shell{grid-template-columns:1fr;}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:250px;z-index:150;
    transform:translateX(-100%);transition:transform .25s ease;
  }
  .sidebar.open{transform:translateX(0);}
  .menu-toggle{display:block;}
  .content{padding:22px 18px;}
  .topbar{padding:16px 18px;}
  .orders-table{display:none;}
  .order-cards{display:flex;}
}
@media (max-width:520px){
  .network-grid{grid-template-columns:repeat(2,1fr);}
  .balance-chip span.bc-label{display:none;}
  .topbar .greet span{display:none;}
}

/* ================= ADMIN-SPECIFIC ================= */

/* filter tabs 24h / 7j / 30j */
.filter-tabs{display:inline-flex;background:var(--surface-tint);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;}
.filter-tabs a{padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--ink-soft);}
.filter-tabs a.active{background:var(--primary-deep);color:#fff;}

/* stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:26px 0;}
.stat-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;
  position:relative;overflow:hidden;
}
.stat-card::after{
  content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle, rgba(58,46,110,0.07), transparent 70%);
}
.stat-card .sc-label{font-size:12.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;}
.stat-card .sc-value{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;margin-top:10px;color:var(--primary-deep);}
.stat-card .sc-icon{
  width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:14px;margin-bottom:14px;
}

/* chart card */
.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:26px;margin-bottom:26px;}
.chart-card h3{font-size:16px;margin-bottom:4px;}
.chart-card .chart-sub{color:var(--ink-soft);font-size:13px;margin-bottom:18px;}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:200px;}
.bar-chart .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:8px;}
.bar-chart .bar{
  width:100%;max-width:26px;border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,var(--boost),var(--primary));
  transition:opacity .15s;
}
.bar-chart .bar:hover{opacity:.75;}
.bar-chart .bar-label{font-size:10.5px;color:var(--ink-soft);font-weight:600;white-space:nowrap;}

/* section tabs (users actifs/inactifs) */
.seg-tabs{display:flex;gap:10px;margin-bottom:20px;}
.seg-tabs a{
  padding:10px 20px;border-radius:999px;font-size:13.5px;font-weight:700;
  border:1.5px solid var(--line);color:var(--ink-soft);
}
.seg-tabs a.active{background:var(--primary-deep);border-color:var(--primary-deep);color:#fff;}
.seg-tabs .count{
  display:inline-block;background:rgba(255,255,255,0.2);border-radius:999px;padding:1px 8px;margin-left:6px;font-size:11px;
}
.seg-tabs a:not(.active) .count{background:var(--surface-tint);color:var(--ink);}

/* generic admin table */
.admin-table{width:100%;border-collapse:collapse;}
.admin-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;}
.admin-table td{padding:14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tr:hover td{background:var(--surface-tint);}

.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;}
.badge .bdot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge.succes,.badge.finalise,.badge.actif{background:#E7FAF3;color:var(--grow-deep);}
.badge.pending,.badge.en_cours{background:#FFF3E0;color:#B5720B;}
.badge.echec,.badge.inactif{background:#FDECEE;color:var(--boost-deep);}

.table-wrap{overflow-x:auto;}
.avatar-mini{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--boost));flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;}
.user-cell{display:flex;align-items:center;gap:10px;}
.user-cell .uc-mail{display:block;color:var(--ink-soft);font-size:12px;font-weight:500;}

@media (max-width:960px){
  .stat-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .filter-tabs{width:100%;}
  .filter-tabs a{flex:1;text-align:center;padding:9px 8px;}
}