/**
 * Responsive Design Styles
 * Mobile-first approach with tablet and desktop enhancements
 * Breakpoints: Mobile (<640px), Tablet (640-1024px), Desktop (>1024px)
 */

/* ============================================
   MOBILE SPECIFIC STYLES (<640px)
   ============================================ */

/* Mobile Navigation - Bottom Fixed Bar */
@media (max-width: 639px) {
    /* Mobile App Layout Structure */
    body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    /* Hide desktop stepper on mobile, show compact version */
    #progress-stepper {
        display: none !important;
    }

    /* Page layouts - stack vertically */
    .page {
        flex-direction: column !important;
        display: flex !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

    /* Mobile Header - Fixed at top */
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--background);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
        z-index: 100;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .mobile-header-logo {
        height: 24px;
    }

    .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Mobile Body - Scrollable content area */
    .mobile-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 76px 1rem 80px 1rem; /* Top padding for header, bottom for footer */
    }

    /* Mobile Footer - Fixed at bottom */
    .mobile-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--background);
        border-top: 1px solid var(--border);
        padding: 1rem;
        z-index: 100;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    }

    .mobile-footer-single {
        display: flex;
        gap: 0.5rem;
    }

    .mobile-footer-single button {
        flex: 1;
        min-height: 48px;
        font-size: 0.9375rem;
        font-weight: 600;
    }

    /* Mobile Footer with Multiple Buttons - Menu Toggle */
    .mobile-footer-multi {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .mobile-footer-primary {
        display: flex;
        gap: 0.5rem;
    }

    .mobile-footer-primary button {
        flex: 1;
        min-height: 48px;
    }

    .mobile-footer-secondary {
        display: none;
        flex-direction: column;
        gap: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border);
    }

    .mobile-footer-secondary.show {
        display: flex;
    }

    .mobile-footer-secondary button {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .mobile-menu-toggle {
        background: var(--muted) !important;
        color: var(--foreground) !important;
        border: 1px solid var(--border) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-width: 48px !important;
        padding: 0 1rem !important;
    }

    .mobile-menu-toggle svg {
        transition: transform 0.2s;
    }

    .mobile-menu-toggle.active svg {
        transform: rotate(180deg);
    }

    /* Welcome Page Mobile */
    #page-welcome {
        padding: 0 !important;
    }

    #page-welcome > div {
        width: 100% !important;
        min-height: auto !important;
        display: none !important; /* Hide side panels */
    }

    #page-welcome > div:last-child {
        display: block !important;
        padding: 0 !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #page-welcome .mobile-header,
    #page-welcome .mobile-body,
    #page-welcome .mobile-footer {
        display: flex !important;
    }

    /* Location Page Mobile */
    #page-location,
    #page-ip-version {
        padding: 0 !important;
    }

    #page-location > div,
    #page-ip-version > div {
        width: 100% !important;
        display: none !important;
    }

    #page-location > div:last-child,
    #page-ip-version > div:last-child {
        display: block !important;
        padding: 0 !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #page-location .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Zones Page Mobile - CRITICAL FIX */
    #page-zones {
        padding: 0 !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

    #page-zones > div {
        width: 100% !important;
        display: none !important;
    }

    #page-zones > div:last-child {
        display: block !important;
        padding: 0 !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Zones page - hide left summary panel, show via modal */
    #page-zones .w-full.lg\:w-\[30\%\] {
        display: none !important;
    }

    /* Zones page top bar - compact on mobile */
    #page-zones .border-b.border-border:not(.mobile-header) {
        display: none !important; /* Hide desktop top bar */
    }

    /* Zone results modal for mobile */
    .mobile-zone-results-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--background);
        z-index: 200;
        display: none;
        flex-direction: column;
        overflow: hidden;
    }

    .mobile-zone-results-modal.show {
        display: flex;
    }

    .mobile-zone-results-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        border-bottom: 1px solid var(--border);
        background: var(--background);
    }

    .mobile-zone-results-header h2 {
        font-size: 1.125rem;
        font-weight: 700;
    }

    .mobile-zone-results-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }

    /* Zone cards - better mobile layout */
    #zones-list [data-segment-id] {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    #zones-list .flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    #zones-list .segment-add-zone-btn,
    #zones-list .segment-delete-btn {
        width: 100% !important;
    }

    /* Zone device input and CIDR - stack on mobile */
    #zones-list .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Planner Page Mobile - App-like Layout */
    #page-planner {
        padding: 0 !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

    #page-planner > .bg-muted.border-b {
        display: none !important; /* Hide desktop top bar */
    }

    #page-planner > .flex-1.flex.overflow-hidden {
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #page-planner .w-\[350px\],
    #page-planner .w-\[320px\],
    #page-planner .w-\[380px\],
    #page-planner .w-\[520px\] {
        display: none !important; /* Hide sidebar, will show as modal */
    }

    #page-planner .flex-1.bg-background {
        padding: 0 !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #page-planner .bg-muted.border-b:last-child {
        display: none !important; /* Hide desktop bottom bar */
    }

    /* Results Page Mobile */
    #page-results {
        padding: 0 !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

    #page-results > div {
        width: 100% !important;
        display: none !important;
    }

    #page-results > div:last-child {
        display: block !important;
        padding: 0 !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #page-results .w-full.lg\:w-\[30\%\] {
        display: none !important;
    }

    /* Touch-friendly buttons - minimum 44px */
    button {
        min-height: 44px;
        touch-action: manipulation;
    }

    button:not(.p-2):not(.p-1) {
        min-width: 44px;
    }

    /* Location type buttons */
    .location-type-btn {
        padding: 1rem !important;
        min-height: 80px;
    }

    /* Font sizes for mobile */
    h1 {
        font-size: 1.75rem !important;
        line-height: 2rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
        line-height: 1.75rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    /* Input fields - larger for mobile */
    input[type="text"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
        min-height: 48px;
    }

    /* Subnet cards - full width on mobile */
    .subnet-card {
        margin-bottom: 0.75rem;
    }

    /* Zones page content area - ensure proper scrolling */
    #page-zones .flex-1.overflow-y-auto {
        height: auto !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Zones page padding adjustments */
    #page-zones .p-8 {
        padding: 1rem !important;
    }

    #page-zones .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #page-zones .py-4 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Zone instruction banner - more compact on mobile */
    #page-zones .bg-chart-1\\/10 {
        padding: 1rem !important;
        font-size: 0.875rem !important;
    }

    #page-zones .bg-chart-1\\/10 h3 {
        font-size: 1rem !important;
    }

    #page-zones .bg-chart-1\\/10 p {
        font-size: 0.8125rem !important;
    }

    /* Zone network info cards - stack on mobile */
    #page-zones .space-y-2 > div {
        font-size: 0.875rem !important;
    }

    /* Recommended block card - compact */
    #page-zones .rounded-xl.p-5 {
        padding: 0.875rem !important;
    }

    #page-zones .text-3xl {
        font-size: 1.5rem !important;
    }

    /* Modal adjustments for mobile */
    .modal-content {
        width: calc(100vw - 2rem) !important;
        max-width: none !important;
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    /* Hide decorative elements on mobile */
    .lg\:block.hidden {
        display: none !important;
    }

    /* Action buttons - full width on mobile */
    .mobile-action-bar {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
        background: var(--card);
        border-top: 1px solid var(--border);
    }

    .mobile-action-bar button {
        width: 100%;
    }
}

