/* RD Services — Plateforme unifiée
   Design : Fraunces + IBM Plex Sans + IBM Plex Mono
   --accent est redéfini dynamiquement par chaque module */
:root{
  --ink:#1B1F27; --ink-2:#262B35; --ink-border:#2B303B; --ink-text:#F3F1EA; --ink-text-muted:#8A8D96;
  --bg:#F7F5F0; --surface:#FFFFFF; --surface-alt:#F3F1EA; --text:#1B1F27; --text-muted:#6B6E76; --border:#E4E0D8;
  --accent:#2F6690; --accent-strong:#234C6C; --accent-soft:#E7EEF4;
  --good:#2E7D4F; --good-soft:#DEEFE4; --warn:#B8801F; --warn-soft:#F6E7D2; --critical:#B4473E; --critical-soft:#F6DFDC;
  --shadow:0 1px 2px rgba(20,28,36,.06),0 4px 14px rgba(20,28,36,.06); --radius:12px;
  --font-display:'Fraunces',Georgia,serif; --font-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif; --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.45;font-size:13.5px;}
a{color:inherit;text-decoration:none;}
button{font:inherit;}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT GLOBAL DESKTOP (> 860px)
   Sidebar fixe à gauche + contenu à droite
   ═══════════════════════════════════════════════════════════════ */
.mobile-topbar{display:none !important;}
.sidebar-backdrop{display:none !important;}
.sidebar-close-btn{display:none !important;}

.shell{display:flex;min-height:100vh;width:100%;}

/* ── Sidebar desktop ─────────────────────────────────────────── */
.sidebar{
  width:236px;min-width:236px;flex:0 0 236px;
  background:var(--ink);color:var(--ink-text-muted);
  display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;
  box-sizing:border-box;padding:20px 12px 18px;
  position:sticky;top:0;height:100vh;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overflow-x:hidden;
  z-index:50;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:0 6px 18px;margin-bottom:4px;
  border-bottom:1px solid var(--ink-border);
  flex-shrink:0;
}
.sidebar-brand .mark{
  width:32px;height:32px;border-radius:9px;
  background:var(--ink-text);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:13px;
  flex-shrink:0;
}
.sidebar-brand .name{font-size:13px;font-weight:600;color:var(--ink-text);line-height:1.2;}
.sidebar-brand .sub{font-size:10.5px;color:var(--ink-text-muted);line-height:1.2;}

/* ── Liste de navigation (colonne unique garantie) ───────────── */
.nav-list{
  display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;
  gap:2px;width:100%;flex:1;margin:6px 0;padding:0;
}
.nav-item{
  display:flex !important;flex-direction:row !important;align-items:center !important;flex-wrap:nowrap !important;
  gap:10px;padding:9px 10px;border-radius:9px;
  font-size:12.5px;font-weight:500;
  color:var(--ink-text-muted);
  text-decoration:none;
  transition:background .12s,color .12s;
  width:100% !important;box-sizing:border-box !important;
  white-space:nowrap;overflow:hidden;
}
.nav-item:hover{background:var(--ink-2);color:var(--ink-text);}
.nav-item.active{
  background:var(--ink-2);color:var(--ink-text);font-weight:600;
  box-shadow:inset 3px 0 0 var(--accent);
}
.nav-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.sidebar-spacer{flex:1;min-height:12px;}

/* ── Pied de sidebar — utilisateur ──────────────────────────── */
.sidebar-user{
  border-top:1px solid var(--ink-border);
  padding-top:14px;margin-top:4px;
  display:flex;align-items:center;gap:9px;
  flex-shrink:0;
}
.sidebar-user .avatar{
  width:30px;height:30px;border-radius:50%;
  background:#3D4F91;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--ink-text);
}
.sidebar-user .who{flex:1;min-width:0;}
.sidebar-user .who-name{
  font-size:12px;font-weight:600;color:var(--ink-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-user .who-logout{font-size:10.5px;color:var(--ink-text-muted);}

/* ── Contenu principal (desktop) ─────────────────────────────── */
.content{flex:1;min-width:0;padding:28px 34px 48px;max-width:1040px;box-sizing:border-box;}
.content-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.content-header .titles{display:flex;align-items:center;gap:11px;}
.content-header .badge-mark{width:34px;height:34px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:13px;}
.content-header h1{font-size:21px;}
.content-header .sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);font-weight:600;margin-bottom:14px;}

