/* ============================================================================
   LSO -- motyw wizualny inspirowany aplikacją eduVULCAN, w wersji
   "przejrzystej i nowoczesnej": szkło (glassmorphism) na pasku góra/dół i w
   panelu bocznym, delikatne gradienty, miękkie cienie z kolorem marki,
   płynne przejścia przy interakcji. Wszystkie nazwy klas zostały zachowane
   1:1 -- żaden plik PHP nie wymaga zmian, to czysto wizualny refresh.
   Projektowane mobile-first: telefon to podstawowy widok, komputer to
   rozszerzenie tego samego układu (boczne menu zamiast dolnego paska).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --navy: #123A63;
  --navy-dark: #0C2A49;
  --navy-light: #1E4D7B;
  --blue: #2266C9;
  --blue-bright: #3B82F6;
  --blue-light: #E8F1FD;
  --blue-light-2: #DCEAFB;
  --bg: #F1F4F9;
  --card: #FFFFFF;
  --text: #1C2733;
  --text-muted: #6B7889;
  --border: #E3E8EF;
  --green: #1FA97A;
  --green-bg: #E6F7F1;
  --red: #E5484D;
  --red-bg: #FDECEC;
  --amber: #DB9A1F;
  --amber-bg: #FCF3E1;

  --gradient-brand: linear-gradient(135deg, #1B4E82 0%, #123A63 55%, #0C2A49 100%);
  --gradient-accent: linear-gradient(135deg, #2E77E0 0%, #2266C9 55%, #1B54AC 100%);
  --gradient-mesh:
    radial-gradient(1100px 560px at 105% -12%, rgba(34,102,201,0.10), transparent 60%),
    radial-gradient(820px 480px at -12% 6%, rgba(31,169,122,0.07), transparent 55%);

  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 26px;

  --shadow: 0 3px 16px rgba(18, 58, 99, 0.07);
  --shadow-md: 0 10px 30px rgba(18, 58, 99, 0.12);
  --shadow-lg: 0 20px 50px rgba(12, 42, 73, 0.22);
  --glow-accent: 0 8px 22px rgba(34, 102, 201, 0.30);

  --glass-light: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-navy: rgba(15, 46, 79, 0.86);

  /* Powierzchnie "białe" -- osobne tokeny (zamiast literalnego #fff/rgba w
     regułach niżej), żeby tryb ciemny mógł je podmienić w jednym miejscu. */
  --surface: #FFFFFF;
  --surface-glass: rgba(255, 255, 255, 0.78);
  --surface-glass-strong: rgba(255, 255, 255, 0.92);
  --surface-glass-soft: rgba(255, 255, 255, 0.85);
  --surface-border: rgba(255, 255, 255, 0.7);
  --card-border: rgba(18, 58, 99, 0.055);
  --card-border-hover: rgba(18, 58, 99, 0.09);
  --red-bg-hover: #FBDBDC;

  /* Wyraźniejsza obwódka dla "kafelków" typu kalendarz/grafik -- w
     odróżnieniu od --card-border (bardzo subtelna, tylko dla samej karty)
     ma być na tyle widoczna, żeby kafelek dawało się odróżnić od tła karty,
     na której leży, w każdym z trzech motywów. */
  --tile-outline: rgba(18, 58, 99, 0.16);

  --nav-h: 64px;
  --nav-gap: 12px;
  --top-h: 58px;
}

/* ============================================================================
   Tryb ciemny -- włączany przełącznikiem w "Moje konto" (edytuj_konto.php),
   zapisany na koncie (uzytkownicy.motyw) i ustawiany jako data-theme na <html>
   przez includes/layout_top.php. Ekrany logowania/rejestracji nie mają
   jeszcze zalogowanego użytkownika, więc nie ustawiają tego atrybutu i
   zawsze zostają w wersji jasnej/brandowej -- to zamierzone.
   Wszystkie komponenty poniżej w pliku korzystają z tych samych zmiennych,
   więc podmiana tokenów tutaj wystarcza -- żaden inny selektor nie musi się
   duplikować dla ciemnego motywu. ========================================= */
