/* START OF FILE style.css */
/* static/css/style.css */

/* ... (tous les autres styles restent les mêmes) ... */
/* Styles généraux */
body {
    padding-top: 20px;
    background-color: #dfa13e; /* Fond légèrement gris */
    font-family: sans-serif; /* Optionnel: Définir une police de base */
}

.container {
    max-width: 600px;
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 20px auto; /* Centrer et ajouter de la marge */
}

h1 {
    color: #343a40; /* Gris foncé pour le titre */
}
/* -- Styles Vidéo Corrigés -- */
#video-container {
    /* Taille fixe approximative de 8cm x 8cm (300px est une bonne approximation) */
    width: 500px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-bottom: 0.5rem;
    background-color: #a5cbf1;
    border-radius: 0.25rem;
    overflow: hidden; /* Cache les parties de la vidéo qui dépassent */
}

#video {
    width: 100%;
    height: 100%;
    /* Conserve les proportions, couvre la zone, coupe l'excès */
    object-fit: cover;
    display: block;
    border: none;
}

#scan-result-display {
    margin-top: 5px;
    font-weight: bold;
    min-height: 1.5em; /* Garde l'espace même si vide */
    transition: color 0.3s ease; /* Transition douce pour changement de couleur */
}
#scan-result-display.text-success { color: #198754 !important; } /* Vert Bootstrap */
#scan-result-display.text-danger { color: #dc3545 !important; } /* Rouge Bootstrap */


.or-separator {
    text-align: center;
    margin: 1.5rem 0;
    color: #6c757d;
    font-weight: bold;
}

/* --- NOUVEAU STYLE --- */
#manual-selection-display {
    font-size: 0.9em;
}
#selected-employee-name {
    font-size: 35px;
    font-weight: 700;
    line-height: 1;
}
/* ...existing code... */
#leave_type_display {
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}
/* ...existing code... */
/* --- Styles pour les couleurs des Boutons --- */

#start-scan-btn { background-color: #198754; border-color: #198754; color: white; }
#start-scan-btn:hover { background-color: #157347; border-color: #146c43; }

#stop-scan-btn { background-color: #dc3545; border-color: #dc3545; color: white; }
#stop-scan-btn:hover { background-color: #bb2d3b; border-color: #b02a37; }

#cancel-btn { background-color: #dc3545; border-color: #dc3545; color: white; }
#cancel-btn:hover { background-color: #bb2d3b; border-color: #b02a37; }
#cancel-form-btn {
    /* Exemple : couleur rouge personnalisé */
    background-color: #d9534f;
    border-color: #d43f3a;
    color: #fff;
}
/* Variante outline */
.btn-outline-danger {
    color: #d9534f;
    border-color: #d9534f;
    background: transparent;
}
form button[type="submit"].btn-primary { background-color: #0d6efd; border-color: #0d6efd; color: white; }
form button[type="submit"].btn-primary:hover:not(:disabled) { /* Ne pas changer au survol si désactivé */
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* --- Styles pour les Zones --- */

#scan-zone { background-color: #e7f1ff; border-color: #b8d4fe; }
/* La zone select-pin-zone n'existe plus directement sur la page */
#manual-id-zone { background-color: #e6fff0; border-color: #b3ffcb; }


/* Style pour le bouton pendant le chargement */
#submit-btn.is-loading .button-text {
    /* Optionnel: Masquer le texte */
     visibility: hidden;
     opacity: 0;
     display: inline-block; /* Garde la largeur */
}
 #submit-btn.is-loading .spinner-border {
    display: inline-block !important; /* Force l'affichage */
    margin-right: 0.5em; /* Espace entre spinner et texte (si texte visible) */
    vertical-align: text-bottom; /* Aligner verticalement */
}
#submit-btn {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; /* Transition douce */
}
/* END OF FILE style.css */