/* Styling for the member-gated pages only (Spis Ludności, Zarządzanie ludźmi, Publiczne
   wizytówki's manage-people list, Lista Wyjazdowa, Mój profil's weapon icons) - split out of
   style.css in KRKG-0055 because none of it is needed by the small set of public pages the
   PWA precaches (see scripts/pwa-policy.ts), and style.css alone was pushing that cache's
   100KB-per-asset limit. Loaded after style.css on every page that needs it - relies on
   style.css's :root tokens (--surface, --border, --gold, etc.) already being in scope. */

:root {
  /* KRKG-0051: one color per Sekcja, the single place it's declared - every page reads it via
     the [data-section="..."] rules below, never a hardcoded hex elsewhere.
     --section-color-default covers any sectionId with no rule below (unassigned, or
     unresolved like "nieznana"). */
  --section-color-bydgoszcz: #0056e0;
  --section-color-czukcze:   #a855f7;
  --section-color-krakow:    #8a8578;
  --section-color-poznan:    #ef4444;
  --section-color-warszawa:  #eab308;
  --section-color-wroclaw:   #16a34a;
  --section-color-default:   #8a8578;
}

[data-section="bydgoszcz"] { --section-c: var(--section-color-bydgoszcz); }
[data-section="czukcze"]   { --section-c: var(--section-color-czukcze); }
[data-section="krakow"]    { --section-c: var(--section-color-krakow); }
[data-section="poznan"]    { --section-c: var(--section-color-poznan); }
[data-section="warszawa"]  { --section-c: var(--section-color-warszawa); }
[data-section="wroclaw"]   { --section-c: var(--section-color-wroclaw); }

/* KRKG-0057: Typ członka (categoryId) shown by wrapping the name itself in a colored pill,
   instead of its own table column or a second pill next to the name - same [data-x] -> --x-c
   custom-property pattern as Sekcja above, keyed by lookupLists/categories' id. Kept independent
   of whether a Typ <select>/column also exists (Zarządzanie ludźmi keeps both) - the name
   element's own data-category is the single source of truth, synced to the dropdown's value on
   change where one exists.

   KRKG-0101: a category sets three independent custom properties in its [data-category="..."]
   block, so a color no longer has to go through the same dimming mix for every category:
     --category-c   accent - Typ cell tint, <select> border, focus ring
     --category-bg  pill fill (optional; defaults to a dim mix of the accent)
     --category-fg  pill text (optional; defaults to a light mix of the accent)
   Only --category-c is required; --category-bg/--category-fg are opt-in per category (thing/bobo/
   emeryt below are the examples). Set all three to a flat color to bypass the mixes entirely. */
:root {
  --category-color-brokul:    #639f09;
  --category-color-niewiasta: #d93fa8;
  --category-color-thing:     #ffcc00;
  --category-color-blacha:    #427bff;
  --category-color-kandydat:  #639f09;
  --category-color-bobo:      #f06bb0;
  --category-color-emeryt:    #94a3b8;
  --category-color-default:   var(--text-faint);
}

[data-category="brokul"]    { --category-c: var(--category-color-brokul); }
[data-category="niewiasta"] { --category-c: var(--category-color-niewiasta); }
[data-category="blacha"]    { --category-c: var(--category-color-blacha); }
[data-category="kandydat"]  { --category-c: var(--category-color-kandydat); }

/* These three set all three properties explicitly, so their pill colors are not derived from the
   accent through the dimming mix. Thing is gold, Bobo is the inverse of Niewiasta (light pink fill
   + dark pink text), Emeryt is a neutral grey. */
[data-category="thing"] {
  --category-c: #ffcc00;
  --category-bg: #ffbb00;
  --category-fg: #000000;
}
[data-category="bobo"] {
  --category-c: #f06bb0;
  --category-bg: #fb98cb;
  --category-fg: #3a0e24;
}
[data-category="emeryt"] {
  --category-c: #94a3b8;
  --category-bg: #999999;
  --category-fg: #212121;
}

/* KRKG-0061: filled background (like .section-pill below), not just an outline - a plain outline
   read too close to a form-field border and didn't carry enough weight as its own signal. */
.category-name-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.65rem;
  border-radius: 0;
  border: none;
  background: var(--category-bg, color-mix(in srgb, var(--category-c, var(--category-color-default)) 27%, var(--surface-deep)));
  color: var(--category-fg, color-mix(in srgb, var(--category-c, var(--category-color-default)) 70%, white));
}

/* KRKG-0103: wraps a name pill plus its small "Nazwisko, Imię" subline (person-pill.js's
   personPillHtml, only when a `subline` is given - every other pill's markup is unchanged). */
.person-pill-cell {
  display: inline-grid;
  grid-template-columns: auto auto;
  justify-items: start;
  align-items: start;
  gap: 0;
}

.person-pill-cell > .category-name-pill {
  grid-column: 1;
}

.person-pill-cell > .person-pill-subline {
  grid-column: 1 / -1;
}

.person-pill-subline {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.72em;
  line-height: 1.1;
  color: var(--text-muted);
}

/* Overrides .czl-field's own border/radius/background on the editable fullName <input>
   (Zarządzanie ludźmi, Spis Ludności's editable view) - needs the fuller selector to
   out-specificity that rule rather than relying on source order. */
.czl-table td input.czl-field.category-name-pill {
  border: none;
  border-radius: 0;
  background: var(--category-bg, color-mix(in srgb, var(--category-c, var(--category-color-default)) 20%, var(--surface-deep)));
  color: var(--category-fg, color-mix(in srgb, var(--category-c, var(--category-color-default)) 70%, white));
}

.czl-table td input.czl-field.category-name-pill:focus {
  border: 1px solid var(--category-c, var(--category-color-default));
}

/* Typ cell colorization (KRKG-0052) - Zarządzanie ludźmi tints the whole Typ <td> from
   --category-c instead of wrapping the name in a pill above (that's still how Spis Ludności/
   Lista Wyjazdowa show Typ - they have no dedicated Typ column to color instead). Only matches
   when data-category is actually present: categoryCellAttrs() (zarzadzanie-ludzmi.js) omits the
   attribute entirely for an unset Typ, so an empty Typ stays the table's plain background rather
   than falling back to --category-color-default. */
.czl-table td[data-category] {
  background: color-mix(in srgb, var(--category-c, var(--category-color-default)) 25%, var(--surface-deep));
}

/* The <select> inside would otherwise paint its own opaque .czl-field background right over the
   cell tint above, leaving only a sliver of color around its edges - drop it to transparent here
   so the whole cell reads as colored, with just enough border tint to keep the control's
   clickable bounds visible against it. */
.czl-table td[data-category] select.czl-field {
  background: transparent;
  border-color: color-mix(in srgb, var(--category-c, var(--category-color-default)) 45%, var(--border));
}

/* Rendered inline wherever a page needs one (e.g. wyjazd.js/skladki.js's summary chips) - every
   call site only ever emits data-section, never a color value, so the colors above stay the single
   source of truth. --section-c is set by the [data-section] rules above, inherited from an
   ancestor when the pill itself has no data-section of its own. */
.section-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: none;
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
  background: var(--section-c, var(--section-color-default));
  color: #ffffff;
}

/* Warszawa's yellow (#eab308) is too bright for white text - use near-black instead. */
[data-section="warszawa"] .section-pill,
.section-pill[data-section="warszawa"] {
  color: #1a160d;
}

/* Dense data table (KRKG-0045/KRKG-0051) shared by every member/person table (Spis Ludności,
   Zarządzanie ludźmi, Lista Wyjazdowa). Sortable-header styling stays in czlonkowie.css - only
   Spis Ludności's headers are clickable buttons. */
.czl-filter-wrap {
  max-width: 320px;
  margin-bottom: 0.75rem;
}

.czl-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.czl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.czl-table th,
.czl-table td {
  text-align: left;
  padding: 0.35rem 0.7rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.czl-table thead th {
  background: var(--surface);
  padding: 0.4rem 0.7rem;
  color: var(--text-muted);
  font-weight: 700;
}

/* Sortable column headers (click-to-sort via shared/sortable-table.js) - moved here from
   czlonkowie.css (KRKG-0045's original home for this) once every dense .czl-table on the site
   started using the same click-to-sort wiring, not just Spis Ludności. A <button> fills the cell
   instead of plain text, so the whole header is clickable/keyboard-focusable and shows an arrow for
   the active sort direction. Scoped to th[data-sort-key] rather than every thead th, since a table
   can mix sortable and plain-text headers (Zarządzanie ludźmi's Akcje column, Składki's Historia
   column) - those keep the plain thead th padding above untouched. */
.czl-table thead th[data-sort-key] {
  padding: 0;
}

.czl-table thead th[data-sort-key] button {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.4rem 0.7rem;
  color: var(--text-muted);
  font-weight: 700;
  /* A touch smaller than the table's own body text - a sortable label plus its arrow indicator
     was consistently the widest thing in narrow columns (Wpisowe, Składka, ...), pushing them
     wider than the single icon they actually hold. */
  font-size: 0.85em;
}

.czl-table thead th[data-sort-key] button:hover,
.czl-table thead th[data-sort-key] button:focus-visible {
  color: var(--gold);
}

.czl-table thead th[data-sort-key] button::after {
  content: '';
  width: 0.6em;
}

.czl-table thead th[data-sort-key][aria-sort="ascending"] button::after {
  content: '▲';
  font-size: 0.7em;
}

.czl-table thead th[data-sort-key][aria-sort="descending"] button::after {
  content: '▼';
  font-size: 0.7em;
}

/* Sekcja's sortable header lives inside the narrow, sticky .czl-section-cell - the button's normal
   0.7rem side padding plus its gap/arrow would blow well past that column's fixed width, so it
   gets its own tighter, centered layout instead of the generic sortable-button one above. */
.czl-table th.czl-section-cell[data-sort-key] button {
  padding: 0.2rem 0.1rem;
  justify-content: center;
  gap: 0.15rem;
}

.czl-table th.czl-section-cell[data-sort-key] button::after {
  font-size: 0.6em;
}

/* Składki's Wpisowe/Składka/Historia/Dołączył/✓ columns each hold one short icon or word, but the
   browser's default `auto` table layout algorithm was handing each of them a wide, mostly-empty
   share of the row's 100% width anyway (the classic empty-icon-column problem) - visible as large
   gaps either side of the coin/check icons and the whole table needing to scroll sideways to fit.
   width:1% is the standard trick to force a column to shrink to its own content's width instead;
   whatever space that frees up funnels into Nazwa (data-sort-key="name"), the one column that
   actually wants it - full names, at whatever length. Scoped to this one table (not every
   .czl-table) since Zarządzanie ludźmi's short-looking columns are real editable text
   inputs/selects that still need their own room, not simply another icon. */
#skladki-table th:not(.czl-section-cell):not([data-sort-key="name"]),
#skladki-emeryci-table th:not(.czl-section-cell):not([data-sort-key="name"]) {
  width: 1%;
}

