/* ============================================================
   MODULE 50 — MOBILE FULL SWEEP
   Everything that breaks on phones gets fixed here.
   Loaded LAST so it overrides earlier rules.
   ============================================================ */

@media (max-width: 900px) {

    /* ─── BASE OVERRIDES ─────────────────────────────────────── */
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    body { font-size: 13px; }

    /* Sidebar wider on mobile so nav is readable */
    .sidebar { width: 280px !important; max-width: 85vw !important; }

    /* User pill in sidebar — let it stack/wrap */
    .user-pill {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .user-pill .meta { flex: 1 1 100%; min-width: 0; }
    .user-pill .meta .name { font-size: 14px !important; }
    #adminNotifBtn, .btn-chat, .btn-logout {
        flex: 0 0 auto !important;
    }

    /* Main padding */
    .main {
        padding: 12px 10px !important;
        padding-top: 64px !important;
    }

    /* ─── PAGE HEADERS ────────────────────────────────────────── */
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .page-header h2 { font-size: 19px !important; }
    .page-header .subtitle { font-size: 12px !important; }
    .page-header > div:last-child { width: 100%; }
    .page-header [style*="display: flex"],
    .page-header [style*="display:flex"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .page-header .btn { flex: 1 1 auto; min-width: 100px; }

    /* ─── SEARCH / FILTER BARS ────────────────────────────────── */
    .search-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .search-bar input,
    .search-bar select {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .search-bar > * { min-width: 0 !important; }
    .search-bar .btn { flex: 1 1 auto !important; }

    /* Inline filter rows that use grid/flex with fixed columns */
    .main [style*="display: grid"][style*="grid-template-columns"],
    .main [style*="display:grid"][style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Inline filter rows specifically with date pickers */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns:1.3fr 1fr"],
    [style*="grid-template-columns: 1.3fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ─── TAB BARS (sub-tabs everywhere) ──────────────────────── */
    /* CFO, Receiving, Shipping, Compliance, Admin, Warehouses tabs */
    [style*="border-bottom:2px solid var(--border)"][style*="display:flex"],
    [style*="border-bottom: 2px solid var(--border)"][style*="display: flex"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }
    [style*="border-bottom:2px solid var(--border)"][style*="display:flex"]::-webkit-scrollbar,
    [style*="border-bottom: 2px solid var(--border)"][style*="display: flex"]::-webkit-scrollbar {
        display: none;
    }
    .cfo-tab, .wh-tab {
        padding: 10px 14px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    /* Inline buttons used as sub-tabs (Receiving, Shipping, Compliance, Admin) */
    [id^="recvTab"], [id^="shippingTab"], [id^="compTab"], [id^="adminTab"],
    [id^="invSubTab"] {
        padding: 10px 14px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* ─── CARDS ──────────────────────────────────────────────── */
    .card { padding: 12px !important; }
    .card-title { font-size: 14px !important; }

    /* ─── STAT TILES / KPI ROWS ──────────────────────────────── */
    /* CFO KPIs, dashboard stats, forecast summary, history stats */
    .cfo-kpi {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 140px !important;
        padding: 10px 12px !important;
    }
    .cfo-kpi .lbl { font-size: 10px !important; }
    .cfo-kpi .val { font-size: 18px !important; }
    .cfo-kpi .sub { font-size: 10px !important; }

    .dash-stat-tile {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 140px !important;
    }
    .ds-label { font-size: 10px !important; }
    .ds-val { font-size: 18px !important; }

    /* Generic KPI rows defined inline */
    [style*="display:flex"][style*="gap:12px"][style*="flex-wrap:wrap"],
    [style*="display: flex"][style*="gap: 12px"][style*="flex-wrap: wrap"] {
        gap: 8px !important;
    }

    /* ─── TABLES ─────────────────────────────────────────────── */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    table { min-width: 480px; font-size: 12px !important; }
    th, td { padding: 8px 6px !important; }
    th { font-size: 11px !important; }

    /* Action buttons inside tables — keep on one line */
    td [style*="white-space:nowrap"],
    td [style*="white-space: nowrap"] {
        white-space: nowrap !important;
    }
    td .btn-sm, td .btn[style*="font-size:11px"] {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    /* ─── FORM GRIDS ─────────────────────────────────────────── */
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .form-row { flex-direction: column !important; gap: 10px !important; }
    .form-group { width: 100% !important; }
    .form-group input, .form-group select, .form-group textarea {
        width: 100% !important;
        font-size: 14px !important; /* prevents iOS zoom on focus */
    }
    input[type="date"], input[type="text"], input[type="number"], input[type="email"],
    input[type="tel"], input[type="password"], select, textarea {
        font-size: 14px !important; /* iOS zoom guard */
    }

    /* ─── BUTTON ROWS ────────────────────────────────────────── */
    .modal-actions { flex-wrap: wrap !important; gap: 8px !important; }
    .modal-actions .btn { flex: 1 1 auto; }

    /* ─── MODALS ─────────────────────────────────────────────── */
    .modal-overlay { padding: 0 !important; }
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92dvh !important;
        margin: 0 !important;
        border-radius: 18px 18px 0 0 !important;
    }
    .modal-header { padding: 14px 16px !important; }
    .modal-header h3 { font-size: 16px !important; }
    .modal-body { padding: 14px 16px !important; }

    /* ─── DASHBOARD BUBBLES ──────────────────────────────────── */
    .dash-canvas {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .dash-bubble {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        margin: 0 !important;
        resize: none !important;
    }
    .dash-bubble-handle { padding: 10px 12px !important; font-size: 12px !important; }
    .dash-resize-grip { display: none !important; }
    .dash-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .dash-actions-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .dash-action-tile { padding: 12px !important; }

    /* MOTD ticker */
    [style*="background:var(--green-dark)"][style*="height:34px"] {
        height: auto !important;
        flex-direction: column !important;
        padding: 6px 0 !important;
        border-radius: 8px !important;
    }

    /* ─── INVENTORY ROWS ─────────────────────────────────────── */
    .inv-row-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .inv-row-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .inv-stat { text-align: center !important; min-width: 0 !important; }

    /* ─── SHIPPING — DISPATCH GROUPED CARDS ──────────────────── */
    /* Day-grouped dispatch rows: turn the inner table into a stack */
    #dispatchGroupedView .card { padding: 0 !important; }
    #dispatchGroupedView table { min-width: 100%; }

    /* Bulk action bar */
    #dispatchBulkBar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    #dispatchBulkBar .btn { flex: 1 1 auto; font-size: 12px !important; }

    /* History stats panel */
    #historyStats > div {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 130px !important;
    }
    #historyQuickFilters { gap: 6px !important; }
    #historyQuickFilters .btn { flex: 0 0 auto; font-size: 11px !important; padding: 6px 10px !important; }

    /* ─── ROUTES PAGE ────────────────────────────────────────── */
    #shippingRoutesView > div:first-child {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    #rmCanvas {
        height: 70vh !important;
        min-height: 400px !important;
    }
    #rmActiveRouteBar { flex-wrap: wrap !important; }

    /* ─── DOCK SCHEDULE ──────────────────────────────────────── */
    #dockGrid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* ─── REPORTS QUICK ACTIONS ──────────────────────────────── */
    .quick-actions {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .quick-action { padding: 14px 10px !important; }
    .quick-action h4 { font-size: 13px !important; }
    .quick-action p { font-size: 11px !important; }

    /* ─── ADMIN PAGE ─────────────────────────────────────────── */
    .admin-shell { padding: 10px !important; }
    .admin-toolbar {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        gap: 6px !important;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .admin-toolbar::-webkit-scrollbar { display: none; }
    .admin-tab {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    .admin-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .admin-stat { padding: 12px !important; }
    .admin-stat .value { font-size: 22px !important; }
    .admin-two-col { grid-template-columns: 1fr !important; gap: 12px !important; }
    .section-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .section-header .header-actions { flex-wrap: wrap !important; }
    .section-header .header-actions .btn { flex: 1 1 auto; }

    /* ─── WAREHOUSES PAGE ────────────────────────────────────── */
    #facilityCardsArea {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    #whSettingsCards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* ─── COMPLIANCE / EDI ───────────────────────────────────── */
    #compPanel-edi > [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* ─── CFO SUITE PANELS ───────────────────────────────────── */
    #cfoPanel-tax > [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    #cfoPanel-pnl > [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    #cfoPanel-cashflow > [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    #cfoPanel-invvalue > [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    /* P&L date-range button row */
    #cfoPanel-pnl .card [style*="display:flex"][style*="gap:6px"] {
        flex-wrap: wrap !important;
    }
    #cfoPanel-pnl .card [style*="display:flex"][style*="gap:6px"] .btn {
        flex: 1 1 calc(50% - 4px) !important;
        font-size: 11px !important;
    }

    /* ─── CHAT PANEL FULLSCREEN ──────────────────────────────── */
    .chat-panel.active {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
        resize: none !important;
    }
    .chat-panel::after { display: none !important; }
    .chat-header { min-height: auto !important; cursor: default !important; }
    .chat-header-title-row { padding: 10px 14px 4px !important; }
    .chat-drag-hint { display: none !important; }
    .chat-tabs { padding: 0 4px !important; }
    .chat-tab { padding: 8px 10px !important; font-size: 11px !important; }
    .chat-body {
        grid-template-columns: 1fr !important;
        height: calc(100dvh - 110px) !important;
    }
    .chat-sidebar { display: none !important; }
    .chat-main { border-right: none !important; }
    .chat-msg { max-width: 88% !important; }
    .chat-input { padding: 8px 10px !important; }
    .chat-input input[type="text"] { font-size: 14px !important; padding: 9px 14px !important; }

    /* ─── LOGIN / WELCOME ────────────────────────────────────── */
    .login-card { width: 92vw !important; }
    .login-card-header { padding: 16px 18px !important; }
    .login-brand .title { font-size: 16px !important; }
    .login-card-body { padding: 18px !important; }
    .ph-welcome-card { padding: 24px 20px !important; }
    .ph-welcome-name { font-size: 24px !important; }

    /* ─── PRICE LIST PANEL ───────────────────────────────────── */
    .pl-panel {
        width: 100vw !important;
        max-height: 100dvh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
    }
    .pl-header { padding: 14px 16px !important; }
    .pl-body { padding: 14px 16px !important; }

    /* ─── ADMIN NOTIF PANEL ──────────────────────────────────── */
    #adminNotifPanel {
        left: 8px !important;
        right: 8px !important;
        bottom: 70px !important;
        max-height: 60dvh !important;
    }

    /* ─── SAFETY: kill horizontal overflow culprits ──────────── */
    .section { overflow-x: visible !important; }
    .section > div { max-width: 100%; }
    pre, code { max-width: 100%; overflow-x: auto; }
}

/* ─── EXTRA SMALL PHONES ────────────────────────────────────── */
@media (max-width: 480px) {
    .main { padding: 10px 8px !important; padding-top: 60px !important; }
    .page-header h2 { font-size: 17px !important; }
    .cfo-kpi, .dash-stat-tile {
        flex: 1 1 100% !important;
    }
    .quick-actions { grid-template-columns: 1fr !important; }
    .admin-grid { grid-template-columns: 1fr !important; }
    .dash-stats-grid { grid-template-columns: 1fr 1fr !important; }
    .inv-row-stats { grid-template-columns: repeat(2, 1fr) !important; }
    table { font-size: 11px !important; }
    th, td { padding: 6px 4px !important; }
    #historyStats > div { flex: 1 1 100% !important; }
    .btn { font-size: 12px !important; padding: 8px 10px !important; min-height: 38px !important; }
    .btn-sm { font-size: 11px !important; padding: 5px 8px !important; }
}

/* ─── LANDSCAPE PHONES ──────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .main { padding-top: 56px !important; }
    .modal { max-height: 96dvh !important; }
    .chat-body { height: calc(100dvh - 90px) !important; }
}