/*
 * Thermosilesia — warstwa wizualna panelu (Filament 5), bez kroku budowania.
 * Spokojny, gęsty układ: neutralne powierzchnie, cienkie obramowania, jeden kolor akcentu.
 * Tryb ciemny ma własne, dobrane powierzchnie i kontrasty (nie jest odwróceniem jasnego).
 */

:root {
    --dh-canvas: #f4f5f7;
    --dh-surface: #ffffff;
    --dh-surface-2: #f8f9fa;
    --dh-hover: #f2f4f7;
    --dh-border: #e4e6ea;
    --dh-border-strong: #d4d7dd;
    --dh-text: #1f2329;
    --dh-muted: #6b7280;
    --dh-accent: #2c83f5;
    --dh-accent-hover: #1f6fd8;
    --dh-accent-text: #1d6fdc;
    --dh-accent-soft: rgba(44, 131, 245, 0.09);
    --dh-radius: 10px;
    --dh-radius-sm: 6px;
    --dh-shadow-pop: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
}

.dark {
    --dh-canvas: #131416;
    --dh-surface: #1b1c1f;
    --dh-surface-2: #212226;
    --dh-hover: #26282c;
    --dh-border: #2c2e33;
    --dh-border-strong: #3a3d43;
    --dh-text: #e7e8eb;
    --dh-muted: #9aa0aa;
    --dh-accent: #2c83f5;
    --dh-accent-hover: #4a96ff;
    --dh-accent-text: #6aa9ff;
    --dh-accent-soft: rgba(74, 150, 255, 0.14);
    --dh-shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Jeden, średni rozmiar całego interfejsu (Filament liczy w rem). */
html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.fi-body {
    background: var(--dh-canvas);
    color: var(--dh-text);
    font-feature-settings: 'cv11', 'ss01', 'tnum';
}

/* ================================================================ górny pasek i menu boczne */

.fi-topbar {
    min-height: 3.5rem;
    background: var(--dh-surface);
    box-shadow: none;
    border-bottom: 1px solid var(--dh-border);
}

.fi-sidebar-header {
    height: 3.5rem;
    background: var(--dh-surface);
    border-bottom: 1px solid var(--dh-border);
    box-shadow: none;
}

.fi-sidebar {
    background: var(--dh-surface);
    border-inline-end: 1px solid var(--dh-border);
}

/*
 * Jedna siatka dla menu rozwiniętego i zwiniętego (4rem): margines 0.75rem + wcięcie 0.5rem + ikona 1.5rem,
 * więc środek ikony wypada zawsze 2rem od krawędzi — dokładnie w osi zwiniętego menu. Wiersz nazwy sekcji
 * ma stałą wysokość także po zwinięciu (zostaje pusty), dlatego ikony nie przeskakują w pionie.
 */
.fi-sidebar-nav,
.fi-body .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
    padding: 0.75rem 0.75rem !important;
    gap: 0;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
}

.fi-sidebar-nav-groups,
.fi-body .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
    width: auto !important;
    margin-inline: 0;
    gap: 0;
}

.fi-sidebar-group,
.fi-sidebar-group-items {
    gap: 2px;
}

.fi-sidebar-group { position: relative; }

.fi-sidebar-group:has(> .fi-sidebar-group-btn) {
    position: relative;
    padding-top: 2.4rem;
}

/* Delikatna linia między sekcjami — w obu stanach menu w tym samym miejscu. */
.fi-sidebar-group + .fi-sidebar-group {
    margin-top: 0.6rem;
}
.fi-sidebar-group + .fi-sidebar-group::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.5rem;
    right: 0.5rem;
    height: 1px;
    background: var(--dh-border);
}
.dark .fi-sidebar-group + .fi-sidebar-group::before { background: rgba(255, 255, 255, 0.07); }

.fi-sidebar-group-btn {
    position: absolute;
    top: 0.55rem;
    left: 0;
    right: 0;
    height: 1.6rem;
    padding: 0 0.5rem;
    gap: 0;
}

.fi-sidebar-group-label {
    font-size: 0.7rem;
    line-height: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dh-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fi-sidebar-item-btn {
    justify-content: flex-start;
    gap: 0.7rem;
    height: 2.5rem;
    min-height: 0;
    padding: 0 0.5rem;
    border-radius: 8px;
    font-size: 0.93rem;
    color: var(--dh-text);
}

.fi-sidebar-item-btn > .fi-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.fi-sidebar-item-label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fi-sidebar-item-btn:hover {
    background: var(--dh-hover);
}

.fi-sidebar-item-icon {
    color: var(--dh-muted);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: var(--dh-accent-soft);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--dh-accent-text);
    font-weight: 600;
}

/* ================================================================ strona */

.fi-main {
    padding-inline: 1.5rem;
}

.fi-page-header-main-ctn {
    padding-block: 1.25rem 1rem;
    row-gap: 1rem;
}

.fi-page-main {
    gap: 1.25rem;
}

.fi-header {
    gap: 0.75rem;
}

.fi-header-heading {
    font-size: 1.4rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--dh-text);
}

.fi-header-subheading {
    font-size: 0.93rem;
    color: var(--dh-muted);
}

.fi-breadcrumbs {
    font-size: 0.82rem;
}

/* Linki w treści = kolor akcentu */
.fi-link,
.fi-ta-text-item a,
.fi-in-text-item a,
.dh-table a {
    color: var(--dh-accent-text);
}

.fi-link:hover,
.dh-table a:hover {
    color: var(--dh-accent-hover);
}

/* ================================================================ karty, sekcje, tabele: płasko, cienka ramka */

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-in-repeatable-item,
.fi-ta-record,
.fi-fo-repeater-item {
    background: var(--dh-surface);
    border-radius: var(--dh-radius);
    box-shadow: 0 0 0 1px var(--dh-border);
}

.fi-section-header {
    padding: 0.85rem 1.1rem;
}

.fi-section-header-heading {
    font-size: 1rem;
    font-weight: 600;
}

.fi-section-header-description {
    font-size: 0.86rem;
    color: var(--dh-muted);
}

.fi-section-content-ctn {
    border-color: var(--dh-border);
}

.fi-section-content {
    padding: 1.1rem;
}

/* --- tabele */

.fi-ta-header-toolbar {
    padding: 0.6rem 0.85rem;
    gap: 0.6rem;
    border-color: var(--dh-border);
}

.fi-ta-table {
    border-collapse: separate;
    border-spacing: 0;
}

.fi-ta-table > thead > tr {
    background: var(--dh-surface-2);
}

.fi-ta-header-cell {
    padding-block: 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dh-muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--dh-border);
}

.fi-ta-header-cell-sort-btn {
    gap: 0.3rem;
    color: inherit;
}

.fi-ta-header-cell-sorted {
    color: var(--dh-text);
}

.fi-ta-row {
    transition: background-color 0.1s ease;
}

.fi-ta-row:hover {
    background: var(--dh-hover);
}

.fi-ta-row + .fi-ta-row > td,
.fi-ta-table > tbody > tr:not(:first-child) > td {
    border-top-color: var(--dh-border);
}

.fi-ta-text:not(.fi-inline),
.fi-ta-image:not(.fi-inline),
.fi-ta-icon:not(.fi-inline),
.fi-ta-select:not(.fi-inline),
.fi-ta-toggle:not(.fi-inline) {
    padding-block: 0.65rem;
}

.fi-ta-text-description {
    font-size: 0.82rem;
    color: var(--dh-muted);
}

.fi-ta-image img {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--dh-border);
}

.fi-pagination {
    padding: 0.6rem 0.85rem;
}


/* --- siatka miniatur */

.fi-ta-content-grid {
    gap: 0.85rem;
    padding: 0.85rem;
}

/* Karta: miniatura → tytuł → opis; na dole w jednym rzędzie status (lewo) i akcje (prawo).
   Pole zaznaczenia w prawym górnym rogu miniatury. Wszystkie karty mają równą wysokość. */
.fi-ta-content-grid .fi-ta-record {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 !important;
    overflow: hidden;
    transition: box-shadow 0.12s ease;
}

.fi-ta-content-grid .fi-ta-record:hover {
    box-shadow: 0 0 0 1px var(--dh-border-strong), var(--dh-shadow-pop);
}

