/* ==========================================================================
   LogicFlux — Mobile-First Refinement Layer
   Loaded LAST, after style.css / admin.css, so it wins on cascade order.

   The two base sheets are desktop-first (13 of 14 queries are max-width).
   Rather than invert 8,000 lines, this layer establishes a correct small-
   screen baseline and repairs the specific places where the desktop layout
   breaks below 768px. Everything here is additive and safe to revert by
   removing this one <link>.
   ========================================================================== */

/* ---------- 1. Baseline: nothing may escape the viewport ---------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

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

/* Flex/grid children default to min-width:auto, which makes long unbreakable
   strings (license keys, MT5 account ids, hashes) force the parent wider than
   the screen. This is the single most common cause of mobile side-scroll. */
.card, .panel, .stat-card, .strategy-card,
[class*="-grid"] > *, [class*="-row"] > * {
    min-width: 0;
}

/* Long tokens/keys wrap instead of pushing the layout out */
code, pre, .license-key, .mono, [class*="key"], [class*="hash"] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---------- 2. Tables: give the wrappers that the markup already uses
       actual scrolling behaviour.
       .table-scroll is styled in admin.css (inside @768 only), but
       .table-responsive and .data-table-wrapper appear in the markup with
       NO rules defined anywhere — so those tables overflowed the page. ---------- */
.table-responsive,
.data-table-wrapper,
.table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* admin.css sets `table { min-width: 600px }` at <=768px. That is correct
   ONLY inside a scroll container; on a bare table it forces the whole page
   to 600px on a 375px screen. Re-scope it. */
@media (max-width: 768px) {
    table {
        min-width: 0;
    }
    .table-responsive > table,
    .data-table-wrapper > table,
    .table-scroll > table {
        min-width: 600px;
    }
}

/* ---------- 3. Top navigation.
       The zoom and theme toggles used to be hidden here: at 375px
       .topnav-actions measured 261px and overflowed by 59px, clipping the
       then-full-width "Login/Register" button. That button has since become
       icon-only, which frees enough room to keep both toggles in the bar and
       match the client/login header. The logo is allowed to shrink first so
       the controls stay whole. ---------- */
@media (max-width: 600px) {
    .topnav-actions {
        gap: 6px;
        min-width: 0;
        flex-shrink: 0;
    }
    .topnav-brand {
        min-width: 0;
        flex-shrink: 1;
    }
    /* Sized down from 42px so the icon buttons read as secondary to the
       hamburger. The child selector also outranks the 44px coarse-pointer
       rule in section 6, which would otherwise win on touch devices.
       34px still clears the 24px WCAG 2.2 AA target minimum. */
    .topnav-actions > .zoom-toggle-btn,
    .topnav-actions > .theme-toggle-btn,
    .topnav-actions > .btn.btn-icon-only {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        padding: 0;
    }
    .topnav-actions > .zoom-toggle-btn svg,
    .topnav-actions > .theme-toggle-btn svg,
    .topnav-actions > .btn.btn-icon-only svg {
        width: 15px;
        height: 15px;
        /* Without this the flex button compresses the glyph: the Client Area
           icon rendered at 9px wide against its 15px siblings. */
        flex-shrink: 0;
    }
    .topnav-actions > .zoom-toggle-btn .zoom-badge {
        font-size: 8px;
    }
    .topnav-actions .btn {
        padding: 8px 12px;
        font-size: 12.5px;
        white-space: nowrap;
    }
    .brand-logo-img {
        height: 32px;
        max-width: 150px;
    }
}

/* Below ~360px the four control buttons each hold a 44px minimum touch target
   (176px plus gaps), leaving under 100px for the wordmark. Cap the brand box
   and let the logo scale inside it: a fixed height with a width cap squashed
   the aspect ratio, and overflow:hidden truncated it mid-letter. */
@media (max-width: 360px) {
    .topnav-brand {
        max-width: 88px;
    }
    .brand-logo-img {
        height: auto;
        max-height: 30px;
        max-width: 100%;
    }
    .topnav-actions {
        gap: 3px;
    }
    .topnav-inner,
    .topnav .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ---------- 4. Dropdowns / popovers pinned to the right edge ----------
   Fixed 230–340px widths overflow a 375px screen, and .notif-dropdown
   additionally uses right:-60px which pushes it off-screen entirely. */
@media (max-width: 640px) {
    .nav-user-dropdown,
    .notif-dropdown,
    [class*="-dropdown"] {
        width: min(320px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px);
        right: 0 !important;
    }
}

/* ---------- 5. Grids the base sheets never collapsed ---------- */
@media (max-width: 480px) {
    .strategy-card-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-telemetry-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-counter-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- 6. Touch ergonomics ----------
   Apply only to coarse pointers so desktop density is untouched. */
@media (pointer: coarse) {
    .btn,
    .nav-link,
    .topnav-hamburger,
    .theme-toggle-btn,
    .zoom-toggle-btn,
    button:not(.btn-sm),
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    .btn-sm {
        min-height: 36px;
    }
    /* Table action buttons stay compact — they live in a scroll container */
    td .btn,
    td button {
        min-height: 32px;
        min-width: 32px;
    }
}

/* ---------- 7. Form fields on phones ----------
   Fields keep a normal 14px size (they were forced to 16px, which made every
   select look oversized). iOS zooms into fields under 16px when tapped; the
   base templates stop that on iPhone/iPad with a viewport setting instead. */
@media (max-width: 768px) {
    input, select, textarea,
    .form-input, .form-control, .table-filter-select {
        font-size: 14px;
    }
}

/* ---------- 8. Notched devices: keep fixed chrome out of the safe areas ---------- */
@supports (padding: max(0px)) {
    .topnav, .topbar, .mobile-drawer {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .mobile-drawer {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ---------- 9. Respect reduced-motion (several animated orbs/tickers) ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Bigger logo on phones ----------
   The header lost 44px a side to padding, leaving the wordmark ~8px tall.
   Tighter gutters let the brand fill the space up to the action buttons. */
@media (max-width: 600px) {
    .topnav-inner {
        padding-left: 4px;
        padding-right: 4px;
    }
    .topnav-brand {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 8px;
    }
    .topnav .brand-logo-img {
        width: auto;
        height: auto;
        max-height: 44px;
        max-width: 100%;
    }
}