/* ============================================================================
 *  refresh.css — warstwa dociągająca wygląd (ładowana JAKO OSTATNIA)
 * ----------------------------------------------------------------------------
 *  Nie zmienia tożsamości serwisu (czerń + cyan + Space Grotesk). Porządkuje
 *  to, co przez lata rozjechało się między pięcioma plikami CSS:
 *
 *   1. Jedna drabina powierzchni (--s1..--s3) zamiast dwóch półprzezroczystych
 *      --panel/--panel2, które nakładając się na siebie robiły „mleczne” tło.
 *   2. Jeden cień na poziom elewacji — karty miały po dwa naraz, stąd brudne
 *      krawędzie.
 *   3. Skala typograficzna: nagłówki z ujemnym trackingiem, tekst 1.55 leadingu,
 *      cyfry tabelaryczne wszędzie tam, gdzie są wyniki i statystyki.
 *   4. Kontrast --ink-dim z 4.6:1 do 6.3:1 (WCAG AA dla drobnego tekstu).
 *   5. Widoczny focus dla klawiatury — dotąd nie było go wcale.
 *   6. Mniej ruchu bez powodu: hover nie skaluje już nawigacji ani kart.
 *   7. Na telefonie zdjęte backdrop-filter (kilkaset elementów ze szkłem) i
 *      pola dotykowe min. 44 px.
 *   8. Pełny wygląd panelu powiadomień z podziałem NOWE / ARCHIWUM.
 * ========================================================================== */

:root{
  /* powierzchnie — nieprzezroczyste, więc nie mnożą się przy zagnieżdżeniu */
  --s1:#0b0d0f;
  --s2:#111417;
  --s3:#171b1f;
  --line:#22262b;
  --line2:#2f353c;
  --ink-dim:#9aa0a6;
  --ink-mut:#6f767d;

  /* promienie */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-pill:999px;

  /* elewacja — po jednym cieniu na poziom */
  --e1:0 1px 2px rgba(0,0,0,.6);
  --e2:0 8px 24px -10px rgba(0,0,0,.75);
  --e3:0 24px 60px -18px rgba(0,0,0,.85);

  --ring:0 0 0 2px var(--bg), 0 0 0 4px rgba(var(--accent-rgb),.85);
  --ease:cubic-bezier(.2,.8,.3,1);
}

/* ---------- typografia ---------- */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4{ letter-spacing:-.02em; line-height:1.15; }
h1{ font-weight:800; }
h2{ font-weight:700; }
p,li{ line-height:1.55; }
.t-meta,.notif-item-body,.status-card-detail{ line-height:1.5; }

/* Wyniki, tabele i statystyki: cyfry o jednakowej szerokości, żeby kolumny
   nie „skakały” przy każdej zmianie wyniku. */
table.t-table, .stat-tile-val, .mm-scoreboard, .ranking-row,
.match-row, .m-score, .pstat, .profile-stat, .winrate-box{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

/* ---------- focus: jedna, spójna obwódka dla całej strony ---------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none; box-shadow:var(--ring); border-radius:var(--r-xs);
}

/* ---------- nagłówek ---------- */
header{ padding:16px 40px; min-height:76px; }
header::before{ background:rgba(6,7,8,.86); }
header::after{ background:linear-gradient(90deg,transparent,rgba(var(--accent2-rgb),.28),transparent); }
@media(min-width:901px){ header{ position:sticky; top:0; } }
.logo-img{ filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.32)); }

