/* =============================================================================
   CASHLEX — Responsive Layer v2
   Loaded LAST so it overrides. Fixes: mobile overflow, text overlap,
   forced zoom, table breakout, tiny tap targets, cramped spacing.
   Breakpoints: 1024 (tablet/desktop split), 768 (tablet), 480 (phone), 360 (small phone)
   ============================================================================= */

/* ---- Global safety: never allow horizontal scroll / zoom-out ---- */
* { -webkit-tap-highlight-color: transparent; }

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Inputs must be >=16px font on iOS or Safari force-zooms on focus */
input, select, textarea, button {
    font-size: 16px;
}

/* Long text / codes never overflow their container */
.num, code, .table td, .table th,
.stat-tile-value, .topbar-title, .page-title,
.card, .form-input, td, th {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Images and SVGs scale down */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* =============================================================================
   TABLES — the #1 mobile breakout culprit.
   Wrap in horizontal scroll on small screens instead of blowing the layout.
   ============================================================================= */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-card);
}

.table { min-width: 560px; }  /* forces the scroll rather than squashing columns */

@media (max-width: 480px) {
    .table { min-width: 520px; font-size: 0.8125rem; }
    .table th, .table td { padding: 0.625rem 0.75rem; }
}

/* =============================================================================
   TABLET & BELOW  (<= 1024px)
   ============================================================================= */
