/* ====================================================================
   MAZE SYSTEMS — Mobile Fixes (consolidated)
   Targets specific overflow & cut-off bugs at 375–480px viewports.
   Loaded LAST after all page CSS so these win specificity.
   ==================================================================== */


/* ────────────────────────────────────────────────────────────────────
   Global guard — kill horizontal overflow at the root
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html, body {
        /* `height: 100%` from dashboard.css + `overflow-x: hidden` together
           promote body to a fixed-height scroll container — buggy on iOS
           because the address bar resize doesn't update body height,
           clipping content. Force normal document-level scroll. */
        height: auto !important;
        min-height: 100vh;
        overflow-x: clip !important;
        overflow-y: visible !important;
        max-width: 100vw;
    }

    /* Stop background orbs from creating phantom horizontal scroll. */
    .bg-container,
    .floating-orbs,
    .side-glow,
    .grid-perspective {
        max-width: 100vw !important;
        overflow: hidden !important;
        pointer-events: none;
    }

    /* Any element accidentally wider than viewport (images, iframes, code). */
    img, video, iframe, canvas, table, pre, code {
        max-width: 100% !important;
    }
}


/* ────────────────────────────────────────────────────────────────────
   PUBLIC SITE — index.html
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Hero stats: 4 columns × 1fr + 1.5rem gap = ~390px on 375px viewport.
       Force 2×2 so cards keep readable size. */
    .hero-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        margin-top: 2.5rem !important;
    }

    .stat-flip {
        height: 90px !important;
    }

    /* Hero h1 was clamping but headings at 375px overflow if fluid scale
       picks the upper bound. Cap explicitly. */
    .hero h1 {
        font-size: clamp(1.7rem, 9vw, 2.2rem) !important;
        line-height: 1.1 !important;
    }

    .hero-subtitle {
        font-size: clamp(0.95rem, 3.8vw, 1.1rem) !important;
        padding: 0 4px;
    }

    /* Section titles: long words like "high-probability" wrap fine, but
       gradient-text spans sometimes blow out. Allow soft-wrap. */
    .section-title,
    .beacon-title {
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Beacon stats: 3 columns can squish at 375. */
    .beacon-stats {
        gap: 1rem !important;
    }
    .beacon-stat-value {
        font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
    }
    .beacon-stat-label {
        font-size: 0.7rem !important;
    }

    /* Pricing compare table — already has overflow-x:auto. Make scroll
       affordance visible. */
    .pricing-compare {
        scroll-snap-type: x mandatory;
    }

    /* FAQ items: long answers shouldn't break the card padding. */
    .faq-question,
    .faq-answer {
        word-break: break-word;
    }

    /* Contact form fields: keep inputs from breaking out via padding. */
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Footer columns stack — usually they do, this enforces it. */
    .footer-grid,
    .footer-columns {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* Even tighter — iPhone SE / small Android (≤360px) */
@media (max-width: 360px) {
    .hero-stats {
        gap: 0.5rem !important;
    }
    .stat-flip {
        height: 80px !important;
    }
    .stat-value,
    .stat-back-value {
        font-size: 1.1rem !important;
    }
    .stat-label,
    .stat-back-label {
        font-size: 0.65rem !important;
    }
}


/* ────────────────────────────────────────────────────────────────────
   DASHBOARD — generic page-header & containers
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Main content area: prevent it being shoved by absolute-positioned
       sidebar or background elements.
       NOTE: `overflow-x: clip` instead of `hidden` — `hidden` would
       auto-promote `overflow-y` to `auto`, turning .dashboard-main into
       a nested scroll container and breaking natural body-level swipe. */
    .dashboard-main {
        max-width: 100vw;
        overflow-x: clip;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Page headers — both the standard and merge variants — wrap cleanly. */
    .page-header,
    .merge-page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .page-header > div:first-child,
    .merge-page-header > div:first-child {
        min-width: 0;
        max-width: 100%;
    }

    .page-header h1,
    .merge-page-header h1 {
        font-size: 1.25rem !important;
        line-height: 1.25 !important;
        word-break: break-word;
    }

    .page-subtitle {
        font-size: 0.85rem !important;
    }

    /* Page actions: stack as full-width buttons when wrapping starts to fail. */
    .page-actions,
    .page-header-actions {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .page-actions > .btn,
    .page-header-actions > .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0 !important;
        justify-content: center;
    }
}

/* Stack action buttons full-width on tiny screens. */
@media (max-width: 380px) {
    .page-actions > .btn,
    .page-header-actions > .btn {
        flex: 1 1 100% !important;
    }
}


/* ────────────────────────────────────────────────────────────────────
   RESOURCES — dashboard viewer (PDF.js + video)
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Card grid was minmax(280px, 1fr) — at 375 with side padding the
       card itself ends up at ~331px which fits, but reduce internal pad. */
    .res-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .res-card {
        padding: 14px !important;
    }
    .res-card-title { font-size: 14px !important; }
    .res-card-desc  { font-size: 12.5px !important; }

    /* Viewer overlay: full screen, no padding, no rounded corners. */
    .res-viewer-overlay {
        padding: 0 !important;
    }
    .res-viewer {
        border-radius: 0 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;  /* respects mobile chrome */
        height: 100vh;
        height: 100dvh;
    }
    .res-viewer-head {
        padding: 12px 14px !important;
        gap: 8px !important;
    }
    .res-viewer-head h3 {
        font-size: 14px !important;
    }
    .res-viewer-actions a span {
        display: none;  /* keep just the icon to save width */
    }
    .res-viewer-actions a,
    .res-viewer-actions button {
        padding: 7px 9px !important;
    }

    /* PDF.js canvas pages: scale to viewport width, never overflow. */
    .pdf-pages {
        padding: 8px !important;
        gap: 10px !important;
    }
    .pdf-page-wrap {
        width: 100%;
        max-width: 100%;
    }
    .pdf-page-canvas {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
    }

    /* Video viewer: fill width, fit height. */
    .video-viewer video {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 60px);
        max-height: calc(100dvh - 60px);
    }
}


