/* VaR page styles — improved contrast & typography */
/* Dark-mode variables for the VaR page. Apply these only when the
   site is NOT in light mode so a global light theme (data-theme="light"
   or body.theme-light) can take precedence. */
html:not([data-theme="light"]), body:not(.theme-light) {
  --bg-900:#04101a; /* page background */
  --bg-800:#07121a;
  --card:#0c1620; /* card background */
  --glass:rgba(255,255,255,0.03);
  --text:#e6eef6; /* main text color */
  --muted:#9fb6c5; /* secondary text */
  --accent:#6ee7b7; /* green accent */
  --accent2:#8bd3ff; /* blue accent */
  --radius:12px;
}
html,body{
  height:100%;
  margin:0;
  font-family: 'Inter', system-ui, Arial, Helvetica, sans-serif;
  background: linear-gradient(180deg,var(--bg-900) 0%, var(--bg-800) 60%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Force a uniform dark background for the VaR page to avoid mixed white/black
   regions introduced by other global styles. Apply only when the site is NOT
   in light mode (so the global theme toggle can override the page). These
   rules use !important to keep the project look on dark mode, but they must
   not prevent light-mode from applying when [data-theme="light"] or
   body.theme-light is active. */
html:not([data-theme="light"]),
body:not([data-theme="light"]),
body:not(.theme-light),
html:not([data-theme="light"]) #app,
body:not([data-theme="light"]) main,
body:not(.theme-light) .content,
body:not(.theme-light) .page,
body:not(.theme-light) .var-container,
body:not(.theme-light) .var-wrap {
  background-image: linear-gradient(180deg, var(--bg-900) 0%, var(--bg-800) 60%) !important;
  background-color: var(--bg-900) !important;
  color: var(--text) !important;
}

/* Ensure the VaR wrapper fills the viewport so you don't see a white area
   below the content on short pages */
.var-wrap{
  min-height: calc(100vh - 120px);
}

.var-container{max-width:1100px;margin:28px auto;padding:20px}
.var-wrap{max-width:1200px;margin:18px auto;padding:18px}
.var-grid{display:grid;grid-template-columns:1fr auto;gap:18px}
@media (max-width:980px){.var-grid{grid-template-columns:1fr}}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 8px 26px rgba(2,6,23,0.6);
  border:1px solid rgba(255,255,255,0.04);
  color:var(--text);
}

.section{background: rgba(255,255,255,0.02);border: 1px solid rgba(255,255,255,0.04);border-radius:12px;padding:18px;margin-top:24px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}

.pill{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  font-size:12px;
  color:var(--muted);
}

.subtitle{color: var(--muted);font-size:13px}
.muted{color: var(--muted);font-size:13px}

.diagram{background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));padding:12px;border-radius:10px}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}

select, input[type=file], button{background:transparent;border:1px solid rgba(255,255,255,0.06);color: var(--accent);padding:8px 10px;border-radius:8px;font-weight:600}

.legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.note{font-size: 0.95em;color: var(--muted)}

/* Chart sizing: keep a reasonable default and cap maximum height */
#varChart{width:100%;aspect-ratio:16/9;height:auto;max-width:420px;max-height:600px;display:block}

/* Make the aside card size to its content and not stretch vertically */
.var-grid aside.card{width:auto;max-width:420px;align-self:start}

/* Combined / individual chart placeholders */
#combined, #individual{width:100%;height:420px}

/* small responsive tweaks for VaR page */
@media (max-width:700px){.var-wrap .subtitle{font-size:12px}.var-wrap h1{font-size:20px}}

