/* ============================================================================
   mobile.css, Mobile/iOS responsiveness ADDON
   ----------------------------------------------------------------------------
   Loaded AFTER styles.css so these rules win via source order (no !important
   needed in most cases). This file is purely additive: it overrides existing
   rules through the cascade and never edits them. Remove it by deleting the
   <link rel="stylesheet" href="mobile.css"> line in index.html, the dashboard
   reverts to its prior behaviour with zero coupling.

   Scope: every rule sits inside @media (max-width:1024px) or (max-width:480px),
   so desktop is untouched. Goal: make the new-user funnel (welcome screen →
   Add Account → account preview → payment → grid) and the core app comfortable
   on iOS/Android browsers (~360–414px wide).
   ============================================================================ */


/* ============================================================================
   A. GLOBAL MOBILE HARDENING
   ============================================================================ */

/* --- A1. iOS auto-zoom-on-focus fix (the single biggest mobile UX win) -------
   Mobile Safari zooms the whole page whenever a focused input/select/textarea
   has a computed font-size < 16px. The existing rules size the .search-box
   wrapper, not the actual <input>, so they don't prevent it. Force 16px on the
   real focusable controls. (Layout is unaffected, only the on-screen text size
   of form fields nudges up slightly on phones.) */
@media (max-width: 1024px) {
    .search-box > input,
    .date-range input,
    .select-wrapper select,
    .form-group input,
    .payment-form input,
    #ap-voucher-code,
    .voucher-row input,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* --- A2. iOS 100vh jump fix --------------------------------------------------
   Safari's collapsing address bar makes 100vh taller than the visible area,
   clipping fixed full-height elements. Use dynamic viewport units where the
   engine supports them; older engines keep the existing 100vh. */
@supports (height: 100dvh) {
    .sidebar {
        height: 100dvh;
    }
    @media (max-width: 480px) {
        .modal-content {
            max-height: 100dvh;
            height: 100dvh;
        }
    }
}

/* --- A3. Horizontal-scroll guard --------------------------------------------
   Prevent any stray wide element from causing sideways rubber-banding. */
@media (max-width: 1024px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .controls-inner,
    .filters,
    .stats-grid {
        max-width: 100%;
    }
}

/* --- A4. Safe-area insets for fixed chrome (needs viewport-fit=cover) --------
   Keep fixed header / bottom batch bar / full-screen modals clear of the
   notch and home indicator on modern iPhones. */
@media (max-width: 1024px) {
    .main-header {
        padding-left: max(var(--space-3), env(safe-area-inset-left));
        padding-right: max(var(--space-3), env(safe-area-inset-right));
    }
    .batch-bar {
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }
}
@media (max-width: 480px) {
    .modal-content {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* --- A5. Controls layout on small phones ------------------------------------ */
@media (max-width: 480px) {
    /* Stack the date range so two 130px inputs don't overflow */
    .date-range {
        flex-direction: column;
        align-items: stretch;
    }
    .date-range input {
        width: 100%;
    }
    .date-range .separator {
        padding: 2px 0;
        text-align: center;
    }

    /* Stop the current-account title from shoving the header buttons offscreen */
    .current-account h1 {
        font-size: 1.05rem;
        max-width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .header-right {
        flex-wrap: wrap;
        gap: var(--space-1);
    }
}

/* --- A6. Grid clearance above the fixed batch bar ---------------------------
   The batch bar is position:fixed at the bottom; give the grid enough bottom
   padding that its last row is never hidden behind it. Harmless when the bar
   is not shown. */
@media (max-width: 480px) {
    .video-grid {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}

/* --- A7. Touch polish -------------------------------------------------------- */
@media (max-width: 1024px) {
    .modal-body {
        -webkit-overflow-scrolling: touch;
    }
    a,
    button,
    .btn,
    .filter-group label,
    .ig-type-tab,
    .platform-pill,
    .account-item {
        touch-action: manipulation;
    }
}


/* ============================================================================
   B. ONBOARDING FUNNEL POLISH (the priority path), phones (<=480px)
   ============================================================================ */

@media (max-width: 480px) {

    /* --- B1. First impression: empty / welcome screen ----------------------
       The 400px min-height forces awkward dead space on short screens; the
       big icons and large CTA are sized for desktop. Tighten and make the
       primary CTA a full-width, thumb-friendly button. */
    .error-state,
    .empty-state {
        min-height: auto;
        padding: var(--space-8) var(--space-5) var(--space-10);
    }

    .empty-state-content,
    .welcome-content {
        max-width: 100%;
        width: 100%;
    }

    .empty-state-icon {
        width: 64px;
        height: 64px;
        margin-bottom: var(--space-4);
    }
    .empty-state-icon svg {
        width: 32px;
        height: 32px;
    }

    .welcome-icon {
        width: 72px;
        height: 72px;
    }
    .welcome-icon svg {
        width: 36px;
        height: 36px;
    }

    .welcome-content h2 {
        font-size: 1.35rem;
    }
    .welcome-content p {
        font-size: 0.95rem;
        margin-bottom: var(--space-5);
    }

    /* Make the primary first-run CTAs full-width and comfortably tappable */
    .btn-welcome-cta,
    .btn-large {
        width: 100%;
        justify-content: center;
        min-height: 52px;
        font-size: 1.05rem;
    }

    /* --- B2. Add Account modal: platform selector --------------------------
       Four pills wrapping via flex looks ragged. A clean 2-column grid keeps
       TikTok/Instagram/Facebook/Snapchat tidy and the tap targets large. */
    .platform-selector {
        padding: 14px 16px 10px;
    }
    .platform-selector-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .platform-pill {
        flex: none;
        width: 100%;
        min-height: 48px;
        padding: 10px 8px;
        position: relative;
    }
    .platform-pill .coming-soon-badge {
        position: absolute;
        top: 4px;
        right: 6px;
    }

    /* Add Account form fields: a touch more breathing room */
    .form-group {
        margin-bottom: var(--space-4);
    }

    /* --- B3. Account preview card ------------------------------------------
       Guard against overflow from long handles / wide stat rows. */
    .account-preview,
    .ap-card {
        max-width: 100%;
    }
    .ap-card {
        padding: 12px;
    }
    .ap-stats {
        flex-wrap: wrap;
    }
    .ap-name,
    .ap-handle {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* --- B4. Payment CTA / trial options -----------------------------------
       Full-width primary action, stacked voucher input. */
    .ap-continue,
    .btn-payment {
        width: 100%;
        min-height: 52px;
    }
    .ap-voucher-input,
    .voucher-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .ap-voucher-input input,
    .voucher-row input {
        width: 100%;
    }
    .ap-voucher-input button,
    .voucher-row button,
    .btn-voucher-apply {
        width: 100%;
        min-height: 44px;
    }

    /* Embedded payment modal (legacy path), if shown: fit the phone */
    .payment-modal-overlay {
        padding: 12px 10px;
    }
    .payment-modal {
        max-width: 100%;
        border-radius: 12px;
    }
    .payment-body {
        padding: 18px;
    }
    .payment-summary {
        padding: 12px;
        margin-bottom: 16px;
    }

    /* --- B5. Update modal (post-payment "Archiving @user…") ----------------
       This is the screen the user lands on after returning from Stripe.
       Keep it readable and fully visible on a phone. */
    .update-log {
        max-height: 180px;
    }
    .modal-footer {
        flex-wrap: wrap;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
        min-height: 48px;
    }

    /* --- B6. Billing modal (secondary) -------------------------------------- */
    .billing-tab {
        padding: 8px 12px;
        font-size: 0.75rem;
    }
    .billing-card {
        padding: 12px 0;
    }
    .billing-card-meta {
        gap: 6px;
    }
}


/* ============================================================================
   ROUND 2 REFINEMENTS (appended), header cluster, date filter, Next button
   These rules come later in source order and intentionally override some of
   the Round 1 rules above (e.g. the date-range stacking). Still additive.
   ============================================================================ */

/* --- R1. Header button cluster cleanup -------------------------------------
   On phones the .header-right buttons wrapped into messy right-aligned orphan
   rows. Hide the pointless grid-size toggle, drop the long profile URL, and
   let the remaining buttons flow neatly from the left. */
@media (max-width: 1024px) {
    /* The 3-icon grid size toggle is meaningless on a phone, remove clutter */
    .view-options {
        display: none !important;
    }

    /* Long profile URL wraps badly under the account name; hide on mobile */
    #account-profile-url {
        display: none;
    }

    .header-right {
        justify-content: flex-start;
        gap: var(--space-2);
    }

    /* Primary header actions share the row cleanly with comfortable tap size */
    #btn-update,
    #btn-share-access {
        flex: 1 1 auto;
        min-height: 40px;
        justify-content: center;
    }

    /* Don't let the user menu orphan against a stray left divider */
    #user-menu {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}

/* --- R2. DATE filter compact inline row (fixes Round 1 white-box regression)
   Round 1 stacked the two date inputs vertically, which rendered as a tall
   empty white box. Restore a compact inline row and let the inputs share the
   available width. */
@media (max-width: 480px) {
    /* Stack the two filter groups (Date, Sort), each full width */
    .filters {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    .filter-group {
        width: 100%;
    }

    /* Override Round 1: keep the date range a horizontal row */
    .date-range {
        width: 100%;
        flex-direction: row;
        align-items: center;
    }
    .date-range input {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
    .date-range .separator {
        padding: 0 var(--space-1);
        text-align: center;
    }

    /* Sort dropdown spans the row */
    .select-wrapper,
    #sort-select {
        width: 100%;
    }
}

/* --- R3. "Next →" button: keep it visible, and a sticky footer on phones ----
   The primary Add Account action lives in the modal footer; on phones it could
   sit below the fold so users didn't realise there was a next step. Pin the
   add-account footer and make the button full-width. The loader/disabled state
   is driven by the JS addon at the end of app.js. */
@media (max-width: 768px) {
    #add-account-modal .modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border);
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }
    #add-account-modal #btn-confirm-add-account,
    #add-account-modal #btn-submit-waitlist {
        flex: 1 1 auto;
        min-height: 48px;
    }
}

/* Spinner inside the Next button stays centered with the label */
#btn-confirm-add-account .spinner-small {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

/* ============================================================================
   ROUND 3 REFINEMENTS (appended): mobile profile pinned top-right, tidy stat
   cards, right-aligned action buttons. Additive; later source order wins.
   ============================================================================ */

/* --- R4. Profile menu pinned to the top-right of the header (phones) -------
   On phones the header stacks (header-left / header-right go full width), which
   pushed the profile avatar to the bottom. Pin it to the header top-right.
   .main-header is position:sticky, so it is the containing block for this. */
@media (max-width: 480px) {
    #user-menu {
        position: absolute;
        top: var(--space-2);
        right: max(var(--space-3), env(safe-area-inset-right));
        margin: 0;
        padding: 0;
        border-left: none;
        z-index: 960;
    }
    /* Reserve space so the account title never runs under the avatar */
    .header-left {
        padding-right: 48px;
    }
    /* Compact avatar-only control: drop the name + chevron on phones */
    #user-menu .user-name,
    #user-menu .user-info-header > svg {
        display: none;
    }
    #user-menu .user-info-header {
        padding: 2px;
    }
}

/* --- R5. Stats summary as tidy cards (phones) ------------------------------
   The inline "value LABEL" items wrapped into an ugly run-on. Lay them out as
   compact cards (value over label); the long Date Range spans the full width. */
@media (max-width: 600px) {
    .stats-bar {
        padding: var(--space-3) var(--space-4);
    }
    .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }
    .stat-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: var(--space-2) var(--space-3);
    }
    /* Date Range value is long, give it the full width on the top row */
    .stat-item:nth-child(2) {
        grid-column: 1 / -1;
        order: -1;
    }
    .stat-item .stat-value {
        font-size: 1.05rem;
        line-height: 1.2;
    }
    .stat-item .stat-label {
        font-size: 0.62rem;
    }
}

/* --- R6. Stats / Export / Backup aligned right on phones -------------------- */
@media (max-width: 600px) {
    .controls-actions {
        justify-content: flex-end;
    }
}