/* Final brand layer. Load after themes.css and runtime.css.
   Light: authentic İş Varant #0032a0 on a white app canvas.
   Dark: neutral İşCep-reference charcoal; brighter blue for data and selection,
   a deeper blue for small white button text (WCAG AA).
   The official transparent PNG is the only mark recoloured in dark mode. */
:root,
body.theme-dark {
  color-scheme: dark;
  --brand: #0032a0;
  --bg: #101112;
  --surface: #1c1d1f;
  --raised: #232528;
  --ink: #f3f3f5;
  --muted: #acafb7;
  --accent: #3d7bff;
  --blue: #2360d7;
  --lightblue: #80adff;
  --green: #7ec9a8;
  --red: #ee9993;
  --guide: #45484f;
  --chart-guide: #45484f;
  --chart-zero: #7c838e;
  --chart-comparison: #b8bdc6;
  --chart-brand: #80adff;
  --chart-radar-fill: rgba(61, 123, 255, 0.23);
  --selection-bg: #283347;
  --nav-bg: rgba(35, 37, 40, 0.96);
  --ruler-fade: rgba(16, 17, 18, 0);
}
body.theme-light {
  color-scheme: light;
  --brand: #0032a0;
  --bg: #fff;
  --surface: #f4f5f7;
  --raised: #e9ebef;
  --ink: #17191e;
  --muted: #626773;
  --accent: #0032a0;
  --blue: #0032a0;
  --lightblue: #0032a0;
  --green: #187458;
  --red: #b64139;
  --guide: #c8cdd5;
  --chart-guide: #c8cdd5;
  --chart-zero: #7a828e;
  --chart-comparison: #77818d;
  --chart-brand: #0032a0;
  --chart-radar-fill: rgba(0, 50, 160, 0.14);
  --selection-bg: #e8edf8;
  --light-selected: #e8edf8;
  --light-blue-ink: #0032a0;
  --nav-bg: rgba(244, 245, 247, 0.96);
  --ruler-fade: rgba(255, 255, 255, 0);
}

/* The desktop is an empty white stage; the device retains its chosen theme. */
body,
body.theme-dark,
body.theme-light {
  background: #fff;
}
.phone,
.trade,
.bottom-dock,
.risk-fixed {
  background: var(--bg);
}
.brand-logo,
.wordmark > img {
  display: block;
  width: 112px;
  height: 25px;
  object-fit: contain;
  object-position: left center;
  border-radius: 0;
  background: transparent;
}
.theme-dark .brand-logo,
.theme-dark .wordmark > img {
  filter: brightness(0) invert(1);
}
.theme-light .brand-logo,
.theme-light .wordmark > img {
  filter: none;
}
.theme-light .wordmark {
  color: var(--brand);
}

/* Surface roles also cover selectors and research panels that previously held
   hard-coded blue or white fills. Company logos are deliberately untouched. */
.theme-dark
  :is(
    .panel,
    .list,
    .tool-mini,
    .selection,
    .research-panel,
    .contract-facts,
    .profile-detail,
    .calm-profile,
    .news-mark,
    .round,
    .search
  ),
.theme-light
  :is(
    .panel,
    .list,
    .tool-mini,
    .selection,
    .research-panel,
    .contract-facts,
    .profile-detail,
    .calm-profile,
    .news-mark,
    .round,
    .search
  ) {
  background: var(--surface);
  color: var(--ink);
}
.theme-dark :is(.calc-entry, .warrants-entry),
.theme-light :is(.calc-entry, .warrants-entry) {
  background: var(--surface);
  color: var(--ink);
}
.theme-dark :is(.calc-entry small, .warrants-entry small),
.theme-light :is(.calc-entry small, .warrants-entry small) {
  color: var(--muted);
}
.theme-dark :is(.calc-entry > .icon, .warrants-entry > .icon),
.theme-light :is(.calc-entry > .icon, .warrants-entry > .icon) {
  color: var(--lightblue);
}
.theme-dark :is(.blue, .details-link),
.theme-light :is(.blue, .details-link) {
  color: var(--lightblue);
}
.flow span:first-child,
.dot:not(.silver):not(.white) {
  background: var(--accent);
}
.flow span:last-child,
.dot.silver,
.dot.white,
.legend .white {
  background: var(--chart-comparison);
}