.fi-ta-content-grid .fi-ta-record:has(.fi-ta-record-checkbox:checked) {
    box-shadow: 0 0 0 2px var(--dh-accent);
}

.fi-ta-content-grid .fi-ta-record-checkbox {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 3;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.22), 0 1px 4px rgba(15, 23, 42, 0.18);
    cursor: pointer;
}

/* Białe tło tylko dla pustego pola — zaznaczone zachowuje kolor i znak ✓ z Filamenta. */
.fi-ta-content-grid .fi-ta-record-checkbox:not(:checked) {
    background-color: #fff;
}

.fi-ta-content-grid .fi-ta-record-checkbox:checked {
    background-color: var(--dh-accent);
    box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(15, 23, 42, 0.25);
}

.fi-ta-content-grid .fi-ta-record-content-ctn {
    flex: 1;
    padding: 0.75rem 0.75rem 0;
    row-gap: 0;
}

.fi-ta-content-grid .fi-ta-record-content {
    padding: 0 !important;
}

.fi-ta-content-grid .fi-ta-stack {
    gap: 0.2rem;
}

/* Miniatura na „stole”: kartka A4 z lekkim cieniem na jasnym tle, od krawędzi do krawędzi karty.
   Każda karta ma tę samą ramkę: stała wysokość kartki A4, wyśrodkowana — niezależnie od proporcji
   zdjęcia i od tego, czy jest miniatura, czy ikona typu pliku. Kolumna z miniaturą zajmuje całą
   szerokość karty (bez tego dopasowywała się do obrazka, a obrazek do niej — stąd różne rozmiary). */
.fi-ta-content-grid .fi-ta-record-content,
.fi-ta-content-grid .fi-ta-record-content > .fi-grid-col,
.fi-ta-content-grid .fi-ta-stack {
    width: 100%;
    min-width: 0;
}
.fi-ta-content-grid .fi-ta-stack > .fi-ta-col:has(> .dh-grid-thumb) {
    align-self: stretch;
    width: 100%;
}

.dh-grid-thumb {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: calc(100% + 1.5rem) !important;
    box-sizing: border-box;
    height: 14rem;
    margin: -0.75rem -0.75rem 0.65rem;
    padding: 1rem;
    background: var(--dh-surface-2);
    border-bottom: 1px solid var(--dh-border);
    overflow: hidden;
}

.dh-grid-thumb img.dh-thumb {
    display: block;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    aspect-ratio: 210 / 297;
    margin: 0 auto;
}
/* Długie nazwy bez spacji (np. Setup_ROTENSO_VRF_…) łamią się zamiast wychodzić poza kartę. */
.fi-ta-content-grid .fi-ta-text-item,
.fi-ta-cell .fi-ta-text-item {
    overflow-wrap: anywhere;
}

.fi-ta-content-grid .fi-ta-actions {
    margin-top: auto;
    justify-content: flex-end !important;
    min-height: 2.75rem;
    padding: 0.35rem 0.45rem 0.45rem !important;
}

.fi-ta-content-grid .dh-grid-badge {
    position: absolute;
    left: 0.75rem;
    bottom: 0.85rem;
    z-index: 2;
    width: auto !important;
}

/* ================================================================ filtry w nagłówkach kolumn */

.dh-hf {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.dh-hf .fi-dropdown {
    display: inline-flex;
}

.dh-hf-btn {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 4px;
    color: var(--dh-muted);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease;
}

.dh-hf-btn svg {
    width: 0.8rem;
    height: 0.8rem;
}

.fi-ta-header-cell:hover .dh-hf-btn,
.dh-hf-btn:focus-visible {
    opacity: 1;
}

.dh-hf-btn:hover {
    background: var(--dh-hover);
    color: var(--dh-text);
}

.dh-hf.is-active .dh-hf-label {
    color: var(--dh-accent-text);
}

.dh-hf.is-active .dh-hf-btn {
    opacity: 1;
    color: #fff;
    background: var(--dh-accent);
}

.dh-hf-menu {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.35rem;
    min-width: 13rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.dh-hf-title {
    padding: 0.35rem 0.55rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dh-muted);
}

.dh-hf-search {
    margin: 0 0.25rem 0.35rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.88rem;
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius-sm);
    background: var(--dh-surface);
    color: var(--dh-text);
    outline: none;
}

.dh-hf-search:focus {
    border-color: var(--dh-accent);
    box-shadow: 0 0 0 3px var(--dh-accent-soft);
}

.dh-hf-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border-radius: 5px;
    font-size: 0.9rem;
    text-align: start;
    color: var(--dh-text);
    cursor: pointer;
}

.dh-hf-opt:hover {
    background: var(--dh-hover);
}

.dh-hf-opt.is-selected {
    color: var(--dh-accent-text);
    font-weight: 600;
}

.dh-hf-opt.is-selected::after {
    content: '';
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- pasek filtrów nad siatką: „Typ: Wszystkie ▾” */

.dh-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--dh-border);
}

.dh-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 2rem;
    padding: 0 0.6rem 0 0.75rem;
    border-radius: 999px;
    font-size: 0.86rem;
    color: var(--dh-text);
    background: var(--dh-surface);
    box-shadow: 0 0 0 1px var(--dh-border-strong);
    cursor: pointer;
    transition: background-color 0.1s ease, box-shadow 0.1s ease;
}

.dh-chip:hover {
    background: var(--dh-hover);
}

.dh-chip-label {
    color: var(--dh-muted);
}

.dh-chip-value {
    font-weight: 500;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dh-chip svg {
    width: 1rem;
    height: 1rem;
    color: var(--dh-muted);
}

.dh-chip.is-active {
    background: var(--dh-accent-soft);
    box-shadow: 0 0 0 1px var(--dh-accent);
}

.dh-chip.is-active .dh-chip-value,
.dh-chip.is-active svg {
    color: var(--dh-accent-text);
}

/* Kolumny tylko do sortowania siatki — nie pokazujemy ich w karcie. */
.fi-ta-content-grid .fi-grid-col:has(> .dh-sort-only),
.dh-sort-only {
    display: none !important;
}

.fi-ta-sorting-settings .fi-input-wrp {
    min-width: 15rem;
}

/* ================================================================ zakładki = przełącznik segmentowy */

.fi-tabs {
    padding: 0.2rem;
    gap: 0.15rem;
    border-radius: 8px;
    background: var(--dh-surface-2);
    box-shadow: 0 0 0 1px var(--dh-border);
}

.fi-tabs-item {
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--dh-muted);
}

.fi-tabs-item:hover {
    color: var(--dh-text);
}

.fi-tabs-item.fi-active {
    background: var(--dh-surface);
    color: var(--dh-text);
    box-shadow: 0 0 0 1px var(--dh-border), 0 1px 2px rgba(16, 24, 40, 0.06);
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon {
    color: var(--dh-accent-text);
}

/* ================================================================ formularze, przyciski, odznaki */

.fi-btn {
    border-radius: var(--dh-radius-sm);
    font-weight: 500;
}

/* Główne przyciski w kolorze marki z białym tekstem (Filament sam rozjaśnia kolor, szukając kontrastu). */
.fi-btn.fi-color-primary:not(.fi-outlined) {
    --bg: var(--dh-accent) !important;
    --text: #fff !important;
    --hover-bg: var(--dh-accent-hover) !important;
    --hover-text: #fff !important;
    --dark-bg: var(--dh-accent) !important;
    --dark-text: #fff !important;
    --dark-hover-bg: var(--dh-accent-hover) !important;
    --dark-hover-text: #fff !important;
    font-weight: 600;
}

.fi-input-wrp {
    border-radius: var(--dh-radius-sm);
    background: var(--dh-surface);
    box-shadow: 0 0 0 1px var(--dh-border-strong);
}

.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 1px var(--dh-accent), 0 0 0 4px var(--dh-accent-soft);
}

.fi-fo-field-label-content {
    font-weight: 500;
}

.fi-badge {
    border-radius: 5px;
    font-weight: 500;
}

/* ================================================================ okna, menu rozwijane, powiadomienia */

.fi-dropdown-panel,
.fi-modal-window {
    background: var(--dh-surface);
    box-shadow: 0 0 0 1px var(--dh-border), var(--dh-shadow-pop);
}

