/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet Landscape (≤ 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .header { padding: 0 24px; }
    .tab-nav { padding: 0 24px; }
    .page { padding: 20px 24px; }
}

/* ── Tablet Portrait (≤ 768px) ───────────────────────────────────────── */
@media (max-width: 768px) {
    /* Layout */
    .header { padding: 0 16px; }
    .tab-nav { padding: 0 16px; }
    .page { padding: 16px; }
    .orgs-layout { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .analysis-category-items { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; align-items: stretch; }
    .admin-create-form { max-width: none; }
    .header-user-dropdown { display: none; }
    .login-card { padding: 24px; }

    /* Tables */
    .table-responsive {
        border-radius: var(--radius-sm);
    }
    .table-responsive::before {
        content: "Swipe to view more";
        display: block;
        padding: 8px 12px 0;
        font-size: 10.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gray-400);
    }
    .table-stack::before {
        content: none;
    }
    .table-stack .data-table thead { display: none; }
    .table-stack .data-table tbody tr {
        display: flex;
        flex-direction: column;
        padding: 12px 16px;
        border-bottom: 1px solid var(--gray-200);
        gap: 6px;
    }
    .table-stack .data-table tbody tr:last-child { border-bottom: none; }
    .table-stack .data-table tbody td {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 0;
        border-bottom: none;
        font-size: 13px;
    }
    .table-stack .data-table tbody td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        min-width: 80px;
        font-size: 10.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gray-400);
    }
    /* Action cells: full width, wrap buttons */
    .table-stack .data-table tbody td.actions-cell,
    .table-stack .data-table tbody td:not([data-label]) {
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 4px;
    }
    .table-stack .data-table .actions-row {
        width: 100%;
        justify-content: flex-start;
    }
    .table-stack .data-table tbody tr:hover td { background: none; }
    .scrollable-table { overflow-x: auto; max-height: none; }
    .table-stack.scrollable-table,
    .table-stack .scrollable-table {
        overflow-x: visible;
    }
    .scrollable-table .data-table thead th { position: static; }

    /* Touch targets */
    .btn { min-height: 40px; }
    .btn-sm { min-height: 36px; }
    .checkbox-label input[type="checkbox"] { width: 20px; height: 20px; }
    .toggle-switch .toggle-track { width: 40px; height: 22px; }
    .toggle-switch .toggle-track::after { width: 18px; height: 18px; }
    .toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); }
    .org-card { padding: 16px; }
    .tab-dropdown-item { min-height: 44px; padding: 12px 18px; }

    /* Mobile nav — hidden by default, shown via JS */
    .mobile-menu-btn { display: flex; }
    .tab-nav {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--navy);
        z-index: 198;
        padding: 8px 0;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }
    .dev-banner ~ .tab-nav {
        top: 89px;
        max-height: calc(100vh - 89px);
    }
    .tab-nav.mobile-open { display: flex; }
    .tab-btn {
        width: 100%;
        text-align: left;
        padding: 12px 20px;
        min-height: 44px;
        border-bottom: none;
    }
    .tab-btn.active { border-bottom: none; background: rgba(0, 164, 225, 0.15); }
    .tab-dropdown { width: 100%; }
    .tab-dropdown-toggle { width: 100%; justify-content: space-between; }
    .tab-dropdown-menu {
        position: relative;
        top: auto;
        left: auto;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(0, 0, 0, 0.15);
    }
    .tab-dropdown.open .tab-dropdown-menu { display: flex; flex-direction: column; }
    .tab-dropdown-item { padding-left: 36px; }

    /* Section builder */
    .sb-section-header { flex-wrap: wrap; }
    .sb-section-style-wrap { width: 100%; }
    .sb-columns-row { flex-direction: column; }
    .sb-object-header { flex-wrap: wrap; gap: 10px; }
}

/* ── Mobile (≤ 480px) ────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .page { padding: 12px; }
    .section-header { flex-wrap: wrap; }
    .section-actions { flex-wrap: wrap; gap: 6px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .storage-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .header-title { display: none; }
    .header-title span { display: none; }
    .header-right {
        flex: 1;
        min-width: 0;
        justify-content: flex-end;
        gap: 8px;
    }
    .header-clock { display: none; }
    .header-org {
        flex: 1;
        min-width: 0;
        max-width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .login-card { padding: 16px; }
    .btn-lg { width: 100%; justify-content: center; }
    .modal { max-width: calc(100vw - 32px); margin: 16px; }
    .version-badge { display: none; }
    .section-body { padding: 14px; }
    .stat-value { font-size: 22px; }
    .org-banner { flex-direction: column; align-items: flex-start; }
    .download-section { flex-direction: column; align-items: flex-start; }
    .progress-actions { flex-wrap: wrap; }
}

@media (max-width: 1024px) {
    .orgs-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .mobile-nav-scrim {
        position: fixed;
        inset: 64px 0 0;
        background: rgba(6, 19, 52, 0.42);
        backdrop-filter: blur(2px);
        z-index: 197;
    }

    .mobile-nav-scrim.visible { display: block; }

    .tab-nav {
        top: 78px;
        left: 12px;
        right: 12px;
        background: linear-gradient(180deg, rgba(0, 26, 107, 0.98), rgba(0, 36, 137, 0.98));
        padding: 8px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
        max-height: calc(100vh - 92px);
    }

    .dev-banner ~ .tab-nav {
        top: 102px;
        max-height: calc(100vh - 116px);
    }

    .tab-btn {
        padding: 12px 16px;
        border-radius: 12px;
    }

    .tab-dropdown-menu {
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        margin: 4px 8px 8px;
    }

    .tab-dropdown-item { padding-left: 18px; }

    .mobile-account-actions {
        display: block;
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .mobile-account-actions form {
        margin: 0;
    }
}

@media (max-width: 480px) {
    .org-control-bar { flex-wrap: wrap; }
    .org-control-bar .btn { width: 100%; justify-content: center; }
}