/* ═══════════════════════════════════════════════════════════════
   Appointments — La Farandole theme integration
   Overrides plugin/appointments/assets/main.css colors and adds
   styles for all appointment templates.
   ═══════════════════════════════════════════════════════════════ */

/* ── Color tokens ────────────────────────────────────────────── */
:root {
    --appt-primary:       #E4924E;
    --appt-primary-hover: rgba(228, 146, 78, 0.08);
    --appt-primary-light: rgba(228, 146, 78, 0.12);
    --appt-dark:          #454d5d;
    --appt-muted:         #8c93a2;
    --appt-border:        #caced7;
    --appt-border-light:  rgba(202, 206, 215, 0.5);
    --appt-bg:            #f7f8fa;
    --appt-error:         #cc3300;
}

/* ── Group headers ───────────────────────────────────────────── */

/* Account-based panel → La Farandole dark */
.appointment-group > summary {
    background: var(--appt-dark);
}

/* Group/class-based panel → La Farandole primary orange */
.appointment-group--group > summary {
    background: var(--appt-primary);
}

/* Filtered (greyed-out) panels: lighter, clearer muted state */
.appointment-group--filtered > summary {
    background: var(--appt-muted);
}

.appointment-group-name {
    color: #Ffffff;
}

.appointment-group-tags {
    margin-right: 1.5em;
}

.appointment-group-tag {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 0.85em;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    padding: 0.1em 0.45em;
    border: solid 1px rgba(255, 255, 255, 0.25);
    white-space: nowrap;
}

.appointment-group > summary::after {
    background: var(--appt-primary);
    color: #fff;
    transform: translateY(-50%);
    width: 0.75rem;
    height: 0.75rem;
}

.appointment-group[open] > summary {
    background: var(--appt-primary);
}

.appointment-group[open] > summary::after {
    background: var(--appt-primary);
}

/* ── Slot toggles: La Farandole primary for interactions ────────────── */

.appointment-slot-item label:hover {
    border-color: var(--appt-primary);
    color:        var(--appt-primary);
    background:   var(--appt-primary-hover);
}

.appointment-slot-item input[type="radio"]:checked + label {
    background:   var(--appt-primary);
    border-color: var(--appt-primary);
    color:        #fff;
}

.appointment-slot-item input[type="radio"]:focus-visible + label {
    outline-color: var(--appt-primary);
}

/* ── Child picker ────────────────────────────────────────────── */

.appointment-child-suggestions li:hover,
.appointment-child-suggestions li.is-active {
    background: var(--appt-primary-hover);
    color:      var(--appt-primary);
}

/* ── Email status ────────────────────────────────────────────── */

.appointment-email-status--found { color: var(--appt-primary); }
.appointment-email-status--error { color: var(--appt-error); }

/* ── Form fieldset resets ────────────────────────────────────── */

/* Browsers give fieldset min-width: min-content by default which breaks layout */
form fieldset {
    border:    none;
    padding:   0;
    margin:    0 0 1rem;
    min-width: 0;
    width:     100%;
}

/* ── Fields inside appointment groups ───────────────────────── */

/* Clip any overflow that might escape the group border */
.appointment-group {
    overflow: hidden;
}

/* Pad per-group fields to match date-group spacing */
.appointment-group-field {
    padding:     0.6rem 1rem 0.35rem;
    border-top:  solid 1px rgba(160, 160, 160, 0.12);
}

.appointment-group-field + .appointment-date-group,
.appointment-group > summary + .appointment-group-field {
    border-top: none;
}

/* Form elements inside groups must stay within the padded area */
.appointment-group .form-input,
.appointment-group .form-input-wrapper,
.appointment-group .appointment-child-picker {
    max-width: 100%;
    box-sizing: border-box;
}

/* Global col-6 fields: constrain to parent, never wider */
form .column.col-6 {
    max-width: 100%;
    box-sizing: border-box;
}

/* Submit footer */
form > footer {
    margin-top:   1.5rem;
    padding-top:  1rem;
    border-top:   solid 1px var(--appt-border);
}

/* ── Form info paragraph ─────────────────────────────────────── */

.appointment-form-info {
    font-size:     0.85em;
    color:         var(--appt-muted);
    margin-bottom: 1rem;
    line-height:   1.6;
}

