/* ============================================================
   GTStats3 Responsive System
   ============================================================

   Standardized breakpoint tokens (see .claude/plans/tablet-laptop-
   responsive-optimization.md for rationale).

   Tier      Min width   Target devices
   ---------------------------------------------------------------
   xs        0           Small phones (fold closed, <480px)
   sm        480px       Large phones / Fold 7 closed
   md        768px       Tablets portrait / Fold 7 open
   lg        1024px      Tablets landscape, small laptops
   xl        1280px      Standard laptops / small desktops
   xxl       1440px      Large desktops

   CSS cannot consume custom properties inside @media queries, so
   the numeric values are duplicated into every media rule in this
   file and companion components. Keep the table above in sync with
   any breakpoint changes.

   Pair this with `useBreakpoint` (Scripts/hooks/useBreakpoint.js)
   for JS-side matches — same threshold values.

   ---------------------------------------------------------------
   Legacy laptop-width tokens (below) predate the tier system and
   target 1366/1440 specifically. They remain in use by existing
   page styles; do not remove without an audit.
   ============================================================ */

/* Design-system CSS variables for responsive layouts.
   Consumed by page-specific styles; defaults suit 1920px+ displays,
   shrink progressively at common laptop breakpoints. */
:root {
    --app-sidebar-width: 300px;
    --app-content-padding: 20px;
    --app-max-width: 1400px;
    --app-card-padding: 16px;
}

/* Scrollable wrapper for wide data tables.
   Wrap any full-width table that has more than a few columns. */
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border, #e0e0e0);
}
.table-scroll-wrapper table {
    min-width: 100%;
}

@media (max-width: 1440px) {
    :root {
        --app-sidebar-width: 260px;
        --app-content-padding: 16px;
        --app-max-width: 100%;
        --app-card-padding: 12px;
    }
}
@media (max-width: 1366px) {
    :root {
        --app-sidebar-width: 220px;
        --app-content-padding: 12px;
        --app-card-padding: 10px;
    }
}

/* Compact mode for low-height displays (1366x768, most 14" laptops).
   Reduces vertical padding on headers + cards so more content fits
   above the fold without requiring zoom-out. */
@media (max-height: 800px) {
    .page-header { padding-top: 8px; padding-bottom: 8px; }
    .page-body-header { padding-top: 8px; padding-bottom: 8px; }
}

/* ============================================================
   Utility classes — responsive visibility & touch ergonomics
   ============================================================
   Naming: .gt-hide-<tier>-<direction>
     down = hide at this tier AND smaller
     up   = hide at this tier AND larger
   ============================================================ */

/* Hide on <768px (phones). Visible on tablets/laptops/desktops. */
.gt-hide-md-down { display: initial; }
@media (max-width: 767.98px) {
    .gt-hide-md-down { display: none !important; }
}

/* Hide on <1024px (phones + small tablets). Visible on large tablets/laptops+. */
.gt-hide-lg-down { display: initial; }
@media (max-width: 1023.98px) {
    .gt-hide-lg-down { display: none !important; }
}

/* Hide on ≥1024px (large tablets+). Visible only on phones/small tablets. */
.gt-hide-lg-up { display: initial; }
@media (min-width: 1024px) {
    .gt-hide-lg-up { display: none !important; }
}

/* Hide on ≥768px (tablets+). Visible only on phones. */
.gt-hide-md-up { display: initial; }
@media (min-width: 768px) {
    .gt-hide-md-up { display: none !important; }
}

/* Touch target: enforce the 44x44 minimum hit area recommended by
   Apple HIG and Material when the device primary input is coarse
   (touch). Desktop mouse users keep the designer's original sizing. */
@media (hover: none) and (pointer: coarse) {
    .gt-touch-target,
    .gt-touch-target button,
    .gt-touch-target a {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Responsive table wrapper — adds horizontal scroll on narrow
   viewports without forcing card-layout refactors. Apply to any
   wide data table that does not yet have a tablet-specific design. */
.gt-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.gt-table-responsive > table {
    min-width: 100%;
}

/* Responsive modal — on <768px, fill the viewport instead of the
   centered dialog. Works with any modal that uses .modal-dialog
   (Bootstrap-style) or the gt-modal-responsive class directly. */
@media (max-width: 767.98px) {
    .gt-modal-responsive,
    .gt-modal-responsive .modal-dialog {
        margin: 0;
        max-width: 100vw;
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}