/**
 * app.css — mise en page propre à ce squelette. Les tokens et
 * composants viennent de /ui/v1/skolsuite-ui.css, chargé avant ce
 * fichier partout où il est utilisé.
 */
body { margin: 0; background: var(--ss-paper); }
.ss-wrap { min-height: 100vh; display: flex; justify-content: center; padding: 1.5rem; }
.ss-wrap-inner { width: 100%; max-width: 420px; }
.ss-card h2 { font-size: 1.05rem; font-weight: 500; margin: 1.25rem 0 .6rem; }
.ss-card ul, .ss-card ol { padding-left: 1.2rem; font-size: .9rem; line-height: 1.6; }
.ss-card li { margin-bottom: .3rem; }

/**
 * Ce qui suit N'EST PAS dans le kit partagé (/ui/v1/skolsuite-ui.css) --
 * ce sont des extensions locales à CETTE appli, développées pour
 * login.skolsuite.net puis reprises ici en exemple. Une nouvelle appli
 * peut les copier telles quelles ou les adapter -- voir docs/THEME_GUIDE.md
 * pour le détail de chaque classe et pourquoi elle existe.
 */

/* Tableaux -- zébrures, alignement, boutons icône avec info-bulle */
.ss-table { width: 100%; border-collapse: collapse; margin-bottom: .9rem; font-size: .85rem; }
.ss-table th, .ss-table td { padding: .5rem .7rem; text-align: start; border-bottom: 1px solid var(--ss-paper-line); }
.ss-table th { font-weight: 600; color: var(--ss-muted); }
.ss-table tbody tr:nth-child(even) { background: var(--ss-paper); }
[data-ss-theme="dark"] .ss-table tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }
.ss-table td.ss-td-actions { text-align: end; white-space: nowrap; }
.ss-table th.ss-th-actions { text-align: end; }
.ss-table td.ss-td-center, .ss-table th.ss-th-center { text-align: center; }

.ss-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; margin-inline-start: .25rem;
  border: 1px solid var(--ss-paper-line); border-radius: var(--ss-radius-sm);
  background: #fff; color: var(--ss-ink); cursor: pointer;
  transition: background .15s, border-color .15s;
}
[data-ss-theme="dark"] .ss-icon-btn { background: #131C2E; }
.ss-icon-btn:hover { background: var(--ss-paper); border-color: var(--ss-ochre); }
.ss-icon-btn svg { width: 15px; height: 15px; }
.ss-icon-btn.ss-icon-danger { color: #DC2626; }
.ss-icon-btn.ss-icon-danger:hover { background: #FEE2E2; border-color: #DC2626; }
.ss-icon-btn.ss-icon-success { color: #16A34A; }
.ss-icon-btn.ss-icon-success:hover { background: #DCFCE7; border-color: #16A34A; }
.ss-icon-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Formulaires multilingues -- une petite grille FR/EN/DE/ES/AR sous un même champ */
.ss-lang-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.ss-lang-item { flex: 1; min-width: 110px; }
.ss-lang-tag { font-size: .7rem; color: var(--ss-muted); display: block; margin-bottom: .2rem; }

/* Grille de cases à cocher (ex. sélection multiple depuis un référentiel) */
.ss-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .4rem .8rem; margin-top: .3rem; }