/* ============================================================================
   lobby-refresh.css — Odświeżenie LOBBY + LOGOWANIA (Wariant A)
   ----------------------------------------------------------------------------
   WAŻNE — kolejność ładowania:
   Klasy lobby (.lobby-tab-btn, .lobby-item, .sch-*) są zdefiniowane w bloku
   <style> WEWNĄTRZ <body> board.html (ok. linii 3653). Żeby je nadpisać, ten
   plik musi być wczytany PÓŹNIEJ niż tamten blok. Najprościej: wstaw <link>
   tuż przed </body>:

       ...
       <script src="/static/wb-icons.js" defer></script>
       <link rel="stylesheet" href="/static/lobby-refresh.css">   <!-- DODAJ -->
     </body>

   (Dlatego reguły używają !important — pokonują wcześniejszy blok <style>
   oraz style inline na elementach powłoki.)

   ZAKRES: powłoka lobby, ekran logowania, pasek zakładek, listy projektów/
   szablonów, przyciski, pola, kalendarz. Listy generowane w JS (użytkownicy,
   aktualności, egzaminy, logi, kafelki kalendarza) mają własne inline-style i
   wymagają drobnej zmiany w funkcjach renderujących — patrz README.
   ============================================================================ */

:root{
  --accent:#2f6fe0; --accent-eff:var(--accent);
  --panel:#ffffff; --panel-2:#f4f6f9; --panel-hd:#fbfcfd;
  --border:#e5e8ee; --border-2:#d7dbe3;
  --text:#1b2230; --muted:#717a89; --faint:#9aa3b2;
  --hover:#eef1f7; --warn:oklch(0.66 0.13 72);
  --shadow:0 10px 30px rgba(22,32,52,.13);
  --shadow-lg:0 24px 70px rgba(18,26,45,.28);
}
/* Tryb ciemny — aplikacja przełącza body.dark; html.dark dla podglądu.
   Po remapie (lobby-refresh.js) inline-style używają tych zmiennych,
   więc całe lobby — łącznie z listami z JS — podąża za motywem. */
body.dark, html.dark{
  --accent-eff:color-mix(in oklab, var(--accent), white 18%);
  --panel:#181b21; --panel-2:#1f232b; --panel-hd:#1c2027;
  --border:#2a2f3a; --border-2:#353b48;
  --text:#e7eaf0; --muted:#98a1b1; --faint:#7c8597;
  --hover:#262b35; --warn:oklch(0.78 0.12 75);
  --shadow:0 16px 44px rgba(0,0,0,.55);
  --shadow-lg:0 30px 80px rgba(0,0,0,.6);
}

/* ── Backdrop + karta logowania ── */
#loginOverlay{ background:rgba(15,20,30,.55) !important; }
#loginOverlay > div{
  border-radius:18px !important; box-shadow:var(--shadow-lg) !important;
  border:1px solid var(--border) !important; padding:32px 30px 28px !important;
  background:var(--panel) !important; color:var(--text);
}
#loginOverlay h2{ font-size:19px !important; font-weight:680 !important; color:var(--text) !important; }
#loginOverlay label{ font-size:11px !important; font-weight:600 !important; color:var(--muted) !important;
  text-transform:uppercase; letter-spacing:.04em; }
#loginOverlay input{
  border:1px solid var(--border-2) !important; border-radius:10px !important;
  background:var(--panel-2) !important; padding:10px 12px !important; color:var(--text) !important;
}
#loginOverlay input:focus{ border-color:var(--accent-eff) !important; background:#fff !important; outline:none; }
#loginBtn{ background:var(--accent-eff) !important; border-radius:10px !important;
  padding:11px !important; font-weight:650 !important; }

/* ── Backdrop + karta lobby ── */
#lobbyOverlay{ background:rgba(15,20,30,.55) !important; }
#lobbyOverlay > div{
  background:var(--panel) !important; border:1px solid var(--border) !important;
  border-radius:18px !important; box-shadow:var(--shadow-lg) !important;
  /* overflow-y:auto (nie hidden!) — karta ma max-height:90vh; hidden ucinał dół
     bez suwaka i wysokiej treści viewera (kalendarz+rezerwacje) nie dało się zobaczyć */
  padding:0 !important; overflow-y:auto !important; overflow-x:hidden !important; color:var(--text);
}
/* nagłówek (h2 + powitanie) dostają oddech */
#lobbyOverlay > div > div:first-child{ padding:18px 24px 0 !important; }
#lobbyOverlay h2{ font-size:18px !important; font-weight:680 !important; color:var(--text) !important; }
#lobbyGreeting{ color:var(--muted) !important; font-size:13px !important; margin:6px 0 18px !important; }
/* zawiń treść w padding (overlay child ma padding:0, więc dajemy go elementom) */
#lobbyOwnerSection, #lobbyViewerSection{ padding:0 24px 22px !important; }

/* przycisk Wyloguj (inline) */
#lobbyOverlay button[onclick="lobbyLogout()"]{
  border:1px solid var(--border-2) !important; border-radius:9px !important;
  background:var(--panel) !important; color:var(--muted) !important; padding:6px 11px !important;
}
#lobbyOverlay button[onclick="lobbyLogout()"]:hover{ background:var(--hover) !important; color:var(--text) !important; }

