/* ==========================================================================
   4BestObywatel - warstwa dopracowania UI (ui-polish.css)
   --------------------------------------------------------------------------
   Ten plik laduje sie PO app.css, wiec celowo nadpisuje jego reguly.
   Trzymamy tu trzy rzeczy:

     1. Gorny pasek i rozwijane menu - napisy byly za duze i wychodzily
        poza ekran, zwlaszcza gdy w pasku stoi jednoczesnie Discord,
        zaproszenia, limit instancji i nazwa konta.
     2. Telefony - zakladki panelu admina, naglowki, tabele, przyciski.
     3. Drobne poprawki przyciskow (rownanie, zaokraglenia, klikalne pole).
     4. Boczny pasek skrotow (Discord / Beta Panel / Strefa Admina) - ikonki
        po lewej, na telefonie poziomo na samym dole.

   Nic tu nie zmienia logiki PHP - to czysta warstwa wygladu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GORNY PASEK - napisy
   -------------------------------------------------------------------------- */

/* Nazwa konta w pasku byla najszerszym elementem i to ona wypychala resztę.
   Zmniejszamy limit i dodajemy plynne obciecie. */
.profile-name {
  max-width: 118px;
  font-size: 12.5px;
}

/* Etykiety w pigulkach: mniejszy tekst i twardszy limit szerokosci. */
.pill { font-size: 12px; padding: 8px 13px; gap: 7px; }
.pill i { font-size: 12.5px; }
.pill-text { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Napis limitu buduje teraz PHP: "Limit: 5" albo "Bez Limitu". Nie ma tu
   juz zadnego dopisywania tekstu przez CSS, bo dublowaloby slowo "Limit". */
.pill-limit .pill-text b { font-size: 12px; color: #fff; font-weight: 700; }

/* Godlo (Orzel Bialy) przed nazwa panelu w lewym gornym rogu. */
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: 0 0 auto;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--border);
}

/* Kontener paska: pozwalamy kolumnie z nawigacja zwezac sie do zera,
   zeby dlugi tytul panelu nie wypychal przyciskow za ekran. */
.topbar { gap: 12px; }
.topbar-nav { flex-wrap: nowrap; }
.topbar-brand { overflow: hidden; }

/* --------------------------------------------------------------------------
   2. ROZWIJANE MENU KONTA
   -------------------------------------------------------------------------- */

.dropdown-item {
  font-size: 13px;
  padding: 10px 12px;
  line-height: 1.35;
}

/* Najdluzsza pozycja: "Prośba o zaproszenie / więcej instancji".
   Na waskim menu lamie sie teraz do dwoch linii zamiast rozpychac panel. */
.dropdown-item-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

/* Szerokosc menu: nigdy szersza niz ekran minus margines. */
.profile .dropdown { min-width: min(272px, calc(100vw - 24px)); }