html[data-theme="dark"] {
  --navy: #8FBCF2;
  --navy-dark: #EAF2FF;
  --navy-light: #4E82BE;
  --blue: #5B9BEA;
  --blue-bright: #6EA9F5;
  --blue-light: rgba(91, 155, 234, 0.16);
  --blue-light-2: rgba(91, 155, 234, 0.26);
  --bg: #0B1622;
  --card: #131F2E;
  --text: #E7ECF3;
  --text-muted: #90A1B5;
  --border: #223349;
  --green: #34D399;
  --green-bg: rgba(52, 211, 153, 0.14);
  --red: #F87171;
  --red-bg: rgba(248, 113, 113, 0.14);
  --amber: #FBBF24;
  --amber-bg: rgba(251, 191, 36, 0.14);

  --gradient-brand: linear-gradient(135deg, #123454 0%, #0A1E33 55%, #060F1A 100%);
  --gradient-accent: linear-gradient(135deg, #3E85DE 0%, #2E77E0 55%, #1F5FBE 100%);
  --gradient-mesh:
    radial-gradient(1100px 560px at 105% -12%, rgba(91,155,234,0.10), transparent 60%),
    radial-gradient(820px 480px at -12% 6%, rgba(52,211,153,0.06), transparent 55%);

  --shadow: 0 3px 16px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
  --glow-accent: 0 8px 22px rgba(91, 155, 234, 0.30);

  --glass-light: rgba(19, 31, 46, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-navy: rgba(6, 15, 26, 0.86);

  --surface: #182636;
  --surface-glass: rgba(19, 31, 46, 0.78);
  --surface-glass-strong: rgba(17, 27, 40, 0.92);
  --surface-glass-soft: rgba(19, 31, 46, 0.88);
  --surface-border: rgba(255, 255, 255, 0.08);
  --card-border: rgba(255, 255, 255, 0.06);
  --card-border-hover: rgba(255, 255, 255, 0.12);
  --red-bg-hover: rgba(248, 113, 113, 0.22);
  --tile-outline: rgba(255, 255, 255, 0.18);
}

/* Nagłówek/pasek boczny są już z natury "ciemnymi" elementami brandowymi w
   obu motywach -- w trybie ciemnym pogłębiamy je jeszcze bardziej, żeby nie
   odcinały się od reszty aplikacji jasnym, niepasującym granatem. */
html[data-theme="dark"] .topbar {
  background: linear-gradient(135deg, rgba(19,52,84,0.92), rgba(6,15,26,0.95));
}
html[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, rgba(19,52,84,0.98) 0%, rgba(6,15,26,0.99) 100%);
}
/* Uwaga: ekrany logowania/rejestracji/resetu hasła nie przechodzą przez
   layout_top.php (nie ma jeszcze zalogowanego użytkownika), więc nigdy nie
   dostają atrybutu data-theme -- .auth-screen zawsze zostaje w wersji
   jasnej/brandowej, celowo bez osobnej reguły tutaj. */

/* Drobne poprawki, których nie da się załatwić samą podmianą zmiennych --
   cienie i scrollbar liczone są wprost na kolorze marki (navy), a na ciemnym
   tle taki odcień w ogóle nie byłby widoczny. */
html[data-theme="dark"] .bottomnav { box-shadow: 0 14px 36px rgba(0,0,0,0.5); }
html[data-theme="dark"] .more-sheet { box-shadow: 0 -8px 30px rgba(0,0,0,0.5); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); }

/* ============================================================================
   Trzeci motyw: "Programista" -- czarno-żółty, wysoki kontrast, dla osób,
   które wolą taki właśnie klimat zamiast klasycznego jasny/ciemny. Wybierany
   tak samo jak tryb ciemny -- w "Moje konto" (edytuj_konto.php), zapisany
   jako uzytkownicy.motyw = 'programista'. Ponieważ całą resztę pliku
   napisano na zmiennych, tokeny poniżej wystarczają prawie wszędzie --
   dopisane są tylko te kilka reguł, które (tak jak w trybie ciemnym) mają
   kolor lub tekst wpisany na sztywno zamiast przez var(). ========= */
html[data-theme="programista"] {
  --navy: #FFD400;
  --navy-dark: #FFD400;
  --navy-light: #FFC400;
  --blue: #FFD400;
  --blue-bright: #FFE066;
  --blue-light: rgba(255, 212, 0, 0.14);
  --blue-light-2: rgba(255, 212, 0, 0.22);
  --bg: #000000;
  --card: #0A0A0A;
  --text: #FFD400;
  --text-muted: #B99A00;
  --border: #3A3300;
  --green: #7CFF6B;
  --green-bg: rgba(124, 255, 107, 0.12);
  --red: #FF5C5C;
  --red-bg: rgba(255, 92, 92, 0.14);
  --amber: #FFD400;
  --amber-bg: rgba(255, 212, 0, 0.14);

  --gradient-brand: linear-gradient(135deg, #1A1600 0%, #000000 100%);
  --gradient-accent: linear-gradient(135deg, #FFD400 0%, #E6BE00 100%);
  --gradient-mesh:
    radial-gradient(1100px 560px at 105% -12%, rgba(255,212,0,0.06), transparent 60%),
    radial-gradient(820px 480px at -12% 6%, rgba(255,212,0,0.04), transparent 55%);

  --shadow: 0 0 0 1px rgba(255,212,0,0.15);
  --shadow-md: 0 0 0 1px rgba(255,212,0,0.28), 0 8px 24px rgba(0,0,0,0.6);
  --shadow-lg: 0 0 40px rgba(255,212,0,0.18);
  --glow-accent: 0 0 16px rgba(255,212,0,0.5);

  --glass-light: rgba(0, 0, 0, 0.75);
  --glass-border: rgba(255, 212, 0, 0.25);
  --glass-navy: rgba(0, 0, 0, 0.9);

  --surface: #0A0A0A;
  --surface-glass: rgba(0, 0, 0, 0.85);
  --surface-glass-strong: rgba(0, 0, 0, 0.92);
  --surface-glass-soft: rgba(0, 0, 0, 0.9);
  --surface-border: rgba(255, 212, 0, 0.3);
  --card-border: rgba(255, 212, 0, 0.3);
  --card-border-hover: rgba(255, 212, 0, 0.55);
  --red-bg-hover: rgba(255, 92, 92, 0.25);
  --tile-outline: rgba(255, 212, 0, 0.4);
}

/* Ten motyw dostaje też monospace -- pasuje do "programisty" i dodatkowo
   podkreśla, że to inny, świadomie wybrany klimat, a nie tylko przefarbowany
   tryb ciemny. */
html[data-theme="programista"] body {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

html[data-theme="programista"] .topbar {
  background: #000;
  color: var(--text);
  border-bottom: 1px solid rgba(255,212,0,0.25);
}
html[data-theme="programista"] .sidebar {
  background: #000;
  border-right: 1px solid rgba(255,212,0,0.2);
}
html[data-theme="programista"] .sidebar a { color: rgba(255,212,0,0.6); }
html[data-theme="programista"] .sidebar a:hover { background: rgba(255,212,0,0.08); color: var(--text); }
html[data-theme="programista"] .sidebar a.active {
  background: rgba(255,212,0,0.12);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255,212,0,0.3);
}
/* Gradientowe przyciski/aktywne zakładki mają w tym motywie żółte tło --
   biały tekst (jak w pozostałych motywach) byłby na nim nieczytelny. */
html[data-theme="programista"] .btn,
html[data-theme="programista"] .tabs a.active {
  color: #000;
}
html[data-theme="programista"] .bottomnav,
html[data-theme="programista"] .more-sheet {
  box-shadow: 0 0 0 1px rgba(255,212,0,0.2), 0 14px 36px rgba(0,0,0,0.7);
}
html[data-theme="programista"] ::selection { background: var(--blue); color: #000; }
html[data-theme="programista"] ::-webkit-scrollbar-thumb { background: rgba(255,212,0,0.25); }
html[data-theme="programista"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,212,0,0.4); }

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
  /* Zabezpieczenie na przyszłość -- gdyby jakiś rząd (np. dużo pigułek grup
     przy ogłoszeniu) znów spróbował rozepchnąć układ w bok, ma się zawinąć
     albo zostać przycięty, a nie przesunąć w scroll całą stronę i obciąć
     wszystko z lewej. Elementy z własnym przewijaniem (.tabs, tabele,
     szablon tygodnia) mają swój overflow-x: auto i działają jak dotychczas. */
  overflow-x: hidden;
}

body {
  background:
    var(--gradient-mesh),
    var(--bg);
  background-attachment: fixed;
}

::selection { background: var(--blue); color: #fff; }

/* Cienki, dyskretny scrollbar na desktopie -- reszta detali "premium" czuć
   właśnie w takich drobiazgach. */
@media (min-width: 900px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(18,58,99,0.18); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(18,58,99,0.32); }
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0 0 0.6rem 0; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
p { line-height: 1.55; }

/* Elementy widoczne tylko na komputerze (patrz media query niżej) */
.sidebar { display: none; }
.topbar-desktop { display: none; }

/* ---------------------------------------------------------------- Top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--top-h);
  background: linear-gradient(135deg, rgba(27,78,130,0.90), rgba(12,42,73,0.94));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 6px 24px rgba(12, 42, 73, 0.16);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.1px;
}

.topbar .brand img {
  height: 27px;
  width: 27px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.topbar .profil {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar .profil img {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.75);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
  transition: transform .15s ease, box-shadow .15s ease;
}

.topbar .profil:active img { transform: scale(0.94); }

.topbar .profil-menu {
  position: relative;
}

.topbar .profil-dropdown {
  position: absolute;
  right: 0;
  top: 46px;
  background: var(--surface-glass-soft);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  color: var(--text);
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  overflow: hidden;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none;
}

.topbar .profil-menu.open .profil-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.topbar .profil-dropdown a,
.topbar .profil-dropdown button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: none;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  transition: background .12s ease;
}

.topbar .profil-dropdown a:hover,
.topbar .profil-dropdown button:hover { background: var(--blue-light); }

/* ------------------------------------------------------------- Container */

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 14px calc(var(--nav-h) + var(--nav-gap) + 34px) 14px;
}

.page-title {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navy-dark);
  margin: 6px 2px 12px 2px;
}

/* ------------------------------------------------------------------ Karty */

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 17px 18px;
  margin-bottom: 14px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

@media (hover: hover) {
  .card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--card-border-hover);
  }
}