/* KRKG-0074 fix: the two Składki tables' icon-only columns (Wpisowe/Składka/Historia) keep their
   word labels on desktop but collapse to just the icon on phones - a word-width header over a
   single-icon cell was exactly what kept the tables too wide to fit one phone view. The <th>'s
   title tooltip explains the icon either way. */
.lw-narrow-col .lw-col-icon {
  display: none;
}

/* The narrow columns don't need the sortable header's full 0.7rem side padding - tighter sides
   (and tighter cell padding below on phones) keep the table inside one view. */
#skladki-table th.lw-narrow-col button,
#skladki-emeryci-table th.lw-narrow-col button {
  padding: 0.4rem 0.35rem;
}

@media (max-width: 768px) {
  .lw-narrow-col .lw-col-icon {
    display: inline-block;
  }

  .lw-narrow-col .lw-col-label {
    display: none;
  }

  /* The sticky Sekcja cell keeps its own padding (it frames the colored abbreviation), but every
     other cell in these two tables tightens horizontally - the space between the Wpisowe/Składka/
     Historia columns was mostly this padding either side of a single small icon. */
  #skladki-table th:not(.czl-section-cell),
  #skladki-table td:not(.czl-section-cell),
  #skladki-emeryci-table th:not(.czl-section-cell),
  #skladki-emeryci-table td:not(.czl-section-cell) {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

.czl-table tbody tr:hover {
  background: var(--surface);
}

/* Missing both Sekcja and Typ (KRKG-0062, Zarządzanie ludźmi only) - flags a member whose
   profile is meaningfully incomplete. Whole row, not just the two empty-looking cells, so it's
   obvious scanning down a long list. The :hover variant needs its own rule (an extra pseudo-class
   beats plain tbody tr:hover's specificity outright) so the flag doesn't vanish on hover. */
.czl-table tbody tr.membership-member--flagged {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
}

.czl-table tbody tr.membership-member--flagged:hover {
  background: color-mix(in srgb, var(--accent) 30%, var(--surface));
}

/* Tapped-row highlight (KRKG-0052) - touch has no hover, so a click/tap toggles this class
   instead (see e.g. czlonkowie.js). Placed after tbody tr:hover/.membership-member--flagged to
   win every same-specificity tie - an active tap always shows gold, flagged or not. */
.czl-table tbody tr.czl-row-active {
  background: color-mix(in srgb, var(--gold) 20%, var(--surface));
}

.czl-table tbody td {
  color: var(--text);
}

/* The status-change timestamp is deliberately quieter and smaller than the action/status cells,
   while retaining tabular numerals so equal-width digits make a dense roster easy to scan. */
.czl-table tbody td.lw-status-changed-cell {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.czl-table tbody td.czl-empty,
.czl-table tbody .czl-empty {
  color: var(--text-faint);
  font-style: italic;
}

.czl-count {
  margin-top: 0.75rem;
  color: var(--text-faint);
  font-size: 0.9rem;
}

/* Accountant/admin-only inline-editable fields (KRKG-0047/KRKG-0049) - fullName/nickname/sectionId
   render as these instead of plain text when editable, saving on change. */
.czl-table td input.czl-field,
.czl-table td select.czl-field {
  background: var(--surface-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 0.3rem 0.5rem;
  font-size: inherit;
  font-family: inherit;
  width: 100%;
  min-width: 100px;
}

.czl-table td input.czl-field:focus,
.czl-table td select.czl-field:focus {
  border-color: var(--accent);
  outline: none;
}

/* KRKG-0103: Nazwisko/Imię as two inputs in Zarządzanie ludźmi's member table - side by side in
   the cell's nowrap flow silently broke the layout (each input's own width:100% above fights the
   other for space, so Imię ended up invisible off the edge of the cell). Stacked vertically
   instead, with slightly tighter padding/font on just these two so the row doesn't grow as much
   as two full-size inputs would. */
.czl-name-cell {
  white-space: normal;
}

.czl-name-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 100px;
}

.czl-name-stack input.czl-field {
  padding: 0.15rem 0.4rem;
  font-size: 0.85em;
}

/* KRKG-0103: the profile action belongs to the editable Ksywa field, so Sekcja remains the
   table's absolute first column without spending a separate column on a single icon. */
.czl-nickname-cell {
  white-space: normal;
}

.czl-nickname-with-profile {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.czl-nickname-with-profile input.czl-field {
  flex: 1 1 auto;
  min-width: 100px;
}

.czl-nickname-with-profile .profile-trigger--icon {
  flex: 0 0 auto;
}

/* Zarządzanie ludźmi's Rola column (KRKG-0049/KRKG-0051) - a checkbox per assignable role, since a
   member can hold more than one at once. white-space:normal overrides .czl-table td's nowrap so
   the labels stack instead of forcing the column wide. */
.member-roles-cell {
  white-space: normal;
}

/* Broń column (KRKG bugfix) - same checkbox-per-item shape and wrapping as .member-roles-cell
   above, but admin/hovding-editable (always visible, no isAdminCaller gate). */
.member-weapons-cell {
  white-space: normal;
}

/* KRKG-0108: a stored role on a non-active member confers nothing - see inactiveRolesHintHtml. */
.member-roles-inactive-hint {
  margin: 0.25rem 0 0;
  font-size: 0.75em;
  opacity: 0.75;
  white-space: normal;
}

.member-role-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  font-size: 0.85em;
}

.member-role-label:not(:last-child) {
  margin-bottom: 0.15rem;
}

.czl-table .member-action {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--gold);
  padding: 0.2rem 0.5rem;
  font-size: 0.85em;
  cursor: pointer;
}

.czl-table .member-action:hover {
  border-color: var(--gold);
}

.czl-table .member-action:not(:last-child) {
  margin-right: 0.3rem;
}

.czl-table .drive-folder-saved {
  margin-left: 0.3rem;
}

/* Weapon icon (KRKG-0054, hand-drawn PNGs added later - see wyjazd.js's WEAPON_ICON_KEYS). */
.lw-weapon-icon {
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

/* KRKG-0074: the event roster's Broń column renders its icon at the same size as the składka
   badge (1.7rem, .lw-skladka-icon below) - at the old 20px it read as a minor detail next to the
   badge and got lost. Scoped to .czl-table so the summary chips / Mój profil checkboxes / profile
   drawer keep their smaller inline size. */
.czl-table .lw-weapon-icon {
  width: 1.7rem;
  height: 1.7rem;
}

/* KRKG-0100: the roster's Broń column stacks the icon over a tiny one/two/three-letter code
   (wyjazd.js's WEAPON_LETTERS) - just enough to tell T from TW/TWD without a hover, and still far
   narrower than the full weaponGroupLabel. Scoped by its own class so the summary chips / profile
   drawer, which show the full label, are unaffected. */
.lw-weapon-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1;
}

.lw-weapon-code {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* KRKG-0074: tiny club-dues badges in the event roster's name cell (wyjazd.js's renderRoster) -
   what's still unpaid *outside* this event. The cell splits into two rows: the name pill + person
   icon on top, and this badge row (block-level flex, so it sits on its own line) only while
   something is owed - a fully settled member keeps just the name row. Both badges are red and
   deliberately ~9px so they don't push the Nazwa column wider; each shows the money bag plus its
   short label ("wpisowe"/"roczna"), with the full label in the title tooltip. */
.lw-dues-badges {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

.lw-dues-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 3px;
  white-space: nowrap;
}

.lw-dues-badge--roczna,
.lw-dues-badge--wpisowe {
  background: color-mix(in srgb, #c62828 25%, var(--surface-deep));
  border: 1px solid #c62828;
  color: #ef5350;
}

/* Icon + visible label together (KRKG bugfix: an icon-only mark needed a hover just to read what
   weapon it was) - shared by the roster's Broń column and the "Wg broni" summary chips so both
   render identically for the same weaponGroupLabel/weaponGroupIconFile pairing. */
.lw-weapon-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.lw-weapon-group-label {
  font-size: 0.85em;
}

/* Zarządzanie ludźmi's table is the densest one on the site (10 columns as of KRKG-0052) -
   .main-content's default 1fr 350px grid (style.css) caps out at 1400px total, too narrow for
   this table. This page's .content-right IS populated though (admin_sidebar.html's Strefa
   Członków box, shown to any signed-in admin/hovding) - collapsing to a single column would
   just push that sidebar below the table instead of beside it, so keep the two-column shape and
   raise the overall cap instead, giving the table roughly the same extra room a single-column
   layout would have. */
.main-content--wide {
  grid-template-columns: 1fr 300px;
  max-width: 2000px;
}

/* This file loads after style.css (see the header comment above), so its own unconditional
   grid-template-columns above outranks style.css's responsive .main-content rules in the
   cascade (same specificity, later file wins) - without this override the fixed 300px sidebar
   column survived all the way down to phone widths, squeezing .content-left to a sliver and
   forcing every word in it onto its own line. Mirrors style.css's own .main-content breakpoint
   so this page collapses to a single column exactly like every other one. */
@media (max-width: 1024px) {
  .main-content--wide {
    grid-template-columns: 1fr;
  }
}

/* Lista wyjazdowa's own two pages (events list, trip detail) put the shared trip-picker topbar
   (.lw-topbar above) right at the top of their content, so style.css's generic 3rem/2rem
   .main-content top padding - sized for pages that open with a page title - just reads as dead
   air above the buttons. Dropped to 0: .lw-topbar's own 0.85rem vertical padding is already
   enough breathing room under the site header. Only touches the top; left/right/bottom stay the
   site default. Same later-file-wins reasoning as .main-content--wide above, so this one override
   covers every breakpoint without needing to repeat it inside each of style.css's own media
   queries. */
.main-content--flush-top {
  padding-top: 0;
}

/* KRKG-0052: scoped to this one table - it's the densest on the site, so a slightly smaller
   font buys back some of the width a plain column count otherwise demands. Other member tables
   stay at .czl-table's own 0.9rem; this only tightens Zarządzanie ludźmi's. */
#membership-table {
  font-size: 0.82rem;
}

/* KRKG-0063: Spis Ludności went read-only the same batch this shipped in - a slightly smaller
   font matches the tighter, denser feel that suits a plain lookup table better than the previous
   editable one. */
#czl-table {
  font-size: 0.82rem;
}

