/* ============================================================================
   TennisUp Responsive CSS System
   Mobile-first design with Fluent UI breakpoints
   ============================================================================ */

/* ============================================================================
   1. CSS Variables & Breakpoints
   ============================================================================ */
:root {
    /* Breakpoint values (for reference - use in media queries) */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1600px;
    
    /* Spacing - mobile first */
    --spacing-page: 12px;
    --spacing-card: 12px;
    --spacing-section: 16px;
    
    /* Typography scale - mobile first */
    --font-size-h1: 24px;
    --font-size-h2: 20px;
    --font-size-h3: 18px;
    --font-size-body: 14px;
    --font-size-small: 12px;
    
    /* Touch targets */
    --touch-target-min: 44px;
    
    /* Navigation */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 60px;
    --bottom-nav-height: 60px;
    --header-height: 56px;
    
    /* Grid columns */
    --grid-columns: 1;
    --grid-gap: 12px;
    
    /* Card sizing */
    --card-max-width: 100%;
    
    /* Dialog sizing */
    --dialog-width: 100%;
    --dialog-height: 100%;
    --dialog-border-radius: 0;
}

/* Tablet overrides (768px+) */
@media (min-width: 768px) {
    :root {
        --spacing-page: 16px;
        --spacing-card: 16px;
        --spacing-section: 24px;
        
        --font-size-h1: 28px;
        --font-size-h2: 24px;
        --font-size-h3: 20px;
        --font-size-body: 15px;
        
        --grid-columns: 2;
        --grid-gap: 16px;
        
        --card-max-width: 400px;
        
        --dialog-width: 500px;
        --dialog-height: auto;
        --dialog-border-radius: 8px;
    }
}

/* Desktop overrides (1024px+) */
@media (min-width: 1024px) {
    :root {
        --spacing-page: 24px;
        --spacing-section: 32px;
        
        --font-size-h1: 32px;
        --font-size-h2: 28px;
        --font-size-h3: 24px;
        --font-size-body: 16px;
        
        --grid-columns: 3;
        --grid-gap: 20px;
        
        --dialog-width: 600px;
    }
}

/* Wide screens (1600px+) */
@media (min-width: 1600px) {
    :root {
        --grid-columns: 4;
        --grid-gap: 24px;
    }
}

/* ============================================================================
   2. Responsive Container
   ============================================================================ */
.responsive-container {
    padding: var(--spacing-page);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.responsive-container.full-width {
    max-width: 100%;
}

/* ============================================================================
   3. Responsive Grid
   ============================================================================ */
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
}