.fi-dropdown-panel {
    border-radius: 8px;
}

.fi-modal-window {
    border-radius: 12px;
}

.fi-modal-heading {
    font-size: 1.1rem;
    font-weight: 600;
}

.fi-dropdown-list-item:hover {
    background: var(--dh-hover);
}

.fi-no-notification {
    border-radius: 10px;
}

/* ================================================================ widżety */

.fi-wi-stats-overview-stats-ctn {
    gap: 0.85rem;
}

.fi-wi-stats-overview-stat {
    padding: 1rem 1.1rem;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--dh-muted);
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.6rem;
    font-weight: 600;
    margin-top: 0.15rem;
    color: var(--dh-text);
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.82rem;
}

a.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 0 0 1px var(--dh-accent);
}

.fi-wi {
    gap: 1.25rem;
}

/* ================================================================ marka i zalogowana osoba */

.dh-brand-logo {
    height: 1.9rem;
    width: auto;
    max-width: 12.5rem;
    object-fit: contain;
}

.dh-logo-dark { display: none; }
.dark .dh-logo-light { display: none; }
.dark .dh-logo-dark { display: inline-block; }

.dh-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    white-space: nowrap;
}

.dh-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background: var(--dh-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.dh-brand-name {
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--dh-text);
}

.dh-user-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    margin-inline-end: -0.6rem;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    max-width: 15rem;
    text-align: end;
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.dh-user-chip:hover { background: rgba(15, 23, 42, 0.05); }
.dark .dh-user-chip:hover { background: rgba(255, 255, 255, 0.05); }
.dh-user-chip:focus-visible { outline: 2px solid var(--dh-accent); outline-offset: 1px; }

.dh-user-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dh-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dh-user-role {
    font-size: 0.76rem;
    color: var(--dh-muted);
}

@media (max-width: 767px) {
    .dh-user-chip { display: none; }
}

/* ================================================================ statystyki: zestawienia */

.dh-breakdown {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
}

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

.dh-table th {
    text-align: start;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dh-muted);
    padding: 0 0.6rem 0.5rem 0;
}

.dh-table td {
    padding: 0.5rem 0.6rem 0.5rem 0;
    border-top: 1px solid var(--dh-border);
}

.dh-table a {
    font-weight: 500;
}

.dh-num {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dh-bar-col {
    width: 28%;
}

.dh-bar {
    display: block;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--dh-accent);
}

