:root {
  --header-height: 56px;
  --footer-height: 32px;
}

/* ─── RESET ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  background-color: #001f3f;
  color: #fff;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

/* ─── HEADER ─────────────────────────────────────────────────── */
header {
  flex: 0 0 auto;
  background-color: #001f3f;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header h1 {
  font-family: 'Roboto Slab', serif;
  /* możesz też dostosować wielkość, kolor itd. */
  font-size: 1.75rem;
  font-weight: 700;
}
.ws-status {
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: #dc3545;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background-color 0.3s;
}
.ws-status.connected {
  background-color: #28a745;
}
.logout-btn {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}
.logout-btn:hover {
  background: rgba(255,255,255,0.1);
}

/* ─── USER INFO ───────────────────────────────────────────────── */
.user-info {
  flex: 0 0 auto;
  text-align: center;
  padding: 1rem;
}
.user-info .name {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.user-info .club {
  font-size: 1rem;
  font-weight: 400;
}

/* ─── MAIN VIEWS CONTAINER ───────────────────────────────────── */
#mainViews {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100vh - var(--header-height) - var(--footer-height));
}

/* ─── POSZCZEGÓLNE WIDOKI ───────────────────────────────────── */
#mainViews > .view {
  flex: 1 1 auto;
  display: none;
  justify-content: center;
  align-items: stretch;
  margin: 0;            /* usunięte marginesy, card sam ma teraz margines boczny */
  min-height: 0;        /* żeby flex-children scroll działał */
}
#mainViews > .view.active {
  display: flex;
}

/* ─── OKNO (CARD) DLA WSZYSTKICH WIDOKÓW ─────────────────────── */
.view .card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;         /* wypełnia całe .view */
  min-width: 0;         /* pozwala shrinkować w poziomie */
  min-height: 0;        /* pozwala scrollować w dzieci */
  margin: 0 8px;        /* marginesy z lewej i prawej */
  background: #fff;
  color: #000;
  border-radius: 8px;
  padding: 0px;
  overflow: hidden;     /* scroll tylko w wybranych kontenerach */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ─── LOGIN CARD ─────────────────────────────────────────────── */
.login-card {
  text-align: center;
}
.login-info {
  font-size: 1.6rem;
  color: #001f3f;
  margin-top: 1.5rem;
  line-height: 1.3;
}
.login-ok-btn {
  background: #001f3f;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
}
.login-ok-btn:hover {
  background: #002750;
}

/* ─── AGENDA CARD ────────────────────────────────────────────── */
.agenda-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;     /* scroll przeniesiony do .agenda-scroll */
}
.agenda-card h2 {
  position: sticky;
  top: 0;
  z-index: 10;
  flex: 0 0 auto;
  margin: 0;
  padding: 16px;
  background: #fff;
  color: #000;
}
.agenda-card .agenda-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.agenda-card .agenda-table {
  width: 100%;
  border-collapse: collapse;
  padding: 0;
}
.agenda-card .agenda-table td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}
.agenda-card .index-cell {
  width: 8%;
  text-align: right;
  font-weight: bold;
  padding: 0;
}
.agenda-card tr.current td {
  background: #ffeeba;
  
}

