/* ==========================================================
   FOLLOWSCHOOL — Refonte design globale
   Couvre : tableaux de bord, formulaires, tableaux, listes,
   messages, pages d'authentification et contenus AJAX.
   ========================================================== */
:root {
    --fs-orange: #f07b2c;
    --fs-orange-2: #ff9d52;
    --fs-green: #009a44;
    --fs-green-2: #22c55e;
    --fs-ink: #102033;
    --fs-muted: #64748b;
    --fs-soft: #f6f8fc;
    --fs-soft-2: #eef4fb;
    --fs-white: #ffffff;
    --fs-border: #e3eaf3;
    --fs-border-strong: #d5deea;
    --fs-danger: #dc2626;
    --fs-warning: #d97706;
    --fs-success: #16a34a;
    --fs-info: #2563eb;
    --fs-radius-xs: 8px;
    --fs-radius-sm: 12px;
    --fs-radius: 18px;
    --fs-radius-lg: 26px;
    --fs-shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
    --fs-shadow: 0 18px 50px rgba(15, 23, 42, .10);
    --fs-shadow-hover: 0 26px 70px rgba(15, 23, 42, .14);
    --fs-gradient: linear-gradient(135deg, var(--fs-orange), var(--fs-green));
    --fs-gradient-soft: linear-gradient(135deg, rgba(240,123,44,.13), rgba(0,154,68,.13));
    --fs-transition: 180ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, .teacher-body {
    margin: 0 !important;
    min-height: 100vh !important;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
    color: var(--fs-ink) !important;
    background:
        radial-gradient(circle at 5% 0%, rgba(240,123,44,.13), transparent 30%),
        radial-gradient(circle at 98% 8%, rgba(0,154,68,.12), transparent 32%),
        linear-gradient(180deg, #f8fbff 0%, #f5f8fc 100%) !important;
}
body:not(.teacher-body) {
    letter-spacing: -.01em;
}
img, svg { max-width: 100%; }
a { color: inherit; }

/* -------- Layout global -------- */
.sidebar, .teacher-sidebar {
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90)) !important;
    border-right: 1px solid rgba(226, 232, 240, .95) !important;
    box-shadow: 18px 0 45px rgba(15, 23, 42, .07) !important;
    backdrop-filter: blur(18px) !important;
}
.sidebar .logo, .teacher-brand {
    position: relative !important;
    margin: 0 18px 18px !important;
    padding: 18px !important;
    border: 1px solid rgba(226,232,240,.9) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, #fff, rgba(248,250,252,.90)) !important;
    box-shadow: var(--fs-shadow-sm) !important;
}
.sidebar .logo img, .teacher-brand-logo, .login-box .logo {
    border-radius: 18px !important;
    box-shadow: 0 12px 26px rgba(240,123,44,.16) !important;
}
.sidebar .logo h3, .teacher-brand-title {
    color: var(--fs-ink) !important;
    font-weight: 900 !important;
    letter-spacing: -.04em !important;
}
.sidebar nav, .teacher-nav { padding: 0 12px !important; }
.sidebar nav a, .teacher-nav-item, .btn-nav {
    border: 0 !important;
    border-radius: 15px !important;
    margin: 5px 0 !important;
    color: #42526a !important;
    background: transparent !important;
    font-weight: 750 !important;
    transition: transform var(--fs-transition), background var(--fs-transition), color var(--fs-transition), box-shadow var(--fs-transition) !important;
}
.sidebar nav a:hover, .sidebar nav a.active,
.teacher-nav-item:hover, .teacher-nav-item.active,
.btn-nav:hover, .btn-nav.active {
    color: var(--fs-orange) !important;
    background: linear-gradient(135deg, rgba(240,123,44,.12), rgba(0,154,68,.08)) !important;
    transform: translateX(4px) !important;
    box-shadow: inset 0 0 0 1px rgba(240,123,44,.13) !important;
}
.sidebar nav a svg, .teacher-nav-item svg { color: currentColor !important; fill: none; }
.sidebar .footer, .teacher-logout {
    margin: auto 16px 0 !important;
    padding: 16px !important;
    border: 1px solid rgba(226,232,240,.90) !important;
    border-radius: 18px !important;
    background: #fff !important;
    color: var(--fs-muted) !important;
    box-shadow: var(--fs-shadow-sm) !important;
}
.main, .teacher-main {
    background: transparent !important;
    padding: clamp(18px, 3vw, 36px) !important;
}
.page-header, .teacher-topbar, .pedago-header, .eval-header, .presence-header, .prog-header,
.test-header, .detail-header, .notes-header, .form-header, .ct-container > h3:first-child {
    border-radius: 28px !important;
    padding: clamp(18px, 2.7vw, 30px) !important;
    margin-bottom: 22px !important;
    background:
        linear-gradient(135deg, rgba(16,32,51,.96), rgba(14,56,78,.94)),
        linear-gradient(135deg, var(--fs-orange), var(--fs-green)) !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18) !important;
    position: relative !important;
    overflow: hidden !important;
}
.page-header:after, .teacher-topbar:after, .pedago-header:after, .eval-header:after, .presence-header:after,
.prog-header:after, .test-header:after, .detail-header:after, .notes-header:after, .form-header:after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -90px;
    top: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240,123,44,.38), transparent 65%);
    pointer-events: none;
}
.page-header h1, .teacher-page-title, .pedago-header h3, .eval-header h3, .presence-header h3,
.prog-header h3, .test-header h3, .detail-header h3, .notes-header h3, .form-title {
    margin: 0 !important;
    color: white !important;
    font-size: clamp(1.45rem, 2.4vw, 2.25rem) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: -.045em !important;
}
.page-header p, .teacher-page-subtitle, .form-subtitle, .section-subtitle {
    color: rgba(255,255,255,.78) !important;
    margin-top: 8px !important;
}