/* ── Panel Admina: manage-people list (public/admin/admin.js) ── */
/* Two columns, filled row-by-row (grid's default auto-flow) so the existing top-to-bottom
   order from the API response reads left-to-right, top-to-bottom - same order as the old
   single-column list, just wrapped into two side-by-side columns instead of one long one.
   Stacks back to a single column on narrow screens (below the shared 768px breakpoint). */
#manage-people-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 768px) {
  #manage-people-list {
    grid-template-columns: 1fr;
  }
}

/* Bumped from the old rows="3" - the description is often the longest field in the card and
   was clipping to a tiny box that needed constant internal scrolling to review or edit. */
.edit-description {
  min-height: 8rem;
  resize: vertical;
}

/* ── Lista Wyjazdowa (events list, event detail, składki) ── */
/* The persistent sub-nav shown at the top of every view inside this "app within the site" - a
   single segmented-control track (like a tab bar) rather than three separate floating pills, so
   it reads as one cohesive control instead of loose buttons scattered with gaps between them. */
.lw-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1.75rem;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: fit-content;
  max-width: 100%;
}

/* Qualified with the .content-section ancestor (rather than bare .lw-subnav-link) to
   out-specificity .content-section a, which otherwise wins the cascade (class+type beats a
   single class) and paints these red with its own border-bottom "underline" - same class of bug
   as the .btn-add-album fix above. Applies to every .lw-* link rule below for the same reason. */
.content-section .lw-subnav-link {
  padding: 0.5rem 1.1rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
  /* Without this, tapping a link on mobile Chrome/Brave leaves the default translucent
     tap-highlight rectangle sitting under the label until it fades - reads as a stray partial
     underline on a dark background. The link's own hover/active background already gives the
     tap enough visual feedback. */
  -webkit-tap-highlight-color: transparent;
}

.content-section .lw-subnav-link:hover {
  color: var(--text);
}

.content-section .lw-subnav-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Breathing room between the "pokaż wszystkie" toggle and the sub-nav above/event list below -
   previously all three sat flush against each other with no vertical rhythm. No `display` here:
   an unconditional display would out-cascade the UA default `[hidden] { display: none }` and
   defeat lista-wyjazdowa.js's JS toggling of this same button - see setListVisible(). */
#toggle-past-events {
  margin: 0 0 1rem;
}

.content-section .lw-subnav-link--active {
  background: var(--surface-deep);
  border-color: var(--accent);
  color: var(--gold);
}

/* Sticky bar (shared/lw-nav.js + shared/lw-topbar.js) replacing the lw-subnav pill row above:
   the trip-picker dropdown plus the standalone "Dodaj wyjazd" button, pinned directly under the
   site's own sticky header (--lw-header-h, kept in sync by lw-topbar.js) instead of scrolling
   away as a plain inline control. Styled as a flat, edge-to-edge menu bar (square corners, full
   width, segments divided by hairlines) rather than two separate pill buttons floating in open
   space - the pill treatment read as two random controls dropped on the page instead of a
   dedicated navigation row attached to the content below it. */
.lw-topbar {
  position: sticky;
  top: var(--lw-header-h, 0px);
  z-index: 15;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  margin: 0 0 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Trip detail page's own topbar (public/lista-wyjazdowa/wyjazd/index.html): the events list page
   keeps the sticky behavior above (it's a long scrolling list, so quick access back to the
   dropdown is worth keeping onscreen), but the detail page's own content (roster, summary) is
   what matters while scrolling, not the trip picker sitting above it - it should scroll away
   naturally instead of pinning itself under the site header. */
.lw-topbar--static {
  position: static;
}

.lw-nav {
  position: relative;
  max-width: 100%;
  flex: 1 1 50%;
  border-right: 1px solid var(--border);
}

.lw-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  padding: 0.85rem 1.25rem;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s;
}

.lw-nav-toggle:hover,
.lw-nav-toggle[aria-expanded="true"] {
  background: var(--surface-deep);
}

.lw-nav-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.lw-nav-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.lw-nav-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Attaches flush to the bottom of the toggle's own segment (top: 100%, same width, square
   corners) so it reads as this one segment unfolding rather than an unrelated rounded card
   floating below the flat menu bar. */
.lw-nav-menu {
  position: absolute;
  top: 100%;
  left: -1px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  /* At least as wide as the toggle segment itself (seamless continuation), but never narrower
     than trip name + date need to stay on one line - the segment alone (roughly half the
     topbar) is too narrow for that once there's a real event list. */
  min-width: max(100%, 260px);
  max-width: min(90vw, 380px);
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.content-section .lw-nav-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  /* Resets .content-section a's default red border-bottom "link underline" look (out-specificity
     needed since these are <a> tags) - without this every item showed a stray line under its
     text, not just the intentional --active/--all treatments below. Square corners, no radius -
     matches the flat menu-bar look of .lw-topbar/.lw-nav-menu above instead of the pill style
     the rest of the site's buttons use. */
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}

.content-section .lw-nav-item:hover,
.content-section .lw-nav-item:focus-visible {
  background: var(--surface-deep);
  color: var(--text);
}

/* Sets "Wszystkie" apart from the trip list below it with a divider, not an underline (an
   underlined single word among plain-text trip rows read as a stray/broken link). Permanent,
   independent of whether it is the active view. */
.content-section .lw-nav-item--all {
  margin-bottom: 0.3rem;
  padding-bottom: 0.55rem;
  border-bottom-color: var(--border);
  color: var(--text);
}

.content-section .lw-nav-item--active {
  background: var(--surface-deep);
  color: var(--gold);
}

/* Date first, then the name: a long trip name is truncated with an ellipsis instead of pushing the
   date out of the menu. */
.lw-nav-item-date {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
  flex-shrink: 0;
}

.lw-nav-item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-section .lw-nav-item--active .lw-nav-item-date {
  color: inherit;
}

/* Standalone "Dodaj wyjazd" button next to the dropdown in .lw-topbar - not one of the dropdown's
   items, since it's an action rather than a place to navigate to. Same flat, edge-to-edge segment
   treatment as .lw-nav-toggle so the two read as one continuous menu bar rather than two
   separately-styled controls; matches its 50% flex-basis (below) so the two segments split the
   row evenly instead of sizing to their own text. */
.content-section .lw-nav-add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 50%;
  padding: 0.85rem 1.25rem;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--gold);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.15s;
}

.content-section .lw-nav-add:hover,
.content-section .lw-nav-add:focus-visible {
  background: var(--surface-deep);
}

/* Shared card look for event rows - the roster and Składki (KRKG-0052/this change) both moved to a
   dense .czl-table instead, so this is now the only row-like list left using it. */
.lw-event-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s;
}

.lw-event-row:hover {
  border-color: var(--border-hover);
}

.content-section .lw-event-name {
  flex: 1 1 auto;
  min-width: 12rem;
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border-bottom: none;
}

.content-section .lw-event-name:hover {
  color: var(--gold);
  text-decoration: underline;
}

.lw-event-date {
  color: var(--text-muted);
  font-size: 14px;
  white-space: nowrap;
}

/* Shared headcount pill: Lista Wyjazdowa rows and both dashboard trip cards. */
.attendee-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.attendee-badge-icon { height: 1.6em; width: auto; display: block; }

/* Date + headcount badge share one line, also in the stacked mobile card. */
.lw-event-meta { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: nowrap; }

/* KRKG-0101: the "Jadę/Nie jadę" toggle and the "+ osoba towarzysząca" control share one inline
   strip. On desktop this is invisible (the row is already a single line), but on mobile the row
   turns into a column - this wrapper is what keeps the two controls on the same line there. */
.lw-event-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 1rem;
}

/* "Jadę / Nie jadę" as an actual toggle switch (track + sliding knob) rather than a plain button
   whose only state cue was its text - the on/off state now reads at a glance the way a settings
   switch does everywhere else. Built from a <button aria-pressed> (see lista-wyjazdowa.js), so
   the state that matters for styling and assistive tech alike is the aria-pressed attribute. */
.lw-attend-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.lw-attend-toggle-track {
  position: relative;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 1.4rem;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background-color 0.15s, border-color 0.15s;
}

.lw-attend-toggle-track::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.15s ease, background-color 0.15s;
}

.lw-attend-toggle[aria-pressed="true"] {
  color: var(--gold);
}

.lw-attend-toggle[aria-pressed="true"] .lw-attend-toggle-track {
  background: color-mix(in srgb, var(--gold) 25%, var(--surface-deep));
  border-color: var(--gold);
}

.lw-attend-toggle[aria-pressed="true"] .lw-attend-toggle-track::before {
  background: var(--gold);
  transform: translateX(1.1rem);
}

.lw-attend-toggle:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Confirmation popover shown next to the toggle when changing someone else's attendance. */
.lw-confirm-pop {
  position: absolute;
  z-index: 1000;
  max-width: 260px;
  padding: 0.75rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  font-size: 13px;
}

.lw-confirm-text {
  margin: 0 0 0.6rem;
}

.lw-confirm-actions {
  display: flex;
  gap: 0.5rem;
}

