/* ═══════════════════════════════════════════════════════════════
   TRAINING-LANDING.CSS — AlphaVault Training & Events
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   §0 — VIEW STATE (Admin / Public) — CORRECTIF CRITIQUE
   Empêche le flash / l'affichage simultané admin+public avant
   l'exécution de resources-common.js (délai auth Firebase)
   ═══════════════════════════════════════════════════════════════ */
   [data-res-view="admin"] {
    display: none;
}
[data-res-view="public"] {
    display: block;
}

/* Les overlays modaux ne dépendent PAS de data-res-view :
   ils doivent être invisibles tant que .open n'est pas ajouté */
.car-job-editor-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(6px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .25s ease;
}
.car-job-editor-overlay.open {
    display: flex;
    opacity: 1;
}

/* ── LEARNING LABS ── */
.lab-tr-labs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.lab-tr-lab-card {
    position: relative; background: #fff; border: 1px solid var(--ink-border);
    border-radius: var(--ink-radius-md); padding: 26px 22px;
    display: flex; flex-direction: column; gap: 16px;
    transition: box-shadow .3s ease, transform .3s ease;
}
.lab-tr-lab-card:hover { box-shadow: 0 14px 32px rgba(10,10,10,.08); transform: translateY(-3px); }
.lab-tr-lab-card--next { border-color: var(--ink-black); }

.lab-tr-lab-badge {
    position: absolute; top: -10px; left: 22px;
    background: var(--ink-black); color: #fff; font-size: .62rem; font-weight: 700;
    letter-spacing: .06em; padding: 4px 10px; border-radius: 20px;
}

.lab-tr-lab-date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 56px; height: 56px; background: var(--ink-surface); border-radius: var(--ink-radius-sm);
    flex-shrink: 0;
}
.lab-tr-lab-date-day { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; color: var(--ink-black); line-height: 1; }
.lab-tr-lab-date-month { font-size: .64rem; font-weight: 700; color: var(--ink-text-muted); letter-spacing: .05em; }

.lab-tr-lab-body h4 { font-size: 1rem; font-weight: 700; color: var(--ink-black); margin: 0 0 8px; }
.lab-tr-lab-body p { font-size: .82rem; color: var(--ink-text-secondary); line-height: 1.5; margin: 0 0 10px; }
.lab-tr-lab-meta { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--ink-text-muted); }