.card h3 { font-size: 1.03rem; color: var(--navy-dark); font-weight: 700; }

.card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 6px 8px;
}

/* Gdy ogłoszenie/ankieta ma sporo przypisanych grup (Ministranci, Lektorzy,
   Kandydaci...), pigułki muszą się zawijać zamiast rozpychać kartę w bok --
   inaczej cała strona dostawała poziomy scroll i wszystko obcinało się z
   lewej (dokładnie ten błąd, który to poprawia). */
.card-header > .card-meta { min-width: 0; word-break: break-word; }

.card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------- Kafelki (tiles) */

.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
  margin-bottom: 16px;
}

.tile {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 17px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  min-height: 98px;
  justify-content: center;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-accent);
  opacity: 0;
  transition: opacity .16s ease;
  z-index: 0;
}

.tile:active { transform: scale(0.96); }

@media (hover: hover) {
  .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}

.tile .tile-icon {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue-light) 0%, var(--blue-light-2) 100%);
  color: var(--blue);
  font-size: 1.18rem;
  box-shadow: inset 0 0 0 1px rgba(34, 102, 201, 0.08);
  transition: transform .16s ease;
}

@media (hover: hover) {
  .tile:hover .tile-icon { transform: scale(1.08) rotate(-4deg); }
}

