/*
 * Projunior — Formulaires, actions de tableau, combobox, logo.
 * Complète components.css. Chargé après lui (voir assets/app.js).
 */

/* ==================================================================== */
/* Disposition de formulaire responsive                                 */
/* Le thème de formulaire (templates/form/pj_layout.html.twig) enveloppe */
/* tout formulaire dans <div class="pj-form"> : grille auto-colonnes.    */
/* ==================================================================== */
.pj-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 var(--pj-space-5);
    max-width: 880px;
    align-items: start;
}

/* Rythme vertical homogène (on neutralise les marges Bootstrap des lignes) */
.pj-form > .mb-3,
.pj-form > .mb-4 {
    margin-bottom: var(--pj-space-4) !important;
    min-width: 0;
}

/* Champs qui doivent occuper toute la largeur */
.pj-form > *:has(textarea),
.pj-form > *:has(.pj-combobox),
.pj-form > *:has([multiple]),
.pj-form > .pj-field--full {
    grid-column: 1 / -1;
}

/* Titres de section et séparateurs à l'intérieur d'un formulaire : pleine largeur */
.pj-form > h2,
.pj-form > h3,
.pj-form > .h5,
.pj-form > hr {
    grid-column: 1 / -1;
    margin: var(--pj-space-3) 0 var(--pj-space-2);
}
.pj-form > h2:first-child,
.pj-form > h3:first-child { margin-top: 0; }

/* Conteneur de formulaire neutre (remplace les anciens col-lg-*) */
.pj-formwrap { max-width: 920px; }

/* ==================================================================== */
/* Carte de formulaire (« pj-formcard »)                                */
/* Chaque groupe logique de champs vit dans sa propre carte (en-tête en  */
/* kicker + corps-grille) ; le formulaire reste soumis en une seule fois */
/* — les cartes ne découpent que la présentation. Le corps cumule        */
/* `pj-form pj-formcard__body` pour hériter de la grille responsive.     */
/* ==================================================================== */
.pj-formcard {
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-lg);
    box-shadow: var(--pj-shadow-sm);
    margin-bottom: var(--pj-space-4);
    max-width: 920px;
}

.pj-formcard__head {
    display: flex;
    align-items: baseline;
    gap: var(--pj-space-3);
    flex-wrap: wrap;
    padding: var(--pj-space-4) var(--pj-space-5);
    border-bottom: 1px solid var(--pj-line-2);
}

.pj-formcard__title {
    font-size: var(--pj-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--pj-caps-ls);
    color: var(--pj-orange-700);
    margin: 0;
}

.pj-formcard__hint { color: var(--pj-slate); font-size: var(--pj-text-sm); margin: 0; }

.pj-formcard__body { padding: var(--pj-space-5); }
.pj-formcard__body.pj-form { max-width: none; }

/* Quand le corps injecté par le thème de formulaire contient des cartes,
   sa grille s'efface : ce sont les corps de carte qui portent la grille. */
.pj-form:has(> .pj-formcard) { display: block; max-width: 920px; }

/* Boutons / barre d'actions : pleine largeur, alignés à gauche */
.pj-form > button,
.pj-form > .btn,
.pj-form > .pj-form__actions {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: var(--pj-space-2);
}

.pj-form__actions {
    display: flex;
    gap: var(--pj-space-2);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--pj-space-2);
}

/* Formulaire large (collections, tableaux de saisie) */
.pj-form--wide { max-width: 100%; }

/* Un formulaire posé dans une carte-panneau */
.pj-panel {
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-lg);
    box-shadow: var(--pj-shadow-sm);
    padding: var(--pj-space-5);
    max-width: 920px;
}
.pj-panel .pj-form { max-width: 100%; }

@media (max-width: 640px) {
    .pj-form { grid-template-columns: 1fr; gap: 0; }
}

