/* ===== Light(er) dark theme used by index.php + blankning_topplistor.php ===== */

/* === Global skalning (80%) via rem och variabel ===
   Ändra --ui-scale om du vill skala globalt (0.8 = 80 %)
*/
:root{
  --ui-scale: 0.8;

  --bg:#0c1218;
  --panel:#151d22;
  --panel-border:#263447;
  --thead:#1c2634;
  --row-alt:#192331;

  --text:#e9eef6;
  --muted:#9aa7ba;
  --update:#a7bfd6;
  --link:#8ed4ff;
  --accent:#fbbf24;
  --up:#22c55e;
  --down:#ef4444;

  --shadow:0 10px 22px rgba(0,0,0,.35);
}

/* Skala basfonten – allt som anges i rem följer med */
html{ font-size: calc(14px * var(--ui-scale)); }

*{box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font:1rem/1.55 system-ui,Segoe UI,Roboto,Arial; /* 1rem = bas efter skalning */
  margin:0;
}
a{color:var(--link);text-decoration:none}

.wrap{
  max-width: 82.1429rem; /* 1150px / 14 */
  margin: 2rem auto;     /* 28px */
  padding: 0 1.1429rem;  /* 16px */
}
h1{
  font-size: 1.8571rem;  /* 26px */
  margin: 0 0 1rem;      /* 14px */
}
.muted{color:var(--muted)}
.hh{opacity:.85; font-variant-numeric: tabular-nums;}

/* Panels */
.panel{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius: .8571rem; /* 12px */
  padding: 1rem;           /* 14px */
  margin: 1.1429rem 0;     /* 16px */
  box-shadow:var(--shadow);
  position:relative;
}

/* Headings with orange text + right-aligned tag */
.title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7143rem;            /* 10px */
  margin:0 0 .7143rem;     /* 10px */
}
.tleft{
  display:flex;
  align-items:center;
  gap:.5714rem;            /* 8px */
  min-width:0;
  color:var(--accent);
  font-weight:700;
}
.title svg{width:1.2857rem;height:1.2857rem;flex:0 0 1.2857rem;opacity:.95} /* 18px */
.update-tag{
  color:var(--update);
  font-size:.9286rem;      /* 13px */
  font-weight:600;
  white-space:nowrap;
}

/* Controls */
.controls-row{
  display:flex;
  gap:.8571rem;            /* 12px */
  align-items:center;
  flex-wrap:wrap
}
.controls-row label{opacity:.9}
.btn{
  background:#1f6feb;border:0;color:#fff;
  padding:.7143rem 1rem;   /* 10px 14px */
  border-radius:.5714rem;  /* 8px */
  cursor:pointer;font-weight:600
}
.btn:disabled{opacity:.6;cursor:progress}
select{
  background:var(--panel);
  border:1px solid var(--panel-border);
  color:var(--text);
  border-radius:.5714rem;  /* 8px */
  padding:.5714rem .8571rem; /* 8px 12px */
  font:inherit
}

/* Metrics */
.metrics{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:1rem;                /* 14px */
}
.metric{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--panel-border);
  border-radius:.7143rem;  /* 10px */
  padding:.7143rem .8571rem; /* 10px 12px */
}
.metric .label{color:var(--muted);font-size:.8571rem;margin-bottom:.4286rem} /* 12px, 6px */
.metric .value{font-size:1.4286rem;font-weight:700}     /* 20px */
.metric.big .value{font-size:1.5714rem}                 /* 22px */
.value.pos{color:var(--up)} .value.neg{color:var(--down)}

/* Chart */
.chart-wrap{padding:.7143rem .8571rem} /* 10px 12px */
.chart-wrap canvas{
  display:block;
  width:100% !important;
  height:34.2857rem !important;  /* 480px -> skalar med rem */
}
.popup{
  position:absolute;
  top:1rem; left:1rem;     /* 14px */
  max-width:37.1429rem;    /* 520px */
  background:rgba(18,24,30,.92);
  border:1px solid var(--panel-border);
  border-radius:.7143rem;  /* 10px */
  padding:.7143rem .8571rem; /* 10px 12px */
  box-shadow:var(--shadow);
  display:none;
  z-index:10;
  font-size:.9286rem;      /* 13px */
}
.note{
  color:var(--muted);
  font-size:.8571rem;      /* 12px */
  margin-top:.5714rem;     /* 8px */
}
.legend-dot{
  display:inline-block;
  width:.7143rem;height:.7143rem;    /* 10px */
  border-radius:.1429rem;            /* 2px */
  background:#ff2fa8; transform:rotate(45deg); margin-bottom:-.0714rem;
}
.pos{color:var(--up)} .neg{color:var(--down)}

/* Tables (shared with short-selling page) */
.tbl{width:100%;border-collapse:separate;border-spacing:0;margin-top:.5714rem} /* 8px */
.tbl th,.tbl td{padding:.7143rem .8571rem;border-bottom:1px solid var(--panel-border)} /* 10px 12px */
.tbl th{background:var(--thead);color:var(--accent);text-align:left}
.tbl tr:nth-child(even){background:var(--row-alt)}
.num{text-align:right} .date{text-align:center}
.tbl th.num{text-align:right} .tbl th.date{text-align:center}
.empty{opacity:.85}

/* Minimal overlay/spinner */
.overlay{
  position:relative;
  display:none;
  align-items:center;
  justify-content:center;
}
.spinner{
  width:2rem;height:2rem;            /* 28px */
  border-radius:50%;
  border:.2143rem solid rgba(255,255,255,.2); /* 3px */
  border-top-color:#fff;
  animation:spin 1s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Δ visuals used on short-selling page */
.delta{display:inline-block;min-width:.8571rem;margin-right:.4286rem;line-height:1;transform:translateY(-.0714rem)} /* 12px, 6px, 1px */
.delta.up{color:var(--up)} .delta.down{color:var(--down)}
.val.up{color:var(--up)} .val.down{color:var(--down)}

/* Fix oversized inline SVG icons on the shorting page */
.icon-svg svg,
.title svg,
.section-title svg,
.panel .title svg {
  width: 1.2857rem;  /* 18px */
  height: 1.2857rem; /* 18px */
}

/* If some icons are outside any of the wrappers above, keep them small too */
body > svg[viewBox] { width:1.2857rem; height:1.2857rem; }