/* ============================================================
   assets/css/responsive.css — Mobile-first responsive
   Charger en dernier après style.css et offres.css
   ============================================================ */

/* ============================================================
   BREAKPOINTS
   xs  < 576px   (téléphone portrait)
   sm  576–768px (téléphone paysage)
   md  768–992px (tablette)
   lg  992–1200px (petit desktop)
   xl  > 1200px  (grand desktop)
   ============================================================ */

/* ---- ACCUEIL : CTA candidat/recruteur (icône écrasait le texte) ---- */
@media (max-width: 576px) {
    .cta-box {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px !important;
        text-align: left;
    }
    .cta-icon { display: none; }
    .cta-box .d-flex.gap-2 {
        flex-wrap: wrap;
        width: 100%;
    }
    .cta-box .btn-sm {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ---- ACCUEIL : cartes entreprises (texte tassé en 2 colonnes) ---- */
@media (max-width: 400px) {
    .row.g-3 > .col-6 { flex: 0 0 100%; max-width: 100%; }
}

/* ---- ACCUEIL : badge prix + date formation qui se chevauchent ---- */
@media (max-width: 400px) {
    .card-body .d-flex.justify-content-between.align-items-start {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 6px;
    }
}
@media (max-width: 991px) {
    /* La sidebar sort du flux et se cache à gauche */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .3s ease;
        width: 260px !important;
        overflow-y: auto;
    }
    .sidebar.open {
        transform: translateX(0) !important;
    }

    /* Le contenu principal prend toute la largeur */
    .flex-grow-1 {
        width: 100% !important;
        min-width: 0 !important;
        padding: 60px 12px 20px !important; /* espace pour le hamburger */
    }
}

/* ---- NAVBAR MOBILE ---- */
@media (max-width: 991px) {
    .navbar-main .nav-link {
        padding: .6rem 1rem !important;
        border-bottom: none;
        border-left: 3px solid transparent;
    }
    .navbar-main .nav-link:hover,
    .navbar-main .nav-link.active {
        border-bottom: none;
        border-left-color: var(--primary);
        background: rgba(255,255,255,.1);
    }
    .navbar-collapse {
        border-top: 1px solid var(--border);
        padding: 8px 0;
    }
    .navbar-main .d-flex.gap-2 {
        flex-direction: column;
        padding: 8px 16px;
        gap: 8px !important;
    }
    .navbar-main .d-flex.gap-2 .btn {
        width: 100%;
        text-align: center;
    }
}

/* ---- HERO MOBILE ---- */
@media (max-width: 767px) {
    .hero-section {
        padding: 40px 0 32px;
        text-align: center;
        background: linear-gradient(100deg,#1A1A1A 0%,#FF6A00 55%,#FF8F40 100%) !important;
    }
    .hero-section h1 { font-size: 24px; }
    .hero-section .lead { font-size: 16px; }
    .hero-stats {
        justify-content: center;
        gap: 16px;
    }
    .hero-stats .stat-item strong { font-size: 20px; }
    .search-bar {
        flex-direction: column;
        border-radius: 12px;
        padding: 12px;
    }
    .search-bar input { width: 100%; padding: 8px 0; }
    .search-bar .divider { display: none; }
    .search-bar .btn-search { width: 100%; border-radius: 8px; padding: 12px; }
}

/* ---- GRILLES RESPONSIVE ---- */
@media (max-width: 767px) {
    /* Catégories : 2 colonnes */
    .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .cat-card  { padding: 16px 10px; }
    .cat-card .cat-icon { font-size: 22px; }

    /* Cards offres */
    .offre-list-card { padding: 14px; }
    .offre-list-card .logo-wrapper { width: 42px; height: 42px; }
    .offre-list-card .offre-title { font-size: 14px; }
    .offre-list-card .offre-tags { gap: 5px; }
    .offre-list-card .tag { font-size: 12px; padding: 3px 9px; }

    /* Cards entreprises */
    .company-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 400px) {
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .company-grid { grid-template-columns: 1fr !important; }
    .hero-section h1 { font-size: 22px; }
}

/* ---- DASHBOARD STATS CARDS ---- */
@media (max-width: 767px) {
    /* Stats cards : 2 colonnes */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* En-tête dashboard : empiler sur mobile */
    .dashboard-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }
    .dashboard-header-row .d-flex.gap-2 {
        flex-wrap: wrap;
        gap: 8px !important;
    }
    .dashboard-header-row .btn {
        font-size: 13px;
        padding: 6px 12px;
    }

    /* Table responsive : cards sur mobile */
    .table-responsive-card thead { display: none; }
    .table-responsive-card tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 10px;
        padding: 12px;
        background: var(--white);
    }
    .table-responsive-card td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border: none;
        font-size: 13px;
    }
    .table-responsive-card td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        font-size: 12px;
        text-transform: uppercase;
    }
}

