html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    max-width: 100%;
    overflow-x: clip;
}

:root {
    --surface-background: #fff;
    --surface-raised: #fff;
    --surface-muted: #f8f9fa;
    --surface-border: #dee2e6;
    --text-primary: #212529;
    --text-muted: #6c757d;
    --link-color: #006bb7;
    --sidebar-background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    --top-row-background: #f7f7f7;
    --status-positive-background: #d1e7dd;
    --status-positive-text: #0f5132;
    --status-neutral-background: #e9ecef;
    --status-neutral-text: #495057;
    --status-negative-background: #f8d7da;
    --status-negative-text: #842029;
}

[data-theme="dark"] {
    --surface-background: #171b22;
    --surface-raised: #202630;
    --surface-muted: #2a313c;
    --surface-border: #465161;
    --text-primary: #e8edf3;
    --text-muted: #aeb9c6;
    --link-color: #7db7ff;
    --sidebar-background: linear-gradient(180deg, #102b55 0%, #32113d 70%);
    --top-row-background: #202630;
    --status-positive-background: #173f31;
    --status-positive-text: #b9f0d1;
    --status-neutral-background: #343d49;
    --status-neutral-text: #e0e6ee;
    --status-negative-background: #542a31;
    --status-negative-text: #ffd4d9;
}

body { background-color: var(--surface-background); color: var(--text-primary); }
html { caret-color: transparent; }
input, textarea, select, [contenteditable="true"] { caret-color: auto; }
a, .btn-link { color: var(--link-color); }
/* Kolumna pracy wykorzystuje całą resztę szerokości obok automatu. Sam automat
   nie jest ściskany: jego szerokość nadal wynika z liczby kolumn, a przewijanie
   pozostaje we własnym .vending-viewport. */
.split-layout { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.split-main { flex: 1 1 560px; min-width: 0; }
.split-aside { flex: 0 0 auto; min-width: 0; max-width: 100%; }

/* Próg odnosi się do obszaru treści, a nie do całego okna. Powyżej niego flex
   dodatkowo zawija dynamicznie, gdy konkretna szafa jest zbyt szeroka. */
@container page-content (max-width: 899.98px) {
    .split-layout { display: block; }
    .split-aside { margin-top: 1rem; }
}

[data-theme="dark"] .card, [data-theme="dark"] .list-group-item, [data-theme="dark"] .modal-content { background-color: var(--surface-raised); border-color: var(--surface-border); color: var(--text-primary); }
[data-theme="dark"] .table { --bs-table-bg: var(--surface-background); --bs-table-color: var(--text-primary); --bs-table-border-color: var(--surface-border); --bs-table-striped-bg: #222a35; --bs-table-striped-color: var(--text-primary); --bs-table-hover-bg: #2a3441; --bs-table-hover-color: var(--text-primary); color: var(--text-primary); }
[data-theme="dark"] .table-warning { --bs-table-bg: var(--status-negative-background); --bs-table-color: var(--status-negative-text); color: var(--status-negative-text); }
[data-theme="dark"] .table-danger { --bs-table-bg: var(--status-negative-background); --bs-table-color: var(--status-negative-text); color: var(--status-negative-text); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #171b22; border-color: var(--surface-border); color: var(--text-primary); }
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #171b22; color: var(--text-primary); }
/* Strzalka listy rozwijanej jest w Bootstrapie obrazkiem tla z ciemnym obrysem (#343a40),
   wiec na ciemnym polu (#171b22) znikala. Bootstrap 5.3 podmienia ten obrazek pod wlasnym
   atrybutem [data-bs-theme], a ten motyw chodzi po [data-theme], wiec podajemy go sami.
   Zgloszenie wlasciciela 2026-09-08: filtry raportu sprzedazy, ale dotyczylo wszystkich list. */
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e8edf3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Ikony wbudowane w pola przegladarki (kalendarz przy dacie, krzyzyk czyszczacy w polu
   wyszukiwania) rysuje sama przegladarka na czarno - w ciemnym motywie sa niewidoczne.
   Koloru nie da sie im podac, wiec odwracamy jasnosc. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="search"]::-webkit-search-cancel-button {
    filter: invert(1);
}
[data-theme="dark"] .form-check-input { background-color: #171b22; border-color: #8190a2; }
[data-theme="dark"] .form-check-input:checked { background-color: #0d6efd; }
[data-theme="dark"] .btn-outline-primary, [data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .btn-outline-danger { color: var(--text-primary); border-color: #8594a8; }
[data-theme="dark"] .btn-outline-primary:hover, [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="dark"] .btn-outline-danger:hover { color: #fff; }
[data-theme="dark"] .alert-success { background-color: #173f31; border-color: #286346; color: #c3f4d9; }
[data-theme="dark"] .alert-info { background-color: #153c56; border-color: #27617f; color: #c8edff; }
[data-theme="dark"] .alert-warning { background-color: #4d3b16; border-color: #80631e; color: #ffe7a2; }
[data-theme="dark"] .alert-danger { background-color: #542a31; border-color: #89414c; color: #ffd4d9; }
[data-theme="dark"] .badge.bg-secondary { background-color: #586474 !important; }
[data-theme="dark"] .account-page { background: var(--surface-background); }
[data-theme="dark"] .account-card { background: var(--surface-raised); box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .35); }
[data-theme="dark"] .text-secondary, [data-theme="dark"] .detail-eyebrow, [data-theme="dark"] .detail-metadata dt { color: var(--text-muted) !important; }
[data-theme="dark"] .restock-slot-unfilled { background: #4d3b16; }
[data-theme="dark"] .restock-slot-filled { background: #173f31; }

a, .btn-link {
    color: var(--link-color);
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

button, .btn, .form-control, .form-select {
    min-height: 44px;
}

.table-action {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 38px;
    padding: .375rem .75rem;
}

.vc-modal-backdrop { align-items:center; background:var(--surface-modal-backdrop,rgba(0,0,0,.48)); display:flex; inset:0; justify-content:center; padding:1rem; position:fixed; z-index:1050; }
.vc-modal { background-color:var(--surface-raised); border-color:var(--surface-border); color:var(--text-primary); max-height:calc(100vh - 2rem); max-width:28rem; overflow:auto; width:100%; }
.vc-modal-lg { max-width:32rem; }

#components-reconnect-modal { align-items: center; background: var(--surface-modal-backdrop, rgba(0, 0, 0, .48)); display: none; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 2000; }
#components-reconnect-modal.components-reconnect-hide { display: none; }
#components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: flex; }
.components-reconnect-content { background: var(--surface-raised); border: 1px solid var(--surface-border); border-radius: .5rem; color: var(--text-primary); max-width: 28rem; padding: 1.5rem; text-align: center; width: 100%; }
.components-reconnect-content p { margin-bottom: 1rem; }
.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected { display: none; }
#components-reconnect-modal.components-reconnect-show .components-reconnect-show, #components-reconnect-modal.components-reconnect-failed .components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected .components-reconnect-rejected { display: block; }

/* Pole wyboru ma zostać kwadratem: cel dotykowy powiększa wiersz z etykietą, nie samą
   kontrolkę. Wymuszenie 44 px na .form-check-input rozciągnęłoby każdy checkbox
   w filtrach i w wizycie automatu w pionowy prostokąt. */
.form-check {
    align-items: center;
    display: flex;
    gap: .5rem;
    min-height: 44px;
    padding-left: 0;
}

.form-check .form-check-input {
    flex: 0 0 auto;
    margin-left: 0;
    margin-top: 0;
}

.table-responsive { max-width: 100%; }
.table td { overflow-wrap: anywhere; }
.table th { overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* Etykiety zwiniętych kolumn były renderowane jako .visually-hidden: czytnik ekranu
   wiedział, co czyta, ale pracownik na tablecie dostawał kolumnę gołych wartości
   („1", „1,78", „—") bez znaczenia. Pokazujemy je jako przygaszony prefiks. Bootstrap
   definiuje .visually-hidden przez !important, więc nadpisanie też go wymaga. */
.table-folded .visually-hidden {
    clip: auto !important;
    clip-path: none !important;
    color: var(--text-muted);
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    position: static !important;
    white-space: normal !important;
    width: auto !important;
}

.detail-eyebrow {
    color: var(--text-muted);
    font-size: .8rem;
    margin-bottom: .25rem;
}

.detail-title {
    margin-bottom: .5rem;
    overflow-wrap: anywhere;
}

.detail-metadata {
    display: grid;
    gap: .65rem 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-metadata div { min-width: 0; }
.detail-metadata dt {
    color: var(--text-muted);
    font-size: .8rem;
    margin-bottom: .2rem;
    text-transform: uppercase;
}
.detail-metadata dd { margin-bottom: 0; overflow-wrap: anywhere; }
.stock-row { cursor: pointer; }
.stock-row:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .45); outline-offset: -3px; }

@media (max-width: 640px) {
    .detail-metadata { grid-template-columns: 1fr; }
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.account-page {
    align-items: center;
    background: var(--surface-muted);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.account-card {
    background: var(--surface-raised);
    border-radius: .5rem;
    box-sizing: border-box;
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .08);
    max-height: calc(100dvh - 2rem);
    max-width: 28rem;
    overflow-y: auto;
    padding: 2rem;
    width: 100%;
}

.application-shell { display: flex; flex-direction: column; max-width: 100%; overflow-x: clip; }
.application-sidebar { background-image: var(--sidebar-background); display: flex; flex-direction: column; }
.application-main { flex: 1; min-width: 0; }
.password-requirements { font-size: .875rem; line-height: 1.4; }

@media (min-width: 641px) {
    .application-shell { flex-direction: row; }
    .application-sidebar { flex: 0 0 250px; height: 100vh; position: sticky; top: 0; width: 250px; }
    .application-main .content { padding-left: 2rem !important; padding-right: 1.5rem !important; }
    html.sidebar-collapsed .application-sidebar { flex-basis: 4.5rem; width: 4.5rem; }

    @media (max-width: 1023.98px) {
        html:not(.sidebar-expanded) .application-sidebar { flex-basis: 4.5rem; width: 4.5rem; }
    }
}

@media (max-height: 700px) {
    .account-card { max-height: calc(100dvh - 2rem); padding: 1rem; }
    .account-card .password-requirements, .account-card > ul.text-secondary { font-size: .8125rem; line-height: 1.3; margin-bottom: .75rem; }
    .account-card > ul.text-secondary { list-style: none; padding-left: 0; }
    .account-card > ul.text-secondary li { display: inline; }
    .account-card > ul.text-secondary li:not(:last-child)::after { content: " • "; }
    .account-card form .mb-3 { margin-bottom: .75rem !important; }
}