.error-message {
    color: red;
    font-size: 0.75em; /* encore un cran plus petit */
    font-weight: bold;
    margin-top: 3px;
}

.classroom-student {
    right: 10px;
    position: absolute;
}

/* Conteneur global du formulaire de ticket */
.ticket-form {
    background: white;
    padding: 6px 8px; /* plus compact */
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    margin: auto;
    font-size: 0.85rem; /* échelle globale réduite */
}

    /* Champs à l’intérieur des formulaires de ticket */
    .ticket-form .form-group .form-control {
        font-size: 0.85rem;
        padding: 3px 6px; /* réduit */
        height: auto;
    }

    .ticket-form .form-group .form-select {
        font-size: 0.85rem;
        padding: 3px 6px;
        height: auto;
    }

/* Groupes de champs côte à côte */
.form-group-inline {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* resserré */
    position: relative;
}

    .form-group-inline .form-group {
        flex: 1;
    }

/* Radios génériques */
.radio-group {
    display: flex;
    flex-direction: row;
    gap: 8px; /* plus compact */
    flex-wrap: wrap;
}

.radio-inline {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
}

    .radio-inline input {
        margin-right: 3px;
    }

/* Affichage du nombre de demi-journées */
.half-day-count {
    font-size: 1em; /* au lieu de 1.2em / 1.05em */
    font-weight: 600;
    color: #0B2447;
}

/* Séparateur vertical éventuel entre deux blocs du formulaire */
.separator-form {
    width: 1px;
    background-color: var(--secondary-color);
    position: absolute;
    top: 0;
    bottom: 0;
}

/* Sélecteur d'élève (SfComboBox) plus léger */
.student-selector {
    font-size: 0.95rem !important; /* au lieu de 1.2em */
    align-items: center;
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 3px 6px;
}

/* Bouton de sauvegarde du ticket, plus compact */
.ticket-save-btn {
    background-color: var(--secondary-color) !important;
    border: none !important;
    color: white !important;
    padding: 5px 10px; /* encore un peu réduit */
    border-radius: 6px;
    font-size: 0.85rem; /* cohérent avec le reste */
    font-weight: 600;
    transition: background-color 0.2s, transform 0.1s;
}

    .ticket-save-btn:hover:not(:disabled) {
        transform: translateY(-1px);
    }

    .ticket-save-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* === Spécifique ticket dérogation d’horaires : Arrivée / Départ === */
/* Groupe horizontal des boutons Arrivée / Départ (ExceptionalExitForm) */
.radio-group-horizontal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* espace réduit entre les deux boutons */
}

    /* Le “bouton” visuel (bloc form-check) */
    .radio-group-horizontal .form-check {
        padding: 2px 8px;
    }

    /* La case radio elle-même : un peu plus petite */
    .radio-group-horizontal .form-check-input {
        transform: scale(0.85); /* réduit le rond */
        margin-bottom: 2px;
    }

    /* Le label Arrivée / Départ : on écrase le style="font-size:large" */
    .radio-group-horizontal .form-check label {
        font-size: 0.8rem !important; /* réduit la taille du texte */
        font-weight: 500;
        line-height: 1.2;
        padding: 0 2px;
    }

/* --- colonne gauche harmonisée --- */
.ticket-left-col {
    display: grid;
    grid-template-columns: 70px auto; /* largeur fixe des labels + champs auto */
    column-gap: 10px;
    row-gap: 8px;
    align-content: start;
}

.ticket-left-row {
    display: contents; /* chaque "row" alimente directement la grille */
}

.ticket-left-label {
    text-align: right;
    font-weight: 600;
    align-self: center;
    white-space: nowrap;
    margin: 0;
}

.ticket-left-input {
    width: fit-content; /* prend la place nécessaire */
    min-width: 0;
}

.ticket-left-input--date {
    width: 140px; /* stable sans être énorme */
}

.ticket-left-input--time {
    width: 110px; /* time = compact */
}

.ticket-left-input--reason {
    width: 220px; /* raison un peu plus large */
    max-width: 100%;
}

/* --- AbsenceTicket : colonne gauche compacte (2 lignes) --- */
.ticket-absence-left {
    display: flex;
    flex-direction: column;
    gap: 8px; /* compact */
}

/* 3 colonnes: label / date / radios */
.ticket-absence-row {
    display: grid;
    grid-template-columns: 80px 140px 1fr; /* label aligné, date fixe, radios prennent le reste */
    column-gap: 10px;
    align-items: center;
}

.ticket-absence-label {
    text-align: right;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}

/* Wrapper obligatoire (variante officielle) pour les radios */
.ticket-absence-session {
    align-self: start; /* radios restent en haut, pas centrées verticalement */
}

/* Radios verticales compactes (réutilise tes classes) */
.ticket-session-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 4px; /* plus serré que 6px pour limiter la hauteur */
    line-height: 1.05;
}

.ticket-session-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600; /* texte en gras */
    cursor: pointer;
    margin: 0;
}

    .ticket-session-option input {
        transform: scale(0.9);
        margin: 0;
    }

/* --- KPI compact inline footer --- */
.ticket-footer {
    margin-top: 6px;
}

.ticket-kpi-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #0B2447;
    font-weight: 600;
}

.ticket-kpi-inline-value {
    background: var(--secondary-color);
    color: white;
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.2;
}

/* ── DS overrides : champs compacts dans les formulaires ticket ── */

.ticket-form .mts-field__input,
.ticket-form .mts-field__select,
.ticket-form .mts-field__value-display {
    font-size: 0.85rem;
    padding: 5px 10px;
    height: auto;
    min-height: unset;
}

/* Préserve l'espace à droite pour la croix de vidage */
.ticket-form .mts-field__value-display.mts-field__value-display--has-clear {
    padding-right: 2.2rem;
}

/* Sélecteur élève pleine largeur */
.ticket-student-selector {
    width: 100%;
}

.ticket-student-selector .mts-combobox {
    width: 100%;
}

/* Affichage nom élève dans ItemTemplate et ValueTemplate */
.student-last-name {
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
}

.student-first-name {
    font-weight: 700;
    color: cornflowerblue;
}

.student-classroom {
    margin-left: auto;
    font-size: 0.8em;
    font-weight: 700;
    color: color-mix(in srgb, var(--mts-secondary-500, #b8860b) 85%, #000);
    background: color-mix(in srgb, var(--mts-secondary-500, #b8860b) 12%, white);
    border: 1px solid color-mix(in srgb, var(--mts-secondary-500, #b8860b) 30%, transparent);
    border-radius: 3px;
    padding: 0.06rem 0.4rem;
    white-space: nowrap;
}

/* Skeleton si élèves en cours de chargement */
.student-skeleton-input {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 10px;
    background: #f9fafb;
    min-height: 34px;
}

.student-skeleton-label {
    font-size: 0.85rem;
    color: #9ca3af;
    font-style: italic;
}