/* Selection never changes the page ground. Primary actions keep white labels. */
.theme-dark .nav,
.theme-light .nav {
  background: var(--nav-bg);
  box-shadow: none;
}
.theme-dark .nav a,
.theme-light .nav a {
  color: var(--muted);
}
.theme-dark .nav a.active,
.theme-light .nav a.active {
  background: var(--selection-bg);
  color: var(--lightblue);
}
.theme-dark .tabs button.active,
.theme-light .tabs button.active,
.theme-dark .range-tabs button.active,
.theme-light .range-tabs button.active {
  background: var(--raised);
  color: var(--ink);
}
.theme-dark .direction,
.theme-light .direction,
.theme-dark .curve-mode,
.theme-light .curve-mode {
  background: var(--surface);
}
.theme-dark .direction button.active,
.theme-light .direction button.active,
.theme-dark .curve-mode button.active,
.theme-light .curve-mode button.active {
  background: var(--selection-bg);
  color: var(--lightblue);
}
.theme-dark .direction button small,
.theme-light .direction button small {
  color: var(--muted);
}
.theme-dark .date,
.theme-light .date {
  background: var(--surface);
  color: var(--muted);
}
.theme-dark .date strong,
.theme-light .date strong {
  color: var(--ink);
}
.theme-dark .date.active,
.theme-light .date.active {
  background: var(--blue);
  color: #fff;
}
.theme-dark .date.active strong,
.theme-light .date.active strong {
  color: #fff;
}
.theme-dark .result-row.selected,
.theme-light .result-row.selected {
  background: var(--selection-bg);
  color: var(--ink);
}
.theme-dark .trade button,
.theme-light .trade button,
.theme-dark .curve-foot button:first-child,
.theme-light .curve-foot button:first-child {
  background: var(--raised);
  color: var(--ink);
}
.theme-dark .trade button.primary,
.theme-light .trade button.primary,
.theme-dark .curve-foot button:not(:first-child),
.theme-light .curve-foot button:not(:first-child),
.theme-dark .ac-primary,
.theme-light .ac-primary {
  background: var(--blue);
  color: #fff;
}
.theme-dark .trade button.primary small,
.theme-light .trade button.primary small,
.theme-dark .curve-foot button:not(:first-child) span,
.theme-light .curve-foot button:not(:first-child) span {
  color: #fff;
}
.theme-dark .trade button:not(.primary) small,
.theme-light .trade button:not(.primary) small {
  color: var(--muted);
}
.theme-dark .calculator-panel input,
.theme-light .calculator-panel input {
  background: var(--raised);
  color: var(--ink);
}
.theme-dark .ac-primary:disabled,
.theme-light .ac-primary:disabled {
  background: var(--surface);
  color: var(--muted);
}

/* SVG presentation attributes from the approved study are mapped by meaning,
   not by applying a filter to the chart or to company identity marks. */
.theme-dark .stock-plot .line,
.theme-light .stock-plot .line {
  stroke: var(--chart-brand);
}
:is(.theme-dark, .theme-light) .stock-plot circle[fill="#74baff"] {
  fill: var(--chart-brand);
}
:is(.theme-dark, .theme-light) .stock-plot stop[stop-color="#0075d5"] {
  stop-color: var(--accent);
}
:is(.theme-dark, .theme-light) .sensitivity-plot [stroke="#38a4ff"] {
  stroke: var(--chart-brand);
}
:is(.theme-dark, .theme-light) .sensitivity-plot [fill="#38a4ff"] {
  fill: var(--chart-brand);
}
:is(.theme-dark, .theme-light) .sensitivity-plot [stroke="#c5c7cd"] {
  stroke: var(--chart-comparison);
}
:is(.theme-dark, .theme-light) .sensitivity-plot [stroke="#ffffff20"] {
  stroke: var(--chart-guide);
}
:is(.theme-dark, .theme-light) .radar [fill="#0075d555"] {
  fill: var(--chart-radar-fill);
}
:is(.theme-dark, .theme-light) .radar [stroke="#51b3ff"] {
  stroke: var(--chart-brand);
}
:is(.theme-dark, .theme-light) .radar [stroke="#ffffff27"],
:is(.theme-dark, .theme-light) .radar [stroke="#ffffff20"] {
  stroke: var(--chart-guide);
}
:is(.theme-dark, .theme-light) .radar text {
  fill: var(--muted) !important;
}
:is(.theme-dark, .theme-light) .radar text[style*="fill"],
:is(.theme-dark, .theme-light) .radar text.value,
:is(.theme-dark, .theme-light) .radar .radar-value {
  fill: var(--ink) !important;
}
:is(.theme-dark, .theme-light) .curve-graph [stroke="#ffffff12"] {
  stroke: var(--chart-guide);
}
:is(.theme-dark, .theme-light) .curve-graph [stroke="#ffffff42"] {
  stroke: var(--chart-zero);
}
:is(.theme-dark, .theme-light) .curve-graph .cross {
  stroke: var(--chart-zero);
}
:is(.theme-dark, .theme-light) .curve-graph circle[fill="#000"] {
  fill: var(--bg);
}
:is(.theme-dark, .theme-light) .ruler-wrap [stroke="#fff"] {
  stroke: var(--ink);
}
:is(.theme-dark, .theme-light) .ruler-wrap:before,
:is(.theme-dark, .theme-light) .ruler-wrap:after {
  background: linear-gradient(90deg, var(--bg), var(--ruler-fade));
}
:is(.theme-dark, .theme-light) .ac-motion-path {
  stroke: var(--chart-brand);
}
:is(.theme-dark, .theme-light) .ac-motion-point {
  fill: var(--chart-brand);
}

@media (max-width: 600px), (hover: none) and (pointer: coarse) {
  body,
  body.theme-dark,
  body.theme-light {
    background: var(--bg) !important;
  }
}