.tile span { position: relative; z-index: 1; font-size: 0.82rem; font-weight: 700; color: var(--text); }

.tile .tile-badge {
  position: absolute;
  margin-top: -34px;
  margin-left: 28px;
  background: var(--red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 1px 6px;
  box-shadow: 0 2px 8px rgba(229, 72, 77, 0.45);
  z-index: 2;
}

/* -------------------------------------------------------------- Przyciski */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 20px;
  border-radius: 14px;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  background: var(--gradient-accent);
  color: #fff;
  text-align: center;
  box-shadow: var(--glow-accent);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease, background .14s ease;
}

.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(34, 102, 201, 0.36); }
.btn:active { opacity: 0.92; transform: translateY(0); box-shadow: 0 5px 14px rgba(34, 102, 201, 0.28); }
.btn.block { width: 100%; }
.btn.secondary { background: var(--blue-light); color: var(--blue); box-shadow: none; }
.btn.secondary:hover { background: var(--blue-light-2); box-shadow: none; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--blue); padding-left: 6px; padding-right: 6px; box-shadow: none; }
.btn.ghost:hover { background: rgba(34,102,201,0.08); box-shadow: none; }
.btn.danger { background: var(--red-bg); color: var(--red); box-shadow: none; }
.btn.danger:hover { background: var(--red-bg-hover); box-shadow: none; transform: translateY(-1px); }
.btn.sm { padding: 8px 13px; font-size: 0.82rem; border-radius: 11px; }