/* ── Utilitaires ─────────────────────────────────────────────── */
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);margin-bottom:12px;}
.table-responsive table{min-width:520px;}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT MOBILE & TABLETTE (≤ 860px)
   Topbar fixe en haut + Drawer off-canvas coulissant
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .shell{display:block;width:100%;min-height:100vh;}

  /* ── Topbar mobile : pleine largeur, fond sombre, toujours visible ── */
  .mobile-topbar{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    width:100%;
    height:58px;
    padding:0 16px;
    background:var(--ink);
    color:var(--ink-text);
    position:sticky;
    top:0;
    z-index:100;
    box-sizing:border-box;
    border-bottom:1px solid var(--ink-border);
    box-shadow:0 2px 12px rgba(0,0,0,.25);
    flex-shrink:0;
  }
  .mobile-topbar-brand{display:flex;align-items:center;gap:10px;}
  .mobile-topbar-brand .mark{
    width:32px;height:32px;border-radius:8px;
    background:var(--ink-text);color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:700;font-size:12px;
    flex-shrink:0;
  }
  .mobile-topbar-brand .name{
    font-size:15px;font-weight:700;color:var(--ink-text);
    letter-spacing:-.01em;
  }
  .mobile-menu-toggle{
    display:flex !important;align-items:center;justify-content:center;
    width:42px;height:42px;
    background:rgba(255,255,255,.08);
    border:1px solid var(--ink-border);
    border-radius:10px;
    color:var(--ink-text);
    cursor:pointer;
    padding:0;
    transition:background .15s;
    flex-shrink:0;
  }
  .mobile-menu-toggle:hover{background:rgba(255,255,255,.14);}
  .mobile-menu-toggle:active{background:rgba(255,255,255,.04);transform:scale(.95);}

  /* ── Drawer sidebar off-canvas ─────────────────────────────── */
  .sidebar{
    position:fixed !important;
    top:0;left:0;bottom:0;
    width:280px;
    max-width:86vw;
    height:100% !important;
    height:100dvh !important;
    background:var(--ink);
    color:var(--ink-text-muted);
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    box-sizing:border-box;
    padding:0;
    z-index:1001;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.menu-open .sidebar{
    transform:translateX(0);
    box-shadow:6px 0 32px rgba(0,0,0,.55);
  }

  /* En-tête drawer : logo + bouton fermer */
  .sidebar-brand{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    border-bottom:1px solid var(--ink-border);
    margin-bottom:6px;
    flex-shrink:0;
    gap:8px;
  }
  .sidebar-brand .mark{width:32px;height:32px;border-radius:8px;font-size:12px;}
  .sidebar-brand .name{font-size:13.5px;}

  /* Bouton fermer drawer */
  .sidebar-close-btn{
    display:flex !important;align-items:center;justify-content:center;
    width:34px;height:34px;
    border-radius:9px;
    background:rgba(255,255,255,.08);
    color:var(--ink-text);
    border:1px solid var(--ink-border);
    font-size:16px;
    cursor:pointer;
    flex-shrink:0;
    transition:background .15s;
  }
  .sidebar-close-btn:hover{background:rgba(255,255,255,.15);}
  .sidebar-close-btn:active{background:rgba(255,255,255,.04);}

  /* ── Navigation drawer : toujours en colonne verticale 100% ─ */
  .nav-list{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:2px;
    padding:4px 10px;
    flex:1;
    width:100%;
    box-sizing:border-box;
  }
  .nav-item{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:11px 12px;
    border-radius:10px;
    font-size:13px;
    white-space:normal;
    overflow:visible;
  }
  .nav-item.active{
    box-shadow:inset 3px 0 0 var(--accent);
  }
  .nav-dot{width:8px;height:8px;}

  /* Pied drawer */
  .sidebar-user{
    margin:0;
    padding:14px 16px 18px;
    border-top:1px solid var(--ink-border);
    flex-shrink:0;
  }
  .sidebar-user .avatar{width:32px;height:32px;font-size:12px;}

  /* Backdrop semi-transparent */
  .sidebar-backdrop{
    display:block !important;
    position:fixed;inset:0;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    z-index:1000;
    opacity:0;pointer-events:none;
    transition:opacity .28s ease;
  }
  body.menu-open .sidebar-backdrop{opacity:1;pointer-events:auto;}
  body.menu-open{overflow:hidden;}

  /* ── Contenu sur mobile ────────────────────────────────────── */
  .content{padding:20px 16px 40px;width:100%;max-width:100%;box-sizing:border-box;}
  .content-header{gap:10px;margin-bottom:14px;}
  .content-header h1{font-size:19px;}
}

