/* ==========================================================================
   MSE Berza — embeddable widget styles (M3 tokens, self-contained)
   ========================================================================== */

/* ---- M3 Color Tokens (Dark — default) ---- */
:root,
[data-theme="dark"] {
  --md-sys-color-primary: #4D8AF0;
  --md-sys-color-on-primary: #001B3E;
  --md-sys-color-primary-container: #003A70;
  --md-sys-color-on-primary-container: #D6E3FF;
  --md-sys-color-secondary: #FFD845;
  --md-sys-color-on-secondary: #3B2E00;
  --md-sys-color-secondary-container: #544300;
  --md-sys-color-on-secondary-container: #FFDF8A;
  --md-sys-color-surface: #0B0E14;
  --md-sys-color-on-surface: #E6E9EF;
  --md-sys-color-surface-variant: #1C2230;
  --md-sys-color-on-surface-variant: #A0A8B5;
  --md-sys-color-outline: #2A3140;
  --md-sys-color-outline-variant: #434B5C;
  --md-sys-color-background: #070A0F;
  --md-sys-color-on-background: #E6E9EF;
  --md-sys-color-positive: #16C784;
  --md-sys-color-negative: #EA3943;
}

/* ---- M3 Color Tokens (Light) ---- */
[data-theme="light"] {
  --md-sys-color-primary: #1A6DF5;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D6E3FF;
  --md-sys-color-on-primary-container: #001B3E;
  --md-sys-color-secondary: #B8860B;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FFDF8A;
  --md-sys-color-on-secondary-container: #3B2E00;
  --md-sys-color-surface: #F8F9FB;
  --md-sys-color-on-surface: #1A1D26;
  --md-sys-color-surface-variant: #EDEFF4;
  --md-sys-color-on-surface-variant: #464D5E;
  --md-sys-color-outline: #C4C9D6;
  --md-sys-color-outline-variant: #AFB5C5;
  --md-sys-color-background: #EDEFF4;
  --md-sys-color-on-background: #1A1D26;
  --md-sys-color-positive: #0FA76C;
  --md-sys-color-negative: #DC2626;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.w-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* Attribution footer */
.w-footer {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  padding: 4px 8px;
  border-top: 1px solid var(--md-sys-color-outline);
  background: var(--md-sys-color-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-footer a { color: var(--md-sys-color-primary); text-decoration: none; font-weight: 600; }
.w-error { padding: 16px; text-align: center; color: var(--md-sys-color-on-surface-variant); font-size: 12px; }
.up { color: var(--md-sys-color-positive); }
.down { color: var(--md-sys-color-negative); }

/* ---- Quote card ---- */
.w-card { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.w-card-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.w-sym { font-size: 16px; font-weight: 800; color: var(--md-sys-color-primary); letter-spacing: .3px; flex-shrink: 0; }
.w-name { font-size: 11px; color: var(--md-sys-color-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.w-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.w-price { font-size: 26px; font-weight: 800; font-feature-settings: 'tnum' 1; }
.w-cur { font-size: 11px; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.w-chg { font-size: 14px; font-weight: 700; font-feature-settings: 'tnum' 1; }
.w-spark { flex: 1 1 auto; min-height: 36px; }
.w-spark canvas { width: 100%; height: 100%; display: block; }

/* ---- Ticker tape ---- */
.w-ticker { overflow: hidden; flex: 1 1 auto; display: flex; align-items: center; }
.w-ticker-track {
  display: inline-flex;
  gap: 30px;
  white-space: nowrap;
  padding-left: 30px;
  animation: w-marquee 40s linear infinite;
  will-change: transform;
}
.w-ticker:hover .w-ticker-track { animation-play-state: paused; }
@keyframes w-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.w-t-item { display: inline-flex; gap: 7px; align-items: baseline; font-size: 13px; font-feature-settings: 'tnum' 1; }
.w-t-sym { font-weight: 700; color: var(--md-sys-color-primary); }
.w-t-price { font-weight: 600; }
.w-t-chg { font-weight: 600; }

/* ---- Chart ---- */
.w-chart-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px 6px; flex-wrap: wrap; flex-shrink: 0;
}
.w-chart-head .w-price { font-size: 20px; }
.w-range { font-size: 11px; color: var(--md-sys-color-on-surface-variant); margin-left: auto; }
.w-chart { flex: 1 1 auto; min-height: 0; padding: 0 8px 8px; }

/* ---- Symbol Overview (tabs + quote strip + range pills) ---- */
.ov-tabs {
  display: flex; gap: 2px; padding: 3px; flex-shrink: 0;
  background: var(--md-sys-color-surface-variant);
  border-bottom: 1px solid var(--md-sys-color-outline);
  overflow-x: auto; scrollbar-width: none;
}
.ov-tabs::-webkit-scrollbar { display: none; }
.ov-tabs button {
  background: transparent; border: none; font-family: inherit;
  color: var(--md-sys-color-on-surface-variant); font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.ov-tabs button.active { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.ov-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px 4px; flex-shrink: 0;
}
.ov-ranges {
  display: flex; gap: 4px; padding: 6px 10px 8px; flex-shrink: 0;
}
.ov-ranges button {
  background: transparent; border: 1px solid transparent; font-family: inherit;
  color: var(--md-sys-color-on-surface-variant); font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; cursor: pointer;
}
.ov-ranges button:hover { color: var(--md-sys-color-on-surface); }
.ov-ranges button.active {
  color: var(--md-sys-color-primary); background: var(--md-sys-color-surface-variant);
  border-color: var(--md-sys-color-outline);
}

/* ---- Dividends table ---- */
.w-div-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 6px; }
.w-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.w-table th {
  text-align: right; padding: 7px 10px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--md-sys-color-on-surface-variant);
  border-bottom: 1px solid var(--md-sys-color-outline);
  position: sticky; top: 0; background: var(--md-sys-color-surface);
  white-space: nowrap;
}
.w-table th:first-child { text-align: left; }
.w-table td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--md-sys-color-outline-variant); font-feature-settings: 'tnum' 1; white-space: nowrap; }
.w-table td:first-child { text-align: left; font-weight: 700; color: var(--md-sys-color-primary); }
.w-table td.w-name-cell {
  text-align: left; font-weight: 400; color: var(--md-sys-color-on-surface-variant);
  max-width: 170px; overflow: hidden; text-overflow: ellipsis;
}