/* Parent — spécifique, complète app.css */

.profile-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}
.profile-row:last-child { border-bottom: none; }
.profile-row .label { color: var(--text-secondary); }
.profile-row .val { font-weight: 600; color: var(--text); }

/* Brief "Batch debug & polish" #12 — upload photo enfant (Paramètres > Mes
   enfants), même mise en page que .profil-avatar-* côté direction.css
   (aperçu circulaire + bouton "Changer"). */
.enfant-photo-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
.enfant-photo-row:last-child { border-bottom: none; }
.enfant-photo-preview {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
    flex-shrink: 0; background: #f1f5f9;
}
.enfant-photo-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-size: 18px; font-weight: 700;
}
.enfant-photo-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin-top: 6px; font-size: 12px; padding: 5px 10px; }

/* ── Section "Places disponibles" : vue compacte une ligne ──────────────
   Même motif que .profile-row (flex, séparateur léger, pas de bordure sur
   le dernier) plutôt qu'un nouveau système : cohérence visuelle avec le
   reste du dashboard. */
.place-dispo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
}
.place-dispo-row:last-child { border-bottom: none; }
.place-dispo-date {
    flex: 0 0 auto;
    background: var(--warning-bg);
    color: var(--warning);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
.place-dispo-texte {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.place-dispo-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-place-dispo {
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    border: none;
    white-space: nowrap;
    cursor: pointer;
}
.btn-place-dispo:hover { background: var(--primary-hover, var(--primary)); }
.btn-place-dispo-dismiss {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
}
.btn-place-dispo-dismiss:hover { color: var(--error); }

/* ── Paramètres : préférences d'alertes ────────────────────────────────
   Deux bugs cumulés :
   1. .field label (app.css, 0-1-1) impose display:block, plus spécifique
      qu'une classe seule (0-1-0) — d'où les sélecteurs préfixés .field ici.
   2. .field input (app.css, 0-1-1) impose width:100%/padding:10px 12px/
      border à TOUS les <input> d'un .field, y compris les checkboxes —
      elles s'étiraient en pleine largeur. Reset explicite ci-dessous. */
.field .alertes-toggle-row { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.field .alertes-toggle-row input[type="checkbox"],
.field .jours-notif-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    box-sizing: border-box;
    accent-color: var(--primary);
}
.jours-notif-grid { display: flex; gap: 16px; }
.field .jours-notif-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; }

.action-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.action-card {
    padding: 16px; border-radius: 12px; text-align: center; text-decoration: none;
    display: block; border: 2px solid; cursor: pointer; background: none; font-family: var(--font);
}
.action-card .ico { font-size: 22px; display: block; margin-bottom: 3px; }
.action-card .lbl { font-size: 13px; font-weight: 600; }
.action-card.abs { background: #fff8e1; border-color: var(--accent); color: var(--accent); }
.action-card.dem { background: var(--success-bg); color: var(--success); border-color: var(--success); }

/* Accordéon dashboard : déplacé dans app.css (partagé avec direction.html
   depuis la refonte du dashboard direction) — voir app.css pour les règles. */

/* ── Dashboard ─────────────────────────────────────────────────────── */
.enfant-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px;
}
.enfant-row:last-child { border-bottom: none; }
.btn-annuler-abs {
    background: none; border: 1px solid var(--error); color: var(--error);
    border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer;
    font-family: var(--font); flex-shrink: 0;
}
.btn-annuler-abs:hover { background: var(--error-bg); }

/* Brief — Refonte cartes espace parent (harmonisation avec le style premium
   du dashboard gestionnaire) : .dash-item devient une vraie carte (fond
   blanc, ombre légère, radius 12px, bordure gauche 4px colorée selon
   statut) plutôt qu'une ligne séparée par un simple trait. Structure en 2
   blocs : .dash-item-top (badge date + contenu), .dash-item-foot (bouton
   d'action, aligné à droite, jamais pleine largeur). Utilisée par les 4
   sections Réservations à venir / Demandes en attente / Liste d'attente /
   Absences déclarées (vue Accueil). */
.dash-item {
    display: flex; flex-direction: column; gap: 10px;
    background: #fff;
    border-radius: 12px;
    border-left: 4px solid #d1d5db;
    box-shadow: 0 1px 4px rgba(13,27,62,.08);
    padding: 16px;
    margin-bottom: 10px;
}
.dash-item:last-child { margin-bottom: 0; }

.dash-item-top { display: flex; align-items: center; gap: 12px; }

.dash-item-foot { display: flex; justify-content: flex-end; }
.dash-item-foot:empty { display: none; }

/* Couleurs de statut — littérales (même convention que .dash-date-*
   ci-dessous : pas de var() partagée avec les badges d'ailleurs dans
   l'app, pour que ce fichier reste indépendant d'un futur re-thème). */
.dash-item-confirmee { border-left-color: #1E8449; }
.dash-item-attente { border-left-color: #CA6F1E; }
.dash-item-annulation { border-left-color: #C0392B; }
.dash-item-absence { border-left-color: #7D3C98; }
.dash-item-liste-attente { border-left-color: #6b7280; }

.dash-item-date {
    flex-shrink: 0;
    width: 46px; height: 46px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 10px;
    line-height: 1.1;
}
.dash-date-jour { font-size: 16px; font-weight: 800; }
.dash-date-mois { font-size: 9px; font-weight: 700; letter-spacing: .03em; opacity: .85; }

/* Brief — Fix couleurs calendrier parent : "Réservé" et "Liste d'attente"
   partageaient respectivement le même vert que "Disponible" et le même
   rouge que "Complet", rendant les statuts indistinguables au calendrier.
   Couleurs propres, littérales (pas de var() partagée avec les badges
   validée/refusée d'ailleurs dans l'app), pour ce fichier uniquement. */
.dash-date-reserve { background: #D6E4F5; color: #1565C0; }
.dash-date-attente { background: var(--info-bg); color: var(--info); }
.dash-date-liste-attente { background: #EAD4D4; color: #8B0000; }
.dash-date-absent { background: var(--warning-bg); color: var(--warning); }
.dash-date-ferme { background: var(--pastel-ferme-bg); color: var(--pastel-ferme); }

.dash-item-body { flex: 1; min-width: 0; }
.dash-item-titre { font-size: 14px; font-weight: 700; color: var(--text); }
.dash-item-sub { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.dash-item-creneau { font-size: 12px; color: var(--text-secondary); margin-top: 3px; font-weight: 600; }

.dash-item-chevron { flex-shrink: 0; font-size: 20px; color: var(--text-muted); }

.creneau-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.creneau-buttons.creneau-buttons-3 { grid-template-columns: repeat(3, 1fr); }
.creneau-buttons button {
    padding: 10px 4px;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    background: #fff;
    font-size: 11px;
    font-family: var(--font);
    cursor: pointer;
    text-align: center;
    color: var(--text);
}
.creneau-buttons button .creneau-detail { display: block; font-size: 9px; color: var(--text-muted); margin-top: 2px; }
.creneau-buttons button.active { border-color: var(--primary); background: #f7f9ff; color: var(--primary); }

/* ── Calendrier ────────────────────────────────────────────────────── */
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.cal-nav strong { color: var(--primary); font-size: 16px; font-weight: 700; text-transform: capitalize; }
.cal-nav-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: 20px; line-height: 1;
    cursor: pointer;
    transition: transform .1s, background .15s;
}
.cal-nav-btn:hover { background: var(--primary-hover, var(--primary)); transform: scale(1.06); }
.cal-nav-btn:active { transform: scale(.96); }

/* Grille + panneau résumé côte à côte sur desktop, empilés sur mobile. */
.cal-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.cal-main { flex: 1 1 420px; min-width: 0; }

.cal-legende-p { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text-secondary); margin-bottom: 14px; }
.cal-legende-p .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: middle; }

.cal-grid-p { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.cal-head-p { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-secondary); padding: 4px 0; }

.cal-cell-p {
    min-height: 78px;
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: #fafafa; color: #bbb;
    cursor: pointer;
    transition: transform .1s, box-shadow .1s;
}
.cal-cell-p:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.cal-cell-p.vide { visibility: hidden; cursor: default; }

.cal-cell-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; width: 100%; }
.cal-cell-num { font-size: 16px; font-weight: 700; line-height: 1; }
.cal-cell-label { font-size: 10px; font-weight: 600; opacity: .9; line-height: 1.3; text-align: center; }

/* États "actés" — fond pastel, texte de la même famille (palette partagée app.css). */
.cal-cell-p.jc-prevu { background: var(--pastel-prevu-bg); color: var(--pastel-prevu); }
/* Fix couleurs calendrier parent : mêmes couleurs propres que .dash-date-*
   ci-dessus (même logique, deux endroits d'affichage du même statut). */
.cal-cell-p.jc-reserve { background: #D6E4F5; color: #1565C0; }
.cal-cell-p.jc-absent { background: var(--warning-bg); color: var(--warning); }
.cal-cell-p.jc-demande_attente { background: var(--info-bg); color: var(--info); }
.cal-cell-p.jc-liste_attente { background: #EAD4D4; color: #8B0000; }
.cal-cell-p.jc-ferme { background: var(--pastel-ferme-bg); color: var(--pastel-ferme); }

/* États "disponible" — teinte très claire + bordure de la couleur associée. */
/* Brief C1 — palette alignée sur le moteur de décision unifié (même logique
   que direction.css/direction.js::remplissageClasse()) : libre = Auto (vert),
   validation = Validation (jaune), complet = Bloqué (rouge, cf.
   MoiController::calendrier()) — "complet" était par erreur rendu en vert
   (#A9DFBF) avant cette correction, malgré le commentaire disant "ROUGE". */
.cal-cell-p.jc-disponible_libre { background: #D5F5E3; border: 2px solid #1E8449; color: #1E8449; }
.cal-cell-p.jc-disponible_validation { background: #FEF9E7; border: 2px solid #B7950B; color: #B7950B; }
.cal-cell-p.jc-disponible_complet { background: #FADBD8; border: 2px solid #C0392B; color: #C0392B; }
.cal-cell-p.jc-disponible { background: var(--pastel-disponible-bg); border: 1px solid #ddd; color: #555; }

.cal-cell-p.jc-passe { color: #ccc; background: none; cursor: default; box-shadow: none; }
.cal-cell-p.jc-passe:hover { transform: none; box-shadow: none; }
.cal-cell-p.jc-passe .cal-cell-label { display: none; }

/* ── Panneau résumé du mois ───────────────────────────────────────── */
.cal-summary {
    flex: 0 0 220px;
    background: #fff;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
    padding: 16px;
}
.cal-summary h3 { margin: 0 0 12px; font-size: 14px; color: var(--primary); }
.cal-summary-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}
.cal-summary-row .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cal-summary-row span:nth-child(2) { flex: 1; color: var(--text-secondary); }
.cal-summary-row strong { font-size: 14px; }
.cal-summary-total {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px; padding-top: 10px;
    font-size: 13px; font-weight: 700;
    color: var(--primary);
}

@media (max-width: 680px) {
    .cal-summary { flex-basis: 100%; }
    .cal-cell-p { min-height: 64px; }
    .cal-cell-num { font-size: 14px; }
    .cal-cell-label { font-size: 9px; }

    /* Brief — refonte cartes (.dash-item en carte, badge date + contenu sur
       .dash-item-top, bouton sur .dash-item-foot) : la carte encaisse déjà
       nativement les écrans étroits (.dash-item-body flex:1/min-width:0
       s'écrase avant de déborder, .dash-item-foot est sur sa propre ligne
       sous .dash-item-top) — plus besoin des recalages flex-wrap/order
       d'un précédent brief, obsolètes depuis que le bouton n'est plus dans
       la même ligne flex que le badge/contenu. Juste un padding resserré. */
    .dash-item { padding: 12px; }
}

@media (max-width: 768px) {
    /* Brief K point 1 — le picker natif <input type="time"> (Android/Chrome :
       boutons clavier/effacer/annuler/définir) peut être tronqué à droite
       quand l'input de fin (2e colonne de .field-grid-2) est trop proche du
       bord d'écran. Le popup lui-même est hors DOM (rendu par l'OS/
       navigateur, aucune prise CSS dessus) — on empile les 2 champs sur
       toute la largeur d'écran (au lieu de 2 colonnes), qui donne à chaque
       input un point d'ancrage centré plutôt que collé au bord droit, +
       garde-fou max-width/overflow sur le wrapper qui le contient. */
    .field-grid-2 { grid-template-columns: 1fr; gap: 12px 0; }
    .field-grid-2 .field { max-width: 100vw; overflow: hidden; }
    .field-grid-2 .field input[type="time"] { max-width: 100%; }
}