/* ==========================================================================
   Comptes partagés multi-écoles (03/11/2026) :
   - /login/etablissement : « Choisir votre établissement » ;
   - sélecteur « Changer d'établissement » (barre du haut) ;
   - page Utilisateurs : « Ajouter un utilisateur existant » et
     « Membres d'autres établissements ».
   Couleurs : uniquement les variables du thème (app.css :root), teintes
   dérivées par color-mix avec une valeur de repli avant chaque color-mix.
   Cibles cliquables : 44 px (36 px pour les boutons compacts de tableau).
   Préfixe de classe : csp-.
   ========================================================================== */

.csp, .csp-overlay, .csp-etab, .csp-switch {
  --csp-surface: var(--card);
  --csp-line: var(--border);
  --csp-ink: var(--text);
  --csp-soft: var(--muted);
  --csp-col: var(--bg);
}

.csp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- boutons ---------- */
.csp-btn { min-height: 44px; padding: 0 14px; border-radius: var(--radius-md, 8px); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--primary); background: var(--csp-surface); color: var(--primary); white-space: nowrap; }
.csp-btn:hover { background: var(--csp-col); }
.csp-btn-primary { background: var(--primary); color: var(--csp-surface); border-color: var(--primary); }
.csp-btn-primary:hover { background: var(--primary-dark); }
.csp-btn-danger { background: var(--danger); color: var(--csp-surface); border-color: var(--danger); }
.csp-btn-danger:hover { background: var(--danger); filter: brightness(.92); }
.csp-btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.csp-btn-ghost { border-color: var(--csp-line); color: var(--csp-ink); }
.csp-btn-sm { min-height: 36px; padding: 0 10px; font-size: 13px; }
.csp-btn[disabled] { opacity: .55; cursor: not-allowed; }
.csp-btn:focus-visible, .csp-etab-card:focus-visible, .csp-switch-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- section « Membres d'autres établissements » ---------- */
.csp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.csp-head p { margin: 4px 0 0; color: var(--csp-soft); font-size: 13px; max-width: 760px; line-height: 1.45; }
.csp-table-wrap { overflow-x: auto; border: 1px solid var(--csp-line); border-radius: var(--radius-lg, 12px); background: var(--csp-surface); margin-top: 12px; }
.csp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.csp-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--csp-soft); padding: 10px 12px; border-bottom: 1px solid var(--csp-line); background: var(--csp-col); white-space: nowrap; }
.csp-table td { padding: 10px 12px; border-bottom: 1px solid var(--csp-line); vertical-align: middle; }
.csp-table tr:last-child td { border-bottom: 0; }
.csp-main { font-weight: 600; }
.csp-meta { color: var(--csp-soft); font-size: 12.5px; }
.csp-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.csp-empty { padding: 22px; text-align: center; color: var(--csp-soft); }
.csp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid currentColor; white-space: nowrap; }
.csp-badge-ok { color: var(--success); }
.csp-badge-off { color: var(--csp-soft); }

/* ---------- champs ---------- */
.csp-field { display: flex; flex-direction: column; gap: 4px; }
.csp-field label { font-weight: 600; font-size: 13.5px; }
.csp-field input, .csp-field select, .csp-field textarea { min-height: 44px; padding: 8px 10px; border: 1px solid var(--csp-line); border-radius: var(--radius-md, 8px); font: inherit; background: var(--csp-surface); color: var(--csp-ink); }
.csp-field input:focus-visible, .csp-field select:focus-visible, .csp-field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.csp-inline { display: flex; gap: 8px; align-items: stretch; }
.csp-inline input { flex: 1; min-width: 0; }
.csp-hint { font-size: 12px; color: var(--csp-soft); line-height: 1.4; }
.csp-req { color: var(--danger); }
.csp-check { display: flex; gap: 8px; align-items: flex-start; min-height: 32px; font-size: 13.5px; }
.csp-check input { width: 20px; height: 20px; margin-top: 1px; flex: none; }