/* Explicit column overrides */
.grid-1-col { grid-template-columns: 1fr; }
.grid-2-col { grid-template-columns: repeat(2, 1fr); }
.grid-3-col { grid-template-columns: repeat(3, 1fr); }
.grid-4-col { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
    .grid-2-col,
    .grid-3-col,
    .grid-4-col {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid-3-col,
    .grid-4-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================================
   4. Responsive Cards
   ============================================================================ */
.card-responsive {
    width: 100%;
    max-width: var(--card-max-width);
}

@media (max-width: 767px) {
    .card-responsive {
        max-width: 100%;
    }
}

/* ============================================================================
   5. Responsive Typography
   ============================================================================ */
.responsive-h1,
.page-title {
    font-size: var(--font-size-h1);
    line-height: 1.2;
    margin-bottom: 0.5em;
}

.responsive-h2,
.section-title {
    font-size: var(--font-size-h2);
    line-height: 1.3;
    margin-bottom: 0.5em;
}

.responsive-h3,
.card-title {
    font-size: var(--font-size-h3);
    line-height: 1.4;
    margin-bottom: 0.5em;
}

.responsive-body {
    font-size: var(--font-size-body);
    line-height: 1.5;
}

.responsive-small {
    font-size: var(--font-size-small);
    line-height: 1.4;
}

/* ============================================================================
   6. Mobile Navigation Helpers
   ============================================================================ */

/* Hide on mobile */
.hide-mobile {
    display: block;
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none;
}

@media (max-width: 767px) {
    .show-mobile {
        display: block !important;
    }
    
    .show-mobile.flex {
        display: flex !important;
    }
}

/* Hide on desktop */
.hide-desktop {
    display: block;
}

@media (min-width: 1024px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on desktop */
.show-desktop {
    display: none;
}

@media (min-width: 1024px) {
    .show-desktop {
        display: block !important;
    }
}

/* ============================================================================
   7. Mobile-Optimized Dialogs
   ============================================================================ */

/* --------------------------------------------------------------------------
   Scrollable dialog body (all viewports)
   --------------------------------------------------------------------------
   FluentUI lays the dialog control out as a 3-row grid
   ([dialog-header] / [dialog-body] / [dialog-footer]). By default every row is
   content-sized, so a tall form makes the control grow past the viewport and
   the footer (with the action buttons) ends up off-screen and unreachable.
   We cap the control height and turn the body row into the flexible, scrollable
   region so the header and footer stay pinned and the buttons remain reachable.
   Scoped to the booking dialog to avoid restyling small confirmation dialogs.
   -------------------------------------------------------------------------- */
.create-booking-dialog::part(control) {
    box-sizing: border-box;
    max-height: 90vh;
    grid-template-rows:
        [dialog-header] auto
        [dialog-body] minmax(0, 1fr)
        [dialog-footer] auto;
}

.create-booking-dialog .fluent-dialog-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

@media (max-width: 767px) {
    /* Neutralize fixed inline widths (e.g. Style="width: 500px") so dialogs
       never exceed the viewport on phones. Applies to the host element and the
       inner control part rendered by FluentUI. */
    fluent-dialog,
    .fluent-dialog-container {
        --dialog-width: 100vw !important;
        --dialog-height: auto !important;
        width: 100vw !important;
        min-width: 0 !important;
        max-width: 100vw !important;
    }

    fluent-dialog::part(control) {
        width: 100vw !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Full-height sheet for the booking form so the scrollable body has maximum
       room and the footer buttons stay docked at the bottom of the screen. */
    .create-booking-dialog::part(control) {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    /* Stack the footer buttons full-width as comfortable tap targets. */
    .create-booking-dialog .fluent-dialog-footer {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .create-booking-dialog .fluent-dialog-footer fluent-button {
        width: 100%;
    }

    .fluent-dialog-content {
        padding: var(--spacing-page);
    }
}

/* ============================================================================
   7b. Mobile-Optimized Data Tables / Grids
   --------------------------------------------------------------------------
   FluentDataGrid renders as <table class="fluent-data-grid"> with a fixed
   GridTemplateColumns wider than a phone screen. Without this, columns get
   clipped by the content area's overflow:hidden. Here we turn each grid into
   its own horizontally-scrollable container so all columns stay reachable.
   ============================================================================ */
@media (max-width: 767px) {
    .fluent-data-grid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Plain HTML tables: wrap-free fallback - allow horizontal scroll */
    .table-responsive,
    .admin-content table:not(.fluent-data-grid) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        white-space: nowrap;
    }

    /* Subtle hint that a grid scrolls sideways */
    .fluent-data-grid::-webkit-scrollbar {
        height: 6px;
    }
    .fluent-data-grid::-webkit-scrollbar-thumb {
        background: var(--neutral-stroke-rest, #ccc);
        border-radius: 3px;
    }
}

/* ============================================================================
   8. Touch-Friendly Elements
   ============================================================================ */
.touch-target {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
}

/* Ensure buttons are touch-friendly on mobile */
@media (max-width: 767px) {
    button,
    .fluent-button,
    [role="button"] {
        min-height: var(--touch-target-min);
    }
    
    /* Larger touch areas for navigation items */
    .fluent-nav-link,
    .nav-link {
        min-height: var(--touch-target-min);
        padding: 12px 16px;
    }
}

/* ============================================================================
   9. Responsive Forms
   ============================================================================ */
.form-responsive {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-card);
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-card);
}

@media (min-width: 768px) {
    .form-row {
        flex-direction: row;
    }
    
    .form-row > * {
        flex: 1;
    }
}

/* Full-width inputs on mobile */
@media (max-width: 767px) {
    .form-responsive input,
    .form-responsive select,
    .form-responsive textarea,
    .fluent-text-field,
    .fluent-select {
        width: 100% !important;
    }
}

/* ============================================================================
   10. Sidebar Responsive Behavior
   ============================================================================ */
.sidebar-responsive {
    width: var(--sidebar-width);
    transition: width 0.3s ease, transform 0.3s ease;
}

.sidebar-responsive.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Mobile sidebar as overlay */
@media (max-width: 1023px) {
    .sidebar-responsive {
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        z-index: 1000;
        transform: translateX(-100%);
        background: var(--neutral-layer-1, #ffffff);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
    
    .sidebar-responsive.open {
        transform: translateX(0);
    }
    
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    
    .sidebar-overlay.visible {
        display: block;
    }
}

/* ============================================================================
   11. Bottom Navigation (Mobile)
   ============================================================================ */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background: var(--neutral-layer-1, #ffffff);
    border-top: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 767px) {
    .bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    /* Add padding to main content to account for bottom nav */
    .has-bottom-nav {
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0));
    }
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    min-width: 64px;
    text-decoration: none;
    color: var(--neutral-foreground-rest, #333);
    font-size: 10px;
}

.bottom-nav-item.active {
    color: var(--accent-foreground-rest, #0078d4);
}

.bottom-nav-item svg,
.bottom-nav-item fluent-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

/* ============================================================================
   12. MAUI Hybrid Specific
   ============================================================================ */

/* Disable overscroll bounce */
html, body {
    overscroll-behavior: none;
}

/* Safe area insets for notched devices */
.safe-area-top {
    padding-top: env(safe-area-inset-top, 0);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.safe-area-left {
    padding-left: env(safe-area-inset-left, 0);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right, 0);
}

/* ============================================================================
   13. Utility Classes
   ============================================================================ */

/* Stack layout for mobile */
.stack-mobile {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-card);
}

@media (max-width: 767px) {
    .stack-mobile {
        flex-direction: column;
    }
}

/* Scrollable horizontal on mobile */
.scroll-x-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    .scroll-x-mobile {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--spacing-card);
        padding-bottom: 8px;
    }
    
    .scroll-x-mobile > * {
        flex-shrink: 0;
    }
}

/* Text truncation */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive text alignment */
.text-center-mobile {
    text-align: left;
}

@media (max-width: 767px) {
    .text-center-mobile {
        text-align: center;
    }
}

/* ============================================================================
   FluentUI Navigation Active State Fixes
============================================================================ */

/* Global fix for FluentUI NavLink active state visibility */
fluent-nav-link[aria-current="page"],
fluent-nav-link.active,
fluent-nav-link[aria-selected="true"] {
    --neutral-foreground-rest: white !important;
    --foreground-on-accent-rest: white !important;
}

fluent-nav-link[aria-current="page"] span,
fluent-nav-link.active span,
fluent-nav-link[aria-selected="true"] span,
fluent-nav-link[aria-current="page"] .nav-link-text,
fluent-nav-link.active .nav-link-text,
fluent-nav-link[aria-selected="true"] .nav-link-text {
    color: white !important;
}

fluent-nav-link[aria-current="page"] svg,
fluent-nav-link.active svg,
fluent-nav-link[aria-selected="true"] svg {
    fill: white !important;
    color: white !important;
}