/* ============================================
   TABLET SPECIFIC STYLES (640px - 1024px)
   ============================================ */

@media (min-width: 640px) and (max-width: 1023px) {
    /* Tablet layouts - keep side-by-side but adjust ratios */
    #page-welcome > div:first-child,
    #page-location > div:first-child,
    #page-results > div:first-child {
        width: 35% !important;
    }

    #page-welcome > div:last-child,
    #page-location > div:last-child,
    #page-results > div:last-child {
        width: 65% !important;
    }

    /* Zones page - tablet layout */
    #page-zones > div:first-child {
        width: 35% !important;
    }

    #page-zones > div:last-child {
        width: 65% !important;
    }

    /* Zone cards - better tablet spacing */
    #zones-list [data-segment-id] {
        padding: 1.25rem !important;
    }

    /* Zone device input and CIDR - keep grid on tablet */
    #zones-list .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr 2fr !important;
    }

    /* Planner page - keep sidebar but narrower */
    #page-planner .w-\[350px\],
    #page-planner .w-\[320px\],
    #page-planner .w-\[380px\] {
        width: 280px !important;
    }

    #page-planner .w-\[520px\] {
        width: 320px !important;
    }

    /* Touch-friendly spacing */
    button {
        min-height: 40px;
    }

    /* Grid adjustments */
    .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Font sizes for tablet */
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    /* Modal width for tablet */
    .modal-content {
        max-width: 600px !important;
    }

    /* IP version page on tablet */
    #page-ip-version > div:first-child {
        width: 35% !important;
    }

    #page-ip-version > div:last-child {
        width: 65% !important;
    }

    /* Zone page bottom bar on tablet */
    #page-zones .border-t.border-border.px-8 {
        flex-direction: row !important;
        padding: 0.75rem 1.5rem !important;
    }

    #page-zones .border-t.border-border.px-8 button {
        width: auto !important;
    }

    /* Planner page bottom bar on tablet */
    #page-planner .border-t.border-border {
        padding: 0.75rem 1.5rem !important;
    }
}

