/*
 * FilDuJus — Styles personnalisés
 * Surcharges légères de Bootstrap 5
 */

/* ============================================================
   COULEUR PRINCIPALE — modifie navbar, boutons, badges "primary"
   ============================================================ */
:root {
    --bs-primary:        #fe0303;
    --bs-primary-rgb:    254, 3, 3;
    --bs-link-color:     #fe0303;
    --bs-link-hover-color: #cb0202;
}

/* ============================================================
   BORNE — CARTES DE STATUT
   ============================================================ */

/* Carte statut borne : couleur de fond selon l'état */
.card-borne-libre {
    border-left: 5px solid #198754; /* vert Bootstrap success */
}

.card-borne-occupee {
    border-left: 5px solid var(--bs-primary);
}

.card-borne-retard {
    border-left: 5px solid #dc3545; /* rouge Bootstrap danger */
    animation: pulse-border 2s ease-in-out infinite;
}

/* Animation subtile pour le statut "En retard" */
@keyframes pulse-border {
    0%, 100% { border-left-color: #dc3545; }
    50%       { border-left-color: #ff6b6b; }
}

/* Badge de statut grand format */
.badge-status {
    font-size: 1rem;
    padding: 0.5em 1em;
    border-radius: 2rem;
}

/* Temps restant affiché en grand */
.time-remaining {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.time-remaining.overdue {
    color: #dc3545;
}

/* ============================================================
   FILE D'ATTENTE
   ============================================================ */

/* Numéro de position dans la file */
.queue-position-badge {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.queue-item {
    border-left: 3px solid #dee2e6;
    transition: border-color 0.2s;
}

.queue-item:first-child {
    border-left-color: #fd7e14; /* orange = prochain */
}

.queue-item.current-user {
    background-color: #fff3cd; /* fond jaune clair pour l'utilisateur courant */
    border-left-color: #ffc107;
}

/* ============================================================
   VÉHICULE — IDENTIFICATION DANS LES CARTES
   ============================================================ */

.vehicle-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 2rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Pastille de couleur véhicule */
.vehicle-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.15);
    flex-shrink: 0;
}

/* ============================================================
   ACTIONS UTILISATEUR — BOUTONS D'ACTION PRINCIPAUX
   ============================================================ */

.btn-action-primary {
    padding: 0.75rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 0.5rem;
    width: 100%;
}

/* Card d'actions avec fond légèrement coloré */
.card-actions {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
}

/* ============================================================
   HISTORIQUE — TABLEAU
   ============================================================ */

.table-history th {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

/* Ligne "en retard" dans l'historique */
.row-overdue td {
    background-color: #fff5f5;
}

/* ============================================================
   NAVBAR
   ============================================================ */

/* Légère ombre sous la navbar */
.navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   UTILITAIRES
   ============================================================ */

/* Section vide (file vide, historique vide…) */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: #6c757d;
}

.empty-state i {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

/* Indicateur de rafraîchissement auto dans le footer */
#refresh-countdown {
    font-size: 0.78rem;
    opacity: 0.7;
}

/* Responsive : sur petit écran, empiler les cartes */
@media (max-width: 576px) {
    .time-remaining {
        font-size: 1.5rem;
    }

    .btn-action-primary {
        font-size: 0.95rem;
        padding: 0.65rem 1rem;
    }
}