/* -------- Cartes & sections -------- */
.card, .form-card, .section-card, .panel, .dynamic-content, .teacher-card,
.eval-container, .presence-container, .ct-container, .eleves-container, .notes-container,
.results-container, .pedago-container, .prog-container, .test-container, .detail-container,
.reply-container, .comm-container, .com-container, .bulletin-container, .sim-wrapper,
.questionnaire-card, .message-card, .choix-card, .teacher-stat-card, .teacher-action-card,
.teacher-course-card, .teacher-welcome, .form-container, .content-card {
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(226,232,240,.92) !important;
    border-radius: var(--fs-radius-lg) !important;
    box-shadow: var(--fs-shadow) !important;
    overflow: hidden !important;
    transition: transform var(--fs-transition), box-shadow var(--fs-transition), border-color var(--fs-transition) !important;
}
.card:hover, .teacher-stat-card:hover, .teacher-action-card:hover, .teacher-course-card:hover, .choix-card:hover,
.questionnaire-card:hover, .message-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--fs-shadow-hover) !important;
    border-color: rgba(240,123,44,.28) !important;
}
.card, .form-card, .section-card, .panel, .dynamic-content, .teacher-card,
.eval-container, .presence-container, .ct-container, .eleves-container, .notes-container,
.results-container, .pedago-container, .prog-container, .test-container, .detail-container,
.reply-container, .comm-container, .com-container, .bulletin-container, .sim-wrapper,
.form-container, .content-card {
    padding: clamp(18px, 2.2vw, 28px) !important;
}
.cards-grid, .teacher-stats-grid, .teacher-quick-actions, .teacher-course-grid, .choix-grid,
.form-grid, .note-grid, .grid, .two-columns {
    gap: 18px !important;
}
.card-menu, .info-eleve, .score-box, .entry, .edt-entry, .student-row,
.message-item, .eleve-item, .summary-item, .trimestre-row, .affectation-row {
    border: 1px solid var(--fs-border) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #fff, #fbfdff) !important;
    box-shadow: var(--fs-shadow-sm) !important;
}

/* -------- Formulaires -------- */
form { margin: 0; }
.form-group, .form-row, .filter-row { margin-bottom: 18px !important; }
.form-group label, label, .field-label {
    display: block;
    margin-bottom: 7px !important;
    font-weight: 800 !important;
    color: #26364a !important;
    font-size: .93rem !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select, textarea, .input-wrapper input, .input-with-icon input {
    width: 100% !important;
    min-height: 46px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--fs-border-strong) !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    color: var(--fs-ink) !important;
    font: inherit !important;
    outline: none !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.02) !important;
    transition: border-color var(--fs-transition), box-shadow var(--fs-transition), transform var(--fs-transition), background var(--fs-transition) !important;
}
textarea { min-height: 118px !important; resize: vertical !important; line-height: 1.55 !important; }
select {
    cursor: pointer !important;
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    appearance: none !important;
}
input:focus, select:focus, textarea:focus,
.input-wrapper input:focus, .input-with-icon input:focus {
    border-color: rgba(240,123,44,.85) !important;
    box-shadow: 0 0 0 4px rgba(240,123,44,.14) !important;
    background: #fff !important;
}
input[type="checkbox"], input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--fs-orange) !important;
    vertical-align: middle !important;
}
.form-hint, small, .meta, .subtitle, .teacher-card-subtitle, .teacher-course-meta,
.teacher-schedule-meta, .empty, .empty-message, .empty-state {
    color: var(--fs-muted) !important;
}
.file-upload-button {
    border-radius: 16px !important;
    border: 1px dashed rgba(0,154,68,.40) !important;
    color: var(--fs-green) !important;
    background: rgba(0,154,68,.07) !important;
}
.file-upload-button:hover { background: rgba(0,154,68,.12) !important; }