/* ── ASK AN EXPERT ── */
.lab-tr-expert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lab-tr-expert-next {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--ink-surface); border-radius: var(--ink-radius-md);
    padding: 18px 20px; margin-bottom: 28px;
}
.lab-tr-expert-next-icon {
    width: 38px; height: 38px; border-radius: var(--ink-radius-sm);
    background: var(--ink-accent-pale); color: var(--ink-accent);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lab-tr-expert-next b { display: block; font-size: .9rem; color: var(--ink-black); margin-bottom: 4px; }
.lab-tr-expert-next span { font-size: .82rem; color: var(--ink-text-secondary); line-height: 1.4; }

/* ── WEBINAR LIBRARY ── */
.lab-tr-webinar-filters { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }

.lab-tr-webinar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lab-tr-webinar-card {
    background: #fff; border: 1px solid var(--ink-border); border-radius: var(--ink-radius-md);
    overflow: hidden; cursor: pointer; transition: box-shadow .3s ease, transform .3s ease;
}
.lab-tr-webinar-card:hover { box-shadow: var(--ink-shadow-3); transform: translateY(-4px); }

.lab-tr-webinar-thumb {
    position: relative; height: 160px;
    background: linear-gradient(135deg, var(--ink-black-soft), #2a2b33);
    display: flex; align-items: center; justify-content: center;
}
.lab-tr-webinar-thumb i { font-size: 2.4rem; color: rgba(255,255,255,.85); }
.lab-tr-webinar-duration {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(0,0,0,.7); color: #fff; font-size: .68rem; font-weight: 600;
    padding: 3px 8px; border-radius: 4px;
}

.lab-tr-webinar-body { padding: 18px 20px; }
.lab-tr-webinar-body h4 { font-size: .94rem; font-weight: 600; color: var(--ink-black); margin: 8px 0 12px; line-height: 1.4; }

/* ── NEWSLETTER ── */
.lab-tr-newsletter {
    display: flex; gap: 10px; max-width: 420px; margin: 0 auto;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--ink-radius-md); padding: 6px;
}
.lab-tr-newsletter input {
    flex: 1; background: transparent; border: none; outline: none;
    color: #fff; font-family: var(--font-sans); font-size: .88rem; padding: 0 12px;
}
.lab-tr-newsletter input::placeholder { color: rgba(255,255,255,.4); }

.lab-tr-empty {
    text-align: center; padding: 60px 20px; color: var(--ink-text-muted);
    font-size: .9rem; grid-column: 1 / -1;
}

/* ═══════════════════════════════════════════════════════════════
   §1 — ADMIN BANNER (car-admin-banner)
   ═══════════════════════════════════════════════════════════════ */
.car-admin-banner {
    background: linear-gradient(90deg, #0a0a0a, #1a1a1a);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 12px 0;
    position: sticky; top: 0; z-index: 500;
}
.car-admin-banner-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}
.car-admin-banner-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.car-admin-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.12); color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    padding: 5px 12px; border-radius: 20px;
    text-transform: uppercase;
}
.car-admin-banner-text { color: rgba(255,255,255,.7); font-size: .82rem; }
.car-admin-banner-text span { color: #fff; font-weight: 600; }
.car-admin-banner-right { display: flex; gap: 8px; }

.car-admin-toggle-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.65); font-size: .8rem; font-weight: 600;
    padding: 7px 16px; border-radius: 8px; cursor: pointer;
    transition: all .2s ease; font-family: var(--font-sans);
}
.car-admin-toggle-btn:hover { border-color: rgba(255,255,255,.35); color: #fff; }
.car-admin-toggle-btn.active { background: #fff; color: #0a0a0a; border-color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   §2 — ADMIN DASHBOARD (car-admin-dash)
   ═══════════════════════════════════════════════════════════════ */
.car-admin-dash {
    background: var(--ink-surface, #f7f7f5);
    min-height: 100vh;
    padding: 40px 0 80px;
}
.car-admin-container { max-width: 1280px; }

.car-admin-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
}
.car-admin-title {
    font-family: var(--font-serif); font-size: 1.9rem; font-weight: 600;
    color: var(--ink-black); margin: 0 0 6px;
}
.car-admin-subtitle { font-size: .9rem; color: var(--ink-text-secondary); margin: 0; }

/* ── Tabs ── */
.car-admin-tabs {
    display: flex; gap: 4px; border-bottom: 1px solid var(--ink-border);
    margin-bottom: 28px; overflow-x: auto;
}
.car-admin-tab {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: none; border-bottom: 2px solid transparent;
    color: var(--ink-text-muted); font-size: .86rem; font-weight: 600;
    padding: 12px 18px; cursor: pointer; white-space: nowrap;
    transition: all .2s ease; font-family: var(--font-sans);
}
.car-admin-tab:hover { color: var(--ink-black); }
.car-admin-tab.active { color: var(--ink-black); border-bottom-color: var(--ink-black); }

.car-admin-panel { display: none; }
.car-admin-panel.active { display: block; animation: carAdminFadeIn .25s ease; }
@keyframes carAdminFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Stats Grid ── */
.car-admin-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px;
}
.car-admin-stat-card {
    background: #fff; border: 1px solid var(--ink-border);
    border-radius: var(--ink-radius-md); padding: 22px;
}
.car-admin-stat-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; margin-bottom: 14px;
}
.car-admin-stat-value {
    font-family: var(--font-serif); font-size: 1.9rem; font-weight: 700;
    color: var(--ink-black); line-height: 1; margin-bottom: 6px;
}
.car-admin-stat-label { font-size: .8rem; color: var(--ink-text-muted); }

/* ── Card / Table wrapper ── */
.car-admin-card {
    background: #fff; border: 1px solid var(--ink-border);
    border-radius: var(--ink-radius-md); overflow: hidden; margin-bottom: 24px;
}
.car-admin-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--ink-border);
}
.car-admin-card-header h3 { font-size: 1rem; font-weight: 700; color: var(--ink-black); margin: 0; }

.car-admin-table-wrap { overflow-x: auto; }
.car-admin-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.car-admin-table thead th {
    text-align: left; padding: 12px 22px; background: var(--ink-surface);
    color: var(--ink-text-muted); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--ink-border); white-space: nowrap;
}
.car-admin-table tbody td {
    padding: 14px 22px; border-bottom: 1px solid var(--ink-border);
    color: var(--ink-text-secondary); vertical-align: middle;
}
.car-admin-table tbody tr:last-child td { border-bottom: none; }
.car-admin-table tbody tr:hover { background: var(--ink-surface); }
.car-admin-td-title { color: var(--ink-black); font-weight: 600; }

