/* ═══════════════════════════════════════════════════════════════
   Appointment form — future2021 theme integration
   ═══════════════════════════════════════════════════════════════ */

/* ── Collapsible group (one per Grav user-group) ────────────── */

.appointment-group {
    background:    #fff;
    border-radius: 10px;
    filter:        drop-shadow(0px 0px 24px #D0D0D0);
    margin-bottom: 1.5em;
    padding-bottom: 1rem;
    width: 100%;
}

.appointment-group > summary {
    color:         #030303;
    padding:       0.9em 1em;
    padding-right: 3em;
    cursor:        pointer;
    font-weight:   800;
    font-size:     0.75em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    list-style:    none;
    user-select:   none;
    display:       flex;
    justify-content: space-between;
    align-items:   center;
    position:      relative;
    margin-bottom: -1rem;
    border-bottom: solid 1rem transparent;
    clip-path:     polygon(0 0, 100% 0, 100% calc(100% - 1rem), 50% 100%, 0 calc(100% - 1rem));
}

/* Open state: primary colour header */
.appointment-group[open] > summary {
    background: #2BB17A;
    color:      #fff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

/* Type badge (Groupe / Compte) at the start of the summary */
.appointment-group-type {
    flex-shrink: 0;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.15em 0.55em;
    background: rgba(255, 255, 255, 0.2);
    border: solid 1px rgba(255, 255, 255, 0.5);
    margin-right: 0.75em;
    white-space: nowrap;
}

.appointment-group > summary::-webkit-details-marker {
    display: none;
}

.appointment-group > summary::after {
    content:         "↓";
    position:        absolute;
    top:             50%;
    right:           0.75rem;
    transform:       translateY(-50%);
    width:           1.75rem;
    height:          1.75rem;
    background:      #fff;
    color:           #030303;
    display:         inline-flex;
    justify-content: center;
    align-items:     center;
    flex-shrink:     0;
    border-radius:   50%;
    font-size:       1em;
    line-height:     1;
    transition:      none;
}

.appointment-group[open] > summary::after {
    content:    "↑";
    background: #2BB17A;
    color:      #fff;
    transform:  translateY(-50%);
}

/* ── Summary layout: name + group tags + chevron ────────────── */

.appointment-group-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointment-group-tags {
    display: flex;
    gap: 0.3em;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0.5em;
}

.appointment-group-tag {
    background: #2BB17A;
    color: #ffffff;
    font-size: 0.85em;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    padding: 0.1em 0.45em;
    border: solid 1px #2BB17A;
    white-space: nowrap;
}

.appointment-group[open] .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;
}

/* ── Per-group form fields (child picker, message…) ─────────── */

.appointment-group-field {
    padding: 0.6em 1em 0;
}

.appointment-group-field:last-of-type {
    padding-bottom: 0.75em;
}

/* Textarea must not overflow the panel width */
.appointment-group-field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

/* ── Date sub-group ─────────────────────────────────────────── */

.appointment-date-group {
    padding: 0.5em 1em 0.35em;
    border-top: solid 1px rgba(160, 160, 160, 0.15);
}

.appointment-date-group:first-child {
    border-top: none;
}

.appointment-date-label {
    font-size: 0.72em;
    color: #838383;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.35em;
}

/* ── Slot toggle list ───────────────────────────────────────── */

.appointment-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    list-style: none;
    padding: 0;
    margin: 0;
}

.appointment-slot-item {
    flex: 0 0 auto;
}

/* Hide the native radio so the label becomes the clickable toggle */
.appointment-slot-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.appointment-slot-item label {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.3em 0.75em;
    border: solid 1px rgba(160, 160, 160, 0.4);
    background: rgba(160, 160, 160, 0.075);
    color: #3c3b3b;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.9;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.appointment-slot-item label:hover {
    border-color: #2BB17A;
    color: #2BB17A;
    background: rgba(43, 177, 122, 0.06);
}

.appointment-slot-item input[type="radio"]:checked + label {
    background: #2BB17A;
    border-color: #2BB17A;
    color: #ffffff;
}

/* Disabled (booked / pending / cancelled) */
.appointment-slot-item input[type="radio"]:disabled + label {
    background: rgba(160, 160, 160, 0.04);
    border-color: rgba(160, 160, 160, 0.2);
    color: rgba(160, 160, 160, 0.5);
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Focus ring for keyboard navigation */
.appointment-slot-item input[type="radio"]:focus-visible + label {
    outline: 2px solid #2BB17A;
    outline-offset: 2px;
}

/* Readonly fields (pre-filled from connected account) */
input[readonly] {
    background: rgba(160, 160, 160, 0.04);
    border-color: rgba(160, 160, 160, 0.2);
    color: #838383;
    cursor: default;
}

/* ── Appointment overview page ──────────────────────────────── */

.appt-overview-subtitle {
    font-size: 0.9em;
    color: #838383;
    margin-top: 0.25em;
}

.appt-overview-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 1.5em;
}