/* ==================================================================== */
/* Actions de tableau en icônes                                         */
/* ==================================================================== */
.pj-actions {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    /* Les actions portent désormais leur libellé : une ligne étroite les fait passer à la
       ligne plutôt que déborder de la cellule. */
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pj-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--pj-radius-sm);
    color: var(--pj-slate);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--pj-dur) var(--pj-ease), color var(--pj-dur) var(--pj-ease);
}

.pj-action__label { font-size: .85rem; }

/* Action sans libellé visible (état bloqué) : pastille carrée, comme avant. */
.pj-action--icon-only {
    justify-content: center;
    padding: 0;
    width: 34px;
}

.pj-action:hover,
.pj-action:focus-visible {
    background: var(--pj-canvas-2);
    color: var(--pj-ink);
    text-decoration: none;
}

.pj-action--primary:hover { background: var(--pj-orange-50); color: var(--pj-orange-700); }
.pj-action--danger:hover { background: var(--pj-danger-bg); color: var(--pj-danger-fg); }

/* Action indisponible : conservée à l'écran (avec son infobulle expliquant pourquoi)
   plutôt que masquée, pour que la place des icônes reste stable d'une ligne à l'autre. */
.pj-action--disabled { opacity: .35; cursor: not-allowed; }

.pj-ico { width: 18px; height: 18px; display: block; flex: none; }
.pj-ico--sm { width: 15px; height: 15px; }

/* Bouton d'action « texte + icône » (barres d'outils au-dessus des tables) */
.btn .pj-ico { margin-right: 0.4em; margin-top: -2px; }

/* ==================================================================== */
/* Combobox « choisir ou créer » (ex. école)                            */
/* ==================================================================== */
.pj-combobox { position: relative; }

.pj-combobox__input { width: 100%; }

.pj-combobox__list {
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    margin-top: 4px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    box-shadow: var(--pj-shadow);
    padding: 4px;
    list-style: none;
}

.pj-combobox__list[hidden] { display: none; }

.pj-combobox__opt {
    padding: 0.5rem 0.65rem;
    border-radius: var(--pj-radius-sm);
    cursor: pointer;
    font-size: var(--pj-text-base);
    color: var(--pj-ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pj-combobox__opt:hover,
.pj-combobox__opt.is-active {
    background: var(--pj-orange-50);
}

.pj-combobox__opt--create {
    color: var(--pj-orange-700);
    font-weight: 500;
    border-top: 1px solid var(--pj-line-2);
    margin-top: 2px;
}
.pj-combobox__opt--create .pj-ico { color: var(--pj-orange); }

.pj-combobox__empty {
    padding: 0.5rem 0.65rem;
    color: var(--pj-slate);
    font-size: var(--pj-text-sm);
}

/* ==================================================================== */
/* Champ date suisse (jj.mm.aaaa) + bouton calendrier natif             */
/* ==================================================================== */
.pj-datefield {
    position: relative;
    display: block;
}

.pj-datefield .form-control {
    padding-right: 2.75rem;
}

/* Input date natif : invisible mais rendu (pour showPicker), sous le bouton */
.pj-datefield__native {
    position: absolute;
    right: 0.5rem;
    bottom: 0.25rem;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.pj-datefield__btn {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 2.5rem;
    border: 0;
    background: transparent;
    color: var(--pj-slate);
    border-radius: 0 var(--pj-radius-sm) var(--pj-radius-sm) 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--pj-dur) var(--pj-ease), color var(--pj-dur) var(--pj-ease);
}

.pj-datefield__btn:hover,
.pj-datefield__btn:focus-visible {
    color: var(--pj-orange-700);
    background: var(--pj-canvas-2);
}

/* ==================================================================== */
/* Logo Pro Junior                                                      */
/* ==================================================================== */
.pj-logo { display: block; height: auto; }

/* Logo dans la barre supérieure (mobile) et l'écran d'auth */
.pj-topbar__brand .pj-logo { height: 30px; }
.pj-auth__logo { width: 220px; max-width: 70%; height: auto; margin-bottom: var(--pj-space-5); }

/* ==================================================================== */
/* Mot de passe : règle opposable et indication de force                */
/* ==================================================================== */
/* Rendus sous le champ d'auto-inscription. Un refus silencieux du serveur laissait
   l'enseignant sans la moindre piste : la règle est désormais annoncée avant l'envoi. */

.pj-pwd__rule,
.pj-pwd__match {
    display: flex;
    align-items: center;
    gap: var(--pj-space-2);
    margin: var(--pj-space-2) 0 0;
    font-size: var(--pj-text-sm);
    color: var(--pj-slate);
}

/* Pastille d'état : le contenu textuel porte déjà l'information, elle ne fait que la
   doubler visuellement — d'où aria-hidden côté gabarit. */
.pj-pwd__mark {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--pj-radius-pill);
    background: var(--pj-line);
    border: 1px solid var(--pj-slate-400);
}

.pj-pwd__rule--met { color: var(--pj-success-fg); }
.pj-pwd__rule--met .pj-pwd__mark { background: var(--pj-success); border-color: var(--pj-success); }
.pj-pwd__rule--unmet { color: var(--pj-danger-fg); }
.pj-pwd__rule--unmet .pj-pwd__mark { background: var(--pj-danger); border-color: var(--pj-danger); }

.pj-pwd__match:empty { display: none; }
.pj-pwd__match--ok { color: var(--pj-success-fg); }
.pj-pwd__match--ko { color: var(--pj-danger-fg); }

.pj-pwd__strength {
    display: flex;
    align-items: center;
    gap: var(--pj-space-3);
    margin: var(--pj-space-2) 0 0;
    font-size: var(--pj-text-sm);
    color: var(--pj-slate);
}

.pj-pwd__bar {
    flex: 1;
    height: 0.25rem;
    border-radius: var(--pj-radius-pill);
    background: var(--pj-line-2);
    overflow: hidden;
}

.pj-pwd__bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--pj-danger);
    transition: width var(--pj-dur) var(--pj-ease), background var(--pj-dur) var(--pj-ease);
}

