/**
 * BALAM AI - Responsive & Zoom-Safe Foundation
 * ═══════════════════════════════════════════════════════════════════════
 *
 * STANDARD BREAKPOINTS (use these exact values in all media queries):
 *
 *   Mobile small:   max-width: 575.98px
 *   Mobile:         min-width: 576px   / max-width: 767.98px
 *   Tablet:         min-width: 768px   / max-width: 991.98px
 *   Desktop sm:     min-width: 992px   / max-width: 1199.98px
 *   Desktop md:     min-width: 1200px  / max-width: 1399.98px
 *   Desktop lg:     min-width: 1400px
 *
 * NON-STANDARD BREAKPOINTS TO AVOID:
 *   ✗ 400px, 480px, 600px, 640px → use 575.98px (mobile-small boundary)
 *   ✗ 900px                      → use 991.98px  (tablet landscape boundary)
 *   ✗ 1024px                     → use 991.98px  (tablet landscape boundary)
 *   ✗ 1100px                     → use 1199.98px (desktop-sm boundary)
 *   ✗ 1365px, 1366px             → use 1399.98px (desktop-md boundary)
 *
 * ZOOM SAFETY:
 *   - Never use `width: 100vw` — causes horizontal scroll at zoom > 100%
 *     because vw ignores the scrollbar width. Use `width: 100%` instead.
 *   - Use `clamp()` for fluid typography (see tokens/semantic.css)
 *   - Use `dvh` (dynamic viewport height) with `vh` fallback for mobile
 *
 * ═══════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════
   VIEWPORT HEIGHT — dynamic viewport height (dvh) with vh fallback
   dvh accounts for collapsible browser chrome on mobile (address bar).
   Set --balam-vh as a JS-updatable fallback for older browsers.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Fallback for browsers without dvh support (set via JS if needed) */
    --balam-full-height: 100dvh;
}

/* Safe full-height utility */
.h-full-dvh {
    height: 100dvh;
    height: calc(var(--balam-vh, 1vh) * 100); /* legacy fallback */
}

.min-h-full-dvh {
    min-height: 100dvh;
    min-height: calc(var(--balam-vh, 1vh) * 100);
}

/* ═══════════════════════════════════════════════════════════════════════
   SAFE AREA INSETS — notched device support (iPhone X+, Android foldables)
   ═══════════════════════════════════════════════════════════════════════ */

.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); }

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

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

/* ═══════════════════════════════════════════════════════════════════════
   CONTAINER QUERIES — component-level responsiveness
   Use `.container-responsive` on a parent to enable @container queries
   in child components, independent of viewport size.
   ═══════════════════════════════════════════════════════════════════════ */

.container-responsive {
    container-type: inline-size;
}

.container-responsive-size {
    container-type: size;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCROLL BEHAVIOR
   ═══════════════════════════════════════════════════════════════════════ */

.scroll-smooth {
    scroll-behavior: smooth;
}

/* Prevent body scroll when modal/drawer is open */
.no-scroll {
    overflow: hidden;
}

/* Scrollable area with thin scrollbar */
.scroll-thin {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--balam-color-dark-600) transparent;
}

.scroll-thin::-webkit-scrollbar {
    width: 6px;
}

.scroll-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-thin::-webkit-scrollbar-thumb {
    background: var(--balam-color-dark-600);
    border-radius: var(--balam-radius-full);
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE TABLE WRAPPER
   Prevents table overflow on mobile with horizontal scrolling.
   ═══════════════════════════════════════════════════════════════════════ */

.table-responsive-balam {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--balam-color-dark-600) transparent;
    border-radius: var(--balam-radius-lg);
}

.table-responsive-balam::-webkit-scrollbar {
    height: 6px;
}

.table-responsive-balam::-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive-balam::-webkit-scrollbar-thumb {
    background: var(--balam-color-dark-600);
    border-radius: var(--balam-radius-full);
}

/* ═══════════════════════════════════════════════════════════════════════
   ZOOM-SAFE WIDTH UTILITIES
   Use these instead of 100vw to prevent horizontal scroll at browser zoom.
   ═══════════════════════════════════════════════════════════════════════ */

.w-full-safe {
    width: 100%;
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   BREAKPOINT DISPLAY UTILITIES (dev-only, can purge in prod)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hidden below mobile (< 576px) */
.hidden-xs { display: none !important; }
@media (min-width: 576px) { .hidden-xs { display: revert !important; } }

/* Hidden above mobile-small (≥ 576px) */
@media (min-width: 576px) { .visible-xs-only { display: none !important; } }