/* Tradeglass responsive overrides (Phase 1) */

/* ===== Global guardrails ===== */
html, body { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Flex/grid overflow fixes */
.grid > * { min-width: 0; }
.row > * { min-width: 0; }
.chart-toolbar > * { min-width: 0; }
.tg-tabs > * { min-width: 0; }

/* Boxes must not leak content */
.panel, .component-box, .tg-analysis, .card, .chart-dock {
  max-width: 100%;
  min-width: 0;
}

/* Allow long text to wrap inside boxes (avoid text painting outside) */
.panel, .component-box, .tg-analysis, .narrative, .news-list, .econ-list, .ao-lines {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Form controls should never exceed container */
input, select, button, textarea { max-width: 100%; }

/* ===== Spacing for small devices ===== */
body {
  /* keep existing body margin from inline CSS on desktop; override only when needed */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 720px){
  body { margin: 8px !important; }
}

/* ===== Main grid stacks on mobile/tablet ===== */
@media (max-width: 1080px){
  .grid { grid-template-columns: 1fr !important; }
}

/* ===== Chart heights become fluid on phones/tablets ===== */
@media (max-width: 1024px){
  :root{
    --h-chart: clamp(260px, 45vh, 520px);
    --h-vol:   clamp(60px,  12vh, 120px);
    --h-sub:   clamp(90px,  18vh, 180px);
  }
}

/* ===== Phone chart controls: in-flow sheet, no overlap ===== */
@media (max-width: 720px){
  /* phone horizontal lock / no decenter */
  html, body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    max-width: 100%;
  }
  @supports (overflow: clip){
    html, body { overflow-x: clip; }
  }

  .grid,
  .panel,
  #tgChartPanel,
  .chart-head-row,
  .tg-chart-toolbar,
  .chart-toolbar-left,
  .tg-toolbar-left,
  .chart-toolbar-right,
  .tg-toolbar-right,
  #chartControlsRow,
  #curtainBar,
  #chartDock,
  #chart,
  #volchart,
  #subchart {
    min-width: 0;
    max-width: 100%;
  }

  .chart-head-row { flex-wrap: wrap !important; }
  .tg-chart-toolbar,
  .chart-toolbar-left,
  .tg-toolbar-left,
  #chartControlsRow {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .chart-toolbar,
  .chart-toolbar-left,
  .chart-toolbar-right,
  .tg-toolbar-right,
  #chartControlsRow {
    flex-wrap: wrap !important;
  }
  #chartControlsRow {
    overflow-x: visible;
    padding-bottom: 0;
    gap: 8px !important;
  }

  #curtainBar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  #curtainBar .curtain {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
  #curtainBar .curtain .hdr {
    width: 100%;
    justify-content: center;
  }
  #curtainBar .curtain .body {
    position: static;
    width: 100%;
    max-width: 100%;
  }

  #tgChartMobileSheet {
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
  }

  /* nested drawing panels must stay in-flow on phone */
  #curtainDrawing .draw-color-panel,
  #curtainDrawing .draw-tools-panel {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: none;
    transform: none;
    margin-top: 8px;
  }
  #curtainDrawing .draw-color-panel[data-open="0"],
  #curtainDrawing .draw-tools-panel[data-open="0"] {
    display: none;
    opacity: 0;
    pointer-events: none;
  }
  #curtainDrawing .draw-color-panel[data-open="1"],
  #curtainDrawing .draw-tools-panel[data-open="1"] {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  /* prevent asset name pill from forcing overflow */
  #assetName { max-width: 100% !important; }

  /* slightly smaller logo on phones */
  .kpi-logo { height: 44px; }
}

/* ===== Tables: allow safe horizontal scroll inside their box on narrow screens ===== */
@media (max-width: 720px){
  .component-box.is-collapsible .box-body { overflow-x: auto; }
  .accordion-body { overflow-x: auto; }
  .tbl { min-width: 520px; } /* lets scroll happen instead of layout breaking */
}

/* =========================================================
   Phase 2: enforce mobile/tablet priority order
   Chart -> Decision -> Analysis -> rest -> News/Econ
   ========================================================= */
