:root {
    --gfma-ds-canvas: #f2f4f7;      /* tlo strony pod kartami */
    --gfma-ds-surface: #ffffff;     /* karta, panel, wiersz */
    --gfma-ds-surface-alt: #f7f8fa; /* naglowek tabeli, pasek sekcji */
    --gfma-ds-line: #e4e7ec;        /* obramowanie */
    --gfma-ds-line-soft: #eff1f4;   /* separator wewnatrz karty */
    --gfma-ds-text: #101828;
    --gfma-ds-text-2: #344054;      /* tekst drugorzedny, etykiety */
    --gfma-ds-muted: #667085;       /* metadane, podpowiedzi */
    --gfma-ds-faint: #98a2b3;       /* nadtytuly, placeholdery */

    --gfma-ds-success: #0f7b4f;
    --gfma-ds-warning: #b76e00;
    --gfma-ds-danger: #b42318;
    --gfma-ds-info: #0b6ba8;
    --gfma-ds-success-bg: #e9f6f0;
    --gfma-ds-warning-bg: #fff6e6;
    --gfma-ds-danger-bg: #fef0ee;
    --gfma-ds-info-bg: #e8f1f9;
    --gfma-ds-success-line: #bfe3d2;
    --gfma-ds-warning-line: #f2dfb4;
    --gfma-ds-danger-line: #f5cfca;
    --gfma-ds-info-line: #c6dcef;

    --gfma-ds-primary-tint: #eaf0fa;
    --gfma-ds-primary-tint: color-mix(in srgb, var(--bs-primary, #002d72) 8%, #ffffff);
    --gfma-ds-primary-tint-line: #c9d9f1;
    --gfma-ds-primary-tint-line: color-mix(in srgb, var(--bs-primary, #002d72) 22%, #ffffff);
    --gfma-ds-primary-ring: rgba(0, 45, 114, .14);
    --gfma-ds-primary-ring: color-mix(in srgb, var(--bs-primary, #002d72) 16%, transparent);

    /* Kolor wiodacy uzyty jako TEKST/IKONA, nie jako tlo. Na jasnym to wprost kolor
       wiodacy — granat na bieli czyta sie doskonale. Na ciemnym ten sam granat lezy
       na granatowej karcie i schodzi do ~1,9:1, wiec musi zostac rozjasniony; kierunek
       zmiany zalezy od tla, dlatego to osobny token, a nie var(--bs-primary) w regule. */
    --gfma-ds-primary-fg: var(--bs-primary, #002d72);

    --gfma-ds-r-sm: 6px;
    --gfma-ds-r-md: 10px;
    --gfma-ds-r-lg: 14px;

    --gfma-ds-sh-1: 0 1px 2px rgba(16, 24, 40, .06);
    --gfma-ds-sh-2: 0 4px 14px rgba(16, 24, 40, .10);
    --gfma-ds-sh-3: 0 16px 40px rgba(2, 30, 74, .16);

    --gfma-ds-scrim: rgba(2, 30, 74, .32);

    --gfma-ds-s1: .25rem;
    --gfma-ds-s2: .5rem;
    --gfma-ds-s3: .75rem;
    --gfma-ds-s4: 1rem;
    --gfma-ds-s5: 1.5rem;
    --gfma-ds-s6: 2rem;

    --gfma-ds-row-h: 44px;
    --gfma-ds-cell-y: .625rem;
}



body {
    background-color: var(--gfma-ds-canvas);
    color: var(--gfma-ds-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.k-button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--bs-primary, #002d72);
    outline-offset: 2px;
    box-shadow: none;
}

.gfma-num,
.k-grid .k-table-td.gfma-num,
td.gfma-num,
.k-numerictextbox .k-input-inner {
    font-variant-numeric: tabular-nums;
}

.gfma-num,
td.gfma-num,
th.gfma-num,
.k-grid .k-table-th.gfma-num,
.k-grid .k-table-td.gfma-num {
    text-align: right;
}

.gfma-overline {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gfma-ds-muted);
}

.gfma-muted {
    color: var(--gfma-ds-muted) !important;
}



.navbar.fixed-top {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 10px rgba(2, 30, 74, .18);
}


.gfma-navbar-actions {
    gap: .25rem;
    flex-wrap: nowrap;
}

.navbar.fixed-top .gfma-navbar-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--gfma-ds-r-sm);
    background-color: transparent;
    color: rgba(255, 255, 255, .82);
    font-size: 1.0625rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.navbar.fixed-top .gfma-navbar-btn:hover,
.navbar.fixed-top .gfma-navbar-btn:focus-visible {
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
}

.navbar.fixed-top .gfma-navbar-btn-danger {
    color: #ffb4ac;
}

.navbar.fixed-top .gfma-navbar-btn-danger:hover {
    background-color: rgba(255, 180, 172, .18);
    color: #fff;
}

.navbar.fixed-top .gfma-navbar-badge {
    position: absolute;
    top: .0625rem;
    inset-inline-end: .0625rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background-color: var(--bs-secondary, #c99700);
    color: var(--gfma-on-accent, #1b1400);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--gfma-navbar-bg, #021e4a);
}

.navbar.fixed-top .gfma-navbar-dot {
    position: absolute;
    top: .25rem;
    inset-inline-end: .25rem;
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background-color: var(--gfma-ds-danger, #b42318);
    box-shadow: 0 0 0 2px var(--gfma-navbar-bg, #021e4a);
}

.navbar.fixed-top .gfma-navbar-session {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 1.875rem;
    padding: 0 .625rem;
    margin-inline-start: .25rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .88);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.navbar.fixed-top .gfma-navbar-session i {
    font-size: .75rem;
    opacity: .8;
}

.navbar.fixed-top .gfma-navbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    flex: 0 0 auto;
    margin-inline-start: .375rem;
    border-radius: 999px;
    background-color: #b4e6ff;
    color: #00234f;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    transition: filter .12s ease;
}

.navbar.fixed-top .gfma-navbar-avatar:hover {
    filter: brightness(1.08);
    color: #00234f;
}

.navbar.fixed-top .gfma-navbar-incarnation {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    max-width: 14rem;
    height: 1.875rem;
    padding: 0 .625rem;
    margin-inline-end: .25rem;
    border-radius: 999px;
    background-color: rgba(255, 180, 172, .18);
    color: #ffd7d2;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.navbar.fixed-top .gfma-navbar-incarnation-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 36em) {
    .navbar.fixed-top .gfma-navbar-session,
    .navbar.fixed-top .gfma-navbar-incarnation-name {
        display: none;
    }
}

@media (pointer: coarse) {
    .navbar.fixed-top .gfma-navbar-btn {
        width: 44px;
        height: 44px;
    }

    .navbar.fixed-top .gfma-navbar-avatar {
        width: 40px;
        height: 40px;
        font-size: .875rem;
    }
}


.gfma-sidebar .gfma-nav {
    padding: .5rem .375rem;
}

.gfma-sidebar .gfma-nav .gfma-nav-item {
    margin-bottom: 1px;
    padding: .5rem .625rem;
    border-radius: var(--gfma-ds-r-sm);
    transition: background-color .12s ease, color .12s ease;
}

.gfma-sidebar .gfma-nav .gfma-nav-item > i,
.gfma-sidebar .gfma-nav .gfma-nav-item > .k-icon,
.gfma-sidebar .gfma-nav .gfma-nav-item > svg,
.gfma-sidebar .gfma-nav .gfma-nav-item > .gfma-icon {
    width: 1.25rem;
    height: 1.25rem;
    opacity: .65;
    flex: 0 0 1.25rem;
}

.gfma-sidebar .gfma-nav .gfma-nav-item:hover > i,
.gfma-sidebar .gfma-nav .gfma-nav-item:hover > .k-icon,
.gfma-sidebar .gfma-nav .gfma-nav-item:hover > svg,
.gfma-sidebar .gfma-nav .gfma-nav-item.is-active > i,
.gfma-sidebar .gfma-nav .gfma-nav-item.is-active > .k-icon,
.gfma-sidebar .gfma-nav .gfma-nav-item.is-active > svg {
    opacity: 1;
}

.gfma-sidebar .gfma-nav .gfma-nav-item.is-active {
    position: relative;
    font-weight: 600;
}

.gfma-sidebar .gfma-nav-item.is-active::after {
    content: "";
    position: absolute;
    inset-inline-start: -.375rem;
    top: .3125rem;
    bottom: .3125rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: currentColor;
    opacity: .9;
}

.gfma-sidebar .gfma-nav .gfma-nav-lvl1 {
    padding-inline-start: 2.375rem;
}

.gfma-sidebar .gfma-nav .gfma-nav-lvl2,
.gfma-sidebar .gfma-nav .gfma-nav-lvl3,
.gfma-sidebar .gfma-nav .gfma-nav-lvl4,
.gfma-sidebar .gfma-nav .gfma-nav-lvl5 {
    padding-inline-start: 3rem;
}

.gfma-sidebar .gfma-nav .gfma-nav-chevron {
    font-size: .75em;
    opacity: .45;
}

.gfma-sidebar .gfma-nav .gfma-nav-sep {
    margin: .375rem .625rem;
    opacity: .5;
}

.gfma-sidebar:not(.gfma-nav-open) .gfma-nav .gfma-nav-item {
    justify-content: center;
    padding-inline: .375rem;
}

.gfma-sidebar:not(.gfma-nav-open) .gfma-nav .gfma-nav-item > i,
.gfma-sidebar:not(.gfma-nav-open) .gfma-nav .gfma-nav-item > .k-icon,
.gfma-sidebar:not(.gfma-nav-open) .gfma-nav .gfma-nav-item > svg {
    opacity: .8;
}

.gfma-sidebar .gfma-nav-logo {
    padding: .625rem .75rem 1rem;
}

.gfma-sidebar .gfma-nav-count {
    margin-inline-start: auto;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.25rem;
    padding: 0 .45rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .16);
}

.gfma-sidebar .gfma-nav-caption {
    padding: .75rem 1rem .25rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .62;
    white-space: nowrap;
}

.gfma-sidebar:not(.gfma-nav-open) .gfma-nav-caption {
    display: none;
}



.gfma-page-header {
    background-color: var(--gfma-ds-surface);
    border-bottom: 1px solid var(--gfma-ds-line);
    padding: .875rem 1.5rem 0;
}

.gfma-page-header .gfma-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .8125rem;
    color: var(--gfma-ds-muted);
    margin-bottom: .35rem;
}

.gfma-page-header .gfma-crumbs a {
    color: inherit;
    text-decoration: none;
}

.gfma-page-header .gfma-crumbs a:hover {
    color: var(--gfma-ds-primary-fg);
    text-decoration: underline;
}

.gfma-page-header .gfma-headline {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.gfma-page-header h1,
.gfma-page-header .gfma-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.gfma-page-header .gfma-subtitle {
    margin: .15rem 0 0;
    font-size: .875rem;
    color: var(--gfma-ds-muted);
}

.gfma-page-header .gfma-page-actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.gfma-list-title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
    color: var(--gfma-ds-text);
}


.gfma-context-toolbar {
    background-color: var(--gfma-ds-surface) !important;
    border-bottom: 1px solid var(--gfma-ds-line);
    padding: .625rem 1rem !important;
    gap: .5rem;
}

.gfma-context-toolbar > form {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.gfma-context-toolbar .btn.gfma-action {
    background-color: var(--gfma-ds-surface);
    border: 1px solid var(--gfma-ds-line);
    color: var(--gfma-ds-text-2);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.5;
    padding: .375rem .875rem;
    border-radius: var(--bs-border-radius, var(--gfma-ds-r-sm));
    box-shadow: none;
}

.gfma-context-toolbar .btn.gfma-action:hover:not(:disabled) {
    background-color: var(--gfma-ds-canvas);
    color: var(--gfma-ds-text);
    border-color: var(--gfma-ds-line);
}

.gfma-context-toolbar .btn.gfma-action:disabled {
    opacity: .5;
}

.gfma-context-toolbar .btn.gfma-action.gfma-action-primary {
    background-color: var(--bs-primary, #002d72);
    border-color: var(--bs-primary, #002d72);
    color: var(--gfma-on-primary, #fff);
    font-weight: 600;
    box-shadow: var(--gfma-ds-sh-1);
}

.gfma-context-toolbar .btn.gfma-action.gfma-action-primary:hover:not(:disabled) {
    filter: brightness(1.12);
    color: var(--gfma-on-primary, #fff);
}

.gfma-context-toolbar .btn.gfma-action.gfma-action-danger {
    color: var(--gfma-ds-danger);
    border-color: var(--gfma-ds-danger-line);
}

.gfma-context-toolbar .btn.gfma-action.gfma-action-danger:hover:not(:disabled) {
    background-color: var(--gfma-ds-danger-bg);
    color: var(--gfma-ds-danger);
}

.gfma-context-toolbar .btn.gfma-action.border-light-left,
.gfma-context-toolbar .btn.gfma-action.border-light-right {
    border-inline-color: var(--gfma-ds-line);
}

.gfma-context-toolbar .gfma-actions-end {
    margin-inline-start: auto;
}



.btn,
.k-button {
    font-weight: 500;
    letter-spacing: 0;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.btn-primary,
.k-button-solid-primary {
    font-weight: 600;
    box-shadow: var(--gfma-ds-sh-1);
}

.btn-outline-secondary {
    --bs-btn-color: var(--gfma-ds-text-2);
    --bs-btn-border-color: var(--gfma-ds-line);
    --bs-btn-hover-bg: var(--gfma-ds-canvas);
    --bs-btn-hover-color: var(--gfma-ds-text);
    --bs-btn-hover-border-color: var(--gfma-ds-line);
    --bs-btn-active-bg: var(--gfma-ds-line-soft);
    --bs-btn-active-color: var(--gfma-ds-text);
    --bs-btn-active-border-color: var(--gfma-ds-line);
    --bs-btn-disabled-color: var(--gfma-ds-faint);
    --bs-btn-disabled-border-color: var(--gfma-ds-line);
}

.k-button-solid-base {
    background-image: none;
    background-color: var(--gfma-ds-surface);
    border-color: var(--gfma-ds-line);
    color: var(--gfma-ds-text-2);
}

.k-button-solid-base:hover {
    background-color: var(--gfma-ds-canvas);
    border-color: var(--gfma-ds-line);
    color: var(--gfma-ds-text);
}

.gfma-btn-link,
.k-button-flat-primary {
    color: var(--gfma-ds-primary-fg);
    font-weight: 600;
}

.gfma-btn-link:hover,
.k-button-flat-primary:hover {
    background-color: var(--gfma-ds-primary-tint);
    color: var(--gfma-ds-primary-fg);
}

.btn-outline-danger {
    --bs-btn-color: var(--gfma-ds-danger);
    --bs-btn-border-color: var(--gfma-ds-danger-line);
    --bs-btn-hover-bg: var(--gfma-ds-danger-bg);
    --bs-btn-hover-color: var(--gfma-ds-danger);
    --bs-btn-hover-border-color: var(--gfma-ds-danger-line);
}

.gfma-btn-group .btn.active,
.gfma-btn-group .k-button.k-selected {
    background-color: var(--gfma-ds-primary-tint);
    border-color: var(--gfma-ds-primary-tint-line);
    color: var(--gfma-ds-primary-fg);
    font-weight: 600;
}



.gfma-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: 1.375rem;
    padding: .1875rem .5625rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid;
    white-space: nowrap;
    max-width: 100%;
}

.gfma-badge > .gfma-dot {
    width: .375rem;
    height: .375rem;
    border-radius: 999px;
    background-color: currentColor;
    flex: 0 0 auto;
}

.gfma-badge-neutral { background-color: #eef1f5; border-color: #dde2ea; color: var(--gfma-ds-text-2); }
.gfma-badge-brand   { background-color: var(--gfma-ds-primary-tint); border-color: var(--gfma-ds-primary-tint-line); color: var(--gfma-ds-primary-fg); }
.gfma-badge-success { background-color: var(--gfma-ds-success-bg); border-color: var(--gfma-ds-success-line); color: var(--gfma-ds-success); }
.gfma-badge-warning { background-color: var(--gfma-ds-warning-bg); border-color: var(--gfma-ds-warning-line); color: var(--gfma-ds-warning); }
.gfma-badge-danger  { background-color: var(--gfma-ds-danger-bg);  border-color: var(--gfma-ds-danger-line);  color: var(--gfma-ds-danger); }
.gfma-badge-info    { background-color: var(--gfma-ds-info-bg);    border-color: var(--gfma-ds-info-line);    color: var(--gfma-ds-info); }

.badge.bg-success { background-color: var(--gfma-ds-success-bg) !important; color: var(--gfma-ds-success) !important; border: 1px solid var(--gfma-ds-success-line); }
.badge.bg-warning { background-color: var(--gfma-ds-warning-bg) !important; color: var(--gfma-ds-warning) !important; border: 1px solid var(--gfma-ds-warning-line); }
.badge.bg-danger  { background-color: var(--gfma-ds-danger-bg)  !important; color: var(--gfma-ds-danger)  !important; border: 1px solid var(--gfma-ds-danger-line); }
.badge.bg-info    { background-color: var(--gfma-ds-info-bg)    !important; color: var(--gfma-ds-info)    !important; border: 1px solid var(--gfma-ds-info-line); }
.badge.bg-secondary { background-color: #eef1f5 !important; color: var(--gfma-ds-text-2) !important; border: 1px solid #dde2ea; }

.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: .25rem .5625rem;
}

.gfma-chip {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    height: 1.625rem;
    padding: 0 .375rem 0 .625rem;
    border-radius: 999px;
    background-color: var(--gfma-ds-surface-alt);
    border: 1px solid var(--gfma-ds-line);
    font-size: .875rem;
    color: var(--gfma-ds-text-2);
}

.gfma-chip > button {
    width: 1rem;
    height: 1rem;
    border: 0;
    border-radius: 999px;
    background-color: #dfe3ea;
    color: var(--gfma-ds-text-2);
    font-size: .6875rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.gfma-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    border-radius: 999px;
    background-color: var(--gfma-ds-primary-tint);
    color: var(--gfma-ds-primary-fg);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.gfma-avatar-lg {
    width: 3rem;
    height: 3rem;
    flex-basis: 3rem;
    border-radius: var(--gfma-ds-r-md);
    font-size: 1.0625rem;
}



.card,
.k-card {
    background-color: var(--gfma-ds-surface);
    border: 1px solid var(--gfma-ds-line);
    border-radius: var(--gfma-ds-r-md);
    box-shadow: var(--gfma-ds-sh-1);
}

.card > .card-header,
.k-card > .k-card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--gfma-ds-line-soft);
    padding: .6875rem 1rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gfma-ds-muted);
}

.card > .card-footer {
    background-color: transparent;
    border-top: 1px solid var(--gfma-ds-line-soft);
}

.gfma-card-hover {
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.gfma-card-hover:hover {
    box-shadow: var(--gfma-ds-sh-2) !important;
    transform: translateY(-1px);
    border-color: #d3dae6;
}


.card-title.font-weight-light,
.card-title.fw-light {
    font-weight: 600 !important;
    font-size: .9375rem;
}

.card .card-text.lead {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--gfma-ds-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gfma-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
}

@media (min-width: 48em) {
    .gfma-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64em) {
    .gfma-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gfma-tile-cell {
    position: relative;
    min-width: 0;
    display: flex;
}

.gfma-tile-cell > *,
.gfma-tile-cell > a > .gfma-tile {
    width: 100%;
}

.gfma-tile {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    height: 100%;
}

.gfma-tiles .gfma-tile {
    cursor: pointer;
}

.gfma-tile-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: 0;
}

.gfma-tile .gfma-card-icon,
.gfma-card-icon {
    float: none !important;
    margin: 0 !important;
    width: 3rem;
    height: 3rem;
    border: 0 !important;
    border-radius: var(--gfma-ds-r-md) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: transform .15s ease;
}

.gfma-tiles .gfma-card-icon.bg-primary {
    background-color: var(--gfma-ds-primary-tint) !important;
    color: var(--gfma-ds-primary-fg) !important;
}

.gfma-tiles .gfma-card-icon.bg-secondary {
    background-color: #faf3e0;
    background-color: color-mix(in srgb, var(--bs-secondary, #c99700) 14%, #ffffff) !important;
    color: #8a6a00;
    color: color-mix(in srgb, var(--bs-secondary, #c99700) 78%, #000000) !important;
}

html:not([data-gfma-theme="dark"]) .gfma-card-icon.bg-primary {
    background-color: var(--gfma-ds-primary-tint) !important;
    color: var(--gfma-ds-primary-fg) !important;
}

html:not([data-gfma-theme="dark"]) .gfma-card-icon.bg-secondary {
    background-color: #faf3e0;
    background-color: color-mix(in srgb, var(--bs-secondary, #c99700) 14%, #ffffff) !important;
    color: #8a6a00;
    color: color-mix(in srgb, var(--bs-secondary, #c99700) 78%, #000000) !important;
}

.gfma-tile .gfma-card-icon .fas,
.gfma-tile .gfma-card-icon .k-icon,
.gfma-tile .gfma-card-icon svg,
.gfma-tile .gfma-card-icon i {
    font-size: 1.5rem;
    width: 1.375rem;
    height: 1.375rem;
    line-height: 1;
}

.gfma-tile-title {
    margin: 0;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gfma-ds-text);
    line-height: 1.35;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gfma-tile-body {
    padding: .5rem 0 0;
    flex: 1 1 auto;
}

.gfma-tile-body > .card-text {
    margin: 0;
}

/* Kafelki pulpitu: ikona po lewej (powiekszona), tytul i opis po prawej,
   oddzielone pionowa linia. Uklad robiony gridem, bo IconCard renderuje
   tytul i opis w dwoch osobnych kontenerach — display: contents na naglowku
   wpuszcza ikone i tytul do tej samej siatki. */
.gfma-tiles .gfma-tile {
    display: grid;
    grid-template-columns: auto 1px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 1rem;
    row-gap: 0;
}

/* Pionowa linia miedzy ikona a trescia — wlasna kolumna siatki, dzieki czemu
   siega calej wysokosci kafelka niezaleznie od dlugosci tytulu i opisu. */
.gfma-tiles .gfma-tile::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    background-color: var(--gfma-ds-line);
}

/* Kafelek bez ikony — bez wiszacej linii przy lewej krawedzi. */
.gfma-tiles .gfma-tile:not(:has(.gfma-card-icon))::before {
    display: none;
}

.gfma-tiles .gfma-tile-head {
    display: contents;
}

.gfma-tiles .gfma-tile .gfma-card-icon {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    width: 4rem;
    height: 4rem;
}

.gfma-tiles .gfma-tile .gfma-card-icon .fas,
.gfma-tiles .gfma-tile .gfma-card-icon .k-icon,
.gfma-tiles .gfma-tile .gfma-card-icon svg,
.gfma-tiles .gfma-tile .gfma-card-icon i {
    font-size: 2rem;
    width: 1.875rem;
    height: 1.875rem;
}

.gfma-tiles .gfma-tile-title,
.gfma-tiles .gfma-tile-body {
    grid-column: 3;
}

.gfma-tiles .gfma-tile-title {
    grid-row: 1;
    padding-block: .125rem .25rem;
}

.gfma-tiles .gfma-tile-body {
    grid-row: 2;
    padding-block: 0 .125rem;
}

.gfma-card-hover:hover .gfma-card-icon {
    transform: scale(1.06);
}

.gfma-tile-cell:hover .gfma-tile-title {
    color: var(--gfma-ds-primary-fg);
}

/* Sciezka nawigacji stoi ZAWSZE w jednej linii. Domyslny .breadcrumb Bootstrapa ma
   flex-wrap: wrap — na telefonie sciezka Biblioteki dokumentow lamala sie na 2-3 rzedy,
   a poniewaz pozycje z odnosnikiem dostaja na dotyku min-height: 44px, a ostatnia
   (aktywna, bez odnosnika) nie, kolejne rzedy i separatory ">" stały na roznych
   wysokosciach — sciezka wygladala na krzywa. Nadmiar przewija sie w poziomie,
   bez widocznego paska przewijania. */
.breadcrumb {
    margin-bottom: .5rem;
    font-size: .8125rem;
    color: var(--gfma-ds-muted);
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

/* display: flex na pozycji ustawia separator "::before" jako element flexowy, wiec
   ">" trafia na te sama os co tekst zamiast siadac na linii bazowej wyzszej pozycji. */
.breadcrumb > .breadcrumb-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.breadcrumb a {
    text-decoration: none;
}

.gfma-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1px;
    background-color: var(--gfma-ds-line-soft);
    border-radius: var(--gfma-ds-r-md);
    overflow: hidden;
}

.gfma-fields > .gfma-field {
    background-color: var(--gfma-ds-surface);
    padding: .6875rem 1rem;
    min-width: 0;
}

.gfma-field > .gfma-field-key {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gfma-ds-faint);
    margin-bottom: .125rem;
}

.gfma-field > .gfma-field-value {
    font-size: .9375rem;
    color: var(--gfma-ds-text);
    overflow-wrap: anywhere;
}

.gfma-field > .gfma-field-value.is-empty {
    color: #c0c6d0;
}

.gfma-card-accent {
    height: 3px;
    border-radius: 999px;
    background-color: var(--bs-primary, #002d72);
    opacity: .85;
    margin-bottom: .75rem;
}



.k-grid,
.table {
    background-color: var(--gfma-ds-surface);
    border-color: var(--gfma-ds-line);
}

.k-grid {
    border-radius: var(--gfma-ds-r-md);
    overflow: hidden;
}

.k-grid .k-grid-header,
.k-grid .k-table-thead,
.table > thead {
    background-color: var(--gfma-ds-surface-alt);
}

.k-grid .k-table-th,
.table > thead th {
    background-color: var(--gfma-ds-surface-alt);
    border-color: var(--gfma-ds-line);
    color: var(--gfma-ds-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.k-grid .k-table-td,
.table > tbody td {
    border-color: var(--gfma-ds-line-soft);
    padding-top: var(--gfma-ds-cell-y);
    padding-bottom: var(--gfma-ds-cell-y);
    vertical-align: middle;
}

.k-grid .k-table-row:hover .k-table-td,
.k-grid .k-table-row.k-hover .k-table-td,
.table-hover > tbody > tr:hover > * {
    background-color: #fafbfc;
}

.k-grid .k-table-row.k-selected > .k-table-td,
.k-grid .k-table-row.k-selected {
    background-color: var(--gfma-ds-primary-tint) !important;
    color: var(--gfma-ds-text) !important;
    box-shadow: inset 3px 0 0 var(--bs-primary, #002d72);
}

.k-grid .k-toolbar,
.k-grid .k-grid-toolbar {
    background-color: var(--gfma-ds-surface);
    border-color: var(--gfma-ds-line);
    padding: .5rem .75rem;
}

.k-grid .k-grid-pager {
    background-color: var(--gfma-ds-surface);
    border-color: var(--gfma-ds-line);
    color: var(--gfma-ds-muted);
    font-size: .875rem;
}

.k-grid .k-table-td.gfma-num,
.k-grid .k-table-th.gfma-num .k-cell-inner > .k-link {
    justify-content: flex-end;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gfma-cell-primary {
    display: block;
    font-weight: 500;
    line-height: 1.35;
}

.gfma-cell-secondary {
    display: block;
    font-size: .8125rem;
    color: var(--gfma-ds-muted);
    line-height: 1.35;
}

.gfma-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--gfma-ds-muted);
}

.gfma-empty > .gfma-empty-icon {
    font-size: 1.75rem;
    color: var(--gfma-ds-faint);
    margin-bottom: .75rem;
}

.gfma-empty > .gfma-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gfma-ds-text);
    margin-bottom: .25rem;
}



.form-label,
.k-label,
.k-form .k-form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--gfma-ds-text-2);
    margin-bottom: .3125rem;
}

.form-control,
.form-select,
.k-input,
.k-picker {
    border-color: #d0d5dd;
    color: var(--gfma-ds-text);
}

.form-control:hover,
.form-select:hover,
.k-input:hover,
.k-picker:hover {
    border-color: #b9c0cc;
}

.form-control:focus,
.form-select:focus,
.k-input.k-focus,
.k-picker.k-focus,
.k-input:focus-within,
.k-picker:focus-within {
    border-color: var(--bs-primary, #002d72);
    box-shadow: 0 0 0 3px var(--gfma-ds-primary-ring);
}

.form-control::placeholder,
.k-input-inner::placeholder {
    color: var(--gfma-ds-faint);
}

.form-control:disabled,
.form-control[readonly],
.k-disabled .k-input,
.k-input.k-disabled {
    background-color: var(--gfma-ds-surface-alt);
    color: var(--gfma-ds-faint);
    border-color: var(--gfma-ds-line);
}

.form-text,
.gfma-field-hint {
    font-size: .8125rem;
    color: var(--gfma-ds-muted);
    margin-top: .25rem;
}

.invalid-feedback,
.validation-message,
.k-form-error {
    font-size: .8125rem;
    color: var(--gfma-ds-danger);
    margin-top: .25rem;
}

.form-control.is-invalid,
.invalid,
.k-input.k-invalid,
.k-picker.k-invalid {
    border-color: var(--gfma-ds-danger);
}

.form-control.is-invalid:focus,
.k-input.k-invalid.k-focus {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .12);
}

.gfma-field-computed .form-control,
.gfma-field-computed .k-input {
    background-color: var(--gfma-ds-surface-alt);
    color: var(--gfma-ds-text-2);
    border-style: dashed;
}

.gfma-required::after {
    content: " *";
    color: var(--gfma-ds-danger);
    font-weight: 700;
}

.gfma-form-section {
    background-color: var(--gfma-ds-surface);
    border: 1px solid var(--gfma-ds-line);
    border-radius: var(--gfma-ds-r-md);
    box-shadow: var(--gfma-ds-sh-1);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.gfma-form-section > .gfma-form-section-title {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gfma-ds-muted);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .625rem;
}

.gfma-form-actions {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    margin-top: .25rem;
    border-top: 1px solid var(--gfma-ds-line-soft);
}

.gfma-form-actions > .gfma-form-status {
    margin-inline-start: auto;
    font-size: .8125rem;
    color: var(--gfma-ds-muted);
}


.alert {
    border-radius: var(--gfma-ds-r-md);
    border-width: 1px;
    font-size: .875rem;
    padding: .75rem .875rem;
}

.alert-success { background-color: #f1faf5; border-color: #c8e7d7; color: #0a5537; }
.alert-warning { background-color: #fffaf0; border-color: #f1dfb8; color: #7a4a00; }
.alert-danger  { background-color: #fef6f5; border-color: #f5cfca; color: #8c1d14; }
.alert-info    { background-color: #f3f8fc; border-color: #cfe2f1; color: #0b4a72; }

.alert > .gfma-alert-title,
.alert > strong:first-child {
    display: block;
    font-weight: 600;
    margin-bottom: .0625rem;
}



.k-tabstrip > .k-tabstrip-items-wrapper {
    border-color: var(--gfma-ds-line);
}

.k-tabstrip-items .k-item {
    color: var(--gfma-ds-muted);
    font-size: .9375rem;
    border: 0;
    background-color: transparent;
}

.k-tabstrip-items .k-item:hover {
    color: var(--gfma-ds-text);
    background-color: transparent;
}

.k-tabstrip-items .k-item.k-active {
    color: var(--gfma-ds-primary-fg);
    font-weight: 600;
    background-color: transparent;
    border: 0;
    box-shadow: inset 0 -2px 0 var(--bs-primary, #002d72);
}

.k-tabstrip > .k-content,
.k-tabstrip-content {
    border: 0;
    background-color: transparent;
    padding-inline: 0;
}

.gfma-tab-count {
    font-size: .8125rem;
    color: var(--gfma-ds-faint);
    margin-inline-start: .3125rem;
    font-variant-numeric: tabular-nums;
}



.k-window,
.k-dialog {
    border-radius: var(--gfma-ds-r-lg);
    border-color: #d6dae2;
    box-shadow: var(--gfma-ds-sh-3);
    overflow: hidden;
}

.k-window-titlebar,
.k-dialog-titlebar {
    background-color: var(--gfma-ds-surface-alt);
    border-bottom: 1px solid var(--gfma-ds-line);
    color: var(--gfma-ds-text);
    padding: .625rem .875rem;
}

.k-window-title,
.k-dialog-title {
    font-size: .9375rem;
    font-weight: 600;
}

.k-window-content,
.k-dialog-content {
    background-color: var(--gfma-ds-surface);
}

.k-window-actions .k-button,
.k-dialog-titlebar .k-button {
    color: var(--gfma-ds-muted);
}

.k-overlay {
    background-color: var(--gfma-ds-scrim);
}

.k-notification {
    border-radius: var(--gfma-ds-r-md);
    box-shadow: var(--gfma-ds-sh-2);
    border-width: 1px;
    font-size: .875rem;
}



.gfma-dense {
    --gfma-ds-row-h: 34px;
    --gfma-ds-cell-y: .3125rem;
}

.gfma-dense .k-grid .k-table-td,
.gfma-dense .table > tbody td {
    padding-top: var(--gfma-ds-cell-y);
    padding-bottom: var(--gfma-ds-cell-y);
    font-size: .875rem;
}

.gfma-dense .gfma-cell-secondary {
    display: none;
}



@media (max-width: 48em) {
    .gfma-page-header {
        padding-inline: 1rem;
    }

    .gfma-page-header .gfma-headline {
        gap: .5rem;
    }

    .gfma-page-header h1,
    .gfma-page-header .gfma-title,
    .gfma-list-title {
        font-size: 1.1875rem !important;
    }

    .gfma-page-header.gfma-sticky {
        position: sticky;
        top: 0;
        z-index: 3;
    }

    .gfma-context-toolbar {
        padding: .5rem .75rem !important;
    }

    .gfma-context-toolbar .btn.gfma-action.gfma-action-collapse {
        display: none;
    }

    .gfma-form-section {
        padding: 1rem;
    }

    .gfma-fields {
        grid-template-columns: 1fr;
    }
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    body {
        padding-top: calc(var(--gfma-navbar-h, 56px) + env(safe-area-inset-top, 0px));
    }

    .navbar.fixed-top {
        padding-top: env(safe-area-inset-top, 0px);
        height: calc(var(--gfma-navbar-h, 56px) + env(safe-area-inset-top, 0px));
    }

    .gfma-nav {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .gfma-main {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .k-window,
    .k-dialog {
        margin-bottom: env(safe-area-inset-bottom, 0px);
    }
}

@media print {
    .navbar.fixed-top,
    .gfma-nav,
    .gfma-nav-backdrop,
    .gfma-context-toolbar,
    .gfma-page-header .gfma-page-actions {
        display: none !important;
    }

    body {
        padding-top: 0;
        background-color: #fff;
    }

    .card,
    .k-grid,
    .gfma-form-section {
        box-shadow: none !important;
        border-color: #ccc !important;
    }
}


/* --------------------------------------------------------------------------
   Slot na plik (karta informacyjna / karta klienta na karcie kontaktu, sprawy).
   Na telefonie caly rzad — pole z nazwa pliku plus cztery przyciski — laduje sie
   w jednej linii input-group, wiec etykiety przycinaly sie do ikony i wielokropka
   („Podglad ...", „Pobierz ..."). Nazwa pliku dostaje wlasny wiersz, przyciski
   ida po dwa w rzedzie i maja 44 px wysokosci pod palec.
   -------------------------------------------------------------------------- */
@media (max-width: 48em) {
    /* GRID, nie flex — i koniecznie z !important.
       Motyw (static_source/scss/main.scss) wymusza globalnie
       `.input-group { display: flex !important; flex-wrap: nowrap !important; }`,
       wiec bez !important siatka w ogole nie wchodzila, a `nowrap` trzymal pole
       i przyciski w jednej linii: etykiety obcinaly sie do wielokropka, a po
       rozepchaniu pola przyciski wyjezdzaly poza kartke.
       Nasz selektor ma wyzsza specyficznosc (0,2,0 vs 0,1,0), wiec przy rownym
       !important wygrywa niezaleznie od kolejnosci arkuszy — a motyw przychodzi
       z bazy i moze byc starszym buildem. */
    .gfma-file-slot .input-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        flex-wrap: wrap !important;
        gap: .5rem;
        width: 100%;
    }

    .gfma-file-slot .input-group > .form-control {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        border-radius: var(--gfma-ds-r-md);
    }

    .gfma-file-slot .input-group > .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        border-radius: var(--gfma-ds-r-md) !important;
    }

    /* Etykiety maja byc czytelne — to wlasnie ich obcinanie bylo problemem. */
    .gfma-file-slot .input-group > .btn.text-truncate {
        overflow: visible;
        text-overflow: clip;
    }
}


/* ==========================================================================
   WARIANT CIEMNY
   ==========================================================================
   Motyw z bazy (ui.Theme) niesie ciemne tla do arkusza kompilowanego ze SCSS-a,
   ale TEN arkusz laduje sie PO nim i wygrywa — a nie przechodzi przez kompilacje,
   wiec sam z siebie nie wie, na jakim tle stoi. Stad znacznik data-gfma-theme
   na elemencie html (ustawia go _Host.cshtml z aktywnego motywu).

   Zasada: przestawiamy TOKENY, nie pojedyncze reguly. Ponizej sa tylko te reguly,
   ktore maja kolor wpisany na sztywno — reszta arkusza (i widgety, ktore z tych
   tokenow korzystaja) przechodzi na ciemne tlo sama.

   Wariant jasny zostaje nietkniety: nic tutaj nie dziala bez atrybutu na html.
   ========================================================================== */

html[data-gfma-theme="dark"] {
    /* Powierzchnie: granat z ksiegi znaku przelozony na skale ciemna. Roznica
       plotno/karta jest celowo niewielka (1,2:1) — hierarchie na ciemnym tle robi
       obramowanie, nie kontrast plam. */
    --gfma-ds-canvas: #061428;
    --gfma-ds-surface: #0d2545;
    --gfma-ds-surface-alt: #143059;
    --gfma-ds-line: #23406b;
    --gfma-ds-line-soft: #1a3255;
    --gfma-ds-text: #e8eef7;
    --gfma-ds-text-2: #c3d2e6;
    --gfma-ds-muted: #9db0ca;
    --gfma-ds-faint: #7c93b3;

    /* Kolory stanow sa rozjasnione: #0f7b4f i #b42318 daja na granacie 2,9:1
       i 2,3:1, czyli ponizej progu czytelnosci. Warianty ponizej trzymaja 5-7:1. */
    --gfma-ds-success: #45be8b;
    --gfma-ds-warning: #e0a93b;
    --gfma-ds-danger: #f0736a;
    --gfma-ds-info: #5aa9e6;

    /* Tla i obramowania stanow liczone OD powierzchni karty, a nie od bieli —
       inaczej kazdy znacznik swiecilby jasna plama na ciemnym tle. */
    --gfma-ds-success-bg: color-mix(in srgb, var(--gfma-ds-success) 14%, var(--gfma-ds-surface));
    --gfma-ds-warning-bg: color-mix(in srgb, var(--gfma-ds-warning) 14%, var(--gfma-ds-surface));
    --gfma-ds-danger-bg: color-mix(in srgb, var(--gfma-ds-danger) 14%, var(--gfma-ds-surface));
    --gfma-ds-info-bg: color-mix(in srgb, var(--gfma-ds-info) 14%, var(--gfma-ds-surface));
    --gfma-ds-success-line: color-mix(in srgb, var(--gfma-ds-success) 34%, var(--gfma-ds-surface));
    --gfma-ds-warning-line: color-mix(in srgb, var(--gfma-ds-warning) 34%, var(--gfma-ds-surface));
    --gfma-ds-danger-line: color-mix(in srgb, var(--gfma-ds-danger) 34%, var(--gfma-ds-surface));
    --gfma-ds-info-line: color-mix(in srgb, var(--gfma-ds-info) 34%, var(--gfma-ds-surface));

    --gfma-ds-primary-tint: color-mix(in srgb, var(--bs-primary, #3d6fb4) 22%, var(--gfma-ds-surface));
    --gfma-ds-primary-tint-line: color-mix(in srgb, var(--bs-primary, #3d6fb4) 42%, var(--gfma-ds-surface));
    --gfma-ds-primary-ring: color-mix(in srgb, var(--bs-primary, #3d6fb4) 35%, transparent);

    /* Kolor wiodacy jako tekst/ikona — domieszka bieli, zeby wyszedl NAD podkladke,
       a nie wtopil sie w nia. Przy 60% trzyma ~5,9:1 na karcie i ~4,9:1 na podkladce
       primary-tint, czyli AA takze dla drobnego tekstu (znaczniki, linki tekstowe). */
    --gfma-ds-primary-fg: color-mix(in srgb, var(--bs-primary, #3d6fb4) 60%, #ffffff);

    /* Cien na ciemnym tle nie jest „ciemniejszym tlem" — musi byc gestszy, bo
       roznica jasnosci miedzy warstwami jest mala. */
    --gfma-ds-sh-1: 0 1px 2px rgba(0, 0, 0, .45);
    --gfma-ds-sh-2: 0 4px 14px rgba(0, 0, 0, .55);
    --gfma-ds-sh-3: 0 16px 40px rgba(0, 0, 0, .65);

    --gfma-ds-scrim: rgba(0, 0, 0, .62);

    color-scheme: dark;
}

/* Znaczniki neutralne: na jasnym to jasnoszare plamy, na ciemnym musza byc
   jasniejsze OD karty, nie ciemniejsze. */
html[data-gfma-theme="dark"] .gfma-badge-neutral {
    background-color: #1b3358;
    border-color: #2c4a78;
}

html[data-gfma-theme="dark"] .badge.bg-secondary {
    background-color: #1b3358 !important;
    border-color: #2c4a78;
}

html[data-gfma-theme="dark"] .gfma-chip > button {
    background-color: #2c4a78;
    color: var(--gfma-ds-text);
}

html[data-gfma-theme="dark"] .gfma-card-hover:hover {
    border-color: #34567f;
}

/* Plyta ikony w kolorze akcentu: domieszka do bieli daje na ciemnym tle
   jasny prostokat, wiec mieszamy z powierzchnia karty. */
html[data-gfma-theme="dark"] .gfma-tiles .gfma-card-icon.bg-secondary {
    background-color: color-mix(in srgb, var(--bs-secondary, #c99700) 22%, var(--gfma-ds-surface)) !important;
    color: color-mix(in srgb, var(--bs-secondary, #c99700) 72%, #ffffff) !important;
}

html[data-gfma-theme="dark"] .gfma-field > .gfma-field-value.is-empty {
    color: #6b81a1;
}

/* Podswietlenie wiersza pod kursorem: na jasnym prawie biale, na ciemnym
   musi byc o stopien JASNIEJSZE od karty. */
html[data-gfma-theme="dark"] .k-grid .k-table-row:hover .k-table-td,
html[data-gfma-theme="dark"] .k-grid .k-table-row.k-hover .k-table-td,
html[data-gfma-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: #12294a;
}

html[data-gfma-theme="dark"] .form-control,
html[data-gfma-theme="dark"] .form-select,
html[data-gfma-theme="dark"] .k-input,
html[data-gfma-theme="dark"] .k-picker {
    border-color: #2c4a78;
}

html[data-gfma-theme="dark"] .form-control:hover,
html[data-gfma-theme="dark"] .form-select:hover,
html[data-gfma-theme="dark"] .k-input:hover,
html[data-gfma-theme="dark"] .k-picker:hover {
    border-color: #3c5c8f;
}

html[data-gfma-theme="dark"] .form-control.is-invalid:focus,
html[data-gfma-theme="dark"] .k-input.k-invalid.k-focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gfma-ds-danger) 28%, transparent);
}

/* Komunikaty: te cztery reguly maja kolory wpisane na sztywno, wiec na ciemnym
   trzeba je policzyc od nowa — tak samo jak tla znacznikow, od powierzchni karty. */
html[data-gfma-theme="dark"] .alert-success {
    background-color: var(--gfma-ds-success-bg);
    border-color: var(--gfma-ds-success-line);
    color: color-mix(in srgb, var(--gfma-ds-success) 82%, #ffffff);
}

html[data-gfma-theme="dark"] .alert-warning {
    background-color: var(--gfma-ds-warning-bg);
    border-color: var(--gfma-ds-warning-line);
    color: color-mix(in srgb, var(--gfma-ds-warning) 82%, #ffffff);
}

html[data-gfma-theme="dark"] .alert-danger {
    background-color: var(--gfma-ds-danger-bg);
    border-color: var(--gfma-ds-danger-line);
    color: color-mix(in srgb, var(--gfma-ds-danger) 82%, #ffffff);
}

html[data-gfma-theme="dark"] .alert-info {
    background-color: var(--gfma-ds-info-bg);
    border-color: var(--gfma-ds-info-line);
    color: color-mix(in srgb, var(--gfma-ds-info) 82%, #ffffff);
}

/* .alert-secondary bierze kolory z map Bootstrapa (bg-subtle / text-emphasis), a te
   sa policzone pod biel: blada plama zlota z ciemnym napisem. Neutralizujemy ja na
   powierzchnie o stopien jasniejsza od karty, tak jak znaczniki neutralne. */
html[data-gfma-theme="dark"] .alert-secondary {
    background-color: #1b3358;
    border-color: #2c4a78;
    color: var(--gfma-ds-text);
}

html[data-gfma-theme="dark"] .k-window,
html[data-gfma-theme="dark"] .k-dialog {
    border-color: var(--gfma-ds-line);
}

/* Bootstrapowe klasy pomocnicze maja kolor w nazwie, wiec zadna zmienna motywu ich
   nie ruszy — „bialy" zostaje bialy takze na ciemnym tle, razem z jasnym tekstem na
   sobie. Przepinamy je na powierzchnie motywu; w wariancie jasnym wychodzi dokladnie
   to samo, co dotad (biel i jasnoszary), wiec regula dziala tylko tutaj. */
html[data-gfma-theme="dark"] .bg-white {
    background-color: var(--gfma-ds-surface) !important;
}

html[data-gfma-theme="dark"] .bg-light {
    background-color: var(--gfma-ds-surface-alt) !important;
}

html[data-gfma-theme="dark"] .text-dark,
html[data-gfma-theme="dark"] .text-black {
    color: var(--gfma-ds-text) !important;
}

/* Bootstrapowe paskowanie i hover liczone sa od koloru cienia (czern z alfa), wiec
   na ciemnym tle sa praktycznie niewidoczne. Rozjasniamy zamiast przyciemniac —
   kierunek zmiany zalezy od tla, nie od reguly. */
html[data-gfma-theme="dark"] .table {
    --bs-table-striped-bg: rgba(255, 255, 255, .04);
    --bs-table-striped-color: var(--gfma-ds-text);
    --bs-table-hover-bg: rgba(255, 255, 255, .07);
    --bs-table-hover-color: var(--gfma-ds-text);
}

html[data-gfma-theme="dark"] .table-light,
html[data-gfma-theme="dark"] .table-light > th,
html[data-gfma-theme="dark"] .table-light > td {
    --bs-table-bg: var(--gfma-ds-surface-alt);
    --bs-table-color: var(--gfma-ds-text);
    background-color: var(--gfma-ds-surface-alt);
    color: var(--gfma-ds-text);
}

/* Wydruk jest zawsze na bialym papierze. Bez tego bloku ciemny motyw drukowalby
   jasny tekst na bieli, czyli pusta kartke. */
@media print {
    html[data-gfma-theme="dark"] {
        --gfma-ds-canvas: #ffffff;
        --gfma-ds-surface: #ffffff;
        --gfma-ds-surface-alt: #f7f8fa;
        --gfma-ds-line: #cccccc;
        --gfma-ds-line-soft: #e4e7ec;
        --gfma-ds-text: #101828;
        --gfma-ds-text-2: #344054;
        --gfma-ds-muted: #667085;
        --gfma-ds-faint: #98a2b3;

        color-scheme: light;
    }

    html[data-gfma-theme="dark"] body {
        color: var(--gfma-ds-text);
    }
}