/* Mobile layer (2026-10-15, client's ask: use the system on the phone).
   Loaded LAST on every page, so these rules only need to win by order. Everything
   lives inside max-width media queries, so desktop is untouched.
   Approach: one shared fix for the shell every screen uses (top bar, tabs, filter
   bar, cards, grids, tables, modals, popovers, form fields) instead of a patch per
   screen; per-screen leftovers go at the bottom. */

@media (max-width: 768px) {

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

    /* ── Top bar: back arrow | title (truncated) | actions, all in one 52px row ── */
    .brief-topbar { padding: 0 10px; gap: 8px; }
    .brief-back-btn { font-size: 0; gap: 0; padding: 0 10px; min-height: 34px; flex-shrink: 0; }
    .brief-back-btn svg { width: 16px; height: 16px; }
    .brief-topbar-brand { position: static; transform: none; flex: 1 1 auto; min-width: 0; justify-content: center; padding: 4px 6px; }
    .brief-topbar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 13.5px; }
    .brief-topbar-date { display: none; }
    .brief-topbar-actions { gap: 6px; flex-shrink: 0; }
    /* Buttons in the bar show just their icon (Share, Tour, ...). */
    .brief-topbar-actions .brief-regen-btn { font-size: 0; gap: 0; padding: 0 9px; min-height: 34px; }
    .brief-topbar-actions .brief-regen-btn svg { width: 14px; height: 14px; }
    .brief-topbar-actions .brief-regen-btn svg + svg { display: none; }
    .brief-topbar-user .btn-logout { padding: 8px; }

    /* ── Section tabs: one scrollable line, no wrapping ── */
    .dash-nav-tabs { justify-content: flex-start; overflow-x: auto; padding: 6px 10px; gap: 2px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .dash-nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tab { padding: 8px 13px; flex-shrink: 0; }

    /* ── Filter bar: not sticky (it would eat a third of the screen), wraps freely ── */
    .dash-filterbar { position: static; padding: 8px 12px; }
    .dash-filterbar-inner { justify-content: flex-start; gap: 8px; }
    .filter-sep { display: none; }
    .dash-filter-block { flex-wrap: wrap; flex-shrink: 1; min-width: 0; gap: 8px; }
    .dash-last-update { width: 100%; font-size: 11px; }
    .filters-panel { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dash-filter-label-inline { white-space: normal; }
    .ms-wrap { max-width: 100%; }
    .ms-dropdown { max-width: calc(100vw - 24px); }

    /* ── Page body and cards ── */
    .dash-content { padding: 12px 12px 48px; gap: 14px; }
    .dash-card, .kpi-card { min-width: 0; }
    .dash-card { padding-left: 14px; padding-right: 14px; }
    .dash-card-header { flex-wrap: wrap; gap: 8px; }
    .dash-card-controls { flex-wrap: wrap; }
    .dash-section-title { margin-top: 32px; }

    /* Every multi-column row of cards becomes one column; cards keep their own height. */
    .dash-row, .dash-comp-row, .dash-trend-row, .dash-brand-trend-row, .dash-trendiness-row,
    .dash-map-row, .dash-bottom-row, .dash-incidents-row, .dash-combined-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .dash-row > *, .dash-comp-row > *, .dash-trend-row > *, .dash-brand-trend-row > *,
    .dash-trendiness-row > *, .dash-map-row > *, .dash-bottom-row > *, .dash-incidents-row > * {
        grid-column: auto !important;
    }
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    .dash-kpis > * { grid-column: auto !important; }
    .kpi-card { padding: 14px 14px 12px; }
    .dash-kpis .kpi-value { font-size: 26px !important; }

    /* Charts: a sensible fixed height (a canvas needs its own px height). */
    .dash-chart-wrap { height: 220px; }

    /* ── Tables scroll sideways inside their card instead of stretching the page ── */
    .dash-table-wrap, .ic-table-wrap, .ss-table-wrap, .admin-table-wrap, .gml-table-wrap,
    .score-table-wrap, .inv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .dash-table-wrap > table, .ic-table-wrap > table, .inv-table-wrap > table { min-width: 640px; }

    /* ── Modals / popups: full width, scroll inside ── */
    .chart-modal-overlay { padding: 0; align-items: stretch; }
    .chart-modal, .pc-detail-modal, .inv-add-modal {
        width: 100vw !important; max-width: 100vw !important; max-height: 100dvh !important;
        height: 100dvh; border-radius: 0 !important; padding: 16px 14px;
    }
    .ic-modal-overlay, .ic-day-overlay { padding: 0 !important; }
    .ic-modal-box, .ic-day-overlay-box { width: 100vw !important; max-width: 100vw !important; max-height: 100dvh !important; border-radius: 0 !important; }
    .help-popover { max-width: calc(100vw - 24px); }

    /* ── Touch comfort: 16px fields (iOS does not zoom them), bigger tap targets ── */
    input, select, textarea { font-size: 16px !important; }
    button, .dash-reset-btn, .date-pill, .gran-btn, .ms-trigger { min-height: 36px; }
    .ms-item { padding-top: 10px; padding-bottom: 10px; }
    .info-icon, .warn-icon { min-width: 18px; min-height: 18px; }
}

/* Small phones */
@media (max-width: 420px) {
    .dash-kpis .kpi-value { font-size: 22px !important; }
    .filters-panel { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── Phase 1b: Internal Comms bar + per-screen grids ── */
@media (max-width: 768px) {
    /* IC top bar: team chip shows just the team name, the guide button just its icon */
    .icui-bar { margin-right: 0; gap: 4px; flex-shrink: 1; min-width: 0; }
    .icui-team-chip { font-size: 0; padding: 0 9px; max-width: 120px; min-height: 30px; }
    .icui-team-chip b { font-size: 11.5px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
    .icui-chip-change { display: none; }
    .icui-guide-btn { font-size: 0; padding: 0 10px; min-height: 30px; }

    /* Cards of numbers: 1-2 columns */
    .score-cards-grid, .okr-grid, .ga-avg-row { grid-template-columns: minmax(0, 1fr) !important; }
    .score-bignum-kpis, .ga-kpis, .ga-ytd-row, #dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ea-glance, .ea-glance-kpis { grid-template-columns: minmax(0, 1fr) !important; }
    .ea-glance-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ea-bars, .ea-bar-labels { gap: 4px; }
    .ea-bar-col, .ea-bar-val { min-width: 0; }
    .au-combined-row, .au-triple-row, .ga-dist-row { grid-template-columns: minmax(0, 1fr) !important; }
    .okr-summary-row { grid-template-columns: minmax(0, 1fr) !important; }
    .okr-summary-target { position: static; margin: 6px 0 0; }
    .score-mcell-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* Pickers and AI buttons that sat in one row */
    .pc-picker-slots, .pc-compare-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .pc-slot, .pc-slot .ms-trigger { min-width: 0; max-width: 100%; }
    .dash-ai-controls { flex-wrap: wrap; }
    .dash-ai-header { flex-direction: column; align-items: stretch; gap: 12px; }
    .dash-ai-header .dash-ai-btn, .dash-ai-controls .dash-ai-btn { width: 100%; justify-content: center; }
    .dash-ai-btn { white-space: normal; }

    /* Wide matrices scroll sideways inside their card */
    .ga-matrix-grid { min-width: 560px; }
    #ga-matrix { overflow-x: auto; }
}

/* ── Phase 1c: leftovers ── */
@media (max-width: 768px) {
    .dash-search-wrap { width: 100%; max-width: 100%; }
    .dash-search-wrap input, .dash-filter-input.dash-search-clearable { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
    .gran-toggle { flex-wrap: wrap; max-width: 100%; }
    #ea-perf-presets { flex-wrap: wrap; }
    .ea-region-list { max-height: 320px; }
    /* Report Builder is a slide deck: keep it usable but let the filters stack and say it fits a bigger screen. */
    .rb-config-panel, .rb-config-main, .rb-config-head { flex-wrap: wrap; flex-direction: column; align-items: stretch; }
    .rb-config-field, .rb-config-field .ms-wrap { max-width: 100%; min-width: 0; }
    .rb-page-body::before { content: "Report Builder works best on a larger screen. You can set it up here, but check the slides on a computer."; display: block; margin: 8px 12px 0; padding: 8px 10px; border-radius: 8px; background: var(--accent-dim); color: var(--text-soft); font-size: 12px; line-height: 1.4; }
}
@media (max-width: 768px) {
    .ea-audience-layout { grid-template-columns: minmax(0, 1fr) !important; }
    [style*="min-width:4"], [style*="min-width: 4"] { min-width: 0 !important; }
}

/* ── Home screens (comms / internal comms / guanxi / project picker) ── */
@media (max-width: 768px) {
    .home-view, .project-select-view { overflow-x: hidden; }
    .home-content, .project-select-content { padding-left: 14px; padding-right: 14px; max-width: 100%; }
    .features-grid, .features-grid-primary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .home-brand { flex-wrap: wrap; }
}

/* ── Chat (Comms AI / Guanxi Assistant) ── */
@media (max-width: 768px) {
    .chat-view { height: 100dvh; }
    .chat-topbar { padding: 0 10px; gap: 8px; }
    .chat-topbar-left, .chat-topbar-right { min-width: 0; flex: 0 0 auto; }
    .chat-topbar-brand { position: static; transform: none; flex: 1 1 auto; min-width: 0; justify-content: center; padding: 4px 6px; }
    .chat-topbar-brand .brief-topbar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .chat-topbar-right .brief-regen-btn { font-size: 0; gap: 0; padding: 0 10px; min-height: 34px; }
    .chat-topbar-right .brief-regen-btn svg { width: 14px; height: 14px; }
    .chat-body { position: relative; }
    /* History panel slides over the conversation instead of squeezing it */
    .chat-panel.open { position: absolute; z-index: 60; top: 0; bottom: 0; left: 0; width: 82vw; max-width: 320px; box-shadow: 8px 0 24px rgba(0,0,0,.18); }
    .messages { padding: 12px 10px 8px; }
    .message-row { padding: 8px 2px; gap: 8px; }
    .message-row .avatar { display: none; }
    .bubble, .message-row.user .bubble { max-width: 100%; }
    .bubble table, .assistant-content table { display: block; max-width: 100%; overflow-x: auto; }
    .bubble pre, .assistant-content pre { overflow-x: auto; max-width: 100%; }
    .input-area { padding-left: 10px; padding-right: 10px; }
}