/* ======================================================================
   SpoilerFria SlutResultat – gemensam CSS
   - Index (kortlistor, filter, status)
   - Show (videospelare)
   - Admin stats (adminsidan)
   ====================================================================== */

/* -------------------- BAS -------------------- */
:root{
  --bg: #162646;            /* djup blåsvart bakgrund */
  --card: #ffffff;
  --ink: #0f172a;           /* text mörk */
  --ink-muted: #6b7280;
  --stroke: #e5e7eb;
  --stroke-2: #f3f4f6;
  --brand-1: #2563eb;       /* blå */
  --brand-2: #06b6d4;       /* cyan */
  --brand-3: #111827;       /* mörk header */
  --shadow: 0 6px 22px rgba(0,0,0,.08);

  /* stats-färger */
  --stats-bg-1: #020617;    /* nattblå */
  --stats-bg-2: #0b1120;    /* något ljusare */
  --stats-stroke: #1e293b;  /* skymningsblå kant */
  --stats-ink: #e5e7eb;     /* ljus text */
  --stats-ink-muted: #9ca3af;
  --ok: #4ade80;
  --bad: #f87171;
  --accent: #38bdf8;
}

html, body { height: 100%; }

body {
  background: var(--bg);      /* alltid mörkblå, oavsett systemtema */
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Små nyanser till skrollbarhet */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; }

/* -------------------- YTTRE CONTAINER -------------------- */
.highlights-index{
  max-width: min(1280px, 75vw);  /* ca 75% av skärmen, max 1280px */
  margin: 0 auto;                /* centrera */
  padding: 0 12px 64px;
}

.days-shell{
  width: 100%;
  margin-top: 16px;
}

/* -------------------- LOGO + STATUS -------------------- */
.site-logo img{
  display:block; height:72px; width:auto; user-select:none;
}

.status-row{
  margin:-.25rem 0 1rem; color:var(--ink-muted); font-weight:600;
}
.status-row .sep{ margin:0 .75rem; opacity:.9; }

/* -------------------- FILTER -------------------- */
.filter-wrap{ position: relative; display:inline-block; margin-bottom: .75rem; }

/* trigger-knappen */
.filter-trigger{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .5rem .75rem; border-radius: .6rem;
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color:#fff; border:1px solid rgba(255,255,255,.15); cursor:pointer;
  box-shadow: var(--shadow);
  font-weight:800; letter-spacing:.02em;
}
.filter-trigger:focus-visible{
  outline:2px solid var(--brand-2);
  outline-offset:2px;
}
.filter-trigger .filter-caret{
  border: solid #fff; border-width: 0 2px 2px 0; display: inline-block;
  padding: 3px; transform: rotate(45deg); transition: transform .2s ease;
}
/* rotera pilen när panelen är öppen */
.filter-wrap:has(.filter-panel.open) .filter-trigger .filter-caret{
  transform: rotate(-135deg);
}
/* räknebubblan */
.filter-trigger .count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 6px;
  background:#0ea5e9; color:#081018; border-radius:9999px;
  font-size:11px; font-weight:900;
}

/* själva panelen */
.filter-panel{
  position:absolute; z-index:50; top: calc(100% + 8px); left:0;
  width: 320px; max-height: 70vh; overflow:auto;
  background: #2b2f36; color:#fff; border-radius:.6rem; box-shadow: var(--shadow);
  transform-origin: top left; transform: scale(.98); opacity:0; pointer-events:none;
  transition: .16s ease;
}
.filter-panel.open{ transform: scale(1); opacity:1; pointer-events:auto; }

/* rubriker + chevrons */
.menu-title{
  position:sticky; top:0; background:#33363d; padding:.6rem .9rem;
  font-weight:800; letter-spacing:.02em; border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
}
.menu-title .chev,
.menu-subtitle .chev{
  width:.75rem; height:.75rem;
  border-right:2px solid #cbd5e1; border-bottom:2px solid #cbd5e1;
  transform: rotate(-45deg); transition: transform .16s ease, opacity .16s ease;
  opacity:.9;
}
.menu-title[aria-expanded="true"] .chev,
.menu-subtitle[aria-expanded="true"] .chev{
  transform: rotate(135deg);
}

/* underrubriker (SHL / Hockeyallsvenskan) */
.menu-subtitle{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; font-size:.9rem; letter-spacing:.01em;
  padding:.5rem .6rem; margin:.25rem .6rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  border-radius:.45rem; cursor:pointer;
}

/* innehållsytor */
.menu-body{ display:none; padding:.35rem .6rem .6rem; }
.menu-body.open{ display:block; }
.menu-body > div{ padding:.25rem .1rem; }

