/* ============================================
   FEEDS APP MOBILE CSS
   Mobile View Fix - All feeds templates
   ============================================ */

/* ============================================
   NEWSFEED (user_newsfeed.html)
   newsfeed.css already handles sidebar hide,
   this adds extra polish
   ============================================ */

@media (max-width: 768px) {

    /* Post create card */
    .create-post-card,
    .post-form-card {
        border-radius: 10px !important;
        padding: 12px !important;
    }

    /* Post cards */
    .post-card {
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }

    .post-card .card-body {
        padding: 12px !important;
    }

    /* Post actions bar */
    .post-actions {
        gap: 4px !important;
    }

    .post-action-btn {
        font-size: 0.8rem !important;
        padding: 6px 8px !important;
    }

    /* Story bar */
    .story-bar,
    .instagram-story-bar {
        padding: 8px 0 !important;
    }

    .story-item {
        min-width: 70px !important;
        max-width: 70px !important;
    }

    .story-avatar {
        width: 56px !important;
        height: 56px !important;
    }

    .story-username {
        font-size: 10px !important;
    }

    /* ============================================
       GROUPS BASE (groups_base_modern.html)
       ============================================ */

    .groups-layout-container {
        grid-template-columns: 1fr !important;
        padding: 8px !important;
        gap: 10px !important;
    }

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

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

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

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

    /* Group cards grid */
    .groups-grid,
    .group-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Group detail cover */
    .group-cover {
        height: 160px !important;
        border-radius: 10px 10px 0 0 !important;
    }

    /* Group members grid */
    .members-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    /* ============================================
       PAGES BASE (pages_base_modern.html)
       ============================================ */

    .pages-layout-container {
        grid-template-columns: 1fr !important;
        padding: 8px !important;
        gap: 10px !important;
    }

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

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

    /* Page cards grid */
    .pages-grid,
    .page-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Page detail cover */
    .page-cover,
    .page-cover-photo {
        height: 160px !important;
        border-radius: 10px 10px 0 0 !important;
    }

    /* Page dashboard stats */
    .page-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ============================================
       STORY BASE (story_base_modern.html)
       ============================================ */

    /* Bootstrap col-md-3 sidebar hide */
    .container > .row > .col-md-3 {
        display: none !important;
    }

    /* Bootstrap col-md-6 main → full width */
    .container > .row > .col-md-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Story cards */
    .story-card {
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }

    .story-card .card-body {
        padding: 12px !important;
    }

    /* Story detail */
    .story-detail-container {
        padding: 8px !important;
    }

    .story-media {
        border-radius: 10px !important;
        max-height: 300px !important;
    }

    /* Story create form */
    .story-create-form {
        padding: 12px !important;
    }

    /* ============================================
       ALBUM BASE (album_base_modern.html)
       ============================================ */

    /* Album grid */
    .album-grid,
    .albums-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .album-card {
        border-radius: 10px !important;
    }

    .album-cover {
        height: 120px !important;
    }

    /* Album detail photo grid */
    .album-photos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* ============================================
       POST DETAIL (post_detail.html)
       ============================================ */

    .post-detail-container {
        padding: 8px !important;
    }

    .post-detail-card {
        border-radius: 10px !important;
        padding: 12px !important;
    }

    /* Comments section */
    .comments-section {
        padding: 10px !important;
    }

    .comment-item {
        padding: 8px !important;
        gap: 8px !important;
    }

    .comment-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    /* ============================================
       POST CREATE / EDIT
       ============================================ */

    .post-create-container,
    .post-edit-container {
        padding: 8px !important;
    }

    .post-form-wrapper {
        padding: 14px !important;
        border-radius: 10px !important;
    }

    /* Media upload area */
    .media-upload-area {
        padding: 20px 12px !important;
    }

    /* ============================================
       USER ALBUMS (user_albums.html)
       ============================================ */

    .user-albums-container {
        padding: 8px !important;
    }

    /* ============================================
       USER POSTS (user_posts.html)
       ============================================ */

    .user-posts-container {
        padding: 8px !important;
    }

    /* ============================================
       SEARCH RESULTS
       ============================================ */

    .search-results-container {
        padding: 8px !important;
    }

    .search-filter-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .search-filter-btn {
        font-size: 0.8rem !important;
        padding: 5px 10px !important;
    }

    /* ============================================
       ANALYTICS
       ============================================ */

    .analytics-container {
        padding: 8px !important;
    }

    .analytics-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .analytics-stat-card {
        padding: 12px !important;
        border-radius: 10px !important;
    }

    /* ============================================
       MODERATION
       ============================================ */

    .moderation-container {
        padding: 8px !important;
    }

    /* ============================================
       MEMORIES
       ============================================ */

    .memories-container {
        padding: 8px !important;
    }

    .memory-card {
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }

    /* ============================================
       GENERAL FEEDS FIXES
       ============================================ */

    /* Sidebar cards (Bootstrap col-md-3) */
    .col-md-3.sidebar-col {
        display: none !important;
    }

    /* Feed post minimal */
    .feed-post-minimal {
        padding: 10px !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Smart collage */
    .smart-collage {
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    /* Media display */
    .media-display-container {
        border-radius: 8px !important;
    }

    /* Reaction bar */
    .reaction-bar {
        gap: 4px !important;
        flex-wrap: wrap !important;
    }

    .reaction-btn {
        font-size: 0.8rem !important;
        padding: 5px 8px !important;
    }

    /* Share modal */
    .share-modal .modal-dialog {
        margin: 10px !important;
    }

    /* Overflow fix */
    .feeds-page {
        overflow-x: hidden !important;
    }
}

/* ============================================
   EXTRA SMALL (max 480px)
   ============================================ */

@media (max-width: 480px) {

    .groups-layout-container,
    .pages-layout-container {
        padding: 4px !important;
    }

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

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

    .album-grid,
    .albums-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .album-cover {
        height: 100px !important;
    }

    .album-photos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
    }

    .members-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .story-avatar {
        width: 48px !important;
        height: 48px !important;
    }

    .story-item {
        min-width: 60px !important;
        max-width: 60px !important;
    }

    .analytics-stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .page-stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .container > .row > .col-md-6 {
        padding: 0 4px !important;
    }
}

/* ============================================
   PROFILE-STYLE LAYOUT (moderation, analytics)
   profile-container / profile-col-left / profile-col-right
   ============================================ */

@media (max-width: 768px) {

    .profile-container {
        padding: 0 8px !important;
    }

    .profile-row {
        display: block !important;
    }

    .profile-col-left,
    .profile-col-right {
        display: none !important;
    }

    .profile-col-main {
        width: 100% !important;
        padding: 0 !important;
    }
}