.lw-confirm-btn {
  flex: 1;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  border: 1px solid;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.lw-confirm-btn--yes {
  color: #4caf50;
  border-color: #4caf50;
  background: color-mix(in srgb, #4caf50 18%, var(--surface-deep));
}

.lw-confirm-btn--no {
  color: #e57373;
  border-color: #e57373;
  background: color-mix(in srgb, #e57373 18%, var(--surface-deep));
}

.lw-confirm-btn:hover,
.lw-confirm-btn:focus-visible {
  filter: brightness(1.25);
}

/* Roster table's Status cell (KRKG-0053): label stacks under the toggle track, not beside it.
   Scoped to .czl-table - lista-wyjazdowa.js reuses .lw-attend-toggle inline, side-by-side. */
.czl-table .lw-attend-toggle {
  flex-direction: column;
  gap: 0.2rem;
  font-size: 12px;
}

/* KRKG-0092: the read-only status shown for a deactivated person's event row - same size/weight as
   the toggle's own label so the Status column stays visually consistent. */
.lw-attend-static {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Kasa icon standing in for "Składka: opłacona/nieopłacona" text - a red/green badge behind the
   emoji says the same thing at a glance without taking up a line of its own (a CSS filter on the
   emoji itself would depend on the platform's emoji font actually being grayscale-tintable, which
   isn't guaranteed - a background badge works regardless). Plain <span> for members who can't
   manage składki (nothing to click); canManageSkladki gets an actual <button> instead (see
   wyjazd.js's renderSkladkaIcon), same disabled-state handling as the other toggles on this row. */
.lw-skladka-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}

button.lw-skladka-icon {
  cursor: pointer;
}

button.lw-skladka-icon:disabled {
  cursor: default;
  opacity: 0.6;
}

.lw-skladka-icon[data-paid="true"] {
  background: color-mix(in srgb, #2e7d32 40%, var(--surface-deep));
  border: 1px solid #2e7d32;
}

.lw-skladka-icon[data-paid="false"] {
  background: color-mix(in srgb, #c62828 40%, var(--surface-deep));
  border: 1px solid #c62828;
}

/* Składka roczna's third state (KRKG follow-up) - a member the club doesn't require this year's
   due from at all (an "Emeryt" by default, or anyone set this way by hand), so neither the green
   "paid" nor the red "unpaid" framing applies. Grey rather than either color says "not part of
   this tally" at a glance, same spirit as .czl-empty elsewhere on these tables. Uses data-status
   (skladki.js's rocznaIconHtml/profile-panel.js), not data-paid - wpisowe and every other paid/
   unpaid icon on the site stays a plain boolean and keeps using data-paid above. */
.lw-skladka-icon[data-status="paid"] {
  background: color-mix(in srgb, #2e7d32 40%, var(--surface-deep));
  border: 1px solid #2e7d32;
}

.lw-skladka-icon[data-status="unpaid"] {
  background: color-mix(in srgb, #c62828 40%, var(--surface-deep));
  border: 1px solid #c62828;
}

/* KRKG-0074: opacity on top of the grey - the badge now lives in its own "Emeryci" table off the
   main list, so it should read as background info, not something still owed; half-transparent
   keeps it legible without competing with the red/green badges that actually demand attention. */
.lw-skladka-icon[data-status="not_applicable"] {
  background: color-mix(in srgb, var(--text-faint) 40%, var(--surface-deep));
  border: 1px solid var(--text-faint);
  opacity: 0.45;
}

/* KRKG-0087: the "+" add-companion control in the roster's name cell and its inline panel. Flat
   and muted so it never competes with the person's name; the text label is dropped on narrow
   screens, leaving just the "+" and the person icon, while the button's aria-label keeps its
   accessible name. */
.lw-add-companion {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 0.3rem;
  padding: 0.1rem 0.35rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.68rem;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  opacity: 0.8;
}

.lw-add-companion:hover,
.lw-add-companion:focus-visible {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  opacity: 1;
}

.lw-add-companion-plus {
  font-weight: 700;
}

/* KRKG-0101: the person figure is drawn in a 24x24 viewBox whose artwork only spans x:8.2..15.8,
   so the SVG carries ~4.6px of empty padding on each side at 0.85rem. Pull the icon and the label
   back over that padding so the "+", the figure and "osoba towarzysząca" read as one tight mark
   instead of three loosely spaced ones. */
.lw-add-companion-icon {
  width: 0.85rem;
  height: 0.85rem;
  margin-left: -0.18rem;
}

.lw-add-companion-label {
  margin-left: -0.14rem;
}

@media (max-width: 760px) {
  .lw-add-companion-label {
    display: none;
  }

  /* KRKG-0101: the roster's tight name cell keeps the icon-only form, but the all-events list has
     room for the label - show it there so the "+" figure is not a mystery tap target. */
  .lw-event-row .lw-add-companion-label {
    display: inline;
  }

  .dashboard-widget .lw-add-companion-label {
    display: inline;
  }
}

/* The "osoba bez konta" marker inside every person pill (shared/person-pill.js) - meaningful, so
   deliberately not aria-hidden; the renderer supplies role="img" + aria-label. */
.person-pill-icon {
  width: 0.72rem;
  height: 0.72rem;
  margin-right: -0.08rem;
  vertical-align: -0.06em;
  opacity: 0.85;
}

/* The Brokuł emoji is text-sized rather than SVG-sized, so it deliberately does not share the
   dimensions of .person-pill-icon, which identifies an accountless companion. */
.brokul-pill-icon {
  font-size: 1em;
  margin-right: 0.28rem;
  vertical-align: -0.02em;
}

/* KRKG-113: camp equipment has its own colour per Kategoria, kept apart from the Sekcja colours
   above and the Typ colours (--category-color-*) so a blue tent never reads like a blue city. Only
   the equipment page's own tables (#equipment-tables) use these - .equipment-pill is also rendered by
   Wyjazd and Mój profil, which keep their uncoloured pill. Each row carries data-equipment-category
   (sprzet-obozowy.js equipmentRowHtml); the row's custom properties feed the pill inside it.
   Unknown/new categories fall back to --equipment-color-default. Between square (Typ) and fully
   rounded (Sekcja) on purpose: 0.35rem radius. */
:root {
  --equipment-color-namiot:       #f97316;
  --equipment-color-wiata:        #e7d7b0;
  --equipment-color-stol:         #22d3ee;
  --equipment-color-lawka:        #b8733a;
  --equipment-color-garnek:       #fdba74;
  --equipment-color-ruszt:        #5b4636;
  --equipment-color-trojnog:      #e2e8f0;
  --equipment-color-misa-ogniowa: #155e75;
  --equipment-color-default:      #6b5340;

  --equipment-fg-namiot:          #fff8ec;
  --equipment-fg-wiata:           #1a1410;
  --equipment-fg-stol:            #1a1410;
  --equipment-fg-lawka:           #fff8ec;
  --equipment-fg-garnek:          #1a1410;
  --equipment-fg-ruszt:           #fff8ec;
  --equipment-fg-trojnog:         #1a1410;
  --equipment-fg-misa-ogniowa:    #fff8ec;
  --equipment-fg-default:         #f5e6c8;
}

#equipment-tables [data-equipment-category="namiot"]       { --equipment-c: var(--equipment-color-namiot);       --equipment-fg: var(--equipment-fg-namiot); }
#equipment-tables [data-equipment-category="wiata"]        { --equipment-c: var(--equipment-color-wiata);        --equipment-fg: var(--equipment-fg-wiata); }
#equipment-tables [data-equipment-category="stol"]         { --equipment-c: var(--equipment-color-stol);         --equipment-fg: var(--equipment-fg-stol); }
#equipment-tables [data-equipment-category="lawka"]        { --equipment-c: var(--equipment-color-lawka);        --equipment-fg: var(--equipment-fg-lawka); }
#equipment-tables [data-equipment-category="garnek"]       { --equipment-c: var(--equipment-color-garnek);       --equipment-fg: var(--equipment-fg-garnek); }
#equipment-tables [data-equipment-category="ruszt"]        { --equipment-c: var(--equipment-color-ruszt);        --equipment-fg: var(--equipment-fg-ruszt); }
#equipment-tables [data-equipment-category="trojnog"]      { --equipment-c: var(--equipment-color-trojnog);      --equipment-fg: var(--equipment-fg-trojnog); }
#equipment-tables [data-equipment-category="misa-ogniowa"] { --equipment-c: var(--equipment-color-misa-ogniowa); --equipment-fg: var(--equipment-fg-misa-ogniowa); }

#equipment-tables .equipment-pill {
  border-radius: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--equipment-c, var(--equipment-color-default)) 70%, #000);
  background: var(--equipment-c, var(--equipment-color-default));
  color: var(--equipment-fg, var(--equipment-fg-default));
}

/* Equipment pill (person-pill.js's equipmentPillHtml): a small, muted flat image icon beside the
   Opis pill, so it reads as "tap to see the photos" without drawing the eye. */
.equipment-photo-icon {
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.35rem;
  vertical-align: -0.12em;
  color: var(--text-muted);
}

/* The inline add-companion panel, rendered as a full-width row right under its member's row. */
.lw-inline-form td {
  background: color-mix(in srgb, var(--gold) 6%, transparent) !important;
  white-space: normal;
}

.lw-inline-form-inner {
  padding-left: 2.6rem;
}

.lw-inline-title {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.lw-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.lw-inline-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.lw-inline-sep {
  margin: 0.55rem 0;
  border-top: 1px dashed var(--border);
}

.lw-inline-form-inner input,
.lw-inline-form-inner select {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}

/* KRKG-0090: the ksywka field and the existing-person dropdown are deliberately narrow (about a
   third of the row), so the category dropdown fits beside the name on one line instead of the row
   stretching out. */
.lw-inline-form-inner .lw-inline-existing-select,
.lw-inline-form-inner .lw-inline-new-name {
  flex: 0 1 7.5rem;
  min-width: 0;
  max-width: 7.5rem;
}

.lw-inline-form-inner button {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: var(--gold);
  color: #241d05;
  cursor: pointer;
}

.lw-inline-form-inner button:disabled {
  opacity: 0.6;
  cursor: default;
}

.lw-inline-form-inner button.lw-inline-cancel {
  border-color: var(--border);
  background: transparent;
  color: var(--text-muted);
  font-weight: 400;
}

/* KRKG-0094: the events list's inline add-companion panel. It is a full-width child of the same
   flex-wrap .lw-event-row card, so it wraps onto its own line inside the card instead of becoming
   a detached box; the dashed separator keeps it visually tied to its event. Same inner markup as
   the roster's panel, only without the roster table's left indent. */
.lw-event-row .lw-inline-form {
  flex: 1 1 100%;
  width: 100%;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}
.lw-event-row .lw-inline-form-inner {
  padding-left: 0;
}

/* KRKG-0102: the events list's per-row edit panel (Nazwa/Data/Opis/Odwołaj wyjazd) is a full-width
   child of the same flex-wrap .lw-event-row card as the add-companion panel above, for the same
   reason - it wraps onto its own line instead of becoming a detached box. It already has its own
   background/border card look (.lw-event-edit-form, above), so unlike .lw-inline-form it keeps
   that instead of a bare dashed top border. */
.lw-event-row .lw-event-edit-form {
  flex: 1 1 100%;
  width: 100%;
  margin: 0.5rem 0 0;
}

/* Filter controls above the event page's roster. Two independent checkboxes ("Niezgłoszeni" /
   "Zgłoszeni + ja") replace the single toggle: the roster can now be read as any combination of
   the two groups, including an intentionally empty selection. Native checkboxes keep the
   keyboard/focus behaviour free, and accent-color ties them to the page's gold accent. */
.lw-roster-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  font-size: 14px;
  color: var(--text-muted);
}

.lw-roster-filter-heading {
  font-weight: 600;
}

.lw-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
  cursor: pointer;
}

.lw-filter-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.lw-filter-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Roster's name column (KRKG-0059/KRKG-0062) - just the computed display name in its pill, a
   size down from the table's own base font, unlike Spis Ludności/Zarządzanie ludźmi's
   .category-name-pill (full-size, still paired with a separate Ksywa line there since Typ and
   Ksywa are two independent pieces of information on those tables). Left-aligned like every
   other column - right-alignment was tried and reverted. */
.lw-roster-name-cell .category-name-pill {
  font-size: 0.85em;
}

/* Breathing room between the page's major sections (fee panel, summary, roster, audit log) -
   previously these all touched with no vertical rhythm at all. Kept tight (not the more generous
   rhythm a lone spacer would get) since #summary-content's own .lw-summary-columns already
   carries several of these panels' worth of lines. */
#skladka-fee-panel,
#summary-panel,
#roster-panel,
#skladki-content {
  margin-bottom: 1.25rem;
}

#summary-panel h2,
#roster-panel h2 {
  margin-bottom: 0.4rem;
  font-size: 20px;
  color: var(--text);
}

/* KRKG-0074: the "Emeryci" heading above the second Składki table - same h2 treatment as the
   other sections on this page, plus a top margin so it reads as a separate section sitting below
   the main table rather than a stray header. */
#skladki-emeryci h2 {
  margin: 1.25rem 0 0.4rem;
  font-size: 20px;
  color: var(--text);
}

#summary-content > p {
  margin: 0 0 0.5rem;
}

/* Składki/wyjazd summary breakdowns (skladki.js/wyjazd.js's renderSummary, KRKG-0047 follow-up) -
   side-by-side groups (Sekcja/Typ[/Broń]) on desktop, stacked on a narrow screen via the same
   wrap. Each group is a row of small pill+badge chips (.lw-summary-chip/-badge below), not a
   line-per-group list - "Sekcja: N z M nieopłaconych" per line took far more room than the numbers
   actually need. */
.lw-summary-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}

.lw-summary-columns > div {
  min-width: 160px;
}

.lw-summary-columns h3 {
  margin: 0 0 0.3rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* One chip per section/category/weapon-group - reuses .section-pill/.category-name-pill's own
   background/color so a chip looks exactly like that same pill everywhere else it appears, just
   with a count badge appended inside it instead of being a second, separate element. */
.lw-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.lw-summary-chip {
  font-size: 12px;
  padding: 0.1rem 0.5rem;
}

/* A plain (non-pill) chip - "Bez sekcji"/"Brak typu" have no data-section/data-category color to
   inherit, so this gives them the same compact pill shape with a neutral background instead. */
.lw-summary-chip:not(.section-pill):not(.category-name-pill) {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-deep);
  color: var(--text-muted);
}

/* Summary pills as filters (shared/summary-filter.js) - same look as the equipment page's section
   filter (.equipment-filter-pill below): pressed = ring + checkmark, and while anything is pressed
   the unpressed pills dim. The pills are <button>s, so reset the native button chrome. */
.lw-summary-filter {
  margin-bottom: 0.75rem;
}

button.lw-filter-chip {
  border: none;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
}

.lw-filter-chip[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);
}

