/* ===== Theme (Dark default) ===== */
:root{
  --bg:#0a0e14;
  --fg:#e8edf6;
  --muted:#9aa3b2;

  --card:#0d1117;
  --card-border:#161b22;

  --input:#0a0e13;
  --input-border:#232a33;

  --accent:#5a8dee;                 /* primær blå */
  --accent-2:#3cc7ff;               /* lysere blå til highlights */
  --accent-glow: rgba(90,141,238,.35);

  --danger:#c94b4b;
  --success:#18c37d;

  --shadow-lg: 0 20px 60px rgba(0,0,0,.45);
  --shadow-md: 0 12px 30px rgba(0,0,0,.35);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.28);

  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{
  height:100%;margin:0;
  font-family:Inter,system-ui,Segoe UI,Arial;
  color:var(--fg);
  background:linear-gradient(180deg,#0a0e14 0%,#0a0e14 50%,#0b111a 100%);
}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 20px;
  background:linear-gradient(180deg,#0e131b 0%, #0c1118 100%);
  border-bottom:1px solid var(--card-border);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.brand img{width:28px;height:28px;border-radius:8px;border:1px solid var(--card-border);object-fit:cover}

/* ===== Nav (underline style) ===== */
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{
  position:relative;
  color:var(--muted);
  text-decoration:none;
  padding:8px 2px;                 /* smal padding så underline ser tight ud */
  border-radius:0;
  transition:color .15s ease;
}
.nav a:hover{ color:#fff; }
.nav a.active{ color:#fff; }
.nav a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  opacity:.9;
}

/* ===== User button (Kasper ▾) ===== */
.actions .user-btn{
  background:transparent;
  border:none;                         /* ingen ring */
  padding:8px 2px;                     /* samme padding som nav links */
  font-family:'Khand', sans-serif;     /* samme font */
  font-weight:700;
  font-size:18px;                      /* samme størrelse */
  letter-spacing:.3px;                 /* samme spacing */
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  border-radius:0;                     /* ingen rund kant */
  transition:color .15s ease;
}

.actions .user-btn:hover{
  color:#fff;
}

.user-btn .caret{
  font-size:14px;
  opacity:.8;
  transform:translateY(1px);
}


/* Buttons */
.btn{
  --bg:var(--accent);
  background:var(--bg);
  color:#fff;border:0;border-radius:12px;padding:9px 14px;font-weight:700;cursor:pointer;
  box-shadow:0 0 0 0 transparent; transition:filter .15s ease, box-shadow .2s ease, transform .05s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn.ghost{--bg:transparent;border:1px solid var(--card-border);color:#e8ecf2}
.btn.danger{--bg:var(--danger)}
.icon-btn{
  background:transparent;color:var(--fg);
  border:1px solid var(--card-border);border-radius:12px;padding:6px 10px;cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .05s ease;
}
.icon-btn:hover{background:#121827;border-color:#243042}

/* ===== Layout ===== */
.wrap{max-width:1440px;margin:28px auto;padding:0 16px}
@media (min-width:1700px){ .wrap{ max-width:1600px; } }

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-bottom:16px}
.card{
  background:linear-gradient(180deg,#0c1118 0%,#0b0f16 100%);
  border:1px solid var(--card-border);border-radius:16px;padding:16px;box-shadow:var(--shadow-md);
  grid-column:span 4;
}
.card h3{margin:0 0 10px;font-size:16px;color:#dfe6f3;letter-spacing:.2px}
.tall{grid-column:span 8}
.wide{grid-column:span 12; overflow:visible;}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}

.placeholder{
  min-height:180px;border:1px dashed #2a3240;border-radius:12px;display:grid;place-items:center;color:#70819b
}
.tall .placeholder{min-height:320px}

/* ===== Statistics card ===== */
.stats-card .stats-grid{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.stats-card .stat-row{
  display:flex;
  gap:10px;
}
.stats-card .stat-row--month{
  margin-top:6px;
}
.stats-card .stat-box{
  flex:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 0;
  border-bottom:1px dashed rgba(148,163,184,.35);
  font-size:13px;
}
.stats-card .stat-box--full{
  border-bottom:none;
  padding-top:8px;
}
.stats-card .stat-label{
  color:var(--muted,#9ca3af);
  font-size:12px;
}
.stats-card .stat-value{
  font-weight:600;
  color:var(--fg,#e5e7eb);
  font-size:13px;
  text-align:right;
}
.stats-card .stat-month-name{
  font-size:13px;
  color:var(--fg,#e5e7eb);
}

/* ===== KPIs ===== */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:0 0 16px}
.kpi{
  position:relative;
  background:radial-gradient(120% 120% at 10% 0%, rgba(90,141,238,.05) 0%, transparent 42%) , var(--card);
  border:1px solid var(--card-border);border-radius:14px;padding:12px;box-shadow:var(--shadow-sm);
}
.kpi .label{display:block;color:var(--muted);font-size:12px}
.kpi .val{display:block;font-weight:800;font-size:18px;margin-top:4px}

/* Winrate gauge (conic-gradient) */
.kpi-gauge{display:flex;align-items:center;gap:12px}
.kpi-gauge .gauge{
  --pct:0;                /* sættes fra JS 0..100 */
  --ring:var(--danger);   /* farve (rød/grøn) fra JS */
  width:64px;height:64px;border-radius:50%;
  background:
    conic-gradient(var(--ring) calc(var(--pct)*1%), rgba(255,255,255,.08) 0);
  display:grid;place-items:center;margin-top:4px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.kpi-gauge .gauge-hole{
  width:46px;height:46px;border-radius:50%;
  background:var(--card);display:grid;place-items:center;
  font-weight:800;font-size:14px;color:var(--fg);
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}

/* ===== Filters / inputs ===== */
select,input[type="date"],input[type="text"],input[type="number"]{
  background:var(--input);color:var(--fg);border:1px solid var(--input-border);
  border-radius:10px;padding:10px 12px;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
select:focus,input:focus{border-color:#2e6bff;box-shadow:0 0 0 3px rgba(46,107,255,.15)}

/* ===== ACC HEADER ===== */
.acc-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px; overflow:visible;}
.acc-left{display:flex;align-items:center;gap:10px}
.icon-gear{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:#0f141c;border:1px solid #1a2230;color:#aab4c5;cursor:pointer;
  transition:box-shadow .2s ease, transform .05s ease, color .15s ease, border-color .15s ease;
}
.icon-gear:hover{
  color:#fff;border-color:#2b3550;box-shadow:0 0 0 4px rgba(90,141,238,.08), 0 0 28px var(--accent-glow);
}
.gear-icon{ width:20px; height:20px; display:block; opacity:.9; }

.acc-name-wrap{position:relative}
.acc-name-btn{
  display:flex;align-items:center;gap:10px;
  background:transparent;border:0;color:var(--fg);font-weight:800;font-size:18px;cursor:pointer;padding:8px 10px;border-radius:10px;
}
.acc-name-btn:hover{background:transparent}
.caret{opacity:.9;font-size:14px;transform:translateY(1px)}  /* caret tilbage */

/* Dropdowns */
.dropdown{
  position:absolute; top:110%; left:0; min-width:240px; z-index:30;
  background:#0d121a;border:1px solid #202636;border-radius:14px;padding:6px;box-shadow:var(--shadow-lg);
}
.drop-item{
  width:100%;text-align:left;background:transparent;border:0;color:var(--fg);
  padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:600;
}
.drop-item:hover{background:#131b28}
.drop-item.danger{color:#ff7e7e}
.hide{display:none !important}

/* Chips line (right) */
.acc-chips{display:flex;flex-wrap:wrap;gap:10px; min-width:0;}
.chip{
  --chip-bg: linear-gradient(180deg,#0f1520 0%, #0d131d 100%);
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  background:var(--chip-bg); border:1px solid #1a2230; box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.chip-label{opacity:.7;font-size:12px}

/* Goal mini-bars */
.goal-chip{gap:12px}
.goalbar{
  width:160px;height:8px;border-radius:999px;background:#131a25;overflow:hidden;
  border:1px solid #1c2432;
}
.goalbar-fill{
  height:100%;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow:0 0 16px var(--accent-glow) inset;
  transition:width .35s cubic-bezier(.16,1,.3,1);
}
.goal-pct{font-weight:800;letter-spacing:.2px;min-width:36px;text-align:right}

/* ===== Compact Phase-2 layout: ALT på én linje ===== */
.acc-chips.compact{
  flex-wrap:nowrap;
  gap:8px;
}
.acc-chips.compact .chip{ padding:8px 10px; }
.acc-chips.compact .chip-label{ font-size:11px; opacity:.8; }
.acc-chips.compact .goal-pct{ min-width:30px; font-size:12px; }
/* bryd aldrig tekst i chips (Program, beløb, dato) */
.acc-chips .chip *{ white-space:nowrap; }

.goalbar--sm{ width:120px !important; }

/* ===== Accounts summary (legacy block – kan stadig bruges) ===== */
.accounts-actions{display:flex;gap:8px;align-items:center}
.accounts-actions .btn.ghost{background:transparent;border:1px solid var(--card-border);color:#e8ecf2}
.accounts-actions .btn.danger{background:var(--danger);color:#fff}
.accounts-summary{margin-top:14px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.accounts-summary .label{display:block;color:var(--muted);font-size:12px}
.accounts-summary .val{display:block;font-weight:700;font-size:16px;margin-top:4px}

/* ===== "Current Results" ===== */
.tabs{display:flex;gap:6px}
.tab{
  background:transparent;color:var(--fg);border:1px solid var(--card-border);
  padding:6px 10px;border-radius:10px;cursor:pointer;font-weight:700;
  transition:background .15s ease,border-color .15s ease;
}
.tab:hover{ background:#111722; border-color:#243042 }
.tab.active{ background:#131b23; border-color:#2b3850; }

.chart-wrap{ position:relative; }
.chart-wrap canvas{ width:100%; display:block; }
.target-label{
  position:absolute; top:6px; right:10px;
  font-size:12px; font-weight:700; color:var(--success); opacity:.9;
}

/* ===== Tables/blocks ===== */
.table{min-height:220px;border:1px dashed #2a3240;border-radius:12px;display:grid;place-items:center;color:#70819b}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;display:grid;place-items:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(2px)}
.modal-content{
  position:relative;z-index:1;width:min(720px,92vw);
  background:linear-gradient(180deg,#0d1117 0%,#0b0f16 100%);
  border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow-lg);padding:16px
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.subfield{display:flex;flex-direction:column;gap:6px}
.muted{color:var(--muted);font-size:12px}

/* ===== Responsive ===== */
@media (max-width:1200px){
  .goalbar{width:140px}
}
@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .goalbar{width:120px}
}
@media (max-width:860px){
  .acc-header{flex-direction:column;align-items:flex-start}
  .acc-chips{width:100%}
  .kpi-gauge{justify-content:space-between}
}
@media (max-width:720px){
  .nav{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .card,.tall,.wide{grid-column:span 12}
  .form-grid{grid-template-columns:1fr}
  .accounts-summary{grid-template-columns:repeat(2,1fr)}
  .goalbar{width:100px}
  .kpi-gauge .gauge{ width:56px; height:56px }
  .kpi-gauge .gauge-hole{ width:40px; height:40px; font-size:13px }
}

/* ===== Journal grid + cards ===== */
.journal-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}
.journal-grid .card{ grid-column: span 3; overflow:hidden; padding:0 }
@media (max-width:1100px){ .journal-grid .card{ grid-column: span 4 } }
@media (max-width:720px){  .journal-grid .card{ grid-column: span 12 } }

.trade-card .t-img{ height:120px; background:#0f141c; border-bottom:1px solid var(--card-border); display:grid; place-items:center }
.trade-card .t-img img{ width:100%; height:100%; object-fit:cover }
.trade-card .t-img .noimg{ color:#66758b; font-size:12px }
.trade-card .t-body{ padding:14px }
.trade-card h4{ margin:0 0 6px 0; font-size:15px }
.t-top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.t-badges{ display:flex; gap:6px; flex-wrap:wrap }
.t-meta{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:10px }
.t-meta .label{ display:block; color:var(--muted); font-size:11px }
.t-meta span{ display:block; font-size:13px }
.t-meta .ok{ color:var(--success) } .t-meta .bad{ color:#ff6b6b } .t-meta .neut{ color:#b3c0d5 }

/* badges */
.badge{ display:inline-block; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.2px; border:1px solid #1e2736; background:#0f1520 }
.badge.b-eur{ background:#0f1726; color:#9ec6ff; border-color:#23314a }
.badge.b-gbp{ background:#170f1d; color:#f3a2ff; border-color:#3a2247 }
.badge.b-sess{ background:#121a26; color:#c3d3ff; }
.badge.b-tag{ background:#0f1722; color:#a8c7ff }
.badge.b-long{ background:#0f1f1a; color:#5ee1aa; border-color:#1c3f34 }
.badge.b-short{ background:#211116; color:#ff9aa9; border-color:#3f1f28 }

/* chips (reused) */
.chip-row{ display:flex; gap:8px }
.chip-row.wrap{ flex-wrap:wrap }
.chip.radio{ cursor:pointer; border:1px solid var(--card-border); border-radius:10px; padding:6px 10px; user-select:none }
.chip.radio input{ margin-right:6px }
.chip.tag{ border:1px solid var(--card-border); border-radius:10px; padding:6px 10px }
.chip.long{ background:#0f1f1a } .chip.short{ background:#211116; }

/* ================================================================== */
/* ============================ LIGHT MODE =========================== */
/* ================================================================== */
body.light{
  --bg:#f6f8fc;
  --fg:#10141a;
  --muted:#5a6577;

  --card:#ffffff;
  --card-border:#e0e4ea;

  --input:#ffffff;
  --input-border:#cbd3df;

  --accent:#3a7bff;
  --accent-2:#61a0ff;
  --accent-glow:rgba(58,123,255,.25);

  --danger:#e34f4f;
  --success:#1cb27d;

  --shadow-lg: 0 20px 60px rgba(0,0,0,.12);
  --shadow-md: 0 12px 30px rgba(0,0,0,.10);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.08);

  color-scheme: light;
  background:#f6f8fc;
  color:var(--fg);
}

/* Topbar + nav i lyst tema */
body.light .topbar{
  background:linear-gradient(180deg,#ffffff 0%, #f7f9fc 100%);
  border-bottom:1px solid #dee3eb;
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
/* Light-mode underline farve (ingen pille-baggrund) */
body.light .nav a.active::after{ background:#0c1220; }


/* Nav-links i lyst tema */
body.light .nav a{
  color:#3a4553;               /* normal: mørkere grå */
}

body.light .nav a:hover,
body.light .nav a.active{
  color:#11161e;               /* hover + aktiv: næsten-sort */
}

/* Underline i samme mørkere farve */
body.light .nav a.active::after{
  background:#11161e;
}

/* Bruger-knap (KASPER) i lyst tema) */
body.light .actions .user-btn{
  color:#3a4553;               /* normal */
}

body.light .actions .user-btn:hover{
  color:#11161e;               /* hover */
}



/* Cards/placeholder */
body.light .card{
  background:#ffffff;
  border-color:#e6eaf1;
  box-shadow:var(--shadow-md);
}
body.light .placeholder{
  border-color:#d4dbe6;
  color:#8c96a9;
}

/* Knapper i lyst tema */
body.light .btn.ghost{
  color:#1b2432;
  border-color:#cfd7e4;
}
body.light .icon-btn{
  border-color:#d3dbe7;
  color:#1b2432;
}
body.light .icon-btn:hover{ background:#eef2f8; border-color:#c7d1e3 }

/* Gear ikon + dropdown */
body.light .icon-gear{
  background:#f2f5fb;
  border-color:#d6deea;
  color:#5a6a86;
}
body.light .icon-gear:hover{
  color:#0e1a30; border-color:#c8d3e6;
  box-shadow:0 0 0 5px rgba(58,123,255,.12);
}
body.light .dropdown{
  background:#ffffff;
  border-color:#e3e9f3;
  box-shadow:0 18px 40px rgba(18,28,45,.10);
}
body.light .drop-item{ color:#111827 }
body.light .drop-item:hover{ background:#f2f6fc }
body.light .drop-item.danger{ color:#c03939 }

/* Chips / mål-bars */
body.light .chip{
  --chip-bg: linear-gradient(180deg,#f8fbff 0%, #f5f7fb 100%);
  border-color:#dbe3ef;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
body.light .goalbar{
  background:#eef3fa;
  border-color:#dee6f3;
}

/* Winrate gauge (light) */
body.light .kpi-gauge .gauge{
  background:conic-gradient(var(--ring) calc(var(--pct)*1%), rgba(0,0,0,.06) 0);
}
body.light .kpi-gauge .gauge-hole{
  background:#fff; color:#0e1116; box-shadow:0 0 0 1px rgba(0,0,0,.06);
}

/* Tabs (light) */
body.light .tab{ border-color:#dde4ef; }
body.light .tab:hover{ background:#eef3fb; border-color:#cfd9ea }
body.light .tab.active{ background:#ecf2ff; border-color:#c7d6f4 }

/* Badges i lyst tema */
body.light .badge{
  background:#f2f6fc;
  border-color:#e2e9f5;
  color:#1b2432;
}
body.light .badge.b-eur{ background:#ecf4ff; color:#1f4b9c; border-color:#d6e6ff }
body.light .badge.b-gbp{ background:#f7ecff; color:#6d2aa0; border-color:#ecd8ff }
body.light .badge.b-sess{ background:#eff3ff; color:#3a4e86 }
body.light .badge.b-tag{ background:#eef6ff; color:#1f3a7a }
body.light .badge.b-long{ background:#e8fbf4; color:#148457; border-color:#c8f0e2 }
body.light .badge.b-short{ background:#ffecef; color:#b02a3a; border-color:#ffd6dc }

/* Modal i lyst tema */
body.light .modal-content{
  background:#ffffff;
  border-color:#e6eaf1;
  box-shadow:0 24px 60px rgba(0,0,0,.12);
}

/* Inputs i lyst tema */
body.light select,
body.light input[type="date"],
body.light input[type="text"],
body.light input[type="number"]{
  background:#ffffff;
  color:#0e1116;
  border-color:#cbd3df;
}
body.light select:focus,
body.light input:focus{
  border-color:#3a7bff;
  box-shadow:0 0 0 3px rgba(58,123,255,.18);
}

/* Journal card billede strip */
body.light .trade-card .t-img{ background:#eff3f8; border-color:#e2e8f2 }

/* Smooth theme fade */
html, body, .card, .topbar, .dropdown, .chip, .badge,
input, select, .modal-content, .placeholder {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Fjern scrollbar, men behold scroll-funktion */
html, body {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;              /* Chrome, Safari */
}


/* Afstand mellem accounts-sektion og KPI-sektionen */
#accounts-card {
  margin-bottom: 12px; /* afstand - justér hvis du vil have mere/mindre */
}

/* KPI-sektionen skal stå normalt */
#kpis {
  margin-top: 0;
}

/* KPI-kortene skal stadig have runde hjørner og ingen overlap */
#kpis .kpi {
  border-top: none;              /* fjern kun top-stregen – IKKE radius */
  border-radius: 14px;           /* behold runde hjørner */
}



/* Fjern al kant, ring og baggrund på Kasper-knappen */
.actions .user-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Fjern hover-borders fra andre knap-regler */
.actions .user-btn:hover {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Fjern fokus-ringen (chromiums default blå ring) */
.actions .user-btn:focus,
.actions .user-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}


/* Caret animation */
.user-btn .caret {
  display:inline-block;
  transition: transform .2s ease;
}

/* Når dropdown er åben */
.user-btn[aria-expanded="true"] .caret {
  transform: rotate(180deg) translateY(-1px);
}












/* ===== Statistics Title ===== */
.stats-title h3 {
  margin: 10px 0 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--fg);
}

/* ===== Updated Grid Layout ===== */
.stats-1to1 {
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* ===== Box styling ===== */
.stat-box-1to1 {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

/* Labels */
.s-label {
  font-size: 13px;
  opacity: .75;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.s-info {
  font-size: 12px;
  opacity: .55;
}

/* Values */
.s-value {
  font-size: 22px;
  font-weight: 700;
}
.s-value.green { color: var(--success); }
.s-value.red { color: var(--danger); }

/* Combined win/loss split box */
.splitbox {
  padding: 0;
}
.s-split {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.s-divider {
  width: 1px;
  background: rgba(255,255,255,0.08);
  margin: 0 16px;
}

/* Gauge */
.s-gauge {
  position: relative;
  width: 60px;
  height: 60px;
}
.s-gauge-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    conic-gradient(var(--success) calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.05);
}
.s-gauge-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  font-weight: 700;
  font-size: 14px;
}


/* FORCE Average RR to be LEFT text + RIGHT ring */
.stat-rr {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  padding: 20px 28px !important;
}

/* left container */
.rr-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
}

/* the green ring */
.rr-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 5px solid var(--success);
  box-shadow: 0 0 12px rgba(24,195,125,0.25);
  flex-shrink: 0 !important;      /* prevents it from shrinking or moving */
  margin-left: auto !important;   /* pushes it to the far right */
}




/* ---- Win Rate: korrekt layout ---- */
.stat-winrate {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;  /* <-- gør gauge til højre */
  padding: 20px 28px !important;
}

/* venstre tekst */
.wr-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
}

/* Gauge container */
.wr-gauge {
  position: relative;
  width: 80px;
  height: 60px;      /* lidt højere for perfekt look */
  margin-left: auto; /* <-- skubber den ABSOLUT til højre */
  flex-shrink: 0;
}

.wr-arc {
  width: 80px;
  height: 40px;
  border-radius: 80px 80px 0 0;
  
  border-top: 8px solid #1ec37a;     /* grøn top */
  border-left: 8px solid #1ec37a;    /* grøn venstre */
  border-right: 8px solid #e64b4b;   /* rød højre */

  border-bottom: none;
  transform: rotate(0deg);           /* korrekt orienteret */
}

/* Numbers under gauge */
.wr-min,
.wr-max {
  position: absolute;
  bottom: -10px;
  font-size: 11px;
  opacity: .7;
  font-weight: 600;
}

.wr-min { left: 4px; }
.wr-max { right: 4px; }


/* Make all stat boxes same height */
.stat-box-1to1 {
  height: 100px !important;   /* du kan justere 120px efter behov */
  display: flex;
  flex-direction: column;
  justify-content: center;
}















.acc-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.acc-info-icon{
  font-size:13px;
  opacity:.7;
  cursor:pointer;
}

.acc-info-icon:hover{
  opacity:1;
}

/* Tooltip */
.acc-tooltip{
  position:absolute;
  background: var(--card);
  border:1px solid var(--card-border);
  padding:10px 14px;
  border-radius:10px;
  font-size:13px;
  color:var(--fg);
  width:230px;
  z-index:20;
  box-shadow: var(--shadow-md);
}

.acc-tooltip .tt-line{
  margin-bottom:4px;
  color:var(--muted);
}




/* Date Range */
.date-range-wrap{
  display:flex;
  align-items:center;
  gap:20px;
  margin-left:auto;
}

.date-box{
  background:var(--card);
  border:1px solid var(--card-border);
  padding:10px 14px;
  border-radius:12px;
}

.dr-label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:2px;
  font-family:'Hind',sans-serif;
}

.dr-value{
  font-size:15px;
  font-family:'Khand',sans-serif;
  font-weight:700;
}

.dr-buttons{
  display:flex;
  gap:8px;
}

.dr-btn{
  background:var(--card);
  border:1px solid var(--card-border);
  padding:8px 12px;
  border-radius:10px;
  color:var(--fg);
  font-family:'Hind',sans-serif;
  cursor:pointer;
  font-size:13px;
}

.dr-btn.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}



/* Account dropdown info icon */
.acc-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.acc-info-icon {
  opacity:.7;
  cursor:pointer;
  padding: 4px;
  border-radius:6px;
  transition:opacity .15s ease, background .15s ease;
}

.acc-info-icon:hover {
  opacity:1;
  background:rgba(255,255,255,0.06);
}

.info-icon-img {
  width:16px;
  height:16px;
  display:block;
}

/* Tooltip */
.acc-tooltip {
  position:absolute;
  background:var(--card);
  border:1px solid var(--card-border);
  padding:12px 14px;
  border-radius:12px;
  color:var(--fg);
  font-family:'Hind',sans-serif;
  font-size:13px;
  box-shadow:var(--shadow-md);
  z-index:9999;
  width:240px;
}

.acc-tooltip .tt-line {
  margin-bottom:6px;
  color:var(--muted);
}