/* ============================
   KALENDARZ – scope: #callendarId
   (zero globalnych nadpisań)
   ============================ */
#callendarId{
  /* własne, prywatne zmienne kalendarza */
  --cal-bg1:#0b0f15;
  --cal-bg2:#12161e;
  --cal-card:#121723;
  --cal-line:rgba(255,255,255,.08);
  --cal-txt:#fff;
  --cal-sub:#aeb3c2;
  --cal-accent:#e23a3a;
  --cal-pill:#1b2230;
}

#callendarId .calwrap{ max-width:1280px; margin:18px auto; padding:0 16px; color:var(--cal-txt); }

/* Belka „Kalendarz na sezon …” (fiolecik jak na screenie 2) */
#callendarId .cal-hero{
  margin:18px 0 12px; padding:16px;
  background:
    radial-gradient(1200px 420px at 50% -10%, rgba(123,47,186,.35) 0%, rgba(123,47,186,0) 60%),
    linear-gradient(180deg, #3b1a4d 0%, #1a1026 100%);
  border:1px solid rgba(123,47,186,.35);
  border-radius:18px;
  box-shadow:0 12px 40px rgba(123,47,186,.25);
}
#callendarId .cal-hero h2{ margin:0 0 10px; font-size:18px; color:#cbd3e1; }

#callendarId .cal-tabs{ display:flex; gap:10px; flex-wrap:wrap; }
#callendarId .tabbtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:.55rem 1rem; border-radius:999px;
  background:var(--cal-pill); color:#fff; border:1px solid var(--cal-line);
  font-weight:700; cursor:pointer;
  transition:transform .08s, box-shadow .2s, background .2s, border-color .2s;
}
#callendarId .tabbtn:hover{ transform:translateY(-1px); }
#callendarId .tabbtn.active{
  background:var(--cal-accent); border-color:#b72a2a; box-shadow:0 0 10px rgba(226,58,58,.35);
}

/* Kafelki wydarzeń */
#callendarId .cal-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:16px;
}
#callendarId .cal-card{
  position:relative; overflow:hidden; color:var(--cal-txt);
  border:1px solid var(--cal-line); border-radius:16px;
  background:
    linear-gradient(0deg,rgba(255,255,255,.03),rgba(255,255,255,.03)),
    linear-gradient(180deg,#141c29,#0e1520);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform .12s, box-shadow .2s, border-color .2s, background .2s;
}
#callendarId .cal-card:hover{
  transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.38);
  border-color:rgba(255,255,255,.14);
}
#callendarId .cal-card a{ color:inherit; text-decoration:none; display:block; padding:14px; }

#callendarId .card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
#callendarId .round{
  font-weight:700; font-size:12px; color:#aeb3c2; background:rgba(255,255,255,.06);
  border:1px solid var(--cal-line); padding:4px 8px; border-radius:999px;
}
#callendarId .flag{
  width:56px; height:40px; border-radius:10px; object-fit:cover;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 2px 8px rgba(0,0,0,.35);
}

#callendarId .track{ font-weight:700; font-size:18px; line-height:1.25; margin:2px 0 10px; min-height:24px; }

#callendarId .meta{ width:100%; border-collapse:collapse; font-size:13px; }
#callendarId .meta td{ padding:6px 0; vertical-align:middle; }
#callendarId .meta .k{ color:var(--cal-sub); width:48%; }
#callendarId .meta .v{ text-align:right; font-weight:700; }

#callendarId .badge{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
#callendarId .badge.gp{
  background:#243446; color:#9dd4ff; border:1px solid rgba(157,212,255,.25);
}
#callendarId .badge.sprint{
  background:#3f2a1a; color:#ffc38b; border:1px solid rgba(255,195,139,.25);
}

#callendarId .hidden{ display:none !important; }

.cal-yearbar .yearbtn:disabled { cursor: not-allowed; }
.cal-yearbar select { background: #0f0f0f; color: #fff; border: 1px solid #333; }