/* Mobile-first improvements */
@media (max-width:700px){
  /* Make the grid single-column and ensure aside/card stretches full width */
  .var-grid{grid-template-columns:1fr!important;gap:12px}
  .var-grid aside.card{width:100%;max-width:none;align-self:stretch}

  /* Reduce heavy chart heights for smaller viewports */
  #boxplotViolations{min-height:220px;height:220px}
  #violationsByStock{height:320px;max-height:420px}
  #combined, #individual{height:260px}
  #varChart{aspect-ratio:16/9;max-height:320px}

  /* Improve table readability on narrow screens */
  .results-table{font-size:12px}
  .results-table thead th{white-space:nowrap}
  .results-table tbody td{padding:8px}

  /* Make controls stack vertically */
  .controls{flex-direction:column;align-items:stretch}
  .controls select, .controls input, .controls button{width:100%}

  /* Reduce margins and padding to fit small screens */
  .var-container{padding:12px;margin:12px}
  .var-wrap{padding:12px;margin:8px}
}

/* Improve touch targets on small screens */
@media (max-width:480px){
  .btn-ghost, .cta{padding:10px 12px;font-size:14px}
  .percent-cell{min-width:80px}
}

/* Download buttons look */
.btn-ghost{background:transparent;border:1px dashed rgba(255,255,255,0.06);color: var(--muted);padding:8px 10px;border-radius:8px;font-weight:600;cursor:pointer}

/* Ensure embedded plotly charts get min-height */
.chart-container{min-height:320px}

/* Improve readability for long report text */
.report-text{color:var(--text);font-size:15px;line-height:1.65}
.report-text p{margin:0 0 1rem 0}
.report-text strong{color:var(--text)}
.report-text code{background:rgba(255,255,255,0.03);padding:2px 6px;border-radius:4px;color:var(--accent2)}

/* Links */
.report-text a{color:var(--accent2);text-decoration:underline}

/* Improve table / pre styling in report */
.report-text pre, .report-text code, .report-text table{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:8px;color:var(--text);overflow:auto}

/* Minor utility */
.muted.small{font-size:12px;color:var(--muted)}

/* Formula centering: make formula blocks centered and ensure MathJax/inline SVGs are treated as inline-blocks */
.formula{
  text-align:center;
  margin:1rem 0;
  font-size:1.06rem;
  line-height:1.4;
}
.formula > svg,
.formula .MathJax,
.formula .mjx-chtml,
.formula .mjx-svg{
  display:inline-block;
  vertical-align:middle;
}

.formula .MathJax_Display{ /* extra safety for display math */
  display:block; /* MathJax display blocks keep their own centering but are contained */
}

/* Results table: responsive, compact, numeric alignment and percent bars */
.table-responsive{overflow-x:auto;margin-top:8px}
.results-table{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:13px}
.results-table thead th{background:transparent;color:var(--muted);font-weight:700;padding:8px 12px;text-align:left}
.results-table tbody td{background:rgba(255,255,255,0.01);padding:10px 12px;border:1px solid rgba(255,255,255,0.02)}
.results-table td.num, .results-table th.num{text-align:right}
.results-table tbody tr.highlight td{background:linear-gradient(90deg, rgba(110,231,183,0.06), rgba(139,211,255,0.03));border-color:rgba(110,231,183,0.08);font-weight:600}

/* Highlight best metric cells: smallest MSE, smallest Bias, largest % Fail to Reject H0 */
.results-table td.best-cell{box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);font-weight:700}
.results-table td.best-mse{background: linear-gradient(90deg, rgba(110,231,183,0.08), rgba(110,231,183,0.03));border-color: rgba(110,231,183,0.10);}
.results-table td.best-bias{background: linear-gradient(90deg, rgba(139,211,255,0.06), rgba(139,211,255,0.02));border-color: rgba(139,211,255,0.08);}
.results-table td.best-percent{background: linear-gradient(90deg, rgba(255,210,120,0.06), rgba(255,210,120,0.02));border-color: rgba(255,210,120,0.08);}

.percent-cell{position:relative;height:18px;border-radius:999px;background:rgba(255,255,255,0.02);overflow:hidden;display:inline-block;vertical-align:middle;min-width:110px}
.percent-cell .bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--accent) 0%, #8bd3ff 100%);opacity:0.9}
.percent-cell span{position:relative;display:inline-block;padding:0 8px;font-weight:600;color:var(--text);font-size:12px}