/* ────────────────────────────────────────────────────────────────────
   RESOURCES — backoffice management modal
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Source toggle: keep two tabs side-by-side but shrink padding. */
    .source-toggle {
        gap: 6px !important;
    }
    .source-radio {
        padding: 9px 10px !important;
        font-size: 12.5px !important;
    }
    .source-radio span {
        gap: 6px !important;
    }

    /* Plans checkboxes wrap nicely. */
    .plan-checkbox-group {
        gap: 6px !important;
    }
    .plan-checkbox-group label {
        padding: 5px 10px !important;
        font-size: 12.5px !important;
    }

    /* File input picker fits container — Safari/iOS likes overflow. */
    input[type="file"].form-control {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
    }

    /* Resources backoffice table → card mode on mobile.
       7 columns can't fit; horizontal scroll hides the actions. Reflow
       each row as a stacked card so the action buttons are always visible. */
    .resources-table,
    .resources-table tbody,
    .resources-table tr,
    .resources-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .resources-table thead {
        display: none !important;  /* headers redundant once cards take over */
    }
    .resources-table tr {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 14px !important;
        margin-bottom: 12px;
    }
    .resources-table tr.inactive {
        opacity: 0.55;
    }
    .resources-table td {
        border: 0 !important;
        padding: 6px 0 !important;
        text-align: left !important;
        white-space: normal;
    }
    /* Drag handle (column 1) — useless on mobile (no native drag), hide. */
    .resources-table tr td:first-child {
        display: none !important;
    }
    /* Title row (column 2) — bigger heading. */
    .resources-table tr td:nth-child(2) strong {
        font-size: 15px;
        display: block;
        margin-bottom: 4px;
    }
    /* Type badge inline next to category in compact rows. */
    .resources-table tr td:nth-child(3),
    .resources-table tr td:nth-child(4),
    .resources-table tr td:nth-child(5),
    .resources-table tr td:nth-child(6) {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        margin-right: 10px;
        margin-top: 2px;
        width: auto !important;
    }
    /* Clicks count — prefix with label so it's clear without the header. */
    .resources-table tr td:nth-child(6)::before {
        content: "Clicks: ";
        color: var(--text-dim, #888);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    /* Actions — full-width row of equal-flex buttons. */
    .resources-table tr td:last-child {
        display: block !important;
        margin-top: 10px;
        padding-top: 10px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    /* .res-actions handled in backoffice/resources.css (with text labels in JS) */
}


/* ────────────────────────────────────────────────────────────────────
   PLANS BACKOFFICE — billing periods (now 4: Daily, Weekly, Monthly, Annual)
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Each .billing-item content can overflow when the modal padding is
       tight. plans.css already collapses to 1col but tighten paddings. */
    .billing-item {
        padding: 12px !important;
        margin-bottom: 8px !important;
    }
    .billing-header {
        margin-bottom: 10px !important;
    }
    .billing-type {
        font-size: 13px !important;
    }
    .billing-fields .form-control {
        padding: 7px 9px !important;
        font-size: 13px !important;
    }

    /* Plan modal Stripe price tag was overflowing in card view. */
    .stripe-price-tag {
        word-break: break-all;
        font-size: 11px !important;
    }
}


/* ────────────────────────────────────────────────────────────────────
   FORMS — generic catch-all so inputs never break out
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .form-control,
    input[type="text"]:not(.compact),
    input[type="email"]:not(.compact),
    input[type="url"]:not(.compact),
    input[type="number"]:not(.compact),
    input[type="password"]:not(.compact),
    input[type="search"]:not(.compact),
    select:not(.compact),
    textarea:not(.compact) {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Form rows in admin modals — single column. */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}