.appt-overview-day {
    margin-bottom: 2em;
}

.appt-overview-date {
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #3c3b3b;
    padding: 0.4em 0;
    border-bottom: 2px solid #3c3b3b;
    margin-bottom: 0.5em;
}

.appt-overview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
}

.appt-overview-table th {
    text-align: left;
    padding: 0.4em 0.75em;
    font-weight: 700;
    font-size: 0.8em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #838383;
    border-bottom: solid 1px rgba(160, 160, 160, 0.3);
}

.appt-overview-table td {
    padding: 0.5em 0.75em;
    border-bottom: solid 1px rgba(160, 160, 160, 0.15);
    vertical-align: middle;
}

.appt-overview-row--free     { background: rgba(43, 177, 122, 0.04); }
.appt-overview-row--pending  { background: rgba(247, 148, 28, 0.06); }
.appt-overview-row--confirmed{ background: rgba(43, 177, 122, 0.08); }
.appt-overview-row--cancelled{ background: rgba(160, 160, 160, 0.06);
                                opacity: 0.6; }

.appt-status {
    display: inline-block;
    padding: 0.15em 0.55em;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 2px;
}

.appt-status--free      { background: rgba(43, 177, 122, 0.12); color: #1a8a5a; }
.appt-status--pending   { background: rgba(247, 148, 28, 0.15); color: #b36200; }
.appt-status--confirmed { background: rgba(43, 177, 122, 0.25); color: #0f6b42; }
.appt-status--cancelled { background: rgba(160, 160, 160, 0.15); color: #666; }

.appt-overview-actions { text-align: right; white-space: nowrap; }

.appt-action-cancel {
    color: rgba(160, 160, 160, 0.6);
    font-size: 0.9em;
    transition: color 0.15s ease;
}

.appt-action-cancel:hover { color: #e85600; }

/* ── Child picker — tag input avec autocomplete ─────────────── */

.appointment-child-picker {
    position: relative;
}

.appointment-child-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    margin-bottom: 0.4em;
}

.appointment-child-tag-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    background: rgba(43, 177, 122, 0.1);
    border: solid 1px rgba(43, 177, 122, 0.35);
    color: #1a6b47;
    font-size: 0.82em;
    font-weight: 600;
    padding: 0.15em 0.4em 0.15em 0.55em;
    border-radius: 2px;
}

.appointment-child-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 1em;
    color: inherit;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.1s ease;
}

.appointment-child-tag-remove:hover {
    opacity: 1;
}

.appointment-child-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: #fff;
    border: solid 1px rgba(160, 160, 160, 0.4);
    border-top: none;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.appointment-child-suggestions li {
    padding: 0.45em 0.75em;
    cursor: pointer;
    font-size: 0.88em;
    border-bottom: solid 1px rgba(160, 160, 160, 0.1);
    transition: background 0.1s ease, color 0.1s ease;
}

.appointment-child-suggestions li:last-child {
    border-bottom: none;
}

.appointment-child-suggestions li:hover,
.appointment-child-suggestions li.is-active {
    background: rgba(43, 177, 122, 0.08);
    color: #2BB17A;
}

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

.appointment-email-status {
    font-size: 0.78em;
    margin-top: 0.3em;
    padding: 0.25em 0.5em;
}

.appointment-email-status--loading { color: #838383; }
.appointment-email-status--found   { color: #2BB17A; }
.appointment-email-status--unknown { color: #838383; }
.appointment-email-status--warning { color: #e07b00; }
.appointment-email-status--error   { color: #e85600; }

/* ── Disabled panel (no free slots remaining) ───────────────── */

.appointment-group--disabled > summary {
    background: #d0d0d0;
    color:      #666;
    cursor:     default;
    opacity:    0.65;
}

.appointment-group--disabled > summary::after {
    display: none;
}

.appointment-group-full-badge {
    flex-shrink: 0;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15em 0.55em;
    background: rgba(255, 255, 255, 0.15);
    border: solid 1px rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    margin-left: auto;
}

/* ── Email group filter ─────────────────────────────────────── */

.appointment-group--filtered {
    opacity: 0.35;
}

.appointment-group--filtered > summary {
    background: #888;
    cursor: default;
}

/* ── Legacy helpers (kept for other form uses) ──────────────── */

.switch-toggle input:disabled + label {
    color: #bfbfbf;
}

.switch-toggle-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
}

.form-tabs .tabs-nav {
    flex-wrap: wrap;
}

.form-tabs .tabs-nav a {
    text-decoration: none;
    padding: 10px 2px !important;
}

.form-tabs .tabs-nav a.filled::after {
    content: '\002A';
    margin-left: 5px;
    font-weight: 700;
    color: #e85600;
}

.form-tabs .tabs-content .form-tab {
    border: 1px solid #ccc;
    border-top: 1px solid rgba(0, 0, 0, 0);
    border-radius: 0 0 5px 5px;
    margin: 0 -1px;
    padding: 10px;
}

.form-tabs .tabs-nav a.disabled {
    color: #bfbfbf;
    cursor: not-allowed;
    pointer-events: none;
}

.form-input-wrapper {
    position: relative;
}

.form-input-wrapper i.icon {
    position: absolute;
    right: 10px;
    top: 25%;
    color: #aaa;
}

.form-input-wrapper i.icon.green {
    color: #27ae60;
}

.form-input-wrapper i.icon.red {
    color: #e85600;
}

/* ── Validation: créneau requis si nom rempli ───────────────── */
.appointment-form-errors {
    background: #fff3f0;
    border-left: 4px solid #e85600;
    border-radius: 2px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.appointment-form-errors p { margin: 0; color: #c0392b; font-weight: 600; }
.appointment-slots--error { outline: 2px solid #e85600; border-radius: 4px; }
.appointment-child-picker--error .appointment-child-search { border-color: #e85600; outline: 2px solid rgba(232, 86, 0, 0.2); }


/* ── Formulaire « utilisateur connecté » : un accordéon par enfant (style carnet) ── */
.appointment-child {
    border:        2px solid var(--appt-primary, #0070B8);
    background:    #fff;
    margin-bottom: 1.5rem;
}
.appointment-child-header {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    gap:             0.4rem 1rem;
    padding:         0.9rem 1.4rem;
    background:      var(--appt-primary, #0070B8);
    color:           #fff;
    cursor:          pointer;
    list-style:      none;
}
.appointment-child-header::-webkit-details-marker { display: none; }
.appointment-child-header::after {
    content:     '\25BE';
    margin-left: auto;
    transition:  transform 0.2s;
}
.appointment-child[open] > .appointment-child-header::after { transform: rotate(180deg); }
.appointment-child-name  { margin: 0; color: #fff; font-size: 1.3rem; }
.appointment-child-class {
    padding:    0.2rem 0.8rem;
    background: rgba(255, 255, 255, 0.2);
    font-size:  0.9rem;
}
.appointment-child-body { padding: 1.2rem 1.4rem 0.2rem; }

.appointment-child-teacher {
    padding:    0.2rem 0.8rem;
    background: rgba(255, 255, 255, 0.12);
    font-size:  0.9rem;
}
.appointment-child-panel + .appointment-child-panel {
    margin-top:  1rem;
    border-top:  1px solid rgba(160, 160, 160, 0.25);
    padding-top: 1rem;
}


/* Créneau déjà associé à l'enfant (vs créneau ouvert à tous) */
.slot-reserved-icon { color: var(--appt-primary, #E4924E); font-size: 0.85em; }
.appointment-slot-item input[type="radio"]:checked + label .slot-reserved-icon { color: #fff; }
.appointment-slot-legend { margin: 2.5rem 0 0.8rem; font-size: 0.85rem; color: var(--appt-muted, #8c93a2); }
.appointment-slot-legend .fa { color: var(--appt-primary, #E4924E); }


/* Titre d'enseignant au-dessus de ses créneaux (si l'enfant a plusieurs enseignants) */
.appointment-child-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;
}
.appointment-child-panel-title::after {
    content:    '';
    flex:       1 1 2rem;
    border-top: 1px solid rgba(160, 160, 160, 0.35);
}


/* Rendez-vous déjà pris (formulaire utilisateur connecté) */
.appointment-existing { margin: 0 0 1.5rem; }
.appointment-existing-title { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 700; }
.appointment-existing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.appointment-existing-item {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem;
    padding: 0.6rem 0.9rem; margin: 0;
    border: 1px solid rgba(160, 160, 160, 0.35); background: rgba(160, 160, 160, 0.06);
}
.appointment-existing-when { font-weight: 600; }
.appointment-existing-with { color: var(--appt-muted, #8c93a2); }
.appointment-existing-status { padding: 0.1rem 0.6rem; font-size: 0.8rem; font-weight: 600; border-radius: 999px; }
.appointment-existing-status--confirmed { background: rgba(43, 177, 122, 0.15); color: #1f8a5e; }
.appointment-existing-status--pending   { background: rgba(240, 160, 58, 0.18); color: #b3701e; }
.appointment-cancel-button {
    margin-left: auto; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0; font-size: 0.9rem; line-height: 1;
    border: 1px solid #c14e34; border-radius: 50%; background: #fff; color: #c14e34;
    transition: background 0.15s, color 0.15s;
}
.appointment-cancel-button:hover, .appointment-cancel-button:focus-visible { background: #c14e34; color: #fff; }

.appointment-date-subject {
    font-size: 0.85em;
    font-style: italic;
    color: #838383;
    margin-bottom: 0.5em;
}

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