.lw-filter-chip[aria-pressed="true"]::before {
  content: "✓";
  margin-right: 0.3rem;
}

.lw-summary-filter[data-filter-active="true"] .lw-filter-chip[aria-pressed="false"] {
  opacity: 0.45;
}

.lw-summary-filter[data-filter-active="true"] .lw-filter-chip[aria-pressed="false"]:hover {
  opacity: 0.75;
}

/* Ring needs a little room so it isn't clipped against the neighbouring pill. */
.lw-summary-filter .lw-summary-chips {
  gap: 0.45rem;
}

.lw-filter-clear {
  margin-top: 0.6rem;
}

/* The count itself, appended inside the chip rather than written out as "N nieopłaconych" -
   bold and set off with its own faint backing so it reads as a number, not more label text. */
.lw-summary-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.35rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.85em;
  font-weight: 700;
  vertical-align: middle;
}

/* Lighter green than .lw-skladka-icon[data-paid="true"]'s badge border (#2e7d32), which needs to
   read against a colored badge background rather than this chip's own pill background. */
.lw-summary-badge--ok {
  background: rgba(67, 160, 71, 0.35);
  color: #6fcf73;
}

/* Extra breathing room below the title/meta block, so the accent-bordered fee panel (below)
   doesn't visually crowd the h1 the way the plain event-actions row used to sit right under it. */
#event-meta {
  margin-bottom: 1.25rem;
}

#skladka-fee-panel {
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
}

/* Wyjazd page: Składka and Dodatkowe informacje are plain sections with an h2 heading like
   Podsumowanie, not boxes. Opt-in via .lw-plain-section so the Składki page keeps its box. */
#skladka-fee-panel.lw-plain-section {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.lw-plain-section h2 {
  margin: 0 0 0.4rem;
  font-size: 20px;
  color: var(--text);
}

.lw-plain-section .lw-fee-summary h2 {
  margin-bottom: 0;
}

#event-description-panel {
  margin-bottom: 1.25rem;
}

/* Discord / Google Maps buttons above Dodatkowe informacje: small, and always one row even on a
   phone (nowrap + shrinking labels). The .content-section a prefix is needed to out-specificity
   style.css's generic `.content-section a` (red colour + red underline). Without a saved link they stay greyed out (aria-disabled). */
.lw-event-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.content-section a.lw-event-link,
.content-section a.lw-event-link:link,
.content-section a.lw-event-link:visited,
.content-section a.lw-event-link:hover,
.content-section a.lw-event-link:active,
.content-section a.lw-event-link:focus {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.3rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border-hover);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.content-section a.lw-event-link svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.content-section a.lw-event-link span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Greyed out without a saved link, but still readable: muted (not faded) text and a visible
   border instead of a low-opacity overlay. A click opens the "add the link" pop-up. */
.content-section a.lw-event-link[aria-disabled="true"],
.content-section a.lw-event-link[aria-disabled="true"]:active,
.content-section a.lw-event-link[aria-disabled="true"]:focus {
  background: var(--surface-deep);
  border-style: dashed;
  color: var(--text-muted);
}

.content-section a.lw-event-link[aria-disabled="true"] svg {
  opacity: 0.8;
  filter: grayscale(0.7);
}

.content-section a.lw-event-link:not([aria-disabled="true"]):hover {
  border-color: var(--gold);
}

@media (max-width: 400px) {
  .content-section a.lw-event-link,
  .content-section a.lw-event-link:link,
  .content-section a.lw-event-link:visited,
  .content-section a.lw-event-link:hover,
  .content-section a.lw-event-link:active,
  .content-section a.lw-event-link:focus {
    gap: 0.25rem;
    padding: 0.3rem 0.4rem;
    font-size: 11px;
  }
}

.lw-event-link--discord svg {
  color: #5865f2;
}

/* Składka and Dodatkowe informacje body text share one style, so the two read as the same kind of
   content. */
#skladka-fee-display,
.lw-plain-section .lw-event-description {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* KRKG-124: Compact smart chip for standalone URLs in event description */
.lw-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  margin: 0.25rem 0;
  padding: 0.25rem 0.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.35;
  vertical-align: middle;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lw-link-chip:hover {
  background: var(--surface-deep);
  border-color: var(--border-hover);
  color: var(--gold);
}

.lw-link-chip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.lw-link-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  flex-shrink: 0;
  font-size: 13px;
}

.lw-link-chip--maps .lw-link-chip-icon {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}

.lw-link-chip--drive .lw-link-chip-icon {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
}

.lw-link-chip--facebook .lw-link-chip-icon {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
}

.lw-link-chip--youtube .lw-link-chip-icon {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}

.lw-link-chip--generic .lw-link-chip-icon {
  color: var(--text-muted);
  background: rgba(168, 144, 112, 0.12);
}

.lw-link-chip-body {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  overflow: hidden;
}

.lw-link-chip-label {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.lw-link-chip-separator {
  color: var(--text-faint);
  font-size: 10px;
}

.lw-link-chip-url {
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lw-link-chip-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--text-faint);
  font-size: 11px;
  flex-shrink: 0;
  margin-left: 0.1rem;
  transition: color 0.15s ease;
}

.lw-link-chip:hover .lw-link-chip-arrow {
  color: var(--gold);
}

/* KRKG-124: Inline clickable links within sentences */
.lw-link-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
  transition: color 0.15s ease;
}

.lw-link-inline:hover {
  color: var(--text);
}

.lw-link-inline-icon {
  display: inline-flex;
  align-self: center;
  font-size: 0.85em;
  opacity: 0.85;
  flex-shrink: 0;
}

.lw-link-inline--maps .lw-link-inline-icon { color: #4ade80; }
.lw-link-inline--drive .lw-link-inline-icon { color: #60a5fa; }
.lw-link-inline--facebook .lw-link-inline-icon { color: #3b82f6; }
.lw-link-inline--youtube .lw-link-inline-icon { color: #f87171; }
.lw-link-inline--generic .lw-link-inline-icon { color: var(--text-muted); }

.lw-link-inline-arrow {
  display: inline-flex;
  align-self: center;
  font-size: 0.75em;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Sits on its own row under the Składka heading row (Edytuj / Historia), above the fee text, so the
   heading row stays narrow on phones. */
.lw-fee-deadline:has(.lw-deadline-pill:not([hidden])) {
  margin: 0.4rem 0;
}

/* "termin <date> (za N dni)" pill under the Składka header. */
.lw-deadline-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border-hover);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}

.lw-deadline-pill small {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lw-deadline-pill .lw-deadline-days {
  color: var(--text-muted);
}

.lw-deadline-pill[data-state="paid"] {
  border-color: #3f9a5a;
}

.lw-deadline-pill[data-state="paid"] .lw-deadline-mark,
.lw-deadline-pill[data-state="paid"] .lw-deadline-days {
  color: #5cc47c;
}

.lw-deadline-pill[data-state="unpaid-overdue"] {
  border-color: #c0504d;
  background: rgba(192, 80, 77, 0.12);
}

.lw-deadline-pill[data-state="unpaid-overdue"] .lw-deadline-mark,
.lw-deadline-pill[data-state="unpaid-overdue"] .lw-deadline-days {
  color: #e07a77;
  font-weight: 700;
}

.lw-deadline-mark {
  font-weight: 700;
}

/* Event date, right end of the title row: more prominent than the Udostępnij/Edytuj buttons. */
.lw-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--surface-deep);
  color: var(--gold);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

button.lw-date-pill {
  font-family: inherit;
  cursor: pointer;
}

button.lw-date-pill:hover,
button.lw-date-pill[aria-expanded="true"] {
  background: var(--surface);
  border-color: var(--text);
}

.lw-date-wrap {
  position: relative;
  margin-left: auto;
}

.lw-date-wrap .lw-date-pill {
  margin-left: 0;
}

/* Dashboard variant: same behaviour, but a muted outline so it doesn't compete with the card. */
.lw-date-wrap--quiet {
  display: inline-block;
  margin-left: 0;
}

.lw-date-pill--quiet {
  gap: 0.35rem;
  padding: 0.1rem 0.55rem;
  border-color: var(--border);
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
}

button.lw-date-pill--quiet:hover,
button.lw-date-pill--quiet[aria-expanded="true"] {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold);
}

.lw-date-pill svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

.lw-meta-row #event-meta:empty {
  display: none;
}

.lw-equipment-disabled-note {
  font-size: 12px;
  color: var(--text-muted);
}

#event-equipment-summary {
  margin-bottom: 0.75rem;
}

