/* ==========================================================================
   TOPPERWORK - GLOBAL RESPONSIVE / MOBILE-FIRST FOUNDATION
   ==========================================================================
   Phase: 1.36

   Purpose:
   - Mobile-first responsive architecture
   - Consistent project breakpoints
   - Tablet layout foundation
   - Desktop layout foundation
   - Large desktop foundation
   - Touch-friendly interaction
   - Safe viewport handling
   - Overflow protection
   - Android WebView compatibility
   - iOS WebView compatibility

   Breakpoint strategy:
   - Mobile: default
   - Tablet: 641px+
   - Desktop: 900px+
   - Large Desktop: 1200px+
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL RESPONSIVE ROOT FOUNDATION
   ========================================================================== */

html,
body {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;
}


/* ==========================================================================
   2. SAFE VIEWPORT FOUNDATION
   ==========================================================================
   Fallback order:
   - vh for older WebViews
   - svh for stable small viewport
   - dvh for modern dynamic viewport
   ========================================================================== */

html {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
}


body {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
}


/* ==========================================================================
   3. APPLICATION ROOT VIEWPORT FOUNDATION
   ========================================================================== */

#app,
#topperwork-app,
.topperwork-app {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
}


/* ==========================================================================
   4. MAIN CONTENT VIEWPORT FOUNDATION
   ========================================================================== */

.topperwork-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}


/* ==========================================================================
   5. RESPONSIVE CONTAINER SYSTEM
   ==========================================================================
   Mobile is the default.
   Existing TopperWork container architecture is preserved.
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max-width);

    margin-right: auto;
    margin-left: auto;

    min-width: 0;
}


/* ==========================================================================
   6. RESPONSIVE WIDTH UTILITIES
   ========================================================================== */

.w-100 {
    width: 100% !important;
}


.max-w-100 {
    max-width: 100% !important;
}


/* ==========================================================================
   7. RESPONSIVE DISPLAY UTILITIES
   ========================================================================== */

.d-none {
    display: none !important;
}


.d-block {
    display: block !important;
}


.d-inline-block {
    display: inline-block !important;
}


.d-flex {
    display: flex !important;
}


.d-inline-flex {
    display: inline-flex !important;
}


/* ==========================================================================
   8. FLEX UTILITIES
   ========================================================================== */

.flex-column {
    flex-direction: column !important;
}


.flex-row {
    flex-direction: row !important;
}


.flex-wrap {
    flex-wrap: wrap !important;
}


.flex-nowrap {
    flex-wrap: nowrap !important;
}


.flex-1 {
    flex: 1 1 0 !important;
}


.flex-auto {
    flex: 1 1 auto !important;
}


.flex-none {
    flex: none !important;
}


/* ==========================================================================
   9. FLEX ALIGNMENT UTILITIES
   ========================================================================== */

.items-start {
    align-items: flex-start !important;
}


.items-center {
    align-items: center !important;
}


.items-end {
    align-items: flex-end !important;
}


.justify-start {
    justify-content: flex-start !important;
}


.justify-center {
    justify-content: center !important;
}


.justify-between {
    justify-content: space-between !important;
}


.justify-end {
    justify-content: flex-end !important;
}


/* ==========================================================================
   10. OVERFLOW SAFETY
   ========================================================================== */

.overflow-hidden {
    overflow: hidden !important;
}


.overflow-auto {
    overflow: auto !important;
}


.overflow-x-auto {
    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   11. TOUCH TARGET FOUNDATION
   ========================================================================== */

.touch-target {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);

    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================================
   12. MOBILE FULL WIDTH
   ========================================================================== */

.mobile-full-width {
    width: 100%;
}


/* ==========================================================================
   13. MOBILE VISIBILITY
   ========================================================================== */

.show-mobile {
    display: block !important;
}


.show-mobile-flex {
    display: flex !important;
}


.show-mobile-inline-flex {
    display: inline-flex !important;
}


.hide-mobile {
    display: none !important;
}


/* ==========================================================================
   14. TABLET
   ========================================================================== */

@media (min-width: 641px) {

    :root {
        --container-padding:
            var(--page-padding-tablet);
    }


    .container {
        max-width:
            var(--container-tablet-width);
    }


    .mobile-full-width {
        width: auto;
    }


    .show-tablet-up {
        display: block !important;
    }


    .show-tablet-up-flex {
        display: flex !important;
    }


    .show-tablet-up-inline-flex {
        display: inline-flex !important;
    }


    .hide-tablet-up {
        display: none !important;
    }


    .show-mobile,
    .show-mobile-flex,
    .show-mobile-inline-flex {
        display: none !important;
    }


    .hide-mobile {
        display: block !important;
    }


    .tablet-flex-row {
        flex-direction: row !important;
    }


    .tablet-flex-column {
        flex-direction: column !important;
    }

}


/* ==========================================================================
   15. DESKTOP
   ========================================================================== */

@media (min-width: 900px) {

    :root {
        --container-padding:
            var(--page-padding-desktop);
    }


    .container {
        max-width:
            var(--container-desktop-width);
    }


    .show-desktop {
        display: block !important;
    }


    .show-desktop-flex {
        display: flex !important;
    }


    .show-desktop-inline-flex {
        display: inline-flex !important;
    }


    .hide-desktop {
        display: none !important;
    }


    .desktop-flex-row {
        flex-direction: row !important;
    }


    .desktop-flex-column {
        flex-direction: column !important;
    }

}


/* ==========================================================================
   16. LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1200px) {

    .container {
        max-width:
            var(--container-large-width);
    }

}


/* ==========================================================================
   17. LONG CONTENT PROTECTION
   ========================================================================== */

.break-word {
    overflow-wrap: break-word;
    word-break: break-word;
}


/* ==========================================================================
   18. RESPONSIVE MEDIA
   ========================================================================== */

.responsive-media {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;
}


/* ==========================================================================
   19. HORIZONTAL SCROLL CONTAINER
   ==========================================================================
   Explicitly opt-in only.

   Page-level accidental horizontal scrolling remains disabled.
   ========================================================================== */

.horizontal-scroll {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   20. RESPONSIVE GRID FOUNDATION
   ========================================================================== */

.grid {
    display: grid;

    width: 100%;
    max-width: 100%;

    min-width: 0;
}


.grid-auto-fit {
    display: grid;

    width: 100%;
    max-width: 100%;

    min-width: 0;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(
                    100%,
                    var(--grid-min-column-width)
                ),
                1fr
            )
        );

    gap:
        var(--spacing-md);
}


/* ==========================================================================
   21. RESPONSIVE INTERACTIVE SAFETY
   ========================================================================== */

button,
a,
input,
textarea,
select,
summary {
    max-width: 100%;
}


/* ==========================================================================
   22. SAFE-AREA AWARE RESPONSIVE SPACING
   ========================================================================== */

.safe-area-top {
    padding-top:
        var(--safe-area-top);
}


.safe-area-right {
    padding-right:
        var(--safe-area-right);
}


.safe-area-bottom {
    padding-bottom:
        var(--safe-area-bottom);
}


.safe-area-left {
    padding-left:
        var(--safe-area-left);
}


/* ==========================================================================
   23. WEBVIEW / MOBILE TEXT BEHAVIOR
   ========================================================================== */

@supports (-webkit-touch-callout: none) {

    html,
    body {
        -webkit-text-size-adjust: 100%;
    }

}


/* ==========================================================================
   24. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

}