/* ── Muted text and heading colors ───────────────────────────── */

.appointment-date-label {
    color: var(--appt-muted);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 1rem 0 0.75rem;
}

.appt-overview-subtitle {
    color: var(--appt-muted);
}

.appt-overview-date {
    color:        var(--appt-dark);
    border-color: var(--appt-border);
}

.appt-overview-table th {
    color: var(--appt-muted);
}

/* ── Post-submission confirmation ────────────────────────────── */

.appointment-confirmation {
    max-width:    680px;
    margin:       2rem auto;
    padding:      2rem;
    background:   #fff;
    border:       solid 1px var(--appt-border);
    border-top:   3px solid var(--appt-primary);
    box-shadow:   0 2px 8px rgba(69, 77, 93, 0.08);
}

.appointment-confirmation > header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: solid 1px var(--appt-border);
}

.appointment-confirmation > header h2 {
    margin:    0 0 0.4rem;
    font-size: 1.1rem;
    color:     var(--appt-dark);
}

.appointment-confirmation > header p {
    margin:    0.15rem 0;
    font-size: 0.85em;
    color:     var(--appt-muted);
}

.appointment-confirmation .timestamp {
    font-size: 0.78em;
}

.appointment-confirmed-slot {
    padding:       0.9rem 1.2rem;
    margin-bottom: 0.6rem;
    background:    var(--appt-bg);
    border:        solid 1px var(--appt-border);
    border-left:   3px solid var(--appt-primary);
}

.appointment-confirmed-slot header p {
    margin:    0.2rem 0;
    font-size: 0.88em;
    color:     var(--appt-dark);
}

.appointment-confirmed-slot header p.date {
    color:     var(--appt-muted);
    font-size: 0.82em;
}

/* ── Legacy appointment.html.twig ────────────────────────────── */

/* Booked appointment card */
.confirm-container {
    padding:       0.9rem 1.2rem;
    margin-bottom: 0.75rem;
    background:    var(--appt-primary-light);
    border:        solid 1px var(--appt-border);
    border-left:   3px solid var(--appt-primary);
}

.confirm-container h4 {
    margin:    0 0 0.4rem;
    font-size: 0.9em;
    color:     var(--appt-dark);
}

.confirm-button {
    display:     inline-flex;
    align-items: center;
    gap:         0.4em;
    font-size:   0.82em;
    color:       var(--appt-muted);
}

.confirm-button .icon {
    opacity: 0.6;
}

.confirm-button a {
    color:           var(--appt-error);
    text-decoration: none;
    transition:      opacity 0.15s ease;
}

.confirm-button a:hover {
    text-decoration: underline;
}

/* Radio slot list in legacy template */
ul.actions {
    list-style: none;
    padding:    0;
    margin:     0 0 1rem;
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.3em;
}

ul.actions li {
    display: flex;
}

ul.actions input[type="radio"] {
    position:       absolute;
    opacity:        0;
    pointer-events: none;
    width:          0;
    height:         0;
}