.pj-pwd__strength[data-score="2"] .pj-pwd__bar-fill { background: var(--pj-warning); }
.pj-pwd__strength[data-score="3"] .pj-pwd__bar-fill { background: var(--pj-success); }
.pj-pwd__strength-label { flex: none; }

@media (prefers-reduced-motion: reduce) {
    .pj-pwd__bar-fill { transition: none; }
}

/* Tags de comportement d'un article : chaque case est suivie de la phrase décrivant ce qu'elle
   déclenche. Deux colonnes dès qu'il y a la place — douze tags empilés font une page à eux seuls. */
.pj-taglist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

@media (min-width: 48rem) {
    .pj-taglist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pj-taglist__help {
    margin: 0.15rem 0 0 1.6rem;
}

/* Liste blanche régionale : un tableau d'une ligne par article, groupé par type, dont les
   paramètres (quantité conseillée par élève) sont alignés en fin de ligne. */
.pj-whitelist .form-check {
    margin: 0;
}

.pj-whitelist__qty {
    width: 6rem;
    margin-left: auto;
}

/* Un article archivé reste rattachable — il faut pouvoir le retirer d'une liste blanche
   après coup — mais se distingue au premier coup d'œil des articles encore au catalogue. */
.pj-whitelist__row--archived .form-check-label {
    color: var(--pj-slate);
}

/* Aperçu du logo d'organisation (administration). Fond damé : un logo à fond transparent
   doit rester lisible quelle que soit la couleur de la carte de formulaire. */
.pj-logo-preview {
    display: block;
    max-width: 260px;
    max-height: 110px;
    margin-bottom: var(--pj-space-3);
    padding: var(--pj-space-3);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius-sm);
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #f1f3f5 25%, transparent 25%),
        linear-gradient(-45deg, #f1f3f5 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f1f3f5 75%),
        linear-gradient(-45deg, transparent 75%, #f1f3f5 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}