/* ============================================================
   GLOBAL MOBILE RESPONSIVE — Skill Empire India
   Covers: Public, User Panel, Admin Panel
   Breakpoints: 1199 | 991 | 767 | 575 | 480
   ============================================================ */

/* ── 0. Hard overflow lock — kills horizontal scroll on EVERY page ── */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* Word-wrap for long text / IDs / URLs */
p, span, td, th, li, h1, h2, h3, h4, h5 {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ── 1. Global table overflow (all pages) ── */
.table-responsive,
.card-body table,
.data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── 1b. Panel-specific: ALL tables become self-scrolling on mobile ── */
@media (max-width: 991.98px) {
    /* User panel */
    .panel-main table,
    .panel-card table,
    .affiliate-card table,
    .income-card table,
    .referral-card table,
    .payout-card table,
    /* Admin panel */
    .admin-content table,
    .card-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    /* Panel content wrapper — prevent child overflow from escaping */
    .panel-wrapper,
    .panel-content-wrapper,
    .panel-main {
        max-width: 100%;
        overflow-x: hidden;
    }
    /* Admin main wrapper */
    .admin-main,
    .admin-content {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* ── 2. Global form grids → single column on mobile ── */
@media (max-width: 767.98px) {
    .two-col,
    .form-row-2,
    .form-grid-2 {
        grid-template-columns: 1fr !important;
    }
    .three-col,
    .form-grid-3 {
        grid-template-columns: 1fr !important;
    }
    .view-detail-grid {
        grid-template-columns: 1fr !important;
    }
    .modal-actions {
        flex-direction: column;
        gap: 8px;
    }
    .modal-actions .btn-cancel,
    .modal-actions .btn-save,
    .modal-actions .btn-delete {
        width: 100%;
        justify-content: center;
    }
}

/* ── 3. Global modals → full width on mobile ── */
@media (max-width: 575.98px) {
    .modal-card,
    .modal-overlay .modal-card {
        width: 96% !important;
        max-width: 100% !important;
        margin: 10px auto;
        max-height: 95vh;
    }
    .modal-body {
        padding: 14px !important;
    }
    .modal-header {
        padding: 14px !important;
    }
}

/* ================================================================
   ADMIN PANEL
   ================================================================ */

/* Admin topbar on mobile */
@media (max-width: 991.98px) {
    .admin-main { margin-left: 0 !important; }
    .admin-sidebar { left: -250px; }
    .admin-sidebar.show { left: 0; }
    .menu-toggle { display: block !important; }
    .topbar-search { max-width: 200px; }
}

@media (max-width: 767.98px) {
    .admin-content { padding: 12px !important; }
    .admin-topbar { padding: 10px 14px; gap: 10px; }
    .topbar-search { display: none; }
    .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    /* Admin tables → horizontal scroll */
    .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table { min-width: 520px; }
    /* Admin filter bar */
    .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .filter-left,
    .filter-right { flex-wrap: wrap; gap: 8px; }
    .filter-select,
    .search-input,
    .filter-input { width: 100%; }
    .btn-add { width: 100%; justify-content: center; }
}

@media (max-width: 575.98px) {
    .stats-grid { grid-template-columns: 1fr !important; }
    .admin-content { padding: 10px !important; }
    .data-table { min-width: 480px; }
    .admin-topbar { flex-wrap: wrap; }
    /* Admin settings grid */
    .settings-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   USER PANEL (panel.css supplements)
   ================================================================ */

/* Dropdown menu on small screens */
@media (max-width: 575.98px) {
    .topbar-dropdown-menu {
        right: 0 !important;
        width: 240px !important;
        max-height: 80vh;
        overflow-y: auto;
    }
    .notification-panel {
        right: -30px !important;
        width: calc(100vw - 30px) !important;
        max-width: 320px;
    }
}

/* Stats grid in user panel */
@media (max-width: 575.98px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .stat-card { padding: 14px !important; }
    .stat-card-value { font-size: 16px !important; }
}

@media (max-width: 380px) {
    .stats-grid { grid-template-columns: 1fr !important; }
}

/* Panel card tables (income history, payout, etc.) */
@media (max-width: 767.98px) {
    .panel-card { padding: 14px !important; }
    .panel-card table,
    .panel-main table {
        min-width: 480px;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Upgrade plan grid */
@media (max-width: 575.98px) {
    #plansGrid {
        grid-template-columns: 1fr !important;
    }
}

/* Affiliate panel */
@media (max-width: 767.98px) {
    .earnings-grid { grid-template-columns: 1fr 1fr !important; }
    .top-row,
    .middle-row,
    .bottom-row { grid-template-columns: 1fr !important; }
    .pie-chart-wrap { flex-direction: column !important; align-items: center !important; }
}
@media (max-width: 480px) {
    .earnings-grid { grid-template-columns: 1fr !important; }
}

/* Leaderboard table */
@media (max-width: 767.98px) {
    .leaderboard-table-wrap,
    .lb-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .lb-table { min-width: 500px; }
}

/* KYC / profile forms */
@media (max-width: 767.98px) {
    .kyc-form-grid,
    .profile-form-grid {
        grid-template-columns: 1fr !important;
    }
    .kyc-form-grid .two-col,
    .profile-form-grid .two-col {
        grid-template-columns: 1fr !important;
    }
}

/* ================================================================
   PUBLIC — NAVBAR (supplements navbar-2.css)
   ================================================================ */

@media (max-width: 575.98px) {
    .navbar-brand { gap: 6px; }
    .brand-name { font-size: 13px !important; }
    .brand-tagline { font-size: 8px !important; }
    .logo-img { height: 30px !important; }
    .navbar { padding: 12px 0 !important; }
}

/* ================================================================
   PUBLIC — HERO (supplements herobar.css)
   ================================================================ */

@media (max-width: 767.98px) {
    .hero-banner { padding: 20px 0 0 !important; }
    .hero-content { text-align: center; }
    .hero-title { font-size: 28px !important; }
    .hero-desc { font-size: 13px !important; }
    .hero-stats { justify-content: center; flex-wrap: wrap; gap: 12px; }
    .hero-actions { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .hero-title { font-size: 22px !important; }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-actions .btn { width: 100%; text-align: center; }
}

/* ================================================================
   PUBLIC — PACKAGES (supplements packages.css)
   ================================================================ */

@media (max-width: 575.98px) {
    .packages-grid {
        grid-template-columns: 1fr !important;
        max-width: 360px;
        margin: 0 auto;
    }
    .package-card { height: auto !important; min-height: 300px; }
}

/* ================================================================
   PUBLIC — FOOTER (supplements footer.css)
   ================================================================ */

@media (max-width: 575.98px) {
    .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .footer-bottom-row { flex-direction: column; gap: 12px; text-align: center; }
    .footer-social { justify-content: center; }
}

/* ================================================================
   PUBLIC — COURSES PAGE (supplements courses-page.css)
   ================================================================ */

@media (max-width: 767.98px) {
    .courses-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
}
@media (max-width: 575.98px) {
    .courses-grid { grid-template-columns: 1fr !important; max-width: 380px; margin: 0 auto; }
    .course-filter-bar { flex-direction: column; gap: 10px; }
    .course-filter-bar input,
    .course-filter-bar select { width: 100%; }
}

/* ================================================================
   PUBLIC — COURSE DETAIL (supplements course-detail.css)
   ================================================================ */

@media (max-width: 991.98px) {
    .course-detail-layout,
    .course-layout { flex-direction: column !important; gap: 24px !important; }
    .course-sidebar,
    .course-sticky-card { position: static !important; width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 575.98px) {
    .course-detail-header { padding: 20px 14px !important; }
    .course-meta-row { flex-wrap: wrap; gap: 8px; }
    .course-tabs { overflow-x: auto; white-space: nowrap; }
}

/* ================================================================
   PUBLIC — PACKAGE DETAIL PAGES (creator/founder/webinar empire)
   ================================================================ */

@media (max-width: 991.98px) {
    .package-detail-layout,
    .empire-layout,
    .product-layout { flex-direction: column !important; gap: 30px !important; }
    .package-detail-info,
    .empire-info { max-width: 100% !important; }
    .package-detail-thumb,
    .empire-thumb { max-width: 500px; margin: 0 auto; }
}

@media (max-width: 767.98px) {
    .empire-features-grid { grid-template-columns: 1fr !important; }
    .empire-pricing { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .empire-cta-row { flex-direction: column; gap: 10px; }
    .empire-cta-row .btn,
    .empire-cta-row a { width: 100%; text-align: center; }
    .package-detail-section { padding: 30px 0 !important; }
    .packages-hero-title { font-size: 28px !important; }
    .packages-hero-subtitle { font-size: 14px !important; }
}

/* ================================================================
   PUBLIC — ABOUT / CONTACT / LEGAL PAGES
   ================================================================ */

@media (max-width: 767.98px) {
    .about-grid,
    .about-layout { flex-direction: column !important; gap: 30px !important; }
    .about-img-wrap { max-width: 400px; margin: 0 auto; }
    .contact-grid { grid-template-columns: 1fr !important; }
    .contact-form-card { padding: 24px 16px !important; }
}

@media (max-width: 575.98px) {
    .legal-content { padding: 20px 14px !important; }
    .section-header .main-title { font-size: 26px !important; }
    .section-header .sub-title { font-size: 12px !important; }
}

/* ================================================================
   PUBLIC — FAQ / FEATURES / CTA
   ================================================================ */

@media (max-width: 767.98px) {
    .faq-item { padding: 16px !important; }
    .faq-question { font-size: 14px !important; }
    .features-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
    .cta-banner-content { flex-direction: column !important; text-align: center !important; gap: 20px; }
    .cta-banner-content .btn { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
    .features-grid { grid-template-columns: 1fr !important; }
    .faq-question { font-size: 13px !important; }
}

/* ================================================================
   PUBLIC — AUTH PAGES (supplements auth.css)
   ================================================================ */

@media (max-width: 480px) {
    .auth-form-card { padding: 20px 14px !important; border-radius: 14px !important; }
    .auth-form-card h3 { font-size: 20px !important; }
    .btn-auth { font-size: 14px !important; padding: 13px !important; }
}

/* ================================================================
   PUBLIC — VERIFY CERTIFICATE / WEBINAR LINK / PACKAGES PAGE
   ================================================================ */

@media (max-width: 767.98px) {
    .verify-card { padding: 24px 16px !important; }
    .cert-result { flex-direction: column !important; gap: 16px !important; }
    .webinar-card { padding: 20px 14px !important; }
    .packages-filter-bar { flex-wrap: wrap; gap: 10px; }
    .packages-filter-bar select,
    .packages-filter-bar input { flex: 1 1 140px; }
}

/* ================================================================
   USER PANEL — PAGE-SPECIFIC FIXES
   ================================================================ */

/* --- Affiliate panel --- */
@media (max-width: 767.98px) {
    .affiliate-main { padding: 12px 10px !important; }
    .affiliate-card { padding: 16px !important; }
    .earning-item h3 { font-size: 16px !important; }
    .calendar-header,
    .calendar-grid { font-size: 11px; }
    .calendar-grid span { padding: 5px 2px !important; font-size: 11px !important; }
    /* referral table — make it block-scroll */
    .referral-table,
    .affiliate-card .referral-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
}

/* --- Income History / Payout / My Referral tables --- */
@media (max-width: 767.98px) {
    .income-main,
    .payout-main,
    .referral-main,
    .leaderboard-main,
    .kyc-main,
    .social-main,
    .support-main,
    .link-main { padding: 12px 10px !important; }

    .summary-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .income-card,
    .payout-card,
    .referral-card { overflow: visible; }
    /* Ensure .table-responsive wrapper works */
    .table-responsive { overflow-x: auto !important; display: block; }
    .income-table,
    .payout-table,
    .referral-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 575.98px) {
    .summary-row { grid-template-columns: 1fr !important; }
}

/* --- My Courses / All Courses --- */
@media (max-width: 575.98px) {
    .my-courses-main,
    .all-courses-main { padding: 12px !important; }
    .my-courses-grid,
    .courses-list-grid { grid-template-columns: 1fr !important; }
    .my-courses-banner { padding: 20px 14px !important; }
    .banner-content h1 { font-size: 22px !important; }
    .search-bar { max-width: 100% !important; }
}

/* --- Profile page --- */
@media (max-width: 767.98px) {
    .profile-top-card { flex-direction: column !important; text-align: center !important; padding: 20px !important; }
    .profile-tabs { flex-wrap: wrap !important; }
    .profile-main { padding: 14px !important; }
}

/* --- KYC submit / change --- */
@media (max-width: 575.98px) {
    .kyc-approved-banner { flex-direction: column !important; text-align: center !important; }
    .kyc-main { padding: 12px !important; }
    .card-body { padding: 14px !important; }
    .btn-update { width: 100% !important; justify-content: center !important; }
}

/* --- Upgrade plan --- */
@media (max-width: 575.98px) {
    .upgrade-main { padding: 12px !important; }
    .plans-grid { grid-template-columns: 1fr !important; }
    .current-plan-banner { padding: 14px !important; }
}

/* --- Change password --- */
@media (max-width: 575.98px) {
    .change-pass-main,
    .cp-container { padding: 12px !important; max-width: 100% !important; }
}

/* --- Certificates --- */
@media (max-width: 767.98px) {
    .certificates-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}
@media (max-width: 480px) {
    .certificates-grid { grid-template-columns: 1fr !important; }
}

/* --- Certificate viewer (PDF/image) --- */
@media (max-width: 767.98px) {
    .certificate-wrap { padding: 10px !important; }
    .cert-card { padding: 10px !important; }
}

/* --- Leaderboard --- */
@media (max-width: 575.98px) {
    .leaderboard-grid { grid-template-columns: 1fr !important; }
    .earner-item { padding: 10px 12px !important; }
}

/* --- Lead management / Webinar payments --- */
@media (max-width: 767.98px) {
    .lead-main,
    .webinar-main { padding: 12px 10px !important; }
    .lead-table,
    .webinar-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Social media / Link generator / Support numbers --- */
@media (max-width: 575.98px) {
    .social-grid,
    .link-section { grid-template-columns: 1fr !important; }
    .link-box,
    .social-card { width: 100% !important; }
}

/* --- Dashboard page inline-grid fixes --- */
@media (max-width: 420px) {
    /* The 1fr 1fr grids in dashboard.php */
    .panel-main > div[style*="grid-template-columns:1fr 1fr"],
    .panel-main > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ================================================================
   USER PANEL — TOPBAR FIXES ON SMALL SCREENS
   ================================================================ */

@media (max-width: 420px) {
    .panel-topbar { padding: 0 8px !important; }
    .topbar-page-title { font-size: 13px !important; }
    .topbar-icon-btn { width: 34px !important; height: 34px !important; font-size: 14px !important; }
    .topbar-user-btn { padding: 4px 6px !important; gap: 5px !important; }
    .topbar-user-avatar { width: 30px !important; height: 30px !important; font-size: 12px !important; }
    .topbar-dropdown-menu {
        width: 220px !important;
        right: -8px !important;
        font-size: 13px !important;
    }
    .topbar-dropdown-menu a { padding: 9px 12px !important; font-size: 12px !important; }
}

/* ================================================================
   USER PANEL — SIDEBAR OVERLAY FIX
   ================================================================ */

@media (max-width: 991.98px) {
    /* Sidebar overlay prevents page shifting */
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }
    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }
    /* Sidebar itself is above overlay */
    .panel-sidebar { z-index: 1000 !important; }
}

/* ================================================================
   ADMIN PANEL — EXTRA FIXES
   ================================================================ */

@media (max-width: 767.98px) {
    .admin-topbar { flex-wrap: wrap; padding: 10px 12px !important; gap: 8px !important; }
    .topbar-search { display: none !important; }
    .admin-content { padding: 10px !important; }
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
    /* Make all admin tables scroll */
    .admin-content table,
    .card table,
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .filter-bar { flex-direction: column !important; align-items: stretch !important; }
    .filter-left,
    .filter-right { flex-wrap: wrap; gap: 8px; width: 100%; }
    .filter-select,
    .search-input,
    .filter-input { width: 100% !important; }
    .btn-add { width: 100% !important; justify-content: center !important; }
    /* Admin modals */
    .modal-card { width: 96% !important; margin: 0 auto; }
    .two-col,
    .three-col,
    .view-detail-grid { grid-template-columns: 1fr !important; }
    .modal-actions { flex-direction: column !important; }
    .modal-actions button { width: 100% !important; justify-content: center !important; }
}

@media (max-width: 575.98px) {
    .stats-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   UTILITY HELPERS
   ================================================================ */

/* Container max-width safety */
.container { width: 100%; padding-left: 16px; padding-right: 16px; }

/* Touch-friendly buttons */
@media (max-width: 767.98px) {
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 42px;
    }
}

/* Panel main padding on small screens */
@media (max-width: 575.98px) {
    .panel-main { padding: 10px !important; }
}

/* Public page containers */
@media (max-width: 575.98px) {
    .container { padding-left: 12px; padding-right: 12px; }
}

/* Payment page */
@media (max-width: 767.98px) {
    .payment-layout,
    .payment-row { flex-direction: column !important; }
    .payment-aside,
    .payment-form { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 480px) {
    .payment-methods { grid-template-columns: 1fr !important; }
    .upi-grid,
    .bank-grid { grid-template-columns: 1fr !important; }
}