/* ─── CONFIRM, VOTE & ERROR CARDS ────────────────────────────── */
.confirm-card,
.vote-card,
.error-card {
  display: flex;
  flex-direction: column;
}
.confirm-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.confirm-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}
.confirm-btn.yes { background: #28a745; color: #fff; }
.confirm-btn.no  { background: #dc3545; color: #fff; }

/* ─── VOTE CONTAINER & BUTTON ────────────────────────────────── */
.vote-container {
  flex: 0 0 auto;
  text-align: center;
  margin: 16px 8px 8px;
  display: none;
}
.button {
  display: inline-block;
  background-color: #28a745;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 2rem;
  padding: 1.5rem 3rem;
  min-width: 200px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  transition: transform 0.1s ease-in-out;
}
.button:hover { transform: scale(1.05); }
.button:active { transform: scale(0.98); }

/* ─── VOTING CHOICES ──────────────────────────────────────────── */
.choices-card label {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  cursor: pointer;
  user-select: none;
  font-size: 1.5rem;
}
.choices-card input[type="checkbox"],
.choices-card input[type="radio"] {
  appearance: none;
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
  border: 3px solid #28a745;
  background: #fff;
  border-radius: 4px;
  position: relative;
}
.choices-card input:checked {
  background-color: #28a745 !important;
}
.choices-card input:checked::after {
  content: "×";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: #fff;
  line-height: 1;
}
.choices-card label span {
  font-size: 1rem;
  color: #000;
}
.vote-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}
.btn-cancel,
.btn-confirm {
  flex: 1;
  padding: 1rem 0;
  font-size: 1.25rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform .1s ease-in-out;
}
.btn-cancel {
  background-color: #dc3545;
  color: #fff;
}
.btn-cancel:hover { transform: scale(1.03); }
.btn-confirm {
  background-color: #007bff;
  color: #fff;
}
.btn-confirm:hover { transform: scale(1.03); }

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer {
  flex: 0 0 auto;
  background: #001f3f;
}
.footer-text {
  font-size: 0.75rem;
  color: #ccc;
  text-align: center;
  padding: 4px 0;
}

/* —————— na samym dole pliku CSS —————— */

/* 1) Rozszerz marginesy karty tylko w logoutView */
#mainViews > #logoutView > section.card {
  padding: 32px; 
  max-width: none;   /* jeśli chcesz, żeby sięgała pełnej szerokości */
}

#loginView .login-card {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* pionowe wyśrodkowanie */
  align-items: center;      /* poziome wyśrodkowanie */
}

/* 3) Duże przyciski Tak/Nie */
#logoutView .confirm-buttons .confirm-btn {
  padding: 1.25rem 2rem;
  font-size: 1.25rem;
  min-width: 140px;
}

#logoutView .confirm-card p {
  font-size: 1.4rem;       /* minimalnie większa czcionka */
  font-weight: 600;        /* pół-pogrubienie dla wyraźniejszego tekstu */
  line-height: 1.3;        /* poprawiona czytelność */
  margin-bottom: 1.5rem;   /* większy odstęp pod tekstem */
  text-align: center;      /* wycentrowany w karcie */
  color: #000;             /* czarny, bo karta ma białe tło */
}

/* ─── BARDZIEJ WYRAŹNY KOMUNIKAT BŁĘDU Z IKONĄ ───────────────── */
.login-card .error {
  font-size: 1.5rem;           /* większy tekst */
  text-align: center;          /* wyśrodkowany */
  color: #842029;
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
  padding: 1rem;
  border-radius: 4px;
  position: relative;
  margin-top: 1rem;
}

#registerConfirmView .confirm-card p {
  font-size: 1.5rem;
  text-align: center;
  color: #0f5132;           /* ciemna zieleń */
  background-color: #d1e7dd;/* jasna zieleń */
  border: 1px solid #badbcc;
  padding: 1rem;
  border-radius: 4px;
  margin: 1rem 0;
}

/* OK w registerConfirmView – nie pełna szerokość, wycentrowany */
#registerConfirmView .confirm-btn {
  font-size: 1.25rem;       /* większy napis */
  padding: 0.75rem 2.5rem;  /* więcej miejsca w poziomie */
  min-width: 160px;         /* minimalna szerokość */
  border-radius: 6px;       /* nieco łagodniejsze zaokrąglenie */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* delikatny cień */
  align-self: center;       /* wyśrodkowanie w flex-kolumnie */
}

#voteView .card {
  padding: 0px 20px 10px 20px;   /* np. 24px wokół całej zawartości */
}

/* ─── STYLIZACJA NAGŁÓWKA GŁOSOWANIA ───────────────────────── */
.vote-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1rem;
  margin-top: 0;
}
.vote-header .vote-title {
  display: block;
  width: calc(100% + 40px);  /* 100% szerokości kontenera + 2×20px */
  margin: 0 -20px;           /* przesunięcie w lewo i prawo o 20px */
  box-sizing: content-box;   /* żeby padding nie wliczał się do szerokości */
  font-size: 1.2rem;           /* nieco mniejsza czcionka */
  background-color: #bbbbbb;
  color: #333;
  padding: 0.25rem 1.5rem;
  text-align: center;
  border-radius: 4px;
}


