/* J.A.R.V.I.S. v3.12 — phone & tablet layout (loaded last).
   Desktop and iPad landscape (> 900 px) are unchanged. At 900 px and below (phones, iPad portrait):
   compact two-row header, the left menu becomes a slide-in drawer (☰), filters collapse, cards and
   tables fit the screen width, chat and dialogs open full screen on phones. */
.jvMenuBtn, .jvNavScrim, .jvFiltToggle, .jvNavHead, .jvModalX { display: none; }

@media (max-width: 900px) {
  /* ---------- header */
  .topShell { height: auto !important; min-height: 56px; flex-wrap: wrap; padding: 6px 10px !important; gap: 6px; row-gap: 6px; max-width: 100vw; box-sizing: border-box; }
  .jvMenuBtn { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--ref-border, #243149); background: transparent; color: inherit; font-size: 21px; line-height: 1; cursor: pointer; }
  .brandMini { width: 40px !important; height: 40px !important; border: 0 !important; flex: 0 0 auto; }
  .brandMini img { width: 30px !important; height: 30px !important; }
  .topTitle { min-width: 0 !important; flex: 1 1 0; padding: 0 4px !important; }
  .topTitle b { display: block; font-size: 12.5px !important; line-height: 1.25; letter-spacing: .03em !important; }
  .topTitle > span { display: none !important; }
  .topActions { gap: 6px !important; padding-right: 0 !important; margin-left: auto; flex-wrap: nowrap; }
  .statusMini { padding: 0 !important; width: 38px; height: 38px; justify-content: center; border-radius: 10px !important; }
  .statusMini #status { display: none; }
  .topActions .topChatBtn, .topActions .topIconBtn, .topActions .userPill { height: 40px !important; min-width: 40px; }
  .topActions .topChatBtn { font-size: 0 !important; width: 42px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
  .topActions .topChatBtn::before { font-size: 18px; line-height: 1; }
  .topActions .topChatBtn[onclick^="openSide"]::before { content: "💬"; }
  .topActions .topChatBtn[onclick^="openVisualUpload"]::before { content: "📊"; }
  .topActions #themeToggle::before { content: "◐"; font-size: 20px; }
  .topActions .userPill { padding: 0 4px !important; }
  .topActions .userPill > span:not(.userAvatar) { display: none !important; }

  /* ---------- menu drawer */
  .workspaceShell { grid-template-columns: minmax(0, 1fr) !important; }
  .mainCanvas { min-width: 0; max-width: 100vw; box-sizing: border-box; }
  .scenarioGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .planningHero, .planningGrid { grid-template-columns: minmax(0, 1fr) !important; }
  #jarvisTargetsPage .jt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .leftRail { display: flex !important; flex-direction: column; position: fixed !important; top: 0 !important; left: 0; bottom: 0; height: 100vh !important; height: 100dvh !important; width: min(290px, 84vw); z-index: 260 !important; transform: translateX(-105%); transition: transform .22s ease; overflow-y: auto; padding: 12px 12px 24px !important; box-shadow: 18px 0 42px rgba(0, 0, 0, .35); }
  body.jvNavOpen .leftRail { transform: none; }
  .jvNavScrim { display: block; position: fixed; inset: 0; z-index: 250; background: rgba(4, 8, 16, .55); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  body.jvNavOpen .jvNavScrim { opacity: 1; pointer-events: auto; }
  body.jvNavOpen { overflow: hidden; }
  .jvNavHead { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--ref-border, #243149); font-weight: 800; letter-spacing: .08em; font-size: 12px; color: var(--ref-muted, #8f9db0); }
  .jvNavHead button { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--ref-border, #243149); background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
  .leftRail .railBtn { height: 48px !important; font-size: 18px !important; }
  .leftRail .railBtn .tip { display: inline !important; position: static !important; font-size: 14px !important; }
  .leftRail .railSpacer { flex: 1 1 auto; min-height: 12px; }

  /* ---------- page */
  .mainCanvas { padding: 12px 10px 28px !important; }
  .filterWorkspace { position: static !important; top: auto !important; }
  .jvFiltToggle { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ref-border, #243149); background: transparent; color: inherit; font-weight: 700; font-size: 12px; cursor: pointer; margin-left: auto; }
  .filterTop { display: flex; align-items: center; gap: 8px; }
  /* the filter panel is dark navy in both themes */
  #filterWorkspace .jvFiltToggle { color: #e8eef7; border-color: #2c3d58; background: rgba(255, 255, 255, .04); }
  body.jvFiltCollapsed #filterWorkspace .filterGrid { display: none !important; }
  input, select, textarea { font-size: 16px !important; } /* stops iPhone zooming into a field */
  .execKpiValue { font-size: 19px !important; white-space: normal !important; overflow-wrap: anywhere; }
  .pageHeader { flex-wrap: wrap; gap: 10px; }
  .pageHeader h1 { font-size: 22px !important; }
  .chartTitleRow { flex-wrap: wrap; gap: 8px; }
  .uaCard, .execPanel { min-width: 0; }
  .jvTblScroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .mainCanvas [class*="Grid"] > *, .mainCanvas [class*="grid"] > *, .scenarioGrid > * { min-width: 0; }
  .planningControls, .jt-toolbar { flex-wrap: wrap; }
  svg { max-width: 100%; }
  .spFilters label { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .spFilters select, .spFilters input { min-width: 0 !important; width: 100%; box-sizing: border-box; }
  .spFilters .spSearch { flex-basis: 100%; }
  .spFilters .spSearch input { min-width: 0 !important; }
  .spInline { flex-wrap: wrap; }
  .spDpKpis { grid-template-columns: 1fr 1fr !important; }
  .jvDrBreak { grid-template-columns: 1fr !important; }
  .jvConnGrid { grid-template-columns: 1fr !important; }

  .jvModalX { display: flex; align-items: center; justify-content: center; position: sticky; top: 0; float: right; z-index: 5; width: 40px; height: 40px; margin: -4px -4px 4px 8px; border-radius: 10px; border: 1px solid var(--line, #d9e1e8); background: var(--panel, #fff); color: var(--text, #17212b); font-size: 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
  /* charts drawn for desktop width: larger text when they are scaled down */
  .svgChart .barValueLabel { font-size: 17px; }
  .svgChart .axisLabel { font-size: 14px; }

  /* ---------- side panel (chat / insights) */
  .sidePanel { top: 0 !important; height: 100vh !important; height: 100dvh !important; width: min(480px, 100vw) !important; z-index: 240 !important; }
}

@media (max-width: 600px) {
  .topActions { width: 100%; order: 5; justify-content: space-between; }
  .execKpiGrid { gap: 8px !important; }
  .execKpiCard { padding: 12px !important; }
  .execKpiValue { font-size: 17px !important; }
  .execSummaryStrip { grid-template-columns: 1fr !important; }
  .stockTiles, #stockPage #spTiles { grid-template-columns: 1fr 1fr !important; }
  .stockTile b { font-size: 19px; }
  .sidePanel { width: 100vw !important; }
  /* dialogs full screen */
  .modal .box, .jvChartBox, .wbPanel { width: 100vw !important; max-width: 100vw !important; max-height: 100vh !important; max-height: 100dvh !important; border-radius: 0 !important; padding: 14px 12px !important; box-sizing: border-box; }
  .modal, .jvChartModal, .wbModal { padding: 0 !important; align-items: stretch !important; }
  .jvDrillHead { flex-direction: column; }
  .jvDrillHead .jvChartTools { justify-content: flex-start; }
  .jvDrTiles { grid-template-columns: 1fr 1fr !important; }
  .spDpCharts { grid-template-columns: 1fr !important; }
  footer { font-size: 9px; padding: 10px; }
}