ul.actions label {
    display:          inline-block;
    padding:          0.3em 0.75em;
    border:           solid 1px rgba(202, 206, 215, 0.8);
    background:       rgba(160, 160, 160, 0.06);
    color:            var(--appt-dark);
    cursor:           pointer;
    font-size:        0.82em;
    font-weight:      600;
    white-space:      nowrap;
    transition:       background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

ul.actions label:hover {
    border-color: var(--appt-primary);
    color:        var(--appt-primary);
    background:   var(--appt-primary-hover);
}

ul.actions input[type="radio"]:checked + label {
    background:   var(--appt-primary);
    border-color: var(--appt-primary);
    color:        #fff;
}

ul.actions input[type="radio"]:disabled + label {
    opacity:         0.4;
    cursor:          not-allowed;
    text-decoration: line-through;
    border-color:    rgba(202, 206, 215, 0.4);
}

/* message-test wrapper used in appointment.html.twig */
.message-test {
    padding: 1rem 0;
}

.message-test details {
    margin-bottom: 1.5rem;
    border:        solid 1px var(--appt-border);
}

.message-test details > summary {
    padding:     0.65em 1em;
    background:  var(--appt-bg);
    cursor:      pointer;
    list-style:  none;
    border-bottom: solid 1px var(--appt-border);
}

.message-test details > summary::-webkit-details-marker { display: none; }

.message-test details > summary header h3 {
    margin:    0;
    font-size: 0.9rem;
    color:     var(--appt-dark);
}

.message-test details > div,
.message-test details > form > div {
    padding: 1rem;
}

/* ── Cancellation page ───────────────────────────────────────── */

.post .buttons {
    margin-top: 1rem;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 768px) {
    .appointment-confirmation {
        padding: 1.25rem;
        margin:  1rem 0;
    }

    .appointment-group > summary {
        font-size: 0.68em;
    }

    .appointment-slots {
        gap: 0.25em;
    }

    .appointment-slot-item label {
        font-size: 0.76em;
        padding:   0.25em 0.6em;
    }

    ul.actions label {
        font-size: 0.76em;
        padding:   0.25em 0.6em;
    }
}


/* ── Formulaire « utilisateur connecté » (carte par enfant, style carnet) ── */
.gsm-appointment-body {
    padding-top: 1.25rem;
    font-style:  normal;
    color:       var(--appt-dark);
}
.gsm-appointment-panel + .gsm-appointment-panel {
    margin-top:  1rem;
    border-top:  1px solid var(--gsm-border);
    padding-top: 1rem;
}


/* ── Formulaire « visiteur » (non connecté), style carnet ─────────────── */
.gsm-appointment-contact {
    padding:       1.25rem 1.75rem;
    margin-bottom: 1.25rem;
    border:        0;
    border-radius: 18px;
}
.gsm-appointment-group.appointment-group--filtered,
.gsm-appointment-group.appointment-group--disabled {
    opacity: 0.55;
}
.gsm-appointment-group.appointment-group--disabled > summary,
.gsm-appointment-group.appointment-group--filtered > summary {
    cursor: not-allowed;
}
.gsm-appointment-full {
    border-color: #e6735c;
    color:        #c14e34;
}


/* Classe de l'enfant : bandeau orange en haut à droite de la carte (comme la date d'un message de la boîte de réception) */
details.gsm-notebook-child { position: relative; }
.gsm-appointment-class {
    position:       absolute;
    top:            0;
    right:          0;
    padding:        0.2rem 0.8rem;
    border-radius:  0 0 0 12px;
    background:     #e4924e;
    color:          #fff;
    font-size:      0.7rem;
    font-weight:    600;
    line-height:    1.5;
    white-space:    nowrap;
    box-shadow:     0 2px 6px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}


/* Enseignants : en bas à droite de la carte (visibles aussi quand elle est repliée) */
.gsm-appointment-child > summary { padding-bottom: 2.6rem; }
.gsm-appointment-child > .gsm-appointment-body { padding-bottom: 3rem; }
.gsm-appointment-teachers {
    position:        absolute;
    right:           1rem;
    bottom:          0.6rem;
    display:         flex;
    flex-wrap:       wrap;
    justify-content: flex-end;
    gap:             0.4rem;
    max-width:       calc(100% - 2rem);
    pointer-events:  none;
}


/* Avatar d'un enseignant dans son badge (même taille que l'ancienne icône) */
.gsm-appointment-avatar {
    width:         1em;
    height:        1em;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
}


/* Titre d'enseignant au-dessus de ses créneaux (si l'enfant a plusieurs enseignants) */
.gsm-appointment-panel-title {
    display:      flex;
    align-items:  center;
    flex-wrap:    wrap;
    gap:          0.3rem 0.8rem;
    margin:       0 0 0.6rem;
    font-size:    1rem;
    font-weight:  700;
    color:        var(--gsm-ink);
}
.gsm-appointment-panel-title::after {
    content:    '';
    flex:       1 1 2rem;
    border-top: 1px solid var(--gsm-border);
}
.gsm-appointment-panel-teacher { display: inline-flex; align-items: center; gap: 0.4rem; }
.gsm-appointment-panel-title .gsm-appointment-avatar { width: 1.4em; height: 1.4em; }

.appointment-date-subject {
    color: var(--appt-muted);
    text-align: center;
    font-style: italic;
    margin: -0.5rem 0 0.75rem;
}

.slot-subject {
    display: block;
    font-size: 0.8em;
    font-style: italic;
    opacity: 0.8;
}