/* ==========================================================================
   YaadInvest — JSE Market Dashboard
   Dark fintech theme. Semantic colour: green = up, red = down, gold = accent.
   ========================================================================== */
:root{
  --bg:        #0a0e14;
  --bg-2:      #0e141d;
  --panel:     #111925;
  --panel-2:   #0c121b;
  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.12);
  --text:      #e7edf5;
  --muted:     #8a97a8;
  --muted-2:   #5f6b7c;
  --up:        #16c784;
  --up-soft:   rgba(22,199,132,.14);
  --down:      #ea3943;
  --down-soft: rgba(234,57,67,.14);
  --gold:      #f5b301;
  --accent:    #3ea6ff;
  --radius:    16px;
  --shadow:    0 10px 40px -12px rgba(0,0,0,.55);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body{
  padding-top:0;
  background:
    radial-gradient(1100px 600px at 82% -10%, rgba(62,166,255,.10), transparent 60%),
    radial-gradient(900px 500px at 5% 0%, rgba(245,179,1,.07), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1,"cv01" 1;
}

/* ----------------------------------------------------------------- Nav --- */
.yi-nav{ position:sticky; top:0; z-index:50;
  background:rgba(10,14,20,.78); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); }
.yi-nav__inner{ max-width:1240px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; }
.yi-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--text); }
.yi-brand__mark{ width:26px; height:26px; border-radius:8px;
  background:conic-gradient(from 210deg, var(--gold), var(--up) 45%, var(--accent) 80%, var(--gold));
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 6px 18px -6px rgba(245,179,1,.6); }
.yi-brand__text{ font-weight:800; letter-spacing:-.02em; font-size:19px; }
.yi-brand__text span{ color:var(--gold); }
.yi-nav__links{ list-style:none; display:flex; gap:6px; margin:0; padding:0; }
.yi-nav__links a{ display:block; padding:8px 14px; border-radius:9px; text-decoration:none;
  color:var(--muted); font-weight:600; font-size:14px; transition:.15s; }
.yi-nav__links a:hover{ color:var(--text); background:var(--line); }
.yi-nav__links a.active{ color:var(--text); background:var(--line-2); }

/* -------------------------------------------------------------- Layout --- */
.yi-dash{ max-width:1240px; margin:0 auto; padding:28px 24px 40px;
  display:flex; flex-direction:column; gap:20px; }

/* ---------------------------------------------------------------- Hero --- */
.yi-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.yi-eyebrow{ text-transform:uppercase; letter-spacing:.16em; font-size:11.5px;
  font-weight:700; color:var(--gold); margin-bottom:8px; }
.yi-hero h1{ font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-.025em; margin:0; }
.yi-hero__sub{ color:var(--muted); margin:8px 0 0; font-size:14px; }
.yi-hero__status{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.yi-status-chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px;
  border:1px solid var(--line-2); border-radius:999px; font-size:13px; font-weight:600;
  background:var(--panel); text-transform:capitalize; }
