/* ============================================================
   Chemin : public_html/assets/css/sige.css
   Projet : SIGE — Système Intégré de Gestion des Émargements
   Description : Styles personnalisés pour l'interface SIGE UPGC
   ============================================================ */

/* -------------------------------------------------------
   Variables de couleurs UPGC
   ------------------------------------------------------- */
:root {
    --sige-bleu-fonce:   #1a3a6b;
    --sige-bleu-moyen:   #2c5aa0;
    --sige-bleu-clair:   #4a90d9;
    --sige-vert:         #28a745;
    --sige-rouge:        #dc3545;
    --sige-orange:       #fd7e14;
    --sige-jaune:        #ffc107;
    --sige-gris-clair:   #f8f9fa;
    --sige-gris-bord:    #dee2e6;
    --sige-texte-fonce:  #212529;
}

/* -------------------------------------------------------
   Navigation
   ------------------------------------------------------- */
.sige-navbar {
    background-color: var(--sige-bleu-fonce);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sige-navbar .navbar-brand {
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}

/* -------------------------------------------------------
   Pied de page
   ------------------------------------------------------- */
.sige-footer {
    background-color: var(--sige-gris-clair);
    border-top: 1px solid var(--sige-gris-bord);
    margin-top: auto;
}

/* -------------------------------------------------------
   Carte de pointage mobile
   ------------------------------------------------------- */
.carte-pointage {
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.carte-pointage .card-header {
    background: linear-gradient(135deg, var(--sige-bleu-fonce), var(--sige-bleu-moyen));
    border-radius: 16px 16px 0 0;
    color: #fff;
    padding: 1.5rem;
}

/* Bouton d'action de pointage (grand, central) */
.btn-pointage-principal {
    width: 100%;
    padding: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-pointage-principal:active {
    transform: scale(0.97);
}

/* Icône GPS animée */
.icone-gps-recherche {
    animation: pulse-gps 1.5s ease-in-out infinite;
    color: var(--sige-bleu-clair);
}

@keyframes pulse-gps {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.2); }
}

/* Badge statut GPS */
.badge-gps-ok      { background-color: var(--sige-vert); }
.badge-gps-erreur  { background-color: var(--sige-rouge); }
.badge-gps-attente { background-color: var(--sige-orange); }

/* -------------------------------------------------------
   Mode Kiosque
   ------------------------------------------------------- */
.ecran-kiosque {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--sige-bleu-fonce) 0%, #0d1f3c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.carte-kiosque {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Champs PIN kiosque : 4 cases distinctes */
.groupe-pin {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.case-pin {
    width: 60px;
    height: 70px;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    border: 2px solid var(--sige-gris-bord);
    border-radius: 10px;
    transition: border-color 0.2s;
}

.case-pin:focus {
    border-color: var(--sige-bleu-moyen);
    outline: none;
    box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.2);
}

/* Message flash kiosque */
.flash-kiosque {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    padding: 1.5rem 2rem;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    border-radius: 0 0 16px 16px;
    animation: slide-down 0.3s ease;
}

.flash-kiosque-succes  { background: var(--sige-vert); color: #fff; }
.flash-kiosque-retard  { background: var(--sige-orange); color: #fff; }
.flash-kiosque-erreur  { background: var(--sige-rouge); color: #fff; }

@keyframes slide-down {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* -------------------------------------------------------
   Tableau de bord DRH
   ------------------------------------------------------- */
.carte-stat {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s;
}

.carte-stat:hover {
    transform: translateY(-3px);
}

.carte-stat .stat-icone {
    font-size: 2.5rem;
    opacity: 0.8;
}

.carte-stat-vert    { border-left: 5px solid var(--sige-vert); }
.carte-stat-rouge   { border-left: 5px solid var(--sige-rouge); }
.carte-stat-bleu    { border-left: 5px solid var(--sige-bleu-moyen); }
.carte-stat-orange  { border-left: 5px solid var(--sige-orange); }

/* Carte Google Maps */
#carte-dashboard {
    height: 500px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}

/* -------------------------------------------------------
   Formulaire d'absence
   ------------------------------------------------------- */
.zone-upload {
    border: 2px dashed var(--sige-gris-bord);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.zone-upload:hover,
.zone-upload.drag-over {
    border-color: var(--sige-bleu-moyen);
    background-color: rgba(74, 144, 217, 0.05);
}

/* -------------------------------------------------------
   Indicateurs de statut
   ------------------------------------------------------- */
.indicateur-statut {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.indicateur-vert    { background-color: var(--sige-vert); }
.indicateur-rouge   { background-color: var(--sige-rouge); }
.indicateur-orange  { background-color: var(--sige-orange); }
.indicateur-bleu    { background-color: var(--sige-bleu-clair); }

/* -------------------------------------------------------
   Responsive — Ajustements mobiles
   ------------------------------------------------------- */
@media (max-width: 576px) {
    .carte-kiosque {
        margin: 1rem;
        padding: 1.5rem;
    }

    .case-pin {
        width: 50px;
        height: 60px;
        font-size: 1.6rem;
    }

    #carte-dashboard {
        height: 350px;
    }
}