/* ==========================================================================
   Hireknock — Mobile Responsive CSS
   Complete mobile-first responsive overrides for all pages & dashboards
   ========================================================================== */

/* ── Breakpoints ──────────────────────────────────────────────────────────
   1200px  tablet landscape / small desktop
   992px   tablet portrait
   768px   mobile landscape
   480px   mobile portrait / small phones
   ──────────────────────────────────────────────────────────────────────── */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. MOBILE NAVIGATION DRAWER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mobile-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
    z-index: 1100;
}
.mobile-nav-toggle:hover { background: rgba(124,58,237,0.06); }
.hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
    transform-origin: center;
}
/* Animate to X when open */
.mobile-nav-toggle.is-open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle.is-open .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-nav-toggle.is-open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay backdrop */
.mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.35);
    backdrop-filter: blur(4px);
    z-index: 998;
}
.mobile-nav-backdrop.is-visible { display: block; }

/* Mobile nav drawer */
.mobile-nav-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: min(320px, 85vw);
    height: 100vh;
    background: #ffffff;
    z-index: 999;
    padding: 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 4px 0 40px rgba(15,23,42,0.12);
}
.mobile-nav-drawer.is-open { transform: translateX(0); }

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(124,58,237,0.08);
    background: var(--bg-secondary);
}
.drawer-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s;
}
.drawer-close:hover { color: var(--secondary); }

.drawer-nav {
    padding: 16px 0;
}
.drawer-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    border-left: 3px solid transparent;
}
.drawer-nav a:hover,
.drawer-nav a.active {
    background: rgba(124,58,237,0.05);
    color: var(--secondary);
    border-left-color: var(--secondary);
}
.drawer-nav .drawer-section-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 12px 24px 6px;
    display: block;
}
.drawer-nav .drawer-divider {
    height: 1px;
    background: rgba(124,58,237,0.06);
    margin: 8px 24px;
}
.drawer-portal-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 24px;
}
.drawer-portal-btns a {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(124,58,237,0.12);
    background: var(--bg-secondary);
    border-left: 3px solid transparent;
}
.drawer-portal-btns a:hover {
    background: rgba(124,58,237,0.06);
    border-color: rgba(124,58,237,0.2);
    border-left-color: var(--secondary);
}
.drawer-actions {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(124,58,237,0.06);
}
.drawer-actions .btn {
    width: 100%;
    text-align: center;
    padding: 12px;
    font-size: 13px;
}

