/**
 * skolaide-theme.css
 * Copie LOCALE du kit UI, reskinnée avec la palette/police de l'app
 * Skolaide fournie par l'utilisateur (v1.0.e, "pour tester"). Pas le
 * kit partagé ui/v1/ — dupliqué exprès pour ne pas affecter les autres
 * applis SkolSuite (voir docs/THEME_GUIDE.md §7). Mêmes noms de
 * variables et de classes que ui/v1/skolsuite-ui.css : aucun template
 * PHP ni script JS n'a eu besoin de changer, seules les valeurs de
 * couleur/police/rayon changent, plus la sidebar (voir plus bas,
 * toujours navy foncé comme dans l'app d'origine, indépendamment du
 * mode clair/sombre).
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap');

/**
 * Thème "Skolaide" — adopté en v1.0.e à la demande de l'utilisateur,
 * qui a fourni son app Skolaide (assets/css/app.css, variables --skl-*)
 * comme référence. Remplace la palette "Akkhor". Les noms de variables
 * --ss-* sont conservés pour ne rien casser (aucun template PHP, aucun
 * JS n'a besoin de changer) ; seules les valeurs changent, comme lors
 * du passage précédent papier/ochre -> Akkhor. Ce fichier est une copie
 * LOCALE (pas le kit partagé ui/v1/ des autres applis SkolSuite) —
 * voir docs/THEME_GUIDE.md §7 : dupliquer plutôt que diverger en place.
 */
:root{
  --ss-paper:      #F5F7FA;
  --ss-paper-line: rgba(0,0,0,.07);
  --ss-slate:      #1B3B7A;
  --ss-slate-soft: #2952A3;
  --ss-ink:        #1A2433;
  --ss-ochre:      #D4891A;
  --ss-ochre-deep: #9C6413;
  --ss-ochre-soft: #FAEEDA;
  --ss-error:      #C0392B;
  --ss-success:    #1A8754;
  --ss-muted:      #6B7A8D;
  --ss-chalk:      #EDF2F7;

  --ss-font-display: 'Poppins', 'Cairo', system-ui, sans-serif;
  --ss-font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Cairo', sans-serif;

  --ss-radius:    8px;
  --ss-radius-sm: 6px;

  --ss-shadow:    0 1px 3px rgba(0,0,0,.07);
  --ss-shadow-sm: 0 1px 2px rgba(0,0,0,.05);

  --ss-gradient-primary: linear-gradient(135deg, var(--ss-slate) 0%, var(--ss-slate-soft) 100%);
  --ss-gradient-accent:  linear-gradient(135deg, var(--ss-slate) 0%, var(--ss-ochre) 100%);
}

.ss-scope, .ss-scope *{ box-sizing:border-box; }
.ss-scope{ font-family:var(--ss-font-body); color:var(--ss-ink); }
.ss-scope h1,.ss-scope h2,.ss-scope h3{ font-family:var(--ss-font-display); margin:0; }

.ss-card{
  background:#fff;
  border-radius:var(--ss-radius);
  box-shadow:var(--ss-shadow);
  padding:1.75rem;
}
.ss-card h1{ font-family:var(--ss-font-display); font-size:1.5rem; font-weight:500; margin-bottom:1.4rem; }
.ss-card h2{ font-size:1.15rem; font-weight:500; margin-bottom:1rem; }

.ss-tabs{ display:flex; gap:1.6rem; border-bottom:1px solid var(--ss-paper-line); margin-bottom:1.4rem; }
.ss-tabs button{ background:none; border:none; cursor:pointer; font-family:inherit; font-size:.92rem; color:var(--ss-muted); padding:0 0 .7rem; position:relative; top:1px; }
.ss-tabs button.active{ color:var(--ss-ink); background:var(--ss-ochre-soft); border-bottom:2px solid var(--ss-ochre); font-weight:500; border-radius:var(--ss-radius-sm) var(--ss-radius-sm) 0 0; padding-left:.5rem; padding-right:.5rem; }