.vote-header .vote-subtitle {
  font-size: 1.2rem;
  color: #333;
  padding: 10px 10px 0px 10px;
}

/* 1) Upewnij się, że cała karta vote-card może się zwężać i rozciągać */
#voteView .vote-card {
  display: flex;
  flex-direction: column;
  height: 100%;     /* wypełnia całe .view */
  min-height: 0;    /* pozwala na scroll w dzieciach */
  overflow: hidden; /* scroll puść w podkontenerze */
}

/* 2) .choices-card zabiera pozostałą przestrzeń i przewija się */
#voteView .choices-card {
  flex: 1 1 auto;
  min-height: 0;        /* konieczne, by flex-child scrollował */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 3) Akcje (przyciski) zawsze na dole, bez scrolla */
#voteView .vote-actions {
  flex: 0 0 auto;
}

/* ─── WSPÓLNE: karta potwierdzenia i karta „już głosowałeś” ───────────────── */

#voteConfirmationView .confirm-card,
#voteAlreadyView  .confirm-card {
  display: flex;
  flex-direction: column;
  height: 100%;      /* wypełnia cały .view */
  min-height: 0;     /* pozwala na scroll w dzieci */

  -webkit-overflow-scrolling: touch;
}

/* tekst i ewentualne dłuższe komunikaty – przewija się */
#voteConfirmationView .confirm-card {
  display: flex;
  flex-direction: column;
  height: 100%;    /* wypełnia cały .view */
  min-height: 0;   /* pozwala na poprawne scrollowanie flex-child */
  overflow: hidden;/* scroll puszczamy w dzieciach */
}

/* 2) Tekst i lista wyborów przewijają się */
#voteConfirmationView .confirm-card > .confirmation-text,
#voteConfirmationView .confirm-card > .choices-card {
  flex: 1 1 auto;      /* rosną, kurczą się i zajmują resztę przestrzeni */
  min-height: 0;       /* konieczne, by flex-child scrollował */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
}

/* 3) Przyciski zawsze przy dole karty */
#voteConfirmationView .confirm-card > .confirm-buttons {
  flex: 0 0 auto;
}

/* ─── WYGLĄD DLA JUŻ ODDANYCH GŁOSÓW ───────────────────────── */

/* Kontener z zaznaczonymi opcjami nie powinien rosnąć ani przewijać się,
   ma mieć padding 10px i być wyrównany u góry */
#voteAlreadyView .choices-card {
  padding: 10px;       /* odstęp od krawędzi */
  flex: 0 0 auto;      /* nie rośnie w flexie i nie kurczy się */
  overflow: visible;   /* bez scrolla */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* wyrównanie do góry */
  align-items: flex-start;
}

/* Opcje jedna pod drugą z niewielkim odstępem */
#voteAlreadyView .choices-card label {
  margin-bottom: 0.5rem;
}

/* ─── SPECJALNE STYLE DLA voteAlreadyView ───────────────── */

/* 1) Przywróć p flex:0, padding 10px */
#voteAlreadyView .confirm-card > p {
  flex: 0 0 auto;       /* usuń rozciąganie na całą wysokość */
  overflow: visible;     /* wyłącz scroll */
  padding: 10px;         /* odstęp wewnętrzny */
  margin: 0;             /* reset marginesów */
}

/* 2) Dodaj odstęp przed listą wybranych opcji */
#voteAlreadyView .choices-card {
  margin-top: 10px;      /* 10px od <p> */
  padding: 0 10px;       /* opcjonalnie padding poziomy */
  flex: 0 0 auto;        /* nie rośnie */
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* 3) Etykiety z odstępem z dołu */
#voteAlreadyView .choices-card label {
  margin-bottom: 0.5rem;
}

/* ─── STYLE DLA voteConfirmationView.confirmChoices ───────────────── */

/* Reset i padding dla komunikatu, tak żeby nie rozpychał kontenera */
#voteConfirmationView .confirm-card > p.confirmation-text {
  margin: 0;
  padding: 10px;
  flex: 0 0 auto;
}

/* Kontener z wybranymi opcjami */
#voteConfirmationView .choices-card {
  margin-top: 10px;       /* odstęp pod komunikatem */
  padding: 0 10px;        /* poziomy padding */
  flex: 0 0 auto;         /* nie rośnie ani nie kurczy się */
  overflow: visible;      /* bez scrolla */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Każda etykieta z 10px odstępu */
