/* ============================================================================
   Array Operator — responsive overhaul (phones + foldables + compact tablets).
   Loaded LAST so it overrides styles.css / command-center.css / claims.css.

   Tiers (Ford Fold-5 QA 2026-07-14):
     · ≤600px  — cover screen / classic phone: dense single-column, bottom nav
     · tablet / unfolded foldable — the DESKTOP site, no touch shell
                 content (desktop top-nav was leaving a skinny left card + empty sky)
     · desktop — unchanged

   Principles: thumb-zone nav · full-bleed content on fold · no horizontal page
   scroll · tap ≥42px · tables scroll inside wraps · breathing room scales up with
   width (not denser desktop chrome crammed into 800px).
   ========================================================================== */

/* mobile-nav.js injects an icon + short label into every tab and a "More" control for
   the phone bottom nav — those are MOBILE-ONLY. Hide them at ALL widths by default so
   desktop keeps its normal text tabs. (Bug 2026-07-12: desktop rendered icon + long
   label + short label together → "Fleet HealthFleet". The @media block below re-shows
   them on phones with !important + higher specificity.) */
.tabbar .tab-ic,
.tabbar .tab-short,
.tabbar .tab-more { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH SHELL (phones only) — bottom nav + overflow safety + full-width
   sheets. Short side ≤600 (or ≤500 in landscape); an UNFOLDED foldable is
   a tablet and keeps the desktop site.
   Covers classic phones AND foldable open (Fold 5 main ≈700–900 CSS px).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px), (max-height: 500px) and (max-width: 900px) {
  /* Full-width canvas — kill the "skinny left card + empty mountain" imbalance */
  .wrap {
    max-width: 100% !important;
    width: 100%;
    padding: 0 14px;
    box-sizing: border-box;
  }
  body, html { overflow-x: hidden; }

  /* Provider row (offtaker generator): the sent-progress widget is nowrap and
     can't shrink, so it pushes the page ~12px past a phone's width (sim persona
     "Ken" measured scrollW 402 vs 390). Drop the decorative mini-track, let the
     "N sent · June" text wrap, and let the whole row wrap rather than overflow. */
  .rb-prov-head { flex-wrap: wrap; }
  .rb2-minitrack { display: none; }
  .rb2-provbar { margin-left: auto; gap: 4px; min-width: 0; }
  .rb2-provbar small { white-space: normal; text-align: right; }

  /* ── Extension-live-data note → compact, non-sticky chip ─────────────────────
     On a phone this is CONTEXT, not a control. It must not ride the top of every
     tab eating premium viewport, and it must never pin. So: force it out of flow
     stickiness (position:static — belt-and-suspenders, it sits under the sticky
     tabbar) and collapse it to a single-line pill showing just the per-vendor
     "last refreshed" facts. app.js drops the desktop-only "keep a tab open"
     instruction on this breakpoint (it's meaningless on a phone). */
  #extLiveNudge { position: static; margin: 8px 0 2px; }
  #extLiveNudge.is-chip { border-radius: 999px; }
  #extLiveNudge.is-chip .trial-nudge-row { padding: 6px 12px; gap: 8px; flex-wrap: nowrap; }
  #extLiveNudge.is-chip .trial-nudge-copy { flex: 1 1 auto; font-size: 11.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #extLiveNudge.is-chip .trial-nudge-x { padding: 2px 4px; font-size: 15px; }

  /* ── Portfolio command center ──────────────────────────────────────────── */
  #commandCenter { margin-top: 12px; }
  .cc-head h2 { font-size: 18px; }
  .cc-head .cc-sub { font-size: 12px; }
  .cc-kpis { gap: 10px; }
  .cc-kpi { padding: 12px 13px; }
  .cc-kpi .k { font-size: 10.5px; }
  .cc-kpi .v { font-size: 22px; }

  /* ── Section dividers wrap instead of overflowing ──────────────────────── */
  .cc-treedivider { flex-wrap: wrap; gap: 4px; }

  /* ── Per-site fleet tree ───────────────────────────────────────────────── */
  /* Full-bleed wrapper (was 96vw centered via translateX). */
  #sbWrap { width: 100%; left: auto; transform: none; margin-left: 0;
            padding: 14px 12px 16px; border-radius: 16px; }
  /* command-center.css floats .sb-head (and its children) position:absolute over
     the canvas — fine for the desktop pan/zoom, but on the mobile vertical scroll
     it overlays the fleet status bar (the "$/mo recoverable" + legend). Put it
     back in normal flow so it takes space and pushes the status bar + canvas down. */
  .sb-head { position: static; flex-direction: column; align-items: stretch;
             gap: 10px; margin-bottom: 12px; }
  .sb-sub { font-size: 12px; }
  .sb-legend { flex-wrap: wrap; }
  /* Toolbar (Full screen / New empty array / Reset layout / +Card / +Add array)
     was flex-nowrap → clipped. Wrap + compact. */
  .sb-head-actions, .sb-head-left, .sb-head-btns { position: static;
                                    flex-wrap: wrap; justify-content: flex-start;
                                    gap: 8px; width: 100%; }
  .sb-head-btns button, .sb-head-btns .sb-cardbtn-wrap { font-size: 12px; }
  .sb-resetbtn, .sb-addbtn { padding: 9px 12px; min-height: 40px; }
  /* A touch-pannable canvas shouldn't eat the whole screen height on a phone. */
  .sb-viewport { height: 58vh; min-height: 340px; }

  /* ── Claims: segmented send-policy toggle can wrap if it's snug ─────────── */
  .cl-policy { flex-wrap: wrap; }

  /* ── Comfortable tap targets on the common controls ────────────────────── */
  .cc-btn, .sb-togglebtn, .btn-primary-lg { min-height: 42px; }

  /* ── Trends: the BY-ARRAY table must scroll INSIDE its wrap, never push the
     page sideways. The wrap is overflow-x:auto already; pin it to the viewport
     width and let the table keep its natural column widths + scroll. ───────── */
  #trendsRoot, #panelTrends { max-width: 100%; overflow-x: hidden; }
  .tr-tablewrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
  .tr-table { min-width: 460px; }            /* keep columns readable; wrap scrolls */
  .tr-table th, .tr-table td { padding: 10px 12px; }

  /* ── Analysis sites grid + dense tables: scroll INSIDE the wrap, never clip
     columns or push the page sideways (Capacity / Expected used to get cut). ─ */
  #panelAnalysis, #analysisRoot, .an-wrap, .an-sections, .an-block {
    max-width: 100%; min-width: 0;
  }
  .ansg-wrap,
  .anperf-wrap,
  .anhw-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .ansg-table {
    /* fixed layout on desktop was ellipsizing; on phone allow natural width + scroll */
    table-layout: auto !important;
    min-width: 640px;
    width: max-content;
    max-width: none;
  }
  .ansg-table th, .ansg-table td {
    white-space: nowrap;
  }
  .ansg-bar { gap: 8px; }
  .ansg-search input { width: min(160px, 42vw); }

  /* ── Reports / Invoices dense tables (bulk import, review, offtaker lists) ─ */
  .rb-bulk-tablewrap,
  .rb-rev-tablewrap,
  .rb2 .rep-card,
  #panelReports .rb-listtools,
  #panelReports .rb-acc-body {
    max-width: 100%;
    min-width: 0;
  }
  .rb-bulk-tablewrap,
  .rb-rev-tablewrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .rb-bulk-table,
  .rb-rev-table {
    min-width: 560px;
  }
  /* Offtaker provider headers: don't force horizontal page overflow */
  .rb-prov-head, .rb-grp-head, .rb-acc-head {
    max-width: 100%;
    min-width: 0;
  }
  .rb-acc-name, .rb-acc-sentence {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Sticky offtaker search / filters full width on phone */
  .rb-listtools, .rb-osearch, .rb-osearch-lg {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Generic safety net: any wide table in a panel scrolls inside a wrap */
  #panelReports table,
  #panelAnalysis table,
  #panelAccount table {
    max-width: none;
  }
  #panelReports, #panelAnalysis, #panelAccount, #panelDashboard {
    overflow-x: clip;
    max-width: 100%;
  }

  /* ── Fleet-health KPI tile grid ("95% fleet healthy" + counts + $/mo on the
     landing demo + dashboard): 2-up tiles with slightly smaller numerals so
     all eight stay scannable without horizontal scroll. ──────────────────── */
  /* rows size to their own content on a phone — 1fr rows would stretch every
     tile to the tallest one and leave acres of dead space */
  .fcg { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; grid-auto-rows: auto; }
  .fcg-tile { min-height: 88px; padding: 12px 14px 10px; }
  .fcg-v { flex-wrap: wrap; }          /* "$63,946 /mo" wraps instead of clipping */
  .fcg-v b { font-size: 24px; }

  /* ── Fleet Health triage table: the ~870px .cc-table was clipped by its wrapper
     (overflow:hidden, there only to round the corners) → on a phone the right half
     of every row — status, state, actions — was cut off AND unreachable (no scroll).
     Let the wrapper scroll horizontally instead, mirroring the Trends table above.
     The day-mode rule sets `overflow:hidden !important` on `#panelDashboard
     .cc-tablewrap`, so match that specificity + !important or it won't win. ────── */
  .cc-tablewrap,
  #panelDashboard .cc-tablewrap,
  html[data-theme="day"] #panelDashboard .cc-tablewrap {
    overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch;
  }
  #panelDashboard .cc-table { min-width: 620px; }   /* keep columns legible; the wrap scrolls */

  /* ══ BOTTOM NAV (mobile overhaul, Ford 2026-07-12) ═══════════════════════════
     The tab bar becomes a fixed thumb-zone bar: 5 primary tabs (icon + short label,
     injected by mobile-nav.js) + a "More" sheet for Trends/Resources. Replaces the
     old top scroll-strip. Long desktop labels, auth chips and the theme toggle are
     hidden on mobile; the body gets bottom padding so the fixed bar never covers
     content. Octarine marks the active tab. ─────────────────────────────────── */
  /* Bottom nav + Energy Agent FAB clearance */
  body { padding-bottom: calc(58px + 72px + env(safe-area-inset-bottom, 0px)); }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    display: flex; align-items: stretch; gap: 0; z-index: 60; margin: 0;
    background: var(--card, #fff); border-top: 1px solid var(--line); border-radius: 0;
    box-shadow: 0 -10px 30px -22px rgba(15, 23, 42, .5);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    overflow: visible; flex-wrap: nowrap;
  }
  /* only primary tabs live in the bar; everything else is hidden on mobile */
  .tabbar > .tab:not(.tab-primary),
  .tabbar #tabSignIn, .tabbar #tabWhoami, .tabbar #tabSignOut,
  .tabbar .theme-toggle { display: none !important; }
  .tab + .tab { border-left: 0; }                 /* kill desktop dividers */
  .tab.tab-primary {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; position: relative;
    padding: 5px 2px 2px; min-height: 46px; border: 0; background: none;
    color: var(--faint, #94a3b8); text-decoration: none; white-space: nowrap;
    border-radius: 12px; transition: color .16s;
  }
  .tab.tab-primary .tab-full { display: none; }   /* long desktop label off */
  .tabbar .tab.tab-primary .tab-ic { display: grid !important; place-items: center; height: 24px; position: relative; }
  .tab .tab-ic svg { width: 23px; height: 23px; display: block; }
  .tabbar .tab.tab-primary .tab-short { display: block !important; font-size: 10px; font-weight: 750; letter-spacing: .01em; line-height: 1; }
  .tabbar .tab.tab-more { display: flex !important; }   /* the More control is a primary tab on phones */
  .tab.active::after { display: none !important; }  /* neutralize desktop underline */
  /* octarine active tab — .tabbar-scoped + !important to win AO's cascade war (the
     day theme leans on high-specificity !important rules). Icon strokes follow via
     currentColor; a separate indicator bar (below) is a background, so the active
     state still reads even if some future rule steals `color`. */
  .tabbar .tab.tab-primary.active,
  .tabbar .tab.tab-more.on,
  .tabbar .tab.tab-more.has-active { color: var(--ao-oct, #7c3aed) !important; }
  .tabbar .tab.tab-primary.active .tab-ic::after {
    content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ao-oct, #7c3aed);
  }
  .tab.tab-primary:active { transform: scale(.93); }
  #tabAccount .tab-dot { position: absolute; top: 3px; left: calc(50% + 7px); margin: 0; }

  /* More sheet */
  .mob-more-backdrop { position: fixed; inset: 0; z-index: 65; background: rgba(15, 23, 42, .3); }
  .mob-more-backdrop[hidden] { display: none; }
  .mob-more {
    position: fixed; left: 8px; right: 8px; z-index: 66;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    background: var(--card, #fff); border: 1px solid var(--line); border-radius: 18px; padding: 8px;
    box-shadow: 0 26px 54px -20px rgba(15, 23, 42, .55);
    animation: mobMoreUp .26s cubic-bezier(.2, .7, .2, 1.05);
  }
  .mob-more[hidden] { display: none; }
  @keyframes mobMoreUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .mob-more-grip { width: 36px; height: 4px; border-radius: 999px; background: var(--line); margin: 2px auto 8px; }
  .mob-more-item {
    display: flex; align-items: center; gap: 13px; padding: 13px 12px; border-radius: 12px;
    color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 650;
  }
  .mob-more-item + .mob-more-item { border-top: 1px solid var(--line); }
  .mob-more-item:active { background: var(--ao-oct-soft, rgba(124, 58, 237, .09)); }
  .mob-more-ic { display: grid; place-items: center; color: var(--ao-oct, #7c3aed); }
  .mob-more-ic svg { width: 22px; height: 22px; }
  .mob-more-go { margin-left: auto; color: var(--faint); }

  /* Floating widgets sit ABOVE the bottom bar. Energy Agent owns bottom-RIGHT
     (sun bubble); Alerts pill moves to the LEFT so they never stack/cover. */
  #fsWrap { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
  .ao-al-fab {
    left: 14px !important;
    right: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .ao-al-panel {
    left: 12px !important;
    right: auto !important;
    bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(372px, calc(100vw - 24px));
  }

  /* Energy Agent lives as a fixed FAB (energy-agent.css) — never a bottom-nav tab. */
  .tabbar > .tab.ea-tab { display: none !important; }

  /* ── Shared: every tab's root sheet fills the wrap (no half-empty left column) ─ */
  #panelDashboard, #panelAnalysis, #panelTrends,
  #panelReports, #panelAccount, #panelResources,
  #reportsRoot, #analysisRoot, #trendsRoot, #rsHost, .rb2, .an-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Kill desktop 700px caps that leave dead sky on fold open */
  #panelReports .rep-card,
  .rb2 .rep-card {
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE / COVER (≤600px) — denser single-column, classic one-hand use
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .wrap { padding: 0 12px; }

  /* Pipeline KPIs: stack to one column on narrow cover screens */
  .rb2-pipe-row { flex-direction: column; gap: 8px; }
  .rb2-pcell {
    min-width: 0 !important;
    border-radius: 14px !important;
    border-left: 1px solid var(--line, #e2e8f0) !important;
  }
  .rb2-pcell + .rb2-pcell { border-left: 1px solid var(--line, #e2e8f0) !important; }

  .cc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .fcg { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Inverters tab: single-column portal cards */
  .ar-inv-api, .ar-inv-vault,
  .ar-panel .ar-group, .ar-stack .ar-group {
    grid-template-columns: 1fr !important;
  }

  .sb-viewport { height: 52vh; min-height: 300px; }

  /* Identity was desktop-only in top bar; stay hidden in bottom nav */
  .tab.tab-whoami, .tab.tab-signout { display: none !important; }
}

/* Extra squeeze for the smallest cover screens. */
@media (max-width: 380px) {
  .tab { font-size: 10.5px; padding: 11px 1px; }
  .cc-kpi .v { font-size: 20px; }
  .wrap { padding: 0 10px; }

  /* Feature-suggestion widget: its panel is a fixed 320px (index.html). On the
     narrowest phones that overflows the safe area even with max-width:calc(100vw
     - 32px). Pin the wrapper to BOTH edges and let the panel be fluid so it always
     fits with an even 8px gutter — no horizontal scroll, button still reachable. */
  #fsWrap { left: 8px; right: 8px; bottom: 8px; }
  #fsPanel { width: auto; max-width: none; }

  /* Command Center triage search: on the narrowest phones the wrapping flex row can
     squeeze the field below a usable width. Keep it fat-finger friendly — wide enough
     to type a full query and ≥44px tall — and let it take a full row if needed.
     The dashboard scopes its input as #panelDashboard .cc-search input (ID-weighted),
     so match that specificity or the min-height won't win. */
  .cc-search { flex: 1 1 100%; min-width: 140px; }
  .cc-search input,
  #panelDashboard .cc-search input { min-height: 44px; }
}