/* ===========================================================
   Babo Miners — Clean CSS (2025-08-26)
   - Theming (dark/light) + Neon vars
   - Header + Nav (Home/Calculator/Minerlist/Stats/FAQ)
   - KPI Statusbar (3-koloms grid: left/mid/right)
   - Forms/Buttons (incl. Calculator/Reset)
   - Tables/Cards/Miner-select/Currency toggle
   =========================================================== */

/* ---------------- Theming & Global Vars ------------------- */
:root{
  /* Base palette (dark as default) */
  --bg:#0b0f1a; --bg-soft:#0f1626; --card:#121a2b;
  --text:#e8ecf7; --muted:#a8b0c6; --border:#1f2a44; --tableHeader:#16203a;
  --shadow: rgba(0,0,0,0.35);

  /* Neon gradient for header nav buttons */
  --neon1:#7b61ff;  /* purple */
  --neon2:#00b3ff;  /* blue */

  /* Navigation sizing */
  --nav-gap: .6rem;
  --nav-badge-width: 120px;  /* zet op 'auto' als je geen gelijke breedte wilt */

  /* KPI spacing */
  --status-gap: 12px;        /* algemene afstand tussen KPI-items */
  --logo-price-gap: 6px;     /* gewenste afstand tussen BTC-logo en prijs */

  /* Logo (statusbar icoon) */
  --btc-logo-size: 16px;

  /* Buttons (calculator/reset) – defaults for dark */
  --btn-calc-bg: linear-gradient(180deg, #14281f, #0c1914);
  --btn-calc-text: #e7fff5;
  --btn-calc-border: rgba(0,164,112,.55);
  --btn-calc-shadow: rgba(0,0,0,.46);
  --btn-calc-glow1: rgba(0,212,124,.28);
  --btn-calc-glow2: rgba(0,212,124,.20);

  --btn-reset-bg: linear-gradient(180deg, #291317, #1a0a0c);
  --btn-reset-text: #ffecef;
  --btn-reset-border: rgba(255,77,79,.55);
  --btn-reset-shadow: rgba(0,0,0,.46);
  --btn-reset-glow1: rgba(255,77,79,.28);
  --btn-reset-glow2: rgba(255,77,79,.20);

  /* Miner select */
  --sel-bg: linear-gradient(180deg,#101528,#0b0f1f);
  --sel-text: var(--text);
  --sel-border: var(--border);
  --sel-shadow1: rgba(0,0,0,0.40);
  --sel-glow1: rgba(123,97,255,0.18);
  --sel-glow2: rgba(0,179,255,0.14);

  /* Miner menu */
  --minerbtn-bg: linear-gradient(180deg,#131933,#0e142a);
  --minerbtn-text: #e9f0ff;
  --minermenu-bg: rgba(7,11,24,0.98);
  --minermenu-border: rgba(255,255,255,0.12);
  --minermenu-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 0 14px rgba(123,97,255,0.18), 0 0 18px rgba(0,179,255,0.14);
  --minermenu-hover: rgba(255,255,255,0.06);
  --minercaret: rgba(96,165,250,0.9);
}

/* Explicit theme overrides */
[data-theme="dark"]{
  /* kleuren blijven zoals :root */
}
[data-theme="light"]{
  --bg:#f7f9fc; --bg-soft:#eef2f9; --card:#ffffff;
  --text:#0c1220; --muted:#5b6680; --border:#dbe1ee; --tableHeader:#f0f3fa;
  --shadow: rgba(0,0,0,0.18);
  /* optioneel andere neon-tinten voor light */
  --neon1:#6b5cff; --neon2:#0a84ff;

  /* buttons light */
  --btn-calc-bg: linear-gradient(180deg, #f2fff9, #e7fbf2);
  --btn-calc-text: #0f2a20;
  --btn-calc-border: rgba(0,164,112,.45);
  --btn-calc-shadow: rgba(0,0,0,0.12);
  --btn-calc-glow1: rgba(0,212,124,.20);
  --btn-calc-glow2: rgba(0,212,124,.14);

  --btn-reset-bg: linear-gradient(180deg, #fff3f5, #ffe9ec);
  --btn-reset-text: #2a0f12;
  --btn-reset-border: rgba(255,77,79,.45);
  --btn-reset-shadow: rgba(0,0,0,0.12);
  --btn-reset-glow1: rgba(255,77,79,.20);
  --btn-reset-glow2: rgba(255,77,79,.14);

  /* miner select/menu light */
  --sel-bg: linear-gradient(180deg,#f7f8ff,#edf0ff);
  --sel-text:#141a2e; --sel-border:#c8d0ff;
  --sel-shadow1: rgba(0,0,0,0.12);
  --sel-glow1: rgba(123,97,255,0.12);
  --sel-glow2: rgba(0,179,255,0.10);

  --minerbtn-bg: linear-gradient(180deg,#f7f8ff,#e9ecff);
  --minerbtn-text:#141a2e;
  --minermenu-bg: rgba(255,255,255,0.98);
  --minermenu-border:#c8d0ff;
  --minermenu-shadow: 0 12px 24px rgba(0,0,0,0.12), 0 0 10px rgba(123,97,255,0.12), 0 0 12px rgba(0,179,255,0.10);
  --minermenu-hover: rgba(0,0,0,0.06);
  --minercaret:#6b7cff;
}

/* ---------------- Base / Reset ---------------------------- */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--neon2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* ---------------- Header + Brand + Nav -------------------- */
.header{
  position:sticky; top:0; z-index:100;
  background:var(--card);
  border-bottom:1px solid var(--border);
  /* light tweak */
}
[data-theme="light"] .header{
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
}

.header__row{display:flex;align-items:center;gap:16px;padding:10px 16px}
.header .brand{display:flex;align-items:center;gap:10px}
.header .brand img.brand__logo{
  height: clamp(28px, 6.5vh, 72px); width:auto; max-height:72px; object-fit:contain;
}

/* Main nav */
.header nav{margin-left:auto;display:flex;align-items:center;gap:var(--nav-gap);flex-wrap:wrap}

/* Neon header buttons (Home/Calculator/Minerlist/Stats/FAQ) */
.nav a{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.55rem .9rem;
  border-radius:12px;
  font-weight:600; letter-spacing:.02em;
  color:#fff !important;
  background: linear-gradient(90deg, var(--neon1), var(--neon2));
  border:1px solid rgba(27,34,64,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 6px 14px var(--shadow),
    0 0 10px rgba(123,97,255,.35),
    0 0 18px rgba(0,179,255,.25);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, filter .16s ease;
  text-decoration:none !important;
  width: var(--nav-badge-width);
  white-space: nowrap;
  animation: navPulse 3s infinite ease-in-out;
}
.nav a:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 10px 20px rgba(0,0,0,0.48),
    0 0 14px rgba(123,97,255,0.55),
    0 0 28px rgba(0,179,255,0.45);
}
.nav a:active{ transform: translateY(0); }
.nav a:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px rgba(0,179,255,0.7),
    0 0 0 6px rgba(123,97,255,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
/* zichtbare active-state (blijft boven hover) */
.nav a.active{
  filter: brightness(1.0);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    0 0 20px rgba(123,97,255,.55),
    0 0 30px rgba(0,179,255,.35);
}
@keyframes navPulse{
  0% { box-shadow: 0 0 10px rgba(123,97,255,.55), 0 0 20px rgba(0,179,255,.4); }
  50%{ box-shadow: 0 0 20px rgba(123,97,255,.85), 0 0 40px rgba(0,179,255,.65); }
  100%{ box-shadow: 0 0 10px rgba(123,97,255,.55), 0 0 20px rgba(0,179,255,.4); }
}
@media (prefers-reduced-motion: reduce){
  .nav a{ animation: none; transition: none; }
}

/* ---------------- KPI Statusbar (3-koloms) ---------------- */
.statusbar{
  border-bottom:1px solid var(--border);
  background: linear-gradient(90deg, rgba(18,26,43,.90), rgba(12,18,32,.82));
}
[data-theme="light"] .statusbar{
  background: var(--bg-soft);
}

/* Grid: [left] [center] [right] — center locked */
.statusbar__row.kpi-grid{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  column-gap: var(--status-gap);
  padding:12px 16px;
}

/* LEFT: logo + price */
.kpi-left{
  justify-self:start;
  display:inline-flex; align-items:center; gap: var(--logo-price-gap);
}
#brand-logo.btc-logo,
.kpi-left .btc-logo{
  width: var(--btc-logo-size); height: var(--btc-logo-size);
  max-height: var(--btc-logo-size);
  object-fit: contain; display:block; margin:0;
}
#btc-price{ font-weight:800; font-size:20px; line-height:1; }

/* MID: larger sparkline + 24h change (centered) */
.kpi-mid{
  justify-self:center;
  display:inline-flex; align-items:center; gap:10px;
}
.kpi-mid #btc-spark, .kpi-mid .btc-spark{
  width:480px; height:56px; background:transparent; border:none; display:block;
}
#btc-change.btc-change{ font-size:14px; font-weight:700; margin:0; padding:0; }
.btc-change.pos{ color:#00ffa3; text-shadow: 0 0 6px rgba(0,255,163,.35); }
.btc-change.neg{ color:#ff4d4f; text-shadow: 0 0 6px rgba(255,77,79,.35); }

/* RIGHT: difficulty right-aligned */
.kpi-right{
  justify-self:end;
  display:inline-flex; align-items:center;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; height:36px;
  border:1px solid var(--border); border-radius:12px;
  background: rgba(255,255,255,.03);
  box-shadow: 0 0 0 1px rgba(123,97,255,.18) inset, 0 0 18px rgba(0,179,255,.12) inset;
  white-space:nowrap;
}
.chip .chip-label{ color:var(--muted); font-size:12px; }
.chip strong{ color:var(--text); font-size:14px; line-height:1; }

/* Fallback dimensies (mocht canvas elders gebruikt worden) */
.btc-spark{ width:320px; height:44px; background:transparent; border:none; display:block; }

/* Responsive stack voor small screens */
@media (max-width: 720px){
  .statusbar__row.kpi-grid{
    grid-template-columns: 1fr; row-gap:10px;
  }
  .kpi-mid #btc-spark, .kpi-mid .btc-spark{
    width:320px; height:48px;
  }
}

/* ---------------- Cards/Tables/Layout --------------------- */
main{ padding:16px }
.grid{ display:grid; gap:16px; grid-template-columns:repeat(12,1fr) }
@media (max-width:900px){ .grid{ grid-template-columns:1fr } }

.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px;
  box-shadow: 0 0 26px rgba(123,97,255,.08), 0 0 26px rgba(0,179,255,.06) inset, 0 0 10px rgba(0,0,0,.25);
}
.card h2{ margin:0 0 10px 0; font-size:18px }
h1,h2,h3{ text-shadow: 0 0 8px rgba(123,97,255,.25), 0 0 12px rgba(0,179,255,.2); }

.tablewrap{ overflow:auto; border:1px solid var(--border); border-radius:12px }
table{ width:100%; border-collapse:collapse; min-width:980px }
th,td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:left }
thead th{ position:sticky; top:0; background:var(--tableHeader); z-index:1; cursor:pointer; user-select:none }
thead th .arrow{ opacity:.5; font-size:12px; margin-left:6px }
tbody tr:hover{ background:var(--bg-soft) }

.footer{ padding:20px 16px; color:var(--muted); border-top:1px solid var(--border); font-size:14px }

/* ---------------- Inputs / Buttons ------------------------ */
.input,.select,.button{
  background:var(--bg-soft); border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:10px; outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02), 0 1px 2px rgba(0,0,0,0.1);
}
.input:focus,.select:focus{
  border-color:var(--neon2);
  box-shadow:0 0 0 2px rgba(0,179,255,.35);
}
.button{ cursor:pointer; user-select:none }
.button.primary{
  background:linear-gradient(90deg,var(--neon1),var(--neon2));
  color:#fff; border:0; font-weight:600;
  box-shadow:0 0 18px rgba(123,97,255,.35), 0 0 18px rgba(0,179,255,.35);
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
.button.primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 0 24px rgba(123,97,255,.5), 0 0 28px rgba(0,179,255,.45), 0 0 0 1px rgba(123,97,255,.25) inset;
}

/* Calculator / Reset (thema-aware) */
.statusbar ~ main #btnCalc,
.statusbar ~ main .button.calculate{
  background: var(--btn-calc-bg) !important;
  color: var(--btn-calc-text) !important;
  border: 1px solid var(--btn-calc-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 6px 14px var(--btn-calc-shadow),
    0 0 12px var(--btn-calc-glow1),
    0 0 22px var(--btn-calc-glow2) !important;
  border-radius:10px; padding:10px 14px; font-weight:700; letter-spacing:.02em;
  transition: box-shadow .18s ease, transform .12s ease, filter .18s ease;
}
.statusbar ~ main #btnCalc:hover,
.statusbar ~ main .button.calculate:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 18px var(--btn-calc-shadow),
    0 0 16px var(--btn-calc-glow1),
    0 0 28px var(--btn-calc-glow2) !important;
  transform: translateY(-1px);
}

.statusbar ~ main #btnReset,
.statusbar ~ main .button.reset{
  background: var(--btn-reset-bg) !important;
  color: var(--btn-reset-text) !important;
  border: 1px solid var(--btn-reset-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 6px 14px var(--btn-reset-shadow),
    0 0 12px var(--btn-reset-glow1),
    0 0 22px var(--btn-reset-glow2) !important;
  border-radius:10px; padding:10px 14px; font-weight:700; letter-spacing:.02em;
  transition: box-shadow .18s ease, transform .12s ease, filter .18s ease;
}
.statusbar ~ main #btnReset:hover,
.statusbar ~ main .button.reset:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 18px var(--btn-reset-shadow),
    0 0 16px var(--btn-reset-glow1),
    0 0 28px var(--btn-reset-glow2) !important;
  transform: translateY(-1px);
}

/* ---------------- Currency Toggle ------------------------- */
.currency-toggle.chip{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:12px;
  background: var(--card); border:1px solid var(--border);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.currency-toggle.chip:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 5px 12px var(--shadow),
    0 0 12px rgba(123,97,255,.35),
    0 0 20px rgba(0,179,255,.20);
}
.currency-toggle.chip img#currency-flag{
  width:16px; height:12px; object-fit:cover; vertical-align:middle;
  filter: drop-shadow(0 0 6px rgba(123,97,255,.35));
}
.currency-toggle.chip select#currency-toggle{
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  appearance: none; -webkit-appearance:none; -moz-appearance:none;
  outline:none;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.2) inset;
  background-image:
    linear-gradient(to bottom, transparent, transparent),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6680' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat;
  background-position:right 8px center, right 8px center;
  padding-right:24px;
}

/* ---------------- Miner Select / Menu --------------------- */
select.miner-select, #minerSelect{
  background: var(--sel-bg) !important;
  color: var(--sel-text) !important;
  border: 1px solid var(--sel-border) !important;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 6px 14px var(--sel-shadow1),
    0 0 10px var(--sel-glow1),
    0 0 18px var(--sel-glow2);
  appearance: auto;
  outline: none;
}
select.miner-select:hover, #minerSelect:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 18px var(--sel-shadow1),
    0 0 12px var(--sel-glow1),
    0 0 22px var(--sel-glow2);
}

.minerbar .neon-btn.miner-name{
  background: var(--minerbtn-bg) !important;
  color: var(--minerbtn-text) !important;
  border: 1px solid var(--minermenu-border) !important;
}
.minerbar .neon-btn.miner-name .caret{
  border-color: var(--minercaret) !important;
  filter: drop-shadow(0 0 8px var(--minercaret));
}
.minerbar .menu{
  background: var(--minermenu-bg) !important;
  border: 1px solid var(--minermenu-border) !important;
  box-shadow: var(--minermenu-shadow) !important;
  backdrop-filter: blur(4px);
}
.minerbar .menu-item:hover{ background: var(--minermenu-hover) !important; }

/* ---------------- Debug Panel ----------------------------- */
.debug-panel{padding:10px 16px;}
.debug-card{padding:10px 12px; border:1px dashed var(--border); border-radius:10px; background:rgba(255,255,255,.02); font-size:12px; color:var(--muted);}
.debug-row{margin:2px 0;}
.debug-card strong{color:var(--text);}