.yi-dot{ width:9px; height:9px; border-radius:50%; background:var(--muted); }
.yi-status-chip.is-open .yi-dot{ background:var(--up); box-shadow:0 0 0 4px var(--up-soft); animation:pulse 2s infinite; }
.yi-status-chip.is-closed .yi-dot{ background:var(--down); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.yi-status-meta{ display:flex; gap:22px; }
.yi-status-meta > div{ display:flex; flex-direction:column; font-size:13px; font-weight:600; }
.yi-status-meta__k{ color:var(--muted-2); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.yi-refresh{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; cursor:pointer;
  border:1px solid var(--line-2); border-radius:11px; background:var(--panel); color:var(--text);
  font-weight:600; font-size:13px; transition:.15s; }
.yi-refresh:hover{ border-color:var(--accent); color:#fff; }
.yi-refresh.is-busy{ opacity:.6; pointer-events:none; }
.yi-refresh.is-busy svg{ animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* --------------------------------------------------------------- Cards --- */
.yi-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.yi-card{ position:relative; overflow:hidden; padding:20px; border-radius:var(--radius);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); box-shadow:var(--shadow); min-height:150px; }
.yi-card--skeleton{ background:var(--panel); opacity:.5;
  animation:shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer{ 0%,100%{opacity:.35} 50%{opacity:.6} }
.yi-card__top{ display:flex; align-items:center; justify-content:space-between; }
.yi-card__label{ font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.01em; }
.yi-card__tag{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted-2); border:1px solid var(--line-2); border-radius:6px; padding:2px 7px; }
.yi-card__level{ font-family:var(--mono); font-size:34px; font-weight:700; letter-spacing:-.02em;
  margin:14px 0 4px; }
.yi-card__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.yi-card__spark{ position:absolute; right:0; bottom:0; left:0; height:46px; opacity:.9; }
.yi-card__spark svg{ width:100%; height:100%; display:block; }

.yi-chg{ display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:14px;
  font-family:var(--mono); padding:3px 9px; border-radius:8px; }
.yi-chg.up{ color:var(--up); background:var(--up-soft); }
.yi-chg.down{ color:var(--down); background:var(--down-soft); }
.yi-chg.flat{ color:var(--muted); background:var(--line); }
.yi-chg .arw{ font-size:11px; }

.yi-card__breadth{ display:flex; gap:12px; font-size:12px; color:var(--muted); font-weight:600;
  margin-top:2px; z-index:1; position:relative; }
.yi-card__breadth b{ font-family:var(--mono); }
.yi-card__breadth .u{ color:var(--up); } .yi-card__breadth .d{ color:var(--down); }

/* -------------------------------------------------------------- Panels --- */
.yi-panel{ background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); }
.yi-panel__head{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:16px; }
.yi-panel__title{ font-size:16px; font-weight:700; margin:0; letter-spacing:-.01em; }
.yi-panel__meta{ display:flex; align-items:baseline; gap:12px; margin-top:6px; }
.yi-panel__meta #chartLevel{ font-family:var(--mono); font-size:22px; font-weight:700; }
.yi-panel__hint{ font-size:12px; color:var(--muted); font-weight:600; }
.yi-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ------------------------------------------------------------ Controls --- */
.yi-controls{ display:flex; gap:10px; flex-wrap:wrap; }
.yi-seg{ display:inline-flex; padding:3px; gap:2px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:11px; }
.yi-seg button{ border:0; background:transparent; color:var(--muted); cursor:pointer;
  font-weight:600; font-size:12.5px; padding:6px 12px; border-radius:8px; transition:.15s; }
.yi-seg button:hover{ color:var(--text); }
.yi-seg button.is-active{ background:var(--line-2); color:#fff; }

/* --------------------------------------------------------------- Chart --- */
.yi-chartpanel .yi-chart{ position:relative; width:100%; height:340px; }
.yi-chart svg{ width:100%; height:100%; display:block; overflow:visible; }
.yi-tooltip{ position:absolute; transform:translate(-50%,-115%); pointer-events:none;
  background:rgba(8,12,18,.96); border:1px solid var(--line-2); border-radius:10px;
  padding:8px 11px; font-size:12px; white-space:nowrap; z-index:5;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.7); }
.yi-tooltip .t-date{ color:var(--muted); font-weight:600; margin-bottom:2px; }
.yi-tooltip .t-lvl{ font-family:var(--mono); font-weight:700; font-size:14px; }

/* ------------------------------------------------------------- Breadth --- */
.yi-breadth{ display:flex; flex-direction:column; gap:14px; }
.yi-breadth__bar{ display:flex; height:34px; border-radius:9px; overflow:hidden; background:var(--panel-2);
  border:1px solid var(--line); }
.yi-breadth__seg{ display:flex; align-items:center; justify-content:center; font-size:12px;
  font-weight:700; color:#06121a; min-width:0; transition:width .5s ease; }
.yi-breadth__seg.up{ background:var(--up); } .yi-breadth__seg.down{ background:var(--down); }
.yi-breadth__seg.flat{ background:#3a4658; color:var(--text); }
.yi-breadth__legend{ display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.yi-breadth__legend div{ display:flex; align-items:center; gap:8px; font-weight:600; }
.yi-breadth__legend b{ font-family:var(--mono); }
.yi-swatch{ width:10px; height:10px; border-radius:3px; }
.yi-swatch.up{ background:var(--up);} .yi-swatch.down{ background:var(--down);} .yi-swatch.flat{ background:#3a4658;}
.yi-breadth__foot{ display:flex; align-items:center; gap:14px; margin-top:6px;
  padding-top:16px; border-top:1px solid var(--line); flex-wrap:wrap; }
.yi-bstat{ display:flex; flex-direction:column; gap:3px; }
.yi-bstat__k{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); font-weight:700; }
.yi-bstat b{ font-family:var(--mono); font-size:20px; }
.yi-breadth__tone{ margin-left:auto; align-self:center; font-size:12.5px; font-weight:700;
  padding:6px 12px; border-radius:999px; }
.yi-breadth__tone.up{ color:var(--up); background:var(--up-soft); }
.yi-breadth__tone.down{ color:var(--down); background:var(--down-soft); }
.yi-breadth__tone.flat{ color:var(--muted); background:var(--line); }

/* --------------------------------------------------------------- Stats --- */
.yi-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.yi-stat{ background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.yi-stat__k{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted-2); font-weight:700; }
.yi-stat__v{ font-family:var(--mono); font-size:22px; font-weight:700; margin-top:6px; }
.yi-stat__sub{ font-size:12px; color:var(--muted); margin-top:2px; }

/* -------------------------------------------------------------- Movers --- */
.yi-movers table{ width:100%; border-collapse:collapse; }
.yi-movers th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted-2); font-weight:700; padding:0 12px 10px; }
.yi-movers th.num, .yi-movers td.num{ text-align:right; }
.yi-movers td{ padding:11px 12px; border-top:1px solid var(--line); font-size:14px; }
.yi-movers tr:hover td{ background:rgba(255,255,255,.02); }
.yi-sym{ font-weight:700; }
.yi-name{ color:var(--muted); font-size:12.5px; max-width:230px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.yi-mkt{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2);
  border:1px solid var(--line-2); border-radius:5px; padding:1px 5px; margin-left:8px; vertical-align:middle; }
.yi-num{ font-family:var(--mono); }
.yi-pct.up{ color:var(--up); } .yi-pct.down{ color:var(--down); } .yi-pct.flat{ color:var(--muted); }

/* --------------------------------------------------------- Misc / foot --- */
.yi-disclaimer{ color:var(--muted-2); font-size:12px; line-height:1.6; margin:4px 2px 0; }
.yi-disclaimer em{ color:var(--muted); font-style:normal; font-weight:700; }
.yi-error{ padding:16px 18px; border:1px solid var(--down); background:var(--down-soft);
  border-radius:12px; color:#ffd7d9; font-size:14px; }

.yi-footer{ display:flex; flex-direction:column; gap:4px; padding:26px 0; color:var(--muted);
  font-size:13px; border-top:1px solid var(--line); margin-top:8px; }
.yi-footer__muted{ color:var(--muted-2); font-size:12px; }
footer .container{ max-width:1240px; }

/* -------------------------------------------------------- Responsive --- */
@media (max-width:900px){
  .yi-cards{ grid-template-columns:1fr; }
  .yi-grid2{ grid-template-columns:1fr; }
  .yi-hero__status{ width:100%; justify-content:space-between; }
}
@media (max-width:560px){
  .yi-dash{ padding:20px 14px 32px; }
  .yi-status-meta{ gap:16px; }
  .yi-name{ display:none; }
}