/* ============================================================
   DESIGN SYSTEM PRÉINSCRIPTION - Lycée Technique Ibn Sina
   Feuille de style partagée pour toutes les pages admin
   Compatible Bootstrap 4.x et 5.x
   ============================================================ */

/* ---------- Bandeau de titre harmonisé ---------- */
.page-header {
    background: linear-gradient(135deg, #343a40, #212529);
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.page-header h1 {
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 0.25rem;
}
.page-header p {
    opacity: 0.85;
    margin-bottom: 0;
}

/* ---------- Cartes ---------- */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}
.card-header {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: 1px solid #dee2e6;
}

/* ---------- Boutons ---------- */
.btn-primary {
    background: linear-gradient(135deg, #007bff, #0056b3);
    border: none;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #0056b3, #004494);
}
.btn-success {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    border: none;
}
.btn-success:hover {
    background: linear-gradient(135deg, #1e7e34, #145523);
}

/* Bouton WhatsApp aux couleurs de la marque */
.btn-wa {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white !important;
    border: none;
    font-weight: 500;
}
.btn-wa:hover, .btn-wa:focus {
    background: linear-gradient(135deg, #128C7E, #0e6e63);
    color: white !important;
}
.btn-outline-wa {
    color: #128C7E;
    border-color: #25D366;
}
.btn-outline-wa:hover {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border-color: transparent;
}

/* Lien WhatsApp dans les cellules */
.wa-link {
    text-decoration: none;
    font-weight: 500;
    color: #128C7E;
    white-space: nowrap;
}
.wa-link:hover {
    color: #0e6e63;
}

/* ---------- Cartes statistiques KPI ---------- */
.kpi-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}
.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.kpi-card .kpi-body {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
}
.kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: white;
    margin-right: 1rem;
    flex-shrink: 0;
}
.kpi-number {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}
.kpi-label {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.kpi-blue { background: linear-gradient(135deg, #4e73df, #2e59d9); }
.kpi-teal { background: linear-gradient(135deg, #1cc88a, #13855c); }
.kpi-orange { background: linear-gradient(135deg, #f6c23e, #dda20a); }
.kpi-purple { background: linear-gradient(135deg, #9b59b6, #7d3d98); }
.kpi-red { background: linear-gradient(135deg, #e74a3b, #be2617); }
.kpi-blue-soft { background-color: #eef2ff; }
.kpi-teal-soft { background-color: #e6faf3; }
.kpi-orange-soft { background-color: #fdf6e3; }
.kpi-purple-soft { background-color: #f5ecf8; }
.kpi-red-soft { background-color: #fdecea; }

/* ---------- Filtres compacts ---------- */
.filter-bar label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

/* ---------- Tableaux ---------- */
.table-wrapper {
    max-height: 65vh;
    overflow-y: auto;
    border-radius: 8px;
}
.table-sticky thead th,
table.dataTable.table-sticky thead th {
    position: sticky !important;
    top: 0;
    z-index: 10;
    background: linear-gradient(135deg, #343a40, #212529);
    color: white;
    border: none !important;
}
table.dataTable thead th {
    vertical-align: middle;
}
.table td {
    vertical-align: middle !important;
}

/* Noms d'étudiants dans les cellules */
.student-name {
    font-weight: 600;
    color: #212529;
}
.student-prenom {
    font-size: 0.8rem;
    color: #6c757d;
}

/* ---------- Zone dangereuse (accordéon replié) ---------- */
.danger-toggle {
    text-decoration: none;
    font-weight: 600;
}
.danger-toggle:hover {
    text-decoration: none;
}

/* ---------- Pied de page ---------- */
.footer {
    margin-top: 2rem;
    padding: 1rem 0;
    background-color: #343a40;
    color: white;
}