/* /portal/economics/economics.css */
:root{
  --bg:#0f0f12;
  --panel:#15151a;
  --panel-2:#1b1b22;
  --text:#eaeaea;
  --muted:#a9a9a9;
  --border:#26262f;
  --accent:#00d1ff;
  --accent-2:#8b5cf6;
  --glass: rgba(255,255,255,.06);
  --shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
}
body{ background:#0e0e11; color:var(--text); }
#wrapper{ display:block; clear:both; max-width:1800px !important; padding:16px; }

.panel{ border:1px solid var(--border); background:var(--panel); border-radius:16px; padding:14px; box-shadow:var(--shadow); }
.panel h2{ margin:2px 0 10px; font-size:18px; color:#ddd; font-weight:700; border-bottom:1px solid var(--border); padding-bottom:8px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  border:1px solid var(--border); background:#14141a; color:var(--text);
  text-decoration:none; font-weight:600; box-shadow:var(--shadow);
  transition:transform .08s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); border-color:#333a; }

.split{ display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; grid-auto-flow:row dense; }
.panel-right{ grid-column:2; }
@media (max-width:1100px){ .split{ grid-template-columns:1fr; } .panel-right{ grid-column:auto; } }

.tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin:10px 0 20px 0; }
.tile{ border:1px solid var(--border); background:var(--panel); border-radius:16px; padding:16px; box-shadow:var(--shadow); text-decoration:none; color:var(--text); }
.tile:hover{ transform:translateY(-1px); border-color:#333a; }
.tile h3{ margin:0 0 6px; font-size:16px; }
.tile p{ margin:0; color:var(--muted); font-size:13px; line-height:1.45; }

.econ-hero{
  position:relative; border-radius:28px; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:
    radial-gradient(900px 380px at 8% -20%, rgba(0,209,255,.18), transparent 60%),
    radial-gradient(700px 360px at 108% 0%, rgba(139,92,246,.18), transparent 60%),
    linear-gradient(180deg, rgba(22,22,28,.72), rgba(16,16,22,.62));
  border:1px solid rgba(255,255,255,.10); box-shadow:0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
}
.econ-hero__title{ font-size:34px; line-height:1.05; font-weight:900; margin:0; color:#fff; }
.econ-hero__sub{ margin-top:6px; color:#aeb1b8; font-size:14px; }
.econ-hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.chip{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px; background:rgba(20,20,26,.85); border:1px solid rgba(255,255,255,.08); color:#f0f2f7; text-decoration:none; font-weight:800; }
.chip--accent{ background:linear-gradient(135deg, rgba(0,209,255,.18), rgba(139,92,246,.18)); border-color:rgba(130,140,255,.18); }
.chip__dot{ width:9px; height:9px; border-radius:50%; background:#00d1ff; box-shadow:0 0 10px rgba(0,209,255,.7); }

.indicators-panel .indicator-list{ border:1px solid var(--border); border-radius:12px; background:#14141a; box-shadow:var(--shadow); max-height:802px; overflow:auto; }
.indicator-row{ display:grid; grid-template-columns:160px 1fr auto; gap:12px; padding:10px 12px; border-bottom:1px solid #1f1f28; align-items:center; }
.indicator-symbol{ font-family:ui-monospace, Menlo, Consolas, monospace; font-size:13px; color:#cfe8ff; }
.indicator-name{ font-weight:600; color:#eaeaea; }
.indicator-link a{ color:#eaeaea; text-decoration:none; border:1px solid var(--border); border-radius:10px; padding:6px 10px; display:inline-block; }

.list{ display:flex; flex-direction:column; gap:8px; }
.list-item{ display:flex; justify-content:space-between; gap:14px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#14141a; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); color:#cfcfcf; background:#121218; }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }

.timeline{ display:flex; flex-direction:column; gap:10px; }
.t-day{ border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.t-head{ background:#14141a; padding:8px 12px; display:flex; justify-content:space-between; align-items:center; }
.t-body{ padding:8px 10px; display:flex; flex-direction:column; gap:6px; }
.t-row{ display:flex; gap:12px; align-items:flex-start; }
.t-time{ min-width:54px; font-variant-numeric:tabular-nums; color:#cfcfcf; font-size:13px; }
.t-type{ font-size:12px; color:#9aa; border:1px solid var(--border); padding:2px 6px; border-radius:999px; }


/* --- Mobile hardening (overflow + fluid inputs) --- */
/* === Econ page mobile fixes (scoped, header-safe) === */
/* === ECON mobile fixes (scoped) === */

/* stop sideways scroll just for the econ area */
#wrapper,
.maincolumn { overflow-x: clip; max-width: 100vw; }

/* grids should never force wider than viewport */
.split { grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); }
.split > * { min-width: 0; }

/* indicators search: don’t bleed */
.filter-wrap { overflow: hidden; }
#indicator_filter {
  display:block; width:100%; max-width:100%; min-width:0;
}

/* indicator rows: keep middle column shrinkable */
.indicator-row { grid-template-columns: 160px minmax(0,1fr) auto; }

/* long text won’t push layout */
.indicator-symbol, .indicator-name {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width: 520px){
  .indicator-row { grid-template-columns: minmax(0,1fr) auto; }
  .indicator-symbol, .indicator-name { white-space:normal; word-break:break-word; }
}

/* embeds always contained */
.panel iframe, .panel canvas, .panel img {
  display:block; width:100%; max-width:100%;
}

/* single-column stack on phones — prevents side-by-side panels */
@media (max-width: 700px){
  .split { display:block; }
  .split > * { width:100% !important; margin:0 0 12px 0; }
  .panel-right { grid-column:auto !important; }
  .tiles { grid-template-columns: 1fr; }
}

/* spotlight: give extra height on small screens to avoid cropping */
@media (max-width: 560px){
  .spotlight-frame { height: 600px !important; }
}

/* tiny padding tweak to reduce accidental overflow */
@media (max-width: 520px){
  #wrapper { padding:10px; }
  .panel, .tile { padding:12px; }
}

/* Panel headers: wrap on small widths so right-side button doesn't bleed */
.panel h2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap: wrap;                 /* <— key */
}
.panel h2 > * { min-width:0; }
.panel h2 .btn{ flex:0 0 auto; }

/* Spotlight controls: wrap + fluid input */
.spot-controls{
  display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;
}
#spot_symbol{
  flex:1 1 260px; min-width:0; width:100%; max-width:100%;
  padding:10px 12px; border-radius:10px;
  border:1px solid #26262f; background:#121218; color:#eaeaea;
  
}
#spot_apply, #spot_open{ flex:0 0 auto; }







/* ERI Explain */
.eri-explain { margin-top: 28px; }
.eri-explain__hero {
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding:16px 0 8px;
  border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
}
.eri-explain__title { margin:0; font-size:22px; font-weight:700; letter-spacing:.2px; }
.eri-explain__blurb { margin:0; opacity:.8; max-width:780px; line-height:1.5; }

.eri-indicator-grid {
  display:grid; gap:14px; margin-top:16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.eri-card {
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  border-radius:16px; padding:14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.eri-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.eri-card__title { display:flex; flex-direction:column; gap:6px; }
.eri-card__name { font-weight:700; font-size:16px; }
.eri-chip {
  align-self:flex-start;
  font-size:11px; padding:4px 8px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.eri-card__pill {
  font-size:11px; padding:6px 10px; border-radius:999px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.18);
}
.pill-good { background: rgba(46, 204, 113, .16); color:#8ff0b1; }
.pill-bad  { background: rgba(231, 76, 60, .16); color:#ff9b95; }

.eri-card__body { margin:8px 0 10px; }
.eri-card__why  { margin:0 0 8px; opacity:.95; line-height:1.5; }
.eri-card__how  { font-size:13px; opacity:.9; display:flex; gap:6px; }
.eri-card__how strong { font-weight:700; }

.eri-card__meta {
  margin-top:10px;
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:8px;
}
.eri-meta { display:flex; flex-direction:column; gap:2px; font-size:12px; }
.eri-meta__label { opacity:.6; }
.eri-link { text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.3); }
.eri-link:hover { border-bottom-color: transparent; }

.eri-about {
  margin-top:18px;
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.eri-about__card {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:14px;
}
.eri-about__card h3 { margin:0 0 8px; font-size:15px; }
.eri-about__card p, .eri-about__card li { opacity:.9; line-height:1.55; }
@media (max-width: 720px){
  .eri-explain__hero { flex-direction:column; align-items:flex-start; }
}

/* Simple autocomplete list for fw_sectors */
.ac-list{
  position:absolute; left:0; top:100%; z-index:60; min-width:100%;
  max-height:320px; overflow:auto; margin-top:6px;
  background:#111; border:1px solid #2a2a2a; border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.ac-item{ padding:10px 12px; cursor:pointer; display:flex; gap:12px; }
.ac-item:hover, .ac-item[aria-selected="true"]{ background:#1b1b1b; }
.ac-symbol{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight:600; opacity:.95; }
.ac-name{ font-size:12px; opacity:.7; }
@media (prefers-color-scheme: light){
  .ac-list{ background:#fff; border-color:#ddd; box-shadow:0 10px 24px rgba(0,0,0,.08); }
  .ac-item:hover, .ac-item[aria-selected="true"]{ background:#f4f6f8; }
  .ac-name{ opacity:.8; }
}