.tg-left-col{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
#tgChartPanel, #tgNewsPanel, #tgRightPanel{ min-width:0; }

/* Phones + tablets: reorder via grid areas */
@media (max-width: 1080px){
  .tg-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "chart"
      "right"
      "news";
  }

  /* flatten left column so chart/news become direct grid items */
  #tgLeftCol{ display: contents; }

  #tgChartPanel{ grid-area: chart; }
  #tgRightPanel{ grid-area: right; }
  #tgNewsPanel{  grid-area: news; }

  /* inside right panel: prioritize decision + analysis */
  #tgRightPanel{
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  /* Must be immediately after chart */
  #decisionWrap{ order:-30; }
  #analysis{     order:-20; }

  /* Then next-most useful on mobile */
  .trade-pills{  order:-10; }

  /* Asset overview + everything else follows normally */
  #assetOverview{ order:0; }
}

/* =========================================================
   Phase 3: Component hardening (no overflow, box-contained)
   ========================================================= */

/* --- Flex/grid children must be allowed to shrink --- */
.pill, .chip, .nav-pill,
.trade-pill, .fav-select,
.news-item, .econ-item,
.tg-tab, .jdai-msg {
  min-width: 0;
  max-width: 100%;
}

/* Prevent long words/strings from leaking in common text containers */
.news-head, .news-meta, .news-summary,
.econ-head, .econ-meta, .econ-row,
.tg-analysis .title, .tg-analysis .subtitle,
.section-title, summary.section-title,
.kv td, .tbl td, .tbl th {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* ---------------------------------------------------------
   Analysis card: tabs + head must never overflow
   --------------------------------------------------------- */
@media (max-width: 720px){
  /* Tabs: scroll horizontally instead of pushing layout */
  .tg-tabs{
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap:nowrap;
    max-width:100%;
    padding-bottom:4px;
  }
  .tg-tab{
    flex:0 0 auto;
    white-space:nowrap;
  }

  /* Head: stack cleanly on small screens */
  .tg-analysis-head{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
    align-items:start;
  }
  .tg-analysis-head .left,
  .tg-analysis-head .right,
  .tg-analysis-head .save-analysis-center{
    width:100%;
    min-width:0;
  }
  .save-analysis-btn{
    width:100%;
    justify-content:center;
  }

  /* Score: allow full width on mobile */
  .score-wrap{ justify-content:flex-start; }
  .score-bar{ max-width:none; width:100%; }

  /* Title/subtitle: allow wrapping instead of overflow */
  .tg-analysis-head .title-wrap .title{
    line-height:1.15;
  }
  .tg-analysis-head .title-wrap .subtitle{
    white-space:normal;
  }
}

/* ---------------------------------------------------------
   Trade pills: convert to a mobile grid so no pill can exceed viewport
   --------------------------------------------------------- */
@media (max-width: 720px){
  .trade-pills{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px !important;
    align-items:stretch;
  }
  .trade-pill{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:2px;
    min-width:0;
  }
  .trade-pill span{ min-width:0; }
}
@media (max-width: 360px){
  .trade-pills{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   News + Econ: stop “headline left / meta right” overflow on mobile
   --------------------------------------------------------- */
@media (max-width: 720px){
  .news-top, .econ-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .news-meta, .econ-meta{
    width:100%;
    flex-wrap:wrap;
    gap:8px;
  }

  /* Clamp headline/summary a bit on phones (prevents huge cards) */
  .news-head a{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
  .news-summary{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
  }
  .econ-head{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }

  /* Actions row shouldn’t push out width */
  .news-actions{
    justify-content:flex-start;
  }
}

/* ---------------------------------------------------------
   Favorites row: stack selects/buttons on mobile (min-width safety)
   --------------------------------------------------------- */
@media (max-width: 720px){
  .fav-row{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
    align-items:stretch;
  }
  .fav-actions{
    width:100%;
    justify-content:space-between;
  }
  .fav-select{
    width:100%;
    min-width:0 !important;
  }
  #hotFavBtn{
    width:100%;
    min-width:0;
  }
}

/* Hot favorites modal list: 1 col on phones, 2 cols on tablets */
@media (max-width: 720px){
  .hotfav-list{ grid-template-columns: 1fr !important; }
}
@media (min-width: 721px) and (max-width: 1080px){
  .hotfav-list{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* ---------------------------------------------------------
   Collapsible component-box summary: allow wrapping safely
   --------------------------------------------------------- */
@media (max-width: 720px){
  details.component-box > summary.section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
  }
}

/* =========================================================
   Phase 4: expanded chart stability (safe vh fallback + dvh when supported)
   ========================================================= */
@media (max-width: 720px){
  body.chart-expanded{
    /* Safe fallback everywhere */
    --h-chart: 58vh;
    --h-vol:   16vh;
    --h-sub:   18vh;

    /* Notches */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Only apply dvh when the engine supports it */
@media (max-width: 720px){
  @supports (height: 100dvh){
    body.chart-expanded{
      --h-chart: 58dvh;
      --h-vol:   16dvh;
      --h-sub:   18dvh;
    }
  }
}

/* =========================================================
   Phase 5: TA/FA Components — responsive cards on phone/tablet
   ========================================================= */

/* Apply to phones + tablets (portrait + most landscape) */
@media (max-width: 900px){

  /* Ensure these tables never force min-width scrolling */
  #boxTA .box-body,
  #boxFA .box-body{
    overflow-x: visible; /* override earlier "overflow-x:auto" behavior for these boxes */
  }

  #taTable,
  #faTable{
    min-width: 0 !important;
    width: 100%;
    display: block;      /* break out of table layout so we can grid the rows */
  }

  #taTable thead,
  #faTable thead{
    display: none;       /* headers not needed in card layout */
  }

  #taTable tbody,
  #faTable tbody{
    display: block;
    width: 100%;
  }

  /* Each row becomes a card */
  #taTable tbody tr,
  #faTable tbody tr{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name score"
      "range range";
    gap: 8px 10px;
    padding: 10px 12px;
    margin: 10px 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #0f141b;
  }

  /* Remove table cell borders/padding inside card */
  #taTable tbody td,
  #faTable tbody td{
    border-bottom: none !important;
    padding: 0 !important;
    min-width: 0;
    max-width: 100%;
  }

  /* Map the 3 TDs into grid areas */
  #taTable tbody tr td:nth-child(1),
  #faTable tbody tr td:nth-child(1){
    grid-area: name;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  #taTable tbody tr td.range-td,
  #faTable tbody tr td.range-td{
    grid-area: range;
    width: 100% !important;
    min-width: 0 !important;   /* override inline CSS min-width:160px */
    display: block;
  }

  #taTable tbody tr td:nth-child(3),
  #faTable tbody tr td:nth-child(3){
    grid-area: score;
    justify-self: end;
    align-self: start;
    min-width: 0;
  }

  /* Component name must wrap safely inside the card */
  #taTable tbody tr td:nth-child(1) span:first-child,
  #faTable tbody tr td:nth-child(1) span:first-child{
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Range bar full width inside cards */
  #taTable .range-wrap,
  #faTable .range-wrap{
    width: 100%;
    min-width: 0;
  }

  /* Slightly larger range visuals on touch devices */
  #taTable .rangebar,
  #faTable .rangebar{ height: 10px; }

  #taTable .range-dot,
  #faTable .range-dot{ width: 14px; height: 14px; }

  /* Make help icon touch-friendly INSIDE TA/FA rows */
  #boxTA .fa-help,
  #boxFA .fa-help{
    inline-size: 22px;
    block-size: 22px;
    font-size: 12px;
    margin-left: 6px;
  }

  /* Score pill slightly bigger for quick scan */
  #taTable tbody tr td:nth-child(3) .pill,
  #faTable tbody tr td:nth-child(3) .pill{
    padding: 4px 10px;
    font-size: .9rem;
  }
}

