/**
 * 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; }

/**
 * pages/html2md.php -- outil isolé de conversion HTML -> Markdown.
 * Page normale du menu (pas une popup d'éditeur) : la mise en page
 * réutilise .ss-card/.ss-btn/.ss-alert du kit partagé, et n'ajoute
 * ici que les deux colonnes propres à cet outil.
 */
.ss-h2m-hint { color: var(--ss-muted); font-size: .88rem; margin: -.6rem 0 1.2rem; }
.ss-h2m-footer { color: var(--ss-muted); font-size: .8rem; margin: 1rem 0 0; }
.h2m-shell {
  display: flex; gap: 1px; background: var(--ss-paper-line);
  border: 1px solid var(--ss-paper-line); border-radius: var(--ss-radius-sm);
  overflow: hidden; min-height: 420px;
}
.h2m-col { flex: 1; display: flex; flex-direction: column; background: #fff; min-width: 0; }
[data-ss-theme="dark"] .h2m-col { background: #131C2E; }
.h2m-form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.h2m-urlbar { display: flex; gap: .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--ss-paper-line); background: var(--ss-paper); }
[data-ss-theme="dark"] .h2m-urlbar { background: #101827; }
.h2m-url-input {
  flex: 1; border: 1px solid var(--ss-paper-line); border-radius: var(--ss-radius-sm);
  padding: .4rem .7rem; font-size: .82rem; font-family: inherit; background: #fff; color: var(--ss-ink);
}
[data-ss-theme="dark"] .h2m-url-input { background: #131C2E; color: var(--ss-ink); border-color: var(--ss-paper-line); }
.h2m-url-input:focus { outline: none; border-color: var(--ss-slate); }
.h2m-col-hd {
  display: flex; align-items: center; justify-content: space-between; padding: .5rem .9rem;
  border-bottom: 1px solid var(--ss-paper-line); font-size: .78rem; font-weight: 600; color: var(--ss-muted);
}
.h2m-hint-sm { font-weight: 400; color: var(--ss-muted); font-size: .72rem; }
.h2m-textarea {
  flex: 1; border: 0; padding: .9rem 1rem; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: .82rem; line-height: 1.55; resize: none; outline: none; background: #fff; color: var(--ss-ink);
  min-height: 260px;
}
[data-ss-theme="dark"] .h2m-textarea { background: #131C2E; color: var(--ss-ink); }
.h2m-col-ft { padding: .6rem .8rem; border-top: 1px solid var(--ss-paper-line); display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 760px) {
  .h2m-shell { flex-direction: column; }
}

/* Barre "Nom du projet" + indicateur de quota -- au-dessus des deux colonnes. */
.h2m-projectbar { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .9rem; }
.h2m-project-label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--ss-muted); }
.h2m-project-input {
  border: 1px solid var(--ss-paper-line); border-radius: var(--ss-radius-sm); padding: .4rem .7rem;
  font-size: .85rem; font-family: inherit; background: #fff; color: var(--ss-ink); min-width: 260px;
}
[data-ss-theme="dark"] .h2m-project-input { background: #131C2E; color: var(--ss-ink); border-color: var(--ss-paper-line); }
.h2m-project-input:focus { outline: none; border-color: var(--ss-slate); }
.h2m-quota-indicator {
  margin-inline-start: auto; font-size: .74rem; font-weight: 600; color: var(--ss-muted);
  background: var(--ss-chalk); border-radius: 999px; padding: .2rem .65rem;
}

/* Aperçu du rendu Markdown (zero-md). */
.h2m-preview {
  margin-top: 1rem; border: 1px solid var(--ss-paper-line); border-radius: var(--ss-radius-sm); overflow: hidden;
}
.h2m-preview-body { padding: 1rem 1.2rem; background: #fff; max-height: 480px; overflow-y: auto; }
[data-ss-theme="dark"] .h2m-preview-body { background: #131C2E; }
.h2m-preview zero-md { display: block; }
/* NOTE : zero-md rend dans un Shadow DOM -- une règle CSS d'ici ne peut
   PAS l'atteindre (pas de perçage de frontière shadow sans ::part()).
   Le style du contenu rendu (img max-width, etc.) est injecté via le
   <template data-append><style>...</style></template> présent dans le
   markup de pages/html2md.php -- seule méthode documentée par zero-md. */

/* Sélecteur d'images détectées. */
.h2m-picker { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--ss-paper-line); }
.h2m-picker-hd h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .3rem; }
.h2m-img-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin: .8rem 0;
}
.h2m-img-card {
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  border: 1px solid var(--ss-paper-line); border-radius: var(--ss-radius-sm); padding: .55rem;
  background: var(--ss-paper); cursor: pointer; transition: border-color .15s;
}
[data-ss-theme="dark"] .h2m-img-card { background: #101827; }
.h2m-img-card:has(input:checked),
.h2m-img-card.h2m-checked { border-color: var(--ss-slate); box-shadow: 0 0 0 1px var(--ss-slate) inset; }
.h2m-img-card.h2m-kind-unsupported { opacity: .6; cursor: default; }
.h2m-img-check { position: absolute; top: .45rem; left: .45rem; z-index: 1; }
.h2m-img-check input { width: 16px; height: 16px; cursor: pointer; }
.h2m-img-already {
  display: flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ss-success); color: #fff; font-size: .62rem; font-weight: 700;
}
.h2m-img-thumb-wrap {
  display: flex; align-items: center; justify-content: center; height: 96px; border-radius: 8px;
  background: #fff; overflow: hidden;
}
[data-ss-theme="dark"] .h2m-img-thumb-wrap { background: #131C2E; }
.h2m-img-thumb { max-width: 100%; max-height: 96px; object-fit: contain; }
.h2m-img-thumb-placeholder {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: 1.4rem; color: var(--ss-muted);
}
.h2m-img-card.h2m-img-broken .h2m-img-thumb { display: none; }
.h2m-img-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .7rem; color: var(--ss-muted); }
.h2m-img-dims { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; }
.h2m-img-kind-badge {
  padding: .1rem .4rem; border-radius: 999px; background: var(--ss-chalk); font-weight: 600; text-transform: uppercase;
  font-size: .62rem; letter-spacing: .03em;
}
.h2m-kind-remote .h2m-img-kind-badge { background: var(--ss-ochre-soft); color: var(--ss-ochre-deep); }
.h2m-kind-data .h2m-img-kind-badge { background: #E4F6EE; color: var(--ss-success); }
.h2m-kind-local .h2m-img-kind-badge { background: #E4F6EE; color: var(--ss-success); }
.h2m-kind-local.h2m-img-card { cursor: default; }
.h2m-img-count { font-weight: 600; }
.h2m-img-result { font-size: .72rem; font-weight: 600; }
.h2m-img-result.ok { color: var(--ss-success); }
.h2m-img-result.err { color: var(--ss-error); }

/* pages/mes-fichiers.php -- liste des projets (dossiers uploads/<prof>/<projet>/). */
.h2m-projects-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.h2m-project-row {
  display: flex; align-items: center; gap: 1rem; padding: .7rem .9rem;
  border: 1px solid var(--ss-paper-line); border-radius: var(--ss-radius-sm); background: var(--ss-paper);
}
[data-ss-theme="dark"] .h2m-project-row { background: #101827; }
.h2m-project-thumbs { display: flex; gap: .25rem; flex: 0 0 auto; }
.h2m-project-thumbs img, .h2m-project-thumbs .h2m-img-thumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: #fff;
}
[data-ss-theme="dark"] .h2m-project-thumbs img, [data-ss-theme="dark"] .h2m-project-thumbs .h2m-img-thumb { background: #131C2E; }
.h2m-project-info { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.h2m-project-info strong { font-size: .9rem; }
.h2m-project-actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.h2m-project-actions form { margin: 0; }