@media (max-width: 1200px) {
    .mobile-nav-toggle { display: flex !important; }
    .mobile-nav-drawer { display: block; }
    .header-actions { display: none !important; }
    .nav-menu { display: none !important; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. CONTAINER & SECTION GLOBAL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .container { padding: 0 16px; }
    section, .section { padding: 40px 0 !important; }
    h1 { font-size: clamp(24px, 7vw, 36px) !important; }
    h2 { font-size: clamp(20px, 5.5vw, 28px) !important; }
    h3 { font-size: clamp(16px, 4.5vw, 20px) !important; }
    .section-tag { font-size: 10px !important; }
}
@media (max-width: 480px) {
    .container { padding: 0 12px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. HERO SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 992px) {
    .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; text-align: center; }
    .hero-visual { order: -1; max-width: 340px; margin: 0 auto; }
    .hero-cta-group { justify-content: center !important; flex-wrap: wrap; gap: 10px !important; }
    .hero-badge { margin: 0 auto; }
    .stats-container { flex-direction: column !important; gap: 16px !important; align-items: center; }
    .stat-item { text-align: center; }
    .stat-divider { display: none !important; }
}
@media (max-width: 480px) {
    .hero-section { padding: 30px 0 40px !important; }
    .hero-cta-group { flex-direction: column; }
    .hero-cta-group .btn { width: 100%; text-align: center; }
    .floating-card { display: none; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. FEATURE / SERVICE CARDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 992px) {
    .features-grid,
    .services-grid,
    .milestone-columns,
    .resume-builder-grid,
    .dashboard-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
}
@media (max-width: 576px) {
    .features-grid,
    .services-grid,
    .milestone-columns,
    .resume-builder-grid,
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. PROCESS FLOW
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .process-flow { grid-template-columns: 1fr !important; gap: 20px !important; }
    .process-line { display: none !important; }
    .process-step { flex-direction: row !important; align-items: flex-start; gap: 16px; text-align: left; }
    .process-step-num { flex-shrink: 0; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. CONTACT PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .contact-form-wrapper { padding: 24px 20px !important; }
    .contact-info-box { padding: 20px !important; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. JOBS / ARCHIVE PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .jobs-layout { grid-template-columns: 1fr !important; }
    .jobs-sidebar { display: none; }
    .job-card { padding: 20px !important; }
    .job-card-footer { flex-direction: column !important; gap: 10px; }
    .job-card-footer .btn { width: 100%; text-align: center; }
    .job-filters { flex-wrap: wrap; gap: 8px; }
    .job-filter-btn { font-size: 12px !important; padding: 6px 12px !important; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. FORMS (Login / Signup pages)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 576px) {
    .auth-wrapper { padding: 16px !important; }
    .auth-card { padding: 28px 20px !important; border-radius: 16px !important; }
    .input-field { font-size: 16px !important; /* Prevent iOS zoom */ }
    .form-row { grid-template-columns: 1fr !important; gap: 12px !important; }
    .btn-submit { width: 100%; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. TABLES — Mobile Card Style
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .table-responsive-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 600px; }
    .table-card-mobile { display: block !important; }
    .table-desktop { display: none !important; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. MODALS — Full screen on mobile
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 576px) {
    .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
    .modal-box {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto;
        padding: 28px 20px !important;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. CANDIDATE DASHBOARD
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Dashboard outer layout */
@media (max-width: 1024px) {
    .dashboard-layout,
    .cand-layout,
    [class*="dash-layout"],
    [class*="portal-layout"] {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
}

/* Sidebar — collapsible on mobile */
@media (max-width: 1024px) {
    .dashboard-sidebar,
    .cand-sidebar,
    [class*="dash-sidebar"],
    [class*="-sidebar"] {
        position: fixed !important;
        left: -280px !important;
        top: 0 !important;
        height: 100vh !important;
        width: 260px !important;
        z-index: 900 !important;
        transition: left 0.3s cubic-bezier(0.16,1,0.3,1) !important;
        overflow-y: auto !important;
        box-shadow: 4px 0 30px rgba(0,0,0,0.1) !important;
    }
    .dashboard-sidebar.sidebar-open,
    .cand-sidebar.sidebar-open,
    [class*="dash-sidebar"].sidebar-open,
    [class*="-sidebar"].sidebar-open {
        left: 0 !important;
    }
    .dashboard-main,
    .cand-main,
    [class*="dash-main"],
    [class*="-main-content"] {
        width: 100% !important;
        padding: 16px !important;
    }
}

/* Mobile dashboard top bar with sidebar toggle */
.mobile-dash-topbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #ffffff;
    border-bottom: 1px solid rgba(124,58,237,0.08);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
@media (max-width: 1024px) {
    .mobile-dash-topbar { display: flex; }
}
.mobile-sidebar-toggle {
    background: none;
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.2s;
    line-height: 1;
}
.mobile-sidebar-toggle:hover { background: rgba(124,58,237,0.06); }

/* Stats grid */
@media (max-width: 768px) {
    .stats-grid-4,
    [class*="stats-grid"],
    .kpi-grid,
    .metric-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .stat-card, .kpi-card, .metric-card {
        padding: 16px !important;
    }
    .stat-card .stat-number,
    .kpi-number {
        font-size: 24px !important;
    }
}
@media (max-width: 360px) {
    .stats-grid-4,
    [class*="stats-grid"],
    .kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Tab navigation — horizontal scroll */
@media (max-width: 768px) {
    .tab-nav,
    .dash-tabs,
    [class*="tab-list"] {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding-bottom: 4px !important;
        scrollbar-width: none;
    }
    .tab-nav::-webkit-scrollbar { display: none; }
    .tab-btn,
    .dash-tab-btn,
    [class*="tab-item"] {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 8px 14px !important;
    }
}

/* Content cards in dashboards */
@media (max-width: 768px) {
    .content-grid-2,
    .content-grid-3,
    [class*="content-grid"],
    .card-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .dash-card,
    [class*="-card"],
    .info-card {
        padding: 18px 16px !important;
        border-radius: 14px !important;
    }
}

/* Timeline / progress sections */
@media (max-width: 576px) {
    .progress-timeline { flex-direction: column !important; gap: 16px !important; }
    .timeline-connector { display: none !important; }
    .skill-tags { gap: 6px !important; }
    .skill-tag { font-size: 11px !important; padding: 4px 10px !important; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. RECRUITER DASHBOARD
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .recruiter-grid,
    .applicant-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .applicant-card { padding: 16px !important; }
    .applicant-card .applicant-actions { flex-wrap: wrap; gap: 6px; }
    .applicant-card .applicant-actions .btn { font-size: 11px; padding: 6px 10px; }
    .job-post-form .form-grid { grid-template-columns: 1fr !important; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. ADMIN PORTAL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .admin-stats-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
    .admin-table-wrap { overflow-x: auto; }
    .admin-table { min-width: 680px; }
    .admin-filters { flex-wrap: wrap; gap: 8px; }
    .admin-action-bar { flex-direction: column; gap: 10px; align-items: stretch; }
    .admin-action-bar .btn { width: 100%; text-align: center; }
}
@media (max-width: 480px) {
    .admin-stats-grid { grid-template-columns: 1fr !important; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. COLLEGE PORTAL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .college-drives-grid,
    .drive-listing-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .drive-card { padding: 18px 16px !important; }
    .drive-card-actions { flex-direction: column; gap: 8px; }
    .drive-card-actions .btn { width: 100%; text-align: center; }
    .student-table-wrap { overflow-x: auto; }
    .student-table { min-width: 560px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. TRAINING PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .training-grid,
    .course-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .course-card { padding: 20px !important; }
    .curriculum-tabs { flex-wrap: wrap; gap: 8px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. BUTTONS — Mobile Touch Targets
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .btn { min-height: 44px; } /* WCAG touch target */
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. UTILITY HELPERS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .show-mobile-only { display: none !important; }
    .mobile-dash-topbar { display: none !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. PWA INSTALL BANNER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#pwa-install-banner {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid rgba(124,58,237,0.15);
    border-radius: 16px;
    padding: 14px 20px;
    box-shadow: 0 8px 40px rgba(15,23,42,0.12);
    z-index: 9999;
    max-width: 340px;
    width: calc(100% - 32px);
    align-items: center;
    gap: 14px;
}
#pwa-install-banner.is-visible { display: flex; }
.pwa-banner-icon { font-size: 28px; flex-shrink: 0; }
.pwa-banner-text { flex: 1; }
.pwa-banner-text strong { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.pwa-banner-text span { font-size: 11px; color: var(--text-muted); }
.pwa-install-btn {
    background: var(--secondary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}
.pwa-install-btn:hover { background: #6d28d9; }
.pwa-dismiss-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    line-height: 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. FOOTER RESPONSIVE (supplement)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .site-footer { padding: 40px 0 0 !important; margin-top: 50px !important; }
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .footer-bottom-flex { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
}