/* -------- Boutons -------- */
button, .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-submit, .btn-save,
.btn-add, .btn-back, .back-link, .note-btn, .btn-notes, input[type="submit"], input[type="button"],
a.btn, .actions a, .actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
    border-radius: 14px !important;
    border: 1px solid var(--fs-border) !important;
    background: #fff !important;
    color: var(--fs-ink) !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform var(--fs-transition), box-shadow var(--fs-transition), background var(--fs-transition), color var(--fs-transition), border-color var(--fs-transition) !important;
}
button:hover, .btn:hover, .btn-secondary:hover, .btn-back:hover, .back-link:hover,
.note-btn:hover, .btn-notes:hover, input[type="submit"]:hover, input[type="button"]:hover,
a.btn:hover, .actions a:hover, .actions button:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--fs-shadow-sm) !important;
    border-color: rgba(240,123,44,.35) !important;
}
.btn-primary, .btn-submit, .btn-save, .btn-add, button[type="submit"], input[type="submit"], .note-btn,
.teacher-action-card .teacher-action-icon, .teacher-stat-icon {
    background: var(--fs-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 14px 28px rgba(240,123,44,.22) !important;
}
.btn-danger, a[href*="delete"], a[href*="supprimer"], .actions .btn-danger {
    background: #fff1f2 !important;
    color: var(--fs-danger) !important;
    border-color: #fecdd3 !important;
}
.btn-warning {
    background: #fffbeb !important;
    color: var(--fs-warning) !important;
    border-color: #fde68a !important;
}
.btn-sm { min-height: 34px !important; padding: 7px 11px !important; font-size: .84rem !important; }
.actions { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.actions svg, .btn svg, button svg { width: 18px !important; height: 18px !important; }

/* -------- Tableaux -------- */
table, .table-custom, .notes-table, .eval-table, .eleves-table, .edt-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
    border: 1px solid var(--fs-border) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: var(--fs-shadow-sm) !important;
}
th, td {
    border: 0 !important;
    border-bottom: 1px solid var(--fs-border) !important;
    padding: 14px 16px !important;
    text-align: left !important;
    vertical-align: middle !important;
}
th {
    background: linear-gradient(180deg, #f8fafc, #eef4fb) !important;
    color: #344256 !important;
    font-size: .78rem !important;
    text-transform: uppercase !important;
    letter-spacing: .055em !important;
    font-weight: 900 !important;
}
tr:last-child td { border-bottom: 0 !important; }
tr:hover td { background: #fbfdff !important; }
.table-wrapper, .fs-table-wrap, .card:has(table), .section-card:has(table) {
    overflow-x: auto !important;
}

/* -------- Badges, états, alertes -------- */
.badge, .moyenne-badge, .score-badge, .risk-badge, .badge-success, .badge-warning,
.badge-danger, .badge-actif, .badge-expire, .status-select, .teacher-coef-pill, .notif-badge,
.teacher-notif-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 999px !important;
    padding: 5px 10px !important;
    font-size: .77rem !important;
    font-weight: 900 !important;
    border: 1px solid transparent !important;
}
.badge-success, .badge-actif, .success-message { background: #ecfdf5 !important; color: #047857 !important; border-color: #bbf7d0 !important; }
.badge-warning, .info-message { background: #fffbeb !important; color: #b45309 !important; border-color: #fde68a !important; }
.badge-danger, .badge-expire, .error-message { background: #fff1f2 !important; color: #be123c !important; border-color: #fecdd3 !important; }
.success, .error, .info, .success-message, .error-message, .info-message {
    border-radius: 16px !important;
    padding: 14px 16px !important;
    margin: 12px 0 !important;
    border: 1px solid !important;
    font-weight: 750 !important;
}
.success { background: #ecfdf5 !important; color: #047857 !important; border-color: #bbf7d0 !important; }
.error { background: #fff1f2 !important; color: #be123c !important; border-color: #fecdd3 !important; }
.info { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
.empty-state, .empty-message, .teacher-empty-state {
    border: 1px dashed var(--fs-border-strong) !important;
    border-radius: 20px !important;
    padding: 26px !important;
    background: #f8fbff !important;
    text-align: center !important;
}

/* -------- Pages d'authentification -------- */
body:has(.login-box) {
    display: grid !important;
    place-items: center !important;
    min-height: 100vh !important;
    padding: 24px !important;
    background:
        radial-gradient(circle at 18% 15%, rgba(240,123,44,.22), transparent 28%),
        radial-gradient(circle at 80% 20%, rgba(0,154,68,.18), transparent 30%),
        linear-gradient(135deg, #0f172a 0%, #102033 46%, #083f36 100%) !important;
}
.login-box {
    width: min(100%, 460px) !important;
    padding: 34px !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    box-shadow: 0 35px 90px rgba(0,0,0,.32) !important;
    position: relative !important;
    overflow: hidden !important;
}
.login-box:before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: var(--fs-gradient);
}
.login-box h2 {
    font-size: 2.1rem !important;
    font-weight: 950 !important;
    letter-spacing: -.06em !important;
    color: var(--fs-ink) !important;
}
.login-box .subtitle { color: var(--fs-muted) !important; }
.password-toggle {
    min-height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* -------- Modules spécifiques -------- */
.teacher-body .teacher-topbar, .teacher-body .teacher-stat-card, .teacher-body .teacher-action-card,
.teacher-body .teacher-course-card, .teacher-body .teacher-card, .teacher-body .teacher-welcome {
    border-radius: var(--fs-radius-lg) !important;
}
.teacher-profile-card {
    border: 1px solid var(--fs-border) !important;
    border-radius: 22px !important;
    background: var(--fs-gradient-soft) !important;
    box-shadow: var(--fs-shadow-sm) !important;
}
.teacher-avatar {
    background: var(--fs-gradient) !important;
    box-shadow: 0 14px 28px rgba(240,123,44,.22) !important;
}
.notif-bell, .teacher-notif {
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid var(--fs-border) !important;
    box-shadow: var(--fs-shadow-sm) !important;
}
.tabs, .com-tabs {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: #eef4fb !important;
}
.tabs button, .com-tab {
    border-radius: 13px !important;
    background: transparent !important;
    color: var(--fs-muted) !important;
    box-shadow: none !important;
}
.tabs button.active, .com-tab.active, .active-panel {
    background: #fff !important;
    color: var(--fs-orange) !important;
    box-shadow: var(--fs-shadow-sm) !important;
}
.modal, .modal-overlay .modal {
    border-radius: 26px !important;
    border: 1px solid var(--fs-border) !important;
    box-shadow: 0 34px 100px rgba(15,23,42,.28) !important;
}
.modal-overlay {
    background: rgba(15,23,42,.45) !important;
    backdrop-filter: blur(8px) !important;
}
.progress, .progress-bar {
    border-radius: 999px !important;
}
.progress { background: #e2e8f0 !important; overflow: hidden !important; }
.progress-bar { background: var(--fs-gradient) !important; }

/* -------- Responsive -------- */
.hamburger, .teacher-mobile-toggle {
    border-radius: 16px !important;
    border: 1px solid var(--fs-border) !important;
    box-shadow: var(--fs-shadow) !important;
    background: #fff !important;
}
@media (max-width: 900px) {
    .main, .teacher-main { padding: 16px !important; padding-top: 72px !important; }
    .page-header, .teacher-topbar { border-radius: 22px !important; }
    .cards-grid, .teacher-stats-grid, .teacher-dashboard-grid, .teacher-quick-actions,
    .teacher-course-grid, .choix-grid, .form-grid, .note-grid, .two-columns {
        grid-template-columns: 1fr !important;
    }
    table { min-width: 680px !important; }
    .sidebar, .teacher-sidebar { max-width: min(86vw, 320px) !important; }
}
@media (max-width: 520px) {
    .login-box { padding: 26px 20px !important; border-radius: 24px !important; }
    .page-header h1, .teacher-page-title { font-size: 1.55rem !important; }
    th, td { padding: 12px !important; }
    button, .btn, input[type="submit"] { width: 100%; }
    .actions button, .actions a, .btn-sm { width: auto; }
}