/**
 * 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;

    /* 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;
    }
}

/* ============================================================================
   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;
    }

    /* 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;
    }

    /* ========================================
       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;
    }

    .company-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 {
        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 {
        font-size: 0.85rem;
        min-width: 600px; /* Prevent excessive squishing */
    }

    .data-table th,
    .data-table td,
    .rankings-table th,
    .rankings-table td,
    .drill-down-table th,
    .drill-down-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;
        height: 100vh !important;
        max-height: 100vh !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 */
    .modal-footer,
    .drill-down-modal__footer {
        padding: 1rem 1.25rem;
        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;
    }

    /* ========================================
       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
       ======================================== */

    .company-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,
    .company-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,
    .company-card,
    .domain-card,
    .chart-container,
    .question-card {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(99, 102, 241, 0.1);
    }

    /* Prevent text selection during touch interactions */
    .drill-down-row,
    .company-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,
        .company-card:hover,
        .domain-card:hover {
            transform: none;
        }
    }

    /* Active states for touch feedback */
    .drill-down-row:active,
    .company-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,
    .company-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;
    }

    /* 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;
    }
}

/* ============================================================================
   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: white;
        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 */
.full-height,
.modal-content,
.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 {
            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: #f59e0b;
        color: white;
        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: #eab308;
        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 (prefers-color-scheme: dark) and (max-width: 768px) {
    :root {
        color-scheme: dark;
    }

    /* Ensure tap highlight color works in dark mode */
    * {
        -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,
    .company-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,
    .company-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;
    }
}