/*
 * Regions Turnering – Spiller Stats
 * Dark/Gold theme (scoped) – v1.0.25
 *
 * VIGTIGT:
 * - 100% scoped to .rt-ui wrapper (no global body/html styles)
 * - Use consistent theme tokens + alpha values
 */

.rt-ui{
  /* THEME TOKENS (MUST USE) */
  --rt-gold:#9a7e10;
  --rt-bg:#070708;
  --rt-card:#0f0f12;
  --rt-card2:#0b0b0e;
  --rt-text:#ffffff;
  --rt-muted:rgba(255,255,255,.65);

  /* Gold alpha “look” */
  --rt-border:rgba(154,126,16,.35);
  --rt-border-strong:rgba(154,126,16,.55);
  --rt-line-25:rgba(154,126,16,.25);
  --rt-line-22:rgba(154,126,16,.22);
  --rt-line-16:rgba(154,126,16,.16);
  --rt-headbg:rgba(154,126,16,.10);
  --rt-hover:rgba(154,126,16,.06);
  --rt-glow14:rgba(154,126,16,.14);
  --rt-glow12:rgba(154,126,16,.12);
  --rt-glow15:rgba(154,126,16,.15);

  color:var(--rt-text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.35;
}

.rt-ui *{ box-sizing:border-box; }

/* Outer panel (keeps the “portal card” look without touching body/html) */
.rt-ui .rtss__wrap{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:18px 16px 22px;

  border:1px solid var(--rt-border);
  border-radius:18px;
  box-shadow:0 12px 35px rgba(0,0,0,.45);

  background:
    radial-gradient(120% 120% at 50% 20%, var(--rt-glow14), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0)),
    var(--rt-bg);
}

/* Small helpers */
.rt-ui .rtss__active{ display:flex; justify-content:center; margin:0 0 12px; }
.rt-ui .rtss__num{ text-align:right; white-space:nowrap; }
.rt-ui .rtss__empty{ color:var(--rt-muted); text-align:center; padding:14px 10px; }

/* Links (scoped) */
.rt-ui a{ color:var(--rt-text); text-decoration:none; }
.rt-ui a:hover{ color:var(--rt-gold); }

/* Notices */
.rt-ui .rtss__notice{
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--rt-line-22);
  background:
    radial-gradient(120% 120% at 40% 20%, var(--rt-glow12), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,0)),
    var(--rt-card2);
  color:var(--rt-muted);
}

/* Controls / Filter frame */
.rt-ui .rtss__filters{
  border:1px solid var(--rt-border);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(154,126,16,.15), rgba(0,0,0,0)), var(--rt-card2);
  padding:14px;
  margin:12px 0 18px;
}

.rt-ui .rtss__filter-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.rt-ui .rtss__filter{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:220px;
  flex:1 1 220px;
}

.rt-ui .rtss__label{
  color:var(--rt-gold);
  font-weight:700;
  font-size:13px;
}

/* Inputs / selects (gold frame + black fill)
   NOTE: WP themes may override inputs – allow !important ONLY here. */
.rt-ui .rtss__select,
.rt-ui .rtss__input,
.rt-ui textarea{
  background:#000000 !important;
  color:var(--rt-text) !important;
  border:1px solid rgba(154,126,16,.5) !important;
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}

.rt-ui .rtss__select{ color:var(--rt-gold) !important; }

.rt-ui .rtss__select:focus,
.rt-ui .rtss__input:focus,
.rt-ui textarea:focus{
  border-color:var(--rt-border-strong) !important;
  box-shadow:0 0 0 3px rgba(154,126,16,.16);
}

.rt-ui .rtss__input::placeholder,
.rt-ui textarea::placeholder{ color:rgba(255,255,255,.5); }

/* Buttons */
.rt-ui .rtss__btn{
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
  transition:filter .12s ease, transform .06s ease, background-color .12s ease, box-shadow .12s ease;
}

/* Primary (gold) */
.rt-ui .rtss__btn--primary,
.rt-ui .rtss__btn{
  background:var(--rt-gold);
  color:#000;
  border:1px solid rgba(0,0,0,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.rt-ui .rtss__btn:hover{ filter:brightness(.92); box-shadow:0 12px 34px rgba(0,0,0,.45); }
.rt-ui .rtss__btn:active{ transform:translateY(1px); }

/* Optional outline buttons (used in debug tooling) */
.rt-ui .rtss__copy-btn,
.rt-ui .rtss__inspect-btn{
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  background:transparent;
  color:var(--rt-text);
  border:1px solid var(--rt-border-strong);
  transition:background-color .12s ease, filter .12s ease;
}

.rt-ui .rtss__copy-btn:hover,
.rt-ui .rtss__inspect-btn:hover{ background:var(--rt-hover); }

/* KPI Cards */
.rt-ui .rtss__cards{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
  margin:0 0 16px;
}

.rt-ui .rtss__card{
  border:1px solid var(--rt-border);
  border-radius:18px;
  box-shadow:0 12px 35px rgba(0,0,0,.45);
  background:
    radial-gradient(120% 120% at 50% 20%, var(--rt-glow14), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0)),
    var(--rt-card);
  padding:14px;
  text-align:center;
}

.rt-ui .rtss__card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.rt-ui .rtss__card-ico{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid var(--rt-line-22);
  background:rgba(154,126,16,.06);
}

.rt-ui .rtss__card-ico svg{ width:18px; height:18px; fill:var(--rt-gold); }

.rt-ui .rtss__card-label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.25px;
  text-transform:uppercase;
  color:var(--rt-gold);
  text-align:left;
  flex:1;
}