@media (max-width:700px){
  .results-table thead th{font-size:12px}
  .percent-cell{min-width:90px}
}

/* Dark-mode table fixes: make table headers, cells and borders explicit
   when the site is in dark mode so the table doesn't become invisible or
   lose contrast due to other global rules. */
html:not([data-theme="light"]) .results-table thead th,
body:not(.theme-light) .results-table thead th{
  color: var(--muted);
  background: transparent;
}

html:not([data-theme="light"]) .results-table tbody td,
body:not(.theme-light) .results-table tbody td{
  background: rgba(255,255,255,0.01);
  color: var(--text);
  border-color: rgba(255,255,255,0.02);
}

html:not([data-theme="light"]) .results-table tbody tr.highlight td,
body:not(.theme-light) .results-table tbody tr.highlight td{
  background: linear-gradient(90deg, rgba(110,231,183,0.06), rgba(139,211,255,0.03));
  border-color: rgba(110,231,183,0.08);
}

/* Sortable column indicators */
.results-table thead th.sortable{cursor:pointer;position:relative}
.results-table thead th .sort-indicator{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--muted);opacity:0.8}
.results-table thead th.sort-asc .sort-indicator::after{content:'▲'}
.results-table thead th.sort-desc .sort-indicator::after{content:'▼'}

/* Screen-reader only helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Light mode support: when the user/OS prefers light colors, override the
   dark theme variables and adjust key components so text remains readable. */
@media (prefers-color-scheme: light) {
  :root{
    --bg-900: #ffffff;
    --bg-800: #f7f9fb;
    --card: #ffffff;
    --glass: rgba(0,0,0,0.03);
    --text: #06202a;
    --muted: #4f6b73;
    --accent: #0b845f;
    --accent2: #0b6fbf;
  }

  /* Override forced dark backgrounds (use same specificity + !important)
     so these rules win in light mode. */
  html, body, #app, main, .content, .page, .var-container, .var-wrap {
    background-image: none !important;
    background-color: var(--bg-900) !important;
    color: var(--text) !important;
  }

  .card{
    background: var(--card);
    border-color: rgba(0,0,0,0.06);
    color: var(--text);
  }

  .section{ background: var(--card); border-color: rgba(0,0,0,0.06); color:var(--text); }

  .pill{ background: rgba(0,0,0,0.03); color:var(--muted); border-color: rgba(0,0,0,0.06); }

  a, .report-text a, .cta{ color: var(--accent2); }

  .results-table tbody td{ background: #fff; color: var(--text); border-color: rgba(0,0,0,0.06); }
  .results-table thead th{ color: var(--muted); }
  .percent-cell{ background: rgba(0,0,0,0.03); }

  /* Make sure formula blocks are readable in light mode */
  .formula{ color: var(--text); }

  /* charts: ensure canvas contrasts when embedded in light backgrounds */
  #varChart{ max-width:420px; }
}

/* Plotly and SVG text visibility in light mode: force fill/color to use
   the theme variable so labels/axes/legend remain readable when the
   page background is light. This applies when the site is explicitly
   set to light mode via data-theme or body.theme-light. */
html[data-theme="light"] .plotly text,
body.theme-light .plotly text,
html[data-theme="light"] .chart-container svg text,
body.theme-light .chart-container svg text{
  fill: var(--text) !important;
  color: var(--text) !important;
}

/* Also ensure axis lines, grid and legend text contrast in light mode */
html[data-theme="light"] .plotly .g title,
body.theme-light .plotly .g title,
html[data-theme="light"] .plotly .xtick text,
body.theme-light .plotly .xtick text,
html[data-theme="light"] .plotly .ytick text,
body.theme-light .plotly .ytick text,
html[data-theme="light"] .plotly .legendtext,
body.theme-light .plotly .legendtext{
  fill: var(--text) !important;
  color: var(--text) !important;
}