#event-equipment-summary > p {
  margin: 0 0 0.5rem;
}

/* #skladka-fee-panel is reused verbatim by both the wyjazd page's per-event fee (wyjazd.js) and
   the Składki page's per-year rate note (skladki.js) - the two never render together, and sharing
   the id means sharing that box styling for free. The edit form itself uses the shared .field
   pattern (style.css), so both pages get the same labelled, spaced layout. */

/* Display line + history link above the edit form. */
.lw-fee-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lw-fee-edit {
  display: flex;
  flex-direction: column;
  margin-top: 0.85rem;
}

.lw-fee-edit .field {
  margin-bottom: 0.75rem;
}

/* The panel's own background is --surface, so the shared .field input (also --surface) would
   blend in - the deeper tone keeps the fields visibly distinct here. */
.lw-fee-edit .field input {
  background: var(--surface-deep);
}

/* The due-date field follows the fee field: while there is no fee it is cleared and disabled, so
   it must also look inactive. */
.lw-fee-edit .field input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lw-fee-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* The shared primary button is full-width; in this row it shares the line with "Usuń składkę". */
.lw-fee-actions .add-album-submit {
  width: auto;
  flex: 1 1 auto;
  padding: 10px 1.25rem;
}

.lw-fee-actions .btn-cancel {
  flex: 0 0 auto;
}

/* Title row: the event name plus its "Udostępnij" share button, on the same line so sharing sits
   right where the name is read, not buried in the meta row below. */
.lw-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.lw-title-row h1 {
  margin-bottom: 0;
}

.lw-title-row .lw-edit-toggle {
  flex-shrink: 0;
}

/* Meta line under the title (date on the left) plus its right-aligned Historia/Edytuj controls -
   shared by the event page's #event-meta row and reused wherever else a title needs the same
   "info left, small actions right" line (KRKG event-edit UI). */
.lw-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.lw-meta-row #event-meta {
  margin-bottom: 0;
}

/* The event's own free-text description (Opis field), shown read-only below the meta row when
   present; hidden entirely (via the [hidden] attribute in JS) when the event has none. Set off as
   its own card (border, tinted background) rather than a plain paragraph, so it doesn't read as
   stray unstyled text floating under the title. */
.lw-event-description {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-hover);
  border-radius: 8px;
  color: var(--text-muted);
  white-space: pre-wrap;
}

.lw-meta-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Small icon+label toggle that reveals an edit form in place - same footprint/hover as
   a.audyt-history-btn (1.8rem tall, --gold on hover) so the two sit as a matched pair on the
   meta row and on the fee summary line. */
button.lw-edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.6rem;
  padding: 0 0.5rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

button.lw-edit-toggle:hover,
button.lw-edit-toggle[aria-expanded="true"] {
  color: var(--gold);
  border-color: var(--gold);
}

button.lw-edit-toggle svg {
  width: 0.8rem;
  height: 0.8rem;
  pointer-events: none;
}

/* Icon-only variant (KRKG-0102) for the events list, where every row needs its own compact
   trigger - same square footprint as a.audyt-history-btn rather than the label button's auto
   width, so a row of pills/toggles doesn't grow a wide "Edytuj" label per event. */
button.lw-edit-toggle.lw-edit-toggle--icon {
  width: 1.6rem;
  padding: 0;
  justify-content: center;
}

/* Text "Edytuj" buttons that are plain .member-action rows (equipment list, accountless persons) - same
   smaller size as the lw-edit-toggle label variant above (KRKG-116 follow-up). Declared after the
   .czl-table .member-action rules so it wins at equal specificity. */
.member-action.edit-compact {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  line-height: 1.2;
}

/* KRKG-0106: 2s pulse feedback on the "Udostępnij" button's clipboard fallback path only - the
   native Web Share sheet is its own feedback, so this class never applies on that path. */
button.lw-edit-toggle.lw-share--active {
  color: var(--gold);
  border-color: var(--gold);
}

/* Checkbox row in the add/edit event forms. Deliberately not a .field: that pattern styles every
   input as a full-width text box (style.css), which turns a checkbox into an empty bar. */
.lw-event-checkbox-row {
  margin-bottom: 1rem;
}

/* Collapsible "edit this event" panel opened by the meta row's Edytuj toggle - reuses the shared
   .field pattern (style.css) for Nazwa/Data/Opis like the add-event form does, so the two forms
   stay visually identical. */
.lw-event-edit-form {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Shown live (KRKG event-edit-form.js's wireUrlWarning) once Nazwa or Data differs from the
   event's saved values - both feed the friendly-URL slug, so either one changing breaks already
   shared links. --gold rather than the error color: informational, not a failure. */
.lw-event-edit-url-warning {
  color: var(--gold);
  font-size: 13px;
  margin: -0.5rem 0 1rem;
}

.lw-event-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.lw-event-edit-actions .add-album-submit {
  width: auto;
  flex: 1 1 auto;
  padding: 10px 1.25rem;
}

/* Odwołaj/Przywróć wyjazd sits apart from Zapisz/Anuluj - a dividing line plus right alignment
   marks it as the destructive/status action rather than part of the save flow (it used to be its
   own always-visible button; now it only surfaces once the form is open). */
.lw-event-edit-danger-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}

/* Składki page: payment info ("Jak płacić"), the charge buttons, the add form and the details of an
   extra charge. */
.skladki-payment-text {
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.skladki-payment-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

/* The row's three controls share one height and a centred baseline: "Jak płacić?", Edytuj and
   "+ Dodaj składkę" (KRKG-116 follow-up). Heights are set here, not left to each control's padding. */
.skladki-payment-head .skladki-payment-toggle {
  width: auto;
}

.skladki-top-row .skladki-payment-toggle,
.skladki-top-row .skladki-add-btn {
  height: 1.6rem;
  padding: 0 0.9rem;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  line-height: 1;
}

/* "Jak płacić?" + Edytuj on the left, "+ Dodaj składkę" pushed to the right of the same row. */
.skladki-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.skladki-top-row .skladki-add-btn {
  margin-left: auto;
}

/* Group box with a gold legend - the same look as the Mój profil fieldsets (profil.css .lw-fieldset). */
.skladki-fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 1.5rem;
  min-width: 0;
}

.skladki-fieldset legend {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  padding: 0 0.4rem;
}

.skladki-fieldset[hidden] {
  display: none;
}

/* The annual-charge box reuses #skladka-fee-panel (the wyjazd page's accent-bordered fee panel), whose
   id rules would otherwise add the gold left bar and a different padding/background. */
#skladka-fee-panel.skladki-fieldset {
  padding: 1rem 1.25rem 1.25rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Payment deadline: the calendar icon sits on top of a charge's box, the description below it. */
.skladki-deadline {
  margin-bottom: 0.6rem;
}

.skladki-deadline[hidden] {
  display: none;
}

.lw-date-pill--icon {
  padding: 0.3rem 0.5rem;
}

.skladki-wpisowe-text {
  margin: 0;
  font-size: 13px;
}

/* The page's charge buttons are navigation, so every one stays clearly visible: a gold outline when
   unselected, solid gold when selected - never dimmed like the shared filter pills (whose dimming
   rule is more specific than a plain class, hence the longer selector). */
button.skladki-charge-btn.lw-filter-chip {
  border: 1px solid var(--gold);
  background: rgba(196, 150, 42, 0.16);
  color: var(--gold);
  font-weight: 600;
}

button.skladki-charge-btn.lw-filter-chip:hover {
  background: rgba(196, 150, 42, 0.32);
}

button.skladki-charge-btn.lw-filter-chip[aria-pressed="true"] {
  background: var(--gold);
  color: var(--bg);
}

.lw-summary-filter[data-filter-active="true"] .skladki-charge-groups .lw-filter-chip[aria-pressed="false"],
.lw-summary-filter[data-filter-active="true"] .skladki-charge-groups .lw-filter-chip[aria-pressed="false"]:hover {
  opacity: 1;
}

.skladki-payment-form {
  margin-top: 0.5rem;
}

.skladki-payment-form textarea {
  background: var(--surface-deep);
}

.skladki-charge-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
}

.skladki-charge-bar .lw-summary-filter {
  margin-bottom: 0;
}

.skladki-charge-groups {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* An h3 (one level below the page sections); the doubled selector beats .content-section h3. */
.skladki-charge-groups .skladki-charge-group-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
  margin: 0 0 0.2rem;
}

/* "+ Dodaj składkę": the page's one red call to action. */
.skladki-add-btn {
  padding: 0.4rem 0.9rem;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.skladki-add-btn:hover {
  background: var(--accent-dark);
}

/* Bigger than the 12px summary pills - these are the page's primary navigation. */
.skladki-charge-btn.lw-summary-chip {
  font-size: 14px;
  padding: 0.3rem 0.9rem;
}

.skladki-add-form,
.skladki-extra-panel {
  margin-bottom: 1rem;
}

.skladki-add-kind {
  border: none;
  padding: 0;
  margin: 0 0 0.75rem;
}

.skladki-add-kind label {
  margin-right: 1rem;
}

.skladki-extra-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.skladki-pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .lw-event-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Member tables (KRKG-0053) - .content-section already borders the whole page section, so
     .czl-table-wrap's own border on top was a double frame eating into a phone's little width.
     Tighter padding/font for the same reason. */
  .czl-table-wrap {
    border: none;
    border-radius: 0;
  }

  .czl-table {
    font-size: 0.82rem;
  }

  .czl-table th,
  .czl-table td {
    padding: 0.3rem 0.45rem;
  }
}

