/* =====================================================
   FLY — Thème partagé
   Formalise la charte graphique existante (bleu #0284C7,
   cartes arrondies, badges de statut) et l'applique de
   façon cohérente à toutes les pages : typographie,
   fond de page, tableaux, états vides, icônes.
   ===================================================== */

:root {
    --fly-primary: #0284C7;
    --fly-primary-dark: #0369A1;
    --fly-bg: #f5f7fa;
    --fly-border: #e5e7eb;
    --fly-text-muted: #6b7280;
    --fly-radius-sm: 8px;
    --fly-radius: 12px;
    --fly-radius-lg: 16px;
    --fly-shadow: 0 8px 20px rgba(15, 23, 42, .05);
    --fly-shadow-lg: 0 15px 30px rgba(15, 23, 42, .07);
}

/* TYPOGRAPHIE */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--fly-bg);
    color: #1f2937;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.02em;
    color: #111827;
}

/* SCROLLBAR (Webkit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ÉTAT VIDE (unifie les messages "aucun résultat" affichés un peu partout) */
.empty-state {
    text-align: center;
    padding: 50px 20px;
    background: #fff;
    border: 1px dashed var(--fly-border);
    border-radius: var(--fly-radius-lg);
    color: var(--fly-text-muted);
}

.empty-state .empty-icon {
    font-size: 34px;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.empty-state strong {
    display: block;
    color: #374151;
    font-size: 15px;
    margin-bottom: 4px;
}

.empty-state small {
    font-size: 13px;
}

/* TABLEAUX : en-têtes plus lisibles, cohérents partout */
.table thead th,
.custom-table thead th,
.custom-table th {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 12px;
    font-weight: 600;
    color: var(--fly-text-muted);
    background: #f9fafb;
    border-bottom-width: 1px;
}

/* CARTES : ombre douce cohérente (les cartes Bootstrap gardent .shadow/.shadow-sm) */
.card-box, .job-card, .formation-card, .stat-card, .admin-card,
.doc-card, .form-card, .profile-card, .feature-card {
    box-shadow: var(--fly-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.card-box:hover, .job-card:hover, .formation-card:hover, .admin-card:hover,
.doc-card:hover, .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--fly-shadow-lg);
}

/* BOUTONS : plus arrondis, légère ombre, meilleure cohérence de couleur */
.btn {
    font-weight: 500;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(2, 132, 199, .10);
}
.btn-lg {
    border-radius: 12px;
}
.btn-sm {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(2, 132, 199, .08);
}
.btn-primary {
    background: var(--fly-primary);
    border-color: var(--fly-primary);
}
.btn-primary:hover {
    background: var(--fly-primary-dark);
    border-color: var(--fly-primary-dark);
    box-shadow: 0 6px 16px rgba(2, 132, 199, .28);
}
.btn-outline-primary {
    color: var(--fly-primary);
    border-color: var(--fly-primary);
}
.btn-outline-primary:hover {
    background: var(--fly-primary);
    border-color: var(--fly-primary);
    box-shadow: 0 6px 16px rgba(2, 132, 199, .22);
}

/* PAGE HEADER générique (titre + sous-titre + action) */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--fly-border);
    border-radius: var(--fly-radius);
    padding: 20px;
    margin-bottom: 24px;
}

.page-header h3 {
    margin-bottom: 2px;
}

.page-header .page-subtitle {
    color: var(--fly-text-muted);
    font-size: 14px;
}

/* ICÔNES rondes utilisées dans les en-têtes de carte (offres, formations, chat...) */
.icon-tile {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E0F7FE;
    color: var(--fly-primary);
    font-size: 18px;
    flex-shrink: 0;
}

/* BANNIÈRE DE BIENVENUE (en-tête vivant des tableaux de bord) */
.welcome-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0284C7, #38BDF8 55%, #7bcedd);
    color: #fff;
    border-radius: var(--fly-radius-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.welcome-banner::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, .12);
    border-radius: 50%;
    pointer-events: none;
}

.welcome-banner::before {
    content: "";
    position: absolute;
    bottom: -60px;
    right: 120px;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
    pointer-events: none;
}

.welcome-banner .welcome-content {
    position: relative;
    z-index: 1;
}

.welcome-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: rgba(255, 255, 255, .18);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.welcome-banner h3 {
    color: #fff;
    font-weight: 800;
    margin-bottom: 4px;
}

.welcome-banner p {
    color: rgba(255, 255, 255, .92);
    margin: 0;
    font-size: 14px;
}

.welcome-banner .welcome-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.welcome-banner .btn-light {
    color: #0284C7;
    font-weight: 600;
}

/* Icône décorative dans une carte de statistique */
.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 10px;
    background: rgba(2, 132, 199, .1);
    color: var(--fly-primary);
}

.stat-card.light .stat-icon,
.stat-card[class*="light"] .stat-icon {
    background: rgba(2, 132, 199, .1);
    color: var(--fly-primary);
}