@media (max-width: 1024px) {
    .main-content { padding: var(--space-4); }

    /* Any 2/3/4 col grid collapses sensibly */
    .settings-grid { grid-template-columns: 1fr 1fr; }

    /* Admin two-column edit layouts stack */
    .admin-content > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================================================
   PHONE  (<= 768px)
   ============================================================================= */
@media (max-width: 768px) {
    .main-content { padding: var(--space-4) var(--space-3); }

    .page-title  { font-size: 1.25rem; }
    .page-subtitle { font-size: 0.8125rem; }
    .page-header { margin-bottom: var(--space-4); }

    /* Force EVERY multi-column inline grid to single column on phones.
       This catches the dashboard stat rows, admin cards, forms, etc. */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
    }

    /* Except: keep 2-up stat tiles where they read fine */
    .stat-row-2 { grid-template-columns: 1fr 1fr !important; }

    .settings-grid { grid-template-columns: 1fr !important; }

    /* Flex rows that hold title + button wrap cleanly */
    .section-hd,
    div[style*="justify-content:space-between"] {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    /* Buttons in headers go full width when wrapped */
    .page-header .btn,
    .section-hd .btn { flex: 1 1 auto; }

    /* Cards get comfortable padding, never cramped */
    .card-body { padding: var(--space-4); }

    /* Modal fills most of the screen, scrolls internally */
    .modal {
        width: calc(100vw - var(--space-6));
        max-width: 100%;
        max-height: 88vh;
        overflow-y: auto;
    }

    /* Topbar tighter */
    .topbar { padding: 0 var(--space-4); gap: var(--space-3); }
    .topbar-title { font-size: 0.9375rem; }
}

/* =============================================================================
   SMALL PHONE  (<= 480px)
   ============================================================================= */
@media (max-width: 480px) {
    :root { --topbar-height: 56px; }

    .main-content { padding: var(--space-3) var(--space-3) var(--space-8); }

    /* Stat tiles: single column, big and legible, minimal scroll */
    .stat-row-2,
    [style*="repeat(2"],
    [style*="repeat(3"],
    [style*="repeat(4"] {
        grid-template-columns: 1fr !important;
    }

    .stat-tile { padding: var(--space-4); }
    .stat-tile-value { font-size: 1.375rem; }
    .stat-tile-label { font-size: 0.7rem; }

    /* Tap targets >= 44px for accessibility.
       NOTE: .theme-toggle is deliberately EXCLUDED — it's a fixed 44x24 pill;
       stretching it breaks the thumb position. Its tap area is enlarged
       with a pseudo-element below instead. */
    .btn, .pagination-btn, .nav-item, .topbar-icon-btn {
        min-height: 44px;
    }
    .btn-sm { min-height: 38px; }

    /* Only explicit full-width buttons stretch. Blanket-stretching every
       .btn broke inline buttons (tile Withdraw links, table actions, Copy). */
    .btn-full { width: 100%; }

    /* Enlarge theme-toggle tap area without distorting the pill */
    .theme-toggle { position: relative; }
    .theme-toggle::after {
        content: '';
        position: absolute;
        inset: -10px;
    }

    /* Sidebar slightly narrower so it doesn't cover whole screen */
    .sidebar { width: 82vw; max-width: 300px; }

    /* Forms: labels and inputs full width, never side-by-side */
    .form-row { flex-direction: column; }

    /* Reduce heading sizes so nothing overlaps */
    .page-title { font-size: 1.125rem; }
    h1 { font-size: 1.125rem; }
    h2 { font-size: 1rem; }

    /* Pill / badge wrapping */
    .badge { white-space: nowrap; }

    /* Color swatches wrap nicely */
    .theme-swatch-grid { gap: var(--space-2); }
    .theme-swatch { width: 44px; height: 44px; }
}

/* =============================================================================
   VERY SMALL PHONE  (<= 360px)
   ============================================================================= */
@media (max-width: 360px) {
    .main-content { padding: var(--space-2) var(--space-2) var(--space-8); }
    .card-body { padding: var(--space-3); }
    .stat-tile-value { font-size: 1.25rem; }
    .sidebar-logo-text { font-size: 1.1rem; }
    .table { min-width: 480px; }
}

/* =============================================================================
   LANDSCAPE PHONE — keep sidebar scrollable, content usable
   ============================================================================= */
@media (max-height: 480px) and (orientation: landscape) {
    .sidebar { overflow-y: auto; }
    .sidebar-nav { padding: var(--space-2) 0; }
}

/* =============================================================================
   SAFE AREA (notched phones) — respect the notch/home indicator
   ============================================================================= */
@supports (padding: max(0px)) {
    .topbar    { padding-left: max(var(--space-4), env(safe-area-inset-left));
                 padding-right: max(var(--space-4), env(safe-area-inset-right)); }
    .main-content { padding-bottom: max(var(--space-8), env(safe-area-inset-bottom)); }
    .sidebar   { padding-top: env(safe-area-inset-top); }
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =============================================================================
   v2.1 — Fine-tuning to match the polished mobile design
   (portfolio hero, quick-launch modules, earnings-by-source, referral card)
   ============================================================================= */

@media (max-width: 768px) {
    /* Portfolio / earnings hero — full width, generous */
    .earnings-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .earnings-hero-right { text-align: left; width: 100%; }
    .earnings-hero-value { font-size: 1.875rem; }

    /* Quick-launch module rows: comfortable single-column list */
    .quick-launch-item,
    .module-row {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4);
        min-height: 60px;
    }

    /* Earnings-by-source rows: label left, amount right, never overlap */
    .earning-source-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }
    .earning-source-row .num { flex-shrink: 0; text-align: right; }

    /* Referral link box: input + copy button stack cleanly */
    .referral-link-box {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    .referral-link-box .btn { width: 100%; }

    /* Section headers with count/action stay on one readable line */
    .section-hd-title { font-size: 0.9375rem; }
}

@media (max-width: 480px) {
    /* Balance tiles: 2-up looks great on the portfolio grid (matches screenshot) */
    .balance-row { grid-template-columns: 1fr 1fr !important; }

    /* But single-value metric cards go full width */
    .metrics-row { grid-template-columns: 1fr !important; }

    /* Quick-launch icons a touch smaller to fit text */
    .quick-launch-item .task-icon,
    .module-row .balance-tile-icon { width: 40px; height: 40px; }

    /* Recent activity search + button: stack */
    .activity-search-row {
        flex-direction: column;
        gap: var(--space-2);
    }
    .activity-search-row .btn { width: 100%; }

    /* Copy-link button full width under the link */
    .copy-link-btn { width: 100%; }
}

/* Two-column balance stays 2-up even on the smallest phones (portfolio look) */
@media (max-width: 360px) {
    .balance-row { grid-template-columns: 1fr 1fr !important; gap: var(--space-2) !important; }
    .balance-tile { padding: var(--space-3); }
    .balance-tile-value { font-size: 0.9375rem; }
}

/* =============================================================================
   v3 — ALIGNMENT HARDENING (topbar, theme toggle, icons, inputs)
   ============================================================================= */

/* Topbar: every child vertically centered regardless of individual heights */
.topbar { align-items: center; }
.topbar-actions { align-items: center; }
.topbar-actions > * { flex-shrink: 0; }

/* Theme toggle: never stretched by parent flex/grid */
.theme-toggle {
    align-self: center;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px;
    width: 44px !important;
    box-sizing: border-box;
}
.theme-toggle-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle-thumb svg { display: block; }

/* All icon-only buttons: flex-centered SVGs, no baseline drift */
.topbar-icon-btn svg,
.modal-close svg,
.congrats-close svg,
.input-toggle-btn svg {
    display: block;
}
.modal-close,
.congrats-close {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Left input icons: perfectly centered against any input height */
.input-wrap { display: block; }
.input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inputs are consistent height so icon math never drifts */
.form-input, .form-select {
    min-height: 46px;
    box-sizing: border-box;
}

/* Buttons: center content, consistent icon alignment */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.2;
}
.btn svg { flex-shrink: 0; display: block; }

/* Badge/pill vertical rhythm */
.badge, .currency-pill { line-height: 1; }

/* Subtle glass only on SMALL surfaces. Tall cards/forms must NOT use
   backdrop-filter — on mobile it truncates content taller than the viewport. */
@media (min-width: 769px) {
    .balance-tile, .stat-tile, .metric-card, .congrats-banner {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* Phone: keep the two welcome buttons side by side if they fit, stack under 480 */
@media (max-width: 768px) {
    /* Auth card: comfortable width with breathing room */
    .auth-card { width: 100%; max-width: 440px; margin: 0 auto; }

    /* Balance tiles keep the 2-up portfolio look */
    .balance-row { grid-template-columns: 1fr 1fr !important; }
    .balance-tile-label { font-size: 0.7rem; }
    .balance-tile-value { font-size: 0.9375rem; }
}

@media (max-width: 400px) {
    .balance-tile-value { font-size: 0.875rem; }
    .earnings-hero-value { font-size: 1.5rem; }
}

/* =============================================================================
   v10 — ADMIN 100% MOBILE LAYER
   Every admin page usable on any phone: tables scroll (never crush), filter
   rows wrap, buttons fit, topbar never overflows, no horizontal page scroll.
   ============================================================================= */

/* Wide tables SCROLL inside their card instead of crushing columns.
   (min-width forces the horizontal scroll that .table-wrap provides.) */
@media (max-width: 900px) {
    .table-wrap .table { min-width: 620px; }
    .table th, .table td { padding: .5rem .625rem; font-size: .75rem; }
    .table th { white-space: nowrap; }
    .table .btn-sm { padding: 4px 10px; font-size: .68rem; }
}

@media (max-width: 768px) {
    /* Nothing may push the page wider than the phone */
    .admin-content { overflow-x: clip; }
    .admin-content > * { max-width: 100%; }

    /* EVERY inline flex row in admin wraps (filters, header rows, button groups) */
    .admin-content div[style*="display:flex"],
    .admin-content form[style*="display:flex"] {
        flex-wrap: wrap;
    }
    /* Inputs & selects inside those rows share the width nicely */
    .admin-content form[style*="display:flex"] .form-input,
    .admin-content form[style*="display:flex"] .form-select {
        flex: 1 1 170px;
        min-width: 0;
    }
    .admin-content form[style*="display:flex"] .btn { flex: 1 1 auto; }

    /* Bonus thresholds: keep the two inputs + × on ONE line (exception to
       the global 1fr collapse — three stacked rows per threshold is worse) */
    .threshold-row {
        grid-template-columns: 1fr 1fr auto !important;
        gap: var(--space-2) !important;
    }

    /* Form cards breathe less, headings scale down */
    .admin-form-card h2 { font-size: 1rem; }

    /* Full-width primary actions in admin forms */
    .admin-form-card .btn-lg { width: 100%; }

    /* Dashboard chart: tighter labels so 7 bars fit any width */
    .adm-chart { gap: 4px; height: 130px; }
    .adm-bar-val { display: none; }
}

@media (max-width: 480px) {
    /* Topbar: title ellipsis, hide the username text, keep the toggle */
    .admin-topbar-title {
        font-size: .875rem;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        min-width: 0; flex: 1;
    }
    .admin-topbar .admin-topbar-user { display: none; }

    /* Quick-action chips + skin picker stay 2-up but shrink text */
    .adm-qa { font-size: .68rem; min-height: 46px; }
    .skin-name { font-size: .65rem; }

    /* Table action buttons stack cleanly when the cell is tight */
    .table td[style*="white-space:nowrap"] { white-space: normal !important; }
}

/* Tablet band (769–1024): admin two-pane layouts stack even when nested */
@media (min-width: 769px) and (max-width: 1024px) {
    .admin-content [style*="grid-template-columns:1fr 3"],
    .admin-content [style*="grid-template-columns: 1fr 3"] {
        grid-template-columns: 1fr !important;
    }
}