/* Sekcja abbreviation cell (KRKG-0063/KRKG-0064) - the sticky first column from KRKG-0052 now
   carries the 3-letter section abbreviation itself instead of being a bare color bar, stacked
   vertically (B/D/G) via writing-mode so the column stays exactly one letter wide rather than
   fitting all 3 side by side. --section-c still comes from the <tr>'s own [data-section="..."]
   rule/inheritance above - full section names live only in the sections lookup list; the
   id->abbreviation map (BDG/CZU/KRK/POZ/WAW/WRO) is a small page-local constant (SECTION_ABBR)
   duplicated per file, same convention as e.g. WEAPON_ICONS. Stays position:sticky so it doesn't
   scroll away with the rest of a dense table on a narrow screen. Works both as a plain colored
   cell (Spis Ludności, Lista Wyjazdowa - always read-only there) and as the frame around a
   <select> (Zarządzanie ludźmi's editable dropdown, styled further below) - a native <select>
   renders its collapsed value in the writing-mode it's given same as plain text, and still opens
   its normal option list on click regardless. thead's copy is just the single letter "S" (KRKG
   header text stays real words elsewhere; a 3-letter vertical stack in a header would be an odd
   outlier) - its background already comes from .czl-table thead th.

   line-height: 1 is load-bearing, not cosmetic - the default "normal" line-height left enough
   extra vertical room per stacked character that adjacent glyphs visually overlapped/clipped each
   other at this font-size, and the width has to fit "W" (the widest Latin capital) without
   clipping its sides, not just the narrower letters - both confirmed empirically (WAW/WRO were
   the two abbreviations that actually misread, e.g. "NAN"/"NRC", until both were fixed together). */
.czl-table td.czl-section-cell,
.czl-table th.czl-section-cell {
  position: sticky;
  left: 0;
  z-index: 1;
  writing-mode: vertical-rl;
  text-orientation: upright;
  width: 0.82rem;
  min-width: 0.82rem;
  max-width: 0.82rem;
  padding: 0.6rem 0.3rem;
  border: none;
  text-align: center;
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
}

.czl-table td.czl-section-cell {
  background: var(--section-c, var(--section-color-default));
  color: var(--bg);
}

/* Zarządzanie ludźmi's Sekcja <select> lives inside this cell rather than next to it (KRKG-0063
   merged what used to be two columns - the bare color bar plus a full-width Sekcja dropdown -
   into one). Its own opaque .czl-field background/border would otherwise hide the cell's color
   tint entirely, so both go transparent/inherited here - same fix as the Typ cell in KRKG-0052. */
.czl-table td.czl-section-cell select.czl-field {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  writing-mode: inherit;
  text-orientation: inherit;
  text-align: center;
  text-align-last: center;
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 0;
  margin: 0;
  min-width: 0;
  /* Not width:100% - a <select>'s shrink-to-fit sizing algorithm doesn't reliably measure its
     option text under vertical-rl (observed collapsing to a few px wide in Chromium), so it gets
     a fixed physical width matching the cell's own instead. */
  width: 0.72rem;
  height: 100%;
  cursor: pointer;
  /* The cell is only ~0.82rem wide - the native select chevron alone would blow past that (and
     doesn't render meaningfully rotated under vertical-rl anyway). Dropping it still leaves a
     fully working native <select> (click/tap opens the option list regardless); the whole cell
     being an obvious colored control is signal enough without an arrow of its own. */
  appearance: none;
  -webkit-appearance: none;
}

.czl-table td.czl-section-cell select.czl-field:focus {
  outline: 2px solid var(--bg);
  outline-offset: -2px;
}

/* KRKG-0076: /pliki/ page - file-link tiles and the inline add-file form. */
.pliki-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.pliki-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pliki-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 32rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.pliki-add-form-actions {
  display: flex;
  gap: 0.5rem;
}

.pliki-add-error {
  color: var(--accent);
}

.pliki-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

.pliki-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.pliki-tile-icon {
  color: var(--text-muted);
}

.pliki-tile-name {
  margin: 0;
  padding-right: 1.5rem;
  font-size: 1rem;
}

.pliki-tile-description {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.pliki-tile-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Same downscale as .lw-roster-name-cell .category-name-pill - full table-cell sizing (0.15rem
   0.65rem padding, 1rem+ default font) reads as oversized crammed into this compact meta line. */
.pliki-tile-meta .category-name-pill {
  font-size: 0.85em;
}

.pliki-tile-actions {
  display: flex;
  gap: 0.5rem;
}

.pliki-tile-open,
.pliki-tile-copy {
  flex: 1;
  justify-content: center;
}

/* One-shot pulse for a /pliki/#slug deep link landing on this tile (scrollToHashedTile in
   pliki.js) - confirms which tile the link actually opened, since a plain scroll alone can leave
   it unclear which of several similarly-shaped cards the browser just centered on. */
.pliki-tile--highlight {
  animation: pliki-tile-highlight-pulse 2s ease-out;
}

@keyframes pliki-tile-highlight-pulse {
  0%, 40% {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold);
  }
  100% {
    border-color: var(--border);
    box-shadow: none;
  }
}

.pliki-tile-delete {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
}

.pliki-empty {
  color: var(--text-muted);
}

/* ── /app/ dashboard (KRKG-0080) ── */

/* ── MOCKUP-ONLY styles for review. If approved, these move into member-area.css
   under the same naming/token conventions already used by lw-*/pliki-* classes. ── */

.dashboard-main { max-width: 920px; margin: 0 auto; }

.dashboard-greeting {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.dashboard-greeting h1 { margin: 0; }
.dashboard-greeting .subtitle { color: var(--text-muted); font-size: 0.95rem; }

/* Admin action panel — topmost, only rendered (DOM presence, not CSS hidden) when this
   page's own /admin/whoami call (design.md §3a/§4) resolves isAdmin === true — a page-local
   initGoogleSignIn call, not nav.js's private zoneState. Gold border marks it as needing
   attention, distinct from the neutral card styling everything else below uses. */
.dashboard-admin-panel {
  border: 1px solid var(--gold);
  border-radius: 0.6rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  background: color-mix(in srgb, var(--gold) 6%, var(--surface));
}
.dashboard-admin-panel h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* Loading placeholder and "nothing pending" state - both collapse to one compact row. The clear
   state mirrors .dashboard-dues-panel--settled's green confirmation. */
.dashboard-admin-panel--loading,
.dashboard-admin-panel--clear {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
}
.dashboard-admin-panel--loading { color: var(--text-muted); }
.dashboard-admin-panel--clear {
  border-color: var(--border);
  background: transparent;
  color: #6fcf73;
  font-weight: 700;
}
.dashboard-action-list { display: flex; flex-direction: column; gap: 0.5rem; }
.dashboard-action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text);
  text-decoration: none;
}
.dashboard-action-item:hover { border-color: var(--gold); }
.dashboard-action-item-label { display: flex; align-items: center; gap: 0.6rem; }
.dashboard-action-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--gold);
  color: #1a1410;
  font-weight: 700;
  font-size: 0.85rem;
}
.dashboard-action-chevron { color: var(--text-muted); }

/* Primary launcher tiles — reuses .pliki-tile-grid's responsive auto-fill grid, but these
   tiles are bigger/icon-forward since they're the dashboard's main navigation, not a file
   listing. The Lista Wydarzeń tile gets --dashboard-tile-featured to read as "the" primary
   destination per the brief, without a visually separate treatment that would break the
   grid's consistency. */
.dashboard-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.dashboard-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.1rem 1.1rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  transition: border-color 0.15s, transform 0.15s;
}
.dashboard-tile:hover { border-color: var(--gold); transform: translateY(-2px); }
.dashboard-tile--featured {
  grid-column: span 2;
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--gold) 45%, var(--border));
}
.dashboard-tile-icon {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--gold);
}
.dashboard-tile-icon svg { width: 100%; height: 100%; }
.dashboard-tile-label { font-weight: 700; font-size: 1.02rem; }
.dashboard-tile-hint { color: var(--text-muted); font-size: 0.85rem; }

/* Insight widgets — three cards, reusing .card/.card-body from lista-wyjazdowa's own
   card styling for visual family resemblance, laid out as a responsive row. */
.dashboard-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.dashboard-widget {
  display: block;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s;
}
a.dashboard-widget:hover { border-color: var(--gold); }
.dashboard-widget h3 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dashboard-widget-empty { color: var(--text-faint); font-size: 0.9rem; }

.dashboard-event-name { font-weight: 700; margin: 0 0 0.15rem; }
.dashboard-event-date {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--gold);
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}
/* Signed-up indicator — same green as .dashboard-dues-panel--settled/lw-summary-badge--ok,
   but as its own pill (not inline text) so it reads as status, not prose. */
.dashboard-event-signedup {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(67, 160, 71, 0.2);
  color: #6fcf73;
  font-size: 0.78rem;
  font-weight: 700;
}
.dashboard-event-countdown { color: var(--text-muted); font-size: 0.85rem; }
.dashboard-event-name-link { color: inherit; text-decoration: none; }
.dashboard-event-name-link:hover,
.dashboard-event-name-link:focus-visible { color: var(--gold); text-decoration: underline; }
.dashboard-widget .lw-event-actions { margin-top: 0.6rem; flex-wrap: wrap; }
.dashboard-event-panel:not(:empty) { margin-top: 0.5rem; }
.dashboard-widget .lw-inline-form { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); }
.dashboard-widget .lw-inline-form-inner { padding-left: 0; }

.dashboard-mini-list { display: flex; flex-direction: column; gap: 0.5rem; }
.dashboard-mini-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.dashboard-mini-item-name {
  color: var(--text);
  /* KRKG-0094: each trip name is its own link into that trip, so it has to read as clickable
     without turning the whole row into a link (the card lists several trips). */
  text-decoration: none;
}
.dashboard-mini-item-name:hover,
.dashboard-mini-item-name:focus-visible {
  color: var(--gold);
  text-decoration: underline;
}
.dashboard-mini-item-meta { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5rem; }