.stat-card:not(.light) .stat-icon {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* =====================================================
   MODE SOMBRE — activé via [data-theme="dark"] sur <html>
   (voir main.php + settings/index.php). Recible les
   surfaces partagées ; les bannières dégradées (hero,
   welcome-banner, sidebar) restent identiques dans les
   deux modes car déjà sombres/colorées.
   ===================================================== */
:root {
    --fly-dark-bg: #0f172a;
    --fly-dark-surface: #1e293b;
    --fly-dark-border: #334155;
    --fly-dark-text: #e2e8f0;
    --fly-dark-text-strong: #f8fafc;
    --fly-dark-text-muted: #94a3b8;
}

[data-theme="dark"] body {
    background: var(--fly-dark-bg);
    color: var(--fly-dark-text);
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--fly-dark-text-strong);
}

[data-theme="dark"] .text-muted {
    color: var(--fly-dark-text-muted) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .card-box,
[data-theme="dark"] .job-card,
[data-theme="dark"] .formation-card,
[data-theme="dark"] .saved-card,
[data-theme="dark"] .stat-card.light,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .doc-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .page-header,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .login-card,
[data-theme="dark"] .apply-card,
[data-theme="dark"] .subscribe-card,
[data-theme="dark"] .chat-card,
[data-theme="dark"] .user-card,
[data-theme="dark"] .candidate-card,
[data-theme="dark"] .settings-card {
    background: var(--fly-dark-surface) !important;
    border-color: var(--fly-dark-border) !important;
    color: var(--fly-dark-text);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--fly-dark-bg) !important;
    border-color: var(--fly-dark-border) !important;
    color: var(--fly-dark-text) !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--fly-dark-text-muted);
}

[data-theme="dark"] .table {
    color: var(--fly-dark-text);
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .custom-table thead {
    background: var(--fly-dark-surface) !important;
    color: var(--fly-dark-text-muted);
}

[data-theme="dark"] .custom-table tr:hover,
[data-theme="dark"] .table tbody tr:hover {
    background: rgba(255, 255, 255, .03) !important;
}

[data-theme="dark"] .badge-role,
[data-theme="dark"] .tag,
[data-theme="dark"] .doc-name {
    background: var(--fly-dark-border) !important;
    color: var(--fly-dark-text) !important;
}

[data-theme="dark"] hr {
    border-color: var(--fly-dark-border);
}

[data-theme="dark"] .content-box,
[data-theme="dark"] .doc-box,
[data-theme="dark"] .chat-box,
[data-theme="dark"] .job-info-box,
[data-theme="dark"] .formation-info-box,
[data-theme="dark"] .theme-option,
[data-theme="dark"] .settings-row {
    background: var(--fly-dark-surface) !important;
    border-color: var(--fly-dark-border) !important;
    color: var(--fly-dark-text);
}

[data-theme="dark"] .settings-row {
    border-top-color: var(--fly-dark-border) !important;
    background: transparent !important;
}

[data-theme="dark"] .login-wrapper,
[data-theme="dark"] .empty-chat {
    background: var(--fly-dark-bg) !important;
}

/* =====================================================
   ONBOARDING — assistant en 3 étapes (student/candidate)
   ===================================================== */
.onboarding-wrapper {
    min-height: 100vh;
    display: flex;
}

.onboarding-side {
    flex: 1;
    max-width: 420px;
    background: linear-gradient(160deg, #E0F7FE, #f5fdff);
    padding: 60px 44px;
    display: none;
}

.onboarding-side-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #fff;
    color: var(--fly-primary);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--fly-shadow);
    margin-bottom: 24px;
}

.onboarding-side h2 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 12px;
}

.onboarding-side p {
    color: var(--fly-text-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

@media (min-width: 900px) {
    .onboarding-side {
        display: block;
    }
}

.onboarding-main {
    flex: 1;
    padding: 50px 40px;
    max-width: 640px;
    margin: 0 auto;
}

/* STEPPER */
.onboarding-stepper {
    display: flex;
    align-items: center;
    margin-bottom: 36px;
}

.onboarding-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fly-text-muted);
}

.onboarding-step .step-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--fly-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.onboarding-step.done .step-circle {
    background: #dcfce7;
    color: #166534;
}

.onboarding-step.active .step-circle {
    background: var(--fly-primary);
    color: #fff;
}

.onboarding-step.active {
    color: #111827;
}

.onboarding-step-line {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin: 0 10px;
}

.onboarding-step-line.done {
    background: #86efac;
}

/* CHECK GROUP */
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.check-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13.5px;
    cursor: pointer;
    transition: 0.2s;
}

.check-option:hover {
    border-color: var(--fly-primary);
    background: #E0F7FE;
}

