/* ==========================================================================
   PARAKKADAN KUDUMBA KOOTTAIMA — GLOBAL MOBILE RESPONSIVE STYLES
   Breakpoints: 991px (tablet), 768px (mobile), 576px, 480px, 360px (small phones)
   TARGET: ZERO HORIZONTAL SCROLLING — ZERO CROPPED TEXT / ZERO OFF-SCREEN DATA
   ========================================================================== */

/* ── Global box-sizing & overflow guard ── */
*, *::before, *::after {
    box-sizing: border-box !important;
}
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    width: 100% !important;
    -webkit-text-size-adjust: 100% !important;
}

/* ── Images always scale ── */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* ── Mobile Nav Toggle ── */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    gap: 5px;
    z-index: 200;
}
.mobile-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #d4af37;
    border-radius: 2px;
    transition: all 0.3s ease;
}
.mobile-nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Sidebar mobile toggle — always hidden on desktop, shown via media query */
.sidebar-mobile-toggle { display: none; }

/* ============================================================
   ≤ 991px TABLET RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 991px) {

    :root { --header-height: 72px; }

    /* ── Header ── */
    .main-header {
        height: var(--header-height) !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }

    .header-container {
        padding: 0 16px !important;
        flex-wrap: nowrap !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
        width: 100% !important;
    }

    .mobile-nav-toggle { display: flex !important; }
    .header-cta { display: none !important; }

    .nav-menu {
        position: fixed !important;
        top: var(--header-height) !important;
        left: -100% !important;
        width: 100% !important;
        height: calc(100vh - var(--header-height)) !important;
        background: rgba(4, 21, 16, 0.98) !important;
        backdrop-filter: blur(16px) !important;
        border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
        transition: left 0.35s ease !important;
        z-index: 90 !important;
        overflow-y: auto;
    }
    .nav-menu.active { left: 0 !important; }

    .nav-menu ul {
        flex-direction: column !important;
        align-items: center !important;
        padding: 40px 20px !important;
        gap: 24px !important;
    }
    .nav-link { font-size: 1.15rem !important; }

    /* ── Sidebar: accordion on tablet & mobile ── */
    .sidebar-mobile-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        cursor: pointer !important;
        color: #d4af37 !important;
        font-weight: 700 !important;
        font-size: 0.88rem !important;
        border: 1px solid rgba(212, 175, 55, 0.4) !important;
        background: linear-gradient(135deg, rgba(15, 56, 42, 0.95), rgba(4, 21, 16, 0.98)) !important;
        border-radius: 8px !important;
        margin: 0 !important;
        height: 38px !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    }

    .dashboard-container,
    .bm-layout,
    .cu-layout,
    .gi-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .dashboard-sidebar,
    .bm-sidebar,
    .cu-sidebar,
    .gi-sidebar {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        top: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
        overflow: hidden !important;
        padding: 4px 6px !important;
        max-height: 48px !important;
        transition: max-height 0.4s ease !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
    }
    .dashboard-sidebar.sidebar-open,
    .bm-sidebar.sidebar-open,
    .cu-sidebar.sidebar-open,
    .gi-sidebar.sidebar-open {
        max-height: 800px !important;
        padding-bottom: 12px !important;
    }

    .dashboard-main-content {
        padding: 12px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Compact Header Bar Buttons Pair on Mobile */
    .dashboard-header-bar > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 8px !important;
        margin-top: 6px !important;
    }
    .dashboard-header-bar > div:last-child .btn,
    .dashboard-header-bar > div:last-child a,
    #btn-toggle-fy-page,
    #btn-toggle-view-entry,
    #btn-toggle-pc-view {
        flex: 1 1 50% !important;
        width: 50% !important;
        min-width: 0 !important;
        padding: 6px 8px !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.2px !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        height: 34px !important;
        line-height: 20px !important;
        border-radius: 6px !important;
    }

    /* ── Uniform Mobile Headings System (All Portal Pages) ── */
    .dashboard-header-bar h1,
    .dashboard-header-bar h2,
    .dashboard-main-content h1,
    .dashboard-main-content h2,
    .dashboard-main-content .dashboard-header-bar h2,
    .section-title,
    h2.section-title,
    .db-header-title h2,
    .page-title {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }

    .panel-header h2,
    .panel-header h3,
    .panel-header h4,
    .db-panel h3,
    .db-panel h2,
    .db-panel h4,
    .mm-card-header h3,
    .db-panel .panel-header h3,
    .pc-form-container h3,
    .rv-form-container h3,
    #pc-form-title,
    #rv-form-header-title,
    #fy-form-header-title,
    #zm-form-header-title {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }

    /* ── Layout grids → single column ── */
    .dashboard-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .master-fields-grid,
    .form-row,
    .cu-form-grid,
    .pc-form-grid,
    .table-search-bar,
    .daybook-summary-boxes,
    .dashboard-summary-cards,
    .id-details-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        grid-template-columns: none !important;
        gap: 10px !important;
    }

    /* ── Stat cards: clean compact card layout ── */
    .dashboard-stats-grid,
    .db-stats-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .db-stat-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 10px 14px !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
    }

    .stat-card-icon {
        width: 38px !important; height: 38px !important;
        min-width: 38px !important; min-height: 38px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        font-size: 0.95rem !important;
    }

    .stat-card-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        gap: 2px !important;
    }

    .stat-card-info span {
        font-size: 0.72rem !important;
        color: #94a3b8 !important;
        font-weight: 600 !important;
        text-align: left !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        display: block !important;
    }

    .stat-card-info h3 {
        font-size: 1.15rem !important;
        margin: 0 !important;
        font-weight: 700 !important;
        text-align: left !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
    }

    /* ── Tables — card layout ── */
    .db-table { display: block !important; width: 100% !important; }
    .db-table thead { display: none !important; }
    .db-table tbody {
        display: flex !important; flex-direction: column !important;
        gap: 10px !important; width: 100% !important;
    }
    .db-table tbody tr {
        display: flex !important; flex-direction: column !important;
        padding: 12px 14px !important;
        background: rgba(15, 56, 42, 0.6) !important;
        border: 1px solid rgba(212, 175, 55, 0.3) !important;
        border-radius: 10px !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .db-table tbody tr td {
        display: flex !important; flex-direction: column !important;
        text-align: left !important; border: none !important;
        border-bottom: 1px dashed rgba(212, 175, 55, 0.15) !important;
        padding: 5px 0 !important; font-size: 0.85rem !important;
        word-break: break-word !important; width: 100% !important;
    }
    /* Household Master Table Cell Labels (Admin Overview) */
    #admin-members-list-tbody tr td:nth-child(1)::before { content: "Mem No:"; color: #d4af37; font-weight: 700; display: block; margin-bottom: 2px; }
    #admin-members-list-tbody tr td:nth-child(2)::before { content: "Head of House:"; color: #94a3b8; font-weight: 600; display: block; margin-bottom: 2px; }
    #admin-members-list-tbody tr td:nth-child(3)::before { content: "House Name:"; color: #94a3b8; font-weight: 600; display: block; margin-bottom: 2px; }
    #admin-members-list-tbody tr td:nth-child(4)::before { content: "Phone:"; color: #94a3b8; font-weight: 600; display: block; margin-bottom: 2px; }
    #admin-members-list-tbody tr td:nth-child(5)::before { content: "Zone:"; color: #94a3b8; font-weight: 600; display: block; margin-bottom: 2px; }
    #admin-members-list-tbody tr td:nth-child(6)::before { content: "Action:"; color: #d4af37; font-weight: 700; display: block; margin-bottom: 2px; }

    /* ── Scrollable table wrappers (non-card tables) ── */
    .db-table tbody tr td[colspan]::before,
    .table-responsive table tbody tr td[colspan]::before,
    .inquiry-table-wrapper table tbody tr td[colspan]::before {
        content: none !important;
        display: none !important;
    }

    .table-responsive,
    .sub-grid-wrapper,
    .inquiry-table-wrapper,
    .report-table-wrapper,
    .rv-table-wrapper,
    .pc-table-wrapper,
    .bm-table-wrapper,
    .zm-table-wrapper,
    .um-table-wrapper,
    .ve-table-wrapper,
    .ml-table-wrapper,
    .cu-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px !important;
    }

    /* ── Modals ── */
    .modal-dialog {
        margin: 10px auto !important;
        max-width: 95vw !important;
        width: 95vw !important;
    }
    .modal-content { border-radius: 10px !important; }
    .modal-body { padding: 16px !important; }
    .modal-footer {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .modal-footer .btn { width: 100% !important; }

    /* ── Member Profile Modal grid → single column ── */
    #mpm-details-grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

    /* ── Forms ── */
    .form-group,
    .form-group-grid,
    .mm-form-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 4px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    .form-group label,
    .mm-form-label,
    label {
        width: 100% !important;
        font-size: 0.85rem !important;
        margin-bottom: 3px !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .form-group input, .form-group select, .form-group textarea,
    .mm-input, .mm-select, .mm-textarea,
    .form-control,
    input[type="text"], input[type="number"], input[type="tel"],
    input[type="email"], input[type="date"], input[type="password"],
    input[type="search"], select, textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        font-size: 0.88rem !important;
        padding: 9px 11px !important;
        display: block !important;
        border-radius: 6px !important;
    }

    /* ── Buttons ── */
    .btn, .btn-gold, .btn-outline,
    .btn-mm-gold, .btn-mm-outline {
        min-width: 0 !important;
        font-size: 0.88rem !important;
    }

    /* ── Panel headers ── */
    .panel-header, .mm-card-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        width: 100% !important;
    }

    /* ── Panels & containers ── */
    .fy-master-container, #fy-panel-form, #fy-page-container,
    .db-panel, .mm-card, .glass-border {
        padding: 12px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ── Dashboard header bar ── */
    .dashboard-header-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 0 0 10px 0 !important;
        margin-bottom: 12px !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
    }

    .dashboard-header-bar h2 {
        font-size: 1rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* ── Bootstrap grid columns ── */
    .col-12, .col-md-12, .col-md-6, .col-md-4, .col-md-3,
    .col-6, .col-4, .col-3, .col-sm-6, .col-lg-6, .col-lg-4,
    .master-left-col, .master-right-col,
    .db-left-col, .db-right-col {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .row, .row.g-3, .row.g-2, .row.g-1 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* ── Head photo section ── */
    .head-photo-section {
        display: flex !important; flex-direction: column !important;
        align-items: center !important; text-align: center !important;
        gap: 12px !important; padding: 14px 10px !important; width: 100% !important;
    }

    /* ── Button rows ── */
    .fy-btn-row, .mm-toolbar-buttons {
        display: flex !important; flex-direction: column !important;
        width: 100% !important; gap: 8px !important; align-items: stretch !important;
    }

    /* ── Sub-hero section ── */
    .sub-hero { padding: 40px 0 30px !important; }
    .sub-hero-container { padding: 0 16px !important; }
    .sub-hero h2 { font-size: 1.6rem !important; }
    .sub-hero p { font-size: 0.9rem !important; }

    /* ── Main content push-down (header is fixed) ── */
    #main-content { padding-top: var(--header-height) !important; }

    /* ── Footer ── */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 32px 16px !important;
    }
    .footer-col { width: 100% !important; }
    .footer-bottom-flex {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
        padding: 12px 16px !important;
    }

    /* ── Gallery grids ── */
    .gallery-grid,
    .admin-gallery-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .gallery-filter-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }
    .gallery-filter-btn { font-size: 0.8rem !important; padding: 6px 12px !important; }

    /* ── Genealogy tree ── */
    .genealogy-search-card { margin: 0 0 16px !important; border-radius: 10px !important; }
    .genealogy-page-toolbar {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px 12px !important;
    }
    .genealogy-toolbar-right { justify-content: center !important; }
    .tree-scroll-wrapper, #genealogy-page-scroll-wrapper {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: 75vh !important;
        width: 100% !important;
        touch-action: pan-x pan-y !important;
        cursor: grab !important;
    }
    .tree-canvas, #genealogy-tree-canvas {
        min-width: 100% !important;
        width: max-content !important;
        display: block !important;
        overflow: visible !important;
        margin: 0 auto !important;
    }

    /* ── Contact page ── */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* ── About page sections ── */
    .about-hero-section,
    .about-content-section,
    .about-values-grid,
    .about-stats-row {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }
    .about-img-col, .about-text-col { width: 100% !important; }

    /* ── Front Page Hero Mobile Optimizations ── */
    .hp-hero {
        min-height: auto !important;
        padding: 100px 16px 60px 16px !important;
        align-items: center !important;
    }
    .hp-hero-bg {
        background-size: contain !important;
        background-position: center bottom !important;
        opacity: 0.18 !important;
        mix-blend-mode: normal !important;
        filter: none !important;
    }
    .hp-hero-content {
        padding: 0 12px !important;
        max-width: 100% !important;
    }
    .hp-hero h1 {
        font-size: 2.2rem !important;
        line-height: 1.15 !important;
        margin-bottom: 12px !important;
    }
    .hp-hero-sub {
        font-size: 0.95rem !important;
        margin-bottom: 14px !important;
    }
    .hp-hero-desc {
        font-size: 0.88rem !important;
        margin-bottom: 24px !important;
        line-height: 1.6 !important;
    }
    .hp-hero-btns {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        gap: 12px !important;
    }
    .hp-btn-primary,
    .hp-btn-outline {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 20px !important;
        font-size: 0.88rem !important;
        box-sizing: border-box !important;
    }

    .hp-section-grid,
    .hp-stats-grid,
    .hp-pillars-grid,
    .hp-events-grid,
    .hp-trust-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ── Login pages ── */
    .login-container-wrapper { padding: 30px 16px !important; min-height: auto !important; }
    .login-card { padding: 24px 16px !important; width: 100% !important; max-width: 100% !important; }
    .login-unified-card { width: 100% !important; max-width: 100% !important; }

    /* ── Receipt Voucher / Petty Cash forms ── */
    .rv-form-section,
    .pc-form-section {
        padding: 12px 10px !important;
    }
    .rv-items-table-wrapper,
    .pc-items-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }

    /* ── Member list table ── */
    .ml-table { width: 100% !important; }

    /* ── Board members ── */
    .bm-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* ── Zone master ── */
    .zm-form-section { padding: 12px 10px !important; }

    /* ── User management ── */
    .um-form-section { padding: 12px 10px !important; }

    /* ── Receipt report ── */
    .rr-filter-bar { flex-direction: column !important; gap: 8px !important; }
    .rr-filter-bar .form-group { width: 100% !important; }

    /* ── Day book / Expenses report ── */
    .er-filter-bar { flex-direction: column !important; gap: 8px !important; }
    .er-summary-boxes { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

    /* ── Member dashboard specific ── */
    .member-profile-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ── View Entries ── */
    .ve-filter-bar { flex-direction: column !important; gap: 8px !important; }

    /* ── User dashboard ── */
    .ud-stats-row { flex-direction: column !important; gap: 8px !important; }

    /* ── Admin gallery upload section ── */
    .gallery-upload-zone { padding: 16px !important; }

    /* ── Contact Us admin page ── */
    .cu-filter-bar { flex-direction: column !important; gap: 8px !important; }

    /* ── Board Members grid ── */
    .bm-card { padding: 12px 10px !important; }

    /* ── Financial Year ── */
    .fy-list-table-wrapper { overflow-x: auto !important; }

    /* ── Prevent any stray fixed widths from overflowing ── */
    [style*="width: 700px"],
    [style*="width: 600px"],
    [style*="width: 500px"],
    [style*="min-width: 700px"],
    [style*="min-width: 600px"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   ≤ 768px MOBILE RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 768px) {

    :root { --header-height: 64px; }

    /* ── Header ── */
    .header-container { padding: 0 10px !important; }
    .logo-area {
        display: flex !important; align-items: center !important;
        gap: 8px !important; text-decoration: none !important;
    }
    .logo-icon {
        height: 42px !important; width: 42px !important;
        min-width: 42px !important; min-height: 42px !important;
        max-width: 42px !important; max-height: 42px !important;
        background-color: #ffffff !important;
        border-radius: 50% !important; padding: 2px !important;
        display: flex !important; align-items: center !important;
        justify-content: center !important; flex-shrink: 0 !important;
        overflow: hidden !important; border: 1.5px solid #c5a059 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    }
    .logo-icon img, .heritage-crest {
        max-height: 100% !important; max-width: 100% !important;
        object-fit: contain !important; display: block !important;
    }
    .logo-text { display: flex !important; flex-direction: column !important; justify-content: center !important; }
    .logo-text h1 {
        font-size: 1.05rem !important; margin: 0 !important;
        line-height: 1.1 !important; color: #ffffff !important;
    }
    .logo-text span { font-size: 0.6rem !important; letter-spacing: 0.1em !important; display: block !important; }

    /* ── Dashboard main content ── */
    .dashboard-main-content { padding: 8px 6px !important; }

    /* ── Panels ── */
    .fy-master-container, #fy-panel-form, #fy-page-container,
    .db-panel, .mm-card, .glass-border {
        padding: 10px 8px !important;
    }
    .panel-body, .mm-card-body { padding: 8px 4px !important; }

    /* ── Panel header buttons → full width ── */
    .panel-header a, .panel-header button {
        width: 100% !important; text-align: center !important; justify-content: center !important;
    }

    /* ── Buttons → full width in panel context ── */
    .fy-btn-row .btn, .mm-toolbar-buttons .btn,
    .panel-header .btn, .modal-footer .btn {
        width: 100% !important; max-width: 100% !important;
        padding: 10px 14px !important; font-size: 0.88rem !important;
        justify-content: center !important; text-align: center !important;
    }

    /* ── Active FY badge ── */
    .active-fy-badge {
        align-self: flex-start !important; font-size: 0.62rem !important;
        padding: 2px 8px !important; white-space: nowrap !important;
    }

    /* ── Stat cards extra compact ── */
    .db-stat-card { padding: 8px 10px !important; gap: 10px !important; border-radius: 8px !important; }
    .stat-card-icon { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; font-size: 0.88rem !important; }
    .stat-card-info span { font-size: 0.7rem !important; }
    .stat-card-info h3 { font-size: 1.05rem !important; }

    /* ── Gallery: 1 column on small mobile ── */
    .gallery-grid, .admin-gallery-grid { grid-template-columns: 1fr !important; }

    /* ── Board Members: 1 column ── */
    .bm-grid { grid-template-columns: 1fr !important; }

    /* ── Expenses report summary: 1 column ── */
    .er-summary-boxes { grid-template-columns: 1fr !important; }

    /* ── Sub-hero ── */
    .sub-hero { padding: 30px 0 20px !important; }
    .sub-hero h2 { font-size: 1.35rem !important; }

    /* ── Home hero ── */
    .hp-hero-content h2 { font-size: 1.5rem !important; }
    .hp-hero-btns .btn { width: 100% !important; max-width: 260px !important; }

    /* ── MemberMaster form photo ── */
    .mm-photo-upload-section {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* ── Receipt Voucher / PettyCash summary bars ── */
    .rv-summary-bar, .pc-summary-bar {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    /* ── ZoneMaster form ── */
    .zm-form-row { flex-direction: column !important; gap: 8px !important; }

    /* ── User Management form ── */
    .um-form-row { flex-direction: column !important; gap: 8px !important; }

    /* ── Contact page map embed ── */
    .contact-map-embed iframe { height: 200px !important; }

    /* ── Login card ── */
    .login-card, .login-unified-card { padding: 20px 14px !important; border-radius: 14px !important; }

    /* ── Member login ── */
    .member-login-container { padding: 24px 12px !important; }

    /* ── Genealogy tree toolbar ── */
    .genealogy-info-badge { font-size: 0.78rem !important; padding: 4px 8px !important; }
    .btn-tree-control { padding: 6px 10px !important; font-size: 0.82rem !important; }

    /* ── MemberMaster sub grids ── */
    .mm-sub-grid { grid-template-columns: 1fr !important; }

    /* ── ID details grid ── */
    .id-details-grid { grid-template-columns: 1fr !important; }

    /* ── Contact Us admin table ── */
    .cu-table-wrapper table th,
    .cu-table-wrapper table td { font-size: 0.78rem !important; padding: 6px 6px !important; }

    /* ── View Entries table ── */
    .ve-table-wrapper table th,
    .ve-table-wrapper table td { font-size: 0.78rem !important; padding: 5px 5px !important; }
}

/* ============================================================
   ≤ 576px SMALL MOBILE
   ============================================================ */
@media (max-width: 576px) {

    :root { --header-height: 60px; }

    .header-container { padding: 0 8px !important; }
    .logo-icon { height: 38px !important; width: 38px !important; }
    .logo-text h1 { font-size: 0.95rem !important; }
    .logo-text span { font-size: 0.55rem !important; }

    .dashboard-main-content { padding: 8px 4px !important; }
    .db-panel, .mm-card, .glass-border { padding: 10px 6px !important; }

    /* Uniform headings at <= 576px */
    .dashboard-header-bar h1,
    .dashboard-header-bar h2,
    .dashboard-main-content h1,
    .dashboard-main-content h2,
    .section-title,
    h2.section-title,
    .db-header-title h2,
    .page-title {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }

    .panel-header h2,
    .panel-header h3,
    .panel-header h4,
    .db-panel h3,
    .db-panel h2,
    .db-panel h4,
    .mm-card-header h3,
    #pc-form-title,
    #rv-form-header-title,
    #fy-form-header-title,
    #zm-form-header-title {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
    }

    /* ── Buttons → stacked in any flex container ── */
    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .d-flex.gap-2 .btn,
    .d-flex.gap-3 .btn {
        flex: 1 1 auto !important;
        min-width: 120px !important;
    }

    /* ── About page stats ── */
    .about-stats-row { grid-template-columns: 1fr 1fr !important; }

    /* ── Receipt Voucher items table ── */
    .rv-items-table th, .rv-items-table td { font-size: 0.75rem !important; padding: 5px 4px !important; }

    /* ── PettyCash items table ── */
    .pc-items-table th, .pc-items-table td { font-size: 0.75rem !important; padding: 5px 4px !important; }

    /* ── Receipt Report ── */
    .rr-result-table th, .rr-result-table td { font-size: 0.75rem !important; padding: 5px 4px !important; }

    /* ── Member list ── */
    .ml-table th, .ml-table td { font-size: 0.75rem !important; padding: 5px 4px !important; }

    /* ── Member master photo ── */
    .mm-photo-preview { width: 90px !important; height: 90px !important; }

    /* ── Home hero very small ── */
    .hp-hero-content h2 { font-size: 1.25rem !important; }
    .hp-hero-tag { font-size: 0.72rem !important; }

    /* ── Sub-hero ── */
    .sub-hero h2 { font-size: 1.2rem !important; }
    .sub-hero p { font-size: 0.82rem !important; }

    /* ── Genealogy search card ── */
    .genealogy-search-header { font-size: 0.95rem !important; padding: 10px 12px !important; }

    /* ── Action button cells ── */
    td .btn, td button { margin: 2px !important; padding: 5px 8px !important; font-size: 0.75rem !important; }

    /* ── Contact info items ── */
    .footer-contact-info p { font-size: 0.82rem !important; }

    /* ── Footer ── */
    .footer-logo h2 { font-size: 1.2rem !important; }
    .footer-links li a { font-size: 0.85rem !important; }
}

/* ============================================================
   ≤ 480px SMALL PHONES
   ============================================================ */
@media (max-width: 480px) {

    :root { --header-height: 58px; }

    .header-container { padding: 0 8px !important; }
    .logo-icon { height: 36px !important; width: 36px !important; }
    .logo-text h1 { font-size: 0.9rem !important; }
    .logo-text span { font-size: 0.52rem !important; }

    .dashboard-main-content { padding: 6px 4px !important; }
    .db-panel, .mm-card { padding: 8px 4px !important; }
    .glass-border { padding: 8px 4px !important; }

    .db-stat-card { padding: 7px 10px !important; gap: 8px !important; border-radius: 8px !important; }
    .stat-card-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: 0.82rem !important; }
    .stat-card-info span { font-size: 0.68rem !important; }
    .stat-card-info h3 { font-size: 1rem !important; }

    .dashboard-header-bar h2 { font-size: 1.2rem !important; }
    .active-fy-badge { font-size: 0.58rem !important; padding: 2px 6px !important; }

    /* ── About stats: 1 column on tiny screens ── */
    .about-stats-row { grid-template-columns: 1fr !important; }

    /* ── Gallery: single column ── */
    .gallery-grid, .admin-gallery-grid { grid-template-columns: 1fr !important; gap: 8px !important; }

    /* ── Home pillar cards ── */
    .hp-pillars-grid, .hp-section-grid, .hp-events-grid { gap: 10px !important; }

    /* ── Genealogy Tree Mobile Optimizations (Scrollable Tree & Intact Connectors) ── */
    .head-details-overlay-left {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 auto 14px auto !important;
        width: 100% !important;
        max-width: 320px !important;
        z-index: 1 !important;
    }
    .head-details-card-side {
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .unified-genealogy-tree-wrapper {
        min-width: max-content !important;
        width: max-content !important;
        max-width: none !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 auto !important;
    }
    .genealogy-page-toolbar {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        padding: 10px !important;
    }
    .genealogy-toolbar-left,
    .genealogy-toolbar-right {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        display: flex !important;
    }
    .genealogy-info-badge {
        font-size: 0.78rem !important;
        padding: 6px 12px !important;
        display: inline-block !important;
    }
    .tree-scroll-wrapper,
    #genealogy-page-scroll-wrapper {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 75vh !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
        position: relative !important;
        cursor: grab !important;
        touch-action: pan-x pan-y !important;
    }
    .tree-canvas,
    #genealogy-tree-canvas {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        display: block !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
    .minimal-tree-card {
        width: 120px !important;
        min-width: 120px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
    }
    .minimal-tree-card > div:first-child {
        height: 95px !important;
    }
    .minimal-tree-card > div:last-child {
        padding: 6px 4px !important;
    }
    .minimal-tree-card > div:last-child > div:first-child {
        font-size: 0.82rem !important;
    }
    .minimal-tree-card > div:last-child > div:nth-child(2) {
        font-size: 0.65rem !important;
    }
    .minimal-tree-card > div:last-child > div:nth-child(3) {
        font-size: 0.58rem !important;
    }
    div[style*="justify-content:center;gap:35px"] {
        gap: 16px !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
    }
    div[style*="width:60px;height:2px"] {
        width: 24px !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================================
   ≤ 360px VERY SMALL PHONES (e.g., 344px width)
   ============================================================ */
@media (max-width: 360px) {

    :root { --header-height: 56px; }

    .header-container { padding: 0 6px !important; }
    .logo-area { gap: 5px !important; }
    .logo-icon { height: 32px !important; width: 32px !important; min-width: 32px !important; }
    .logo-text h1 { font-size: 0.82rem !important; }
    .logo-text span { font-size: 0.48rem !important; }

    .dashboard-main-content { padding: 6px 3px !important; }
    .db-panel, .mm-card { padding: 7px 3px !important; }

    .dashboard-header-bar h2 { font-size: 1.15rem !important; }
    .active-fy-badge { font-size: 0.52rem !important; padding: 2px 5px !important; letter-spacing: 0 !important; }

    .db-stats-grid { gap: 6px !important; margin-bottom: 8px !important; }
    .db-stat-card { padding: 6px 8px !important; gap: 7px !important; border-radius: 7px !important; }
    .stat-card-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: 0.75rem !important; }
    .stat-card-info span { font-size: 0.65rem !important; }
    .stat-card-info h3 { font-size: 0.92rem !important; }

    .form-group input, .form-group select, .form-group textarea,
    .mm-input, .mm-select, .mm-textarea, .form-control {
        font-size: 0.8rem !important; padding: 7px 8px !important;
    }

    .btn, .btn-gold, .btn-outline { font-size: 0.82rem !important; padding: 8px 10px !important; }

    .hp-hero-content h2 { font-size: 1.1rem !important; }
    .sub-hero h2 { font-size: 1.05rem !important; }
    .sub-hero p { font-size: 0.78rem !important; }

    .modal-body { padding: 12px 10px !important; }
    .modal-dialog { max-width: 96vw !important; width: 96vw !important; margin: 6px auto !important; }

    /* ── Tree zoom controls very compact ── */
    .btn-tree-control { padding: 4px 7px !important; font-size: 0.78rem !important; }

    /* ── Table cells very compact ── */
    .db-table tbody tr td { font-size: 0.78rem !important; padding: 4px 0 !important; }

    /* ── Nav menu links ── */
    .nav-menu ul { padding: 24px 12px !important; gap: 18px !important; }
    .nav-link { font-size: 1rem !important; }
}

/* ============================================================
   PRINT: hide decorative items, keep content clean
   ============================================================ */
@media print {
    .main-header, .main-footer, .dashboard-sidebar,
    .mobile-nav-toggle, .sidebar-mobile-toggle,
    .btn, .panel-header button, .panel-header a {
        display: none !important;
    }
    body { background: #fff !important; color: #000 !important; }
    .dashboard-main-content { padding: 0 !important; }
}