.csp-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md, 8px); border: 1px solid var(--csp-line); background: var(--csp-col); font-size: 13.5px; line-height: 1.45; }
.csp-alert-danger { border-color: var(--danger); background: var(--csp-col); background: color-mix(in srgb, var(--danger) 7%, var(--csp-surface)); }
.csp-alert-info { border-color: var(--info); background: var(--csp-col); background: color-mix(in srgb, var(--info) 6%, var(--csp-surface)); }
.csp-alert-success { border-color: var(--success); background: var(--csp-col); background: color-mix(in srgb, var(--success) 7%, var(--csp-surface)); }
.csp-found { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--success); border-radius: var(--radius-md, 8px); background: var(--csp-col); background: color-mix(in srgb, var(--success) 6%, var(--csp-surface)); }
.csp-found strong { font-size: 15px; }

/* ---------- modales ---------- */
.csp-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 16px; }
.csp-modal { background: var(--csp-surface); color: var(--csp-ink); border-radius: var(--radius-lg, 12px); width: 100%; max-width: 580px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--shadow-modal); outline: none; }
.csp-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--csp-line); }
.csp-modal-head h2 { margin: 0; font-size: 17px; flex: 1; color: var(--primary-dark); }
.csp-modal-close { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--csp-soft); cursor: pointer; border-radius: var(--radius-md, 8px); }
.csp-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.csp-modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--csp-line); flex-wrap: wrap; }

/* ---------- sélecteur « Changer d'établissement » (barre du haut) ---------- */
.csp-switch { position: relative; }
.csp-switch-btn { min-height: 44px; padding: 0 12px; border: 1px solid var(--csp-line); border-radius: var(--radius-md, 8px); background: var(--csp-surface); color: var(--csp-ink); font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.csp-switch-btn:hover { border-color: var(--primary); color: var(--primary); }
.csp-switch-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.csp-switch-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1200; width: 320px; max-width: calc(100vw - 24px); background: var(--csp-surface, var(--card)); color: var(--csp-ink, var(--text)); border: 1px solid var(--csp-line); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-modal); padding: 8px; }
.csp-switch-pop h3 { margin: 4px 8px 8px; font-size: 13px; color: var(--csp-soft); font-weight: 600; }
.csp-switch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.csp-switch-item { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-md, 8px); background: transparent; color: var(--csp-ink); font: inherit; text-align: left; cursor: pointer; }
.csp-switch-item:hover { background: var(--csp-col); border-color: var(--csp-line); }
.csp-switch-item[aria-current="true"] { border-color: var(--primary); cursor: default; }
.csp-switch-txt { display: flex; flex-direction: column; min-width: 0; }
.csp-switch-txt strong { font-size: 13.5px; }
.csp-switch-txt span { font-size: 12px; color: var(--csp-soft); }
.csp-switch-form { margin: 0; }

/* ---------- voile ---------- */
.csp-busy { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; }
.csp-busy[hidden] { display: none; }
.csp-busy-card { background: var(--card); color: var(--text); border-radius: var(--radius-lg, 12px); padding: 24px 32px; text-align: center; min-width: 240px; box-shadow: var(--shadow-modal); font-weight: 600; }
.csp-spinner { width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%; border: 4px solid var(--border); border-top-color: var(--primary); animation: csp-spin .8s linear infinite; }
@keyframes csp-spin { to { transform: rotate(360deg); } }

/* ---------- /login/etablissement ---------- */
.csp-etab-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.csp-etab-card { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--csp-line); border-radius: var(--radius-lg, 12px); background: var(--csp-surface); color: var(--csp-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.csp-etab-card:hover { border-color: var(--accent); box-shadow: var(--shadow-rest); }
.csp-etab-card[disabled] { opacity: .6; cursor: wait; }
.csp-etab-ic { flex: none; }
.csp-etab-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.csp-etab-txt strong { font-size: 14.5px; }
.csp-etab-txt span { font-size: 12.5px; color: var(--csp-soft); }
.csp-etab-tag { flex: none; font-size: 11.5px; font-weight: 700; color: var(--primary); border: 1px solid var(--primary); border-radius: 999px; padding: 2px 8px; }

@media (max-width: 720px) {
  .csp-actions { justify-content: flex-start; }
  .csp-inline { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .csp-spinner { animation: none; }
}