/* labels + snygga checkboxar */
.filter-panel label{
  display:flex; align-items:center; gap:.55rem;
  padding:.32rem .3rem; border-radius:.35rem; cursor:pointer;
}
.filter-panel label:hover{ background: rgba(255,255,255,.06); }

/* modern custom checkbox utan extra markup */
.filter-panel input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid rgba(255,255,255,.6);
  background:transparent; display:inline-grid; place-content:center;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.filter-panel input[type="checkbox"]::before{
  content:""; width:10px; height:10px; border-radius:2px;
  background:#10b981; transform:scale(0); transition:transform .12s ease;
}
.filter-panel input[type="checkbox"]:checked{
  border-color:#10b981; background:rgba(16,185,129,.15);
}
.filter-panel input[type="checkbox"]:checked::before{ transform:scale(1); }
.filter-panel input[type="checkbox"]:focus-visible{
  outline:2px solid var(--brand-2); outline-offset:2px;
}

.filter-actions{
  display:flex; gap:.5rem; padding:.6rem; position:sticky; bottom:0;
  background:#2b2f36; border-top:1px solid rgba(255,255,255,.08);
}
.btn-apply, .btn-clear{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .9rem; border-radius:.5rem; font-weight:800; letter-spacing:.02em;
  text-decoration:none; border:0; cursor:pointer;
}
.btn-apply{ background:#10b981; color:#0b1220; }
.btn-clear{ background:#374151; color:#e5e7eb; }

@media (max-width: 420px){
  .filter-panel{ width: 92vw; }
}

/* -------------------- DAGS-SEKTIONER -------------------- */
.section { margin-bottom: 2rem; }

.day-header {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing:.02em;
  color: #ffffff;                          /* datumheader alltid vit */
  border-bottom:2px solid rgba(255,255,255,.25);
  padding-bottom:.5rem;
  margin:0 0 1rem 0;
  text-transform: lowercase;
}
.day-header::first-letter{ text-transform: uppercase; }

/* -------------------- KORT-GRID -------------------- */
.grid-days{
  display:grid; gap:.75rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px){
  .grid-days{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px){
  .grid-days{ grid-template-columns: repeat(4, 1fr); } /* 4 kort på rad desktop */
}

/* Kortet */
.match-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35rem; background:var(--card); border:1px solid var(--stroke-2);
  border-radius:.65rem; padding:.65rem .6rem; text-decoration:none; color:inherit;
  min-height: 88px; box-shadow: var(--shadow);
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.match-card:hover{
  transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,.12);
  background: #f8fafc;
}

/* Ligabild som bakgrund i kortet */
.match-league-bg{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:0.08;
  pointer-events:none;
}
.match-card > *:not(.match-league-bg){
  position:relative;
  z-index:1;
}

/* Ingen highlight (placeholder / saknas) – ljusgrå bakgrund */
.match-card.no-highlight{
  background:#858080;
  box-shadow:none;
  cursor:default;
}
.match-card.no-highlight:hover{
  box-shadow:none;
  transform:none;
}
.match-card.no-highlight .logos{
  opacity:.8;
}
.match-card.no-highlight .team-logo{
  filter:grayscale(100%);
}

/* LOGOTYPER PÅ KORTEN */
.logos{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:44px;
}

.logo-frame{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:.4rem;
  border:1px solid var(--stroke-2);
  overflow:hidden;              /* klipp allt som sticker ut */
}

/* Viktigt: fyll ut rutan men håll dig INNE i den */
.team-logo{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  image-rendering:auto;
  display:block;
  transition: transform .12s ease;
}

.vs{
  font-weight:900;  
  color:#000000;
  margin:0 .15rem;
}

.match-card:hover .team-logo{ transform: scale(1.04); }

.names{
  font-weight:800;
  font-size:.95rem;
  color:var(--ink);
  text-align:center;
}
.names .sep{ color:#9ca3af; }

/* text under kortet (behålls för ev. framtid) */
.badge-missing{
  margin-top:6px;
  text-align:center;
  font-size:.85rem;
  color:#444;
  opacity:1;
  font-weight:600;
}

/* Tom-lista */
.empty{ text-align:center; color:var(--ink-muted); margin-top:2rem; }

/* ====== Overlay + bakgrundsloggor (index) ====== */
#hlOverlay{ position:fixed; inset:0; z-index:1000; display:none; }
#hlOverlay.open{ display:block; }

.hlo-dim{ position:absolute; inset:0; background:rgba(10,12,18,.92); }
.hlo-middle{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:6; }
.player-box{
    width:min(1280px, 86vw);
    transform:scale(1);
    opacity:1;
    transition:transform 280ms ease, opacity 280ms ease;
}
.player{ position:relative; width:100%; }
.player::before{ content:""; display:block; padding-top:56.25%; }
.player > iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0; border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    background:#000;
}

.hlo-bg{ position:absolute; inset:0; display:flex; z-index:3; pointer-events:none; }
.hlo-left, .hlo-right{ position:relative; width:50%; height:100%; overflow:hidden; }
.hlo-logo{
    position:absolute; top:0; left:0;
    width:115%; height:100%;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    opacity:.9;
    filter:none;
    transform:translateX(38%);
}
.hlo-right .hlo-logo{
    transform:translateX(-38%);
}

/* gemensam transition för loggor när overlay är öppen */
#hlOverlay.open .hlo-left .hlo-logo,
#hlOverlay.open .hlo-right .hlo-logo{
    transition:transform 500ms cubic-bezier(.2,.8,.2,1);
}

/* öppnings-animation: loggor glider in */
#hlOverlay.open.animate .hlo-left .hlo-logo,
#hlOverlay.open.animate .hlo-right .hlo-logo{
    transform:translateX(0);
}