/* =========================================================
   Phase 6: component-level responsive refinements
   ========================================================= */

/* =========================================================
   Decision card trade plan: respond to card width (not viewport)
   ========================================================= */
#decisionWrap.tg-outlook-mock{
  container-type: inline-size;
  container-name: decisionWrap;
}

@container decisionWrap (max-width: 980px){
  #decisionWrap.tg-outlook-mock .tg-tradebar{ flex-direction:column; }
  #decisionWrap.tg-outlook-mock .tg-tradebar .trade-pill{ border-left:0; }
  #decisionWrap.tg-outlook-mock .tg-tradebar .trade-pill + .trade-pill{ border-top:1px solid rgba(76,89,102,.45); }
}

@container decisionWrap (max-width: 520px){
  #decisionWrap.tg-outlook-mock .tg-tradebar .trade-pill{
    gap:4px;
    padding:11px 10px;
  }
  #decisionWrap.tg-outlook-mock .tg-tradebar .trade-pill .tp-label,
  #decisionWrap.tg-outlook-mock .tg-tradebar .trade-pill span[id]{
    display:block;
    line-height:1.2;
  }
  #decisionWrap.tg-outlook-mock .tg-tradebar .trade-pill span[id]{
    font-size:16px;
  }
}

/* Controls row becomes a grid on mobile */
@media (max-width: 720px){
  #tgControlsRow{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 10px;
    align-items: end;
  }

  /* Symbol spans full width */
  #tgControlsRow label:first-child{
    grid-column: 1 / -1;
  }

  /* Make labels stack nicely */
  #tgControlsRow label{
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  /* Inputs/selects/buttons should fill their grid cell */
  #symbol{ width: 100% !important; }     /* overrides inline width:220px safely on mobile */
  #interval{ width: 100%; }
  #loadBtn{ width: 100%; }

  /* Suggest label goes full width under controls */
  #suggestLabel{
    grid-column: 1 / -1;
    min-width: 0;
  }
}

