/* refresh.css — couche thème refresh back-office, gated sous body.ui-refresh.
   Valeurs reprises de design_handoff_backoffice/_tokens.scss et styles.css. */
:root{
  --side-bg:#2c2f36; --side-bg-2:#33373f; --side-active:#3b4350;
  --side-text:#c4c8d0; --side-head:#6a7280;
  --ink:#2a2e35; --ink-2:#5a616c; --ink-3:#878e99;
  --line:#e6e8ee; --line-soft:#eef0f4; --panel-2:#f6f7f9;
  --app-bg:#eceef2; --surface:#ffffff;
  --violet:#8055b5; --violet-deep:#6f44a3; --violet-soft:#f1ebf8;
  --green:#22b985; --yellow:#efbe0c; --red:#e8505b; --red-deep:#d8323f;
  --cyan:#34bde0; --blue-link:#4a7fb5; --escalade-red:#e2001a;
  --radius-card:14px; --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(20,24,40,.05), 0 6px 18px -10px rgba(20,24,40,.18);
  --shadow-pop:0 12px 40px -12px rgba(20,24,40,.28);
}
body.ui-refresh{
  background:var(--app-bg); color:var(--ink);
  font-family:"Public Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size:14.5px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.ui-refresh h1, body.ui-refresh h2, body.ui-refresh h3, body.ui-refresh .h-archivo{
  font-family:"Archivo", "Public Sans", sans-serif; font-weight:700; color:var(--ink);
}
/* Utilitaires manquants en BS3 (flex/gap) */
body.ui-refresh .r-flex{ display:flex; }
body.ui-refresh .r-gap-8{ gap:8px; } body.ui-refresh .r-gap-12{ gap:12px; }
body.ui-refresh .r-gap-16{ gap:16px; } body.ui-refresh .r-gap-22{ gap:22px; }
body.ui-refresh .r-aic{ align-items:center; } body.ui-refresh .r-jcsb{ justify-content:space-between; }

/* ============================ Shell ============================ */
/* Colonne flex pleine hauteur : seule .r-content defile, topbar/sidebar/footer fixes. */
body.ui-refresh .r-app{ display:flex; height:100vh; overflow:hidden; }
body.ui-refresh .r-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; height:100vh; }
body.ui-refresh .r-content{ flex:1 1 auto; min-height:0; padding:22px 26px 60px; overflow-y:auto; }
body.ui-refresh .r-main > footer{ flex:0 0 auto; }

/* Shell des pages a structure existante (section > sidebar + .body-content),
   bascule non-invasive : swap des includes sidebar/topbar + classe ui-refresh, sans
   chirurgie de divs. Scroll de page classique, sidebar sticky pleine hauteur. */
body.ui-refresh > section{ display:flex; align-items:flex-start; }
body.ui-refresh > section > .body-content{ flex:1 1 auto; min-width:0; margin:0; width:auto; padding:0 26px; }
/* La topbar reste pleine largeur : on annule le padding horizontal par marges negatives. */
body.ui-refresh > section > .body-content > .r-topbar{ margin-left:-26px; margin-right:-26px; }
/* Aligner les panneaux (.wrapper) sur le titre (.page-head) : retirer le seul padding
   horizontal de .wrapper, garder l'espacement vertical. */
body.ui-refresh .wrapper{ padding-left:0; padding-right:0; }

/* ---------------------------- Sidebar -------------------------- */
body.ui-refresh .r-sidebar{
  width:262px; flex:0 0 262px; background:var(--side-bg); color:var(--side-text);
  height:100vh; position:sticky; top:0; overflow-y:auto;
}
body.ui-refresh .r-side-brand{ padding:16px 18px; display:flex; align-items:center; }
body.ui-refresh .r-side-brand a{ display:flex; align-items:center; gap:10px; text-decoration:none; }
body.ui-refresh .r-side-logo{ height:38px; width:auto; flex:0 0 auto; }
body.ui-refresh .r-side-brand-txt{ font-family:"Archivo",sans-serif; font-weight:700; font-size:15px; line-height:1.05; color:#fff; }
body.ui-refresh .r-side-section{
  color:var(--side-head); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:16px 18px 6px;
}
body.ui-refresh .r-side-group{ padding:9px 18px; color:var(--side-text); display:flex; align-items:center; gap:10px; cursor:pointer; }
body.ui-refresh .r-side-group:hover{ background:var(--side-bg-2); color:#fff; }
body.ui-refresh .r-side-caret{ margin-left:auto; font-size:12px; transition:transform .15s; }
body.ui-refresh .r-side-group.open .r-side-caret{ transform:rotate(180deg); }
body.ui-refresh .r-side-subitems{ padding-left:10px; display:none; }
body.ui-refresh .r-side-group.open + .r-side-subitems{ display:block; }
body.ui-refresh .r-side-link{
  display:flex; align-items:center; gap:10px; padding:9px 18px; color:var(--side-text);
  text-decoration:none; border-radius:9px; margin:1px 8px; position:relative;
}
body.ui-refresh .r-side-link:hover{ background:var(--side-bg-2); color:#fff; }
body.ui-refresh .r-side-link.active{ background:var(--side-active); color:#fff; }
body.ui-refresh .r-side-link.active::before{
  content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px;
  border-radius:0 3px 3px 0; background:var(--violet);
}
body.ui-refresh .r-side-label{ flex:1; }
body.ui-refresh .r-side-badge{
  min-width:20px; height:20px; padding:0 6px; border-radius:10px; color:#fff;
  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
}
body.ui-refresh .r-badge-green{ background:var(--green); } body.ui-refresh .r-badge-yellow{ background:var(--yellow); }
body.ui-refresh .r-badge-violet{ background:var(--violet); } body.ui-refresh .r-badge-red{ background:var(--red); }

/* ---------------------------- Topbar --------------------------- */
body.ui-refresh .r-topbar{
  height:58px; position:sticky; top:0; z-index:20; background:var(--surface);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 18px;
}
body.ui-refresh .r-topbar-spacer{ flex:1; }
body.ui-refresh .r-burger{ background:none; border:0; font-size:18px; color:var(--ink-2); cursor:pointer; }
body.ui-refresh .r-topbar-brand{ display:none; align-items:center; gap:8px; color:var(--ink); font-weight:700; text-decoration:none; }
body.ui-refresh .r-topbar-brand img{ height:28px; }
body.ui-refresh .r-topbar-actions{ display:flex; align-items:center; gap:6px; }
/* Neutralisation des styles FlatLab des includes reutilises dans la topbar */
body.ui-refresh .r-topbar .notification-menu{ margin:0; padding:0; list-style:none; display:flex; align-items:center; }
body.ui-refresh .r-topbar .lang-switcher-wrap{ margin-left:0 !important; }
body.ui-refresh .r-topbar .lang-switcher-wrap li{ height:auto !important; }
body.ui-refresh .r-topbar .right-notification li{ position:relative; }

/* ---------------------------- Footer --------------------------- */
body.ui-refresh footer{
  display:flex; justify-content:space-between; align-items:center; padding:10px 26px;
  color:var(--ink-3); font-size:12px; border-top:1px solid var(--line); background:var(--surface);
}

/* -------------------------- Responsive ------------------------- */
@media (min-width:821px){ body.ui-refresh .r-burger{ display:none; } }
@media (max-width:820px){
  body.ui-refresh .r-sidebar{ position:fixed; left:-262px; top:0; z-index:50; transition:left .2s; }
  body.ui-refresh.r-side-open .r-sidebar{ left:0; box-shadow:var(--shadow-pop); }
  body.ui-refresh .r-topbar-brand{ display:flex; }
}