@media (max-width:540px){
  .content{padding:14px 12px 36px;}
  .content-header{flex-direction:column;align-items:stretch;}
  .content-header > div:last-child{display:flex;flex-wrap:wrap;gap:6px;}
  .content-header .btn, .content-header .btn-ghost{flex:1 1 auto;text-align:center;justify-content:center;}
}
@media (max-width:400px){
  .content{padding:12px 10px 32px;}
  .content-header > div:last-child .btn,.content-header > div:last-child .btn-ghost,.content-header > div:last-child a.btn{width:100%;box-sizing:border-box;justify-content:center;}
}



/* ---------- Buttons ---------- */
.btn-ghost,.btn,.btn-primary,.btn-danger{font-family:var(--font-body);font-size:13px;font-weight:600;border-radius:9px;padding:8px 12px;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);display:inline-flex;align-items:center;justify-content:center;transition:background .15s,transform .1s;}
.btn-ghost{background:transparent;color:var(--text-muted);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-danger{background:transparent;border-color:var(--critical);color:var(--critical);}
.btn-primary:active,.btn:active,.btn-ghost:active{transform:translateY(1px);}
@media (max-width:540px){
  .btn, .btn-ghost, .btn-primary, .btn-danger{min-height:42px;box-sizing:border-box;}
}

/* ---------- Banners / callouts ---------- */
.banner{background:var(--warn-soft);border:1px solid var(--warn);color:var(--text);border-radius:var(--radius);padding:10px 14px;font-size:13px;margin-bottom:14px;}
.callout{display:flex;align-items:center;gap:10px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;padding:11px 14px;margin-bottom:18px;font-size:12.5px;}
.callout.tag::before{content:'Nouveau';font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--accent);color:#fff;border-radius:999px;padding:3px 8px;flex:none;}

/* ---------- KPI / cards ---------- */
.grid-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:20px;}
@media (max-width:1080px){.grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:860px){.grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.grid-kpi{grid-template-columns:1fr;}}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:13px 14px;box-shadow:var(--shadow);}
@media (max-width:540px){.kpi{padding:11px 12px;}}
.kpi .label{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;}
.kpi .value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:clamp(17px, 3.8vw, 20px);font-weight:600;margin-top:5px;word-break:break-word;}
.kpi .sub{font-size:11px;color:var(--text-muted);margin-top:2px;}
section.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 16px;margin-bottom:14px;}
.card h2{font-size:16px;}
.card .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.section-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:9px;}

/* ---------- Alerts ---------- */
.alert-row{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-top:1px solid var(--border);font-size:12.5px;}
.alert-row:first-child{border-top:none;padding-top:0;}
.dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px;}
.dot.critical{background:var(--critical);} .dot.warn{background:var(--warn);} .dot.good{background:var(--good);}
.muted{color:var(--text-muted);}
.empty{color:var(--text-muted);font-size:13px;padding:6px 0;}

/* ---------- Lists / rows ---------- */
.list{display:flex;flex-direction:column;gap:8px;}
.row-card{border:1px solid var(--border);border-radius:10px;padding:11px 12px;background:var(--surface-alt);word-break:break-word;}
.row-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap;}
.row-top .name{font-weight:600;font-size:14px;word-break:break-word;flex:1 1 200px;}
.badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:3px 8px;white-space:nowrap;flex-shrink:0;}
.badge.good{background:var(--good-soft);color:var(--good);}
.badge.warn{background:var(--warn-soft);color:var(--warn);}
.badge.critical{background:var(--critical-soft);color:var(--critical);}
.badge.neutral{background:var(--surface);color:var(--text-muted);border:1px solid var(--border);}
.row-meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;font-size:12px;color:var(--text-muted);}
.row-meta span{word-break:break-word;}
.row-actions{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap;}
.row-actions button{font-size:12px;padding:5px 10px;}
@media (max-width:540px){
  .row-actions form{flex:1 1 auto;display:flex;}
  .row-actions button, .row-actions .btn, .row-actions .btn-danger{width:100%;min-height:38px;justify-content:center;}
}

/* ---------- Forms ---------- */
form.entry-form{border:1px dashed var(--border);border-radius:10px;padding:13px;margin-bottom:14px;background:var(--surface-alt);}
.field{margin-bottom:10px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:4px;}
.field input,.field select,.field textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:14px;box-sizing:border-box;}
.field textarea{resize:vertical;min-height:52px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:640px){
  .field-row{grid-template-columns:1fr;gap:8px;}
  .field input,.field select,.field textarea,input[type=search],input,select,textarea{font-size:16px !important;min-height:42px;}
}
.field-check{display:flex;align-items:center;gap:8px;font-size:13px;}
.field-check input{width:auto;}
.hint{font-size:11.5px;color:var(--text-muted);margin-top:3px;}
.form-actions{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;}
@media (max-width:540px){
  .form-actions button, .form-actions .btn, .form-actions .btn-primary{width:100%;min-height:42px;justify-content:center;box-sizing:border-box;}
}

