/* ============================================
   PAGES APP - MOBILE CSS
   Production-ready mobile styles for all
   feeds/pages templates
   ============================================ */

/* ============================================
   PAGES BASE MODERN (pages_base_modern.html)
   CSS grid 3-column → single column
   ============================================ */

@media (max-width: 991px) {
    .pages-layout-container {
        grid-template-columns: 1fr !important;
        padding: 10px !important;
        gap: 10px !important;
    }

    .pages-left-sidebar,
    .pages-right-sidebar {
        display: none !important;
    }

    .pages-main-content {
        min-height: unset !important;
    }
}

@media (max-width: 768px) {
    .pages-layout-container {
        padding: 8px !important;
    }

    .content-card {
        padding: 14px !important;
        border-radius: 10px !important;
    }

    .content-header h2 {
        font-size: 18px !important;
    }

    .content-header p {
        font-size: 13px !important;
    }

    /* Sidebar cards in Bootstrap grid */
    .col-12.col-lg-3 .modern-sidebar-card,
    .col-12.col-lg-3 .card {
        margin-bottom: 12px !important;
    }
}

/* ============================================
   PAGE LIST (page_list.html)
   ============================================ */

@media (max-width: 768px) {
    /* Stats grid: 4-col → 2-col */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stat-card,
    .stat-card-modern {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    .stat-card h3,
    .stat-card-modern .stat-number-modern {
        font-size: 26px !important;
    }

    .stat-card-modern .stat-icon-modern {
        font-size: 32px !important;
        margin-bottom: 8px !important;
    }

    /* Pages grid: auto-fill → 1-col */
    .pages-grid,
    .popular-grid,
    .trending-grid,
    .my-pages-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Page card cover */
    .page-cover,
    .page-cover-placeholder,
    .my-page-cover,
    .page-cover-trending {
        height: 140px !important;
    }

    /* Page card body */
    .page-card-body,
    .my-page-body {
        padding: 14px !important;
    }

    .page-title,
    .my-page-title {
        font-size: 15px !important;
    }

    /* Page stats row */
    .page-stats,
    .my-page-stats,
    .trending-stats {
        padding: 10px 0 !important;
    }

    .stat-value,
    .my-stat-value,
    .trending-stat-value {
        font-size: 16px !important;
    }

    /* Action buttons */
    .page-actions,
    .my-page-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .page-actions .btn,
    .my-page-actions .btn {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    /* Filter form */
    .card-body .row.g-3 .col-md-6 {
        margin-bottom: 8px !important;
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 20px !important;
    }

    .pagination .page-link {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .stat-card h3 {
        font-size: 22px !important;
    }

    .pages-grid,
    .popular-grid,
    .trending-grid,
    .my-pages-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   PAGE DETAIL MODERN (page_detail_modern.html)
   ============================================ */

@media (max-width: 768px) {
    /* Cover section */
    .page-cover-section {
        height: auto !important;
        min-height: 350px !important;
        padding-top: 60px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        border-radius: 0 !important;
    }

    .page-header-content {
        padding: 0 0 16px !important;
        width: 100% !important;
    }

    /* Logo + title stacked */
    .page-logo-wrapper {
        width: 90px !important;
        height: 90px !important;
        margin: 0 auto 12px !important;
    }

    .page-logo-placeholder {
        font-size: 40px !important;
    }

    .page-title-section {
        padding-left: 0 !important;
        text-align: center !important;
    }

    .page-title-section h1 {
        font-size: 20px !important;
    }

    .page-description {
        font-size: 13px !important;
    }

    .page-badges {
        justify-content: center !important;
    }

    /* Stats card inside cover - Transparent */
    .page-stats-card {
        background: rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1.5px solid rgba(56, 189, 248, 0.85) !important;
        margin-top: 12px !important;
        padding: 8px 12px !important;
    }

    .stat-value {
        font-size: 18px !important;
        color: #38bdf8 !important;
    }

    .stat-label {
        color: #ffffff !important;
    }

    /* Action buttons */
    .action-buttons {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .btn-action,
    .btn-action-outline {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }

    /* Content cards */
    .content-card {
        padding: 16px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }

    .content-card-title {
        font-size: 16px !important;
        margin-bottom: 14px !important;
    }

    /* Info items */
    .info-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }

    .info-value {
        font-size: 14px !important;
    }

    /* Similar pages */
    .similar-page-logo {
        width: 40px !important;
        height: 40px !important;
    }

    .similar-page-info h6 {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .page-cover-section {
        min-height: 320px !important;
        padding-top: 50px !important;
    }

    .page-logo-wrapper {
        width: 72px !important;
        height: 72px !important;
    }

    .page-title-section h1 {
        font-size: 17px !important;
    }

    .action-buttons {
        gap: 6px !important;
    }

    .btn-action,
    .btn-action-outline {
        font-size: 12px !important;
        padding: 7px 10px !important;
    }
}

/* ============================================
   PAGE DASHBOARD (page_dashboard.html)
   Inline grid stats → 2-col on mobile
   ============================================ */

@media (max-width: 768px) {
    /* Dashboard stats inline grid */
    .creator-wrapper .creator-card .creator-content > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Quick actions grid */
    .creator-content > div[style*="minmax(250px"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .creator-cover {
        padding: 20px 16px !important;
    }

    .creator-content {
        padding: 16px !important;
    }

    .header-title {
        font-size: 22px !important;
    }

    .header-subtitle {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .creator-wrapper .creator-card .creator-content > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* ============================================
   USER PAGES (user_pages.html)
   ============================================ */

@media (max-width: 768px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stat-card-modern {
        padding: 18px !important;
    }

    .stat-number-modern {
        font-size: 28px !important;
    }

    .my-pages-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .my-page-header {
        margin-bottom: 20px !important;
    }

    .my-page-cover {
        height: 110px !important;
    }

    .my-page-logo {
        width: 64px !important;
        height: 64px !important;
        bottom: -22px !important;
        left: 14px !important;
    }

    .my-page-body {
        padding: 8px 14px 14px !important;
    }

    .my-page-title {
        font-size: 16px !important;
    }

    .my-page-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .my-page-actions .btn {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    .empty-state-modern {
        padding: 40px 16px !important;
    }

    .empty-state-modern i {
        font-size: 56px !important;
    }

    .empty-state-modern h3 {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .stat-number-modern {
        font-size: 24px !important;
    }
}

/* ============================================
   POPULAR / TRENDING / NEARBY PAGES
   ============================================ */

@media (max-width: 768px) {
    .popular-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .popular-card {
        border-radius: 12px !important;
    }

    .rating-stars-large {
        font-size: 15px !important;
    }

    .trending-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .trending-card {
        border-radius: 12px !important;
    }

    .page-cover-trending {
        height: 150px !important;
    }

    .trending-rank {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    .trending-stats {
        padding: 12px 0 !important;
    }

    .trending-stat-value {
        font-size: 18px !important;
    }

    /* Nearby location input */
    .location-input-group {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .location-input-group select {
        width: 100% !important;
    }
}

/* ============================================
   PAGE SEARCH (page_search.html)
   ============================================ */

@media (max-width: 768px) {
    .search-input {
        font-size: 14px !important;
        padding: 14px 50px 14px 16px !important;
    }

    .search-filters {
        gap: 8px !important;
    }

    .filter-chip {
        padding: 7px 14px !important;
        font-size: 13px !important;
    }

    .search-result-count {
        font-size: 15px !important;
    }

    .modern-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .card-item {
        padding: 14px !important;
    }
}

/* ============================================
   CREATE PAGE / PAGE FORM
   ============================================ */

@media (max-width: 768px) {
    /* Step indicator */
    .step-indicator {
        gap: 4px !important;
        margin-bottom: 16px !important;
    }

    .step {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    /* Form sections */
    .form-section,
    .settings-section {
        padding: 16px !important;
    }

    /* Image previews */
    .image-preview.logo-preview img {
        max-width: 140px !important;
        max-height: 140px !important;
    }

    /* Form navigation buttons */
    .d-flex.gap-2 {
        flex-wrap: wrap !important;
    }

    .d-flex.gap-2 .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Business hours day */
    .business-hours-day {
        padding: 12px !important;
    }
}

/* ============================================
   SIDEBAR CARDS (pages_sidebar.html,
   pages_right_sidebar.html)
   ============================================ */

@media (max-width: 991px) {
    /* On tablet/mobile, sidebars stack below main */
    .col-12.col-lg-3.order-2 .modern-sidebar-card,
    .col-12.col-lg-3.order-3 .modern-sidebar-card {
        border-radius: 10px !important;
    }

    .sidebar-link {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }

    .category-link {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    /* Stats in right sidebar */
    .stats-grid {
        gap: 10px !important;
    }

    .stat-item {
        padding: 10px !important;
    }

    .stat-value {
        font-size: 22px !important;
    }

    /* Quick links */
    .quick-link-item {
        padding: 12px 16px !important;
        font-size: 13px !important;
    }

    /* CTA card */
    .cta-icon {
        width: 56px !important;
        height: 56px !important;
    }

    .cta-icon i {
        font-size: 28px !important;
    }
}

/* ============================================
   HEADER CARDS (page header sections)
   ============================================ */

@media (max-width: 768px) {
    .card-body[style*="padding: 30px"] {
        padding: 20px !important;
    }

    .card-body h1[style*="font-size: 26px"] {
        font-size: 20px !important;
    }

    /* Icon circles in headers */
    div[style*="width: 80px"][style*="height: 80px"][style*="border-radius: 50%"] {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 14px !important;
    }

    div[style*="width: 80px"][style*="height: 80px"] i[style*="font-size: 40px"] {
        font-size: 28px !important;
    }
}

/* ============================================
   MODALS (suggest, boost) on mobile
   ============================================ */

@media (max-width: 576px) {
    .modal-dialog {
        margin: 8px !important;
    }

    .modal-body {
        padding: 14px !important;
    }

    #friendsList {
        max-height: 220px !important;
    }
}

/* ============================================
   GENERAL OVERFLOW PROTECTION
   ============================================ */

@media (max-width: 768px) {
    .profile-container {
        overflow-x: hidden !important;
    }

    .page-card-item,
    .popular-card,
    .trending-card,
    .my-page-card {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    img {
        max-width: 100% !important;
    }
}