/* =========================================================
   TSA Scanner — Canonical Professional Chart UI
   Reference locked: 2026-10-03
   Chart-only visual layer
   ========================================================= */

#chartSymbol {
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.20);
  background: #111c2e;
  color: #f8fafc;
  font-size: 18px;
  outline: none;
  box-sizing: border-box;
}

#chartSymbol:focus {
  border-color: rgba(16,185,129,.80);
  box-shadow: 0 0 0 2px rgba(16,185,129,.12);
}

/* ---------- Timeframes ---------- */

#chartTfTabs {
  display: flex !important;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 4px;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 13px;
  background: #111c2e;
  overflow: hidden;
}

#chartTfTabs [data-tf] {
  flex: 1;
  min-width: 48px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #cbd5e1;
  font-size: 15px;
  font-weight: 700;
  transition:
    background .16s ease,
    color .16s ease,
    transform .12s ease;
}

#chartTfTabs [data-tf]:active {
  transform: scale(.96);
}

#chartTfTabs [data-tf].active {
  background: #00b887;
  color: #ffffff;
}

/* ---------- Chart type ---------- */

#chartType {
  min-height: 52px;
  border-radius: 13px;
  border: 1px solid rgba(148,163,184,.16);
  background: #111c2e;
  color: #f8fafc;
  padding: 0 15px;
  font-size: 15px;
}

/* ---------- Main professional chart ---------- */

#proChartWrap {
  position: relative;
  width: 100%;
  min-height: 610px;
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.18);
  background: #07111f;
  overflow: hidden;
  touch-action: none;
  box-sizing: border-box;
}

#proChart {
  width: 100% !important;
  min-height: 610px;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

/* ---------- Indicator / FX controls ---------- */

#indicatorBtn,
#chartRefresh,
#chartReset,
#chartLatest,
#chartFullscreen {
  min-width: 52px;
  min-height: 52px;
  border-radius: 13px;
  border: 1px solid rgba(148,163,184,.18);
  background: #111c2e;
  color: #e2e8f0;
  transition:
    transform .12s ease,
    border-color .15s ease,
    background .15s ease;
}

#indicatorBtn:active,
#chartRefresh:active,
#chartReset:active,
#chartLatest:active,
#chartFullscreen:active {
  transform: scale(.95);
}

/* ---------- Drawing tools ---------- */

#drawingToolbar {
  border-radius: 12px;
}

#drawingToolbar [data-tool] {
  border-radius: 10px;
}

/* ---------- Indicator panes ---------- */

#indicatorPanel {
  border-radius: 14px;
  background: #081321;
}



/* ---------- Mobile ---------- */

@media (max-width: 720px) {
  #chartSymbol {
    min-height: 56px;
    font-size: 17px;
  }

  #chartTfTabs {
    width: 100%;
  }

  #proChartWrap,
  #proChart {
    min-height: 640px;
  }
}

/* ---------- Fullscreen ---------- */

.fullscreen-chart #proChartWrap,
#proChartWrap.fullscreen-chart {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: #050d18 !important;
}

.fullscreen-chart #proChart,
#proChartWrap.fullscreen-chart #proChart {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}


/* === TSA STEP 01 OUTER FRAME START === */

:root{
  --tsa-chart-side: 12px;
  --tsa-chart-bottom-clearance: 92px;
  --tsa-chart-shell: #07111f;
  --tsa-chart-panel: #0b1626;
  --tsa-chart-border: rgba(148,163,184,.16);
}

/* Detect only the page that contains the professional chart */
:is(.page,[data-page],main,section):has(#proChartWrap){
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-left: var(--tsa-chart-side);
  padding-right: var(--tsa-chart-side);
  padding-bottom: calc(
    var(--tsa-chart-bottom-clearance) + env(safe-area-inset-bottom)
  );
  background: var(--tsa-chart-shell);
  overflow-x: hidden;
}

/* Remove unnecessary internal width restriction */
:is(.page,[data-page],main,section):has(#proChartWrap) > *{
  max-width: none;
}