/* ============================================
   DESKTOP SPECIFIC STYLES (>1024px)
   ============================================ */

@media (min-width: 1024px) {
    /* Ensure optimal spacing on large screens */
    .max-w-7xl {
        max-width: 80rem;
    }

    /* Hover effects only on desktop */
    button:hover,
    .location-type-btn:hover,
    .subnet-card:hover {
        transform: translateY(-1px);
        transition: transform 0.2s ease;
    }
}

/* ============================================
   MOBILE APP-LIKE FEATURES
   ============================================ */

@media (max-width: 639px) {
    /* Pull-to-refresh indicator space */
    body {
        overscroll-behavior-y: contain;
    }

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

    /* Remove tap highlight */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Mobile-specific animations */
    @keyframes slideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .mobile-slide-up {
        animation: slideUp 0.3s ease-out;
    }

    /* Floating Action Button (FAB) for add subnet */
    .fab-button {
        position: fixed;
        bottom: 90px;
        right: 20px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--chart-2);
        color: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 90;
        border: none;
    }

    .fab-button:active {
        transform: scale(0.95);
    }

    /* Bottom sheet for mobile modals */
    .mobile-bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--card);
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        overflow-y: auto;
        z-index: 200;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
    }

    .mobile-bottom-sheet.open {
        transform: translateY(0);
    }

    .mobile-bottom-sheet-handle {
        width: 40px;
        height: 4px;
        background: var(--muted-foreground);
        border-radius: 2px;
        margin: 12px auto 8px;
    }

    /* Mobile table adjustments */
    table {
        font-size: 0.875rem;
    }

    thead {
        display: none; /* Hide headers, use card layout instead */
    }

    tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 0.75rem;
        background: var(--card);
    }

    tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border: none;
    }

    tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--muted-foreground);
        margin-right: 1rem;
    }

    /* Compact statistics cards on mobile */
    .stat-card {
        padding: 1rem !important;
    }

    .stat-card h3 {
        font-size: 1rem !important;
    }

    .stat-card p {
        font-size: 1.5rem !important;
    }

    /* Better spacing for all pages on mobile */
    .max-w-2xl,
    .max-w-3xl,
    .max-w-4xl,
    .max-w-5xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Improve form inputs on mobile */
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    select:focus,
    textarea:focus {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }

    /* Better action button layout on all pages */
    .flex.items-center.justify-between {
        gap: 0.75rem;
    }

    /* IP version page mobile */
    #page-ip-version > div {
        width: 100% !important;
    }

    #page-ip-version .grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Better scrolling for all content areas */
    .overflow-y-auto {
        -webkit-overflow-scrolling: touch !important;
    }

    /* Improve visibility of action bars */
    .border-t.border-border {
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    }
}

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

@media (max-width: 639px) and (orientation: landscape) {
    /* Adjust for landscape mobile */
    #page-welcome .w-full.lg\\:w-\\[30\\%\\] {
        display: none; /* Hide branding in landscape to save space */
    }

    #page-planner .w-\\[350px\\],
    #page-planner .w-\\[320px\\],
    #page-planner .w-\\[380px\\],
    #page-planner .w-\\[520px\\] {
        max-height: 30vh;
    }

    /* Zones page adjustments for landscape */
    #page-zones .w-full.lg\\:w-\\[30\\%\\] {
        max-height: 35vh !important;
    }

    /* Location page - hide image side in landscape */
    #page-location > div:first-child {
        display: none;
    }

    #page-location > div:last-child {
        width: 100% !important;
        padding: 1rem !important;
    }

    /* IP version page - hide image side in landscape */
    #page-ip-version > div:first-child {
        display: none;
    }

    #page-ip-version > div:last-child {
        width: 100% !important;
        padding: 1rem !important;
    }
}

/* ============================================
   ACCESSIBILITY & TOUCH
   ============================================ */

/* Larger focus indicators for touch */
@media (max-width: 1023px) {
    *:focus-visible {
        outline: 3px solid var(--chart-2);
        outline-offset: 2px;
    }

    /* Increase spacing between interactive elements */
    button + button,
    a + a {
        margin-left: 0.5rem;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    button,
    .fab-button,
    nav {
        display: none !important;
    }

    .page {
        position: static !important;
        display: block !important;
    }

    body {
        background: white;
        color: black;
    }
}