/* ----------------------------------------------------------------- Formularze */

label { display: block; font-weight: 700; font-size: 0.85rem; margin: 12px 0 5px 0; color: var(--text); }

input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=date], input[type=time], input[type=number], input[type=datetime-local],
select, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 13px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 0.95rem;
  color: var(--text);
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(34, 102, 201, 0.13);
}

.checkbox-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-weight: 500; font-size: 0.9rem; }
.checkbox-row input { width: auto; }

/* --------------------------------------------------------- Przełącznik (switch) */

.switch { position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background .2s ease;
}
.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: transform .2s ease;
}
.switch input:checked + .switch-track { background: var(--gradient-accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(22px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 4px rgba(34,102,201,0.2); }

/* ------------------------------------------------------- Wybór motywu (3 opcje) */

.theme-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-picker input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.theme-picker label {
  flex: 1 1 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}
.theme-picker label i { font-size: 1.3rem; }
.theme-picker input:checked + label {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(34,102,201,0.12);
}
.theme-picker input:focus-visible + label { box-shadow: 0 0 0 3px rgba(34,102,201,0.25); }

.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.form-actions .btn { flex: 1 1 120px; }

fieldset { border: 1.5px solid var(--border); border-radius: var(--radius-sm); margin: 14px 0; padding: 10px 12px; }
legend { font-weight: 700; font-size: 0.85rem; color: var(--navy); padding: 0 6px; }

/* -------------------------------------------------------------------- Pigułki statusów */

.pill {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.pill.green { background: var(--green-bg); color: var(--green); border-color: rgba(31,169,122,0.16); }
.pill.red { background: var(--red-bg); color: var(--red); border-color: rgba(229,72,77,0.16); }
.pill.amber { background: var(--amber-bg); color: var(--amber); border-color: rgba(219,154,31,0.18); }
.pill.blue { background: var(--blue-light); color: var(--blue); border-color: rgba(34,102,201,0.14); }
.pill.gray { background: #EEF1F5; color: var(--text-muted); }

/* --------------------------------------------------- Szablon tygodniowy służeń */

.szablon-tydzien {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin: 4px -4px 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
}
.szablon-dzien {
  flex: 0 0 152px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
}
.szablon-dzien-head {
  font-weight: 700;
  font-size: 0.82rem;
  text-align: center;
  color: var(--navy-dark);
  margin-bottom: 8px;
}
.szablon-msza {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 8px;
  transition: box-shadow .15s ease;
}
.szablon-msza-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.86rem;
}
.szablon-msza-head .btn.danger.sm { padding: 2px 8px; }
.szablon-osoby {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
  min-height: 2px;
}
.szablon-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--blue-light);
  color: var(--blue);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 0.74rem;
  font-weight: 600;
}
.szablon-chip button {
  background: none;
  border: none;
  color: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.szablon-msza select.szablon-wybor-osoby {
  width: 100%;
  font-size: 0.74rem;
  padding: 5px 6px;
  margin: 0;
}
.szablon-nowa-godzina summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 2px 0;
}

/* ----------------------------------------------------------------- Komunikaty */

.komunikat {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  border-left: 4px solid currentColor;
  box-shadow: var(--shadow);
  animation: lsoSlideDown .25s ease;
}
.komunikat.sukces { background: var(--green-bg); color: var(--green); }
.komunikat.blad { background: var(--red-bg); color: var(--red); }
.komunikat.info { background: var(--blue-light); color: var(--blue); }

@keyframes lsoSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------- Listy */

.lista-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.lista-item:last-child { border-bottom: none; }
.lista-item.moja-funkcja {
  background: linear-gradient(135deg, var(--blue-light) 0%, var(--blue-light-2) 100%);
  border-radius: var(--radius-sm);
  border-bottom: none;
  padding: 12px 12px;
  margin: 2px 0;
  box-shadow: inset 3px 0 0 var(--blue);
}

.avatar-sm {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--card-border);
}

