/* ============================================
   Groups Mobile CSS
   Breakpoints: 991px, 768px, 480px
   ============================================ */

/* ============================================
   991px — Tablet: collapse 3-col to 1-col
   ============================================ */
@media (max-width: 991px) {

    /* groups_base_modern.html — 3-col grid → single col */
    .groups-layout-container {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        gap: 12px !important;
    }

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

    .groups-main-content {
        min-height: auto;
    }

    /* list.html / detail.html — Bootstrap col sidebars */
    .profile-container .col-lg-3 {
        display: none;
    }

    .profile-container .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* my_groups.html — stats row */
    .stat-card {
        padding: 15px;
    }

    /* settings.html — sidebar nav */
    .settings-sidebar {
        position: static !important;
        height: auto !important;
        padding-right: 0 !important;
        margin-bottom: 20px;
    }

    .settings-content {
        padding: 25px !important;
    }

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

    .save-content {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }

    /* analytics.html */
    .analytics-container {
        padding: 15px !important;
        margin: 15px auto !important;
    }

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

    .table-header,
    .table-row {
        grid-template-columns: 2fr 1fr 1fr !important;
    }

    /* delete.html */
    .delete-group-container {
        padding: 15px !important;
        margin: 15px auto !important;
    }

    /* update.html */
    .group-update-container {
        padding: 12px !important;
    }

    .privacy-options {
        grid-template-columns: 1fr !important;
    }

    .settings-toggle-grid {
        grid-template-columns: 1fr !important;
    }

    /* members.html — search/sort bar */
    .members-container-header .d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ============================================
   768px — Mobile: full single-column layout
   ============================================ */
@media (max-width: 768px) {

    /* ---- groups_base_modern.html ---- */
    .groups-layout-container {
        padding: 8px !important;
        gap: 8px !important;
    }

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

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

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

    /* ---- list.html ---- */
    .profile-container {
        padding: 0 8px !important;
    }

    .profile-row {
        margin: 0 !important;
    }

    /* Group cards grid: 2-col → 1-col */
    .profile-container .row.g-3 .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ---- detail.html ---- */
    /* Cover photo */
    .card-img-top[style*="height: 250px"] {
        height: 160px !important;
    }

    /* Avatar overlap */
    .card-body .d-flex.align-items-start img[style*="margin-top: -50px"],
    .card-body .d-flex.align-items-start div[style*="margin-top: -50px"] {
        width: 70px !important;
        height: 70px !important;
        margin-top: -35px !important;
    }

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

    /* Action buttons row */
    .card-body .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    .card-body .d-flex.gap-2 .btn {
        flex: 1 1 auto;
        min-width: 120px;
        font-size: 13px;
        padding: 8px 12px;
    }

    /* Stats row */
    .card-body .d-flex.gap-4 {
        gap: 16px !important;
    }

    /* ---- my_groups.html ---- */
    .stat-card {
        padding: 12px;
    }

    .stat-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 10px !important;
    }

    .stat-icon i {
        font-size: 18px !important;
    }

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

    /* Tabs: allow horizontal scroll */
    #myGroupsTab {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    #myGroupsTab::-webkit-scrollbar {
        display: none;
    }

    #myGroupsTab .nav-link {
        white-space: nowrap;
        font-size: 13px;
        padding: 8px 12px;
    }

    /* Group cards in tabs: 2-col → 1-col */
    #myGroupsTabContent .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ---- create_modern.html ---- */
    .form-section {
        padding: 15px !important;
        border-radius: 10px !important;
    }

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

    .privacy-option {
        padding: 12px !important;
    }

    .privacy-title {
        font-size: 14px !important;
    }

    .privacy-desc {
        font-size: 12px !important;
    }

    /* ---- settings.html ---- */
    .settings-container {
        padding: 10px !important;
        margin: 10px auto !important;
    }

    .settings-header {
        padding: 25px 15px !important;
    }

    .settings-header h1 {
        font-size: 20px !important;
    }

    .settings-content {
        padding: 15px !important;
        min-height: auto !important;
    }

    .section-title {
        font-size: 18px !important;
    }

    .toggle-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .toggle-content {
        margin-right: 0 !important;
    }

    .danger-actions {
        grid-template-columns: 1fr !important;
    }

    /* ---- members.html ---- */
    /* Search + sort bar */
    .card-body .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .input-group[style*="width: 250px"] {
        width: 100% !important;
    }

    /* Member grid: 2-col → 1-col */
    #membersContainer.view-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* Member stats sidebar */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Bulk actions */
    #bulkActionsCard .d-flex.flex-wrap.gap-2 {
        flex-direction: column;
    }

    /* ---- analytics.html ---- */
    .analytics-header {
        padding: 25px 15px !important;
    }

    .analytics-header h1 {
        font-size: 20px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-top: 20px !important;
    }

    .stat-number {
        font-size: 1.8rem !important;
    }

    .filters-section {
        padding: 15px !important;
    }

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

    .action-buttons {
        flex-direction: column !important;
    }

    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

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

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

    .table-header,
    .table-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .export-options {
        grid-template-columns: 1fr !important;
    }

    /* ---- delete.html ---- */
    .delete-group-container {
        padding: 10px !important;
        margin: 10px auto !important;
    }

    .delete-header {
        padding: 25px 15px !important;
    }

    .warning-icon {
        font-size: 60px !important;
    }

    .delete-content {
        padding: 20px !important;
    }

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

    .action-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .alternative-list {
        grid-template-columns: 1fr !important;
    }

    /* ---- update.html ---- */
    .group-update-header {
        padding: 25px 15px !important;
    }

    .group-update-header h1 {
        font-size: 18px !important;
    }

    .update-form-section {
        padding: 15px !important;
    }

    .form-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .form-tabs::-webkit-scrollbar {
        display: none;
    }

    .form-tab {
        white-space: nowrap;
        font-size: 13px;
        padding: 8px 14px;
    }

    .form-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* ---- group_card.css ---- */
    .group-card-cover {
        height: 140px !important;
    }

    .group-card-icon .icon-image,
    .group-card-icon .icon-placeholder {
        width: 80px !important;
        height: 80px !important;
    }

    .group-name {
        font-size: 17px !important;
    }

    .group-stats {
        gap: 12px !important;
    }

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

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

    /* ---- Sidebar partials ---- */
    .card-header[style*="padding: 20px"] {
        padding: 14px 16px !important;
    }

    .card-header h5 {
        font-size: 16px !important;
    }

    /* ---- groups.css layout ---- */
    .group-creator-container,
    .group-list-container,
    .group-detail-container {
        padding: 10px !important;
    }

    .creator-content,
    .group-content {
        padding: 15px !important;
    }

    .creator-header,
    .group-header {
        padding: 20px 15px !important;
    }

    .header-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 28px !important;
    }

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

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

