/* ========== GLOBAL MOBILE SAFETY NET ==========
   Belt-and-suspenders fix for "page only shows fully in Desktop Site
   mode": a flex/grid child's default min-width is `auto`, which means
   it refuses to shrink below its content's intrinsic width (e.g. a
   wide table added by JS after data loads). Combined with the page's
   overflow-x:hidden, that content silently gets clipped on narrow
   screens instead of scrolling — "Desktop Site" only "fixes" it by
   rendering at a wider virtual viewport and zooming out. Forcing
   min-width:0 here lets these containers actually shrink so their own
   overflow-x:auto children (tables etc.) scroll internally instead. */
html, body {
    max-width: 100%;
}

#app, .app-layout, .app-main, .app-header, .app-topnav, .dashboard, .card, .form-row {
    min-width: 0;
}

img, svg, video, canvas, table, pre, iframe {
    max-width: 100%;
}

/* ========== TABLET ========== */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== MOBILE ========== */
@media (max-width: 768px) {
    :root {
        --header-height: 56px;
        --bottom-nav-height: 72px;
    }

    .app-header {
        padding: 0 var(--space-4);
    }

    .header-brand .logo-sub {
        display: none;
    }

    .header-logo-img {
        width: 34px;
        height: 34px;
    }

    .header-brand .logo-ai {
        display: none;
    }

    .header-brand .logo-tea {
        font-size: var(--text-lg);
    }

    .header-user-name {
        display: none;
    }

    .app-banner-bar {
        padding: var(--space-3) var(--space-4) 0;
    }

    /* Bottom tab bar (mobile only): the nav row used to be `position:
       sticky` right under the header, which meant it scrolled out of easy
       reach as soon as page content got long, and the visitor had to
       scroll back up to switch sections. Pinning it to the bottom of the
       viewport instead — the standard mobile app tab-bar pattern — keeps
       every section one tap away no matter how far down the page is. #app
       gets matching bottom padding so this bar never covers the footer or
       the last bit of page content; env(safe-area-inset-bottom) clears
       the home-indicator area on notched phones. */
    #app {
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }

    .app-topnav {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--bottom-nav-height);
        margin-top: 0;
        padding: var(--space-2) var(--space-3);
        padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
        gap: var(--space-2);
        border-top: 1px solid var(--border-subtle);
        border-bottom: none;
        background: rgba(13, 13, 20, 0.92);
        box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.4);
        z-index: var(--z-sticky);
    }

    .topnav-link span:not(.topnav-icon) {
        display: none;
    }

    .topnav-link {
        flex-direction: column;
        justify-content: center;
        padding: var(--space-1);
        gap: 0;
        border-radius: var(--radius-lg);
        position: relative;
    }

    /* Bigger, bolder icon "chips" — the old 26px/14%-opacity circles read
       as faint on a phone screen at arm's length. Larger glass-chip
       background + a stronger stroke on the SVG itself (overriding the
       inline stroke-width="2" markup, which CSS is allowed to do) gives
       each icon real presence instead of a thin outline. */
    .topnav-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: color-mix(in srgb, var(--nav-c) 18%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-c) 26%, transparent);
    }

    .topnav-link svg {
        width: 21px;
        height: 21px;
        stroke-width: 2.25;
        opacity: 1;
    }

    .topnav-link:hover .topnav-icon,
    .topnav-link:active .topnav-icon {
        transform: scale(1.08);
    }

    /* Active tab: filled color chip + lift + glow, plus a small pill
       above it, so the current section is unmistakable at a glance
       without needing the text label that's hidden on mobile. */
    .topnav-link.active {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    .topnav-link.active .topnav-icon {
        background: linear-gradient(145deg, var(--nav-c), color-mix(in srgb, var(--nav-c) 65%, #000));
        box-shadow: 0 6px 18px color-mix(in srgb, var(--nav-c) 55%, transparent);
        transform: translateY(-3px);
    }

    .topnav-link.active::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--nav-c);
        box-shadow: 0 0 6px color-mix(in srgb, var(--nav-c) 80%, transparent);
    }

    .app-main {
        padding: var(--space-4);
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    .auth-card {
        padding: var(--space-6);
    }

    .auth-social {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .table-container {
        font-size: var(--text-xs);
    }

    .table th,
    .table td {
        padding: var(--space-2) var(--space-3);
    }

    .modal {
        max-width: 100%;
        margin: var(--space-4);
    }

    .toast-container {
        left: var(--space-4);
        right: var(--space-4);
        max-width: none;
    }

    .dashboard-title {
        font-size: var(--text-xl);
    }

    .stat-value {
        font-size: var(--text-2xl);
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}

/* ========== SMALL MOBILE ========== */
@media (max-width: 480px) {
    .auth-card {
        padding: var(--space-5);
    }

    .auth-logo {
        font-size: var(--text-2xl);
    }

    .btn-lg {
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-sm);
    }

    .card {
        padding: var(--space-4);
    }

    .quick-action-card {
        padding: var(--space-4);
    }
}

/* ========== LARGE SCREENS ========== */
@media (min-width: 1440px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }
}