.check-option input {
    accent-color: var(--fly-primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* =====================================================
   🔑 BANDEAU "MOT DE PASSE TEMPORAIRE" (layouts/main.php)
   ===================================================== */
.temp-password-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    border-radius: var(--fly-radius);
    padding: 12px 16px;
    margin: 0 auto 18px;
    max-width: 1296px;
    font-size: 14px;
}

.temp-password-banner > i {
    font-size: 20px;
}

.temp-password-banner-text {
    flex: 1 1 220px;
    min-width: 0;
}

.temp-password-banner-text strong {
    display: block;
}

.temp-password-banner .btn-warning {
    font-weight: 600;
    border-radius: 8px;
}

[data-theme="dark"] .temp-password-banner {
    background: #422006;
    border-color: #92400e;
    color: #fde68a;
}

/* =====================================================
   📱 RESPONSIVE — règles mobiles partagées entre les pages
   ===================================================== */

/* un mot ou une URL très longs passent à la ligne au lieu de déborder */
body {
    overflow-wrap: break-word;
}

/* éléments flex qui contiennent du texte : autorisés à rétrécir */
.onboarding-main,
.job-header-left > div,
.formation-header-left > div,
.event-header-left > div {
    min-width: 0;
}

@media (max-width: 767.98px) {

    /* En-têtes des pages détail (offre / formation / événement) :
       infos au-dessus, puis prix + bouton sur une ligne */
    .content .job-header-card,
    .content .formation-header-card,
    .content .event-header-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }

    .content .job-header-left,
    .content .formation-header-left,
    .content .event-header-left {
        align-items: flex-start;
    }

    .content .job-header-left .job-icon,
    .content .formation-header-left .formation-icon,
    .content .event-header-left .event-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
        flex-shrink: 0;
    }

    .content .job-header-card h3,
    .content .formation-header-card h3,
    .content .event-header-card h3 {
        font-size: 1.2rem;
    }

    .content .job-header-right,
    .content .formation-header-right,
    .content .event-header-right {
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .content .job-header-right .salary,
    .content .formation-header-right .price,
    .content .event-header-right .price {
        margin-bottom: 0;
    }

    .content .organizer-line {
        flex-wrap: wrap;
    }

    /* Bannière de bienvenue des tableaux de bord */
    .welcome-banner {
        padding: 22px 20px;
    }

    .welcome-banner h3 {
        font-size: 1.35rem;
    }

    /* Onboarding : marges réduites, stepper compact */
    .onboarding-main {
        padding: 32px 20px;
    }

    .onboarding-stepper {
        margin-bottom: 28px;
    }

    .onboarding-step:not(.active) {
        font-size: 0;
        gap: 0;
    }

    .onboarding-step-line {
        margin: 0 6px;
    }

    .onboarding-actions {
        flex-direction: column-reverse;
    }

    .onboarding-actions .btn {
        width: 100%;
    }

    /* En-têtes de liste (titre + recherche / bouton) : empilés */
    .content .jobs-header,
    .content .events-header,
    .content .formations-header,
    .content .candidate-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .content .jobs-header > *,
    .content .events-header > *,
    .content .formations-header > * {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Boutons de formulaire : action principale en haut, pleine largeur */
    .content .form-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .content .form-actions .btn {
        width: 100%;
    }

    /* Tableaux → cartes empilées (labels posés par assets/js/responsive.js) */
    .content .table-stack thead {
        display: none;
    }

    .content .table-stack,
    .content .table-stack tbody,
    .content .table-stack tr,
    .content .table-stack td {
        display: block;
        width: 100%;
    }

    .content .table-stack tr {
        padding: 10px 2px;
        border-bottom: 1px solid var(--fly-border);
    }

    .content .table-stack tr:last-child {
        border-bottom: none;
    }

    .content .table-stack td {
        border: none;
        padding: 5px 12px;
        text-align: left !important;
    }

    .content .table-stack td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #9ca3af;
        margin-bottom: 3px;
    }

    .content .table-stack td .justify-content-end {
        justify-content: flex-start !important;
        flex-wrap: wrap;
    }
}

[data-theme="dark"] .content .table-stack tr {
    border-color: var(--fly-dark-border);
}

/* 📱 FILET DE SÉCURITÉ MOBILE
   Beaucoup de grilles Bootstrap dans ce projet n'utilisent qu'une classe
   col-md-*/col-lg-* sans base col-6/col-12 pour les petits écrans — Bootstrap
   ne leur applique alors AUCUNE largeur en dessous de 768px (l'élément se
   réduit au contenu au lieu de s'empiler en pleine largeur). Plutôt que de
   corriger un par un des dizaines de fichiers de formulaires/grilles, ce
   filet de sécurité force toute colonne col-md-*/col-lg-* qui n'a pas déjà
   une classe col-6/col-12 explicite à occuper 100% de la largeur en dessous
   de 768px. Les colonnes déjà corrigées manuellement (col-6 col-md-*) ne
   sont pas concernées par cette règle. */
@media (max-width: 767.98px) {
    .row > [class*="col-md-"]:not(.col-6):not(.col-12),
    .row > [class*="col-lg-"]:not(.col-6):not(.col-12) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}