/**
 * Mobile Responsive Design System
 * Comprehensive mobile adaptations for all dashboards
 *
 * Breakpoint Strategy:
 * - Desktop: > 1200px - Full 2-column layout
 * - Tablet:  768px-1200px - Stacked with side-by-side charts
 * - Mobile:  < 768px - Single column, bottom sheets, touch-optimized
 */

/* ============================================================================
   CSS VARIABLES - MOBILE SPECIFIC
   ============================================================================ */

:root {
    /* Touch target sizes (WCAG 2.1 AA: minimum 44x44px) */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;

    /* Mobile spacing */
    --mobile-spacing-xs: 0.5rem;
    --mobile-spacing-sm: 0.75rem;
    --mobile-spacing-md: 1rem;
    --mobile-spacing-lg: 1.5rem;

    /* Extra bottom padding so content scrolls clear of the mobile browser's
       bottom navigation bar (back/forward/tabs).  env(safe-area-inset-bottom)
       only covers the home-indicator on notched devices — the browser toolbar
       sits on top of the viewport and is NOT covered by safe-area-inset.
       4rem (~64px) clears Chrome Android (56px) and Safari iOS (44px). */
    --mobile-browser-chrome-bottom: 4rem;

    /* Mobile font sizes */
    --mobile-font-xs: 0.75rem;
    --mobile-font-sm: 0.875rem;
    --mobile-font-base: 1rem;
    --mobile-font-lg: 1.125rem;
    --mobile-font-xl: 1.5rem;

    /* Bottom sheet specific */
    --bottom-sheet-max-height: 85vh;
    --bottom-sheet-radius: 16px 16px 0 0;
    --bottom-sheet-handle-width: 40px;
    --bottom-sheet-handle-height: 4px;
}

/* ============================================================================
   TABLET BREAKPOINT (768px - 1200px)
   Stacked layout with side-by-side elements where appropriate
   ============================================================================ */

@media (max-width: 1200px) {
    /* Container adjustments */
    .dashboard-container,
    .page-shell,
    .hub-container,
    .main-container {
        padding: var(--content-padding-md, 1.5rem);
        max-width: 100%;
    }

    /* Header adjustments */
    .page-header,
    .dashboard-header,
    .hub-header {
        padding: 1.75rem 1.5rem;
    }

    .page-header h1,
    .dashboard-header h1 {
        font-size: 1.75rem;
    }

    .page-header .subtitle,
    .dashboard-header .subtitle {
        font-size: 1rem;
    }

    /* Chart grid - 2 columns on tablet */
    .overview-charts,
    .chart-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Domain cards - 2-3 columns on tablet */
    .domain-cards {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.25rem;
    }

    /* Rankings grid - 2 columns on tablet */
    .rankings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    /* Tables - reduce padding */
    .data-table th,
    .data-table td,
    .rankings-table th,
    .rankings-table td {
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
    }
}

/* ============================================================================
   TABLET MODAL SIZING (769px - 1200px)
   Prevent large modals from overflowing tablet viewports
   ============================================================================ */

@media (min-width: 769px) and (max-width: 1200px) {
    .modal-content.modal-xl,
    .modal-content.modal-lg {
        max-width: min(90vw, 640px);
        width: 90%;
    }
}

/* ============================================================================
   MOBILE BREAKPOINT (< 768px)
   Single column, touch-optimized, bottom sheets
   ============================================================================ */

