/* ── Ogmadom — Styles partagés ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #09090F; --surface: #12121C; --surface2: #1A1A28;
  --border: #1E1E32; --primary: #8B5CF6; --primary-d: #6D28D9;
  --primary-g: linear-gradient(135deg,#7C3AED,#A855F7);
  --gold: #F59E0B; --gold-g: linear-gradient(135deg,#F59E0B,#FBBF24);
  --green: #10B981; --red: #EF4444;
  --text: #F0F0FA; --muted: #8888A8; --muted2: #555570;
  --radius: 12px; --radius-lg: 22px; --sidebar: 240px;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: inherit; text-decoration: none; }

/* SIDEBAR LAYOUT */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar); background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: fixed; top:0; left:0; bottom:0; z-index: 50; overflow-y: auto;
}
.sidebar-logo { min-height:118px; padding:18px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); }
.sidebar-logo-img { display:block; width:min(172px,100%); height:82px; object-fit:contain; }
.sidebar-logo-icon { width:32px;height:32px;background:var(--primary-g);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;-webkit-text-fill-color:initial; }
.sidebar-nav { padding: 16px 12px; flex:1; display:flex; flex-direction:column; gap:4px; }
.sidebar-section-label { font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);padding:8px 8px 4px; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  font-size:14px; font-weight:500; color:var(--muted); cursor:pointer; transition:all .2s; border:none; background:transparent; width:100%; text-align:left;
}
.nav-item:hover { background:var(--surface2); color:var(--text); }
.nav-item.active { background:rgba(139,92,246,.15); color:#C084FC; font-weight:600; }
.nav-item .icon { font-size:16px; flex-shrink:0; }
.sidebar-footer { padding:16px; border-top:1px solid var(--border); }
.user-pill { display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .2s; }
.user-pill:hover { background:var(--surface2); }
.user-avatar { width:32px;height:32px;border-radius:50%;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.28);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden; }
.user-avatar-img { display:block;width:100%;height:100%;object-fit:cover; }
.user-info { flex:1; overflow:hidden; }
.user-info .uname { font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.user-info .uplan { font-size:11px;color:var(--muted); }

/* MAIN CONTENT */
.main { margin-left: var(--sidebar); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.topbar { padding:20px 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); background:rgba(9,9,15,.8); backdrop-filter:blur(12px); position:sticky; top:0; z-index:40; }
.topbar h1 { font-size:1.4rem; font-weight:700; }
.page-content { padding:32px; flex:1; }

/* CARDS */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.card-header h2 { font-size:1rem; font-weight:700; }

/* GRID STATS */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.stat-card .val { font-size:2rem; font-weight:800; letter-spacing:-.04em; }
.stat-card .lbl { font-size:12px; color:var(--muted); margin-top:4px; }
.stat-card .delta { font-size:12px; margin-top:8px; }
.delta-up { color:var(--green); } .delta-down { color:var(--red); }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; padding:10px 20px; border-radius:9px; cursor:pointer; border:none; transition:all .2s; white-space:nowrap; }
.btn-primary { background:var(--primary-g); color:#fff; box-shadow:0 0 20px rgba(139,92,246,.25); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 0 32px rgba(139,92,246,.45); }
.btn-ghost { background:transparent; border:1.5px solid var(--border); color:var(--text); }
.btn-ghost:hover { border-color:var(--primary); color:#C084FC; }
.btn-gold { background:var(--gold-g); color:#0F0F0F; font-weight:700; }
.btn-gold:hover { transform:translateY(-1px); box-shadow:0 0 24px rgba(245,158,11,.4); }
.btn-sm { padding:7px 14px; font-size:13px; }
.btn-danger { background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.3); color:var(--red); }
.btn-danger:hover { background:rgba(239,68,68,.25); }

/* GRADIENT TEXT */
.gradient-text { background:linear-gradient(135deg,#C084FC,#F59E0B); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* RECOMMENDED (tableaux de prix) */
.recommended { color:#34D399; font-weight:700; }

/* TABLE */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; padding:10px 16px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); }
td { padding:12px 16px; border-bottom:1px solid rgba(30,30,50,.5); color:#C0C0D8; vertical-align:middle; }
tr:hover td { background:rgba(255,255,255,.015); }
tr:last-child td { border-bottom:none; }

/* BADGES */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:50px; font-size:12px; font-weight:600; }
.badge-draft   { background:rgba(136,136,168,.15); color:var(--muted); border:1px solid rgba(136,136,168,.2); }
.badge-sent    { background:rgba(139,92,246,.15); color:#C084FC; border:1px solid rgba(139,92,246,.25); }
.badge-opened  { background:rgba(16,185,129,.15); color:#34D399; border:1px solid rgba(16,185,129,.25); }
.badge-clicked { background:rgba(245,158,11,.15); color:#FBBF24; border:1px solid rgba(245,158,11,.25); }
.badge-replied { background:rgba(16,185,129,.2); color:#10B981; border:1px solid rgba(16,185,129,.35); }
.badge-active  { background:rgba(16,185,129,.15); color:#34D399; border:1px solid rgba(16,185,129,.25); }

/* FORMS */
.form-group { margin-bottom:18px; }
label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px; }
input, select, textarea {
  width:100%; background:var(--surface2); border:1.5px solid var(--border); border-radius:9px;
  padding:10px 14px; font-size:14px; color:var(--text); outline:none; transition:border-color .2s; font-family:inherit;
}
input:focus, select:focus, textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(139,92,246,.12); }
textarea { resize:vertical; min-height:80px; }
select option { background:var(--surface2); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px){.form-row{grid-template-columns:1fr;}}
.form-hint { font-size:12px; color:var(--muted); margin-top:5px; }
.form-error { font-size:13px; color:var(--red); margin-top:5px; }

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .25s; }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; transform:translateY(16px); transition:transform .25s; }
.modal-overlay.open .modal { transform:translateY(0); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.modal-header h2 { font-size:1.15rem; font-weight:700; }
.modal-close { background:var(--surface2); border:1px solid var(--border); border-radius:8px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; }
.modal-close:hover { border-color:var(--primary); }

/* QUOTA BAR */
.quota-bar-wrap { margin:8px 0; }
.quota-bar-track { width:100%; height:6px; background:var(--border); border-radius:50px; overflow:hidden; }
.quota-bar-fill { height:100%; border-radius:50px; background:var(--primary-g); transition:width .4s ease; }
.quota-bar-fill.warn { background:linear-gradient(90deg,#F59E0B,#EF4444); }

/* TOAST */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:999; display:flex; flex-direction:column; gap:10px; }
.toast { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 18px; font-size:14px; font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,.4); display:flex; align-items:center; gap:10px; min-width:240px; animation:slideIn .25s ease; }
.toast.success { border-color:rgba(16,185,129,.4); } .toast.error { border-color:rgba(239,68,68,.4); } .toast.info { border-color:rgba(139,92,246,.4); }
@keyframes slideIn { from{transform:translateX(40px);opacity:0} to{transform:translateX(0);opacity:1} }

/* EMPTY STATE */
.empty-state { text-align:center; padding:60px 24px; }
.empty-state .icon { font-size:48px; margin-bottom:16px; }
.empty-state h3 { font-size:1.1rem; font-weight:700; margin-bottom:8px; }
.empty-state p { font-size:14px; color:var(--muted); max-width:320px; margin:0 auto 24px; }

/* SCROLLBAR */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:50px; }
::-webkit-scrollbar-thumb:hover { background:var(--muted2); }

/* SPINNER */
.spinner { display:inline-block; width:18px; height:18px; border:2px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* PROGRESS STEPS */
.steps { display:flex; gap:0; margin-bottom:28px; }
.step { flex:1; text-align:center; position:relative; }
.step::after { content:''; position:absolute; top:14px; left:50%; width:100%; height:2px; background:var(--border); z-index:0; }
.step:last-child::after { display:none; }
.step-circle { width:28px;height:28px;border-radius:50%;background:var(--surface2);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin:0 auto 6px;position:relative;z-index:1; }
.step.active .step-circle { background:var(--primary-g); border-color:transparent; color:#fff; }
.step.done .step-circle { background:var(--green); border-color:transparent; }
.step-label { font-size:11px; color:var(--muted); font-weight:600; }
.step.active .step-label { color:var(--text); }