/* Strona #/tabela: filtry, licznik, tabela 380 powiatów z sortowaniem. Tylko zmienne z style.css (tryb ciemny). */

.tbl-page { min-width: 0; }
.tbl-controls {
  display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end;
  margin: 22px 0 0; padding: 14px 16px; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 12px;
}
.tbl-search { flex: 1 1 220px; max-width: 320px; }
.tbl-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tbl-field span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tbl-field select {
  font: inherit; font-size: 14px; color: var(--fg); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; max-width: 100%;
}
.tbl-field select:focus, .tbl-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: none; }

.tbl-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 8px; flex-wrap: wrap; }
.tbl-count { margin: 0; font-size: 14px; color: var(--muted); font-family: var(--mono); }
.tbl-csv { font-weight: 600; }
.tbl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tbl-actions .chip { cursor: pointer; text-decoration: none; }
.tbl-compare:not([aria-disabled]) { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.tbl-compare[aria-disabled] { color: var(--muted); cursor: default; }
.tbl-compare[aria-disabled]:hover { background: none; }
.tbl-pick-hint { margin: 0 0 8px; font-size: 13px; color: var(--muted); min-height: 1em; }
.tbl-pick-hint:empty { display: none; }

/* kontener przewija się w obie strony; nagłówek kolumn i pierwsza kolumna zostają na miejscu */
.tbl-frame { position: relative; }
.tbl-wrap {
  position: relative; max-width: 100%; max-height: 75vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.tbl-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* cień przy prawej krawędzi: tabela ma dalsze kolumny (klasę more-right ustawia tabela.js) */
.tbl-frame::after {
  content: ""; position: absolute; top: 1px; bottom: 1px; right: 1px; width: 22px; pointer-events: none; z-index: 4;
  border-radius: 0 11px 11px 0; background: linear-gradient(to left, color-mix(in srgb, var(--fg) 22%, transparent), transparent);
  opacity: 0; transition: opacity .15s;
}
.tbl-frame.more-right::after { opacity: 1; }

.tbl { width: 100%; min-width: 980px; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tbl caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tbl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tbl th, .tbl td { padding: 7px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: baseline; }
.tbl td.num, .tbl th.num { text-align: right; font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.tbl tbody tr:hover > * { background: var(--bg-alt); }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl td { color: var(--fg); }
.tbl td.c-woj, .tbl td.c-typ { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* nagłówek: przyciski sortowania */
.tbl thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bg-alt); padding: 0;
  font-family: var(--font); font-size: 12.5px; vertical-align: bottom; border-bottom: 1px solid var(--border);
}
.tbl thead button {
  display: flex; align-items: flex-end; gap: 6px; width: 100%; padding: 9px 12px; cursor: pointer;
  background: none; border: 0; text-align: left; font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.3;
}
.tbl thead th.num button { justify-content: flex-end; text-align: right; }
.tbl thead button:hover { color: var(--fg); }
.tbl thead button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tbl thead th.on button { color: var(--fg); }
.tbl-lab small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.tbl-arrow { font-size: 12px; opacity: .45; }
/* link do słownika i dopisek pod przyciskiem sortowania */
.tbl-th-extra { display: block; padding: 0 12px 8px; font-family: var(--font); font-size: 11.5px; font-weight: 400; color: var(--muted); line-height: 1.35; white-space: normal; }
.tbl thead th.num .tbl-th-extra { text-align: right; }
.tbl-th-extra a.gl { color: var(--muted); }
.tbl-th-extra a.gl:hover { color: var(--accent); }
.tbl thead th.on .tbl-arrow { opacity: 1; color: var(--accent); }

/* pierwsza kolumna przyklejona przy przewijaniu w bok */
.tbl tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); box-shadow: 1px 0 0 var(--border); }
.tbl thead tr > :first-child { z-index: 3; background: var(--bg-alt); }
.tbl tbody th { font-weight: 600; white-space: nowrap; }
.tbl tbody th a { text-decoration: none; }
.tbl tbody th a:hover { text-decoration: underline; color: var(--accent); }
.tbl-rank { color: var(--muted); font-size: 11.5px; display: inline-block; min-width: 4.2em; text-align: right; }
.tbl-small { color: var(--muted); text-decoration: none; cursor: help; margin-right: 3px; font-family: var(--mono); }
.tbl-note .tbl-small { cursor: default; }
/* zaznaczanie do porównania: etykieta wokół pola daje obszar trafienia 26 × 26 px (WCAG 2.5.8) */
.tbl-name { display: inline-flex; align-items: flex-start; gap: 4px; }
.tbl-pick-hit { display: inline-flex; flex: none; padding: 5px; margin: -4px 0 -5px -5px; border-radius: 6px; cursor: pointer; }
.tbl-pick-hit:hover { background: var(--bg-hover); }
.tbl-pick { margin: 0; flex: none; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.tbl-pick:disabled { cursor: not-allowed; opacity: .4; }
.tbl-pick-hit:has(.tbl-pick:disabled) { cursor: not-allowed; }
.tbl-name-txt { min-width: 0; }
/* województwo i typ pod nazwą: tylko na telefonie, gdzie ich kolumny są ukryte */
.tbl-meta { display: none; font-size: 11.5px; font-weight: 400; color: var(--muted); line-height: 1.3; margin-top: 1px; white-space: normal; }
.tbl-reset { align-self: flex-end; margin-bottom: 4px; }
.tbl-msg { margin: 16px 0 0; padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 0 8px 8px 0; background: var(--bg-alt); font-size: 14px; }
.tbl-msg p { margin: 2px 0; }
.tbl tbody tr.picked > * { background: var(--accent-tint); }
.tbl-empty { text-align: center !important; color: var(--muted); padding: 28px 12px !important; }

.tbl-note { font-size: 13px; color: var(--muted); max-width: 820px; margin: 12px 0 0; line-height: 1.5; }

@media (max-width: 760px) {
  .tbl-controls { padding: 12px; gap: 10px; }
  .tbl-search { flex-basis: 100%; max-width: none; }
  .tbl-field { flex: 1 1 calc(50% - 5px); }
  .tbl-field select { width: 100%; }
  .tbl { font-size: 13.5px; }
  .tbl th, .tbl td { padding: 6px 9px; }
  .tbl tbody th { max-width: 160px; white-space: normal; }
  .tbl-bar { align-items: flex-start; }
  .tbl-th-extra { padding: 0 9px 6px; }
}

/* telefon: bez kolumn Województwo i Typ (są pod nazwą), węższa tabela, kolumna sortowania zaraz za nazwą (tabela.js) */
@media (max-width: 600px) {
  .tbl .c-woj, .tbl .c-typ { display: none; }
  .tbl-meta { display: block; }
  .tbl { min-width: 0; }
  .tbl tbody th { min-width: 132px; max-width: 150px; }
  .tbl thead th { min-width: 0; }
  .tbl thead button { padding: 8px 9px; }
}