/* Naglowek menu: dane konta po lewej, zdjecie profilowe po prawej. */
.dropdown-head {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dropdown-head-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Nazwa konta tez musi sie ciac. */
.dropdown-head strong {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-head .avatar { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   3. ZAKLADKI (admin + customize) - na telefonie siatka, nie pasek
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  /* Bylo: poziomy pasek przewijany palcem, wiec polowa zakladek byla
     niewidoczna i trzeba bylo sie domyslac, ze tam sa. Teraz wszystkie
     zakladki sa widoczne od razu, w dwoch kolumnach. */
  .tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    padding-bottom: 0;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar { display: none; }

  .tab {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 11px;
    font-size: 12.5px;
    gap: 7px;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Ikona trzyma stala szerokosc, wiec teksty w kolumnie sa rowno. */
  .tab > i {
    font-size: 12.5px;
    width: 16px;
    flex: 0 0 16px;
    text-align: center;
  }

  /* Napis obcina sie z wielokropkiem - nigdy nie wychodzi z kafelka. */
  .tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Licznik dociskamy do prawej krawedzi kafelka. */
  .tab-count {
    margin-left: auto;
    flex: 0 0 auto;
  }

  /* Menu profilu na telefonie: pelna szerokosc, wygodny duzy cel dotyku. */
  .profile .dropdown {
    min-width: min(300px, calc(100vw - 20px));
    max-height: min(72dvh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .dropdown-item { min-height: 46px; font-size: 13.5px; }
  .dropdown-head { padding: 10px 12px 11px; }
  .dropdown-head strong { font-size: 14px; }
}

/* Bardzo waskie ekrany (iPhone SE i podobne): zakladki jedna pod druga. */
@media (max-width: 380px) {
  .tabs { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   4. TELEFONY - naglowki, tabele, przyciski
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  /* Tytuly lamia sie do dwoch linii zamiast byc ucinane w polowie wyrazu. */
  .page-head h1 {
    font-size: 20px;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .page-head h1 i { flex: 0 0 auto; }
  .page-head p { font-size: 13px; line-height: 1.45; }
  .page-head { margin-bottom: 18px; }

  /* Naglowki sekcji (np. "Konta" + wyszukiwarka) jeden pod drugim. */
  .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .section-head h2 { font-size: 16px; }

  /* Wyszukiwarka na pelna szerokosc, wciecie na ikone zostaje. */
  .search-input { width: 100%; }

  /* Tabele zamienione na karty: etykieta po lewej, wartosc po prawej.
     Wartosci dostaja prawo do zawijania, bo adresy IP i kody kluczy
     nie mieszcza sie w jednej linii na waskim ekranie. */
  .data-table td {
    flex-wrap: wrap;
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .data-table td > * { min-width: 0; }

  /* Komorka z samymi przyciskami nie potrzebuje etykiety ani prawego
     dosuniecia - przyciski maja isc jeden pod drugim na pelna szerokosc.
     Uzywamy :has() tam, gdzie przegladarka je zna (Chrome 105+, Safari 15.4+,
     Firefox 121+), a nizej mamy zapasowy znacznik .cell-actions, ktory PHP
     dokłada w admin.php - starsze telefony nie zostaja bez poprawki. */
  .data-table td:has(> .btn-grid),
  .data-table td:has(> .admin-opts),
  .data-table td:has(> .inline-form),
  .data-table td.cell-actions {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .data-table td:has(> .btn-grid)::before,
  .data-table td:has(> .admin-opts)::before,
  .data-table td:has(> .inline-form)::before,
  .data-table td.cell-actions::before {
    margin-bottom: 4px;
  }

  /* Siatki przyciskow w adminie: na telefonie jedna kolumna, bo dwie
     kolumny z dlugimi napisami ("Odbierz admina", "Zablokuj konto")
     ucinaly tekst do "...". */
  .btn-grid { grid-template-columns: minmax(0, 1fr); }
  .btn-grid .btn { white-space: normal; text-align: center; line-height: 1.3; }

  /* Przyciski: wygodny cel dotyku 44px i tekst, ktory sie nie ucieka. */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }

  .btn-group, .row-actions { flex-wrap: wrap; }
  .row-actions .btn { flex: 1 1 auto; }

  /* Karty i listy - oddech na malym ekranie. */
  .list-item { flex-direction: column; align-items: stretch; gap: 9px; }
  .list-item .btn { width: 100%; }

  .card h2 { font-size: 16px; }
  .card h3 { font-size: 14.5px; }

  /* Kod/klucze: mniejsza czcionka, ale bez wychodzenia z karty. */
  .mono { font-size: 12px; word-break: break-all; }

  /* Modale: przyciski jeden pod drugim, na pelna szerokosc. */
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }

  /* Stopka - mniejszy tekst, zeby nie robila trzech linii. */
  .site-foot { font-size: 12px; }
}

@media (max-width: 400px) {
  .profile-name { max-width: 78px; }
  .pill { padding: 8px 11px; }
  .page-head h1 { font-size: 18.5px; }
}

/* --------------------------------------------------------------------------
   5. KARTA "PRYWATNOŚĆ" (customize.php -> Settings)
   -------------------------------------------------------------------------- */

/* Wiersz: opis po lewej, przycisk po prawej. Na telefonie jedno pod drugim. */
.privacy-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.privacy-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.privacy-row:hover { border-color: var(--border-2); background: var(--surface-3); }

.privacy-info {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.privacy-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.privacy-title i { width: 16px; text-align: center; color: var(--text-3); }

.privacy-desc { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }

.privacy-form { flex: 0 0 auto; }

/* Przycisk jest przelacznikiem: szerokosc stala, zeby napis "IP ukryte"
   i "Ukryj IP" nie przesuwaly ukladu po kliknieciu. */
.privacy-form .btn {
  min-width: 148px;
  justify-content: center;
}

@media (max-width: 720px) {
  .privacy-row { flex-direction: column; align-items: stretch; gap: 11px; }
  .privacy-info { flex: 1 1 auto; }
  .privacy-form { width: 100%; }
  .privacy-form .btn { width: 100%; min-width: 0; }
}

/* --------------------------------------------------------------------------
   6. DROBNE POPRAWKI PRZYCISKOW (kazdy ekran)
   -------------------------------------------------------------------------- */

/* Przyciski z ikona i tekstem: ikona zawsze tej samej szerokosci, wiec
   napisy w pionowej kolumnie sa rowno dosuniete. */
.btn > i { flex: 0 0 auto; }

/* Przycisk wylaczony nie moze wygladac jak klikalny. */
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Trzymanie proporcji kafelkow zakladek na tabletach. */
@media (min-width: 721px) and (max-width: 1100px) {
  .tab { padding: 9px 13px; font-size: 12.5px; }
  .pill-text { max-width: 104px; }
  .profile-name { max-width: 104px; }
}

/* --------------------------------------------------------------------------
   7. BOCZNY PASEK SKROTOW (Discord / Beta Panel / Strefa Admina)
   --------------------------------------------------------------------------
   Szerokie ekrany: pionowy pasek przy lewej krawedzi, same ikonki, napis
   rozwija sie po najechaniu lub fokusie klawiatury.
   Wezsze ekrany i telefony: poziomy pasek przyklejony do samego dolu.

   Progiem jest 1200px, bo dopiero tam po lewej stronie tresci (max-width
   1080px, wysrodkowana) zostaje wolny margines na pasek - inaczej nachodzilby
   na karty.
   -------------------------------------------------------------------------- */

.side-rail {
  position: fixed;
  left: calc(14px + env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rail-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #101016;
  color: var(--text-3);
  font-size: 17px;
  text-decoration: none;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease),
              background 0.18s var(--ease), transform 0.18s var(--ease);
}

.rail-btn:hover,
.rail-btn:focus-visible {
  color: #fff;
  border-color: var(--border-2);
  background: var(--surface-2);
  transform: translateX(2px);
}

/* Napis: domyslnie schowany, wysuwa sie w prawo od ikony. */
.rail-label {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}

.rail-btn:hover .rail-label,
.rail-btn:focus-visible .rail-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Kolory zgodne z dawna stopka. */
.rail-discord { color: #8b95f6; }
.rail-discord:hover { color: #fff; background: #5865f2; border-color: #5865f2; }

.rail-beta { color: #7dd3fc; }
.rail-beta:hover { color: #fff; background: #0ea5e9; border-color: #0ea5e9; }

.rail-admin { color: var(--accent); border-color: var(--accent-line); background: #1a0d10; }
.rail-admin:hover { color: #fff; background: var(--accent); border-color: var(--accent); }

/* Telefony i wezsze ekrany: pasek na samym dole, ikona + napis obok siebie. */
@media (max-width: 1199px) {
  .side-rail {
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    pointer-events: none; /* pasek nie lapie klikniec w tle */
  }

  .rail-btn {
    pointer-events: auto;
    width: auto;
    height: 42px;
    padding: 0 15px;
    gap: 8px;
    border-radius: 999px;
    font-size: 13.5px;
  }

  .rail-btn:hover,
  .rail-btn:focus-visible { transform: none; }

  .rail-label,
  .rail-btn:hover .rail-label,
  .rail-btn:focus-visible .rail-label {
    position: static;
    transform: none;
    opacity: 1;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12.5px;
    color: inherit;
    pointer-events: none;
  }
}

/* --------------------------------------------------------------------------
   8. BETA PANEL - ogloszenia (jedna naraz) i wersje instancji
   -------------------------------------------------------------------------- */

/* --- Przewijane bloki (Announcements + wydania beta) -------------------- */

.pager {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pager-stage { min-width: 0; }

/* Pasek: przyciski po lewej, dodatkowe informacje po prawej. */
.pager-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pager-nav { display: flex; gap: 8px; }

.pager-nav .btn:disabled { opacity: 0.4; }

/* --- Ogloszenia: jedna wiadomosc naraz ---------------------------------- */

.ann-slide {
  padding: 16px 17px;
  border: 1px solid var(--border);
  border-left: 3px solid #0ea5e9;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  animation: fadeUp 0.25s var(--ease) both;
}

.ann-slide-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.ann-slide-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

/* Data i autor aktywnego ogloszenia. */
.ann-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-3);
}

.ann-meta-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ann-meta-line i { color: var(--text-3); font-size: 12px; }

/* Akcja na pasku pagera (np. kosz admina) - nie rozpycha paska. */
.pager-action { margin: 0; }

.pager-action .btn { padding: 8px 11px; }

/* --- Instancje Beta: wydania z changelogiem ----------------------------- */

.beta-release {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid #0ea5e9;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  animation: fadeUp 0.25s var(--ease) both;
}

.beta-release-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.beta-release-head strong { font-size: 15px; color: #fff; }

.beta-release-date {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-3);
}

.beta-release-changes {
  margin: 9px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.beta-release-changes li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}

/* --- Tworzenie nowej instancji beta: wersja + przycisk ------------------ */

.beta-create {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.beta-create-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.beta-create-version {
  flex: 1 1 240px;
  min-width: 0;
  margin-bottom: 0;
}

.beta-create-btn { flex: 0 0 auto; }

@media (max-width: 720px) {
  .pager-bar { flex-direction: column; align-items: stretch; gap: 11px; }
  .pager-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pager-nav .btn { width: 100%; }
  .ann-meta { justify-content: flex-start; }
  .beta-create-row { flex-direction: column; align-items: stretch; }
  .beta-create-btn { width: 100%; }
}