/* ── „Nowa pusta tablica” + elementy listy ── */
.lobby-item{ border-radius:10px !important; padding:11px 13px !important; font-size:13.5px !important; }
.lobby-item:hover{ background:var(--hover) !important; }
.lobby-item-new{
  border:1.5px solid var(--accent-eff) !important;
  background:color-mix(in oklab, var(--accent-eff) 8%, transparent) !important;
  color:var(--accent-eff) !important; font-weight:650 !important; margin-bottom:14px !important;
}
.lobby-item-active{
  background:color-mix(in oklab, var(--accent-eff) 12%, transparent) !important;
  border-color:var(--accent-eff) !important; color:var(--accent-eff) !important;
}
#lobbyProjectList .lobby-item-active, #lobbyTemplateList .lobby-item-active{
  border-left:3px solid var(--accent-eff) !important;
}

/* ── Pasek zakładek ── */
.lobby-tab-bar{ gap:4px !important; flex-wrap:wrap !important; padding-bottom:14px !important;
  margin-bottom:16px !important; border-bottom:1px solid var(--border) !important; }
.lobby-tab-btn{
  flex:0 0 auto !important; padding:7px 12px !important; font-size:12.5px !important;
  font-weight:550 !important; border:1px solid transparent !important; border-radius:9px !important;
  background:transparent !important; color:var(--muted) !important;
}
.lobby-tab-btn:hover{ background:var(--hover) !important; color:var(--text) !important; border-color:transparent !important; }
.lobby-tab-btn.active{ background:var(--accent-eff) !important; color:#fff !important; border-color:var(--accent-eff) !important; }

/* ── Kontenery list ── */
#lobbyProjectList, #lobbyTemplateList, #lobbyUsersList, #lobbyNewsList,
#lobbyTopicsList, #lobbyExamsContainer, #lobbyAssignedList{
  border:1px solid var(--border) !important; border-radius:12px !important;
}

/* ── Pola formularzy w lobby ── */
#lobbyOverlay input, #lobbyOverlay select, #lobbyOverlay textarea{
  border:1px solid var(--border-2) !important; border-radius:9px !important;
  background:var(--panel-2) !important; color:var(--text) !important; padding:7px 10px !important;
}
#lobbyOverlay input:focus, #lobbyOverlay select:focus, #lobbyOverlay textarea:focus{
  border-color:var(--accent-eff) !important; background:#fff !important; outline:none;
}
#lobbyNewsInput{ background:#fff !important; }

/* ── System przycisków .btn (spójny z tablicą) ── */
.btn{ border:1px solid var(--border-2) !important; border-radius:10px !important;
  background:var(--panel) !important; color:var(--text) !important; padding:9px 14px !important; }
.btn:hover{ background:var(--hover) !important; }
.btn-primary{ background:var(--accent-eff) !important; border-color:var(--accent-eff) !important; color:#fff !important; }
.btn-danger{ color:oklch(0.57 0.18 22) !important; background:var(--panel) !important;
  border-color:color-mix(in oklab, oklch(0.57 0.18 22) 40%, var(--border-2)) !important; }
.btn-purple{ background:oklch(0.55 0.16 295) !important; border-color:oklch(0.55 0.16 295) !important; color:#fff !important; }
#lobbyStartBtn{ padding:12px !important; font-size:14px !important; font-weight:650 !important; border-radius:11px !important; }

/* Nadpisania o specyficzności ID — pewnie wygrywają z board.css .btn */
#lobbyOverlay .btn, #loginOverlay .btn{ background:var(--panel) !important; }
#lobbyOverlay .btn-primary{ background:var(--accent-eff) !important; color:#fff !important; }
#lobbyOverlay .btn-danger, #loginOverlay .btn-danger{ background:transparent !important; }
#lobbyOverlay .btn-purple{ background:oklch(0.55 0.16 295) !important; color:#fff !important; }

/* ── Kalendarz / plan lekcji ── */
.sch-nav-btn{ background:var(--panel) !important; border:1px solid var(--border-2) !important;
  border-radius:9px !important; padding:6px 12px !important; color:var(--text) !important; }
.sch-nav-btn:hover{ background:var(--hover) !important; }
.sch-day-head{ background:var(--panel-2) !important; border-bottom:1px solid var(--border) !important;
  color:var(--text) !important; }
.sch-day-head:hover{ background:var(--hover) !important; }
.sch-dcol{ border-left:1px solid var(--border) !important; }
.sch-slot-block{ border-radius:8px !important; }
/* Wiersze listy rezerwacji mają jasne, semantyczne tła (nieprzemapowane w dark),
   więc tekst (nazwa ucznia, data) musi być zawsze ciemny — inaczej znika w dark mode.
   Plakietki ze swoim własnym (inline) kolorem zostają nietknięte. */
.sch-booking-row{ border:1px solid var(--border) !important; border-radius:9px !important; color:#1b2230 !important; }

/* ── „Dołącz do tablicy" (viewer) — motyw .btn wygaszał inline-zieleń; przywróć
   i wyróżnij (puls, gdy aktywny) ── */
/* podwójne ID (2,0,0) — musi wygrać z "#lobbyOverlay .btn" (1,1,0) powyżej */
#lobbyOverlay #lobbyJoinBtn{
  background:#2ecc71 !important; border-color:#27ae60 !important; color:#fff !important;
}
#lobbyOverlay #lobbyJoinBtn:not([disabled]){ animation:joinPulse 1.6s ease-out infinite; }
#lobbyOverlay #lobbyJoinBtn:not([disabled]):hover{ background:#28b463 !important; }
#lobbyOverlay #lobbyJoinBtn[disabled]{ opacity:.55 !important; animation:none; }
@keyframes joinPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(46,204,113,.55); }
  50%    { box-shadow:0 0 0 10px rgba(46,204,113,0); }
}

/* ── Pigułki filtrów (egzaminy / logi / kalendarz) — best-effort ── */
#examFilterBtnNowa, #examFilterBtnAll{ border-radius:999px !important; }
