/* JurisOffice Mobile-First Responsive Styles */
/* Week 8: Mobile Experience - Responsive Breakpoints & Touch UI */

/* ==========================================================================
   CSS Custom Properties for Mobile
   ========================================================================== */
:root {
    --mobile-touch-target: 44px;  /* WCAG 2.1 AA minimum */
    --mobile-spacing: 16px;
    --mobile-border-radius: 12px;
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   BUG-SHELL-007: WCAG 2.2 AA SC 1.4.10 Reflow — voorkomen dat content op
   smalle viewports (<= 767px) horizontaal scrollt. We forceren overflow-x
   hidden op html/body en clamp(en) main content tot 100vw zodat een enkele
   ontspoorde child (lange tabel, breed image) niet de hele pagina laat
   schuiven. Specifieke containers (tabellen) blijven zelf scrollbaar via
   .mud-table-container { overflow-x: auto }.
   ========================================================================== */
@media (max-width: 767.98px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }

    .mud-main-content,
    .mud-container {
        max-width: 100vw !important;
        overflow-x: hidden;
    }

    img, video, iframe, canvas, svg {
        max-width: 100% !important;
        height: auto;
    }
}

/* ==========================================================================
   Mobile Base Styles (< 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Typography adjustments */
    body {
        font-size: 16px; /* Prevent iOS zoom on input focus */
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    /* Larger headings for mobile */
    .mud-typography-h4 {
        font-size: 1.25rem !important;
    }

    .mud-typography-h5 {
        font-size: 1.1rem !important;
    }

    .mud-typography-h6 {
        font-size: 1rem !important;
    }

    /* Container padding */
    .mud-container {
        padding-left: var(--mobile-spacing) !important;
        padding-right: var(--mobile-spacing) !important;
    }

    /* App bar adjustments */
    .mud-appbar {
        padding-top: var(--safe-area-inset-top);
    }

    .mud-appbar .mud-typography-h5 {
        font-size: 1rem !important;
    }

    /* Hide non-essential app bar items on mobile */
    .mud-appbar .mud-text-body2 {
        display: none;
    }

    /* Drawer overlay on mobile */
    .mud-drawer {
        position: fixed !important;
        z-index: 1200 !important;
    }

    .mud-drawer--open {
        width: 280px !important;
    }

    /* Main content full width */
    .mud-main-content {
        margin-left: 0 !important;
        padding-bottom: calc(var(--safe-area-inset-bottom) + 60px);
    }

    /* Card adjustments */
    .mud-card {
        border-radius: var(--mobile-border-radius) !important;
        margin-bottom: var(--mobile-spacing);
    }

    .mud-card-content {
        padding: var(--mobile-spacing) !important;
    }

    /* Table responsive */
    .mud-table-container {
        overflow-x: auto;
    }

    .mud-table {
        min-width: unset;
    }

    /* Stack table actions vertically */
    .mud-table-cell .mud-button-group {
        flex-direction: column;
        gap: 4px;
    }

    /* Dialog full screen on mobile */
    .mud-dialog {
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .mud-dialog-content {
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto;
    }

    /* Grid responsive */
    .mud-grid-item {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    /* Stack form fields */
    .mud-form .mud-grid {
        gap: var(--mobile-spacing);
    }

    /* Hide sidebar widgets on mobile */
    .dashboard-sidebar {
        display: none;
    }

    /* Reduce excessive vertical spacing between grid sections on mobile */
    .mb-6 {
        margin-bottom: 1rem !important;
    }

    /* Reduce legal-header font size on mobile to prevent overlap with buttons */
    .legal-header {
        font-size: 1.25rem !important;
        padding: 0.5rem !important;
    }
}

/* ==========================================================================
   Touch-Friendly UI Elements
   ========================================================================== */

/* Larger touch targets for all interactive elements */
@media (pointer: coarse) {
    /* Buttons */
    .mud-button {
        min-height: var(--mobile-touch-target) !important;
        min-width: var(--mobile-touch-target);
        padding: 12px 20px !important;
    }

    .mud-icon-button {
        min-width: var(--mobile-touch-target) !important;
        min-height: var(--mobile-touch-target) !important;
    }

    /* Form inputs */
    .mud-input-control,
    .mud-input,
    .mud-select {
        min-height: var(--mobile-touch-target) !important;
    }

    .mud-input-slot {
        padding: 12px 14px !important;
    }

    /* Checkboxes and switches */
    .mud-checkbox,
    .mud-switch {
        min-height: var(--mobile-touch-target);
        padding: 8px 0;
    }

    /* List items */
    .mud-list-item {
        min-height: 52px !important;
        padding: 12px 16px !important;
    }

    /* Tabs */
    .mud-tab {
        min-height: var(--mobile-touch-target) !important;
        padding: 12px 16px !important;
    }

    /* Menu items */
    .mud-menu-item {
        min-height: var(--mobile-touch-target) !important;
        padding: 12px 16px !important;
    }

    /* Nav menu items */
    .mud-nav-link {
        min-height: 52px !important;
        padding: 12px 16px !important;
    }

    /* Chip/Tag larger tap area */
    .mud-chip {
        min-height: 36px !important;
        padding: 8px 12px !important;
    }

    /* Pagination */
    .mud-pagination .mud-button {
        min-width: var(--mobile-touch-target) !important;
    }
}

/* ==========================================================================
   Tablet Styles (768px - 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .mud-container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* 2-column grid on tablet */
    .mud-grid-item.mud-grid-item-xs-12.mud-grid-item-md-6 {
        flex-basis: 50% !important;
        max-width: 50% !important;
    }

    /* BUG-SHELL-008: KPI-tegels (xs=12 sm=6 md=3) waren op iPad-portret
       (768x1024) toch 1-koloms doordat MudBlazor's sm-breakpoint (600px)
       binnen de tablet-range zou moeten triggeren. We forceren expliciet 50%
       voor sm-6 items in dit viewport-bereik. */
    .mud-grid-item.mud-grid-item-xs-12.mud-grid-item-sm-6 {
        flex-basis: 50% !important;
        max-width: 50% !important;
    }

    /* Drawer as overlay on tablet */
    .mud-drawer {
        width: 280px !important;
    }
}

/* ==========================================================================
   Desktop Styles (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {
    .mud-drawer--open.mud-drawer-persistent {
        width: 260px;
    }

    .mud-main-content {
        transition: margin-left 0.2s ease-in-out;
    }
}

/* ==========================================================================
   Large Desktop Styles (1920px+)
   ========================================================================== */
@media (min-width: 1920px) {
    .mud-container.mud-container-maxwidth-xxl {
        max-width: 1800px !important;
    }

    /* More columns on large screens */
    .mud-grid-item.mud-grid-item-xl-3 {
        flex-basis: 25% !important;
        max-width: 25% !important;
    }
}

/* ==========================================================================
   Swipe Gesture Support
   ========================================================================== */
@media (pointer: coarse) {
    /* Enable horizontal scrolling for tables */
    .mud-table-container {
        scroll-snap-type: x proximity;
    }

    /* Carousel/slider support */
    .swipe-container {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .swipe-container::-webkit-scrollbar {
        display: none;
    }

    .swipe-item {
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* Pull-to-refresh visual indicator */
    .pull-to-refresh-indicator {
        display: none;
        position: fixed;
        top: var(--safe-area-inset-top);
        left: 50%;
        transform: translateX(-50%);
        z-index: 1300;
    }

    .is-pulling .pull-to-refresh-indicator {
        display: block;
    }
}

/* ==========================================================================
   Bottom Navigation (Mobile)
   ========================================================================== */
@media (max-width: 767.98px) {
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid rgba(0,0,0,0.12);
        display: flex;
        justify-content: space-around;
        padding-bottom: var(--safe-area-inset-bottom);
        z-index: 1100;
    }

    .mobile-bottom-nav.hidden {
        display: none !important;
    }

    .mobile-bottom-nav .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 0;
        padding: 6px 0 4px;
        color: rgba(0,0,0,0.6);
        text-decoration: none;
        font-size: 0.75rem;
        min-height: var(--mobile-touch-target);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-bottom-nav .mobile-nav-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.1;
        font-size: 0.6875rem;
    }

    .mobile-bottom-nav .nav-item.active {
        color: #1C3D5A;
    }

    .mobile-bottom-nav .nav-item .mud-icon {
        font-size: 24px;
        margin-bottom: 4px;
    }

    /* Dark mode bottom nav */
    html.mud-theme-dark .mobile-bottom-nav {
        background: #1e1e1e;
        border-top-color: rgba(255,255,255,0.12);
    }

    html.mud-theme-dark .mobile-bottom-nav .nav-item {
        color: rgba(255,255,255,0.6);
    }

    html.mud-theme-dark .mobile-bottom-nav .nav-item.active {
        color: #90caf9;
    }
}

@media (max-width: 390px) {
    .mobile-bottom-nav .mobile-nav-label {
        font-size: 0.625rem;
        letter-spacing: -0.01em;
    }
}

/* Hide bottom nav on desktop */
@media (min-width: 768px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* ==========================================================================
   Floating Action Button (Mobile)
   ========================================================================== */
@media (max-width: 767.98px) {
    .mud-fab {
        position: fixed !important;
        bottom: calc(var(--safe-area-inset-bottom) + 76px) !important;
        right: var(--mobile-spacing) !important;
        z-index: 1050;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
    }

    /* Larger FAB on mobile */
    .mud-fab.mud-fab-size-large {
        width: 64px !important;
        height: 64px !important;
    }

    .mud-fab.mud-fab-size-large .mud-icon-root {
        font-size: 28px !important;
    }
}

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

/* ==========================================================================
   Mobile padding to account for bottom navigation
   ========================================================================== */

/* On mobile, add bottom padding to prevent content being hidden by nav */
@media screen and (max-width: 767px) {
    .pb-mobile-nav {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* On desktop, add bottom padding to clear floating RunningTimersWidget */
@media screen and (min-width: 768px) {
    .pb-mobile-nav {
        padding-bottom: 100px !important;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .mud-appbar,
    .mud-drawer,
    .mobile-bottom-nav,
    .mud-fab,
    .no-print {
        display: none !important;
    }

    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .mud-card {
        box-shadow: none !important;
        border: 1px solid #ddd;
    }
}