.btn-roll {
    --bs-btn-color: #fff;
    --bs-btn-bg: #9abf11;
    --bs-btn-border-color: #9abf11;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8fb814;
    --bs-btn-hover-border-color: #8fb814;
    --bs-btn-focus-shadow-rgb: 154, 191, 17;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8fb814;
    --bs-btn-active-border-color: #8fb814;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #8fb814;
    --bs-btn-disabled-border-color: #8fb814;
}

/* Dymki Bootstrap Tooltip w całym systemie (layout sales.phtml inicjuje je na każdym [title]):
   stylujemy bazową klasę .tooltip, więc żaden widok ani inicjalizacja nie musi dodawać własnej.
   Jasna oliwka z białym tekstem pod zielone przyciski; zmienne --bs-tooltip-* kolorują też
   strzałkę. Szerzej niż domyślne 200px, bo treścią bywa pełny komentarz albo opis trybu. */
.tooltip {
	--bs-tooltip-bg: #506528;
	--bs-tooltip-color: #fff;
	--bs-tooltip-opacity: 1;
	--bs-tooltip-max-width: 28rem;
}

.tooltip .tooltip-inner {
	padding: .5rem .75rem;
	border-radius: .375rem;
	box-shadow: 0 .2rem .6rem rgb(0 0 0 / 15%);
	text-align: left;
}

/* Kolor podstawowy tekstu: 100% czarny. style.css ustawia to na body (--body-color), ale komponenty
   Bootstrapa (form-control, form-select, tabele, .text-body) czytają własną zmienną --bs-body-color
   (domyślnie #212529), więc nadpisujemy ją u źródła razem z wariantem RGB. */
:root {
	--bs-body-color: #000;
	--bs-body-color-rgb: 0, 0, 0;
}

/* Placeholdery pól formularza jaśniejsze niż domyślne (--bs-secondary-color to prawie kolor tekstu),
   żeby przykład "Np. Kowalski" nie wyglądał jak wpisana wartość. */
.form-control::placeholder {
	color: #adb5bd;
	opacity: 1;
}

/* Rozmiar: każdy .btn w rozmiarze btn-sm (te same wartości co Bootstrap .btn-sm), więc klasa btn-sm
   w markupie jest neutralna i może zostać. btn-lg w projekcie nie występuje - gdyby wrócił, ta reguła
   (ładowana po bootstrap.min.css) by go nadpisała. Czcionka (rodzina, grubość) bez zmian. */
.btn {
	--bs-btn-padding-y: 0.25rem;
	--bs-btn-padding-x: 0.5rem;
	--bs-btn-font-size: 0.875rem;
	--bs-btn-border-radius: var(--bs-border-radius-sm);
}

/* btn-primary: zieleń z poziomym gradientem (jaśniejsza z lewej, ciemniejsza z prawej), kolor tła
   to środek gradientu - działa tam, gdzie gradient nie (druk, wymuszone kolory, stany Bootstrapa,
   które stawiają tylko background-color). Bootstrap zmienia w hover/active wyłącznie
   background-color, a obraz tła leży nad kolorem, więc gradienty dla tych stanów są niżej osobno.
   Klasa .btn-roll zostaje osobno dla menu głównego i nagłówka wspólnego (layouty) - nie łączyć. */
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #82a311;
	--bs-btn-border-color: #90b422;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #789610;
	--bs-btn-hover-border-color: #789610;
	--bs-btn-focus-shadow-rgb: 130, 163, 17;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #6f8b0e;
	--bs-btn-active-border-color: #6f8b0e;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #82a311;
	--bs-btn-disabled-border-color: #90b422;
	background-image: linear-gradient(to right, #9fc31f, #638302);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-image: linear-gradient(to right, #92b31d, #5b7902);
}

.btn-primary:active,
.btn-primary.active,
.btn-primary.show,
.btn-check:checked + .btn-primary {
	background-image: linear-gradient(to right, #87a61a, #546f02);
}

.btn-primary.disabled,
.btn-primary:disabled {
	background-image: none;
}

/* btn-secondary: jaskrawy niebieski, ten sam schemat co btn-primary (gradient poziomy, tło ze środka).
   Drugi przycisk formularza (Wyczyść, Reset, Anuluj) obok zielonego głównego. */
.btn-secondary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #128ce2;
	--bs-btn-border-color: #128ce2;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #1181d0;
	--bs-btn-hover-border-color: #1181d0;
	--bs-btn-focus-shadow-rgb: 18, 140, 226;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #0f77c0;
	--bs-btn-active-border-color: #0f77c0;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #128ce2;
	--bs-btn-disabled-border-color: #128ce2;
	background-image: linear-gradient(to right, #1a9efc, #0a79c8);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
	background-image: linear-gradient(to right, #1891e8, #096fb8);
}

.btn-secondary:active,
.btn-secondary.active,
.btn-secondary.show,
.btn-check:checked + .btn-secondary {
	background-image: linear-gradient(to right, #1686d6, #0967aa);
}

.btn-secondary.disabled,
.btn-secondary:disabled {
	background-image: none;
}

/* Outline: w spoczynku tło nie jest w pełni przezroczyste, tylko rozjaśnione bielą (alpha 0.33) -
   kolorowy tekst na kolorowym albo ciemniejszym tle miał za mały kontrast. Tekst i obramowanie
   w kolorze środka gradientu; hover i active dostają ten sam gradient co pełny przycisk. */
.btn-outline-primary {
	--bs-btn-color: #658008;
	--bs-btn-bg: rgba(255, 255, 255, 0.45);
	--bs-btn-border-color: #82a311;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #82a311;
	--bs-btn-hover-border-color: #82a311;
	--bs-btn-focus-shadow-rgb: 130, 163, 17;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #789610;
	--bs-btn-active-border-color: #789610;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #82a311;
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: #82a311;
	--bs-gradient: none;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
	background-image: linear-gradient(to right, #9fc31f, #638302);
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-check:checked + .btn-outline-primary {
	background-image: linear-gradient(to right, #92b31d, #5b7902);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
	background-image: none;
}

.btn-outline-secondary {
	--bs-btn-color: #128ce2;
	--bs-btn-bg: rgba(255, 255, 255, 0.45);
	--bs-btn-border-color: #128ce2;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #128ce2;
	--bs-btn-hover-border-color: #128ce2;
	--bs-btn-focus-shadow-rgb: 18, 140, 226;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #1181d0;
	--bs-btn-active-border-color: #1181d0;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #128ce2;
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: #128ce2;
	--bs-gradient: none;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
	background-image: linear-gradient(to right, #1a9efc, #0a79c8);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.show,
.btn-check:checked + .btn-outline-secondary {
	background-image: linear-gradient(to right, #1891e8, #096fb8);
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
	background-image: none;
}