.dashboard-gallery-thumbs { display: flex; gap: 0.5rem; }
.dashboard-gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 4.5rem;
}
.dashboard-gallery-thumb {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.4rem;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 0.7rem;
  text-align: center;
  overflow: hidden;
}
.dashboard-gallery-thumb-caption {
  width: 100%;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Without this, app.js's cover-image <img> renders at its full intrinsic size inside the 4.5rem
   box (only clipped by overflow:hidden), not scaled - an uncontrolled crop, not a thumbnail. Same
   width/height/object-fit pattern as style.css's .thumb img. */
.dashboard-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dues panel — itemized list of UNPAID items only. No total: skladkaFee/DuesYearFee.note are
   free text (rates vary by category, e.g. "100 zł mężczyźni, 50 zł kobiety"), so there is no
   number to sum — see design.md §2a. Fully-paid state (.dashboard-dues-panel--settled)
   collapses to a single compact row instead. */
.dashboard-dues-panel {
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
}
.dashboard-dues-panel h3 {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dashboard-dues-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.85rem; }
.dashboard-dues-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-deep);
  border-radius: 0.4rem;
  font-size: 0.9rem;
}
.dashboard-dues-row-label { display: flex; flex-direction: column; gap: 0.15rem; }
.dashboard-dues-row-detail { color: var(--text-muted); font-size: 0.82rem; }
.dashboard-dues-row-duedate {
  flex-shrink: 0;
  color: var(--gold);
  font-size: 0.82rem;
  white-space: nowrap;
}
/* Settled state: no h3/list/total — just one compact confirmation row, same panel padding. */
.dashboard-dues-panel--settled {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  color: #6fcf73;
  font-weight: 700;
}

/* Secondary link row — lower-weight than the launcher tiles above, for the rest of Strefa
   Członków's menu (Spis Ludności, "Do przeczytania", Discord) so they're one click from the
   dashboard without competing visually with the primary 4 destinations. */
.dashboard-secondary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 1.25rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.dashboard-secondary-links-label {
  width: 100%;
  margin: 0 0 0.15rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dashboard-secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
}
.dashboard-secondary-link:hover { border-color: var(--gold); }
.dashboard-secondary-link svg { width: 1.15rem; height: 1.15rem; color: var(--gold); }

#app-admin-panel-slot:empty,
#app-dues-panel-slot:empty,
#app-widget-grid-slot:empty {
  display: none;
}

/* Camp-equipment page: Grupa/Kategoria columns are secondary info, so they run small with tight
   side padding to leave the room to Opis. The th rule also has to reach the sort <button> inside
   the header, which sets its own font and padding. */
.czl-table td.equipment-meta-cell,
.czl-table th.equipment-meta-cell,
.czl-table th.equipment-meta-cell button {
  font-size: 0.7em;
}

.czl-table td.equipment-meta-cell,
.czl-table th.equipment-meta-cell {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  /* Shrink-to-content: a 1% width makes the auto table layout give these columns only what their
     text needs instead of splitting the spare width evenly. */
  width: 1%;
}

.czl-table thead th.equipment-meta-cell[data-sort-key] {
  padding: 0;
}

.czl-table thead th.equipment-meta-cell[data-sort-key] button {
  padding: 0.4rem 0.3rem;
}

/* "Edytuj grupy i kategorie" editor. Fields and buttons mirror the site's dense-table look
   (.czl-field inputs, .czl-table .member-action buttons) - those rules are scoped to .czl-table,
   so they are restated here for controls that live outside a table. */
#equipment-taxonomy-toggle,
.equipment-taxonomy .member-action {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--gold);
  padding: 0.3rem 0.7rem;
  font-size: 0.85em;
  font-family: inherit;
  cursor: pointer;
}

#equipment-taxonomy-toggle:hover,
.equipment-taxonomy .member-action:hover {
  border-color: var(--gold);
}

/* Three controls (Historia, "Dodaj sprzęt", "Edytuj grupy i kategorie") - let them wrap on a
   phone instead of overflowing the page. */
.equipment-header-actions {
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* "Filtry" row above the equipment tables: "Wyczyść filtr" plus one toggle per Sekcja - a larger
   .section-pill in the section's own color. Pressed = white ring + checkmark; while any section is
   pressed, the unpressed ones are dimmed so it is obvious which sections are being shown. */
.equipment-section-filter {
  margin-bottom: 1.5rem;
}

.equipment-section-filter-heading {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.equipment-section-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.equipment-filter-clear {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--gold);
  padding: 0.3rem 0.7rem;
  font-size: 0.85em;
  font-family: inherit;
  cursor: pointer;
}

.equipment-filter-clear:hover:not(:disabled) {
  border-color: var(--gold);
}

.equipment-filter-clear:disabled {
  opacity: 0.4;
  cursor: default;
}

.section-pill.equipment-filter-pill {
  padding: 0.35rem 0.9rem;
  font-size: 0.95em;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
}

.equipment-filter-pill[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);
}

.equipment-filter-pill[aria-pressed="true"]::before {
  content: "✓";
  margin-right: 0.35rem;
}

.equipment-section-filter[data-active="true"] .equipment-filter-pill[aria-pressed="false"] {
  opacity: 0.45;
}

.equipment-section-filter[data-active="true"] .equipment-filter-pill[aria-pressed="false"]:hover {
  opacity: 0.75;
}

.equipment-taxonomy {
  max-width: 42rem;
  margin-top: 1rem;
}

.equipment-taxonomy h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
}

/* One line per row, also on a phone: the name field takes whatever width is left (capped), the
   group <select> and the buttons keep their natural size, and nothing wraps. */
.equipment-taxonomy-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.equipment-taxonomy-row input[type="text"],
.equipment-taxonomy-row select {
  background: var(--surface-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 0.3rem 0.4rem;
  font-size: 0.85em;
  font-family: inherit;
  min-width: 0;
}

.equipment-taxonomy-row input[type="text"] {
  flex: 1 1 4rem;
  max-width: 10rem;
  cursor: text;
}

.equipment-taxonomy-row select {
  flex: 0 1 7rem;
  min-width: 4.5rem;
  cursor: pointer;
}

.equipment-taxonomy-row .member-action {
  flex: 0 0 auto;
  padding: 0.3rem 0.5rem;
  white-space: nowrap;
}

/* Number of equipment items in a category - a small round pill, no brackets. */
.equipment-count-pill {
  flex: 0 0 auto;
  min-width: 1.4rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.75em;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 600px) {
  .equipment-taxonomy {
    padding: 0.6rem;
  }
}

.equipment-taxonomy-row input[type="text"]:focus,
.equipment-taxonomy-row select:focus {
  border-color: var(--accent);
  outline: none;
}

/* Photo picker thumbnails (Mój profil, Sprzęt obozowy) - moved here from profil.css so both pages
   share the same photo upload elements. */
.lw-photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.lw-photo-thumb {
  width: 120px;
  text-align: center;
}

.lw-photo-thumb img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: var(--surface);
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
}

.lw-photo-thumb p {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0.35rem 0;
}

/* KRKG-0083: marks whichever approved photo is currently the public "main" one, in the same slot
   a .lw-set-main-btn takes on every other approved thumbnail - so picking a new main always looks
   like swapping a button for a badge, never like the button silently disappearing. */
.lw-photo-thumb .lw-main-badge {
  width: 100%;
  padding: 6px 0;
  margin: 0;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.lw-photo-thumb .lw-crop-btn {
  width: 100%;
  padding: 6px 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.lw-photo-thumb .lw-crop-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* KRKG-0070: delete button on a pending (not-yet-approved) photo thumbnail - same base look as
   .lw-crop-btn, but its hover state reads as destructive rather than neutral.
   KRKG-0083: same treatment for .lw-delete-public-btn, the equivalent delete button on an
   already-approved photo. */
.lw-photo-thumb .lw-delete-pending-btn:hover,
.lw-photo-thumb .lw-delete-public-btn:hover {
  border-color: var(--danger, #c0392b);
  color: var(--danger, #c0392b);
}

.lw-photo-thumb .lw-delete-pending-btn:disabled,
.lw-photo-thumb .lw-delete-public-btn:disabled,
.lw-photo-thumb .lw-set-main-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Calendar dropdown under the date pill (shared/lw-calendar.js): anchored to the pill, no
   backdrop - closes on an outside click or Escape. */
.lw-cal-popover {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 30;
  width: min(86vw, 340px);
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  font-size: 13px;
}

/* Dashboard cards: the pill sits mid-row, so the dropdown opens toward the side that has room. */
.lw-cal-popover--start {
  right: auto;
  left: 0;
}

.lw-cal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}

.lw-cal-add,
.lw-cal-ics {
  font-family: inherit;
  cursor: pointer;
  border-radius: 6px;
}

.lw-cal-add {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--gold);
  background: var(--surface-deep);
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
}

.lw-cal-add:hover {
  background: var(--gold);
  color: var(--bg);
}

.lw-cal-ics {
  padding: 0.25rem;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: underline;
}

.lw-cal-ics:hover {
  color: var(--text);
}

.lw-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.lw-cal-title {
  color: var(--text);
  font-weight: 700;
  text-transform: capitalize;
}

.lw-cal-step {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-deep);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.lw-cal-step:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.lw-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.lw-cal-weekday {
  padding-bottom: 0.2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
}

.lw-cal-day {
  min-height: 3.1rem;
  padding: 0.2rem 0.15rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--surface-deep);
  text-align: center;
  min-width: 0;
}

.lw-cal-day--outside {
  opacity: 0.35;
}

.lw-cal-day--today {
  border-color: var(--text-muted);
}

.lw-cal-day--has-event {
  position: relative;
  cursor: pointer;
  border-color: var(--gold);
  background: rgba(196, 150, 42, 0.22);
}

.lw-cal-day--has-event .lw-cal-daynum {
  color: var(--gold);
}

.lw-cal-day--current {
  background: var(--gold);
}

.lw-cal-day--current .lw-cal-daynum,
.lw-cal-grid .lw-cal-day--current a.lw-cal-trip {
  color: var(--bg);
}

.lw-cal-daynum {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.lw-cal-grid a.lw-cal-trip {
  display: block;
  margin-top: 1px;
  border-bottom: none;
  color: var(--gold);
  font-size: 7px;
  line-height: 1.2;
  text-decoration: none;
  /* Full trip name, wrapped over as many lines as it needs; very long words break instead of
     pushing the grid wider. */
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Payment deadline marker (Składki page): same label look as a trip, but not a link. */
.lw-cal-grid span.lw-cal-trip--deadline {
  display: block;
  margin-top: 1px;
  color: var(--gold);
  font-size: 7px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.lw-cal-day--current span.lw-cal-trip--deadline {
  color: var(--bg);
}

.lw-cal-grid a.lw-cal-trip:hover {
  text-decoration: underline;
}

/* Whole day cell is a link to its trip: the first trip's anchor stretches over the cell. With
   several trips on one day, the others stay clickable above it by their own label. */
.lw-cal-grid a.lw-cal-trip {
  position: relative;
  z-index: 1;
}

.lw-cal-grid a.lw-cal-trip--cover {
  position: static;
}

.lw-cal-trip--cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}