/* ══════════════════════════════════════
   SMH Basket Stage — Styles personnalisés
   ══════════════════════════════════════ */

/* ── Variables ── */
:root {
    --smh-primaire: #1a5276;
    --smh-secondaire: #2e86c1;
    --smh-accent: #f39c12;
    --smh-sidebar-largeur: 260px;
    --smh-navbar-hauteur: 56px;
}

/* ── Base ── */
body { font-size: 16px; min-height: 100vh; }

/* ── Sidebar ── */
/* Fixed sidebar on desktop (lg+), offcanvas on mobile */
.sidebar { width: var(--smh-sidebar-largeur); background-color: var(--smh-primaire); min-height: calc(100vh - var(--smh-navbar-hauteur)); }
.sidebar .nav-link { color: rgba(255,255,255,.8); padding: 0.75rem 1rem; border-radius: 0.375rem; margin: 0.125rem 0.5rem; min-height: 44px; display: flex; align-items: center; gap: 0.75rem; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { color: #fff; background-color: rgba(255,255,255,.15); }
.sidebar .nav-link .bi { font-size: 1.2rem; }

/* Main content offset for sidebar on desktop */
@media (min-width: 992px) {
    .contenu-principal { margin-left: var(--smh-sidebar-largeur); }
}

/* ── Navbar ── */
.navbar-smh { background-color: var(--smh-primaire) !important; }

/* ── Cards statistiques ── */
.carte-stat { border: none; border-radius: 0.75rem; transition: transform 0.2s; }
.carte-stat:hover { transform: translateY(-2px); }
.carte-stat .icone { font-size: 2rem; opacity: 0.8; }

/* ── Tables ── */
/* Mobile card view for tables */
.table-mobile-cards { display: none; }
@media (max-width: 767.98px) {
    .table-desktop { display: none !important; }
    .table-mobile-cards { display: block; }
    .carte-mobile { border: 1px solid #dee2e6; border-radius: 0.5rem; margin-bottom: 0.75rem; padding: 1rem; }
    .carte-mobile .carte-titre { font-weight: 600; margin-bottom: 0.5rem; font-size: 1rem; }
    .carte-mobile .carte-detail { display: flex; justify-content: space-between; padding: 0.25rem 0; font-size: 0.9rem; }
    .carte-mobile .carte-detail .label { color: #6c757d; }
    .carte-mobile .carte-actions { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #dee2e6; display: flex; gap: 0.5rem; flex-wrap: wrap; }
}
@media (min-width: 768px) {
    .table-mobile-cards { display: none !important; }
}

/* ── Badges statut ── */
.badge-brouillon { background-color: #6c757d; }
.badge-ouvert { background-color: #198754; }
.badge-en_cours { background-color: #0d6efd; }
.badge-termine { background-color: #212529; }
.badge-annule { background-color: #dc3545; }
.badge-en_attente { background-color: #ffc107; color: #212529; }
.badge-paye { background-color: #198754; }
.badge-rembourse { background-color: #0dcaf0; color: #212529; }
.badge-envoyee { background-color: #0d6efd; }
.badge-acquittee { background-color: #198754; }

/* ── Boutons tactiles ── */
/* Minimum touch target size */
.btn, .nav-link, .form-select, .form-control { min-height: 44px; }
.btn-action { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ── Formulaires ── */
.form-label { font-weight: 500; margin-bottom: 0.375rem; }

/* ── Présences ── */
.presence-prevu { background-color: #f8f9fa; }
.presence-present { background-color: #d1e7dd; }
.presence-absent { background-color: #f8d7da; }
.presence-malade { background-color: #fff3cd; }
.presence-non_prevu { background-color: #e2e3e5; }

/* ── Calendrier jours ── */
.jour-calendrier { padding: 0.75rem; border: 1px solid #dee2e6; border-radius: 0.5rem; min-height: 44px; cursor: pointer; transition: background-color 0.15s; }
.jour-calendrier:hover { background-color: #e9ecef; }
.jour-calendrier.aujourd-hui { border-color: var(--smh-accent); border-width: 2px; }

/* ── Page inscription publique ── */
.inscription-publique { max-width: 800px; margin: 0 auto; }
.inscription-publique .card { border-radius: 0.75rem; }

/* ── Page connexion ── */
.page-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; }

/* ── Footer ── */
.pied-de-page { border-top: 1px solid #dee2e6; }

/* ── Print ── */
@media print {
    .sidebar, .navbar, .btn, .no-print { display: none !important; }
    .contenu-principal { margin-left: 0 !important; }
}