.ss-field{ display:block; margin-bottom:1.05rem; }
.ss-field label{ font-size:.82rem; color:var(--ss-muted); display:block; margin-bottom:.35rem; }
.ss-field input,
.ss-field select{
  display:block; width:100%;
  padding:.6rem .75rem;
  border:1px solid var(--ss-paper-line);
  border-radius:var(--ss-radius-sm);
  background:var(--ss-chalk);
  font-family:inherit; font-size:.98rem; color:var(--ss-ink);
  box-shadow:inset 0 1px 2px rgba(27,36,56,.04);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ss-field input:focus,
.ss-field select:focus{
  outline:none;
  border-color:var(--ss-slate);
  background:#fff;
  box-shadow:0 0 0 3px rgba(27,59,122,.15);
}
.ss-hint{ margin:.35rem 0 0; font-size:.78rem; color:var(--ss-muted); line-height:1.4; }

.ss-btn{
  display:inline-block;
  padding:.5rem 1.1rem;
  border-radius:var(--ss-radius-sm);
  font-family:inherit; font-size:.85rem;
  border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:filter .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ss-btn:disabled{ opacity:.55; cursor:default; }
.ss-btn-primary{ background:var(--ss-gradient-primary); color:var(--ss-chalk); box-shadow:var(--ss-shadow-sm); }
.ss-btn-primary:hover:not(:disabled){ filter:brightness(1.08); }
.ss-btn-full{ width:100%; text-align:center; }
.ss-btn-secondary{ background:#fff; border-color:var(--ss-paper-line); color:var(--ss-ink); }
.ss-btn-secondary:hover:not(:disabled){ border-color:var(--ss-slate); }
.ss-btn-danger{ background:#fff; border-color:var(--ss-error); color:var(--ss-error); }
.ss-btn-danger:hover:not(:disabled){ background:var(--ss-error); color:#fff; }
.ss-btn-link{ background:none; border:none; color:var(--ss-ochre-deep); font-family:inherit; font-size:.82rem; cursor:pointer; padding:0; text-decoration:none; transition:color .15s; }
.ss-btn-link:hover{ color:var(--ss-slate); text-decoration:underline; }

.ss-alert{ font-size:.85rem; margin:0 0 1rem; padding:.65rem .9rem; border-radius:var(--ss-radius-sm); }
.ss-alert-error{ color:var(--ss-error); background:#FCEBEB; }
.ss-alert-info{ color:var(--ss-success); background:#EAF3DE; }

.ss-code-display{
  background:var(--ss-chalk);
  border-radius:var(--ss-radius-sm);
  box-shadow:var(--ss-shadow-sm);
  padding:.9rem 1rem;
  margin-bottom:1rem;
}
.ss-code-display p{ margin:0 0 .5rem; font-size:.85rem; color:var(--ss-muted); }
.ss-code-row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.ss-code-row code{
  font-family:ui-monospace, 'SF Mono', Consolas, monospace;
  font-size:1.05rem; letter-spacing:.03em;
  background:#fff; border:1px solid var(--ss-paper-line);
  padding:.35rem .6rem; border-radius:var(--ss-radius-sm);
}
.ss-code-row button{ font-size:.78rem; padding:.35rem .7rem; }

.ss-list{ list-style:none; margin:0; padding:0; }
.ss-list-row{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:.8rem .9rem;
  border-radius:var(--ss-radius-sm);
  font-size:.9rem;
}
.ss-list-row:hover{ background:var(--ss-paper); }
.ss-list-row-main{ display:flex; flex-direction:column; gap:.2rem; }
.ss-list-row-meta{ font-size:.78rem; color:var(--ss-muted); }
.ss-list-row-actions{ display:flex; gap:.4rem; flex-shrink:0; align-items:center; }

.ss-badge{ display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.ss-badge-active{ background:#EAF3DE; color:var(--ss-success); }
.ss-badge-pending{ background:var(--ss-ochre-soft); color:var(--ss-ochre-deep); }
.ss-badge-revoked{ background:var(--ss-paper); color:var(--ss-muted); }

/* ---- Barre de menu du haut, rétractable ----
   Chrome clair (fond surface + bordure), comme le tableau de bord
   Akkhor, plutôt que la barre sombre en dégradé de la V1. */
.ss-topbar{
  background:#fff;
  color:var(--ss-ink);
  border:1px solid var(--ss-paper-line);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.7rem 1.25rem;
  border-radius:var(--ss-radius);
  box-shadow:var(--ss-shadow-sm);
  flex-wrap:wrap;
}
.ss-topbar-brand{ font-family:var(--ss-font-display); font-weight:500; letter-spacing:-.01em; font-size:1.1rem; white-space:nowrap; color:var(--ss-ink); }
.ss-topbar-toggle{
  display:none;
  background:var(--ss-paper); border:none; color:var(--ss-ink);
  width:34px; height:34px; border-radius:999px; cursor:pointer; font-size:1rem;
}
.ss-topbar-links{
  display:flex; gap:.4rem; flex-wrap:wrap; align-items:center;
  transition:opacity .15s ease;
}
.ss-topbar-links.collapsed{ display:none; }
.ss-topbar-links button,
.ss-topbar-links a{
  background:transparent; border:none; color:var(--ss-muted); text-decoration:none;
  font-family:inherit; font-size:.85rem; font-weight:500; padding:.45rem .95rem;
  border-radius:999px; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.ss-topbar-links button:hover:not(.active),
.ss-topbar-links a:hover:not(.active){ background:var(--ss-paper); color:var(--ss-ink); }
.ss-topbar-links button.active,
.ss-topbar-links a.active{ background:#E8F0FB; color:var(--ss-slate); font-weight:700; }
.ss-topbar-right{ display:flex; align-items:center; gap:.5rem; }
.ss-topbar-icon-btn{
  background:#fff; border:1px solid var(--ss-paper-line); color:var(--ss-muted);
  width:36px; height:36px; border-radius:var(--ss-radius-sm); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
  transition:background .15s ease, color .15s ease;
}
.ss-topbar-icon-btn:hover{ background:var(--ss-paper); color:var(--ss-ink); }

@media (max-width:760px){
  .ss-topbar-toggle{ display:flex; align-items:center; justify-content:center; }
  .ss-topbar-links{
    order:3; width:100%;
    flex-direction:column; align-items:stretch;
    padding-top:.5rem; border-top:1px solid var(--ss-paper-line); margin-top:.5rem;
  }
  .ss-topbar-links button,
  .ss-topbar-links a{ border-radius:var(--ss-radius-sm); text-align:left; }
}

/* ---- Menu vertical rétractable (survol pour déplier), avec sous-menus ---- */
/* Remplace .ss-topbar comme navigation principale recommandée depuis la
   révision 3 ; .ss-topbar reste disponible si une appli préfère un menu
   du haut. Rail d'icônes par défaut (64px), déplié au survol (220px). */
.ss-sidebar{
  position:fixed; top:1rem; left:1rem; bottom:1rem;
  width:64px;
  background:#fff;
  border:1px solid var(--ss-paper-line);
  border-radius:var(--ss-radius);
  box-shadow:var(--ss-shadow-sm);
  display:flex; flex-direction:column;
  padding:1rem .5rem;
  gap:.2rem;
  overflow:hidden;
  transition:width .18s ease, background .2s ease, border-color .2s ease;
  z-index:50;
}
.ss-sidebar.expanded{ width:230px; overflow:visible; }
.ss-sidebar-scroll{ display:flex; flex-direction:column; gap:.2rem; flex:1; overflow-y:auto; }
.ss-sidebar-bottom{ display:flex; flex-direction:column; gap:.2rem; border-top:1px solid var(--ss-paper-line); padding-top:.6rem; margin-top:.4rem; }

.ss-sidebar-item{
  display:flex; align-items:center; gap:.8rem;
  padding:.6rem; border-radius:var(--ss-radius-sm);
  color:var(--ss-muted); background:none; border:none; cursor:pointer;
  white-space:nowrap; width:100%; text-align:left;
  font-family:var(--ss-font-body); font-size:.85rem; font-weight:500;
}
.ss-sidebar-item svg{ flex-shrink:0; width:20px; height:20px; }
.ss-sidebar-item .ss-sidebar-label{
  opacity:0; transition:opacity .12s ease; overflow:hidden;
}
.ss-sidebar.expanded .ss-sidebar-label{ opacity:1; }
.ss-sidebar-item:hover{ background:var(--ss-paper); color:var(--ss-ink); }
.ss-sidebar-item.active{ background:#E8F0FB; color:var(--ss-slate); font-weight:700; }

.ss-sidebar-group-toggle{ position:relative; }
.ss-sidebar-group-toggle .chevron{ margin-left:auto; transition:transform .15s ease; opacity:0; }
.ss-sidebar.expanded .ss-sidebar-group-toggle .chevron{ opacity:1; }
.ss-sidebar-group.open .ss-sidebar-group-toggle .chevron{ transform:rotate(90deg); }

.ss-sidebar-submenu{
  display:none; flex-direction:column; gap:.1rem;
  padding-left:2rem; margin-top:.1rem;
}
.ss-sidebar.expanded .ss-sidebar-group.open .ss-sidebar-submenu{ display:flex; }
.ss-sidebar-submenu .ss-sidebar-item{ font-size:.82rem; padding:.5rem .6rem; }

.ss-main-with-sidebar{ margin-left:88px; }
@media (max-width:760px){
  .ss-sidebar{ width:56px; }
  .ss-sidebar.expanded{ width:220px; }
  .ss-main-with-sidebar{ margin-left:76px; }
}

/* ---- Mode sombre (bascule via [data-ss-theme="dark"] sur <html>) ---- */
[data-ss-theme="dark"]{
  --ss-paper:      #101926;
  --ss-paper-line: rgba(255,255,255,.08);
  --ss-ink:        #DEE8F2;
  --ss-chalk:      #1E2D40;
  --ss-slate:      #4E7BC7;
  --ss-slate-soft: #6C97D6;
  --ss-muted:      #7A8EA3;
}
[data-ss-theme="dark"] .ss-card,
[data-ss-theme="dark"] .ss-modal-box{ background:#162030; }
[data-ss-theme="dark"] .ss-field input,
[data-ss-theme="dark"] .ss-field select{ color:var(--ss-ink); border-color:var(--ss-paper-line); }
[data-ss-theme="dark"] .ss-field input:focus,
[data-ss-theme="dark"] .ss-field select:focus{ background:#162030; }
[data-ss-theme="dark"] .ss-code-row code{ background:#162030; border-color:var(--ss-paper-line); }
[data-ss-theme="dark"] .ss-btn-secondary{ background:#162030; color:var(--ss-ink); }
[data-ss-theme="dark"] .ss-fsize-btns button{ background:#162030; color:var(--ss-ink); border-color:var(--ss-paper-line); }
[data-ss-theme="dark"] .ss-mode-toggle{ background:#0C1622; }
[data-ss-theme="dark"] .ss-topbar,
[data-ss-theme="dark"] .ss-sidebar{ background:#162030; border-color:var(--ss-paper-line); }
[data-ss-theme="dark"] .ss-topbar-icon-btn{ background:#162030; border-color:var(--ss-paper-line); color:var(--ss-muted); }
[data-ss-theme="dark"] .ss-topbar-links a.active,
[data-ss-theme="dark"] .ss-topbar-links button.active,
[data-ss-theme="dark"] .ss-sidebar-item.active{ background:rgba(90,130,190,.20); color:var(--ss-slate); }
[data-ss-theme="dark"] .ss-lang-btn{ background:#162030; color:var(--ss-ink); }
[data-ss-theme="dark"] .ss-lang-code{ background:#0C1622; }

/* ---- Taille de texte ---- */
/* La quasi-totalité du kit est en rem (relatif à la racine <html>), donc
   l'échelle s'applique en changeant directement html.style.fontSize en
   JS (voir ssApplyFsizeIndex) — un facteur posé sur un simple wrapper
   en em n'a aucun effet sur du rem, c'est le bug corrigé ici. */

/* ---- Modale générique + panneau Apparence ---- */
.ss-modal-overlay{
  position:fixed; inset:0; background:rgba(15,20,32,.45);
  display:none; align-items:center; justify-content:center;
  z-index:200; padding:1rem;
}
.ss-modal-overlay.open{ display:flex; }
.ss-modal-box{
  background:#fff; border-radius:var(--ss-radius); box-shadow:var(--ss-shadow);
  padding:1.75rem; width:100%; max-width:360px;
}
.ss-modal-box h2{ font-size:1.15rem; font-weight:500; margin-bottom:1.2rem; }

.ss-appearance-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 0; border-bottom:1px solid var(--ss-paper-line);
  font-size:.88rem;
}
.ss-appearance-row:last-of-type{ border-bottom:none; }

.ss-mode-toggle{ display:flex; gap:.25rem; background:var(--ss-paper); border-radius:999px; padding:.2rem; }
.ss-mode-toggle button{
  border:none; background:none; width:34px; height:34px; border-radius:999px;
  cursor:pointer; font-size:.95rem; color:var(--ss-muted); display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.ss-mode-toggle button:hover:not(.active){ background:#fff; color:var(--ss-ink); }
[data-ss-theme="dark"] .ss-mode-toggle button:hover:not(.active){ background:#162030; color:var(--ss-ink); }
.ss-mode-toggle button.active{ background:var(--ss-gradient-primary); color:#fff; }

.ss-swatches{ display:flex; gap:.5rem; flex-wrap:wrap; max-width:190px; justify-content:flex-end; }
.ss-swatch{ width:26px; height:26px; border-radius:999px; border:2px solid transparent; cursor:pointer; padding:0; transition:transform .1s, border-color .15s; }
.ss-swatch:hover{ transform:scale(1.12); }
.ss-swatch.active{ border-color:var(--ss-ink); }

.ss-fsize-btns{ display:flex; align-items:center; gap:.6rem; }
.ss-fsize-btns button{
  width:30px; height:30px; border-radius:var(--ss-radius-sm); border:1px solid var(--ss-paper-line);
  background:#fff; cursor:pointer; font-size:.78rem; color:var(--ss-ink); transition:background .15s, border-color .15s;
}
.ss-fsize-btns button:hover{ background:var(--ss-paper); border-color:var(--ss-slate); }
[data-ss-theme="dark"] .ss-fsize-btns button:hover{ background:#0C1622; }
.ss-fsize-label{ font-size:.85rem; min-width:1.4rem; text-align:center; }

.ss-modal-actions{ margin-top:1.2rem; display:flex; justify-content:flex-end; }

.ss-intensity-row input[type="range"]{
  width:120px; accent-color:var(--ss-ochre); cursor:pointer;
}

/* ---- Sélecteur de langue (data-ss-lang, géré par ss-i18n.js) ---- */
/* Même famille visuelle que .ss-mode-toggle / .ss-swatches, pensée pour
   vivre dans une modale générique (.ss-modal-box), comme le panneau
   Apparence — même bouton .ss-topbar-icon-btn pour l'ouvrir. */
.ss-lang-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
}
.ss-lang-btn{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .7rem;
  border:1px solid var(--ss-paper-line); border-radius:var(--ss-radius-sm);
  background:#fff; cursor:pointer;
  font-family:inherit; font-size:.85rem; color:var(--ss-ink);
  text-align:start;
  transition:border-color .15s ease, background .15s ease;
}
.ss-lang-btn:hover{ border-color:var(--ss-slate); }
.ss-lang-btn.active{ border-color:var(--ss-slate); background:#E8F0FB; }
.ss-lang-code{
  width:30px; height:22px; border-radius:6px; flex-shrink:0;
  background:var(--ss-paper); color:var(--ss-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:700; letter-spacing:.02em;
}
.ss-lang-btn.active .ss-lang-code{ background:var(--ss-slate); color:#fff; }
.ss-lang-btn .ss-lang-check{ margin-inline-start:auto; opacity:0; flex-shrink:0; }
.ss-lang-btn.active .ss-lang-check{ opacity:1; color:var(--ss-slate); }



/* ---- Support RTL (bascule automatique via dir="rtl" sur <html>, posé
   par ss-i18n.js) : propriétés physiques -> logiques là où le kit fixait
   un côté en dur. Le reste (flex, texte, formulaires) suit dir="" tout
   seul, sans rien à faire ici. ---- */
.ss-sidebar{ inset-inline-start:1rem; inset-inline-end:auto; }
.ss-main-with-sidebar{ margin-inline-start:88px; margin-inline-end:0; }
@media (max-width:760px){
  .ss-main-with-sidebar{ margin-inline-start:76px; margin-inline-end:0; }
}
.ss-sidebar-submenu{ padding-inline-start:2rem; padding-inline-end:0; }
.ss-sidebar-group-toggle .chevron{ margin-inline-start:auto; }
[dir="rtl"] .ss-sidebar-group-toggle .chevron{ transform:scaleX(-1); }
[dir="rtl"] .ss-sidebar.expanded .ss-sidebar-group.open .ss-sidebar-group-toggle .chevron{ transform:scaleX(-1) rotate(90deg); }
@media (max-width:760px){
  .ss-topbar-links{ text-align:start; }
}

/* =====================================================================
   ---- "Shell" applicatif façon Akkhor (révision 3) ----
   Menu latéral repliable AU CLIC (pas au survol) + bandeau du haut
   pleine largeur, calqués sur la maquette akkhor-admin.html fournie.
   Composants distincts de .ss-sidebar/.ss-topbar (V1, réservés aux
   écrans de connexion à carte unique) : les apps avec un vrai tableau
   de bord utilisent .ss-shell-*.
   ===================================================================== */
.ss-shell{ height:100vh; display:flex; overflow:hidden; background:var(--ss-paper); }

/* ---- Colonne latérale ----
   Thème Skolaide : toujours en navy foncé, INDÉPENDAMMENT du mode
   clair/sombre choisi pour le reste de l'interface (comme dans l'app
   d'origine -- la sidebar est une couleur de marque, pas un fond
   "surface"). C'est le principal écart structurel avec Akkhor, où la
   sidebar suivait --ss-paper/--ss-chalk selon le thème. */
.ss-shell-sidebar{
  flex-shrink:0; width:266px;
  display:flex; flex-direction:column;
  background:#0D2140; border-inline-end:1px solid rgba(255,255,255,.08);
  transition:width .2s ease;
}
.ss-shell-sidebar.ss-collapsed{ width:80px; }
/* Aperçu au survol quand repliée -- élargit temporairement sans changer
   l'état "épinglé" mémorisé (celui-ci reste piloté par le bouton
   data-ss-shell-collapse existant, ici juste réutilisé comme épingle). */
.ss-shell-sidebar.ss-collapsed:hover{ width:266px; }

.ss-shell-brand{
  display:flex; align-items:center; gap:.6rem;
  height:72px; padding-inline:1.25rem; flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.ss-shell-brand-icon{
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  background:var(--ss-gradient-accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.28);
}
.ss-shell-brand-icon svg{ width:22px; height:22px; color:#fff; }
.ss-shell-brand-name{ font-family:var(--ss-font-display); font-size:1.05rem; font-weight:600; letter-spacing:-.01em; color:#fff; white-space:nowrap; overflow:hidden; flex:1; }
.ss-shell-brand-name em{ color:var(--ss-ochre); font-style:normal; }
.ss-shell-sidebar.ss-collapsed .ss-shell-brand-name{ display:none; }
.ss-shell-sidebar.ss-collapsed:hover .ss-shell-brand-name{ display:block; }

/* Bouton "épingle" -- réutilise data-ss-shell-collapse (même logique déjà
   câblée dans skolsuite-ui.js que le bouton de la topbar) : visible en
   permanence une fois la sidebar élargie (survol ou épinglée), teinté en
   accent quand réellement épinglée (pas juste survolée). */
.ss-shell-pin-btn{
  width:24px; height:24px; border-radius:5px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:rgba(255,255,255,.45); flex-shrink:0; opacity:0; pointer-events:none;
  transition:opacity .15s, background .15s, color .15s;
}
.ss-shell-pin-btn svg{ width:13px; height:13px; }
.ss-shell-sidebar.ss-collapsed:hover .ss-shell-pin-btn{ opacity:1; pointer-events:all; }
.ss-shell-sidebar:not(.ss-collapsed) .ss-shell-pin-btn{ opacity:1; pointer-events:all; color:var(--ss-ochre); }
.ss-shell-pin-btn:hover{ background:rgba(255,255,255,.14); color:#fff; }

.ss-shell-navscroll{ flex:1; overflow-y:auto; padding:.5rem .75rem 1rem; }
.ss-shell-group-label{
  font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.3); padding:.9rem .6rem .4rem; min-height:.9rem;
}
.ss-shell-sidebar.ss-collapsed .ss-shell-group-label{ opacity:0; }
.ss-shell-sidebar.ss-collapsed:hover .ss-shell-group-label{ opacity:1; }

.ss-shell-nav{ display:flex; flex-direction:column; gap:.15rem; }
.ss-shell-nav a, .ss-shell-nav button{
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .65rem; border-radius:var(--ss-radius-sm); border-inline-start:3px solid transparent;
  font-family:var(--ss-font-body); font-size:.85rem; font-weight:500;
  color:rgba(255,255,255,.55); background:none; cursor:pointer; text-decoration:none;
  text-align:start; width:100%; white-space:nowrap;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.ss-shell-nav a svg, .ss-shell-nav button svg{ width:19px; height:19px; flex-shrink:0; }
.ss-shell-sidebar.ss-collapsed .ss-shell-nav a, .ss-shell-sidebar.ss-collapsed .ss-shell-nav button{ justify-content:center; }
.ss-shell-sidebar.ss-collapsed:hover .ss-shell-nav a, .ss-shell-sidebar.ss-collapsed:hover .ss-shell-nav button{ justify-content:flex-start; }
.ss-shell-nav-label{ overflow:hidden; }
.ss-shell-sidebar.ss-collapsed .ss-shell-nav-label{ display:none; }
.ss-shell-sidebar.ss-collapsed:hover .ss-shell-nav-label{ display:inline; }
.ss-shell-nav a:hover, .ss-shell-nav button:hover{ background:rgba(255,255,255,.06); color:rgba(255,255,255,.85); }
.ss-shell-nav a.active, .ss-shell-nav button.active{ background:rgba(255,255,255,.08); color:#fff; font-weight:600; border-inline-start-color:var(--ss-ochre); }

.ss-shell-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:.75rem; flex-shrink:0; }

/* ---- Colonne principale + bandeau du haut ---- */
.ss-shell-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ss-shell-topbar{
  height:72px; flex-shrink:0; background:#fff; border-bottom:1px solid var(--ss-paper-line);
  display:flex; align-items:center; gap:.85rem; padding-inline:1.35rem;
  transition:background .2s ease, border-color .2s ease;
}
.ss-shell-topbar .ss-spacer{ flex:1; }
.ss-shell-collapse-btn{
  width:40px; height:40px; border-radius:var(--ss-radius-sm); border:1px solid var(--ss-paper-line);
  background:#fff; color:var(--ss-muted); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:background .15s ease, color .15s ease;
}
.ss-shell-collapse-btn:hover{ background:var(--ss-paper); color:var(--ss-ink); }
.ss-shell-topbar-title{ font-family:var(--ss-font-display); font-weight:500; font-size:1.02rem; color:var(--ss-ink); white-space:nowrap; }
.ss-shell-user{ font-size:.82rem; color:var(--ss-muted); white-space:nowrap; }
.ss-shell-user strong{ color:var(--ss-ink); font-weight:700; }

.ss-shell-content{ flex:1; overflow-y:auto; padding:1.75rem 2rem 2.5rem; }

[data-ss-theme="dark"] .ss-shell{ background:var(--ss-paper); }
[data-ss-theme="dark"] .ss-shell-topbar,
[data-ss-theme="dark"] .ss-shell-collapse-btn{ background:#162030; border-color:var(--ss-paper-line); }

@media (max-width:760px){
  .ss-shell-sidebar{ position:fixed; top:0; bottom:0; inset-inline-start:0; z-index:80; width:80px; }
  .ss-shell-sidebar.ss-collapsed{ width:0; border:none; overflow:hidden; }
  .ss-shell-main{ margin-inline-start:80px; }
  .ss-shell-content{ padding:1.1rem 1rem 2rem; }
}

/* RTL */
.ss-shell-sidebar{ border-inline-end:1px solid rgba(255,255,255,.08); border-inline-start:none; }

/* =====================================================================
   ---- Bouton + menu Profil (topbar) ----
   Absent du thème Akkhor d'origine ; porté depuis l'app Skolaide pour
   une reprise fidèle. Réutilise les modales Langue/Apparence déjà
   câblées (data-ss-modal-open) plutôt que de dupliquer leur logique.
   ===================================================================== */
.ss-avatar-btn{
  width:34px; height:34px; border-radius:50%; background:#E8F0FB; color:#0C447C;
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700;
  cursor:pointer; border:2px solid transparent; flex-shrink:0; font-family:var(--ss-font-display);
  transition:border-color .15s;
}
.ss-avatar-btn:hover, .ss-avatar-btn.open{ border-color:var(--ss-ochre); }
[data-ss-theme="dark"] .ss-avatar-btn{ background:var(--ss-slate); color:#DCE8FB; }

.ss-avatar-menu{
  position:fixed; top:64px; inset-inline-end:1.35rem; width:230px;
  background:#fff; border:1px solid var(--ss-paper-line); border-radius:var(--ss-radius);
  box-shadow:var(--ss-shadow); z-index:210; display:none;
}
.ss-avatar-menu.open{ display:block; }
[data-ss-theme="dark"] .ss-avatar-menu{ background:#162030; }
.ss-ava-head{ padding:.85rem 1rem; border-bottom:1px solid var(--ss-paper-line); display:flex; align-items:center; gap:.65rem; }
.ss-ava-av{
  width:36px; height:36px; border-radius:50%; background:#E8F0FB; color:#0C447C;
  display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0;
  font-family:var(--ss-font-display);
}
[data-ss-theme="dark"] .ss-ava-av{ background:var(--ss-slate); color:#DCE8FB; }
.ss-ava-name{ font-size:.85rem; font-weight:700; color:var(--ss-ink); }
.ss-ava-role{ font-size:.72rem; color:var(--ss-muted); }
.ss-ava-divider{ height:1px; background:var(--ss-paper-line); margin:.25rem 0; }
.ss-ava-item{
  display:flex; align-items:center; gap:.65rem; padding:.6rem 1rem; font-size:.85rem; color:var(--ss-ink);
  cursor:pointer; text-decoration:none; background:none; border:none; width:100%; text-align:start;
  font-family:inherit; transition:background .12s;
}
.ss-ava-item:hover{ background:var(--ss-paper); }
.ss-ava-item svg{ width:16px; height:16px; color:var(--ss-muted); flex-shrink:0; }
.ss-ava-item.danger{ color:var(--ss-error); }
.ss-ava-item.danger svg{ color:var(--ss-error); }

/* =====================================================================
   ---- Notifications "toast" (bas de l'écran, transitoires) ----
   Complètent (ne remplacent pas) les .ss-alert dans le contenu : pour
   les actions déclenchées depuis la topbar/sidebar, hors du flux de la
   page (ex. déconnexion, action rapide), un simple bandeau inline n'a
   pas d'endroit naturel où s'afficher.
   ===================================================================== */
.ss-toast{
  position:fixed; bottom:1.25rem; inset-inline-end:1.25rem; z-index:300;
  background:var(--ss-ink); color:#fff; padding:.75rem 1.1rem; border-radius:var(--ss-radius-sm);
  font-size:.85rem; box-shadow:var(--ss-shadow); display:flex; align-items:center; gap:.6rem;
  opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s, transform .2s;
}
.ss-toast.show{ opacity:1; transform:translateY(0); }
.ss-toast.success{ background:var(--ss-success); }
.ss-toast.error{ background:var(--ss-error); }

/* =====================================================================
   ---- Petits boutons d'action de ligne (tableaux) ----
   4 nuances sémantiques distinctes, comme les .btn-xs de l'app
   Skolaide (Modifier=primaire, action secondaire "à part"=ambre,
   neutre=action réversible, Supprimer=danger) plutôt que de tout
   ramener à 2 couleurs.
   ===================================================================== */
.ss-btn-xs{
  display:inline-flex; align-items:center; gap:.25rem; padding:.28rem .55rem; border-radius:5px;
  font-size:.72rem; font-weight:600; cursor:pointer; border:1px solid var(--ss-paper-line);
  background:#fff; color:var(--ss-ink); font-family:inherit; transition:all .15s; white-space:nowrap;
  text-decoration:none;
}
[data-ss-theme="dark"] .ss-btn-xs{ background:#162030; }
.ss-btn-xs:hover{ background:var(--ss-paper); }
[data-ss-theme="dark"] .ss-btn-xs:hover{ background:#1E2D40; }
.ss-btn-xs.primary{ background:var(--ss-slate); color:#fff; border-color:var(--ss-slate); }
.ss-btn-xs.primary:hover{ filter:brightness(1.1); }
.ss-btn-xs.amber{ background:var(--ss-ochre); color:#fff; border-color:var(--ss-ochre); }
.ss-btn-xs.amber:hover{ filter:brightness(1.1); }
.ss-btn-xs.danger{ border-color:var(--ss-error); color:var(--ss-error); }
.ss-btn-xs.danger:hover{ background:var(--ss-error); color:#fff; }

/* =====================================================================
   ---- Encadrés d'info colorés (au lieu de simples bordures grises) ----
   ===================================================================== */
.ss-tip-box{ background:#EAF3DE; border:1px solid var(--ss-success); border-radius:var(--ss-radius-sm); padding:.7rem .9rem; font-size:.8rem; color:var(--ss-ink); line-height:1.6; margin:.5rem 0; }
.ss-warn-box{ background:var(--ss-ochre-soft); border:1px solid var(--ss-ochre); border-radius:var(--ss-radius-sm); padding:.7rem .9rem; font-size:.8rem; color:var(--ss-ink); line-height:1.6; margin:.5rem 0; }
[data-ss-theme="dark"] .ss-tip-box{ background:rgba(26,135,84,.15); }
[data-ss-theme="dark"] .ss-warn-box{ background:rgba(212,137,26,.15); }