/* stängnings-animation: loggor glider ut igen */
#hlOverlay.open.closing .hlo-left .hlo-logo{
    transform:translateX(38%);
}
#hlOverlay.open.closing .hlo-right .hlo-logo{
    transform:translateX(-38%);
}

/* centerline */
.hlo-centerline{
    position:absolute; top:0; left:50%;
    width:4px; height:0;
    transform:translateX(-50%);
    background:#000;
    z-index:5;
    transition:height 420ms ease-out;
}
#hlOverlay.open.animate .hlo-centerline{
    height:100vh;
}
#hlOverlay.open.closing .hlo-centerline{
    height:0;
}

/* spelaren vid stängning */
#hlOverlay.open.closing .player-box{
    transform:scale(.96);
    opacity:0;
}

.hlo-close{
    position:absolute;
    right:20px; top:18px;
    z-index:7;
    background:rgba(0,0,0,.6);
    color:#fff;
    border:0;
    padding:.6rem .8rem;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* ====== Sista-raden (”inga fler matcher”) ====== */
.nomore{ display:none; padding:20px; }
.nomore.show{ display:block; }
.nomore .line{ height:1px; background:rgba(0,0,0,.16); }

/* ======================================================================
   SHOW (video) – bakgrund utanför container, helhöjdsloggor, mittlinje
   ====================================================================== */

.highlight-show.fullpage,
.highlight-show .video-page {
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

/* Bakgrundslagret – bakom allt över hela viewporten */
.highlight-show .video-bg{
  position: fixed;          /* global, ligger under innehåll */
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;

  /* svart mittlinje + toning */
  background:
    linear-gradient(90deg,
      transparent 49.85%,
      rgba(0,0,0,.95) 50%,
      transparent 50.15%
    ),
    linear-gradient(120deg,
      rgba(15,23,42,.92) 0%,
      rgba(15,23,42,.72) 60%,
      rgba(15,23,42,.92) 100%
    );

  box-shadow: inset 0 0 140px rgba(0,0,0,.45);
}

/* Loggorna – hel höjd på respektive halva */
.highlight-show .video-bg::before,
.highlight-show .video-bg::after{
  content:"";
  position: fixed;
  top: 0;
  height: 100dvh;
  width: 50vw;
  background-repeat: no-repeat;
  background-size: auto 100%;
  opacity: .12;
  filter: saturate(115%) contrast(105%);
}
.highlight-show .video-bg::before{
  left: 0;
  background-image: var(--home-logo);
  background-position: left center;
}
.highlight-show .video-bg::after{
  right: 0;
  background-image: var(--away-logo);
  background-position: right center;
}

/* Innehåll ligger över bakgrunden */
.highlight-show .page-pad,
.highlight-show .shell,
.highlight-show .header,
.highlight-show .stage,
.highlight-show .player-wrap,
.highlight-show .player {
  position: relative;
  z-index: 1;
}

/* >>> Minimal luft runt videon */
.highlight-show .page-pad{
  height: 100%;
  padding: 6px 16px 6px;
  box-sizing: border-box;
  overflow: hidden;
}

.highlight-show .shell{
  height:100%;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.highlight-show .header{
  height:48px; display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-radius:12px; background:rgba(2,6,23,.75);
  color:#e5e7eb; backdrop-filter: blur(6px); box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.highlight-show .back{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px;
  background:rgba(255,255,255,.08); color:#e5e7eb; text-decoration:none; font-weight:700;
}
.highlight-show .match{ font-weight:800; letter-spacing:.02em; }

.highlight-show .stage{
  flex:1;
  display:flex; align-items:flex-start; justify-content:center;
  overflow:hidden;
  margin-top: 6px;
}

.highlight-show .player-wrap{
  width: min(1152px, 96vw, calc((100dvh - 120px) * 1.7778));
  aspect-ratio: 16 / 9;
  height:auto;
  border-radius:14px; background:#0b1220;
  box-shadow: 0 18px 48px rgba(0,0,0,.35), 0 4px 18px rgba(0,0,0,.25);
  border:6px solid rgba(2,6,23,.55);
  overflow:hidden;
}

.highlight-show .player{ position:relative; width:100%; height:100%; }
.highlight-show .player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.highlight-show .player-fallback{ color:#e5e7eb; display:grid; place-items:center; height:100%; font-weight:700; }

/* ==== FIX: container ska inte tvingas till fullhöjd ==== */
.highlight-show.fullpage,
.highlight-show .video-page{
  height: auto !important;
}

/* Behåll minimal luft kring spelaren (≤ ~20px totalt) */
.highlight-show .page-pad{
  padding: 6px 16px 6px !important;
  overflow: hidden;
}

.highlight-show .shell{ gap: 6px !important; }
.highlight-show .stage{ margin-top: 6px !important; }

/* Lås scroll på showsidan */
body.no-scroll,
html.no-scroll {
  overflow: hidden !important;
  height: 100dvh;
  overscroll-behavior: none;
}

/* Frys layouten helt (iOS/Safari-säkring) */
body.no-scroll {
  position: fixed;
  inset: 0;
  width: 100%;
}

/* Samma bredd för header och video på showsidan */
.highlight-show{
  --player-width: min(1152px, 96vw, calc((100dvh - 120px) * 1.7778));
}

.highlight-show .header,
.highlight-show .player-wrap{
  width: var(--player-width);
}

.highlight-show .header{
  margin-inline: auto;
}

.highlight-show .stage{
  justify-content: center;
}

/* ======================================================================
   ADMIN STATS (adminsidan /admin/stats)
   ====================================================================== */

.stats-root{
  max-width:1600px;
  width:75%;
  margin:24px auto 48px;
  color:var(--stats-ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
}

@media (max-width:1200px){
  .stats-root{ width:92%; }
}

.stats-header-row{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
  margin-bottom:24px;
}

.stats-title-block h1{
  font-size:22px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#f9fafb;
  margin:0 0 6px;
}

.stats-title-block p{
  margin:0;
  font-size:13px;
  color:var(--stats-ink-muted);
}

.stats-period{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  font-size:13px;
  color:var(--stats-ink-muted);
}

.stats-period strong{
  color:#f9fafb;
  font-weight:500;
}

.stats-period select{
  background:var(--stats-bg-1);
  color:var(--stats-ink);
  border-radius:9999px;
  border:1px solid var(--stats-stroke);
  padding:4px 10px;
  font-size:13px;
  cursor:pointer;
}
.stats-period select:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* --- kortlayout --- */
.stats-section-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-bottom:18px;
}

@media (max-width:900px){
  .stats-section-grid{ grid-template-columns:minmax(0,1fr); }
}

.stats-card{
  background:radial-gradient(circle at top left,var(--stats-bg-2) 0,var(--stats-bg-1) 60%);
  border-radius:16px;
  border:1px solid var(--stats-stroke);
  padding:14px 18px;
  position:relative;
  overflow:hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.stats-card:hover{
  border-color:#334155;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  transform: translateY(-1px);
}

.stats-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
}

.stats-card-title{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--stats-ink);
  font-weight:600;
}

.stats-card-subtitle{
  font-size:11px;
  color:var(--stats-ink-muted);
}

.stats-card-note{
  font-size:11px;
  color:var(--stats-ink-muted);
  line-height:1.4;
}
.stats-card-note strong{
  color:var(--stats-ink);
  font-weight:500;
}

/* status-prickar */
.cron-dot{
  display:inline-block;
  width:8px; height:8px; border-radius:9999px;
  margin-left:6px; vertical-align:middle;
}
.cron-dot-ok{
  background:var(--ok);
  box-shadow:0 0 0 4px rgba(74,222,128,.18);
}
.cron-dot-bad{
  background:var(--bad);
  box-shadow:0 0 0 4px rgba(248,113,113,.18);
}

/* KPI-rad */
.stats-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:24px;
}
@media (max-width:1100px){
  .stats-kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .stats-kpi-grid{ grid-template-columns:minmax(0,1fr); }
}

.stats-kpi-card{
  background:radial-gradient(circle at top left,var(--stats-bg-2) 0,var(--stats-bg-1) 60%);
  border-radius:16px;
  border:1px solid var(--stats-stroke);
  padding:16px 18px 14px;
}
.stats-kpi-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--stats-ink-muted);
  margin-bottom:4px;
}
.stats-kpi-value{
  font-size:28px;
  font-weight:600;
  color:#f9fafb;
}
.stats-kpi-value small{
  font-size:13px; color:var(--stats-ink-muted); margin-left:6px;
}
.stats-kpi-footnote{
  font-size:11px;
  color:var(--stats-ink-muted);
  margin-top:2px;
}