@media (max-width: 768px) {

    /* ========================================
       GLOBAL MOBILE ADJUSTMENTS
       ======================================== */

    /* Remove sidebar offset on mobile */
    body {
        margin-left: 0 !important;
    }

    /* Fix: Constrain main content area to visible viewport height on mobile.
       Mobile browsers reserve space for their address bar / toolbar, making
       100vh taller than the visible area.  The three height declarations
       cascade for progressive enhancement:
         1. 100vh            – baseline fallback
         2. calc(--vh * 100) – JS-driven fix from mobile-utils.js (iOS Safari)
         3. 100dvh           – native dynamic-viewport-height unit              */
    .app-main {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        height: 100dvh;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Let the content wrapper fill .app-main so child pages using
       height:100% (e.g. messages, full-screen views) resolve correctly.
       Pages with content taller than the viewport still scroll because
       overflow escapes this element into .app-main's overflow-y:auto. */
    .app-content {
        height: 100%;
    }

    /* Container padding - reduced for mobile */
    .dashboard-container,
    .page-shell,
    .hub-container,
    .main-container,
    .overview-container,
    .manage-container,
    .settings-container {
        padding: var(--mobile-spacing-md) !important;
        padding-left: var(--mobile-spacing-md) !important;
    }

    /* Mobile browser bottom-bar spacer.
       On long pages .app-content's children overflow its explicit height
       and .app-main scrolls to expose them.  This ::after sits at the very
       end of the content flow, adding invisible space so the last real
       content scrolls clear of the mobile browser's bottom navigation bar
       (back / forward / tabs overlay that sits ON TOP of the viewport).
       On short pages the spacer stays inside the 100% height — no extra
       scroll is introduced. */
    .app-content::after {
        content: '';
        display: block;
        height: calc(var(--mobile-browser-chrome-bottom) + env(safe-area-inset-bottom, 0px));
    }

    /* ========================================
       PAGE CONTAINERS — 100vh → auto / 100dvh
       Many page containers set min-height:100vh or height:100vh which
       extends past the visible area on mobile (100vh includes the space
       behind the browser's bottom nav bar).  Override to auto so pages
       size by content and .app-main handles viewport constraining,
       or use the 100dvh cascade for fixed-height layouts.
       ======================================== */

    /* Pages that set min-height: 100vh — remove it so they size by content.
       The ::after spacer ensures scrollable pages clear the browser chrome. */
    .assessment,
    .dashboard-container,
    .posture-dashboard,
    .remediation-planner-container,
    .guest-report-viewer,
    .mfa-challenge-wrapper,
    .persona-view {
        min-height: auto !important;
    }

    /* Pages/panels that set height: 100vh — use the dvh cascade */
    .explorer-container,
    .assessment__sidebar {
        height: 100vh !important;
        height: calc(var(--vh, 1vh) * 100) !important;
        height: 100dvh !important;
    }

    /* ========================================
       FIXED-BOTTOM ELEMENTS — browser chrome clearance
       Elements pinned to the bottom of viewport-height containers
       are covered by the mobile browser's nav bar.  The ::after spacer
       only helps scrollable pages; these need explicit bottom padding
       so their content sits above the browser's overlay toolbar.
       ======================================== */

    .messages-input-bar {
        padding-bottom: calc(12px + var(--mobile-browser-chrome-bottom, 4rem) + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ========================================
       HEADERS - MOBILE OPTIMIZED
       ======================================== */

    .page-header,
    .dashboard-header,
    .hub-header,
    .overview-header,
    .manage-header,
    .settings-header {
        padding: 1.5rem 1rem;
        border-radius: var(--border-radius);
        margin-bottom: 1.5rem;
    }

    /* Stack header content vertically */
    .page-header .header-content,
    .dashboard-header .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Reduce header icon size */
    .page-header .header-content::before,
    .dashboard-header .header-content::before {
        width: 60px;
        height: 60px;
        background-size: 30px;
    }

    /* Reduce header text sizes */
    .page-header h1,
    .dashboard-header h1,
    .hub-header h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .page-header .subtitle,
    .dashboard-header .subtitle {
        font-size: 0.9rem;
    }

    /* Header navigation - horizontal scroll */
    .header-navigation {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        margin: 1rem 0 0 0;
    }

    .header-navigation::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* Nav tabs - prevent wrapping, enable scroll */
    .nav-tab {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    /* Header stats - horizontal scroll */
    .header-stats {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }

    .header-stats::-webkit-scrollbar {
        height: 3px;
    }

    .header-stats::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
    }

    .stat-card {
        flex-shrink: 0;
        min-width: 100px;
    }

    /* ========================================
       SECTION HEADERS
       ======================================== */

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1.25rem;
        gap: 0.75rem;
    }

    .section-header h2 {
        font-size: 1.25rem;
    }

    .section-header h3 {
        font-size: 1.125rem;
    }

    .section-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    /* ========================================
       SCORE GAUGE - MOBILE CENTERED
       ======================================== */

    .score-gauge-container,
    .gauge-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.5rem 1rem;
        margin-bottom: 1.5rem;
    }

    .score-gauge,
    .gauge-canvas {
        max-width: 280px;
        height: auto;
    }

    .gauge-center-text {
        font-size: 2.5rem;
    }

    .gauge-label {
        font-size: 0.875rem;
    }

    /* ========================================
       CHARTS - FULL WIDTH, STACKED
       ======================================== */

    .overview-charts,
    .chart-grid,
    .analytics-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .chart-container {
        padding: 1.25rem 1rem;
    }

    .chart-container h3 {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .chart-container canvas {
        max-height: 250px;
        touch-action: pan-y; /* Allow vertical scrolling */
    }

    /* Chart legends - horizontal scroll on mobile */
    .chart-legend {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .chart-legend::-webkit-scrollbar {
        display: none;
    }

    /* ========================================
       CARDS - SINGLE COLUMN
       ======================================== */

    .card-grid,
    .selector-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card {
        padding: 1.25rem;
    }

    /* Domain cards - single column */
    .domain-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .domain-card {
        padding: 1.25rem;
    }

    /* Company/Rankings cards - single column */
    .rankings-grid,
    .companies-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .linked-account-card {
        padding: 1.25rem;
    }

    /* ========================================
       PRIORITY ACTIONS - SWIPEABLE CARDS
       ======================================== */

    .priority-actions-container {
        position: relative;
        margin: 0 calc(-1 * var(--mobile-spacing-md));
        padding: 0 var(--mobile-spacing-md);
    }

    .priority-actions-list,
    .action-cards {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        padding-bottom: 0.5rem;
    }

    .priority-actions-list::-webkit-scrollbar,
    .action-cards::-webkit-scrollbar {
        display: none;
    }

    .priority-action-card,
    .action-card {
        flex: 0 0 85%;
        max-width: 320px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Scroll indicator */
    .priority-actions-container::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 1rem;
        width: 40px;
        background: linear-gradient(to left, var(--bg-primary), transparent);
        pointer-events: none;
    }

    /* ========================================
       TABLES - MOBILE OPTIMIZED
       ======================================== */

    /* Horizontal scroll for tables */
    .table-container,
    .rankings-table-container,
    .drill-down-table-wrapper,
    .risks-table-container,
    .attestations-table-container,
    .chains-table-container,
    .csv-preview-table-wrapper,
    .evidence-gap-table-container,
    .history-table-container,
    .scenario-risk-table-container,
    .shares-table-container,
    .vm-table-container,
    .em-table-wrap,
    .initiatives-table-container,
    .linked-account-target-table-container,
    .preview-table-container,
    .qi-table-wrap,
    .sample-items-table-wrapper,
    .licenses-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--mobile-spacing-md));
        padding: 0 var(--mobile-spacing-md);
    }

    .data-table,
    .rankings-table,
    .drill-down-table,
    .risks-table,
    .reports-table {
        font-size: 0.85rem;
        min-width: 0; /* Let tables fit mobile viewport; overflow-x on container handles scroll */
    }

    .data-table th,
    .data-table td,
    .rankings-table th,
    .rankings-table td,
    .drill-down-table th,
    .drill-down-table td,
    .risks-table th,
    .risks-table td,
    .reports-table th,
    .reports-table td {
        padding: 0.75rem 0.5rem;
    }

    /* Sticky first column on mobile (optional enhancement) */
    .data-table thead th:first-child,
    .data-table tbody td:first-child {
        position: sticky;
        left: 0;
        background: var(--bg-secondary);
        z-index: 1;
    }

    /* Hide less important columns on mobile */
    .data-table .hide-mobile,
    .rankings-table .hide-mobile {
        display: none;
    }

    /* ========================================
       BUTTONS - TOUCH OPTIMIZED
       ======================================== */

    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-ghost {
        min-height: var(--touch-target-min);
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }

    /* Button groups - stack vertically */
    .button-group,
    .header-actions,
    .modal-footer,
    .drill-down-actions {
        flex-direction: column;
        width: 100%;
    }

    .button-group .btn,
    .header-actions .btn,
    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    /* Icon buttons - ensure touch target */
    .icon-btn,
    .btn-icon-only {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        padding: 0.625rem;
    }

    /* ========================================
       FILTERS & CONTROLS
       ======================================== */

    .filters {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .filter-select,
    .form-select {
        width: 100%;
        min-height: var(--touch-target-min);
        font-size: 0.9rem;
    }

    .view-toggle {
        width: 100%;
        justify-content: stretch;
    }

    .toggle-btn {
        flex: 1;
        min-height: var(--touch-target-min);
    }

    /* ========================================
       FORMS - MOBILE FRIENDLY
       ======================================== */

    .form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-input,
    .form-select,
    .form-textarea {
        min-height: var(--touch-target-min);
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 0.75rem 1rem;
    }

    .form-label {
        font-size: 0.9rem;
    }

    /* ========================================
       MODALS - FULL SCREEN ON MOBILE
       ======================================== */

    .modal {
        padding: 0;
        align-items: stretch; /* Full screen style */
        justify-content: stretch;
    }

    .modal-content,
    .drill-down-modal__content {
        width: 100vw !important;
        max-width: 100vw;
        /* Progressive enhancement for mobile viewport height —
           same cascade as .app-main: 100vh → JS var → 100dvh.
           100vh over-reports on iOS Safari (includes area behind
           the address bar); 100dvh tracks the visible viewport. */
        height: 100vh !important;
        height: calc(var(--vh, 1vh) * 100) !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: calc(var(--vh, 1vh) * 100) !important;
        max-height: 100dvh !important;
        border-radius: 0;
        margin: 0;
    }

    /* Modal header */
    .modal-header,
    .drill-down-modal__header {
        padding: 1rem 1.25rem;
        flex-shrink: 0;
    }

    .modal-title,
    .drill-down-modal__title {
        font-size: 1.125rem;
    }

    /* Modal body - ensure scrolling works */
    .modal-body,
    .drill-down-modal__body {
        padding: 1.25rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modal footer — extra bottom padding to clear mobile browser bottom
       nav bar (back/forward/tabs overlay sits ON TOP of the viewport). */
    .modal-footer,
    .drill-down-modal__footer {
        padding: 1rem 1.25rem;
        padding-bottom: calc(1rem + var(--mobile-browser-chrome-bottom, 4rem) + env(safe-area-inset-bottom, 0px));
        flex-shrink: 0;
    }

    /* Modal close button - larger touch target */
    .modal-close,
    .drill-down-modal__close {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        padding: 0.625rem;
    }

    /* ========================================
       CUSTOM POPUP COMPONENTS — MOBILE OVERRIDE
       Components that inject inline styles (position: fixed,
       width: 420px, etc.) need explicit mobile overrides.
       ======================================== */

    /* Data Scope Modal (.dsm-content) */
    .dsm-content {
        width: 92vw !important;
        max-width: 100vw !important;
        max-height: 85vh !important;
        max-height: 85dvh !important;
    }

    /* Create View Modal (.mvm-modal) */
    .mvm-modal {
        width: 92vw !important;
        max-width: 100vw !important;
        max-height: 90vh !important;
        max-height: 90dvh !important;
    }

    /* Notification Popup */
    .notification-popup {
        width: 95vw !important;
        max-width: 100vw !important;
        max-height: 90vh;
        max-height: 90dvh;
        overflow-y: auto;
    }

    /* Remediation Treatment Linker */
    .linker-modal {
        width: 95vw !important;
        max-width: 100vw !important;
        max-height: 90vh !important;
        max-height: 90dvh !important;
        overflow-y: auto;
    }

    /* Vendor SLA modals — inner .modal-content has inline width:600px */
    .sla-modal-overlay > .modal-content,
    .record-metric-modal-overlay > .modal-content {
        width: 95vw !important;
        max-width: 100vw !important;
        max-height: 90vh !important;
        max-height: 90dvh !important;
        overflow-y: auto;
    }

    /* Custom modals that use their own class names (not .modal-content)
       need explicit dvh overrides to avoid being clipped by mobile browser
       bottom nav bar. Same progressive cascade as .modal-content above. */
    .assignment-modal,
    .deletion-modal,
    .recovery-modal,
    .onboarding-card,
    .test-procedures-container .modal-container,
    .wcm-container,
    .v3-modal-container,
    .page--settings-sla .sla-modal {
        max-height: 100vh !important;
        max-height: calc(var(--vh, 1vh) * 100) !important;
        max-height: 100dvh !important;
    }

    /* Custom modal footers — extra bottom padding to clear mobile browser
       bottom nav bar (back/forward/tabs overlay sits ON TOP of viewport).
       Standard .modal-footer is handled in the iOS safe-area @supports block. */
    .assignment-modal-footer,
    .deletion-modal-footer,
    .recovery-modal-footer,
    .onboarding-footer,
    .test-procedures-container .modal-footer,
    .wcm-footer,
    .v3-modal-footer,
    .page--settings-sla .sla-modal-footer {
        padding-bottom: calc(1rem + var(--mobile-browser-chrome-bottom, 4rem) + env(safe-area-inset-bottom, 0px));
    }

    /* All popup close buttons — minimum touch target */
    .notification-popup-close,
    .dsm-close,
    .mvm-close-btn,
    .close-modal-btn {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }

    /* ========================================
       BOTTOM SHEETS (Drill-Down Panels)
       ======================================== */

    .drill-down-panel__content {
        width: 100%;
        max-width: 100%;
        top: auto;
        bottom: 0;
        height: auto;
        max-height: var(--bottom-sheet-max-height);
        border-radius: var(--bottom-sheet-radius);
        animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    /* Drag handle for bottom sheet */
    .drill-down-panel__content::before {
        content: '';
        display: block;
        width: var(--bottom-sheet-handle-width);
        height: var(--bottom-sheet-handle-height);
        background: var(--text-muted);
        border-radius: 2px;
        margin: 0.75rem auto 0;
        flex-shrink: 0;
    }

    .drill-down-panel__header {
        padding-top: 0.5rem;
    }

    /* ========================================
       TABS - HORIZONTAL SCROLL
       ======================================== */

    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        margin: 0 calc(-1 * var(--mobile-spacing-md));
        padding: 0 var(--mobile-spacing-md);
    }

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

    .tab {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    /* ========================================
       DISTRIBUTION BARS & PROGRESS
       ======================================== */

    .distribution-bar,
    .domain-progress,
    .progress-bar {
        min-height: 32px; /* Larger for touch */
    }

    .distribution-legend {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* ========================================
       DRILL-DOWN CONTENT
       ======================================== */

    .linked-account-detail-grid,
    .domain-performance-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .drill-down-breadcrumb {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
    }

    .drill-down-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    /* ========================================
       RESPONSE RATE SECTION
       ======================================== */

    .response-rate-content {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        text-align: center;
    }

    .rate-circle {
        margin: 0 auto;
    }

    .rate-stats {
        flex-direction: column;
        gap: 0.75rem;
    }

    .rate-stat-item {
        padding: 1rem;
    }

    /* ========================================
       QUESTION CARDS
       ======================================== */

    .question-card {
        padding: 1.25rem;
    }

    .question-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .question-stats {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* ========================================
       BADGES & PILLS
       ======================================== */

    .pill,
    .risk-badge,
    .score-badge {
        font-size: 0.8rem;
        padding: 0.375rem 0.625rem;
    }

    .status-badge {
        font-size: 0.7rem;
    }

    /* ========================================
       UTILITY ADJUSTMENTS
       ======================================== */

    /* Hide on mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Show only on mobile */
    .show-mobile {
        display: block !important;
    }

    /* Reduce spacing on mobile */
    .dashboard-main,
    .page-main {
        gap: 1.25rem;
    }

    section {
        margin-bottom: 1.25rem;
    }

    /* Back link */
    .back-link {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
}

/* ============================================================================
   SMALL MOBILE BREAKPOINT (< 480px)
   Extra-small devices, further optimizations
   ============================================================================ */

@media (max-width: 480px) {

    /* Further reduce padding */
    .dashboard-container,
    .page-shell,
    .hub-container {
        padding: var(--mobile-spacing-sm) !important;
    }

    /* Headers */
    .page-header,
    .dashboard-header {
        padding: 1.25rem 0.875rem;
    }

    .page-header h1,
    .dashboard-header h1 {
        font-size: 1.375rem;
    }

    /* Section headers */
    .section-header h2 {
        font-size: 1.125rem;
    }

    /* Buttons */
    .btn {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    /* Cards */
    .card,
    .domain-card,
    .linked-account-card {
        padding: 1rem;
    }

    /* Modal padding */
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }

    /* Chart containers */
    .chart-container {
        padding: 1rem 0.875rem;
    }

    /* Tables - even more compact */
    .data-table,
    .rankings-table {
        font-size: 0.8rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.625rem 0.375rem;
    }

    /* Priority actions - full width cards */
    .priority-action-card,
    .action-card {
        flex: 0 0 90%;
    }
}

/* ============================================================================
   TOUCH INTERACTION ENHANCEMENTS
   ============================================================================ */

@media (max-width: 768px) {

    /* Larger tap areas for interactive elements */
    .drill-down-row,
    .linked-account-card,
    .domain-card,
    .chart-container,
    .question-card {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.1);
    }

    /* Prevent text selection during touch interactions */
    .drill-down-row,
    .linked-account-card,
    .domain-card {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Smooth scrolling for touch */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* Disable hover effects on touch devices */
    @media (hover: none) {
        .drill-down-row:hover,
        .linked-account-card:hover,
        .domain-card:hover {
            transform: none;
        }
    }

    /* Active states for touch feedback */
    .drill-down-row:active,
    .linked-account-card:active,
    .domain-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS FOR MOBILE
   ============================================================================ */

@media (max-width: 768px) {

    /* Reduce animations for battery savings */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Simplified animations on mobile */
    .chart-container:hover,
    .linked-account-card:hover,
    .domain-card:hover {
        animation: none;
    }

    /* Disable expensive filters on mobile */
    .modal-overlay.visible,
    .modal.visible {
        backdrop-filter: none;
    }
}

/* ============================================================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) and (orientation: landscape) {

    /* Reduce vertical spacing in landscape */
    .page-header,
    .dashboard-header {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .page-header h1,
    .dashboard-header h1 {
        font-size: 1.375rem;
    }

    /* Modal/bottom sheet - less height in landscape */
    .modal-content,
    .drill-down-panel__content {
        max-height: 80vh;
        max-height: 80dvh;
    }

    /* Score gauge - smaller in landscape */
    .score-gauge,
    .gauge-canvas {
        max-width: 200px;
    }

    .gauge-center-text {
        font-size: 2rem;
    }
}

/* ============================================================================
   PRINT STYLES - MOBILE DEVICES
   ============================================================================ */

@media print {
    /* Override mobile styles for printing */
    .dashboard-container,
    .page-shell {
        padding: 0 !important;
    }

    /* Remove bottom sheet styling */
    .drill-down-panel__content {
        position: static;
        border-radius: 0;
        max-height: none;
    }

    .drill-down-panel__content::before {
        display: none;
    }

    /* Single column layout for print */
    .overview-charts,
    .domain-cards,
    .rankings-grid {
        grid-template-columns: 1fr;
    }

    /* Reset mobile table container offsets for printing */
    .table-container,
    .rankings-table-container {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure tables print at full width */
    .data-table,
    .rankings-table,
    .drill-down-table {
        min-width: 0 !important;
        font-size: 8pt;
    }

    /* Show columns hidden on mobile */
    .hide-mobile {
        display: table-cell !important;
    }
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS FOR MOBILE
   ============================================================================ */

@media (max-width: 768px) {

    /* Ensure focus is visible on touch devices */
    *:focus-visible {
        outline: 3px solid var(--accent-primary);
        outline-offset: 2px;
    }

    /* Skip links for screen readers */
    .skip-to-content {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--accent-primary);
        color: var(--text-on-accent);
        padding: 0.5rem 1rem;
        text-decoration: none;
        z-index: 10000;
    }

    .skip-to-content:focus {
        top: 0;
    }

    /* Increase contrast for small text */
    .form-hint,
    .form-error,
    .stat-label {
        font-weight: 500;
    }
}

/* ============================================================================
   ADDITIONAL MOBILE ENHANCEMENTS
   ============================================================================ */

/* Horizontal scroll indicator for tables */
@media (max-width: 768px) {
    .table-container {
        position: relative;
    }

    /* Fade indicator showing more content to the right */
    .table-container::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to right, transparent, var(--bg-secondary, #fff) 90%);
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    /* Hide fade when scrolled to end or no scroll needed */
    .table-container.scroll-end::after,
    .table-container.scroll-none::after {
        opacity: 0;
    }

    /* Improved touch target for navigation items */
    .nav-item,
    .sidebar-item {
        min-height: var(--touch-target-comfortable, 48px);
    }

    /* Improved touch targets for action buttons in tables */
    .table-actions .btn,
    .table-actions button,
    .action-btn {
        min-width: var(--touch-target-min, 44px);
        min-height: var(--touch-target-min, 44px);
        padding: 0.5rem;
    }

    /* Better spacing for pagination buttons */
    .pagination-buttons,
    .pagination {
        gap: 0.75rem;
    }

    .pagination-buttons .btn,
    .pagination button,
    .btn-pagination {
        min-width: var(--touch-target-min, 44px);
        min-height: var(--touch-target-min, 44px);
    }

    /* Ensure org switcher items are touch-friendly */
    .org-switcher-item {
        min-height: var(--touch-target-comfortable, 48px);
        padding: 0.75rem 1rem;
    }

    /* Add focus states for keyboard navigation */
    .org-switcher-item:focus {
        outline: 2px solid var(--accent-primary, #3b82f6);
        outline-offset: -2px;
        background: var(--bg-tertiary, #f8fafc);
    }
}

/* ============================================================================
   iOS SAFARI SPECIFIC FIXES
   ============================================================================ */

/* iOS 100vh Fix - Use CSS custom property set by mobile-utils.js
   NOTE: .modal-content is NOT included here — desktop modals use max-height: 90vh
   from app-common.css. Mobile modals get the dvh cascade in the <768px media query. */
.full-height,
.sidebar,
.assessment-sidebar {
    /* Fallback for browsers without CSS custom properties */
    height: 100vh;
    /* iOS Safari fix via JS */
    height: calc(var(--vh, 1vh) * 100);
    /* Future-proof with dvh (dynamic viewport height) */
    height: 100dvh;
}

/* iOS Safe Area Support for notched devices */
@supports (padding: max(0px)) {
    body {
        /* Respect safe areas on notched devices */
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .sidebar {
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    /* Full-screen modals need safe area padding */
    @media (max-width: 768px) {
        .modal-content {
            padding-top: max(1rem, env(safe-area-inset-top));
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
        }

        /* Bottom sheets */
        .drill-down-panel__content {
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
        }

        /* Fixed bottom elements */
        .sticky-footer,
        .action-bar-fixed,
        .messages-input-bar {
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
        }
    }
}

/* iOS Form Input Zoom Prevention - only on actual touch devices */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* iOS Momentum Scrolling */
@media (max-width: 768px) {
    .table-scroll-wrapper,
    .tabs-scroll,
    .filter-scroll,
    .modal-body,
    .sidebar-content {
        -webkit-overflow-scrolling: touch;
        /* Prevent iOS Safari swipe-back interference */
        overscroll-behavior-x: contain;
    }
}

/* iOS Fixed Positioning Fix - prevent keyboard from breaking layout */
@media (max-width: 768px) {
    .sidebar,
    .modal-content {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    /* When keyboard is visible, adjust fixed elements */
    body.keyboard-visible .sidebar {
        position: absolute;
    }

    body.keyboard-visible .modal-content {
        max-height: calc(var(--vh, 1vh) * 60);
    }
}

/* ============================================================================
   NETWORK STATUS INDICATORS
   ============================================================================ */

@media (max-width: 768px) {
    /* Offline indicator banner */
    .offline-banner {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: var(--color-warning);
        color: var(--text-on-accent);
        padding: 0.75rem;
        text-align: center;
        z-index: 10000;
        transform: translateY(-100%);
        transition: transform 0.3s ease;
        font-size: 0.875rem;
        font-weight: 500;
    }

    body.offline .offline-banner {
        transform: translateY(0);
    }

    /* Push content down when offline banner is visible */
    body.offline .sidebar,
    body.offline .main-container {
        margin-top: 48px;
    }

    /* Slow connection warning */
    body.slow-connection .offline-banner {
        background: var(--color-warning);
        transform: translateY(0);
    }
}

/* ============================================================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   DARK MODE MOBILE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
    /* Ensure tap highlight color works in dark mode */
    [data-theme="dark"] * {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    }
}

/* ============================================================================
   TOUCH DEVICE CLASS ENHANCEMENTS
   ============================================================================ */

body.touch-device {
    /* Disable hover effects that don't work well on touch */
    .drill-down-row:hover,
    .linked-account-card:hover,
    .domain-card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ============================================================================
   640px MEDIUM PHONE BREAKPOINT
   ============================================================================ */

@media (max-width: 640px) {
    /* Stats grid - 2 columns on medium phones */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .header-title {
        font-size: 1.25rem;
    }

    .section-header h2 {
        font-size: 1.125rem;
    }

    /* Smaller card padding */
    .card,
    .domain-card,
    .linked-account-card {
        padding: 0.875rem;
    }
}

/* ============================================================================
   TABLET BREAKPOINT (768px - 1024px)
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1024px) {
    .dashboard-container {
        padding: 1.5rem;
    }

    /* 2-column grid for tablets */
    .chart-grid,
    .domain-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Touch targets still important on tablets */
    button,
    .btn,
    a.btn {
        min-height: 44px;
    }
}

/* ============================================================================
   PRINT STYLES FOR MOBILE
   ============================================================================ */

@media print {
    /* Override mobile styles for printing */
    .sidebar,
    .mobile-menu-toggle,
    .bottom-sheet-handle,
    .offline-banner {
        display: none !important;
    }

    .dashboard-container,
    .main-container {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    /* Single column for print */
    .chart-grid,
    .domain-cards {
        grid-template-columns: 1fr !important;
    }

    /* Ensure all content is visible */
    .modal,
    .drill-down-panel {
        position: static !important;
        max-height: none !important;
    }
}