/* ============================================
   480px — Small phones
   ============================================ */
@media (max-width: 480px) {

    /* Base layout */
    .groups-layout-container {
        padding: 6px !important;
    }

    .content-card {
        padding: 12px !important;
        border-radius: 8px !important;
    }

    /* list.html header icon */
    div[style*="width: 80px; height: 80px"][style*="border-radius: 50%"] {
        width: 60px !important;
        height: 60px !important;
    }

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

    /* detail.html cover */
    .card-img-top[style*="height: 250px"] {
        height: 130px !important;
    }

    /* my_groups.html stats: 3-col → 1-col */
    .row.mb-4 .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* analytics stats: 2-col → 1-col */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

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

    /* delete stats: 2-col → 1-col */
    .delete-group-container .stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* members stats: 2-col → 1-col */
    .members-container .stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* settings header stats */
    .settings-header .d-flex.flex-wrap.gap-4 {
        gap: 12px !important;
    }

    .settings-header .h4 {
        font-size: 18px !important;
    }

    /* create form buttons */
    .d-flex.gap-2 .btn-primary,
    .d-flex.gap-2 .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* group card cover */
    .group-card-cover {
        height: 120px !important;
    }

    .group-card-icon .icon-image,
    .group-card-icon .icon-placeholder {
        width: 65px !important;
        height: 65px !important;
    }

    .group-card-icon {
        margin-top: -35px !important;
    }

    .group-name {
        font-size: 15px !important;
    }

    .group-card-actions {
        padding: 0 12px 12px !important;
    }

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

    /* Sidebar cards */
    .card-body[style*="padding: 20px"] {
        padding: 14px !important;
    }

    /* update form tabs */
    .form-tab {
        font-size: 12px !important;
        padding: 7px 10px !important;
    }

    /* settings nav */
    .nav-link {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    /* members search */
    .input-group.input-group-sm {
        width: 100% !important;
    }

    /* member card avatar */
    .member-avatar {
        width: 65px !important;
        height: 65px !important;
    }

    /* analytics chart container */
    .chart-container {
        height: 220px !important;
    }

    /* delete confirmation input */
    .confirmation-input {
        font-size: 14px !important;
    }
}