/* Huvudgrid: graf + topplista */
.stats-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:18px;
  margin-bottom:20px;
}
@media (max-width:1100px){
  .stats-main-grid{ grid-template-columns:minmax(0,1fr); }
}

.stats-card-inner-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--stats-ink-muted);
  margin-bottom:8px;
}

.stats-chart-shell{
  position:relative;
  height:260px;
}
@media (max-width:900px){
  .stats-chart-shell{ height:220px; }
}
.chart-empty{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--stats-ink-muted); font-size:12px; letter-spacing:.04em;
}

/* Topplistan */
.stats-toplist-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  margin-top:6px;
}
.stats-toplist-table thead{ border-bottom:1px solid var(--stats-stroke); }
.stats-toplist-table th,
.stats-toplist-table td{
  padding:6px 4px; text-align:left;
}
.stats-toplist-table th{
  font-size:11px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--stats-ink-muted); font-weight:500;
}
.stats-toplist-table tbody tr:nth-child(odd){ background:rgba(15,23,42,.5); }
.stats-toplist-table tbody tr:nth-child(even){ background:rgba(15,23,42,.2); }
.stats-toplist-table tbody tr:hover{ background:rgba(56,189,248,.08); }
.col-rank{ width:28px; text-align:right; color:var(--stats-ink-muted); }
.col-number{ width:60px; text-align:right; font-variant-numeric:tabular-nums; }
.stats-toplist-sub{ font-size:11px; color:var(--stats-ink-muted); margin-top:2px; }

