/* ===================================================================
   mobile.css - Mobile app-shell layer
   Loaded last so it can refine page styles for the phone form factor.
   Everything here is behind a max-width query: desktop is untouched.
   Breakpoint: 900px (matches MobileTabBar / MainLayout shell rules).
   =================================================================== */

@media (max-width: 900px) {

    /* ── Shell basics ────────────────────────────────────────────── */

    /* Body scroll lock while the "More" drawer is open.
       Deliberately no touch-action:none here - that would also kill
       scrolling inside the drawer itself. */
    body.mobile-drawer-open {
        overflow: hidden;
    }

    /* Wide tables scroll inside their own wrapper, so the frame just
       needs to stay inside the viewport. No overflow clipping: the
       chart page renders position:fixed inside this element. */
    .content-frame {
        max-width: 100vw;
    }

    /* iOS zooms the viewport when a focused input is under 16px */
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ...except the chart's compact toolbar controls, where 16px text overflows
       the control itself. Full-size symbol search lives in the search sheet. */
    .chart-toolbar .symbol-input,
    .chart-toolbar input,
    .chart-toolbar select {
        font-size: 12px !important;
    }

    /* Comfortable touch targets for controls that were sized for a mouse */
    button,
    .btn,
    select,
    a.btn {
        min-height: 38px;
    }

    /* Fixed/overlay UI has to clear the bottom tab bar */
    .alert-notification-container,
    .toast-container,
    .floating-action,
    .earnings-drawer,
    .detail-drawer {
        margin-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* ── Horizontally scrollable data tables ─────────────────────
       Trading tables have more columns than a phone can show. Rather than
       hiding data, they scroll sideways with the symbol column pinned. */
    .table-responsive,
    .table-container,
    .trades-table-wrapper,
    .positions-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    .table-responsive::-webkit-scrollbar,
    .table-container::-webkit-scrollbar,
    .trades-table-wrapper::-webkit-scrollbar {
        height: 4px;
    }

    .table-responsive::-webkit-scrollbar-thumb,
    .table-container::-webkit-scrollbar-thumb,
    .trades-table-wrapper::-webkit-scrollbar-thumb {
        background: rgba(0, 229, 204, 0.35);
        border-radius: 2px;
    }

    /* ── Page headers: stack, shrink, drop decoration ────────────── */
    .page-header,
    .page-header-row,
    .dashboard-header,
    .grid-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }

    .page-header h1,
    .page-header-row h1,
    .dashboard-title {
        font-size: 20px !important;
    }

    .page-subtitle,
    .subtitle,
    .header-subtitle {
        font-size: 12px !important;
    }

    /* Filter rows become a single swipeable chip strip */
    .filter-bar,
    .header-filters,
    .date-range-buttons,
    .time-chips,
    .table-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
    }

    .filter-bar::-webkit-scrollbar,
    .header-filters::-webkit-scrollbar,
    .date-range-buttons::-webkit-scrollbar,
    .time-chips::-webkit-scrollbar,
    .table-filters::-webkit-scrollbar {
        display: none;
    }

    .date-range-buttons .date-btn,
    .date-range-buttons button {
        flex: 0 0 auto;
    }

    /* ── EARNINGS INTELLIGENCE (/earnings) ───────────────────────── */
    .earnings-intelligence-container {
        padding: 0 !important;
    }

    .command-strip {
        flex-wrap: wrap;
        gap: 8px;
        position: sticky;
        /* below the fixed app header, not underneath it */
        top: calc(52px + env(safe-area-inset-top, 0px));
        z-index: 20;
        background: var(--bg-base, #06080c);
    }

    .command-left,
    .command-right {
        width: 100%;
    }

    .command-right .search-container,
    .command-right .search-container input {
        width: 100% !important;
    }

    /* Picks strip: two columns of chips instead of one long row */
    .picks-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px;
    }

    .picks-header {
        flex-wrap: wrap;
        gap: 6px;
    }

    .picks-actions {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    /* Table: keep ticker pinned while the rest scrolls */
    .earnings-table {
        min-width: 560px;
    }

    .earnings-table th.col-ticker,
    .earnings-table td.col-ticker {
        position: sticky;
        left: 0;
        z-index: 3;
        background: #0b0f16;
        box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06);
    }

    .earnings-table .company-name {
        display: none;
    }

    .earnings-table .company-logo,
    .earnings-table .logo-placeholder,
    .earnings-table .logo-fallback {
        display: none !important;
    }

    /* Drawer becomes a full-height sheet above the tab bar */
    .earnings-drawer {
        width: 100% !important;
        max-width: 100% !important;
        bottom: 0 !important;
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* ── TRADE HISTORY (/trade-history) ──────────────────────────── */
    .trade-history-page .container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    .stats-summary-grid.five-columns {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .trades-table {
        min-width: 720px;
    }

    .trades-table th:first-child,
    .trades-table td.symbol {
        position: sticky;
        left: 0;
        z-index: 3;
        background: #0b0f16;
        box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06);
    }

    .trades-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .pagination {
        gap: 8px;
    }

    .disclaimer-section {
        font-size: 11px;
    }

    /* ── ALGO PORTFOLIO (/dashboard) ─────────────────────────────── */
    .positions-table {
        min-width: 780px;
    }

    .positions-table th:first-child,
    .positions-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        background: #0b0f16;
        box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06);
    }

    /* ── DIVIDENDS (/dividends) ──────────────────────────────────── */
    .dividend-table {
        min-width: 640px;
    }

    .dividend-table th.symbol-col,
    .dividend-table td.symbol-col {
        position: sticky;
        left: 0;
        z-index: 3;
        background: #0b0f16;
        box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06);
    }

    .dividend-table .company-name {
        display: none;
    }
}

/* Landscape phones: reclaim vertical space */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .page-header,
    .dashboard-header {
        margin-bottom: 6px !important;
    }

    .page-subtitle,
    .subtitle {
        display: none;
    }
}