#voteConfirmationView .choices-card label {
  margin-bottom: 10px;
}

/* ============================
   Wyniki – dostosowanie układu
   ============================ */

/* 1) Container .card z wynikami – ograniczamy wysokość i dodajemy scroll */
#resultsViewDelegate .card {
  padding: 10px;                     /* 10px paddingu po bokach */
  max-height: 80vh;                  /* maksymalna wysokość na ekranie */
  overflow-y: auto;                  /* włączamy pionowe przewijanie */
}

/* 2) Tytuł głosowania – ciemniejsze tło, pełna szerokość wewnątrz .card */
#resultsTitleDelegate {
  display: block;
  background-color: #c0c0c0;         /* nieco ciemniejszy szary */
  padding: 0.75rem 0.5rem;
  margin: -10px -10px 1rem;              /* wysunięcie na boki, aby wypełnił całe card */
  font-size: 1.2rem;
  color: #333;
}

/* 3) Mniejszy odstęp między wierszami (zmniejszamy margin-bottom) i nowy układ grid */
.bar-row {
  display: grid;
  grid-template-columns: 1fr auto;   /* pierwsza kolumna: wykres, druga: wartość */
  grid-template-rows: auto auto;     /* pierwszy wiersz: etykieta, drugi: wykres+wartość */
  row-gap: 4px;                      /* odstęp między etykietą a wykresem */
  margin-bottom: 0.5rem;             /* zmniejszony odstęp między wierszami */
}

/* 4) Etykieta (nazwa wyboru) zajmuje cały wiersz */
.bar-label {
  grid-column: 1 / -1;               /* rozciągnięcie na obie kolumny */
  font-weight: bold;
  font-size: 1rem;
  color: #333;
  margin: 0;                         /* usuwamy domyślne marginesy */
}

/* 5) Obudowa wykresu (track) w drugiej linii, pierwsza kolumna */
.bar-track {
  grid-column: 1 / 2;
  background: #e0e0e0;
  height: 1rem;
  border-radius: 3px;
  overflow: hidden;
}

/* 6) Wypełnienie wykresu (fill) */
.bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

/* 7) Wartość (liczba głosów) po prawej stronie wykresu */
.bar-value {
  grid-column: 2 / 3;
  font-size: 0.9rem;
  color: #555;
  text-align: right;
  padding-left: 0.5rem;
}

/* 8) ‚Powrót do agendy’ – wyśrodkowanie przycisku */
#resultsBackBtn {
  display: block;
  margin: 1rem auto 0;
}
#resultsBackBtn {
  padding-left: 8px;
  padding-right: 8px;
}

/* 9) Na małych ekranach – upewniamy się, że padding boczny pozostaje 10px */
@media (max-width: 480px) {
  #resultsViewDelegate .card {
    padding-left: 10px;
    padding-right: 10px;
  }
  #resultsTitleDelegate {
    font-size: 1.1rem;
  }
  .bar-label {
    font-size: 0.95rem;
  }
  .bar-value {
    font-size: 0.85rem;
  }
}

/* Ramka wokół tekstu z liczbą głosów: cienka czarna linia, białe tło */
#resultsFooterDelegate {
  display: inline-block;
  background-color: #fff;      /* białe tło */
  color: #000;                 /* czarny tekst */
  border: 1px solid #000;      /* cienka czarna ramka */
  padding: 0.4rem 0.8rem;      /* minimalny wewnętrzny odstęp */
  border-radius: 3px;          /* delikatnie zaokrąglone narożniki */
  margin-top: 0.75rem;         /* odstęp nad ramką */
  font-size: 0.9rem;           /* odpowiednia wielkość czcionki */
}

/* kontener „badge’y” */
.detailed-results .badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* wspólny styl dla każdego „badge’a” */
.detailed-results .badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

/* kolory dla poszczególnych opcji */
.detailed-results .badge-za {
  background-color: #28a745;
}

.detailed-results .badge-przeciw {
  background-color: #dc3545;
}

.detailed-results .badge-wstrzymuje {
  background-color: #ffc107;
  color: #212529;  /* ciemniejszy tekst na żółtym tle */
}