/* ------------------------------------------------------- Kontakt (czat) */
/* Dymki rozmowy w kontakt_watek.php -- wiadomości administratora wyrównane
   do prawej i podświetlone gradientem marki, wiadomości użytkownika do
   lewej na neutralnym szkle. Działa identycznie w obu rolach (właściciel
   wątku i admin patrzą na te same dymki, tylko z różnych stron ekranu). */
.chat-watek {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 2px;
}
.chat-bubble {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.chat-bubble.od-uzytkownika {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-bubble.od-admina {
  align-self: flex-end;
  background: var(--gradient-accent);
  color: #fff;
  border-color: transparent;
  border-bottom-right-radius: 4px;
}
html[data-theme="programista"] .chat-bubble.od-admina { color: #000; }
.chat-bubble-autor {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  opacity: 0.75;
  margin-bottom: 3px;
}
.chat-bubble-tresc {
  font-size: 0.92rem;
  line-height: 1.5;
  word-break: break-word;
}
.chat-bubble-czas {
  font-size: 0.72rem;
  opacity: 0.65;
  margin-top: 5px;
  text-align: right;
}

/* ---------------------------------------------------------- Dolny pasek (mobile) */
/* "Pływający" pasek ze szkła -- odsunięty od krawędzi, rozmyte tło (backdrop
   -filter), żeby dolna nawigacja wyglądała lekko i nowocześnie, a nie jak
   ciężki, płaski słupek przyklejony do dołu ekranu. */

.bottomnav {
  position: fixed;
  left: var(--nav-gap);
  right: var(--nav-gap);
  bottom: calc(var(--nav-gap) + env(safe-area-inset-bottom, 0px));
  height: var(--nav-h);
  background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--surface-border);
  border-radius: 22px;
  display: flex;
  z-index: 25;
  box-shadow: 0 14px 36px rgba(18,58,99,0.18);
}

.bottomnav a,
.bottomnav button[data-more-toggle] {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: color .15s ease;
}

.bottomnav button[data-more-toggle] {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.bottomnav a i,
.bottomnav button[data-more-toggle] i { font-size: 1.14rem; transition: transform .15s ease; }

.bottomnav a.active,
.bottomnav button[data-more-toggle].active { color: var(--blue); }

.bottomnav a.active i,
.bottomnav button[data-more-toggle].active i { transform: translateY(-1px); }

.bottomnav a.active::before,
.bottomnav button[data-more-toggle].active::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 8px rgba(59,130,246,0.75);
}

/* ------------------------------------------------------- Arkusz "Więcej" (mobile bottom sheet) */

.more-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9,32,55,0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 26;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.more-overlay.open { opacity: 1; pointer-events: auto; }

.more-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface-glass-strong);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--surface-border);
  z-index: 27;
  padding: 10px 14px calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px rgba(18,58,99,0.18);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(.32,.72,0,1);
  max-height: 75vh;
  overflow-y: auto;
}
.more-sheet.open { transform: translateY(0); }