.rt-ui .rtss__card-value{
  margin-top:8px;
  font-size:34px;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--rt-text);
}

.rt-ui .rtss__card-value small{
  font-size:16px;
  font-weight:900;
  color:var(--rt-muted);
}

/* Sparklines */
.rt-ui .rtss__spark{ width:100%; height:44px; margin-top:8px; }
.rt-ui .rtss__spark-area{ fill:rgba(154,126,16,.10); }
.rt-ui .rtss__spark-line{ fill:none; stroke:rgba(154,126,16,.92); stroke-width:2; }

/* Chart block (card surface) */
.rt-ui .rtss__chartwrap{
  border:1px solid var(--rt-border);
  border-radius:18px;
  box-shadow:0 12px 35px rgba(0,0,0,.45);
  background:
    radial-gradient(120% 120% at 50% 20%, var(--rt-glow14), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0)),
    var(--rt-card);
  padding:16px;
  margin:0 0 16px;
}

.rt-ui .rtss__charttitle{
  color:var(--rt-gold);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.35px;
  font-size:13px;
  margin:0 0 12px;
}

/* SVG chart styles */
.rt-ui .rtss__chart{ width:100%; height:auto; display:block; }
.rt-ui .rtss__chartbg{ fill:rgba(0,0,0,.12); stroke:rgba(154,126,16,.22); stroke-width:1; }
.rt-ui .rtss__grid{ stroke:rgba(154,126,16,.16); stroke-width:1; }
.rt-ui .rtss__axis{ stroke:rgba(154,126,16,.25); stroke-width:1; }
.rt-ui .rtss__axislabel{ fill:rgba(255,255,255,.65); font-size:12px; font-weight:700; }
.rt-ui .rtss__xlabel{ fill:rgba(255,255,255,.65); font-size:12px; font-weight:700; }
.rt-ui .rtss__line{ fill:none; stroke-width:3; }
.rt-ui .rtss__lineglow{ fill:none; stroke-width:3; opacity:.55; }
.rt-ui .rtss__dothalo{ fill:rgba(154,126,16,.12); }
.rt-ui .rtss__dot{ fill:rgba(154,126,16,.95); }
.rt-ui .rtss__dot--last{ fill:rgba(154,126,16,1); }
.rt-ui .rtss__dotmissing{ fill:rgba(255,255,255,.20); }
.rt-ui .rtss__val{ fill:var(--rt-text); font-weight:900; font-size:13px; }

/* Section title */
.rt-ui .rtss__section-title{
  margin:10px 0 10px;
  color:var(--rt-gold);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.35px;
  font-size:14px;
}

/* Tables / Lists */
.rt-ui .rtss__table-wrap{
  border-radius:12px;
  border:1px solid var(--rt-line-22);

  /* Mobile fix: allow tables to scroll horizontally on small screens */
  display:block;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color: rgba(154,126,16,.55) transparent;
}

.rt-ui .rtss__table{
  width:100%;
  min-width:640px; /* ensures horizontal scroll instead of ultra-squeezed columns on small phones */
  border-collapse:collapse;
  background:rgba(0,0,0,.15);
}

.rt-ui .rtss__table th{
  text-align:left;
  padding:12px 12px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.25px;
  text-transform:uppercase;
  color:var(--rt-gold);
  background:var(--rt-headbg);
  border-bottom:1px solid var(--rt-line-16);
}

.rt-ui .rtss__table td{
  padding:12px 12px;
  font-size:13px;
  color:var(--rt-text);
  border-bottom:1px solid var(--rt-line-16);
  vertical-align:top;
}

.rt-ui .rtss__table tr:hover td{ background:var(--rt-hover); }
.rt-ui .rtss__table td:last-child,
.rt-ui .rtss__table th:last-child{ text-align:right; }

/* Badges / pills */
.rt-ui .rtss__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(154,126,16,.45);
  background:rgba(154,126,16,.06);
  color:var(--rt-gold);
  font-weight:900;
  font-size:12px;
}

/* Footnote */
.rt-ui .rtss__footnote{
  margin-top:14px;
  color:var(--rt-muted);
  font-size:13px;
}

/* AJAX refresh state */
.rt-ui .rtss__dynamic.rtss__loading{
  opacity:.65;
  pointer-events:none;
  transition:opacity .15s ease;
}

/* Responsive */
@media (max-width: 1020px){
  .rt-ui .rtss__cards{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px){
  .rt-ui .rtss__cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .rt-ui .rtss__filter{ min-width:160px; flex:1 1 160px; }
  .rt-ui .rtss__table th,
  .rt-ui .rtss__table td{ padding:10px 10px; }
}

@media (max-width: 420px){
  .rt-ui .rtss__cards{ grid-template-columns:1fr; }
}