/* ---------- nawigacja: mniej ruchu, czytelniejszy stan aktywny ---------- */
nav.top-nav{
  background:rgba(0,0,0,.5);
  border-color:var(--line);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
nav.top-nav a{
  padding:10px 17px; font-size:13px; font-weight:600; letter-spacing:0;
  transition:color .16s var(--ease), background .16s var(--ease);
}
nav.top-nav a:hover{ transform:none; background:rgba(255,255,255,.06); color:var(--ink); }
nav.top-nav a.active{ transform:none; color:var(--accent-ink); font-weight:700; }
.nav-indicator{ box-shadow:0 4px 14px -6px rgba(var(--accent-rgb),.6); }
#panelNavLink{ padding:10px 15px; font-size:13px; }
#panelNavLink:hover{ transform:none; }

/* ---------- hero: spokojniejszy, mniej „efektów” ---------- */
.hero{ border-radius:var(--r-lg); padding:48px 46px; }
.hero-copy h1{ letter-spacing:-.03em; }
@media(max-width:900px){ .hero{ padding:32px 22px; border-radius:var(--r-md); } }

/* ---------- przyciski ---------- */
.btn-p,.btn-s,.btn-login,.save-btn,.btn-mini{
  border-radius:var(--r-sm);
  transition:background .16s var(--ease), border-color .16s var(--ease),
             box-shadow .16s var(--ease), transform .08s var(--ease);
}
.btn-p{ box-shadow:var(--e2); }
.btn-p:hover{ box-shadow:0 10px 26px -10px rgba(var(--accent-rgb),.7); }
.btn-s,.btn-login{ background:var(--s2); border:1px solid var(--line2); }
.btn-s:hover,.btn-login:hover{ background:var(--s3); }
.btn-p:active,.btn-s:active,.btn-login:active,.save-btn:active,.btn-mini:active{ transform:translateY(1px); }
.btn-mini{ border-radius:var(--r-xs); }

/* ---------- karty: jeden promień, jeden cień, spokojny hover ---------- */
.lcard,.t-card,.snap-card,.status-card,.profile-card,.showcase-card,
.stat-tile,.transfer-card,.scorers-card,.team-hero{
  border-radius:var(--r-md);
  box-shadow:var(--e1);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.lcard:hover,.t-card:hover,.profile-card:hover,.snap-card:hover,.transfer-card:hover{
  border-color:rgba(var(--accent-rgb),.42);
  box-shadow:var(--e2);
  transform:translateY(-2px);
}

/* ---------- pola formularzy ---------- */
input[type=text],input[type=number],input[type=search],input[type=url],
input[type=date],input[type=time],select,textarea,.club-pres-search{
  border-radius:var(--r-sm);
  background:var(--s1);
  border:1px solid var(--line2);
  color:var(--ink);
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
input:hover,select:hover,textarea:hover{ border-color:#3a4148; }
input::placeholder,textarea::placeholder{ color:var(--ink-mut); }

/* ---------- zakładki wewnętrzne ---------- */
.t-tab,.rtab,.stat-tab,.panel-tab-btn{
  border-radius:var(--r-sm);
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.t-tabs,.rtabs{ gap:6px; }

/* ---------- tabele: nagłówek przyklejony, delikatna zebra ---------- */
table.t-table{ border-radius:var(--r-md); overflow:hidden; }
table.t-table th{ position:sticky; top:0; z-index:2; background:var(--s2); letter-spacing:.01em; }
table.t-table tbody tr:nth-child(even){ background:rgba(255,255,255,.022); }
table.t-table tbody tr:hover{ background:rgba(var(--accent-rgb),.06); }

/* ---------- panel administracyjny ---------- */
#panelModalBox{ border-radius:var(--r-lg); box-shadow:var(--e3); }
.panel-rail-title{ color:var(--ink-mut); letter-spacing:.01em; }
.manage-row{ border-radius:var(--r-sm); }

/* ============================================================================
 *  POWIADOMIENIA — NOWE / ARCHIWUM
 * ========================================================================== */
.notif-bell-btn{ width:38px; height:38px; border-radius:var(--r-sm); background:var(--s2); border-color:var(--line2); }
.notif-bell-btn:hover{ transform:none; background:var(--s3); color:var(--accent2); }
.notif-bell-btn.has-new{ color:var(--accent2); border-color:rgba(var(--accent-rgb),.5); }
.notif-bell-badge{
  top:-5px; right:-5px; min-width:17px; height:17px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--accent-ink); font-size:10.5px; font-weight:800;
  box-shadow:0 0 0 2px var(--bg);
}

.notif-dropdown{
  width:384px; padding:0; overflow:hidden;
  background:var(--s2);
  border:1px solid var(--line2);
  border-radius:var(--r-lg);
  box-shadow:var(--e3);
  display:flex; flex-direction:column; max-height:min(74vh,560px);
}
.notif-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px 12px; border-bottom:1px solid var(--line);
}
.notif-head b{ font-size:14.5px; letter-spacing:-.02em; }
.notif-head button{
  background:none; border:none; color:var(--accent2); font-size:11.5px; font-weight:700;
  padding:5px 7px; border-radius:var(--r-xs); cursor:pointer;
}
.notif-head button:hover{ background:rgba(var(--accent-rgb),.12); }

.notif-tabs{ display:flex; gap:4px; padding:10px 12px; background:var(--s1); border-bottom:1px solid var(--line); }
.notif-tab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 10px; border:none; border-radius:var(--r-sm);
  background:none; color:var(--ink-dim); font-size:12.5px; font-weight:700; cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.notif-tab:hover{ background:rgba(255,255,255,.05); color:var(--ink); }
.notif-tab.active{ background:var(--s3); color:var(--ink); box-shadow:var(--e1); }
.notif-tab-count{
  min-width:20px; padding:0 6px; height:18px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:var(--ink-dim); font-size:10.5px; font-weight:800;
}
.notif-tab.active .notif-tab-count{ background:rgba(var(--accent-rgb),.22); color:var(--accent2); }

.notif-list{ overflow-y:auto; padding:8px; scrollbar-width:none; }
.notif-list::-webkit-scrollbar{ width:0; display:none; }

.notif-item{
  position:relative; display:grid; grid-template-columns:34px 1fr; gap:11px;
  width:100%; text-align:left; padding:11px 12px 11px 11px; margin-bottom:4px;
  border:1px solid transparent; border-radius:var(--r-sm);
  background:none; color:var(--ink); cursor:pointer;
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.notif-item:hover{ background:var(--s3); border-color:var(--line); }
.notif-item.unread{ background:rgba(var(--accent-rgb),.07); }
.notif-item.unread::before{
  content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px;
  border-radius:0 3px 3px 0; background:var(--accent);
}
.notif-ico{
  width:34px; height:34px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; font-size:15px;
  background:var(--s1); border:1px solid var(--line);
}
.notif-item.unread .notif-ico{ background:rgba(var(--accent-rgb),.14); border-color:rgba(var(--accent-rgb),.3); }
.notif-item-main{ min-width:0; padding-right:26px; }
.notif-item-title{ font-size:13px; font-weight:700; line-height:1.3; margin-bottom:3px; }
.notif-item-body{
  font-size:12px; color:var(--ink-dim);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.notif-item-time{ font-size:10.5px; color:var(--ink-mut); margin-top:5px; }
.notif-act{
  position:absolute; top:8px; right:8px; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line2); border-radius:var(--r-xs);
  background:var(--s2); color:var(--ink-dim); font-size:12px; line-height:1; cursor:pointer;
  opacity:0; transition:opacity .14s var(--ease), color .14s var(--ease);
}
.notif-item:hover .notif-act,.notif-act:focus-visible{ opacity:1; }
.notif-act:hover{ color:var(--ink); background:var(--s3); }

.notif-empty{ padding:34px 18px; text-align:center; color:var(--ink-dim); font-size:12.5px; line-height:1.6; }
.notif-empty b{ display:block; color:var(--ink); font-size:13.5px; margin-bottom:4px; }
.notif-clear{
  width:100%; margin-top:4px; padding:9px;
  border:1px dashed var(--line2); border-radius:var(--r-sm);
  background:none; color:var(--ink-mut); font-size:11.5px; font-weight:700; cursor:pointer;
}
.notif-clear:hover{ color:#ff8080; border-color:rgba(255,107,107,.45); }

/* ---------- telefon ---------- */
@media(max-width:760px){
  .notif-dropdown{
    position:fixed !important; top:auto !important;
    bottom:10px; right:10px; left:10px; width:auto; max-height:78vh;
  }
  .notif-tabs{ position:sticky; top:0; z-index:2; }
  .notif-act{ opacity:1; }

  /* mniej szkła = płynniejsze przewijanie */
  :root{ --glass-blur:none; }
  .lcard,.t-card,.profile-card,.snap-card,.status-card,.upd-box,.notif-dropdown,
  #panelModalBox,.user-dropdown,.ap-box{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    background:var(--s2);
  }

  /* pola dotykowe */
  nav.top-nav a,.t-tab,.rtab,.panel-tab-btn,.btn-mini{ min-height:44px; display:inline-flex; align-items:center; }
  .notif-bell-btn{ width:44px; height:44px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}