/**
 * Mijn Bijbel - Responsive Styles
 * Mobile-first media queries
 */

/* ==========================================================================
   Base: Mobile (< 768px)
   All base styles in other files are mobile-first
   ========================================================================== */

/* Mobile: Hide desktop elements, show mobile elements */
@media (max-width: 1023px) {
    /* Prevent horizontal overflow */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    * {
        max-width: 100vw;
    }
    
    /* Hide desktop sidebar */
    .sidebar {
        display: none;
    }
    
    /* Hide desktop tabs grid */
    .tabs-grid {
        display: none;
    }
    
    /* Hide add tab button on mobile */
    .add-tab-btn {
        display: none;
    }
    
    /* Show mobile carousel */
    .mobile-carousel {
        display: block;
        width: 100%;
        max-width: 100vw;
    }
    
    /* Show mobile navigation */
    .mobile-nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Main content takes full width */
    .main-content {
        margin-left: 0;
        width: 100%;
        max-width: 100vw;
    }
    
    /* Study control bar adjustments */
    .study-control-bar {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100vw;
    }
    
    .study-actions {
        justify-content: flex-end;
    }
}

/* ==========================================================================
   Desktop (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
    /* Hide sidebar (replaced by floating toolbar) */
    .sidebar {
        display: none !important;
    }
    
    /* Hide old tabs grid (replaced by canvas) */
    .tabs-grid {
        display: none !important;
    }
    
    /* Show canvas viewport */
    .canvas-viewport {
        display: block;
    }
    
    /* Show floating toolbar */
    .floating-toolbar {
        display: flex;
    }
    
    /* Show minimap */
    .canvas-minimap {
        display: block;
    }
    
    /* Hide mobile carousel */
    .mobile-carousel {
        display: none;
    }
    
    /* Hide mobile navigation */
    .mobile-nav {
        display: none;
    }
    
    /* Hide mobile-specific bottom sheets content */
    .mobile-chapter-nav {
        display: none;
    }
    
    /* Main content with no sidebar margin */
    .main-content {
        margin-left: 0;
        width: 100%;
        overflow: hidden; /* Prevent scrolling on desktop canvas mode */
    }
    
    /* Hide bottom sheets on desktop (use modals instead) */
    .bottom-sheet {
        display: none !important;
    }
}

/* ==========================================================================
   Desktop (1024px - 1439px)
   ========================================================================== */

@media (min-width: 1024px) {
    /* Action bar on desktop - no bottom nav offset */
    .verse-action-bar {
        bottom: var(--space-6);
    }
    
    .toast-notification {
        bottom: calc(var(--space-6) + 80px);
    }
}

@media (min-width: 1024px) {
    /* Sidebar is expanded by default */
    .sidebar {
        width: var(--sidebar-width);
    }
    
    .sidebar .nav-label,
    .sidebar .btn-label,
    .sidebar .sidebar-logo {
        opacity: 1;
        width: auto;
    }
    
    .sidebar .nav-arrow {
        display: block;
    }
    
    /* Main content margin */
    .main-content {
        margin-left: var(--sidebar-width);
    }
    
    .sidebar.collapsed ~ .main-content {
        margin-left: var(--sidebar-collapsed);
    }
    
    /* Tabs grid with multiple columns */
    .tabs-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    }
    
    /* Larger padding */
    .tab-content {
        padding: var(--space-8);
    }
}

/* ==========================================================================
   Large Desktop (1440px+)
   ========================================================================== */

@media (min-width: 1440px) {
    /* Larger base font */
    html {
        font-size: 17px;
    }
    
    /* Wider tabs grid */
    .tabs-grid {
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        max-width: 1800px;
        margin: 0 auto;
    }
    
    /* More padding */
    .tabs-grid {
        padding: var(--space-6);
        gap: var(--space-6);
    }
}

/* ==========================================================================
   Extra Large Desktop (1920px+)
   ========================================================================== */

@media (min-width: 1920px) {
    html {
        font-size: 18px;
    }
    
    .tabs-grid {
        max-width: 2200px;
    }
}

/* ==========================================================================
   Height-based Queries
   ========================================================================== */

/* Short screens (mobile landscape, small laptops) */
@media (max-height: 600px) {
    .tab-content {
        padding: var(--space-4);
    }
    
    .study-control-bar {
        padding: var(--space-2) var(--space-4);
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    /* Hide UI elements */
    .sidebar,
    .mobile-nav,
    .mobile-chapter-nav,
    .study-control-bar,
    .tab-header,
    .tab-nav,
    .bottom-sheet,
    .sheet-backdrop,
    .presentation-overlay {
        display: none !important;
    }
    
    /* Full width content */
    .main-content {
        margin: 0;
    }
    
    /* Remove shadows and backgrounds */
    .bible-tab {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    /* Black text */
    body {
        color: black;
        background: white;
    }
    
    /* Verse numbers in black */
    .verse-number {
        color: #666;
    }
    
    /* Page breaks */
    .bible-tab {
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .carousel-track {
        transition: none;
    }
    
    .bottom-sheet {
        transition: none;
    }
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --border-color: currentColor;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
    }
    
    .bible-tab {
        border: 2px solid currentColor;
    }
    
    .btn-primary {
        border: 2px solid currentColor;
    }
}

/* ==========================================================================
   Touch Device Detection
   ========================================================================== */

@media (hover: none) {
    /* Remove hover states on touch devices */
    .nav-button:hover,
    .dropdown-item:hover,
    .sidebar-btn:hover,
    .tab-btn:hover {
        background-color: transparent;
    }
}

/* ==========================================================================
   Pointer Precision (coarse = touch, fine = mouse)
   ========================================================================== */

@media (pointer: coarse) {
    /* Larger touch targets */
    .dropdown-item {
        padding: var(--space-4);
    }
    
    .tab-btn {
        width: 44px;
        height: 44px;
    }
}