/* Nedre grid: två tabeller */
.stats-row-wide{ margin-bottom:20px; }
.stats-bottom-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr);
  gap:18px;
}
@media (max-width:1200px){
  .stats-bottom-grid{ grid-template-columns:minmax(0,1fr); }
}

.stats-table-shell{
  margin-top:6px; border-radius:12px; overflow:hidden; border:1px solid #0f172a;
}

.stats-table{
  width:100%; border-collapse:collapse; font-size:12px;
}
.stats-table thead{ background:#020617; }
.stats-table th,
.stats-table td{
  padding:6px 8px; text-align:left;
}
.stats-table th{
  font-size:11px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--stats-ink-muted); border-bottom:1px solid #0f172a;
}
.stats-table tbody tr:nth-child(odd){ background:rgba(15,23,42,.55); }
.stats-table tbody tr:nth-child(even){ background:rgba(15,23,42,.25); }
.stats-table tbody tr:hover{ background:rgba(56,189,248,.1); }

.stats-pagination{
  display:flex; justify-content:flex-end; align-items:center; gap:8px;
  margin-top:6px; font-size:11px; color:var(--stats-ink-muted);
}
.stats-pagination button,
.stats-pagination a{
  border-radius:9999px; border:1px solid var(--stats-stroke);
  padding:2px 8px; font-size:11px; background:var(--stats-bg-1);
  color:var(--stats-ink); text-decoration:none; line-height:1.9;
}
.stats-pagination button:hover,
.stats-pagination a:hover{
  border-color:#334155; color:#fff;
}
.stats-pagination button:focus,
.stats-pagination a:focus{
  outline:2px solid var(--accent); outline-offset:2px;
}
.stats-pagination .is-disabled{ opacity:.4; pointer-events:none; }
.stats-pagination strong{ color:#e5e7eb; font-weight:500; }

.stats-cookie{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:11px; color:#e5e7eb;
}
.stats-cookie-muted{ color:var(--stats-ink-muted); }

.stats-empty{ font-size:12px; color:var(--stats-ink-muted); padding-top:6px; }

/* små hjälpelement */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--stats-stroke);
  background:rgba(2,6,23,.6);
  color:#e5e7eb; font-size:11px; padding:4px 8px; border-radius:9999px;
}
.badge .dot{
  width:6px; height:6px; border-radius:50%;
}
.badge .dot.ok{ background:var(--ok); }
.badge .dot.bad{ background:var(--bad); }

/* skärmläsar-utility */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}