/* ---- ADMIN STATS ---- */
@media (max-width: 767px) {
    .admin-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .admin-table-actions { flex-direction: column; gap: 4px; }
    .admin-table-actions .btn { width: 100%; font-size: 13px; }

    /* Petites stats en 3 colonnes sur mobile */
    .row.g-3 .col-4 { padding: 4px; }
    .row.g-3 .col-4 .card-body { padding: 12px 8px !important; }
    .row.g-3 .col-4 .fw-bold { font-size: 17px !important; }
    .row.g-3 .col-4 .text-muted { font-size: 12px !important; }
}

/* ---- TABLE RESPONSIVE GLOBALE ---- */
@media (max-width: 767px) {
    .table-responsive table { font-size: 13px; }
    .table-responsive .d-flex.gap-1 { gap: 4px !important; }
    .table-responsive .btn-sm { padding: 4px 8px; font-size: 12px; }

    /* Overflow horizontal autorisé avec scroll */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- PAGE DÉTAIL OFFRE MOBILE ---- */
@media (max-width: 991px) {
    .postuler-sticky { position: static; margin-top: 24px; }
    .offre-detail-logo { width: 60px; height: 60px; }
    .offre-detail-title { font-size: 20px; }
}

@media (max-width: 576px) {
    .offre-detail-header { padding: 20px 0; }
    .offre-detail-meta { gap: 10px; font-size: 13px; }
    .postuler-card { padding: 16px; }
}

/* ---- FORMS MOBILE ---- */
@media (max-width: 576px) {
    .form-card { padding: 20px 16px !important; }
    .auth-container { padding: 16px !important; }
    .btn-lg { font-size: 15px; padding: 12px 20px; }
}

/* ---- FOOTER MOBILE ---- */
@media (max-width: 767px) {
    .footer-main { padding: 32px 0 20px; }
    .footer-main .row > div { margin-bottom: 24px; }
    .footer-main .row > div:last-child { margin-bottom: 0; }
}

/* ---- OFFRES LAYOUT MOBILE ---- */
@media (max-width: 991px) {
    .offres-layout { grid-template-columns: 1fr !important; }
    .filtres-sticky { position: static !important; }
    .filtres-sidebar { margin-bottom: 16px; }
}

/* ---- HERO SEARCH MOBILE ---- */
@media (max-width: 576px) {
    .search-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px !important;
    }
    .search-bar input { width: 100%; }
    .search-bar select { width: 100%; }
    .search-bar .btn-search { width: 100%; }
    .search-bar .divider { display: none; }
}

/* ---- STAT ITEMS MOBILE ---- */
@media (max-width: 480px) {
    .hero-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .stat-item {
        padding: 12px !important;
        border-radius: 10px;
        background: rgba(255,255,255,.1);
    }
}

/* ---- POSTULER STICKY MOBILE ---- */
@media (max-width: 991px) {
    .postuler-sticky { position: static !important; }
}

/* ---- PHOTO PROFIL MOBILE ---- */
@media (max-width: 576px) {
    .candidat-photo-wrap { flex-direction: column; align-items: center; text-align: center; }
}

/* ---- SÉLECTEUR THÈME MOBILE ---- */
@media (max-width: 576px) {
    .theme-switcher {
        bottom: 16px;
        right: 12px;
        flex-direction: row;
        gap: 6px;
    }
    .theme-switcher-label { display: none; }
    .theme-btn { width: 30px; height: 30px; }
}

/* ---- BACK TO TOP MOBILE ---- */
@media (max-width: 576px) {
    #backToTop {
        bottom: 16px;
        left: 12px;
        right: auto !important;
        width: 38px;
        height: 38px;
    }
}

/* ---- CV BUILDER MOBILE ---- */
@media (max-width: 767px) {
    .cv-builder-layout { flex-direction: column !important; }
    .cv-preview-panel { width: 100% !important; }
}

/* ---- CARD BODY PADDING MOBILE ---- */
@media (max-width: 576px) {
    .card-body.p-4 { padding: 16px !important; }
    .p-4 { padding: 12px !important; }
    .px-4 { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ---- PRINT ---- */
@media print {
    .navbar-main, .footer-main, .sidebar,
    .btn, .filtres-sidebar, .postuler-card { display: none !important; }
    body { background: white; font-size: 12px; }
    .offre-body { max-width: 100% !important; }
}