/* Professional chart shell */
#proChartWrap{
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 10px !important;

  border: 1px solid var(--tsa-chart-border) !important;
  border-radius: 12px !important;
  background: var(--tsa-chart-panel) !important;

  overflow: hidden !important;
}

/* Keep canvas flush with its shell */
#proChart{
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Phone framing — reference-like narrow side margins */
@media (max-width: 720px){
  :root{
    --tsa-chart-side: 8px;
    --tsa-chart-bottom-clearance: 92px;
  }

  :is(.page,[data-page],main,section):has(#proChartWrap){
    padding-top: 8px;
  }

  #proChartWrap{
    border-radius: 10px !important;
  }
}

/* === TSA STEP 01 OUTER FRAME END === */


/* === TSA STEP 01A FRAME CORRECTION START === */

/* Remove inherited wide gutters from chart-page wrappers */
:is(.page,[data-page],main,section):has(#proChartWrap){
  padding-left: 6px !important;
  padding-right: 6px !important;
}

:is(.page,[data-page],main,section):has(#proChartWrap) > div{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep major chart controls aligned to the same frame */
:is(.page,[data-page],main,section):has(#proChartWrap)
:is(#proChartWrap,#chartSymbol,#chartTfTabs){
  max-width: none !important;
}

/* Do not create artificial extra page height */
#proChartWrap{
  min-height: 0 !important;
}

/* Canvas remains responsive; JS controls actual plotting height */
#proChart{
  min-height: 0 !important;
}

/* Bottom space only for fixed mobile navigation */
:is(.page,[data-page],main,section):has(#proChartWrap){
  padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}

/* Mobile reference framing */
@media (max-width:720px){
  :is(.page,[data-page],main,section):has(#proChartWrap){
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 6px !important;
  }

  #proChartWrap{
    margin-top: 8px !important;
    border-radius: 9px !important;
  }
}

/* === TSA STEP 01A FRAME CORRECTION END === */


/* === TSA THEME TEXT START === */

/* ---------- DARK MODE ---------- */
html[data-theme="dark"],
body[data-theme="dark"],
html.dark,
body.dark,
.theme-dark {
  --tsa-ui-text: #ffffff;
  --tsa-ui-muted: rgba(255,255,255,.68);
  --tsa-ui-placeholder: rgba(255,255,255,.52);
}

/* ---------- LIGHT MODE ---------- */
html[data-theme="light"],
body[data-theme="light"],
html.light,
body.light,
.theme-light {
  --tsa-ui-text: #000000;
  --tsa-ui-muted: rgba(0,0,0,.68);
  --tsa-ui-placeholder: rgba(0,0,0,.48);
}

/* Default fallback follows system theme */
:root {
  --tsa-ui-text: #ffffff;
  --tsa-ui-muted: rgba(255,255,255,.68);
  --tsa-ui-placeholder: rgba(255,255,255,.52);
}



/* Standard UI text */
body,
main,
section,
article,
header,
footer,
nav,
h1,h2,h3,h4,h5,h6,
p,
span,
label,
small,
strong,
b,
button,
a,
input,
textarea,
select,
option,
.tab,
.btn,
.card,
.panel,
.toolbar {
  color: var(--tsa-ui-text);
}

/* Form inputs */
input,
textarea,
select,
button {
  color: var(--tsa-ui-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--tsa-ui-placeholder) !important;
}

/* Common muted/help text */
.muted,
.text-muted,
.subtext,
.subtitle,
.helper,
.hint,
.caption {
  color: var(--tsa-ui-muted) !important;
}

/*
   Keep financial semantic colors intact.
   These must NOT turn white/black.
*/
.positive,
.positive-text,
.gain,
.up,
.profit,
.success,
.text-success {
  color: #22c55e !important;
}

.negative,
.negative-text,
.loss,
.down,
.danger,
.text-danger,
.text-error {
  color: #ef4444 !important;
}

.warning,
.text-warning {
  color: #f59e0b !important;
}

/* === TSA THEME TEXT END === */


/* === TSA CHART LIGHT SURFACE FIX START === */

/* -----------------------------
   LIGHT MODE — CHART ONLY
   ----------------------------- */