/* ---------- Tabs Navigation Scrollable ---------- */
.tabs-nav{display:flex;gap:6px;margin-bottom:18px;border-bottom:2px solid var(--border);padding-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tabs-nav::-webkit-scrollbar{display:none;}
.tabs-nav a{flex-shrink:0;white-space:nowrap;}

/* ---------- Tabs Pill (modules) ---------- */
.tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:16px;flex-wrap:nowrap;padding-bottom:4px;}
.tabs::-webkit-scrollbar{display:none;}
.tabs a,.tabs .btn,.tabs .btn-primary{flex-shrink:0;white-space:nowrap;}

/* ---------- Stock / progress ---------- */
.stock-tile{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--surface-alt);margin-bottom:8px;}
.stock-tile .big{font-family:var(--font-mono);font-size:20px;font-weight:600;}
.progress{height:6px;border-radius:99px;background:var(--border);overflow:hidden;margin-top:5px;}
.progress > div{height:100%;background:var(--accent);}

/* ---------- Ledger / tables ---------- */
.ledger-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ledger table,.ledger-wrap table{width:100%;min-width:480px;border-collapse:collapse;font-size:12.5px;}
.ledger th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:6px 6px;border-bottom:1px solid var(--border);}
.ledger td{padding:8px 6px;border-bottom:1px solid var(--border);vertical-align:top;}
.ledger .amt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}
.amt.pos{color:var(--good);} .amt.neg{color:var(--critical);}


/* ---------- Toggle switch ---------- */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--border);border-radius:10px;padding:10px 13px;background:var(--surface-alt);margin-bottom:12px;}
.switch{position:relative;width:40px;height:22px;flex:none;}
.switch input{opacity:0;width:100%;height:100%;position:absolute;margin:0;cursor:pointer;}
.switch .track{position:absolute;inset:0;background:var(--border);border-radius:999px;transition:background .15s;}
.switch input:checked ~ .track{background:var(--accent);}
.switch .thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .15s;}
.switch input:checked ~ .thumb{transform:translateX(18px);}

/* ---------- Login page ---------- */
.login-shell{min-height:100vh;display:flex;background:#fff;}
.login-side{width:480px;flex:none;background:var(--ink);color:var(--ink-text);padding:48px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;}
.login-side h1{font-size:32px;line-height:1.2;color:var(--ink-text);}
.login-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#D8DADF;background:var(--ink-2);border-radius:999px;padding:6px 12px;margin:4px 6px 0 0;}
.login-main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px;}
.login-box{width:340px;}
@media (max-width:760px){
  .login-side{display:none;}
  .login-main{padding:24px 16px;}
  .login-box{width:100%;max-width:340px;}
}
.login-error{background:var(--critical-soft);border:1px solid var(--critical);color:var(--text);border-radius:10px;padding:10px 12px;font-size:12.5px;margin-bottom:16px;}

/* ---------- Filtres (chips), recherche, encarts de règles — introduits par le module IPTV ---------- */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.chip{font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);border-radius:999px;padding:5px 11px;}
.chip[data-active="true"]{background:var(--text);color:var(--bg);border-color:var(--text);}
input[type=search]{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-size:13.5px;margin-bottom:10px;font-family:var(--font-body);box-sizing:border-box;}
.rule-box{background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;padding:11px 13px;font-size:12.5px;margin-bottom:12px;}
.rule-box b{color:var(--accent-strong);}
.warning-box{background:var(--warn-soft);border:1px solid var(--warn);border-radius:10px;padding:11px 13px;font-size:12.5px;margin-bottom:10px;}
.detail-line{font-size:12px;color:var(--text-muted);margin-top:5px;line-height:1.4;}

/* ---------- Acces table (users.php) — wrapper responsive ---------- */
.acces-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);}
.acces-table-wrap table,.acces-table{min-width:480px;}

/* ---------- Stock tile mobile ---------- */
@media (max-width:480px){
  .stock-tile{flex-direction:column;align-items:flex-start;gap:8px;}
  .stock-tile .big{font-size:17px;}
}

/* ---------- Toggle row very small ---------- */
@media (max-width:400px){
  .toggle-row{flex-direction:column;align-items:flex-start;gap:8px;padding:10px;}
}

/* ---------- Login page — very small (320px safe) ---------- */
@media (max-width:380px){
  .login-main{padding:16px 12px;}
  .login-box{padding:0;}
}

/* ---------- section.card padding mobile ---------- */
@media (max-width:480px){
  section.card{padding:12px 12px;}
  .card h2{font-size:15px;}
}