/* ============================================================
   TutorLab CRM — Stylesheet v1.0
   Primary: #8B9CE2 | Dark: #6B7FD4 | BG: #EEF2FF | Text: #1E1B4B
   ============================================================ */

/* ── Reset & Base ───────────────────────────────────────────── */
.tl-crm-page, .tl-crm-page * { box-sizing: border-box; }
.tl-crm-page { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; }

/* ── Layout ─────────────────────────────────────────────────── */
.tl-crm-layout {
    display: flex;
    min-height: calc(100vh - 100px);
    background: #EEF2FF;
}

/* ── Header ─────────────────────────────────────────────────── */
.tl-header {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 3px solid #8B9CE2;
    box-shadow: 0 2px 8px rgba(139,156,226,0.15);
    position: sticky;
    top: 0;
    z-index: 100;
}
.tl-header-left { display: flex; align-items: center; gap: 0; }
.tl-header-logo { height: 38px; }
.tl-header-separator {
    width: 1px; height: 30px; background: #E2E8F0; margin: 0 16px;
}
.tl-header-title {
    font-size: 18px; font-weight: 700; color: #1E1B4B; margin: 0;
}
.tl-header-right { display: flex; align-items: center; gap: 16px; }
.tl-user-info { text-align: right; }
.tl-user-name { display: block; font-weight: 700; color: #1E1B4B; font-size: 14px; }
.tl-user-role {
    display: inline-block; font-size: 11px; font-weight: 600;
    background: #EEF2FF; color: #6B7FD4;
    padding: 2px 8px; border-radius: 20px; margin-top: 2px;
}
.tl-logout-btn {
    background: #EF4444; color: white; border: none;
    padding: 7px 14px; border-radius: 6px; font-size: 13px;
    font-weight: 600; cursor: pointer; text-decoration: none;
    transition: background 0.2s;
}
.tl-logout-btn:hover { background: #DC2626; color: white; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.tl-sidebar {
    width: 220px;
    min-width: 220px;
    background: #fff;
    border-right: 1px solid #E2E8F0;
    padding: 16px 0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
    flex-shrink: 0;
}
.tl-menu-list { list-style: none; padding: 0; margin: 0; }
.tl-menu-item { margin: 2px 8px; }
.tl-menu-link {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: 8px;
    color: #374151; text-decoration: none;
    font-size: 14px; font-weight: 500;
    transition: all 0.15s;
}
.tl-menu-link:hover { background: #EEF2FF; color: #6B7FD4; text-decoration: none; }
.tl-menu-link.active { background: #8B9CE2; color: white; }
.tl-menu-link.active:hover { background: #6B7FD4; color: white; }
.tl-menu-icon { font-size: 16px; min-width: 20px; }

/* ── Main Content ───────────────────────────────────────────── */
.tl-main-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    max-width: 100%;
}

/* ── Buttons ────────────────────────────────────────────────── */
.tl-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border-radius: 7px; font-size: 14px;
    font-weight: 600; cursor: pointer; border: none;
    text-decoration: none; transition: all 0.15s; white-space: nowrap;
}
.tl-btn-primary  { background: #8B9CE2; color: white; }
.tl-btn-primary:hover { background: #6B7FD4; color: white; }
.tl-btn-success  { background: #10B981; color: white; }
.tl-btn-success:hover { background: #059669; color: white; }
.tl-btn-danger   { background: #EF4444; color: white; }
.tl-btn-danger:hover { background: #DC2626; color: white; }
.tl-btn-warning  { background: #F59E0B; color: white; }
.tl-btn-warning:hover { background: #D97706; color: white; }
.tl-btn-whatsapp { background: #25D366; color: white; }
.tl-btn-whatsapp:hover { background: #1DA851; color: white; }
.tl-btn-outline  { background: transparent; color: #8B9CE2; border: 1.5px solid #8B9CE2; }
.tl-btn-outline:hover { background: #EEF2FF; color: #6B7FD4; }
.tl-btn-sm { padding: 5px 12px; font-size: 12px; }
.tl-btn-xs { padding: 3px 8px; font-size: 11px; }

/* ── Filters Bar ────────────────────────────────────────────── */
.tl-filters {
    background: #fff; padding: 16px 20px;
    border-radius: 10px; margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.tl-filters label { font-size: 13px; font-weight: 600; color: #374151; white-space: nowrap; }
.tl-filters input[type="date"],
.tl-filters input[type="text"],
.tl-filters select {
    padding: 7px 12px; border: 1.5px solid #E2E8F0;
    border-radius: 6px; font-size: 13px; color: #1E1B4B;
    outline: none; transition: border-color 0.2s;
}
.tl-filters input:focus, .tl-filters select:focus { border-color: #8B9CE2; }

/* ── KPI Cards ──────────────────────────────────────────────── */
.tl-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px; margin-bottom: 20px;
}
.tl-kpi-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin-bottom: 20px;
}
.tl-kpi-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px; margin-bottom: 20px;
}
.tl-kpi-card {
    background: #fff; border-radius: 12px;
    padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    text-align: center; position: relative; overflow: hidden;
}
.tl-kpi-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    right: 0; height: 3px; background: #8B9CE2;
}
.tl-kpi-card.tl-card-green::before { background: #10B981; }
.tl-kpi-card.tl-card-green { background: linear-gradient(135deg,#10B981,#059669); color: white; }
.tl-kpi-card.tl-card-blue::before { background: #3B82F6; }
.tl-kpi-label {
    font-size: 12px; font-weight: 600; color: #64748B;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;
}
.tl-kpi-card.tl-card-green .tl-kpi-label { color: #A7F3D0; }
.tl-kpi-value {
    font-size: 32px; font-weight: 800; color: #1E1B4B; line-height: 1;
}
.tl-kpi-card.tl-card-green .tl-kpi-value { color: white; }
.tl-kpi-rate {
    display: inline-block; margin-top: 8px; font-size: 12px;
    font-weight: 700; color: #8B9CE2;
    background: #EEF2FF; padding: 2px 8px; border-radius: 20px;
}
.tl-kpi-card.tl-card-green .tl-kpi-rate { background: rgba(255,255,255,0.25); color: white; }

/* ── Finance Section ────────────────────────────────────────── */
.tl-finance-section {
    background: #fff; border-radius: 12px;
    padding: 20px 24px; margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.tl-finance-section h3 {
    margin: 0 0 16px 0; font-size: 15px; font-weight: 700; color: #1E1B4B;
}
.tl-finance-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; align-items: end;
}
.tl-finance-item label {
    display: block; font-size: 12px; font-weight: 600;
    color: #64748B; margin-bottom: 6px; text-transform: uppercase;
}
.tl-finance-input {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid #E2E8F0; border-radius: 7px;
    font-size: 15px; font-weight: 600; text-align: right; color: #1E1B4B;
    outline: none;
}
.tl-finance-input:focus { border-color: #8B9CE2; }
.tl-finance-result {
    padding: 10px 14px; border-radius: 7px;
    font-size: 16px; font-weight: 800; text-align: center;
}
.tl-finance-result-label {
    font-size: 12px; font-weight: 600; color: #64748B;
    margin-bottom: 6px; text-transform: uppercase;
}
.tl-result-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 20px; font-weight: 700; font-size: 14px;
}
.tl-result-profit { background: #D1FAE5; color: #065F46; }
.tl-result-loss   { background: #FEE2E2; color: #991B1B; }
.tl-result-break  { background: #FEF3C7; color: #92400E; }

/* ── Table Section ──────────────────────────────────────────── */
.tl-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 20px; overflow: hidden;
}
.tl-card-header {
    padding: 16px 20px; border-bottom: 1px solid #F1F5F9;
    display: flex; justify-content: space-between; align-items: center;
}
.tl-card-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: #1E1B4B; }
.tl-card-body { padding: 0; }

/* ── Commission Rates (Prof / Confirmatrice — page "Ma rémunération") ── */
.tl-comm-rates {
    margin-top: 20px;
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 2px 12px rgba(16,24,40,0.06);
    border: 1px solid #F1F5F9;
}
.tl-comm-rates-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.tl-comm-rates-title > span:first-child { font-size: 26px; line-height: 1; }
.tl-comm-rates-title h3 { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: #1E1B4B; }
.tl-comm-rates-title p { margin: 0; font-size: 12.5px; color: #94A3B8; }
.tl-comm-rates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.tl-comm-box {
    border-radius: 14px; padding: 16px 18px;
    background: #F8FAFC; border: 1px solid #EEF1F5;
    position: relative; overflow: hidden;
}
.tl-comm-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.tl-comm-box--violet::before { background: linear-gradient(90deg,#7C3AED,#A78BFA); }
.tl-comm-box--teal::before   { background: linear-gradient(90deg,#0D9488,#5EEAD4); }
.tl-comm-box--amber::before  { background: linear-gradient(90deg,#D97706,#FCD34D); }
.tl-comm-box-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tl-comm-box-icon {
    width: 32px; height: 32px; border-radius: 9px; background: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    box-shadow: 0 1px 3px rgba(16,24,40,0.08);
}
.tl-comm-box-label { font-size: 13px; font-weight: 600; color: #475569; }
.tl-comm-box-amount { font-size: 22px; font-weight: 800; color: #1E1B4B; letter-spacing: -0.3px; display: flex; align-items: center; gap: 6px; }
@media (max-width: 480px) { .tl-comm-box-amount { font-size: 19px; } }
/* Internal table scrolling: keep horizontal + vertical scrollbar with the table card. */
.tl-table-wrap {
    width: 100%;
    max-height: 70vh;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
    position: relative;
}
.tl-table-wrap .tl-table {
    min-width: max-content;
}
.tl-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.tl-table th {
    background: #F8FAFC; padding: 11px 14px;
    font-weight: 700; color: #374151; text-align: left;
    border-bottom: 2px solid #E2E8F0; white-space: nowrap;
    position: sticky; top: 0; z-index: 20;
    background: #F8FAFC;
}
.tl-table td {
    padding: 11px 14px; border-bottom: 1px solid #F1F5F9;
    color: #374151; vertical-align: middle;
}
.tl-table tbody tr:hover { background: #F8FAFC; }
.tl-table tbody tr:last-child td { border-bottom: none; }

/* Row color coding */
.tl-row-new     td { border-left: 3px solid #F59E0B; }
.tl-row-qualified td { border-left: 3px solid #8B9CE2; }
.tl-row-present  td { border-left: 3px solid #10B981; }
.tl-row-inscrit  td { border-left: 3px solid #059669; background: #F0FDF4; }
.tl-row-absent   td { border-left: 3px solid #EF4444; }

/* ── Badges ─────────────────────────────────────────────────── */
.tl-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.tl-badge-new      { background: #FEF3C7; color: #92400E; }
.tl-badge-qualified { background: #EEF2FF; color: #4338CA; }
.tl-badge-present  { background: #D1FAE5; color: #065F46; }
.tl-badge-absent   { background: #FEE2E2; color: #991B1B; }
.tl-badge-closer   { background: #FEF3C7; color: #B45309; border: 1px solid #F59E0B; }
.tl-badge-converti { background: #D1FAE5; color: #065F46; border: 1px solid #10B981; }
.tl-badge-today    { background: #8B9CE2; color: white; }
.tl-badge-admin    { background: #1E1B4B; color: white; }
.tl-badge-conf     { background: #C7D2FE; color: #3730A3; }
.tl-badge-prof     { background: #D1FAE5; color: #065F46; }

/* ── Side Panel ─────────────────────────────────────────────── */
.tl-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 998;
}
.tl-overlay.open { display: block; }
.tl-side-panel {
    position: fixed; top: 0; right: -460px; bottom: 0;
    width: 440px; background: #fff;
    box-shadow: -8px 0 30px rgba(0,0,0,0.15);
    z-index: 999; transition: right 0.3s ease;
    display: flex; flex-direction: column;
}
.tl-side-panel.open { right: 0; }
.tl-side-panel-header {
    padding: 20px 24px; border-bottom: 1px solid #E2E8F0;
    display: flex; justify-content: space-between; align-items: center;
    background: #F8FAFC;
}
.tl-side-panel-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #1E1B4B; }
.tl-panel-header-actions { display: flex; align-items: center; gap: 10px; }
.tl-btn-script {
    background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0;
    font-weight: 600; padding: 6px 14px; border-radius: 6px; font-size: 13px;
    cursor: pointer; white-space: nowrap; transition: background 0.15s;
}
.tl-btn-script:hover { background: #D1FAE5; }
.tl-panel-close {
    background: none; border: none; font-size: 20px;
    cursor: pointer; color: #64748B; padding: 4px;
    border-radius: 4px; transition: background 0.15s;
}
.tl-panel-close:hover { background: #E2E8F0; }
.tl-side-panel-body { flex: 1; overflow-y: auto; padding: 24px; }
.tl-side-panel-footer {
    padding: 16px 24px; border-top: 1px solid #E2E8F0;
    display: flex; gap: 10px; justify-content: flex-end;
    background: #F8FAFC;
}

/* ── Panneau Script d'appel (ancré à gauche — ne recouvre jamais
     le panneau de saisie de droite qui porte les données du prospect) ── */
.tl-script-panel {
    position: fixed; top: 0; left: -440px; bottom: 0;
    width: 400px; background: #fff;
    box-shadow: 8px 0 30px rgba(0,0,0,0.15);
    z-index: 1000; transition: left 0.3s ease;
    display: flex; flex-direction: column;
}
.tl-script-panel.open { left: 0; }
.tl-script-panel-header {
    padding: 18px 24px; border-bottom: 1px solid #A7F3D0;
    display: flex; justify-content: space-between; align-items: center;
    background: #ECFDF5;
}
.tl-script-panel-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: #065F46; }
.tl-script-panel-close {
    background: none; border: none; font-size: 20px;
    cursor: pointer; color: #065F46; padding: 4px;
    border-radius: 4px; transition: background 0.15s;
}
.tl-script-panel-close:hover { background: #A7F3D0; }
.tl-script-panel-body {
    flex: 1; overflow-y: auto; padding: 22px 24px;
}
.tl-script-text {
    direction: rtl; text-align: right;
    font-size: 15px; line-height: 1.9; color: #1E293B;
    font-family: 'Cairo', Tahoma, 'Segoe UI', Arial, sans-serif;
    white-space: normal;
}
/* Forcer Cairo sur tout le texte du script affiché à la confirmatrice,
   pas seulement le bloc FAQ (voir la même règle côté admin ci-dessus dans
   admin-matieres.php) : un texte collé depuis Word/Outlook apporte souvent
   sa propre police en style inline. */
.tl-script-text, .tl-script-text * {
    font-family: 'Cairo', Tahoma, 'Segoe UI', Arial, sans-serif !important;
}
.tl-script-text h3 { font-size: 1.25em; font-weight: 700; margin: .7em 0 .35em; color: #0F172A; }
.tl-script-text h4 { font-size: 1.08em; font-weight: 700; margin: .6em 0 .3em; color: #0F172A; }
.tl-script-text p { margin: .5em 0; }
.tl-script-text ul { list-style: none; margin: .5em 0; padding: 0; }
.tl-script-text ul li { position: relative; padding-inline-end: 18px; margin: .3em 0; }
.tl-script-text ul li::after { content: "–"; position: absolute; inset-inline-end: 0; color: #0F172A; font-weight: 700; }

/* Bloc FAQ — interactif : cliquer sur la question pousse le reste du texte
   vers le bas pour révéler la réponse (flux normal du document, jamais
   de recouvrement). Toujours replié à chaque ouverture du panneau. */
.tl-script-text .tl-faqblock {
    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 8px;
    margin: 12px 0; overflow: hidden;
}
.tl-script-text .tl-faqblock-q {
    margin: 0; padding: 10px 14px; font-weight: 700; color: #0F172A;
    cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: #F1F5F9; transition: background .15s;
}
.tl-script-text .tl-faqblock-q:hover { background: #E2E8F0; }
.tl-script-text .tl-faqblock-q-text { flex: 1; }
/* Pas de flèche ▶ côté confirmatrice : toute la ligne de question est
   cliquable (voir le handler sur .tl-faqblock-q dans tutorlab-crm.js). */
/* Pas de flèche ▶ côté confirmatrice : toute la ligne de question est
   cliquable (voir le handler sur .tl-faqblock-q dans tutorlab-crm.js).
   Le JS la retire déjà du HTML ; ce display:none est un filet de
   sécurité (fonctionne même si un ancien script enregistré la contient
   encore ou en cas de souci de cache navigateur). */
.tl-script-text .tl-faqblock-toggle { display: none !important; }
.tl-script-text .tl-faqblock-delete { display: none !important; }
.tl-script-text .tl-faqblock-a {
    display: none; padding: 4px 14px 14px;
}
.tl-script-text .tl-faqblock.tl-faqblock-open > .tl-faqblock-a { display: block; }

/* ── Form Inputs ────────────────────────────────────────────── */
.tl-form-group { margin-bottom: 18px; }
.tl-form-group label {
    display: block; font-size: 13px; font-weight: 600;
    color: #374151; margin-bottom: 6px;
}
.tl-input, .tl-select, .tl-textarea {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid #E2E8F0; border-radius: 7px;
    font-size: 14px; color: #1E1B4B; outline: none;
    transition: border-color 0.2s; background: white;
}
.tl-input:focus, .tl-select:focus, .tl-textarea:focus {
    border-color: #8B9CE2;
    box-shadow: 0 0 0 3px rgba(139,156,226,0.12);
}
.tl-textarea { resize: vertical; min-height: 80px; }
.tl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Modal ──────────────────────────────────────────────────── */
.tl-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 1000;
    align-items: center; justify-content: center;
}
.tl-modal-overlay.open { display: flex; }
.tl-modal {
    background: #fff; border-radius: 14px;
    width: 100%; max-width: 480px; margin: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: tl-slide-up 0.2s ease;
}
@keyframes tl-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.tl-modal-header {
    padding: 20px 24px; border-bottom: 1px solid #E2E8F0;
    display: flex; justify-content: space-between; align-items: center;
}
.tl-modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: #1E1B4B; }
.tl-modal-body { padding: 24px; }
.tl-modal-footer {
    padding: 16px 24px; border-top: 1px solid #E2E8F0;
    display: flex; gap: 10px; justify-content: flex-end; background: #F8FAFC;
    border-radius: 0 0 14px 14px;
}

/* ── Toast Notifications ────────────────────────────────────── */
#tl-toast-container {
    position: fixed; top: 20px; right: 20px;
    z-index: 9999; display: flex; flex-direction: column; gap: 8px;
}
.tl-toast {
    padding: 13px 18px; border-radius: 9px;
    font-size: 14px; font-weight: 600; color: white;
    min-width: 280px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    animation: tl-toast-in 0.25s ease;
    display: flex; align-items: center; gap: 8px;
}
@keyframes tl-toast-in { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.tl-toast.tl-toast-success { background: #10B981; }
.tl-toast.tl-toast-error   { background: #EF4444; }
.tl-toast.tl-toast-warning { background: #F59E0B; }
.tl-toast.tl-toast-info    { background: #8B9CE2; }

/* ── Day Block (Agenda) ─────────────────────────────────────── */
.tl-day-block { margin-bottom: 24px; }
.tl-day-header {
    padding: 12px 16px; background: #fff;
    border-radius: 10px 10px 0 0; border-bottom: 2px solid #8B9CE2;
    font-size: 15px; color: #1E1B4B;
    display: flex; align-items: center; gap: 8px;
}
.tl-day-today .tl-day-header { background: #EEF2FF; border-bottom-color: #6B7FD4; }

/* ── Empty State ────────────────────────────────────────────── */
.tl-empty-state {
    text-align: center; padding: 48px 24px;
    background: #fff; border-radius: 12px;
    color: #64748B; font-size: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ── Toggle ─────────────────────────────────────────────────── */
.tl-toggle-wrap { display: flex; align-items: center; gap: 10px; }
.tl-toggle {
    position: relative; display: inline-block;
    width: 44px; height: 24px;
}
.tl-toggle input { opacity: 0; width: 0; height: 0; }
.tl-toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #CBD5E1; border-radius: 24px;
    transition: background 0.2s;
}
.tl-toggle-slider::before {
    content: ''; position: absolute;
    height: 18px; width: 18px; left: 3px; bottom: 3px;
    background: white; border-radius: 50%;
    transition: transform 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.tl-toggle input:checked + .tl-toggle-slider { background: #10B981; }
.tl-toggle input:checked + .tl-toggle-slider::before { transform: translateX(20px); }

/* ── Search Bar ─────────────────────────────────────────────── */
.tl-search-bar {
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 16px;
}
.tl-search-input {
    flex: 1; padding: 9px 14px; border: 1.5px solid #E2E8F0;
    border-radius: 7px; font-size: 14px; outline: none;
}
.tl-search-input:focus { border-color: #8B9CE2; }

/* ── Pagination ─────────────────────────────────────────────── */
.tl-pagination {
    display: flex; gap: 6px; align-items: center;
    justify-content: center; padding: 16px;
}
.tl-page-btn {
    padding: 6px 12px; border: 1.5px solid #E2E8F0;
    border-radius: 6px; background: white; cursor: pointer;
    font-size: 13px; font-weight: 600; color: #374151;
    transition: all 0.15s;
}
.tl-page-btn.active, .tl-page-btn.current, .tl-page-btn[aria-current="page"] { background: #8B9CE2; color: white; border-color: #8B9CE2; box-shadow: 0 0 0 1px rgba(139,156,226,.12); }
.tl-page-btn:hover:not(.active):not(.current) { background: #EEF2FF; border-color: #8B9CE2; }

/* ── Commentaire Prof highlight ─────────────────────────────── */
.tl-comment-prof {
    background: #FFF7ED; border-left: 3px solid #F59E0B;
    padding: 8px 12px; border-radius: 0 6px 6px 0;
    font-size: 12px; color: #92400E; font-style: italic;
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
    .tl-sidebar, .tl-header, .tl-btn-print,
    .tl-filters, .no-print { display: none !important; }
    .tl-crm-layout { display: block; }
    .tl-main-content { padding: 0; }
    .tl-table th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; }
    .tl-print-header { display: block !important; }
}
.tl-print-header { display: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
    .tl-kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .tl-finance-grid { grid-template-columns: repeat(2, 1fr); }
    .tl-kpi-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .tl-sidebar { display: none; }
    .tl-side-panel { width: 100%; right: -100%; }
    .tl-script-panel { width: 92%; left: -95%; }
    .tl-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .tl-kpi-grid-3 { grid-template-columns: 1fr; }
    .tl-finance-grid { grid-template-columns: 1fr; }
    .tl-form-row { grid-template-columns: 1fr; }
    .tl-header-title { font-size: 14px; }
}
@media (max-width: 480px) {
    .tl-kpi-grid { grid-template-columns: 1fr 1fr; }
    .tl-main-content { padding: 12px; }
}

/* ── UX/UI : Sticky headers + Suivi sticky columns ───────────── */
.tl-table th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #F8FAFC;
}
.tl-table .tl-sticky-col {
    position: sticky;
    background: #fff;
    z-index: 15;
}
.tl-table thead .tl-sticky-col {
    z-index: 35;
    background: #F8FAFC;
}
.tl-table .tl-sticky-date { left: 0; min-width: 105px; width: 105px; }
.tl-table .tl-sticky-name { left: 105px; min-width: 180px; width: 180px; }

/* Admin Suivi: Date + Nom stay pinned while scrolling the internal table viewport. */
.tl-table .tl-sticky-col {
    background-clip: padding-box;
}
.tl-table thead .tl-sticky-date { z-index: 40; }
.tl-table thead .tl-sticky-name { z-index: 40; }
.tl-admin-native-page .tl-suivi-card .tl-table .tl-sticky-name {
    box-shadow: 2px 0 0 #E5E7EB;
}
.tl-admin-native-page .tl-suivi-card .tl-table tbody .tl-sticky-date {
    box-shadow: 1px 0 0 #EEF1F5;
}
.tl-table tbody tr.tl-row-inscrit .tl-sticky-col { background: #F0FDF4; }
.tl-table tbody tr:hover .tl-sticky-col { background: #F8FAFC; }

/* Intervalle de dates */
.tl-date-range {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.tl-date-range span {
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
}
.tl-date-range input {
    width: 145px;
    padding: 8px 10px;
    border: 1.5px solid #E2E8F0;
    border-radius: 7px;
    font-size: 13px;
    color: #1E1B4B;
    background: #fff;
}
@media (max-width: 768px) {
    .tl-date-range { flex-wrap: wrap; }
    .tl-date-range input { width: 135px; }
}


/* ── Finance — réglages et affichage ─────────────────────────── */
.tl-finance-rates-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:22px 0 24px}
.tl-finance-rate-card{margin:0;padding:18px 18px 20px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;box-sizing:border-box}
.tl-finance-rate-card label{display:block;margin:0 0 10px;font-weight:600;color:#334155;line-height:1.4}
.tl-finance-rate-card .tl-input{display:block;width:100%;box-sizing:border-box;margin:0;border:1px solid #CBD5E1;border-radius:10px;background:#fff;padding:11px 13px;min-height:44px}
.tl-finance-rate-card .tl-input:focus{border-color:#8B9CE2;box-shadow:0 0 0 3px rgba(139,156,226,.15);outline:none}
@media(max-width:900px){.tl-finance-rates-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.tl-finance-rates-grid{grid-template-columns:1fr;gap:14px}}

/* Finance — paiement des commissions */
.finance-member-row { cursor: pointer; }
.finance-member-row:hover { background:#F8FAFC; }
#finance_detail_card .tl-card-header { gap:16px; flex-wrap:wrap; }
#finance_detail_card .tl-table th:first-child, #finance_detail_card .tl-table td:first-child { text-align:center; width:40px; }
@media(max-width:700px){ .tl-kpi-grid-2{grid-template-columns:1fr;} }

/* Finance — corrections UX paiement */
.finance-member-row{cursor:pointer}
.finance-member-row:hover{background:#F8FAFC}
#btn_mark_finance_paid:disabled{opacity:.5;cursor:not-allowed}
.finance-commission-check{transform:scale(1.05)}

/* ============================================================
   TutorLab CRM — Frontend SaaS UI v1.8
   Alignement Confirmatrice + Professeur sur le dashboard TutorLab
   ============================================================ */
.tl-crm-page{
    margin:0!important;
    padding:0!important;
    width:100%!important;
    max-width:none!important;
    color:#172033;
    font-family:Inter,Roboto,"Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif!important;
}
.tl-crm-page .tl-crm-layout{
    display:flex!important;
    width:100%;
    height:100vh;
    min-height:100vh;
    overflow:hidden;
    background:#F8F9FA;
}
.tl-crm-page .tl-main-content{
    min-width:0;
    background:#F8F9FA;
    padding:38px 40px 48px;
    overflow-y:auto;
    overflow-x:hidden;
}

/* Sidebar sombre inspirée de l'espace d'apprentissage */
/* Sidebar SaaS — scrollbar fine et discrète */
.tl-crm-page .tl-sidebar-modern{
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.38) transparent;
}
.tl-crm-page .tl-sidebar-modern::-webkit-scrollbar{width:5px;height:5px}
.tl-crm-page .tl-sidebar-modern::-webkit-scrollbar-track{background:transparent}
.tl-crm-page .tl-sidebar-modern::-webkit-scrollbar-thumb{
    background:rgba(148,163,184,.38);
    border-radius:999px;
}
.tl-crm-page .tl-sidebar-modern::-webkit-scrollbar-thumb:hover{
    background:rgba(148,163,184,.58);
}

.tl-crm-page .tl-sidebar-modern{
    width:270px;
    min-width:270px;
    height:100vh;
    min-height:100vh;
    padding:26px 18px 18px;
    background:#151828;
    border-right:1px solid rgba(255,255,255,.05);
    box-shadow:none;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    box-sizing:border-box;
}
.tl-sidebar-top{flex:0 0 auto}
.tl-brand-lockup{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:64px;
    margin:0 0 28px;
    text-decoration:none!important;
}
.tl-sidebar-logo{
    display:block;
    width:170px;
    height:auto;
    max-height:48px;
    object-fit:contain;
    filter:none;
}
.tl-sidebar-user{
    display:flex;
    align-items:center;
    gap:12px;
    padding:4px 10px 24px;
    margin-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.tl-sidebar-avatar{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(145deg,#8B9CE2,#6D7FD5);
    color:#fff;
    font-size:18px;
    font-weight:800;
    box-shadow:0 7px 18px rgba(139,156,226,.22);
}
.tl-sidebar-user-meta{min-width:0;display:flex;flex-direction:column;gap:4px}
.tl-sidebar-user-name{
    color:#fff;
    font-size:14px;
    line-height:1.25;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.tl-sidebar-user-sub{
    color:#98A1B8;
    font-size:12px;
    line-height:1.2;
}
.tl-sidebar-nav-head{
    min-height:25px;
    padding:0 14px 8px;
    color:#6F7890;
    font-size:11px;
    font-weight:800;
    letter-spacing:.10em;
}
.tl-sidebar-modern .tl-menu-list{margin:0;padding:0;list-style:none}
.tl-sidebar-modern .tl-menu-item{margin:2px 0}
.tl-sidebar-modern .tl-menu-link{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 14px;
    min-height:44px;
    border-radius:11px;
    color:#BFC6D7;
    background:transparent;
    font-size:14px;
    font-weight:600;
    text-decoration:none!important;
    transition:background .18s ease,color .18s ease,transform .18s ease;
}
.tl-sidebar-modern .tl-menu-link:hover{
    background:#202640;
    color:#fff;
    transform:translateX(1px);
}
.tl-sidebar-modern .tl-menu-link.active{
    background:#27304F;
    color:#fff;
}
.tl-sidebar-modern .tl-menu-link.active::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:3px;
    border-radius:0 3px 3px 0;
    background:#8B9CE2;
}
.tl-sidebar-modern .tl-menu-icon{
    width:22px;
    min-width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.tl-sidebar-modern .tl-menu-icon svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.tl-sidebar-modern .tl-menu-text{line-height:1.2}
.tl-sidebar-bottom{
    margin-top:auto;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.07);
}
.tl-sidebar-logout{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:46px;
    padding:11px 14px;
    border:1px solid rgba(255,120,120,.16);
    border-radius:11px;
    color:#FF9A9A;
    background:rgba(255,95,95,.06);
    font-size:14px;
    font-weight:700;
    text-decoration:none!important;
    transition:background .18s ease,color .18s ease;
}
.tl-sidebar-logout:hover{background:rgba(255,95,95,.11);color:#FFB0B0}
.tl-sidebar-logout .tl-menu-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Greeting */
.tl-page-greeting{margin:0 0 30px}
.tl-page-greeting h1{
    margin:0 0 6px;
    color:#101828;
    font-size:32px;
    line-height:1.18;
    font-weight:800;
    letter-spacing:-.02em;
}
.tl-page-greeting p{
    margin:0;
    color:#667085;
    font-size:16px;
    line-height:1.45;
}

/* Toutes les zones de travail deviennent des cards */
.tl-crm-page .tl-filters,
.tl-crm-page .tl-card,
.tl-crm-page .tl-kpi-card,
.tl-crm-page .tl-finance-section{
    border:0!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 4px 12px rgba(0,0,0,.05)!important;
}
.tl-crm-page .tl-filters{padding:18px 20px;margin-bottom:20px}
.tl-crm-page .tl-card{overflow:hidden}
.tl-crm-page .tl-card-header{padding:18px 22px;border-bottom:1px solid #EEF1F5;background:#fff}
.tl-crm-page .tl-card-header h3{color:#172033;font-size:15px}
.tl-crm-page .tl-card-body{background:#fff}

/* KPI plus SaaS */
.tl-crm-page .tl-kpi-card{padding:20px;text-align:left}
.tl-crm-page .tl-kpi-card::before{display:none}
.tl-crm-page .tl-kpi-label{text-transform:none;letter-spacing:0;color:#667085;font-size:12px}
.tl-crm-page .tl-kpi-value{font-size:28px;color:#101828}

/* Inputs / boutons */
.tl-crm-page .tl-filters input[type=date],
.tl-crm-page .tl-filters input[type=text],
.tl-crm-page .tl-filters select,
.tl-crm-page .tl-input,
.tl-crm-page .tl-select,
.tl-crm-page .tl-textarea{
    border:1px solid #E4E7EC;
    border-radius:9px;
    background:#fff;
    color:#172033;
}
.tl-crm-page .tl-btn{border-radius:9px;padding:9px 16px;box-shadow:none}
.tl-crm-page .tl-btn-primary{background:#6E7FD5}
.tl-crm-page .tl-btn-primary:hover{background:#5F70C7}
.tl-crm-page .tl-btn-success{background:#20B86B}

/* Tables clean */
.tl-crm-page .tl-table{border-collapse:separate;border-spacing:0}
.tl-crm-page .tl-table th{
    background:#F8FAFC;
    color:#667085;
    text-transform:none;
    font-size:11px;
    letter-spacing:.02em;
    border-bottom:1px solid #EAECF0;
}
.tl-crm-page .tl-table td{
    color:#344054;
    border-bottom:1px solid #F0F2F5;
    padding:13px 14px;
}
.tl-crm-page .tl-table tbody tr:hover{background:#FBFCFE}

@media (max-width: 980px){
    .tl-crm-page .tl-sidebar-modern{width:230px;min-width:230px}
    .tl-crm-page .tl-main-content{padding:30px 24px 40px}
    .tl-page-greeting h1{font-size:28px}
}
@media (max-width: 760px){
    .tl-crm-page .tl-crm-layout{height:auto;min-height:100vh;overflow:visible;display:block!important}
    .tl-crm-page .tl-sidebar-modern{position:relative;width:100%;min-width:100%;height:auto;min-height:0;max-height:none}
    .tl-brand-lockup{justify-content:flex-start;padding-left:10px}
    .tl-sidebar-user{margin-bottom:8px}
    .tl-sidebar-nav-head{display:none}
    .tl-sidebar-modern .tl-menu-list{display:grid;grid-template-columns:1fr 1fr;gap:4px}
    .tl-sidebar-bottom{margin-top:12px}
    .tl-crm-page .tl-main-content{padding:24px 16px 36px;overflow:visible}
    .tl-page-greeting{margin-bottom:22px}
    .tl-page-greeting h1{font-size:25px}
}


/* ============================================================
   TutorLab CRM — Native WordPress Admin UI v1.8.1
   Aucun faux header/sidebar : l'Admin utilise wp-admin natif.
   ============================================================ */
.tl-admin-native-page,
.tl-admin-native-page * { box-sizing: border-box; }
.tl-admin-native-page {
    width: auto !important;
    max-width: none !important;
    margin: 10px 20px 20px 2px !important;
    padding: 0 !important;
    color: #172033;
    font-family: Inter, Roboto, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}
.tl-admin-native-page .tl-main-content,
.tl-admin-native-page .tl-admin-main-content {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: none;
    overflow: visible;
    background: transparent;
}
.tl-admin-native-page .tl-header,
.tl-admin-native-page .tl-sidebar { display: none !important; }
.tl-admin-native-page .tl-card,
.tl-admin-native-page .tl-filters,
.tl-admin-native-page .tl-finance-section,
.tl-admin-native-page .tl-kpi-card {
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
    background: #fff !important;
}
.tl-admin-native-page .tl-filters { padding: 18px 20px; margin-bottom: 20px; }
.tl-admin-native-page .tl-card-header {
    background: #fff;
    border-bottom: 1px solid #EEF2F6;
    padding: 18px 22px;
}
.tl-admin-native-page .tl-card-header h3 {
    color: #172033;
    font-size: 15px;
}
.tl-admin-native-page .tl-table th {
    background: #F8FAFC;
    color: #475467;
    border-bottom: 1px solid #E4E7EC;
}
.tl-admin-native-page .tl-table td {
    color: #344054;
    border-bottom: 1px solid #F0F2F5;
}

/* KPI cards dashboard — palette moderne et contrastes accessibles */
.tl-admin-native-page .tl-kpi-card {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: 20px;
}
.tl-admin-native-page .tl-kpi-card::before { display: none; }
.tl-admin-native-page .tl-kpi-label {
    color: #667085;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 700;
}
.tl-admin-native-page .tl-kpi-value {
    color: #101828;
    font-size: 29px;
    font-weight: 800;
}
.tl-admin-native-page .tl-kpi-blue {
    background: #EFF6FF !important;
    box-shadow: 0 4px 12px rgba(59,130,246,.08) !important;
}
.tl-admin-native-page .tl-kpi-blue .tl-kpi-value { color: #2563EB; }
.tl-admin-native-page .tl-kpi-green {
    background: #ECFDF5 !important;
    box-shadow: 0 4px 12px rgba(16,185,129,.10) !important;
}
.tl-admin-native-page .tl-kpi-green .tl-kpi-label { color: #047857; }
.tl-admin-native-page .tl-kpi-green .tl-kpi-value { color: #10B981 !important; }
.tl-admin-native-page .tl-kpi-orange {
    background: #FFF7ED !important;
    box-shadow: 0 4px 12px rgba(249,115,22,.09) !important;
}
.tl-admin-native-page .tl-kpi-orange .tl-kpi-value { color: #EA580C !important; }
.tl-admin-native-page .tl-kpi-rate {
    color: #475467;
    background: #F2F4F7;
}

/* WP Admin: supprimer les marges inutiles sans toucher au shell WordPress */
.wp-admin .tl-admin-native-page .tl-btn { border-radius: 9px; }
 .wp-admin .tl-admin-native-page .tl-table-wrap {
    max-height: 70vh;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
}


/* ============================================================
   Feuille de suivi Admin — alignement visuel sur
   Confirmatrice > Nouveaux Leads, sans sidebar frontend.
   ============================================================ */
.tl-admin-native-page .tl-suivi-card {
    overflow: hidden;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.05) !important;
}
.tl-admin-native-page .tl-suivi-card .tl-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #EEF1F5;
    background: #fff;
}
.tl-admin-native-page .tl-suivi-card .tl-card-header h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: #1E1B4B;
}
.tl-admin-native-page .tl-suivi-card .tl-card-header .tl-badge {
    margin-left: 7px;
    vertical-align: middle;
    background: #EEF2FF;
    color: #4338CA;
}
.tl-suivi-card-subtitle {
    color: #98A2B3;
    font-size: 12px;
    font-weight: 500;
}
.tl-admin-native-page .tl-suivi-card .tl-card-body {
    padding: 0;
    background: #fff;
}
.tl-admin-native-page .tl-suivi-card .tl-table-wrap {
    max-height: 70vh;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    background: #fff;
}
.tl-admin-native-page .tl-suivi-card .tl-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: #fff;
}
.tl-admin-native-page .tl-suivi-card .tl-table th {
    background: #F8FAFC !important;
    color: #667085 !important;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    padding: 12px 14px;
    border-bottom: 1px solid #EAECF0 !important;
    border-right: 0 !important;
    white-space: nowrap;
}
.tl-admin-native-page .tl-suivi-card .tl-table td {
    background: #fff;
    color: #344054;
    padding: 13px 14px;
    border-bottom: 1px solid #F0F2F5 !important;
    border-right: 0 !important;
    white-space: nowrap;
    vertical-align: middle;
}
.tl-admin-native-page .tl-suivi-card .tl-table tbody tr:hover td {
    background: #FBFCFE !important;
}
/* Remove the old colored left borders from the Admin table so it matches
   the clean Confirmatrice "Nouveaux Leads" presentation. */
.tl-admin-native-page .tl-suivi-card .tl-table tbody tr td:first-child {
    border-left: 0 !important;
}
.tl-admin-native-page .tl-suivi-card .tl-table tbody tr td {
    box-shadow: none !important;
}
/* Keep Date + Nom sticky while preserving the same visual style. */
.tl-admin-native-page .tl-suivi-card .tl-table .tl-sticky-col {
    background: #fff;
}
.tl-admin-native-page .tl-suivi-card .tl-table thead .tl-sticky-col {
    background: #F8FAFC !important;
}
.tl-admin-native-page .tl-suivi-card .tl-table tbody tr:hover .tl-sticky-col {
    background: #FBFCFE !important;
}
.tl-admin-native-page .tl-suivi-card .tl-pagination {
    padding: 14px 18px 18px;
    border-top: 0;
}
@media (max-width: 900px) {
    .tl-admin-native-page .tl-suivi-card .tl-card-header {
        align-items: flex-start;
        flex-direction: column;
    }
    .tl-suivi-card-subtitle { display: none; }
}

/* v1.8.6 — internal table scrolling only.
   Keep the existing table layouts/designs; disable table sticky behavior.
   The only behavior added here is vertical + horizontal scrolling inside
   the table container. */
.tl-table-wrap {
    width: 100%;
    max-height: 70vh;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}
.tl-table-wrap .tl-table {
    min-width: max-content;
}
.tl-table th,
.tl-table .tl-sticky-col,
.tl-table thead .tl-sticky-col {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
}

/* v1.8.8 — Internal vertical scroll + sticky table headers.
   Re-enable only the header/column sticky behavior requested for table viewports.
   The table itself remains unchanged; scrolling stays inside .tl-table-wrap. */
.tl-table-wrap {
    width: 100%;
    height: min(600px, 70vh);
    max-height: 70vh;
    min-height: 320px;
    overflow-y: scroll !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
    position: relative;
    overscroll-behavior: contain;
}

/* Force a clear, integrated vertical scrollbar on desktop browsers. */
.tl-table-wrap::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.tl-table-wrap::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 8px;
}
.tl-table-wrap::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 8px;
    border: 2px solid #F1F5F9;
}
.tl-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

@media (max-width: 768px) {
    .tl-table-wrap {
        height: 55vh;
        min-height: 280px;
    }
}

.tl-table-wrap .tl-table thead th {
    position: sticky !important;
    top: 0 !important;
    background: #FFFFFF !important;
    z-index: 10 !important;
    border-bottom: 1px solid #E5E7EB !important;
    background-clip: padding-box;
}

/* Admin — Feuille de suivi: Date + Nom stay pinned during horizontal scroll. */
.tl-admin-native-page .tl-suivi-card .tl-table .tl-sticky-date,
.tl-admin-native-page .tl-suivi-card .tl-table .tl-sticky-name {
    position: sticky !important;
    background: #FFFFFF !important;
    background-clip: padding-box;
}

.tl-admin-native-page .tl-suivi-card .tl-table .tl-sticky-date {
    left: 0 !important;
    z-index: 20 !important;
}

.tl-admin-native-page .tl-suivi-card .tl-table .tl-sticky-name {
    left: 105px !important;
    z-index: 20 !important;
}

.tl-admin-native-page .tl-suivi-card .tl-table thead .tl-sticky-date,
.tl-admin-native-page .tl-suivi-card .tl-table thead .tl-sticky-name {
    top: 0 !important;
    z-index: 30 !important;
    background: #F8FAFC !important;
}

.tl-admin-native-page .tl-suivi-card .tl-table tbody .tl-sticky-date,
.tl-admin-native-page .tl-suivi-card .tl-table tbody .tl-sticky-name {
    box-shadow: 1px 0 0 #EEF1F5;
}

.tl-admin-native-page .tl-suivi-card .tl-table tbody .tl-sticky-name {
    box-shadow: 2px 0 0 #E5E7EB;
}

/* v1.8.9 — Unified minimalist table design.
   Remove vertical cell/row borders across every CRM table while keeping
   lightweight horizontal separators and generous cell spacing. */
.tl-table,
.tl-table th,
.tl-table td {
    border-left: 0 !important;
    border-right: 0 !important;
}

.tl-table th {
    padding: 12px 16px !important;
    border-bottom: 1px solid #EAEAEA !important;
}

.tl-table td {
    padding: 13px 16px !important;
    border-bottom: 1px solid #EAEAEA !important;
}

/* Remove legacy colored row markers (yellow/green/red/blue). */
.tl-table tbody tr.tl-row-new td,
.tl-table tbody tr.tl-row-qualified td,
.tl-table tbody tr.tl-row-present td,
.tl-table tbody tr.tl-row-inscrit td,
.tl-table tbody tr.tl-row-absent td {
    border-left: 0 !important;
}

/* Keep the clean horizontal rhythm on the Admin Follow-up table too. */
.tl-admin-native-page .tl-suivi-card .tl-table th,
.tl-admin-native-page .tl-suivi-card .tl-table td {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* Sticky columns, when enabled, remain visually clean without divider lines. */
.tl-table .tl-sticky-col {
    border-left: 0 !important;
    border-right: 0 !important;
}


/* v1.9.1 — Sticky columns sur mesure + partage du commentaire de qualification. */
/* Confirmatrice — Nouveaux Leads : Date + Nom */
#qual_filters ~ .tl-card .tl-table thead th:nth-child(1),
#qual_tbody tr > td:nth-child(1) {
    position: sticky !important;
    left: 0 !important;
    min-width: 105px;
    width: 105px;
    background: #fff !important;
}
#qual_filters ~ .tl-card .tl-table thead th:nth-child(2),
#qual_tbody tr > td:nth-child(2) {
    position: sticky !important;
    left: 105px !important;
    min-width: 190px;
    width: 190px;
    background: #fff !important;
}
#qual_filters ~ .tl-card .tl-table thead th:nth-child(1),
#qual_filters ~ .tl-card .tl-table thead th:nth-child(2) { z-index: 45 !important; }
#qual_tbody tr > td:nth-child(1),
#qual_tbody tr > td:nth-child(2) { z-index: 25 !important; }

/* Confirmatrice — Closing : Nom seulement */
#closing_filters ~ .tl-card .tl-table thead th:nth-child(1),
#closing_tbody tr > td:nth-child(1) {
    position: sticky !important;
    left: 0 !important;
    min-width: 190px;
    width: 190px;
    background: #fff !important;
}
#closing_filters ~ .tl-card .tl-table thead th:nth-child(1) { z-index: 45 !important; }
#closing_tbody tr > td:nth-child(1) { z-index: 25 !important; }

/* Professeur — Mes Tests 1:1 : Date + Heure + Nom complet */
#prof_agenda_filters ~ .tl-card .tl-table thead th:nth-child(1),
#prof_tbody tr > td:nth-child(1) {
    position: sticky !important;
    left: 0 !important;
    min-width: 115px;
    width: 115px;
    background: #fff !important;
}
#prof_agenda_filters ~ .tl-card .tl-table thead th:nth-child(2),
#prof_tbody tr > td:nth-child(2) {
    position: sticky !important;
    left: 115px !important;
    min-width: 90px;
    width: 90px;
    background: #fff !important;
}
#prof_agenda_filters ~ .tl-card .tl-table thead th:nth-child(3),
#prof_tbody tr > td:nth-child(3) {
    position: sticky !important;
    left: 205px !important;
    min-width: 190px;
    width: 190px;
    background: #fff !important;
    border-right: 1px solid #E5E7EB !important;
}
#prof_agenda_filters ~ .tl-card .tl-table thead th:nth-child(1),
#prof_agenda_filters ~ .tl-card .tl-table thead th:nth-child(2),
#prof_agenda_filters ~ .tl-card .tl-table thead th:nth-child(3) { z-index: 45 !important; }
#prof_tbody tr > td:nth-child(1),
#prof_tbody tr > td:nth-child(2),
#prof_tbody tr > td:nth-child(3) { z-index: 25 !important; }

#qual_tbody tr:hover > td:nth-child(1),
#qual_tbody tr:hover > td:nth-child(2),
#closing_tbody tr:hover > td:nth-child(1),
#prof_tbody tr:hover > td:nth-child(1),
#prof_tbody tr:hover > td:nth-child(2),
#prof_tbody tr:hover > td:nth-child(3) {
    background: #F8FAFC !important;
}


/* Admin — édition rapide des 3 commentaires dans Feuille de suivi */

.tl-admin-comment-cell { min-width: 190px; vertical-align: top; }
.tl-admin-comment-wrap { display:flex; align-items:flex-start; gap:6px; min-width:0; }
.tl-admin-comment-text { flex:1 1 auto; white-space:normal; word-break:break-word; line-height:1.4; }
.tl-admin-comment-edit, .tl-payment-edit { flex:0 0 auto; border:0; background:transparent; padding:4px 6px; cursor:pointer; font-size:13px; line-height:1; border-radius:6px; }
.tl-admin-comment-edit:hover { background:#F1F5F9; }
.tl-payment-edit:hover { background:#ECFDF5; }
.tl-admin-comment-cell.is-editing { min-width:230px; }
.tl-inline-comment-editor { display:flex; flex-direction:column; gap:7px; width:100%; }
.tl-inline-comment-input { width:100%; min-height:70px; resize:vertical; box-sizing:border-box; padding:8px 10px; border:1px solid #CBD5E1; border-radius:8px; background:#fff; color:#0F172A; font:inherit; line-height:1.4; outline:none; }
.tl-inline-comment-input:focus { border-color:#8B9CE2; box-shadow:0 0 0 3px rgba(139,156,226,.16); }
.tl-inline-comment-actions { display:flex; gap:6px; justify-content:flex-end; }
.tl-inline-comment-save, .tl-inline-comment-cancel { border:0; border-radius:7px; padding:5px 8px; cursor:pointer; font-size:13px; line-height:1; }
.tl-inline-comment-save { background:#ECFDF5; color:#047857; }
.tl-inline-comment-save:hover { background:#D1FAE5; }
.tl-inline-comment-cancel { background:#FEF2F2; color:#B91C1C; }
.tl-inline-comment-cancel:hover { background:#FEE2E2; }
.tl-inline-comment-save:disabled, .tl-inline-comment-cancel:disabled { opacity:.55; cursor:not-allowed; }


/* Paiements par tranches */
.tl-payment-overdue{color:#B91C1C !important;font-weight:800;background:#FEF2F2;padding:3px 7px;border-radius:6px;}
.tl-inline-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#475569;white-space:nowrap;}
.btn-edit-payment{margin-left:5px;border:0;background:transparent;cursor:pointer;padding:2px 4px;font-size:13px;}

/* ── Rapport Financier : paiement en modale ─────────────────── */
.tl-finance-payment-modal {
    max-width: 980px;
}
.tl-finance-payment-modal .tl-table-wrap {
    max-height: 55vh;
    overflow: auto;
}
.tl-finance-payment-modal .tl-modal-header > div:first-child {
    min-width: 0;
}
.tl-finance-pay-btn {
    white-space: nowrap;
    padding: 7px 11px;
    font-size: 13px;
}
.tl-modal-close {
    border: 0;
    background: transparent;
    color: #64748B;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
}
.tl-modal-close:hover {
    background: #F1F5F9;
    color: #0F172A;
}
#finance_payment_modal .tl-modal-footer {
    gap: 12px;
}
#btn_validate_finance_payment:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ── Gestion utilisateurs : actions de modale strictement séparées ─── */
.tl-user-modal-actions {
    display: block !important;
}
.tl-user-modal-actions-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: 100% !important;
}
.tl-user-modal-actions-inner .tl-btn {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 112px;
    margin: 0 !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    text-indent: 0 !important;
    overflow: visible !important;
}
.tl-user-modal-cancel {
    color: #475569 !important;
    background: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
}
.tl-user-modal-cancel:hover {
    color: #1E293B !important;
    background: #E2E8F0 !important;
}
.tl-user-modal-submit {
    background: #6E7FD5 !important;
    color: #FFFFFF !important;
}
.tl-user-modal-actions-inner .tl-btn::before,
.tl-user-modal-actions-inner .tl-btn::after {
    content: none !important;
}
.tl-user-actions {
    white-space: nowrap;
}
.tl-user-status-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 10px;
    margin: 0 4px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all .15s ease;
}
.tl-user-status-action.is-active {
    color: #047857;
    background: #ECFDF5;
    border-color: #A7F3D0;
}
.tl-user-status-action.is-active:hover {
    background: #D1FAE5;
}
.tl-user-status-action.is-suspended {
    color: #B45309;
    background: #FFFBEB;
    border-color: #FDE68A;
}
.tl-user-status-action.is-suspended:hover {
    background: #FEF3C7;
}
@media (max-width: 560px) {
    .tl-user-modal-actions-inner {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .tl-user-modal-actions-inner .tl-btn {
        width: 100% !important;
    }
}

.tl-admin-lead-modal{max-width:980px;width:min(96vw,980px);max-height:92vh;overflow:hidden}.tl-admin-lead-modal .tl-modal-body{max-height:calc(92vh - 70px);overflow:auto}.tl-admin-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}.tl-admin-edit-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#334155}.tl-admin-edit-grid label.span2{grid-column:1/-1}.tl-admin-edit-grid input,.tl-admin-edit-grid select,.tl-admin-edit-grid textarea{width:100%;box-sizing:border-box;border:1px solid #E2E8F0;border-radius:8px;padding:9px 10px;background:#fff;color:#0F172A}.tl-admin-edit-grid textarea{min-height:72px;resize:vertical}.tl-admin-lead-modal h4{font-size:14px;margin:18px 0 10px;color:#0F172A}.tl-admin-edit-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:16px;border-top:1px solid #E2E8F0}.tl-admin-lead-edit{border:0;background:transparent;cursor:pointer;padding:2px 4px;border-radius:6px}.tl-admin-lead-edit:hover{background:#EFF6FF}@media(max-width:700px){.tl-admin-edit-grid{grid-template-columns:1fr}.tl-admin-edit-grid label.span2{grid-column:auto}.tl-admin-edit-actions{flex-direction:column}.tl-admin-edit-actions .tl-btn{width:100%}}
.tl-admin-lead-edit{border:0;background:transparent;cursor:pointer;padding:4px 6px;border-radius:7px;font-size:14px;line-height:1}.tl-admin-lead-edit:hover{background:#EFF6FF}

/* --- Prospect edit modals: true viewport-level popup --- */
.tl-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    background: rgba(15, 23, 42, 0.58) !important;
    z-index: 999999 !important;
}
.tl-modal-backdrop .tl-admin-lead-modal {
    position: relative !important;
    margin: auto !important;
    width: min(980px, 100%) !important;
    max-width: 980px !important;
    max-height: calc(100vh - 48px) !important;
    box-sizing: border-box !important;
    flex: 0 1 auto !important;
}
.tl-modal-backdrop .tl-admin-lead-modal .tl-modal-body {
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
@media (max-width: 700px) {
    .tl-modal-backdrop {
        padding: 12px !important;
        align-items: center !important;
    }
    .tl-modal-backdrop .tl-admin-lead-modal {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100vh - 24px) !important;
    }
    .tl-modal-backdrop .tl-admin-lead-modal .tl-modal-body {
        max-height: calc(100vh - 130px) !important;
    }
}

/* v1.10.26 — Statut Closing vide autorisé dans la modale Closing */
.tl-history-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tl-history-actions .tl-btn{white-space:nowrap}
@media (max-width: 720px){.tl-history-actions{flex-direction:column;align-items:stretch}.tl-history-actions .tl-btn{width:100%}}

/* v1.10.29 — Page active pagination */
.tl-pagination-pagesize{display:flex;align-items:center;gap:7px;margin-right:auto;color:#64748B;font-size:13px}
.tl-page-size{min-width:72px;padding:6px 30px 6px 10px;border:1.5px solid #E2E8F0;border-radius:6px;background:#fff;color:#374151;font-weight:600}
.tl-pagination{flex-wrap:wrap}


/* v1.10.47 — Professeur > Tests du jour : colonnes Heure + Nom complet figées, y compris les en-têtes. */
.tl-table-wrap .tl-table thead th.tl-prof-today-time,
.tl-table-wrap .tl-table tbody td.tl-prof-today-time {
    position: sticky !important;
    left: 0 !important;
    z-index: 22 !important;
    background: #FFFFFF !important;
    min-width: 105px !important;
    width: 105px !important;
    box-sizing: border-box;
    background-clip: padding-box;
}
.tl-table-wrap .tl-table thead th.tl-prof-today-name,
.tl-table-wrap .tl-table tbody td.tl-prof-today-name {
    position: sticky !important;
    left: 105px !important;
    z-index: 21 !important;
    background: #FFFFFF !important;
    min-width: 180px !important;
    width: 180px !important;
    box-sizing: border-box;
    background-clip: padding-box;
}
.tl-table-wrap .tl-table thead th.tl-prof-today-time,
.tl-table-wrap .tl-table thead th.tl-prof-today-name {
    top: 0 !important;
    z-index: 42 !important;
    background: #F8FAFC !important;
}
.tl-table-wrap .tl-table tbody td.tl-prof-today-name {
    box-shadow: 2px 0 0 #E5E7EB;
}


/* ============================================================
   Notifications — cloche in-app + bandeau leads non traités
   (v1.16.0 — lot 1)
   ============================================================ */

.tl-page-greeting-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}
.tl-page-greeting-row .tl-page-greeting{flex:1 1 auto;min-width:0}

/* ── Cloche ─────────────────────────────────────────────────── */
.tl-notif-wrap{position:relative;flex:0 0 auto;padding-top:6px}
.tl-notif-bell{
    position:relative;
    width:46px;height:46px;
    border-radius:50%;
    border:1px solid #E2E8F0;
    background:#fff;
    box-shadow:0 2px 10px rgba(139,156,226,.18);
    cursor:pointer;
    font-size:20px;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    transition:transform .15s, box-shadow .15s;
}
.tl-notif-bell:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(139,156,226,.32)}
.tl-notif-bell.has-unread{border-color:#FCA5A5;background:#FFF7F7}
.tl-notif-bell.has-unread .tl-notif-bell-icon{animation:tlBellShake 1.6s ease-in-out infinite}
@keyframes tlBellShake{
    0%,72%,100%{transform:rotate(0)}
    76%{transform:rotate(-14deg)}
    80%{transform:rotate(12deg)}
    84%{transform:rotate(-8deg)}
    88%{transform:rotate(6deg)}
    92%{transform:rotate(0)}
}
.tl-notif-badge{
    position:absolute;top:-4px;right:-4px;
    min-width:21px;height:21px;padding:0 5px;
    border-radius:999px;
    background:#DC2626;color:#fff;
    font-size:11.5px;font-weight:800;line-height:21px;
    text-align:center;
    box-shadow:0 0 0 2px #fff;
}

/* ── Panneau ────────────────────────────────────────────────── */
.tl-notif-panel{
    position:absolute;top:58px;right:0;
    width:372px;max-width:calc(100vw - 32px);
    background:#fff;
    border:1px solid #E2E8F0;
    border-radius:14px;
    box-shadow:0 18px 48px rgba(30,27,75,.18);
    z-index:1200;
    overflow:hidden;
}
.tl-notif-panel-head{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:13px 16px;
    border-bottom:1px solid #EEF2F7;
    font-size:14.5px;color:#1E1B4B;
}
.tl-notif-readall{
    background:none;border:none;cursor:pointer;padding:0;
    color:#6B7FD4;font-size:12.5px;font-weight:700;
}
.tl-notif-readall:hover{text-decoration:underline}
.tl-notif-list{max-height:396px;overflow-y:auto}
.tl-notif-item{
    display:block;width:100%;text-align:left;
    padding:12px 16px 12px 18px;
    border:none;border-bottom:1px solid #F1F5F9;
    border-left:3px solid transparent;
    background:#fff;cursor:pointer;
    font-family:inherit;
}
.tl-notif-item:hover{background:#F8FAFC}
.tl-notif-item.is-unread{background:#F5F7FF;border-left-color:#8B9CE2}
.tl-notif-item-title{display:block;font-size:13.5px;font-weight:700;color:#1E1B4B;margin-bottom:3px}
.tl-notif-item-msg{display:block;font-size:12.5px;color:#475569;line-height:1.45}
.tl-notif-item-ago{display:block;font-size:11.5px;color:#94A3B8;margin-top:4px}
.tl-notif-empty{padding:28px 16px;text-align:center;color:#94A3B8;font-size:13px}
.tl-notif-panel-foot{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 16px;
    border-top:1px solid #EEF2F7;background:#FAFBFF;
}
.tl-notif-sound-label{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#475569;cursor:pointer}
.tl-notif-foot-hint{font-size:11.5px;color:#94A3B8}

/* ── Salle de visio de la matière (bouton lecture seule, espace prof) ── */
.tl-visio-wrap{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding-top:6px}
.tl-visio-btn{
    display:inline-flex;align-items:center;gap:7px;
    padding:11px 16px;border-radius:999px;
    background:linear-gradient(120deg,#8B9CE2,#6B7FD4);
    color:#fff!important;text-decoration:none!important;
    border:none;cursor:pointer;
    font-size:13.5px;font-weight:700;font-family:inherit;line-height:1;
    white-space:nowrap;
    box-shadow:0 4px 14px rgba(107,127,212,.28);
    transition:transform .15s, box-shadow .15s;
}
.tl-visio-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(107,127,212,.42);color:#fff!important}

@media (max-width:760px){
    .tl-page-greeting-row{flex-wrap:wrap}
    .tl-visio-wrap{order:3;width:100%;padding-top:12px}
    .tl-visio-btn{flex:1 1 auto;justify-content:center}
}

/* ── Badges de la barre latérale ─────────────────────────────────
   Compteur par section, à la manière d'un téléphone. La couleur
   porte l'urgence : bleu = récent, orange = seuil de confort
   dépassé, rouge = en retard (le rouge pulse doucement pour
   attraper l'œil sans bouger la mise en page). */
.tl-menu-badge{
    margin-left:auto;
    flex:0 0 auto;
    min-width:21px;height:21px;padding:0 6px;
    border-radius:999px;
    background:#8B9CE2;color:#fff;
    font-size:11.5px;font-weight:800;line-height:21px;
    text-align:center;
    box-sizing:border-box;
}
.tl-menu-badge.is-warn{background:#F59E0B}
.tl-menu-badge.is-danger{background:#DC2626;animation:tlBadgePulse 1.8s ease-in-out infinite}
@keyframes tlBadgePulse{
    0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.55)}
    50%{box-shadow:0 0 0 5px rgba(220,38,38,0)}
}
/* Sur la barre sombre, le badge bleu doit rester lisible. */
.tl-sidebar-modern .tl-menu-badge{background:#4C5880;color:#E8ECF8}
.tl-sidebar-modern .tl-menu-badge.is-warn{background:#F59E0B;color:#fff}
.tl-sidebar-modern .tl-menu-badge.is-danger{background:#DC2626;color:#fff}
.tl-sidebar-modern .tl-menu-link.active .tl-menu-badge{background:#8B9CE2;color:#fff}
.tl-sidebar-modern .tl-menu-link.active .tl-menu-badge.is-warn{background:#F59E0B}
.tl-sidebar-modern .tl-menu-link.active .tl-menu-badge.is-danger{background:#DC2626}

@media (max-width:760px){
    /* En grille 2 colonnes, le badge se colle au texte plutôt qu'au bord. */
    .tl-sidebar-modern .tl-menu-badge{margin-left:8px}
}

/* ── Chronomètre des listes ──────────────────────────────────────
   Même grammaire que les badges : seuls l'orange et le rouge sont
   colorés. Si toutes les lignes le sont, plus rien ne ressort. */
.tl-chrono{white-space:nowrap;font-size:12.5px;color:#94A3B8;font-weight:600}
.tl-chrono.is-warn{color:#B45309;font-weight:700}
.tl-chrono.is-danger{color:#B91C1C;font-weight:800}
.tl-chrono.is-warn .tl-chrono-val,
.tl-chrono.is-danger .tl-chrono-val{
    display:inline-block;padding:3px 9px;border-radius:999px;
}
.tl-chrono.is-warn .tl-chrono-val{background:#FFF7ED;border:1px solid #FDBA74}
.tl-chrono.is-danger .tl-chrono-val{background:#FEF2F2;border:1px solid #FCA5A5}

/* En-tête cliquable pour inverser le tri */
.tl-chrono-th{cursor:pointer;user-select:none;white-space:nowrap}
.tl-chrono-th:hover{color:#6B7FD4}
.tl-sort-arrow{font-size:10px;opacity:.7;margin-left:2px}

/* Compteur « X dossiers en retard » en tête de liste */
.tl-retards{
    display:inline-block;
    padding:5px 12px;border-radius:999px;
    background:#FEF2F2;border:1px solid #FCA5A5;
    color:#B91C1C;font-size:12.5px;font-weight:700;
    white-space:nowrap;
}

/* ════════════════════════════════════════════════════════════════
   v1.20.0 — Correctifs de mise en page (audit interfaces)
   ════════════════════════════════════════════════════════════════ */

/* 1. RESPIRATION DANS LES CARTES
   .tl-card-body était à padding:0, pensé pour que les tableaux touchent
   les bords de la carte. Conséquence : dans Matières, Notifications,
   Réglages Finance… tout le contenu de formulaire — libellés, champs,
   boutons — se retrouvait collé aux bordures.
   On rend la marge à la carte, et on redonne aux tableaux leur pleine
   largeur par une marge négative de la même valeur : les deux besoins
   sont satisfaits sans toucher au balisage des vues. */
.tl-card-body{ padding:18px 22px; }
.tl-card-body > .tl-table-wrap{
    width:auto;
    margin-left:-22px;
    margin-right:-22px;
}
.tl-card-body > .tl-table-wrap:first-child{ margin-top:-18px; }
.tl-card-body > .tl-pagination{ margin:0 -22px -18px; }
.tl-card-body > .tl-pagination:only-child{ margin:-18px -22px; }

/* 2. HAUTEUR DES TABLEAUX
   La règle précédente imposait height:min(600px,70vh) + min-height:320px
   + overflow-y:scroll. Résultat : un tableau de trois lignes occupait
   600 px avec un grand vide, et TOUS les tableaux affichaient en
   permanence une barre de défilement interne — en plus de celle de la
   page. D'où l'impression de deux ascenseurs qui se battent.
   Désormais la hauteur suit le contenu et le défilement vertical revient
   à la page : UN SEUL ascenseur. Seul le défilement horizontal reste
   interne au tableau, indispensable aux listes larges comme le Closing. */
.tl-table-wrap{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:visible !important;
    overflow-x:auto !important;
    scrollbar-gutter:auto;
}

/* Exception : la Feuille de suivi. C'est un tableur — une trentaine de
   colonnes avec date et nom figés à gauche. Les colonnes collantes ont
   besoin d'un conteneur qui défile, on lui rend donc sa fenêtre interne. */
.tl-suivi-card .tl-table-wrap{
    max-height:70vh !important;
    overflow-y:auto !important;
}

/* 3. LARGEUR DES TABLEAUX
   min-width:max-content seul laissait un tableau étroit flotter à gauche
   avec du blanc à droite. Combiné à width:100%, il remplit la carte et
   ne déborde que si son contenu l'exige. */
.tl-table-wrap .tl-table{ width:100%; min-width:max-content; }

/* 4. EN-TÊTE DE CARTE À TROIS ÉLÉMENTS
   Certains en-têtes portent désormais un titre, un compteur de retards
   et une légende. En flex space-between, les trois se repoussaient aux
   extrémités. On les groupe à gauche et on laisse la légende à droite. */
.tl-card-header{ gap:12px; flex-wrap:wrap; }
.tl-card-header h3{ margin-right:auto; }
.tl-card-header .tl-retards{ margin-right:auto; }

/* 5. FORMULAIRES DANS LES CARTES
   Le dernier champ d'une carte ajoutait sa marge basse à celle de la
   carte : le bas paraissait deux fois plus aéré que le haut. */
.tl-card-body > .tl-form-group:last-child,
.tl-card-body > .tl-form-row:last-child{ margin-bottom:0; }

@media (max-width:768px){
    .tl-card-body{ padding:14px 16px; }
    .tl-card-body > .tl-table-wrap{ margin-left:-16px; margin-right:-16px; }
    .tl-card-body > .tl-table-wrap:first-child{ margin-top:-14px; }
    .tl-card-body > .tl-pagination{ margin:0 -16px -14px; }
}

/* ════════════════════════════════════════════════════════════════
   v1.20.1 — Colonnes figées + correctifs d'audit
   ════════════════════════════════════════════════════════════════ */

/* A. FEUILLE DE SUIVI — correction de ma régression.
   La marge négative que j'applique aux tableaux pour qu'ils touchent les
   bords de la carte décalait le conteneur de 22 px vers la gauche. Or la
   colonne Date de la Feuille de suivi se cale sur le bord gauche de ce
   conteneur : elle passait donc sous la bordure arrondie, qui la rognait.
   Cette vue a sa propre mise en page, on la laisse tranquille. */
.tl-suivi-card .tl-card-body > .tl-table-wrap{
    margin:0 !important;
    width:100% !important;
}

/* B. COLONNES FIGÉES
   Une vieille règle (v1.8.6) force position:static sur toutes les colonnes
   figées du plugin — c'est elle qui cassait depuis longtemps le Nom et
   l'Heure figés de l'espace professeur. On la neutralise pour les colonnes
   explicitement marquées, sans toucher au reste.

   .tl-freeze-1    → première colonne figée, collée à gauche
   .tl-freeze-2    → seconde colonne figée, décalée de la largeur de la 1re
   .tl-freeze-keep → la colonne qui identifie la ligne (le Nom) : c'est
                     la seule qui reste figée sur mobile, où deux colonnes
                     mangeraient la moitié de l'écran.

   La largeur de la première colonne se règle par table :
   <table class="tl-table" style="--freeze-1:110px"> */
.tl-table{ --freeze-1:150px; }

.tl-table th.tl-freeze-1,
.tl-table td.tl-freeze-1,
.tl-table thead th.tl-freeze-1{
    position:sticky !important;
    left:0 !important;
    z-index:6 !important;
    width:var(--freeze-1);
    min-width:var(--freeze-1);
    max-width:var(--freeze-1);
}
.tl-table th.tl-freeze-2,
.tl-table td.tl-freeze-2,
.tl-table thead th.tl-freeze-2{
    position:sticky !important;
    left:var(--freeze-1) !important;
    z-index:6 !important;
}

/* Fond opaque ET empilement au-dessus du reste.
   Les en-têtes de ces tableaux sont eux aussi collants (z-index 10) : sans
   un niveau supérieur, l'en-tête voisin recouvrait la colonne figée et on
   lisait « ⏱ En attente » au-dessus des noms. Les sélecteurs passent par
   thead/tbody pour peser autant que les règles de base. */
.tl-table thead th.tl-freeze-1,
.tl-table thead th.tl-freeze-2{
    background:#F8FAFC !important;
    z-index:30 !important;
}
.tl-table tbody td.tl-freeze-1,
.tl-table tbody td.tl-freeze-2{
    background:#fff;
    z-index:5 !important;
}
.tl-table tbody tr:hover td.tl-freeze-1,
.tl-table tbody tr:hover td.tl-freeze-2{ background:#F8FAFC; }

/* Trait de séparation sur la dernière colonne figée : sans repère visuel,
   on ne comprend pas pourquoi une partie du tableau ne bouge pas. */
.tl-table .tl-freeze-edge{
    box-shadow:6px 0 8px -6px rgba(15,23,42,.18);
    border-right:1px solid #E7EBF2;
}

@media (max-width:768px){
    /* Sur téléphone, seule la colonne d'identité reste figée. */
    .tl-table th.tl-freeze-1:not(.tl-freeze-keep),
    .tl-table td.tl-freeze-1:not(.tl-freeze-keep),
    .tl-table th.tl-freeze-2:not(.tl-freeze-keep),
    .tl-table td.tl-freeze-2:not(.tl-freeze-keep){
        position:static !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        box-shadow:none;
        border-right:0;
    }
    /* .tl-table thead th.tl-freeze-keep est indispensable : la règle de base
       vise thead th (deux éléments), donc plus spécifique qu'un simple
       th — sans ce sélecteur, l'en-tête « Nom » gardait son décalage et
       se désalignait des cellules du corps. */
    .tl-table th.tl-freeze-keep,
    .tl-table td.tl-freeze-keep,
    .tl-table thead th.tl-freeze-keep,
    .tl-table tbody td.tl-freeze-keep{
        position:sticky !important;
        left:0 !important;
        box-shadow:6px 0 8px -6px rgba(15,23,42,.18);
        border-right:1px solid #E7EBF2;
    }
}

/* C. PAGE RÉINITIALISATION
   Cette vue pose son contenu directement dans la carte, sans le conteneur
   .tl-card-body : la marge intérieure ajoutée aux cartes ne l'atteignait
   pas et le texte restait collé aux bordures. */
.tl-reset-page .tl-card{ padding:22px 24px; }
.tl-reset-page .tl-card > h2:first-child,
.tl-reset-page .tl-card > h3:first-child{ margin-top:0; }

/* ════════════════════════════════════════════════════════════════
   v1.20.2 — Modales trop hautes (Gestion des utilisateurs)
   ════════════════════════════════════════════════════════════════

   .tl-modal n'avait AUCUNE hauteur maximale. Dès qu'un formulaire
   dépassait la hauteur de l'écran — c'est le cas de « Créer un compte »
   et « Modifier le profil », qui alignent nom, rôle, matière, email,
   mot de passe, téléphone, ville, salle de visio et Telegram — la boîte
   débordait par le haut ET par le bas.

   Le haut était même définitivement inatteignable : un élément flex
   centré qui déborde de son conteneur voit sa partie haute sortir de la
   zone défilable, on ne peut plus l'atteindre. C'est un piège connu du
   centrage flex, et « margin:auto » est la parade.

   On reprend le principe déjà éprouvé du panneau latéral : l'en-tête et
   le pied restent fixes, seul le corps défile. Le titre et les boutons
   d'action sont donc toujours visibles, quelle que soit la longueur du
   formulaire. */
.tl-modal-overlay.open{
    overflow-y:auto;
    padding:20px;
}
.tl-modal{
    max-height:calc(100vh - 40px);
    display:flex;
    flex-direction:column;
    margin:auto;          /* parade au rognage haut du centrage flex */
    overflow:hidden;      /* respecte les coins arrondis */
}
.tl-modal-header,
.tl-modal-footer{
    flex:0 0 auto;
}
.tl-modal-body{
    flex:1 1 auto;
    overflow-y:auto;
    overscroll-behavior:contain;   /* la page derrière ne défile pas */
}

/* Sur téléphone, la modale occupe presque tout l'écran : chaque pixel
   compte pour afficher les champs. */
@media (max-width:768px){
    .tl-modal-overlay.open{ padding:10px; }
    .tl-modal{ max-height:calc(100vh - 20px); margin:auto; }
    .tl-modal-body{ padding:18px; }
}