html[data-theme="light"] :is(.page,[data-page],main,section):has(#proChartWrap),
body[data-theme="light"] :is(.page,[data-page],main,section):has(#proChartWrap),
html.light :is(.page,[data-page],main,section):has(#proChartWrap),
body.light :is(.page,[data-page],main,section):has(#proChartWrap),
.theme-light :is(.page,[data-page],main,section):has(#proChartWrap){
  background: #f7f8fb !important;
  color: #111827 !important;
}

/* Main chart-related panels */
html[data-theme="light"] :is(
  .chart-commandbar,
  .symbol-search,
  #chartTfTabs,
  #proChartWrap,
  #indicatorPanel
),
body[data-theme="light"] :is(
  .chart-commandbar,
  .symbol-search,
  #chartTfTabs,
  #proChartWrap,
  #indicatorPanel
),
html.light :is(
  .chart-commandbar,
  .symbol-search,
  #chartTfTabs,
  #proChartWrap,
  #indicatorPanel
),
body.light :is(
  .chart-commandbar,
  .symbol-search,
  #chartTfTabs,
  #proChartWrap,
  #indicatorPanel
),
.theme-light :is(
  .chart-commandbar,
  .symbol-search,
  #chartTfTabs,
  #proChartWrap,
  #indicatorPanel
){
  background: #ffffff !important;
  border-color: #d8dee8 !important;
  color: #111827 !important;
}

/* Search */
html[data-theme="light"] #chartSymbol,
body[data-theme="light"] #chartSymbol,
html.light #chartSymbol,
body.light #chartSymbol,
.theme-light #chartSymbol{
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #d8dee8 !important;
}

/* Select / buttons / chart controls */
html[data-theme="light"] :is(
  #chartType,
  #indicatorBtn,
  #chartRefresh,
  #chartReset,
  #chartLatest,
  #chartFullscreen,
  #chartTfTabs [data-tf],
  #drawingToolbar [data-tool]
),
body[data-theme="light"] :is(
  #chartType,
  #indicatorBtn,
  #chartRefresh,
  #chartReset,
  #chartLatest,
  #chartFullscreen,
  #chartTfTabs [data-tf],
  #drawingToolbar [data-tool]
),
html.light :is(
  #chartType,
  #indicatorBtn,
  #chartRefresh,
  #chartReset,
  #chartLatest,
  #chartFullscreen,
  #chartTfTabs [data-tf],
  #drawingToolbar [data-tool]
),
body.light :is(
  #chartType,
  #indicatorBtn,
  #chartRefresh,
  #chartReset,
  #chartLatest,
  #chartFullscreen,
  #chartTfTabs [data-tf],
  #drawingToolbar [data-tool]
),
.theme-light :is(
  #chartType,
  #indicatorBtn,
  #chartRefresh,
  #chartReset,
  #chartLatest,
  #chartFullscreen,
  #chartTfTabs [data-tf],
  #drawingToolbar [data-tool]
){
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d8dee8 !important;
}

/* Active timeframe keeps accent color */
html[data-theme="light"] #chartTfTabs [data-tf].active,
body[data-theme="light"] #chartTfTabs [data-tf].active,
html.light #chartTfTabs [data-tf].active,
body.light #chartTfTabs [data-tf].active,
.theme-light #chartTfTabs [data-tf].active{
  background: #10b981 !important;
  color: #ffffff !important;
}

/* Suggestions */
html[data-theme="light"] #symbolSuggestions,
body[data-theme="light"] #symbolSuggestions,
html.light #symbolSuggestions,
body.light #symbolSuggestions,
.theme-light #symbolSuggestions{
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d8dee8 !important;
}

/* -----------------------------
   System-light fallback
   ----------------------------- */



/* === TSA CHART LIGHT SURFACE FIX END === */


/* === TSA DESKTOP CHART STEP01 START === */

/*
   MOBILE / ANDROID
   ----------------
   Default state stays exactly as the existing application.
*/
.tsa-chart-desktop-side-shell{
  display:none;
}

/*
   DESKTOP ONLY
   ------------
   Fine pointer + hover avoids changing normal Android layout.
*/
@media
  (min-width:960px)
  and (hover:hover)
  and (pointer:fine)
{

  .tsa-chart-workspace-host{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:none !important;

    min-height:
      var(--tsa-chart-workspace-height, calc(100dvh - 140px));

    margin:0 !important;
    padding:0 !important;

    display:grid !important;

    /*
       Large primary Chart area
       + responsive right desktop panel
    */
    grid-template-columns:
      minmax(0, 1fr)
      clamp(270px, 23vw, 380px);

    column-gap:8px;

    align-items:start;
    align-content:start;

    background:var(--tsa-chart-shell, #07111f);
  }

  /*
     Existing Chart content stays on LEFT.
     Nothing inside it is redesigned in this step.
  */
  .tsa-chart-workspace-host >
  :not(.tsa-chart-desktop-side-shell){
    grid-column:1;
    min-width:0;
    max-width:none;
  }

  /*
     New RIGHT desktop workspace shell.
     Content comes in a later approved step.
  */
  .tsa-chart-desktop-side-shell{
    display:block;

    grid-column:2;
    grid-row:1 / span 999;

    box-sizing:border-box;

    width:100%;
    min-width:0;

    min-height:
      var(--tsa-chart-workspace-height, calc(100dvh - 140px));

    border-left:
      1px solid rgba(148,163,184,.18);

    background:#0b1524;

    overflow:auto;
  }

  .tsa-desktop-side-placeholder{
    min-height:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:5px;

    padding:20px;

    color:#94a3b8;
    text-align:center;

    opacity:.55;
  }

  .tsa-desktop-side-placeholder strong{
    color:#e5e7eb;
    font-size:15px;
  }

  .tsa-desktop-side-placeholder span{
    font-size:12px;
  }

  /*
     Remove desktop card-width limitation.
  */
  .tsa-chart-workspace-host #proChartWrap{
    width:100% !important;
    max-width:none !important;
  }
}

/* === TSA DESKTOP CHART STEP01 END === */


/* === TSA DESKTOP STEP01B VIEWPORT FIT START === */

@media (min-width:960px) and (hover:hover) and (pointer:fine) {

  .tsa-chart-workspace-host {
    height: var(--tsa-desktop-chart-height, calc(100dvh - 130px)) !important;
    min-height: 0 !important;
    max-height: var(--tsa-desktop-chart-height, calc(100dvh - 130px)) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .tsa-chart-workspace-host #proChartWrap {
    height: var(--tsa-desktop-chart-body-height, calc(100dvh - 260px)) !important;
    min-height: 0 !important;
    max-height: var(--tsa-desktop-chart-body-height, calc(100dvh - 260px)) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .tsa-chart-workspace-host #proChart {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .tsa-chart-desktop-side-shell {
    height: var(--tsa-desktop-chart-height, calc(100dvh - 130px)) !important;
    min-height: 0 !important;
    max-height: var(--tsa-desktop-chart-height, calc(100dvh - 130px)) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* === TSA DESKTOP STEP01B VIEWPORT FIT END === */












/* === TSA CHART NAVIGATION REGRESSION FIX V1 START === */

@media (min-width:960px) and (hover:hover) and (pointer:fine){

  /*
    App navigation owns page visibility.
    Desktop Chart layout must NEVER override it.
  */

  #page-chart:not(.active){
    display:none !important;
  }

  .page:not(.active).tsa-chart-workspace-host{
    display:none !important;
  }

  .page:not(.active) .tsa-chart-workspace-host{
    display:none !important;
  }

}

/* === TSA CHART NAVIGATION REGRESSION FIX V1 END === */


/* === TSA CHART STABLE BASELINE START === */

@media (min-width:960px) and (hover:hover) and (pointer:fine){

  /* Navigation owns page visibility */
  #page-chart:not(.active){
    display:none !important;
  }

  /* Active chart remains fully interactive */
  #page-chart.active,
  #page-chart.active .tsa-chart-workspace-host,
  #page-chart.active #proChartWrap,
  #page-chart.active #proChart{
    pointer-events:auto !important;
  }

  /*
    Do not force-move drawing tools.
    Existing application structure controls their position.
  */

}

/* === TSA CHART STABLE BASELINE END === */