/* Styl „compact”: gęsty, jak w systemach biurowych. Podpisy z lewej strony pól, pasek zapisu przyklejony u góry,
   tabele w paski, bez animacji, kręciołek jako przesuwający się pasek. Sekcje jako akordeon: `accordion()`
   z compact.js. Włączenie: data-thw-style="compact" na `<html>` (cała aplikacja) albo nad formularzem (nazwy stylów:
   themewright, formwright#56). */

/* Zmienne na samym elemencie ze stylem: kroje i odstępy (`--sf-*`) – formularz. Kształt (`--thw-radius*`, `--thw-shadow`)
   daje themewright (`themes/styles.css`, themewright#15), kolory – motyw themewright (styl ich nie zmienia); styl
   przełącza się w locie zmianą atrybutu. */
:where([data-thw-style="compact"]) {
  --sf-font: "Nimbus Sans Narrow", "Arial Narrow", "Roboto Condensed", sans-serif;
  --sf-font-display: "Nimbus Sans", Arial, sans-serif;
  --sf-font-size: 13px;
  --sf-radius-pill: 3px; --sf-radius-round: 2px;
  --sf-gap: 8px; --sf-control-height: 28px; --sf-duration: 0s;
}

:where([data-thw-style="compact"]) {
  /* Podpisy z lewej: siatka w polu (podpis jest rodzeństwem kontrolki). Tylko pola w kolumnie; w wierszach (wąskie
     pola) i w komórkach tabeli podpis zostaje nad polem. */
  & :is(.sf-body, .sf-section-body, .sf-card-body, .sf-object, .sf-column, :not(.sf-row) > .sf-when) > :is(div.sf-field, .sf-read-field):has(> :is(.sf-label, .sf-read-label)) {
    display: grid; grid-template-columns: 9.5em minmax(0, 1fr); column-gap: 10px; align-items: start; max-width: none; }
  & :is(.sf-body, .sf-section-body, .sf-card-body, .sf-object, .sf-column, :not(.sf-row) > .sf-when) > :is(div.sf-field, .sf-read-field) > :is(.sf-label, .sf-read-label) {
    grid-row: 1 / span 4; margin: 0; padding-top: 5px; font-weight: 500; text-align: right; }
  /* Kontrolka w kolumnie mieści się w jej szerokości (lista rozwijana z długą opcją nie wychodzi poza krawędź). */
  & :is(.sf-body, .sf-section-body, .sf-card-body, .sf-object, .sf-column, :not(.sf-row) > .sf-when) > :is(div.sf-field, .sf-read-field):has(> :is(.sf-label, .sf-read-label)) > :not(.sf-label, .sf-read-label) { grid-column: 2; min-width: 0; max-width: 100%; }
  /* Pole-grupa (np. wybór wariantu unii): ta sama siatka co zwykłe pole. Podpis `legend` pływa, więc nie jest podpisem
     ramki, tylko elementem siatki – stoi w jednej linii z kontrolką. */
  & :is(.sf-body, .sf-section-body, .sf-card-body, .sf-object, .sf-column, :not(.sf-row) > .sf-when) > fieldset.sf-field:has(> legend.sf-label) {
    display: grid; grid-template-columns: 9.5em minmax(0, 1fr); column-gap: 10px; align-items: start; }
  & :is(.sf-body, .sf-section-body, .sf-card-body, .sf-object, .sf-column, :not(.sf-row) > .sf-when) > fieldset.sf-field > legend.sf-label { float: left; grid-row: 1 / span 4; width: auto; margin: 0; padding-top: 5px; font-weight: 500; text-align: right; }
  & :is(.sf-body, .sf-section-body, .sf-card-body, .sf-object, .sf-column, :not(.sf-row) > .sf-when) > fieldset.sf-field > legend.sf-label ~ * { grid-column: 2; min-width: 0; max-width: 100%; }
  & .sf-input, & .sf-tags { padding: 3px 7px; }
  /* Tabela słownika (`inline: true`): wiersz tak niski jak pole motywu (bez odstępu pionowego w komórkach). */
  & .sf-map-inline .sf-map-row .sf-input { padding-block: 0; }
  & .sf-map-inline .sf-map-row select.sf-input { padding-right: 22px; }
  & :is(.sf-segment, .sf-locale) { min-height: 22px; padding: 1px 9px; font-size: 12px; }
  & :is(.sf-locales, .sf-segmented) { padding: 2px; }
  & :is(.sf-button, .sf-save) { min-height: 26px; padding: 2px 10px; }
  & .sf-style-title { font-size: 20px; }
  & .sf-section-title { padding: 5px 8px; border: 1px solid var(--thw-line); background: var(--thw-menu); font: 600 12px var(--sf-font-display); letter-spacing: .02em; text-transform: none; }
  & .sf-section-body { padding-top: 8px; }
  & .sf-card-head { padding: 3px 6px 3px 8px; }
  & .sf-card-body { padding: 8px; }
  & .sf-card-number { background: none; color: var(--thw-muted); }
  & .sf-table td { padding: 2px 4px; }
  & .sf-table tbody tr:nth-child(even) td { background: var(--thw-menu); }
  & .sf-table thead th { padding: 4px; border-bottom-width: 1px; background: var(--thw-menu); }
  & .sf-icon-button { width: 22px; height: 22px; font-size: 13px; }
  /* Pasek zapisu u góry: formularz jest siatką, więc `order` przenosi go bez JS. */
  & .sf-form > .sf-actions { order: -1; position: sticky; top: var(--sf-sticky-top, 0px); bottom: auto; padding: 4px 4px 4px 10px; background: var(--thw-menu); backdrop-filter: none; }
  & .sf-spinner { width: 28px; height: 4px; border: 0; vertical-align: middle;
    background: linear-gradient(90deg, transparent 0 30%, var(--thw-tone-accent) 30% 60%, transparent 60%) 0 0 / 200% 100% var(--thw-line);
    animation: compact-bar 1s linear infinite; }
  /* Tony: motyw nadpisuje tu karty, pola albo tabelę, więc ton ma własne reguły (odcień z --thw-tone-<ton>, grubość --thw-tone-bar). */
  & .sf-table tbody tr.sf-tone td { background: var(--sf-tone-soft); }
}
@keyframes compact-bar { to { background-position: -200% 0; } }
@media (max-width: 600px) {
  :where([data-thw-style="compact"]) .sf-form :is(div.sf-field, .sf-read-field):has(> :is(.sf-label, .sf-read-label)) { display: block; }
  :where([data-thw-style="compact"]) .sf-form :is(.sf-label, .sf-read-label) { padding-top: 0 !important; text-align: left !important; }
  :where([data-thw-style="compact"]) .sf-form fieldset.sf-field:has(> legend.sf-label) { display: block; }
  :where([data-thw-style="compact"]) .sf-form fieldset.sf-field > legend.sf-label { float: none; }
}