.car-admin-status-pill {
    display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700;
    padding: 3px 10px; border-radius: 20px; text-transform: capitalize;
}
.car-admin-status-pill.published { background: #dcfce7; color: #15803d; }
.car-admin-status-pill.draft { background: #f1f5f9; color: #64748b; }

.car-admin-row-actions { display: flex; gap: 6px; }
.car-admin-icon-btn {
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ink-surface); border: 1px solid var(--ink-border);
    color: var(--ink-text-secondary); cursor: pointer; font-size: .8rem;
    transition: all .2s ease;
}
.car-admin-icon-btn:hover { background: var(--ink-black); color: #fff; border-color: var(--ink-black); }
.car-admin-icon-btn.danger:hover { background: #dc2626; border-color: #dc2626; }

/* ── Toolbar (search + filters) ── */
.car-admin-toolbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.car-jb-search-wrap { position: relative; flex: 1; min-width: 220px; }
.car-jb-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--ink-text-muted); font-size: .8rem;
}
.car-jb-search-input {
    width: 100%; padding: 10px 14px 10px 36px;
    border: 1px solid var(--ink-border); border-radius: 8px;
    font-size: .85rem; font-family: var(--font-sans);
    background: #fff; color: var(--ink-black); outline: none;
}
.car-jb-search-input:focus { border-color: var(--ink-black); }

.car-jb-select {
    padding: 10px 14px; border: 1px solid var(--ink-border); border-radius: 8px;
    font-size: .85rem; font-family: var(--font-sans); background: #fff;
    color: var(--ink-black); outline: none; cursor: pointer; min-width: 160px;
}
.car-jb-select:focus { border-color: var(--ink-black); }

/* ═══════════════════════════════════════════════════════════════
   §3 — MODALS (car-job-editor-overlay / car-job-editor)
   Réutilisé pour RSVP Modal + Event Editor Modal
   ═══════════════════════════════════════════════════════════════ */
.car-job-editor {
    background: #fff;
    border-radius: var(--ink-radius-lg, 16px);
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    transform: translateY(12px) scale(.98);
    opacity: 0;
    transition: all .3s cubic-bezier(.16,1,.3,1);
    overflow: hidden;
}
.car-job-editor-overlay.open .car-job-editor {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.car-job-editor-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 26px; border-bottom: 1px solid var(--ink-border);
    flex-shrink: 0;
}
.car-job-editor-header h2 {
    font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600;
    color: var(--ink-black); margin: 0;
}
.car-job-modal-close {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ink-surface); border: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-text-secondary); cursor: pointer; font-size: .85rem;
    transition: all .2s ease;
}
.car-job-modal-close:hover { background: var(--ink-black); color: #fff; }

.car-job-editor-body {
    padding: 24px 26px; overflow-y: auto; flex: 1;
}
.car-job-editor-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 18px 26px; border-top: 1px solid var(--ink-border);
    flex-shrink: 0; background: var(--ink-surface);
}

/* ── Form fields (car-apply-field / car-apply-row) ── */
.car-apply-field { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.car-apply-field label {
    font-size: .8rem; font-weight: 700; color: var(--ink-black);
}
.car-apply-field input,
.car-apply-field select,
.car-apply-field textarea {
    padding: 11px 14px; border: 1px solid var(--ink-border); border-radius: 8px;
    font-size: .88rem; font-family: var(--font-sans); color: var(--ink-black);
    background: #fff; outline: none; transition: border-color .2s ease;
}
.car-apply-field input:focus,
.car-apply-field select:focus,
.car-apply-field textarea:focus { border-color: var(--ink-black); }
.car-apply-field textarea { resize: vertical; min-height: 90px; }

.car-apply-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   §4 — RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
    .lab-tr-labs-grid { grid-template-columns: repeat(2, 1fr); }
    .lab-tr-webinar-grid { grid-template-columns: repeat(2, 1fr); }
    .lab-tr-expert-grid { grid-template-columns: 1fr; gap: 36px; }
    .lab-tr-expert-text h2, .lab-tr-expert-text .lp-sub { text-align: center !important; }
    .car-admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .lab-tr-labs-grid, .lab-tr-webinar-grid { grid-template-columns: 1fr; }
    .lab-tr-newsletter { flex-direction: column; }
    .car-admin-stats-grid { grid-template-columns: 1fr; }
    .car-admin-header { flex-direction: column; align-items: flex-start; }
    .car-apply-row { grid-template-columns: 1fr; }
    .car-admin-banner-inner { flex-direction: column; align-items: flex-start; }
}