/* ────────────────────────────────────────────────────────────────────
   GENERIC ACTION CLUSTERS — across the whole dashboard / backoffice
   Catches button rows that pile up at the end of cards/rows and get
   cropped on small viewports. Last-cell action cells in any table-card
   reflow are also covered.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* Generic clusters: 2 columns of equal-flex buttons. */
    .actions,
    .plan-actions,
    .card-actions,
    .mt5-account-actions,
    .eav-release-actions,
    .action-buttons,
    .data-table .actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: stretch !important;
    }

    /* Buttons inside any cluster: full-width, icon + label, no overflow. */
    .actions > button,
    .actions > .btn,
    .plan-actions > button,
    .plan-actions > .btn,
    .card-actions > button,
    .card-actions > .btn,
    .mt5-account-actions > button,
    .mt5-account-actions > .btn,
    .eav-release-actions > button,
    .eav-release-actions > .btn,
    .action-buttons > button,
    .action-buttons > .btn,
    .btn-action,
    .btn-icon,
    .btn-edit,
    .btn-delete {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 8px !important;
        font-size: 12.5px !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Bulk-actions toolbar (users-management) — wraps to 2 cols on mobile.
       Keeps the "selected count" full-width above the buttons. */
    .bulk-actions-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px !important;
    }
    .bulk-actions-bar .bulk-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100%;
    }
    .bulk-actions-bar .bulk-btn {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px;
    }
    .bulk-actions-bar .bulk-btn.clear {
        grid-column: span 2;  /* Clear takes the full bottom row */
    }

    /* Plan actions on the plan card already get reflow from plans.css.
       Tighten further so order-up/down + edit + delete fit a 2x2 grid. */
    .plan-order-controls {
        display: contents !important;  /* dissolve so children join the grid */
    }

    /* Pagination controls — common across users, audit, history. Stack
       cleanly on mobile so prev/next never overflow. */
    .pagination-btn {
        min-width: 36px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}

/* Tiny screens (≤360px): collapse 2-col action grids to single column —
   guarantees nothing is ever cropped, no matter how long the labels. */
@media (max-width: 360px) {
    .actions,
    .plan-actions,
    .card-actions,
    .mt5-account-actions,
    .eav-release-actions,
    .action-buttons,
    .data-table .actions,
    .bulk-actions-bar .bulk-buttons {
        grid-template-columns: 1fr !important;
    }
    .bulk-actions-bar .bulk-btn.clear {
        grid-column: auto !important;
    }
}


/* ────────────────────────────────────────────────────────────────────
   GENERIC TABLE → SCROLLABLE WITH STICKY ACTIONS COLUMN
   For tables WITHOUT bespoke mobile rules. Bespoke:
     - .signals-table (abbreviated headers — dashboard/trades)
     - .history-table* (history-table-container)
     - .users-table (has dedicated .user-cards-mobile alternative)
     - .resources-table (rendered as cards now via JS)
   This targets the long-tail: backoffice .data-table, .audit-table,
   .applications-table, .tickets-table, .referrals-table, .eav-downloads-table.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .data-table,
    .audit-table,
    .applications-table,
    .tickets-table,
    .referrals-table,
    .eav-downloads-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table thead,
    .audit-table thead,
    .applications-table thead,
    .tickets-table thead,
    .referrals-table thead,
    .eav-downloads-table thead,
    .data-table tbody,
    .audit-table tbody,
    .applications-table tbody,
    .tickets-table tbody,
    .referrals-table tbody,
    .eav-downloads-table tbody {
        display: table;
        width: max-content;
        min-width: 100%;
    }

    /* Sticky last column (actions) — always reachable during horizontal scroll. */
    .data-table td:last-child,
    .data-table th:last-child,
    .audit-table td:last-child,
    .audit-table th:last-child,
    .applications-table td:last-child,
    .applications-table th:last-child,
    .tickets-table td:last-child,
    .tickets-table th:last-child {
        position: sticky;
        right: 0;
        background: rgba(15, 16, 20, 0.95);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        z-index: 1;
        box-shadow: -8px 0 12px -8px rgba(0, 0, 0, 0.6);
    }

    /* Wrappers that already exist (.table-container, .table-responsive,
       .audit-table-container) — just make sure they actually scroll. */
    .table-container,
    .table-responsive,
    .audit-table-container,
    .history-table-wrapper {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ────────────────────────────────────────────────────────────────────
   PRESET CARDS / EA SETTINGS — preset-card has tag clusters
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .preset-card .actions {
        flex-wrap: wrap !important;
    }
    .preset-card .actions > button,
    .preset-card .actions > .btn {
        flex: 1 1 calc(50% - 4px) !important;
    }
}


/* ────────────────────────────────────────────────────────────────────
   SAFE-AREA insets — iOS notched phones
   ──────────────────────────────────────────────────────────────────── */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .res-viewer-head {
            padding-top: max(12px, env(safe-area-inset-top)) !important;
            padding-left: max(14px, env(safe-area-inset-left)) !important;
            padding-right: max(14px, env(safe-area-inset-right)) !important;
        }
        .dashboard-main {
            padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        }
    }
}