.more-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 6px auto 10px;
}

.more-sheet a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background .12s ease;
  border-radius: 10px;
}
.more-sheet a:last-child { border-bottom: none; }
.more-sheet a:active { background: var(--blue-light); }
.more-sheet a i { width: 22px; text-align: center; font-size: 1.05rem; color: var(--blue); }
.more-sheet a.active { color: var(--blue); }
.more-sheet a.danger { color: var(--red); }
.more-sheet a.danger i { color: var(--red); }

/* ---------------------------------------------------------------------- Tabele (desktop-friendly, scrollowalne) */

.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--text-muted); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--blue-light); }

/* ------------------------------------------------------------------ Zakładki */

.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.tabs a {
  padding: 8px 15px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  box-shadow: var(--shadow);
  transition: all .15s ease;
}
.tabs a:hover { color: var(--blue); }
.tabs a.active { background: var(--gradient-accent); color: #fff; border-color: transparent; box-shadow: var(--glow-accent); }

/* --------------------------------------------------------------- Ekran logowania */

.auth-screen {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--gradient-brand);
}

.auth-screen::before,
.auth-screen::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
.auth-screen::before { width: 380px; height: 380px; background: #3B82F6; top: -140px; left: -110px; }
.auth-screen::after { width: 320px; height: 320px; background: #1FA97A; bottom: -110px; right: -90px; opacity: 0.35; }

.auth-card {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  padding: 32px 26px;
  width: 100%;
  max-width: 380px;
  animation: lsoRise .4s cubic-bezier(.22,1,.36,1);
}

@keyframes lsoRise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 20px; }
.auth-logo img { width: 58px; height: 58px; border-radius: 15px; box-shadow: 0 8px 20px rgba(18,58,99,0.22); }
.auth-logo h1 { font-size: 1.22rem; color: var(--navy-dark); text-align: center; font-weight: 800; }

.auth-links { text-align: center; margin-top: 16px; font-size: 0.86rem; color: var(--text-muted); }
.auth-links a { color: var(--blue); font-weight: 700; }

/* --------------------------------------------------- "Zainstaluj aplikację" */
/* Prawdziwy skrót do instalatora, na stałe pod panelem logowania (nie
   pływający, nie ukryty za jakimś zdarzeniem) -- klikalny przycisk, nie tylko
   opis "jak to zrobić samemu". Podpowiedź tekstowa (#install-hint-text)
   pojawia się tylko tam, gdzie przeglądarka faktycznie nie potrafi
   zainstalować appki jednym kliknięciem (Safari na iOS) albo gdy przycisk
   kliknięto zanim przeglądarka zdążyła zaoferować instalator. */
.install-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.install-section-divider {
  text-align: center;
  margin-bottom: 12px;
}
.install-section-divider span {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.install-hint-text {
  margin: 10px 0 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}
.install-hint-text i { color: var(--blue); }

/* --------------------------------------------------------------- Rozwijane karty (modlitwy) */

details.card { padding: 0; overflow: hidden; }
details.card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  font-weight: 700;
  color: var(--navy-dark);
  transition: background .12s ease;
}
details.card summary:hover { background: var(--blue-light); }
details.card summary::-webkit-details-marker { display: none; }
details.card summary i:first-child { color: var(--blue); width: 20px; text-align: center; }
details.card summary i.chev { margin-left: auto; transition: transform 0.2s ease; color: var(--text-muted); }
details.card[open] summary i.chev { transform: rotate(180deg); }
details.card .details-body { padding: 0 16px 16px 16px; line-height: 1.7; color: var(--text); }

/* Uwaga: to jest samodzielny <a class="card zewn-link">, NIE zagnieżdżony w
   <details> -- selektor musi celować w niego bezpośrednio, inaczej te reguły
   nigdy się nie dopasują i link wygląda jak surowa, niesformatowana .card
   (dokładnie ten błąd, który to poprawia). */
a.zewn-link.card {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  color: var(--navy-dark); text-decoration: none;
}
a.zewn-link.card i:first-child { color: var(--blue); width: 20px; text-align: center; flex-shrink: 0; }
a.zewn-link.card .zewn-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
a.zewn-link.card .zewn-tekst small { color: var(--text-muted); font-weight: 400; }

/* ------------------------------------------------------------ Wyniki ankiet (admin) */

.wyniki-ankiety { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.wynik-wiersz { margin-bottom: 10px; }
.wynik-etykieta { display: flex; justify-content: space-between; gap: 8px; font-size: 0.88rem; font-weight: 600; margin-bottom: 4px; }
.wynik-pasek { background: var(--bg); border-radius: 999px; height: 8px; overflow: hidden; }
.wynik-pasek-wypelnienie { background: var(--gradient-accent); height: 100%; border-radius: 999px; transition: width 0.3s ease; }

.patroni-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.patron-card { background: var(--bg); border-radius: var(--radius-sm); padding: 14px; transition: box-shadow .15s ease; }
.patron-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; border-radius: var(--radius-sm); margin-bottom: 10px; }
.patron-card h3 { margin: 0 0 2px 0; color: var(--navy-dark); font-size: 1rem; }
.patron-card h4 { margin: 0 0 8px 0; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }
.patron-card p { margin: 0 0 10px 0; font-size: 0.9rem; }
.patron-card .modlitwa { background: var(--blue-light); border-radius: 10px; padding: 10px 12px; font-size: 0.86rem; font-style: italic; color: var(--navy-dark); }

/* ---------------------------------------------------------------- Desktop (>=900px) */

@media (min-width: 900px) {
  body { display: flex; }

  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 232px;
    background: linear-gradient(180deg, rgba(27,78,130,0.98) 0%, rgba(12,42,73,0.99) 100%);
    backdrop-filter: blur(20px);
    color: #fff;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid rgba(255,255,255,0.06);
    box-shadow: 4px 0 24px rgba(12,42,73,0.12);
  }

  .sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 22px 10px; font-weight: 800; }
  .sidebar .brand img { width: 33px; height: 33px; border-radius: 9px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }

  .sidebar a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.78);
    transition: background .15s ease, color .15s ease, transform .15s ease;
  }
  .sidebar a i { width: 18px; text-align: center; }
  .sidebar a:hover { background: rgba(255,255,255,0.08); color: #fff; transform: translateX(2px); }
  .sidebar a.active {
    background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  }

  .bottomnav { display: none; }
  .more-overlay, .more-sheet { display: none; }
  .topbar { display: none; }

  .main-desktop {
    margin-left: 232px;
    width: calc(100% - 232px);
    min-height: 100vh;
  }

  .topbar-desktop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
  }

  .wrap { max-width: 900px; padding: 0 32px 44px 32px; margin: 0; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .patroni-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------- Dostępność ruchu */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}