/* ─────────────────────────────────────────────────────────────
   GMAO Collège — Design System
   Variables, composants réutilisables, theme sombre
   ───────────────────────────────────────────────────────────── */

/* ── Variables ── */
:root {
    /* Palette principale */
    --gmao-primary: #2c3e50;
    --gmao-primary-light: #3a546b;
    --gmao-accent: #0d6efd;
    --gmao-success: #198754;
    --gmao-warning: #ffc107;
    --gmao-danger: #dc3545;
    --gmao-info: #0dcaf0;
    --gmao-purple: #6f42c1;

    /* Backgrounds */
    --gmao-bg: #f4f6f9;
    --gmao-card-bg: #ffffff;
    --gmao-card-border: #dee2e6;
    --gmao-navbar-bg: #2c3e50;

    /* Texte */
    --gmao-text: #212529;
    --gmao-text-muted: #6c757d;

    /* Espacement */
    --gmao-radius: 0.75rem;
    --gmao-radius-sm: 0.5rem;
    --gmao-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --gmao-shadow-hover: 0 4px 16px rgba(0,0,0,0.12);
    --gmao-transition: 0.2s ease;
}

/* ── Theme sombre ── */
[data-bs-theme="dark"] {
    --gmao-bg: #1a1d24;
    --gmao-card-bg: #252a33;
    --gmao-card-border: #3a3f4b;
    --gmao-navbar-bg: #1a1d24;
    --gmao-text: #e0e0e0;
    --gmao-text-muted: #9a9a9a;
    --gmao-shadow: 0 2px 8px rgba(0,0,0,0.3);
    --gmao-shadow-hover: 0 4px 16px rgba(0,0,0,0.4);
}

/* ── Body ── */
body { background: var(--gmao-bg); color: var(--gmao-text); }
.main-content { padding: 1rem; }
@media (min-width: 768px) { .main-content { padding: 1.5rem 2rem; } }

/* ── Navbar ── */
.navbar-brand i { font-size: 1.3rem; }
.navbar .dropdown-divider { border-color: rgba(255,255,255,0.15); }
.nav-group-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.5); padding: 0.5rem 1rem 0.2rem; }
@media (min-width: 992px) { .nav-group-label { display: none; } }

/* ── Cards ── */
.card { background: var(--gmao-card-bg); border-color: var(--gmao-card-border); border-radius: var(--gmao-radius); box-shadow: var(--gmao-shadow); transition: var(--gmao-transition); }
.card:hover { box-shadow: var(--gmao-shadow-hover); }
.stat-card { transition: transform var(--gmao-transition); border-radius: var(--gmao-radius); }
.stat-card:hover { transform: translateY(-3px); }
.bg-purple { background-color: var(--gmao-purple) !important; }

/* ── Tables responsive ── */
.table-responsive-stack { width: 100%; }
@media (max-width: 767px) {
    .table-responsive-stack thead { display: none; }
    .table-responsive-stack tbody tr {
        display: block; margin-bottom: 0.75rem;
        border: 1px solid var(--gmao-card-border); border-radius: var(--gmao-radius-sm);
        padding: 0.75rem; background: var(--gmao-card-bg);
    }
    .table-responsive-stack tbody td {
        display: flex; justify-content: space-between; align-items: flex-start;
        padding: 0.3rem 0; border: none; text-align: right;
    }
    .table-responsive-stack tbody td::before {
        content: attr(data-label); font-weight: 600; text-align: left;
        padding-right: 1rem; flex-shrink: 0;
    }
    .table-responsive-stack tbody td:last-child { border-bottom: none; }
}

/* ── Filtres sur mobile ── */
.filter-bar .row > div { margin-bottom: 0.5rem; }

/* ── Workflow bar ── */
.workflow-step { font-size: 0.8rem; padding: 0.3rem 0.5rem; }
@media (max-width: 767px) {
    .workflow-steps { flex-wrap: wrap; gap: 0.3rem; }
    .workflow-step { font-size: 0.7rem; }
}

/* ── Planning cards ── */
.planning-section .badge { font-size: 0.75rem; }

/* ── Composants reutilisables ── */

/* Badge de statut */
.status-badge { font-size: 0.75rem; padding: 0.35rem 0.6rem; border-radius: 1rem; font-weight: 500; }
.status-badge-ok { background: rgba(25,135,84,0.15); color: var(--gmao-success); }
.status-badge-warn { background: rgba(255,193,7,0.15); color: #b8860b; }
.status-badge-err { background: rgba(220,53,69,0.15); color: var(--gmao-danger); }

/* Spinner inline */
.gmao-spinner { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gmao-spin 0.6s linear infinite; display: inline-block; }
@keyframes gmao-spin { to { transform: rotate(360deg); } }

/* Toast container */
#gmao-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 9999; max-width: 400px; }
.gmao-toast { background: var(--gmao-card-bg); border: 1px solid var(--gmao-card-border); border-radius: var(--gmao-radius-sm); box-shadow: var(--gmao-shadow); padding: 1rem; margin-bottom: 0.5rem; animation: gmao-slide-in 0.3s ease; }
@keyframes gmao-slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Empty state */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--gmao-text-muted); }
.empty-state i { font-size: 3rem; opacity: 0.4; }

/* Page header */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem; }
.page-header h1, .page-header .h3 { margin: 0; }

/* Breadcrumb */
.breadcrumb { margin-bottom: 1rem; }

/* Theme toggle button */
.theme-toggle { cursor: pointer; border: none; background: transparent; color: rgba(255,255,255,0.8); font-size: 1.2rem; padding: 0.25rem 0.5rem; }
.theme-toggle:hover { color: white; }