/* Very small phones: stack interval + load vertically */
@media (max-width: 360px){
  #tgControlsRow{ grid-template-columns: 1fr; }
  #tgControlsRow label:first-child{ grid-column:auto; }
  #suggestLabel{ grid-column:auto; }
}

/* =========================================================
   Phase 7: Cross-browser + touch hardening
   ========================================================= */

/* iOS Safari: prevent input focus zoom (font-size must be >=16px) */
@supports (-webkit-touch-callout: none){
  @media (max-width: 720px){
    input, select, textarea{ font-size:16px; }
  }
}

/* Better touch interaction:
   - chart: allow vertical page scroll, but let horizontal drags be handled by the chart
   - sliders: allow horizontal drag without the page stealing it */
@media (max-width: 1080px){
  #chart, #volchart, #subchart{ touch-action: pan-y pinch-zoom; }
  input[type="range"]{ touch-action: pan-x; }
}

/* Modal open: avoid scrollbars flash on desktop; mobile is handled by tg-modal-lock.js */
body.tg-modal-open{ overflow:hidden; }

/* Safari: remove default details marker so our summary headers look consistent */
details > summary::-webkit-details-marker{ display:none; }

/* Optional: reduce tap highlight on iOS */
button, a, .chip, .nav-pill, .tg-tab{ -webkit-tap-highlight-color: transparent; }

/* drawing-active override: disable chart gestures only while drawing */
body[data-tg-drawing="1"] #chart,
body[data-tg-drawing="1"] #drawCanvas{
  touch-action:none !important;
}

/* =========================================================
   Tablet dashboard Market Pulse containment
   Keep the desktop-shell Market Pulse inside the app card on iPad/tablet
   without touching phone handset or embed layouts.
   ========================================================= */
@media (min-width: 721px) and (max-width: 1180px){
  body[data-page="dashboard"]:not(.tg-phone-handset):not([data-embed-mode="1"]):not(.tg-embed-desktop-mode):not(.tg-embed-mobile-mode) #tgTradeGlassDeskHost{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    box-sizing:border-box;
  }

  body[data-page="dashboard"]:not(.tg-phone-handset):not([data-embed-mode="1"]):not(.tg-embed-desktop-mode):not(.tg-embed-mobile-mode) #tgTradeGlassDeskHost .tg-market-pulse,
  body[data-page="dashboard"]:not(.tg-phone-handset):not([data-embed-mode="1"]):not(.tg-embed-desktop-mode):not(.tg-embed-mobile-mode) #tgTradeGlassDeskHost .tg-market-pulse-strip{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  body[data-page="dashboard"]:not(.tg-phone-handset):not([data-embed-mode="1"]):not(.tg-embed-desktop-mode):not(.tg-embed-mobile-mode) #tgTradeGlassDeskHost .tg-market-pulse-strip{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:8px;
    overflow:hidden;
  }

  body[data-page="dashboard"]:not(.tg-phone-handset):not([data-embed-mode="1"]):not(.tg-embed-desktop-mode):not(.tg-embed-mobile-mode) #tgTradeGlassDeskHost .tg-market-pulse-left{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    flex-wrap:wrap;
  }

  body[data-page="dashboard"]:not(.tg-phone-handset):not([data-embed-mode="1"]):not(.tg-embed-desktop-mode):not(.tg-embed-mobile-mode) #tgTradeGlassDeskHost .tg-market-pulse-chips{
    flex:1 1 280px;
    min-width:0;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  body[data-page="dashboard"]:not(.tg-phone-handset):not([data-embed-mode="1"]):not(.tg-embed-desktop-mode):not(.tg-embed-mobile-mode) #tgTradeGlassDeskHost .tg-market-pulse-actions{
    width:100%;
    max-width:100%;
    min-width:0;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
}