.dh-muted { color: var(--dh-muted); }
.dh-warn { color: #b45309; font-weight: 600; }
.dark .dh-warn { color: #f5b14c; }

/* ================================================================ kopie zapasowe */

.dh-backups {
    display: grid;
    gap: 1.25rem;
}

.dh-backup-facts {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.dh-backup-facts > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dh-backup-facts span {
    font-size: 0.82rem;
}

.dh-backup-facts strong {
    font-size: 1.05rem;
    font-weight: 600;
}

.dh-backup-status {
    margin-top: 1rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--dh-radius-sm);
    font-weight: 500;
    background: var(--dh-surface-2);
}

.dh-backup-queued,
.dh-backup-running { color: var(--dh-accent-text); background: var(--dh-accent-soft); }
.dh-backup-done { color: #047857; }
.dark .dh-backup-done { color: #4ade80; }
.dh-backup-failed { color: #be123c; }
.dark .dh-backup-failed { color: #fb7185; }

.dh-backup-note {
    margin-top: 0.85rem;
    font-size: 0.86rem;
}

.dh-backups code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.82rem;
}

.dh-steps {
    margin: 0;
    padding-left: 1.25rem;
    list-style: decimal;
    display: grid;
    gap: 0.6rem;
    line-height: 1.55;
}

.dh-steps pre {
    margin: 0.4rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: var(--dh-radius-sm);
    background: var(--dh-surface-2);
    box-shadow: 0 0 0 1px var(--dh-border);
    font: 0.84rem/1.5 ui-monospace, Consolas, monospace;
    overflow-x: auto;
}

.dh-steps + p {
    margin-top: 0.85rem;
    font-size: 0.86rem;
}

.dh-table td .fi-link + .fi-link {
    margin-inline-start: 0.85rem;
}

/* ================================================================ ekran logowania */

.fi-simple-layout {
    background: var(--dh-canvas);
}

.fi-simple-main {
    background: var(--dh-surface);
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--dh-border), 0 12px 32px rgba(16, 24, 40, 0.07);
    max-width: 25rem;
}

.fi-simple-header .dh-brand-logo {
    height: 2.4rem;
}

.fi-simple-header-heading {
    font-size: 1.3rem;
    font-weight: 600;
}

/* Miniatura PDF w trakcie generowania w przeglądarce */
img[data-pdf-thumb].dh-rendering {
    opacity: 0.55;
    animation: dh-pulse 1.2s ease-in-out infinite;
}

@keyframes dh-pulse {
    50% { opacity: 0.25; }
}

/* ================================================================ wspólne: kod, linki, statusy */

.dh-link { color: var(--dh-accent-text); font-weight: 500; }
.dh-link:hover { text-decoration: underline; }

.dh-code {
    font: 0.86em/1.4 ui-monospace, "Cascadia Code", Consolas, monospace;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: var(--dh-surface-2);
    box-shadow: 0 0 0 1px var(--dh-border);
    overflow-wrap: anywhere;
}

.dh-pre {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: var(--dh-radius-sm);
    background: #16181c;
    color: #e4e6ea;
    font: 0.82rem/1.55 ui-monospace, "Cascadia Code", Consolas, monospace;
    white-space: pre;
    overflow: auto;
    max-height: 26rem;
}
.dark .dh-pre { background: #0e0f11; box-shadow: 0 0 0 1px var(--dh-border); }

.dh-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font: 600 0.72rem/1.5 ui-monospace, Consolas, monospace;
    letter-spacing: 0.02em;
}
.dh-method-get { color: #0b6bcb; background: rgba(44, 131, 245, 0.12); }
.dh-method-post { color: #047857; background: rgba(16, 185, 129, 0.13); }
.dh-method-patch, .dh-method-put { color: #a16207; background: rgba(234, 179, 8, 0.16); }
.dh-method-delete { color: #be123c; background: rgba(244, 63, 94, 0.12); }
.dark .dh-method-get { color: #79b4ff; }
.dark .dh-method-post { color: #4ade80; }
.dark .dh-method-patch, .dark .dh-method-put { color: #facc15; }
.dark .dh-method-delete { color: #fb7185; }

.dh-status {
    display: inline-flex;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font: 600 0.78rem/1.5 ui-monospace, Consolas, monospace;
    white-space: nowrap;
}
.dh-status-ok { color: #047857; background: rgba(16, 185, 129, 0.13); }
.dh-status-err { color: #be123c; background: rgba(244, 63, 94, 0.12); }
.dark .dh-status-ok { color: #4ade80; }
.dark .dh-status-err { color: #fb7185; }

/* ================================================================ nowy klucz API */

.dh-key { display: grid; gap: 0.75rem; text-align: start; }

.dh-key-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--dh-radius-sm);
    background: var(--dh-surface-2);
    box-shadow: 0 0 0 1px var(--dh-border);
}
.dh-key-meta dt { font-size: 0.8rem; color: var(--dh-muted); }
.dh-key-meta dd { font-weight: 600; overflow-wrap: anywhere; }

.dh-key-label { font-weight: 600; font-size: 0.9rem; margin-top: 0.25rem; }

.dh-key-field { display: flex; gap: 0.5rem; }
.dh-key-field input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.7rem;
    border-radius: var(--dh-radius-sm);
    border: 1px solid var(--dh-border-strong);
    background: var(--dh-surface);
    color: var(--dh-text);
    font: 0.9rem/1.4 ui-monospace, "Cascadia Code", Consolas, monospace;
}
.dh-key-field input:focus { outline: 2px solid var(--dh-accent); outline-offset: -1px; }

.dh-key-warn {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.86rem;
    color: #a16207;
}
.dark .dh-key-warn { color: #facc15; }
.dh-key-warn-icon { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.1rem; }

.dh-key-postman {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0.95rem;
    border-radius: var(--dh-radius-sm);
    background: var(--dh-accent-soft);
}
.dh-key-postman p { margin-top: 0.2rem; font-size: 0.86rem; color: var(--dh-muted); }
.dh-key-postman .fi-btn { flex: none; }
.dh-key-docs { font-size: 0.86rem; color: var(--dh-muted); }
.dh-key-docs a { color: var(--dh-accent-text); font-weight: 500; }

@media (max-width: 640px) {
    .dh-key-meta { grid-template-columns: 1fr; }
    .dh-key-postman { flex-direction: column; align-items: stretch; }
}

/* ================================================================ dokumentacja API */

.dh-api {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr) 24rem;
    align-items: start;
}
.dh-api-main { display: grid; gap: 1rem; min-width: 0; }
.dh-api-side { position: sticky; top: 4.75rem; min-width: 0; }

@media (max-width: 1180px) {
    .dh-api { grid-template-columns: minmax(0, 1fr); }
    .dh-api-side { position: static; order: -1; }
}

.dh-api-start {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.dh-api-start li {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: var(--dh-radius);
    background: var(--dh-surface);
    box-shadow: 0 0 0 1px var(--dh-border);
}
.dh-api-start p { margin-top: 0.2rem; font-size: 0.86rem; color: var(--dh-muted); line-height: 1.5; }
.dh-api-step {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--dh-accent-soft);
    color: var(--dh-accent-text);
    font-weight: 700;
    font-size: 0.85rem;
}
@media (max-width: 900px) { .dh-api-start { grid-template-columns: 1fr; } }

.dh-api-basics { display: grid; gap: 0.7rem; }
.dh-api-basics > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.75rem; line-height: 1.7; }
.dh-api-basics dt { font-weight: 600; }
@media (max-width: 640px) { .dh-api-basics > div { grid-template-columns: 1fr; gap: 0.15rem; } }

.dh-api-subhead { margin: 1.1rem 0 0.4rem; font-weight: 600; }
.dh-api-note { margin-top: 0.75rem; font-size: 0.86rem; color: var(--dh-muted); line-height: 1.7; }

.dh-api-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.dh-api-table th {
    text-align: start;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dh-muted);
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--dh-border);
}
.dh-api-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--dh-border); vertical-align: top; line-height: 1.5; }
.dh-api-table tr:last-child td { border-bottom: 0; }
.dh-api-table td:first-child { white-space: nowrap; width: 1%; }
.dh-api-table td.dh-muted { white-space: nowrap; width: 1%; }
@media (max-width: 760px) { .dh-api-table td.dh-muted, .dh-api-table td:first-child { white-space: normal; } }

.dh-api-toc { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dh-api-toc a {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.25rem 0.65rem 0.25rem 0.3rem;
    border-radius: 999px;
    background: var(--dh-surface);
    box-shadow: 0 0 0 1px var(--dh-border);
    font-size: 0.84rem;
}
.dh-api-toc a:hover { background: var(--dh-hover); }
.dh-api-toc .dh-method { min-width: 0; border-radius: 999px; }

.dh-api-group { margin-top: 0.75rem; font-size: 1.05rem; font-weight: 600; }

.dh-ep {
    scroll-margin-top: 5rem;
    padding: 1rem 1.1rem 1.1rem;
    border-radius: var(--dh-radius);
    background: var(--dh-surface);
    box-shadow: 0 0 0 1px var(--dh-border);
    display: grid;
    gap: 0.6rem;
    min-width: 0;
}
.dh-ep:target { box-shadow: 0 0 0 2px var(--dh-accent); }
.dh-ep-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.dh-ep-path { font: 600 0.9rem/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; min-width: 0; }
.dh-ep-ability {
    font-size: 0.75rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    color: var(--dh-muted);
    box-shadow: 0 0 0 1px var(--dh-border);
}
.dh-ep-try { margin-inline-start: auto; }
.dh-ep-title { font-weight: 600; font-size: 1rem; }
.dh-ep-desc { line-height: 1.6; font-size: 0.92rem; }
.dh-ep-desc.dh-muted { color: var(--dh-muted); font-size: 0.86rem; }
.dh-req { color: #e11d48; margin-inline-start: 0.15rem; }

.dh-ep-examples { display: grid; min-width: 0; }
.dh-ep-tabs { display: flex; gap: 0.15rem; align-items: center; margin-bottom: 0.35rem; }
.dh-ep-tabs button {
    padding: 0.25rem 0.6rem;
    border-radius: var(--dh-radius-sm);
    font-size: 0.82rem;
    color: var(--dh-muted);
}
.dh-ep-tabs button:hover { background: var(--dh-hover); color: var(--dh-text); }
.dh-ep-tabs button.is-active { background: var(--dh-accent-soft); color: var(--dh-accent-text); font-weight: 600; }
.dh-ep-tabs .dh-ep-copy { margin-inline-start: auto; }

/* --- konsola „Wypróbuj” */

.dh-console {
    border-radius: var(--dh-radius);
    background: var(--dh-surface);
    box-shadow: 0 0 0 1px var(--dh-border);
    overflow: hidden;
}
.dh-console-head {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--dh-border);
}
.dh-console-head h2 { font-weight: 600; font-size: 1rem; }
.dh-console-head p { font-size: 0.82rem; color: var(--dh-muted); }
.dh-console-icon { width: 1.5rem; height: 1.5rem; color: var(--dh-accent); }

.dh-console-body { display: grid; gap: 0.4rem; padding: 0.9rem 1rem 1rem; }
.dh-console-label { font-weight: 600; font-size: 0.84rem; margin-top: 0.35rem; }
.dh-console-label:first-child { margin-top: 0; }

.dh-console input:not([type=checkbox]):not([type=file]),
.dh-console select,
.dh-console textarea {
    width: 100%;
    min-width: 0;
    padding: 0.42rem 0.6rem;
    border-radius: var(--dh-radius-sm);
    border: 1px solid var(--dh-border-strong);
    background: var(--dh-surface);
    color: var(--dh-text);
    font: 0.86rem/1.45 ui-monospace, "Cascadia Code", Consolas, monospace;
}
.dh-console input:focus, .dh-console select:focus, .dh-console textarea:focus { outline: 2px solid var(--dh-accent); outline-offset: -1px; }
.dh-console textarea { resize: vertical; }

.dh-console-key { display: flex; gap: 0.35rem; }
.dh-console-key button {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.2rem;
    border-radius: var(--dh-radius-sm);
    border: 1px solid var(--dh-border-strong);
    color: var(--dh-muted);
}
.dh-console-key button:hover { background: var(--dh-hover); color: var(--dh-text); }
.dh-console-key svg { width: 1.1rem; height: 1.1rem; }

.dh-console-check { display: flex; gap: 0.45rem; align-items: center; font-size: 0.82rem; color: var(--dh-muted); }

.dh-console-line { display: flex; gap: 0.35rem; }
.dh-console-line select { width: 6rem !important; flex: none; font-weight: 600; }
.dh-console-url { font: 0.76rem/1.4 ui-monospace, Consolas, monospace; color: var(--dh-muted); overflow-wrap: anywhere; }
.dh-console-file { font-size: 0.84rem; color: var(--dh-muted); max-width: 100%; }

.dh-console-warn {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #a16207;
}
.dark .dh-console-warn { color: #facc15; }
.dh-console-warn svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.1rem; }

.dh-console-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

.dh-console-result { border-top: 1px solid var(--dh-border); padding: 0.8rem 1rem 1rem; display: grid; gap: 0.5rem; }
.dh-console-status { display: flex; gap: 0.6rem; align-items: center; font-size: 0.82rem; }
.dh-console-hint { font-size: 0.84rem; }
.dh-console-out { max-height: 22rem; }

.dh-hf-menu .dh-hf-search { margin-bottom: 0.4rem; }

/* ================================================================ dziennik zdarzeń */

/* Szczegóły wpisu — patrz sekcja „dziennik” na końcu pliku. */


/* --- pole wyszukiwania w pasku filtrów siatki */

.dh-bar-search {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 16rem;
    max-width: 22rem;
    padding: 0 0.6rem;
    border-radius: 999px;
    background: var(--dh-surface);
    box-shadow: 0 0 0 1px var(--dh-border-strong);
}
.dh-bar-search:focus-within { box-shadow: 0 0 0 2px var(--dh-accent); }
.dh-bar-search.is-active { background: var(--dh-accent-soft); box-shadow: 0 0 0 1px var(--dh-accent); }
.dh-bar-search svg { width: 1rem; height: 1rem; flex: none; color: var(--dh-muted); }
.dh-bar-search input {
    flex: 1;
    min-width: 0;
    padding: 0.38rem 0;
    border: 0;
    background: transparent;
    color: var(--dh-text);
    font-size: 0.88rem;
    outline: none;
    box-shadow: none;
}

/* ================================================================ zwijanie menu (dół menu, Ctrl+]) */

.fi-topbar-collapse-sidebar-btn-ctn { display: none !important; }

/* Ta sama siatka co pozycje menu: ikona 2rem od krawędzi w obu stanach. */
.dh-sidebar-foot {
    margin-top: auto;
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--dh-border);
}

.dh-sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    height: 2.5rem;
    padding: 0 0.5rem;
    border-radius: 8px;
    color: var(--dh-muted);
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.dh-sidebar-toggle:hover { background: var(--dh-hover); color: var(--dh-text); }
.dh-sidebar-toggle svg { width: 1.5rem; height: 1.5rem; padding: 0.125rem; flex: none; transition: transform 0.15s ease; }
.dh-sidebar-toggle[aria-expanded=false] svg { transform: rotate(180deg); }
.dh-sidebar-toggle-label { flex: 1; text-align: start; }
.dh-sidebar-toggle kbd {
    font: 500 0.7rem/1 ui-monospace, Consolas, monospace;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--dh-border-strong);
    color: var(--dh-muted);
}

@media (max-width: 1023px) {
    .dh-sidebar-foot { display: none; }
}

/* ================================================================ miniatury: ramka A4 (210 × 297) wszędzie */

img.dh-thumb {
    aspect-ratio: 210 / 297;
    object-fit: cover;
    object-position: top center;
    background: #fff;
    border-radius: 3px !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(15, 23, 42, 0.12) !important;
}
img.dh-thumb-photo { object-position: center; }
img.dh-thumb-icon { object-fit: contain; box-shadow: none !important; background: transparent; }
.dark img.dh-thumb { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.5) !important; }
.dark img.dh-thumb-icon { box-shadow: none !important; }
img.dh-thumb.dh-rendering { opacity: 0.55; }

/* Podgląd w formularzu pliku: duża kartka A4, wyśrodkowana. */
.dh-preview { display: flex; justify-content: center; padding: 0.75rem 0; background: var(--dh-surface-2); border-radius: var(--dh-radius-sm); }
.dh-preview img.dh-thumb { height: 22rem !important; width: auto !important; max-width: 100%; }

/* ================================================================ RAMA: obszar roboczy + okno + pasek stanu
   Na komputerze: tło (obszar roboczy) z paskiem górnym i menu, treść w jednym zaokrąglonym oknie
   z własnym przewijaniem, pod oknem stały pasek stanu. Przyciski formularzy na dolnej belce okna. */

:root {
    --dh-canvas: #eceef1;
    --dh-topbar-h: 3.5rem;
    --dh-statusbar-h: 2.25rem;
}
:root.dark,
.dark {
    --dh-canvas: #0f1012;
}

body.fi-body { background: var(--dh-canvas); }

.fi-topbar,
.fi-topbar-ctn .fi-topbar {
    background: var(--dh-canvas) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.fi-sidebar,
.fi-sidebar-header {
    background: var(--dh-canvas) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fi-sidebar-item-btn:hover { background: rgba(15, 23, 42, 0.05); }
.dark .fi-sidebar-item-btn:hover { background: rgba(255, 255, 255, 0.05); }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn { background: var(--dh-surface); box-shadow: 0 0 0 1px var(--dh-border); }
.dh-sidebar-foot { border-top: 0; }

@media (min-width: 1024px) {
    html, body.fi-body { height: 100%; overflow: hidden; }

    .fi-layout { height: calc(100dvh - var(--dh-topbar-h)); }

    .fi-main-ctn {
        display: flex;
        flex-direction: column;
        height: calc(100dvh - var(--dh-topbar-h));
        min-height: 0;
        padding-inline-end: 0.75rem;
        overflow: hidden;
    }

    .fi-main {
        flex: 1;
        min-height: 0;
        width: 100%;
        max-width: none !important;
        margin: 0;
        padding: 0 1.75rem !important;
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--dh-surface);
        border: 1px solid var(--dh-border);
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
        scrollbar-gutter: stable;
    }
    .dark .fi-main { box-shadow: none; }

    .fi-sidebar { height: calc(100dvh - var(--dh-topbar-h)) !important; top: var(--dh-topbar-h) !important; }
}

/* Karty wewnątrz okna: na białym tle okna lekko szare nagłówki, cienka ramka. */
.fi-main .fi-section:not(.fi-section-not-contained),
.fi-main .fi-ta-ctn,
.fi-main .fi-wi-stats-overview-stat {
    box-shadow: 0 0 0 1px var(--dh-border);
}

/* --- pasek stanu pod oknem */

.dh-statusbar {
    flex: none;
    height: var(--dh-statusbar-h);
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 0 0.35rem;
    font-size: 0.8rem;
    color: var(--dh-muted);
    white-space: nowrap;
    overflow: hidden;
}

.dh-status-item { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
a.dh-status-item:hover { color: var(--dh-text); }
.dh-status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dh-muted); flex: none; }
.dh-tone-ok .dh-status-dot { background: #16a34a; }
.dh-tone-warn .dh-status-dot { background: #d97706; }
.dh-tone-alert .dh-status-dot { background: #dc2626; }
.dh-tone-alert { color: #b91c1c; }
.dark .dh-tone-alert { color: #f87171; }
.dh-status-label { font-weight: 500; color: inherit; }
.dh-tone-ok .dh-status-label, .dh-tone-warn .dh-status-label { color: var(--dh-text); }
.dh-status-hint { overflow: hidden; text-overflow: ellipsis; }
.dh-status-spacer { flex: 1; }

@media (max-width: 1023px) {
    .dh-statusbar { display: none; }
}

/* Okna dialogowe: zatwierdzenie po prawej, anulowanie po lewej (poza oknami potwierdzeń wyśrodkowanymi). */
.fi-modal-footer:not(.fi-align-center) .fi-modal-footer-actions {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
}
.fi-modal-footer:not(.fi-align-center) .fi-modal-footer-actions > :only-child { margin-inline-start: auto; }


/* ================================================================ pasek nad listą plików: zbiory + układ */

.dh-list-toolbar { display: grid; gap: 0; }
.dh-list-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
}
.dh-list-toolbar-filters { border-top: 1px solid var(--dh-border); padding-block: 0.55rem; }
.dh-list-toolbar-filters .dh-filter-bar { padding: 0; border: 0; background: none; width: 100%; }

.dh-views { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.dh-view {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2rem;
    padding: 0 0.7rem;
    border-radius: var(--dh-radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--dh-muted);
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}
.dh-view:hover { background: var(--dh-hover); color: var(--dh-text); }
.dh-view.is-active { background: var(--dh-accent-soft); color: var(--dh-accent-text); font-weight: 600; }
.dh-view-icon { width: 1.05rem; height: 1.05rem; }
.dh-view-count {
    min-width: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--dh-surface-2);
    box-shadow: 0 0 0 1px var(--dh-border);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: var(--dh-muted);
}
.dh-view.is-active .dh-view-count { background: var(--dh-accent); color: #fff; box-shadow: none; }
.dh-view-warning:not(.is-active) .dh-view-count { color: #a16207; }
.dh-view-danger:not(.is-active) .dh-view-count { color: #be123c; }
.dark .dh-view-warning:not(.is-active) .dh-view-count { color: #facc15; }
.dark .dh-view-danger:not(.is-active) .dh-view-count { color: #fb7185; }

.dh-layouts {
    display: inline-flex;
    padding: 2px;
    border-radius: var(--dh-radius-sm);
    background: var(--dh-surface-2);
    box-shadow: 0 0 0 1px var(--dh-border);
}
.dh-layout {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 1.75rem;
    border-radius: 4px;
    color: var(--dh-muted);
    cursor: pointer;
}
.dh-layout:hover { color: var(--dh-text); }
.dh-layout.is-active { background: var(--dh-surface); color: var(--dh-accent-text); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
.dh-layout svg { width: 1.1rem; height: 1.1rem; }

/* Komórka „Link”: kliknięcie kopiuje adres. */
.dh-copy-cell { cursor: copy; }
.dh-copy-cell:hover .fi-ta-text-item-label { color: var(--dh-accent-text); }

/* Wiersze z dużymi podglądami: treść wyrównana do góry kartki. */
.fi-ta-row .fi-ta-image img.dh-thumb { display: block; }

/* --- kod QR linku z tokenem */
.dh-qr { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border-radius: var(--dh-radius-sm); background: var(--dh-surface-2); box-shadow: 0 0 0 1px var(--dh-border); }
.dh-qr-code { flex: none; padding: 6px; background: #fff; border-radius: 6px; line-height: 0; }
.dh-qr-code svg { width: 132px; height: 132px; }
.dh-qr-actions { display: grid; gap: 0.5rem; font-size: 0.86rem; color: var(--dh-muted); }
.dh-qr-actions > div { display: flex; gap: 0.4rem; }


/* Lista plików: pasek zbiorów i narzędzia tabeli (kolumny, akcje zaznaczonych) w jednym rzędzie. */
.fi-ta-header-ctn:has(> .dh-list-toolbar) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}
.fi-ta-header-ctn:has(> .dh-list-toolbar) > .dh-list-toolbar { grid-column: 1; grid-row: 1; }
.fi-ta-header-ctn:has(> .dh-list-toolbar) > .fi-ta-header-toolbar {
    grid-column: 2;
    grid-row: 1;
    padding: 0.6rem 0.85rem 0.6rem 0;
    border: 0;
    gap: 0.5rem;
}
.fi-ta-header-ctn:has(> .dh-list-toolbar) > :not(.dh-list-toolbar):not(.fi-ta-header-toolbar) { grid-column: 1 / -1; }

/* Pod nazwą pliku: początek opisu. */
.dh-desc { display: block; }
.dh-desc { margin-top: 0.15rem; color: var(--dh-text); opacity: 0.75; }
.fi-ta-cell-link .fi-ta-text-item { white-space: nowrap; }

/* ================================================================ przyciski zapisu formularza
   Same przyciski na końcu formularza, po prawej: Anuluj, Zapisz. Część strony z wersjami, linkami
   i historią jest osobną kartą z nagłówkiem (.dh-related) — wyraźnie poza formularzem. */

.dh-action-bar {
    margin-top: 0.25rem;
    padding: 0.25rem 0 0.5rem;
}

.fi-section.dh-related {
    margin-top: 1.25rem;
    background: var(--dh-surface-2);
}
.fi-section.dh-related > .fi-section-header { border-bottom: 1px solid var(--dh-border); }
.fi-section.dh-related .fi-section-content { padding-top: 0.85rem; }
.fi-section.dh-related .fi-ta-ctn { background: var(--dh-surface); }

.dh-action-bar .fi-ac {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
}

/* ================================================================ pola wyszukiwania pod nagłówkami kolumn */

.fi-ta-individual-search-row,
.fi-ta-individual-search-row:hover { background: var(--dh-surface-2) !important; }
.fi-ta-individual-search-row > td { padding: 0.4rem 0.5rem !important; border-bottom: 1px solid var(--dh-border); }
.fi-ta-individual-search-cell .fi-input-wrp { box-shadow: 0 0 0 1px var(--dh-border-strong); background: var(--dh-surface); }
.fi-ta-individual-search-cell .fi-input-wrp:focus-within { box-shadow: 0 0 0 1px var(--dh-accent), 0 0 0 3px var(--dh-accent-soft); }
.fi-ta-individual-search-cell .fi-input { font-size: 0.88rem; padding-block: 0.35rem; }
.fi-ta-individual-search-cell:has(input:not(:placeholder-shown)) .fi-input-wrp {
    background: var(--dh-accent-soft);
    box-shadow: 0 0 0 1px var(--dh-accent);
}

/* ================================================================ osoba: zdjęcie obok imienia i adresu */

.dh-person { display: inline-flex; align-items: center; gap: 0.65rem; min-width: 0; }
.dh-person > img,
.dh-person-system {
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--dh-border);
}
.dh-person-system { display: grid; place-items: center; background: var(--dh-surface-2); color: var(--dh-muted); }
.dh-person-system svg { width: 1.05rem; height: 1.05rem; }
/* Imię i nazwisko zawsze w całości — komórka rośnie do szerokości tekstu (nie ucinamy do pierwszej litery). */
.dh-person-text { display: grid; min-width: max-content; line-height: 1.3; }
.dh-person-name { font-weight: 600; color: var(--dh-text); white-space: nowrap; }
.dh-person-mail { font-size: 0.82rem; color: var(--dh-muted); white-space: nowrap; }
.dh-person-sm > img, .dh-person-sm .dh-person-system { width: 1.75rem; height: 1.75rem; }
.dh-person-sm .dh-person-name { font-weight: 500; }

.dh-pill {
    flex: none;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--dh-muted);
    background: var(--dh-surface-2);
    box-shadow: 0 0 0 1px var(--dh-border);
}
.dh-pill-public { color: #047857; background: rgba(16, 185, 129, 0.1); box-shadow: none; }
.dh-pill-protected { color: #a16207; background: rgba(234, 179, 8, 0.14); box-shadow: none; }
.dh-pill-trash { color: #be123c; background: rgba(244, 63, 94, 0.1); box-shadow: none; }
.dark .dh-pill-public { color: #4ade80; }
.dark .dh-pill-protected { color: #facc15; }
.dark .dh-pill-trash { color: #fb7185; }

/* ================================================================ dziennik: szybkie filtry, lista, szczegóły */

.dh-quick { display: grid; gap: 0.5rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--dh-border); }
.dh-quick-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.dh-quick-label { width: 4.5rem; font-size: 0.78rem; font-weight: 600; color: var(--dh-muted); }
.dh-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 1.95rem;
    padding: 0 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dh-text);
    background: var(--dh-surface);
    box-shadow: 0 0 0 1px var(--dh-border);
    cursor: pointer;
    transition: background-color 0.1s ease, box-shadow 0.1s ease;
}
.dh-quick-btn:hover { background: var(--dh-hover); }
.dh-quick-btn.is-active { color: var(--dh-accent-text); background: var(--dh-accent-soft); box-shadow: 0 0 0 1px var(--dh-accent); font-weight: 600; }
.dh-quick-icon { width: 1rem; height: 1rem; color: var(--dh-muted); }
.dh-quick-btn.is-active .dh-quick-icon { color: inherit; }
.dh-quick-count { font-size: 0.74rem; color: var(--dh-muted); font-variant-numeric: tabular-nums; }
.dh-quick-btn.is-active .dh-quick-count { color: inherit; }
@media (max-width: 640px) { .dh-quick-label { width: 100%; } }

.dh-act-subject { display: block; font-weight: 600; color: var(--dh-text); }
.dh-act-summary { display: block; margin-top: 0.15rem; font-size: 0.82rem; color: var(--dh-muted); }
.dh-act-changes { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.dh-act-change {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--dh-surface-2);
    box-shadow: 0 0 0 1px var(--dh-border);
}
.dh-act-field { color: var(--dh-muted); font-weight: 500; }
.dh-act-change s { color: #be123c; text-decoration-color: rgba(190, 18, 60, 0.45); }
.dh-act-change b { color: #047857; font-weight: 600; }
.dark .dh-act-change s { color: #fb7185; }
.dark .dh-act-change b { color: #4ade80; }
.dh-act-arrow { color: var(--dh-muted); }
.dh-act-more { align-self: center; font-size: 0.78rem; color: var(--dh-muted); }

.dh-act { display: grid; gap: 1.25rem; }
.dh-act-hero { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; border-radius: var(--dh-radius); background: var(--dh-surface-2); box-shadow: 0 0 0 1px var(--dh-border); }
.dh-act-hero-icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: var(--dh-accent-text); background: var(--dh-accent-soft); }
.dh-act-hero-icon svg { width: 1.35rem; height: 1.35rem; }
.dh-tone-success .dh-act-hero-icon { color: #047857; background: rgba(16, 185, 129, 0.13); }
.dh-tone-danger .dh-act-hero-icon { color: #be123c; background: rgba(244, 63, 94, 0.12); }
.dh-tone-warning .dh-act-hero-icon { color: #a16207; background: rgba(234, 179, 8, 0.16); }
.dh-tone-gray .dh-act-hero-icon { color: var(--dh-muted); background: var(--dh-hover); }
.dh-act-hero-title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.dh-act-hero-sub { margin-top: 0.15rem; font-size: 0.82rem; color: var(--dh-muted); }

.dh-act-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dh-muted); }
.dh-act-count { padding: 0 0.4rem; border-radius: 999px; background: var(--dh-surface-2); box-shadow: 0 0 0 1px var(--dh-border); letter-spacing: 0; }

.dh-act-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem; border-radius: var(--dh-radius); background: var(--dh-surface); box-shadow: 0 0 0 1px var(--dh-border); transition: box-shadow 0.1s ease; }
a.dh-act-card:hover { box-shadow: 0 0 0 1px var(--dh-accent), var(--dh-shadow-pop); }
.dh-act-card-thumb { flex: none; width: 4.5rem; padding: 0.35rem; border-radius: 8px; background: var(--dh-surface-2); }
.dh-act-card-thumb img.dh-thumb { width: 100% !important; height: auto !important; display: block; }
.dh-act-card-avatar img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--dh-border); }
.dh-act-card-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 10px; background: var(--dh-surface-2); color: var(--dh-muted); }
.dh-act-card-icon svg { width: 1.4rem; height: 1.4rem; }
.dh-act-card-body { flex: 1; display: grid; gap: 0.25rem; min-width: 0; }
.dh-act-card-title { font-weight: 600; color: var(--dh-text); overflow-wrap: anywhere; }
.dh-act-card-meta { font-size: 0.82rem; color: var(--dh-muted); overflow-wrap: anywhere; }
.dh-act-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.dh-act-card-go svg { width: 1.25rem; height: 1.25rem; color: var(--dh-muted); }

.dh-act-diff { display: grid; gap: 0.5rem; }
.dh-act-diff li { padding: 0.6rem 0.75rem; border-radius: 8px; background: var(--dh-surface-2); box-shadow: 0 0 0 1px var(--dh-border); }
.dh-act-diff-label { font-size: 0.82rem; font-weight: 600; color: var(--dh-text); margin-bottom: 0.35rem; }
.dh-act-diff-values { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.dh-act-old,
.dh-act-new { padding: 0.15rem 0.5rem; border-radius: 5px; font-size: 0.88rem; overflow-wrap: anywhere; max-width: 100%; }
.dh-act-old { color: #9f1239; background: rgba(244, 63, 94, 0.1); text-decoration: line-through; text-decoration-color: rgba(159, 18, 57, 0.4); }
.dh-act-new { color: #065f46; background: rgba(16, 185, 129, 0.12); font-weight: 500; }
.dark .dh-act-old { color: #fda4af; }
.dark .dh-act-new { color: #6ee7b7; }
.dh-act-diff-arrow { color: var(--dh-muted); }

.dh-act-facts { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.dh-act-facts > div { padding: 0.5rem 0.7rem; border-radius: 8px; box-shadow: 0 0 0 1px var(--dh-border); }
.dh-act-facts dt { font-size: 0.76rem; color: var(--dh-muted); }
.dh-act-facts dd { margin-top: 0.1rem; font-weight: 500; overflow-wrap: anywhere; }
.dh-act-who { padding: 0.6rem 0.75rem; border-radius: 8px; box-shadow: 0 0 0 1px var(--dh-border); }
.dh-act-who .dh-person-name, .dh-act-who .dh-person-mail { white-space: normal; }
.dh-act-agent { margin-top: 0.4rem; font: 0.74rem/1.5 ui-monospace, Consolas, monospace; color: var(--dh-muted); overflow-wrap: anywhere; }

/* ================================================================ aktywne filtry: jeden pasek nad tabelą
   Nagłówek kolumny pokazuje tylko, że filtr działa (kolor + wypełniony lejek, wartość w podpowiedzi),
   więc kolumny się nie rozjeżdżają. Wartości z krzyżykami i „wyczyść wszystko” są tutaj. */

.fi-ta-filter-indicators {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    border-top: 1px solid var(--dh-border);
    border-bottom: 1px solid var(--dh-border);
    background: var(--dh-accent-soft);
}
.fi-ta-filter-indicators > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.fi-ta-filter-indicators-label { font-size: 0.78rem; font-weight: 600; color: var(--dh-accent-text); }
.fi-ta-filter-indicators-badges-ctn { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fi-ta-filter-indicators .fi-badge {
    max-width: 22rem;
    padding: 0.15rem 0.35rem 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--dh-text);
    background: var(--dh-surface);
    box-shadow: 0 0 0 1px var(--dh-border-strong);
}
.fi-ta-filter-indicators .fi-badge-label-ctn { overflow: hidden; }
.fi-ta-filter-indicators .fi-badge-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Siatka ma własny pasek filtrów z wartościami — tam drugi pasek byłby powtórzeniem. */
.fi-ta-ctn:has(.dh-filter-bar) .fi-ta-filter-indicators { display: none; }

/* ================================================================ zakres dat w nagłówku kolumny */

form.dh-range { min-width: 17rem; gap: 0.5rem; padding: 0.5rem; }
.dh-range .dh-hf-title { padding: 0.1rem 0.15rem 0; }
.dh-range-presets { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.dh-range-preset {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--dh-text);
    background: var(--dh-surface);
    box-shadow: 0 0 0 1px var(--dh-border);
    cursor: pointer;
}
.dh-range-preset:hover { background: var(--dh-hover); }
.dh-range-preset.is-selected { color: var(--dh-accent-text); background: var(--dh-accent-soft); box-shadow: 0 0 0 1px var(--dh-accent); font-weight: 600; }
.dh-range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--dh-border); }
.dh-range-fields label { display: grid; gap: 0.2rem; font-size: 0.76rem; font-weight: 600; color: var(--dh-muted); }
.dh-range-fields input {
    width: 100%;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--dh-border-strong);
    border-radius: var(--dh-radius-sm);
    background: var(--dh-surface);
    color: var(--dh-text);
    font-size: 0.86rem;
    font-weight: 400;
    color-scheme: light;
}
.dark .dh-range-fields input { color-scheme: dark; }
.dh-range-fields input:focus { outline: none; border-color: var(--dh-accent); box-shadow: 0 0 0 3px var(--dh-accent-soft); }
.dh-range-actions { display: flex; justify-content: flex-end; gap: 0.35rem; }
.dh-range-apply,
.dh-range-clear { padding: 0.3rem 0.75rem; border-radius: var(--dh-radius-sm); font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.dh-range-apply { background: var(--dh-accent); color: #fff; }
.dh-range-apply:hover { background: var(--dh-accent-hover); }
.dh-range-clear { color: var(--dh-muted); }
.dh-range-clear:hover { background: var(--dh-hover); color: var(--dh-text); }

/* ================================================================ wybór koloru etykiety (Ustawienia)
   Podgląd etykiety jak na liście (te same proporcje co etykieta Filamenta), pod nim próbki palety.
   Kolory podaje widok przez zmienne --sw-50 … --sw-700 (BadgeColors::shades). */

.dh-swatches { display: grid; gap: 0.75rem; padding: 0.85rem; border-radius: var(--dh-radius); background: var(--dh-surface-2); box-shadow: 0 0 0 1px var(--dh-border); }
.dh-swatches-preview { display: flex; align-items: center; gap: 0.6rem; min-height: 1.9rem; }
.dh-swatch-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--sw-600);
    background: var(--sw-50);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sw-600) 18%, transparent);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dark .dh-swatch-badge {
    color: var(--sw-400);
    background: color-mix(in oklab, var(--sw-400) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sw-400) 30%, transparent);
}
.dh-swatches-name { font-size: 0.8rem; color: var(--dh-muted); }

.dh-swatches-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.dh-swatch {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    color: #fff;
    background: var(--sw-500);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.dh-swatch:hover { transform: scale(1.1); }
.dh-swatch:focus-visible { outline: 2px solid var(--dh-accent); outline-offset: 2px; }
.dh-swatch svg { width: 0.95rem; height: 0.95rem; opacity: 0; transform: scale(0.6); transition: opacity 0.12s ease, transform 0.12s ease; }
.dh-swatch[aria-checked=true] { box-shadow: 0 0 0 2px var(--dh-surface-2), 0 0 0 4px var(--sw-500); }
.dh-swatch[aria-checked=true] svg { opacity: 1; transform: scale(1); }
.dh-swatch:disabled { cursor: not-allowed; opacity: 0.5; }

/* --- dokładny kolor etykiety: próbnik + kod HEX */
.dh-swatch-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--dh-border);
}
.dh-swatch-custom-label { font-size: 0.8rem; font-weight: 600; color: var(--dh-muted); margin-inline-end: auto; }
.dh-swatch-custom.is-active .dh-swatch-custom-label { color: var(--dh-accent-text); }
.dh-swatch-picker {
    position: relative;
    display: block;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    overflow: hidden;
    background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #10b981, #0ea5e9, #6366f1, #d946ef, #f43f5e);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}
.dh-swatch-custom.is-active .dh-swatch-picker { box-shadow: 0 0 0 2px var(--dh-surface-2), 0 0 0 4px var(--dh-accent); }
.dh-swatch-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dh-swatch-hex {
    width: 6.5rem;
    padding: 0.32rem 0.5rem;
    border: 1px solid var(--dh-border-strong);
    border-radius: var(--dh-radius-sm);
    background: var(--dh-surface);
    color: var(--dh-text);
    font: 500 0.86rem/1.4 ui-monospace, "Cascadia Code", Consolas, monospace;
    text-transform: uppercase;
}
.dh-swatch-hex:focus { outline: none; border-color: var(--dh-accent); box-shadow: 0 0 0 3px var(--dh-accent-soft); }
.dh-swatch-use { padding: 0.3rem 0.65rem; border-radius: var(--dh-radius-sm); font-size: 0.82rem; font-weight: 600; color: var(--dh-accent-text); background: var(--dh-accent-soft); cursor: pointer; }
.dh-swatch-use:hover { background: var(--dh-accent); color: #fff; }
.dh-swatch-note { font-size: 0.76rem; line-height: 1.45; color: var(--dh-muted); }

/* ================================================================ przyklejone nagłówki list
   Na komputerze treść przewija okno .fi-main — pasek nad tabelą (zbiory, układ, filtry siatki),
   pasek „Aktywne filtry”, nagłówki kolumn i pola wyszukiwania zostają u góry okna podczas przewijania.
   Odstępy (--dh-st-*) liczy panel.js z rzeczywistych wysokości pasków. Kontener tabeli nie może mieć
   własnego przewijania (blokowałoby przyklejanie) — szeroką tabelę przewija w bok samo okno. */

@media (min-width: 1024px) {
    .fi-main { overflow-x: auto !important; }
    .fi-ta-content-ctn { overflow-x: visible !important; }

    .fi-ta-main > .fi-ta-header-ctn {
        position: sticky;
        top: 0;
        z-index: 14;
        background: var(--dh-surface);
        border-radius: var(--dh-radius) var(--dh-radius) 0 0;
        box-shadow: 0 1px 0 var(--dh-border);
    }

    .fi-ta-main > .fi-ta-filter-indicators {
        position: sticky;
        top: var(--dh-st-ind, 0);
        z-index: 13;
        backdrop-filter: blur(6px);
        background: color-mix(in srgb, var(--dh-accent) 9%, var(--dh-surface));
    }

    .fi-ta-table > thead > tr > th {
        position: sticky;
        top: var(--dh-st-th, 0);
        z-index: 12;
        background: var(--dh-surface-2);
    }

    .fi-ta-individual-search-row > td {
        position: sticky;
        top: var(--dh-st-search, 0);
        z-index: 11;
        background: var(--dh-surface-2);
        box-shadow: 0 1px 0 var(--dh-border), 0 6px 10px -8px rgba(16, 24, 40, 0.25);
    }
}

/* Adres rekordu w systemie zewnętrznym (przy identyfikatorze pliku i w podglądzie szablonu). */
.dh-ext-link { font-size: 0.84rem; color: var(--dh-muted); overflow-wrap: anywhere; }
.dh-ext-link > span:first-child { font-weight: 600; margin-inline-end: 0.25rem; }

/* Nowy klucz API: do czego będzie miał dostęp (endpointy systemu). */
.dh-key-access { padding: 0.65rem 0.8rem; border-radius: var(--dh-radius-sm); background: var(--dh-surface-2); box-shadow: 0 0 0 1px var(--dh-border); font-size: 0.86rem; }
.dh-key-access ul { display: grid; gap: 0.3rem; margin-top: 0.45rem; }
.dh-key-access li { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.dh-key-access p { margin-top: 0.35rem; }

/* ================================================================ logowanie (układ jak w JetSignature)
   Bez karty i logo Filamenta: nazwa produktu „Data” nad kartą logowania, jeden przycisk „Kontynuuj z Google”. */

.dh-login { min-height: 100dvh; display: flex; flex-direction: column; background: var(--dh-canvas); color: var(--dh-text); }
.dh-login-top { height: 3.5rem; display: flex; align-items: center; justify-content: flex-end; padding: 0 0.75rem; }
.dh-login-theme {
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 8px;
    color: var(--dh-muted); cursor: pointer; transition: background-color .15s, color .15s;
}
.dh-login-theme:hover { background: var(--dh-hover); color: var(--dh-text); }
.dh-login-theme svg { width: 1.3rem; height: 1.3rem; }
.dh-login-sun { display: none; }
.dark .dh-login-sun { display: block; }
.dark .dh-login-moon { display: none; }

.dh-login-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 1rem 4rem; }
.dh-login-box { width: 100%; max-width: 28rem; }

.dh-login-brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 2rem; }
.dh-login-mark {
    display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 0.85rem;
    background: var(--dh-accent); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px -4px rgba(44, 131, 245, .45);
}
.dh-login-mark svg { width: 1.6rem; height: 1.6rem; }
.dh-login-name { font-size: 1.45rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.dh-login-tagline { font-size: 0.95rem; color: var(--dh-muted); }

.dh-login-card {
    display: grid; gap: 1.25rem; padding: 1.75rem; border-radius: 0.75rem;
    background: var(--dh-surface); border: 1px solid var(--dh-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12);
}
.dh-login-title { font-size: 1.25rem; font-weight: 650; }
.dh-login-hint { margin-top: 0.3rem; font-size: 0.95rem; color: var(--dh-muted); }

.dh-login-google {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem; height: 3rem; width: 100%;
    border-radius: 0.6rem; border: 1px solid var(--dh-border-strong); background: var(--dh-surface);
    font-size: 0.98rem; font-weight: 600; color: var(--dh-text); transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.dh-login-google:hover { background: var(--dh-hover); border-color: var(--dh-accent); }
.dh-login-google:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dh-accent-soft); border-color: var(--dh-accent); }

.dh-login-alert, .dh-login-note, .dh-login-warn { border-radius: 0.6rem; padding: 0.8rem 0.95rem; font-size: 0.92rem; line-height: 1.5; }
.dh-login-alert { color: #b42318; background: #fef3f2; }
.dh-login-note { color: var(--dh-accent-text); background: var(--dh-accent-soft); }
.dh-login-warn { color: #8a5300; background: #fffaeb; }
.dark .dh-login-alert { color: #fda29b; background: rgba(240, 68, 56, .12); }
.dark .dh-login-warn { color: #fec84b; background: rgba(247, 144, 9, .12); }
.dh-login-warn code { font: 0.85em ui-monospace, Consolas, monospace; }

.dh-login-small { font-size: 0.8rem; color: var(--dh-muted); line-height: 1.5; }
.dh-login-access { display: flex; align-items: flex-start; gap: 0.5rem; }
.dh-login-access svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.1rem; }