img {
  object-fit: cover;
  max-width: 100%;
}

.site-logo .navbar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
}
.site-logo .navbar-brand .logo {
  max-width: 190px;
}
.site-logo .logo-text .alt {
  color: #ff681c;
  background-color: #F2ece7;
  font-size: 12px;
}

a {
  color: #ff681c;
}
a:hover {
  color: #948685;
}

.auth-col-main .btn.btn-primary {
  background-color: #ff681c;
  border: none;
  border-radius: 0;
  color: #ffffff;
}
.auth-col-main .btn.btn-primary:hover {
  background-color: #948685;
}

input, input.form-control, textarea, textarea.form-control, .auth-col-main input, .auth-col-main input.form-control {
  padding: 10px;
  background-color: #ffffff;
  box-shadow: none;
  border-radius: 0;
  border: 1px solid #b2b2b2;
}
input, input::placeholder, input.form-control, input.form-control::placeholder, textarea, textarea::placeholder, textarea.form-control, textarea.form-control::placeholder, .auth-col-main input, .auth-col-main input::placeholder, .auth-col-main input.form-control, .auth-col-main input.form-control::placeholder {
  color: #2a2e33 !important;
}
input:focus, input.form-control:focus, textarea:focus, textarea.form-control:focus, .auth-col-main input:focus, .auth-col-main input.form-control:focus {
  border-color: #ff681c;
}

.auth-col-main {
  border-radius: 0 !important;
  position: relative;
  overflow: visible;
}
.auth-col-main:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("../assets/images/decor-4.png");
  transform: translate(15px, 15px);
  z-index: -1;
  opacity: 0.4;
}

#wrapper #logoTop .logo-text .alt {
  color: #ff681c;
  background-color: #F2ece7;
  font-size: 12px;
}
#wrapper #logoTop .logo {
  max-width: 32px;
  transform: translateY(-4px);
}
#wrapper.toggled #sidebar-wrapper .navbar .nav-pills .nav-link .mdi {
  color: #ffffff !important;
}

.alert.alert-info {
  background-color: #F2ece7;
  border-color: rgba(255, 104, 28, 0.2);
}

#sidebar-wrapper .navbar .nav-pills .nav-link.active .mdi {
  color: #ffffff !important;
  background: #ff681c !important;
  border-color: #ff681c !important;
}
#sidebar-wrapper .navbar .nav-pills .nav-link .mdi {
  background: none;
  color: #2a2e33;
  border: 1px solid #2a2e33;
  max-height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#sidebar-wrapper #logo, #sidebar-wrapper .text, #sidebar-wrapper .text-light {
  color: #ff681c !important;
}
#sidebar-wrapper #logo .logo-img {
  max-width: 120px;
  margin: 0 auto;
  display: block;
}

.bg-primary {
  background-color: #2a2e33 !important;
}
/*
table.sticky thead {
  position: sticky;
  top: 51px;
  z-index: 10000;
}

body {
  overflow-x: hidden;
}

#wrapper {
  overflow: initial !important;
}*/

.fixed-table-header {
  position: sticky;
  top: 51px;
  z-index: 10000;
  overflow: hidden;
  visibility: hidden;
}

.table-body {
  overflow-x: auto;
  visibility: hidden;
}

.table-body::-webkit-scrollbar {
  height: 0;
}

body {
  overflow-x: hidden;
}

#wrapper, .card-body:not(.skip) {
  overflow: initial !important;
}

.table-scroll {
  position: sticky;
  bottom: 0;
  z-index: 10000;
  overflow-x: scroll;
}

.table-scroll-width { 
  height: 1px;
}

.table-scroll::-webkit-scrollbar {
  height: 10px;
}

.table-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.table-scroll::-webkit-scrollbar-thumb {
  background: #ff681c;
}

.table-scroll::-webkit-scrollbar-thumb:hover {
  background: #e5540c;
}

/* ==========================================================================
   Panel (prawa sekcja) - dopasowanie do nowego headera i sidebara
   Paleta "stone" + pomarańcz DH (#FF681C), zaokrąglenia jak w menu
   ========================================================================== */
:root {
  --dh-orange: #FF681C;
  --dh-orange-600: #E2500F;
  --dh-orange-700: #BC3D0D;
  --dh-orange-50: #FFF4ED;
  --dh-orange-200: #FFC9A8;
  --dh-stone-50: #fafaf9;
  --dh-stone-100: #f5f5f4;
  --dh-stone-150: #f0eeec;
  --dh-stone-200: #e7e5e4;
  --dh-stone-300: #d6d3d1;
  --dh-stone-400: #a8a29e;
  --dh-stone-500: #78716c;
  --dh-stone-600: #57534e;
  --dh-stone-700: #44403c;
  --dh-stone-800: #292524;
  --dh-stone-900: #1c1917;
  --dh-radius: .5rem;
  --dh-radius-lg: .75rem;
  --dh-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 1px 3px rgba(28, 25, 23, .06);
  --dh-ring: 0 0 0 3px rgba(255, 104, 28, .22);
}

.dh-content a:not(.btn):not(.badge):hover {
  color: var(--dh-orange-700);
}

/* szaroniebieskie text-muted i etykiety pól ze starego motywu -> ciepłe szarości */
.dh-content .text-muted {
  color: var(--dh-stone-500) !important;
}
.dh-content label {
  color: var(--dh-stone-600);
}

/* --- Karty ---------------------------------------------------------------- */
.dh-content .card {
  background: #fff;
  border: 1px solid var(--dh-stone-200) !important;
  border-radius: var(--dh-radius-lg);
  box-shadow: var(--dh-shadow);
}
.dh-content #mainSite .card {
  margin: 0 0 1rem 0;
}
.dh-content .card-header {
  background: #fff;
  border-bottom: 1px solid var(--dh-stone-200);
  border-radius: var(--dh-radius-lg) var(--dh-radius-lg) 0 0 !important;
  color: var(--dh-stone-900);
  padding: .9rem 1.25rem;
}
.dh-content .card-header:only-child {
  border-bottom: none;
  border-radius: var(--dh-radius-lg) !important;
}
.dh-content .card-header strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dh-stone-900);
}

/* --- Komunikaty ----------------------------------------------------------- */
.dh-content .alert {
  border-radius: var(--dh-radius);
  font-size: .9rem;
}
.dh-content .alert.alert-info {
  background: var(--dh-orange-50);
  border: 1px solid #FFE0CC;
  border-left: 4px solid var(--dh-orange);
  color: var(--dh-stone-800);
}
.dh-content .alert.alert-info a {
  font-weight: 600;
}

/* --- Przyciski ------------------------------------------------------------ */
.dh-content .btn {
  border-radius: var(--dh-radius);
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dh-content .btn-sm {
  border-radius: .4rem;
  font-size: .8rem;
}
.dh-content .btn:focus,
.dh-content .btn.focus {
  box-shadow: var(--dh-ring);
}
.dh-content .btn:active {
  transform: translateY(1px);
}

.dh-content .btn-primary {
  background-color: var(--dh-orange);
  border-color: var(--dh-orange);
  color: #fff;
}
.dh-content .btn-primary:hover,
.dh-content .btn-primary:focus,
.dh-content .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--dh-orange-600);
  border-color: var(--dh-orange-600);
  color: #fff;
}

.dh-content .btn-secondary {
  background-color: var(--dh-stone-800);
  border-color: var(--dh-stone-800);
  color: #fff;
}
.dh-content .btn-secondary:hover,
.dh-content .btn-secondary:focus,
.dh-content .btn-secondary:not(:disabled):not(.disabled):active {
  background-color: var(--dh-stone-900);
  border-color: var(--dh-stone-900);
  color: #fff;
}

.dh-content .btn-outline-secondary {
  background-color: #fff;
  border-color: var(--dh-stone-300);
  color: var(--dh-stone-600);
}
.dh-content .btn-outline-secondary:hover,
.dh-content .btn-outline-secondary:focus,
.dh-content .btn-outline-secondary:not(:disabled):not(.disabled):active {
  background-color: var(--dh-orange-50);
  border-color: var(--dh-orange-200);
  color: var(--dh-orange-700);
}

.dh-content .btn-info {
  background-color: #0e7490;
  border-color: #0e7490;
  color: #fff;
}
.dh-content .btn-info:hover,
.dh-content .btn-info:focus {
  background-color: #155e75;
  border-color: #155e75;
  color: #fff;
}

.dh-content .btn-success {
  background-color: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.dh-content .btn-success:hover,
.dh-content .btn-success:focus {
  background-color: #15803d;
  border-color: #15803d;
  color: #fff;
}

.dh-content .btn-warning {
  background-color: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}
.dh-content .btn-warning:hover,
.dh-content .btn-warning:focus {
  background-color: #d97706;
  border-color: #d97706;
  color: #fff;
}

.dh-content .btn-danger {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.dh-content .btn-danger:hover,
.dh-content .btn-danger:focus {
  background-color: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

/* Przyciski akcji w tabelach - lżejsze, ikonowe, pełny kolor dopiero na hover */
.dh-content .table .btn-sm {
  min-width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .45rem !important;
  margin: 1px 0;
  font-size: .95rem;
  box-shadow: none;
}
.dh-content .table .btn-secondary,
.dh-content .table .btn-outline-secondary {
  background-color: #fff;
  border-color: var(--dh-stone-200);
  color: var(--dh-stone-600);
}
.dh-content .table .btn-secondary:hover,
.dh-content .table .btn-outline-secondary:hover {
  background-color: var(--dh-orange);
  border-color: var(--dh-orange);
  color: #fff;
}
.dh-content .table .btn-info {
  background-color: #ecfeff;
  border-color: #a5f3fc;
  color: #0e7490;
}
.dh-content .table .btn-info:hover {
  background-color: #0e7490;
  border-color: #0e7490;
  color: #fff;
}
.dh-content .table .btn-success {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}
.dh-content .table .btn-success:hover {
  background-color: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.dh-content .table .btn-danger {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.dh-content .table .btn-danger:hover {
  background-color: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

/* --- Tabele --------------------------------------------------------------- */
.dh-content .table {
  color: var(--dh-stone-800);
}
/* nagłówek bywa w <thead class="bg-primary"> albo w <tbody class="bg-primary"> */
.dh-content .table .bg-primary,
.dh-content .table .bg-primary > tr,
.dh-content .table-striped .bg-primary > tr:nth-of-type(odd),
.dh-content .table-striped .bg-primary > tr:nth-of-type(even),
.dh-content .table-hover .bg-primary > tr:hover,
.dh-content .table-col .bg-primary > tr > th:nth-child(2n) {
  background-color: var(--dh-stone-900) !important;
}
.dh-content .table-hover .bg-primary > tr:hover > th:first-child {
  box-shadow: none;
}
/* każda komórka nagłówka/stopki z własnym tłem - admin-user2.css daje
   .table th { background: none !important }, a tło samego wiersza przeglądarki
   rysują różnie (np. pierwsza komórka z zaokrąglonym rogiem wychodziła jasna) */
.dh-content .table .bg-primary > tr > th {
  background-color: var(--dh-stone-900) !important;
}
.dh-content .table tbody.bg-primary {
  border: none;
}
.dh-content .table th {
  color: var(--dh-stone-600) !important;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .85rem .5rem;
  border-top: none;
  border-bottom: none !important;
  white-space: nowrap;
}
.dh-content .table th:not(:last-child) {
  border-right: 1px solid var(--dh-stone-150);
}
.dh-content .table .bg-primary th {
  color: var(--dh-stone-200) !important;
}
.dh-content .table .bg-primary th:not(:last-child) {
  border-right: 1px solid var(--dh-stone-800);
}
.dh-content .table-sort thead th {
  transition: color .12s ease, background-color .12s ease;
}
.dh-content .table-sort thead th:hover {
  color: #fff !important;
  background-color: var(--dh-stone-800) !important;
}
.dh-content .table .bg-primary > tr:first-child > th:first-child {
  border-top-left-radius: var(--dh-radius);
}
.dh-content .table .bg-primary > tr:first-child > th:last-child {
  border-top-right-radius: var(--dh-radius);
}
/* header aplikacji ma teraz 4rem - przyklejony nagłówek tabeli pod nim */
.fixed-table-header {
  top: 4rem;
}

.dh-content .table td {
  padding: .6rem .5rem;
  border-top: 1px solid var(--dh-stone-150);
  font-size: .875rem;
}
.dh-content .table td:not(:last-child) {
  border-right: 1px solid var(--dh-stone-150);
}
/* zamiast szarych pasów co drugą kolumnę - delikatne pasy wierszy */
.dh-content .table-col tr td:nth-child(2n),
.dh-content .table-col tr th:nth-child(2n) {
  background: transparent;
}
.dh-content .table-striped tbody tr:nth-of-type(odd) {
  background-color: #fff;
}
.dh-content .table-striped tbody tr:nth-of-type(even) {
  background-color: var(--dh-stone-50);
}
.dh-content .table-hover tbody tr {
  transition: background-color .12s ease;
}
.dh-content .table-hover tbody tr:hover {
  background-color: var(--dh-orange-50) !important;
  color: var(--dh-stone-900);
}
.dh-content .table-hover tbody tr:hover > td:first-child {
  box-shadow: inset 3px 0 0 var(--dh-orange);
}
.dh-content .table td small,
.dh-content .table td .small {
  color: var(--dh-stone-600);
}
.dh-content .table td a.text-success {
  color: #15803d !important;
  font-weight: 600;
}
.dh-content .table td a.text-success:hover {
  color: var(--dh-orange-700) !important;
}
.dh-content .table .text-danger {
  color: #dc2626 !important;
  font-weight: 600;
}
.dh-content .table .text-success {
  font-weight: 600;
}

/* wyróżnienie najniższej ceny w wynikach wyszukiwania produktów */
.dh-content #searchProductResults .top-row {
  border-radius: .35rem;
  font-weight: 600;
  margin: 2px 0;
}
.dh-content #searchProductResults .top-row.bg-success {
  background-color: #16a34a !important;
}
.dh-content #searchProductResults .top-row.bg-info {
  background-color: #0e7490 !important;
}
/* etykieta z najniższą ceną musi mieć biały tekst - także gdy to .xs-badge
   (karta produktu na mobile, gdzie etykiety mają ciemny tekst na jasnym tle) */
#searchProductResults tr.product-item .top-row.bg-success,
#searchProductResults tr.product-item .top-row.bg-info {
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 600;
}
#searchProductResults tr.product-item .top-row.bg-success {
  background-color: #16a34a !important;
}
#searchProductResults tr.product-item .top-row.bg-info {
  background-color: #0e7490 !important;
}
#searchProductResults tr.product-item .top-row * {
  color: #fff !important;
}
/* blok parametrów (Sztuk w op., Waga, Cena za kg/szt.) jest w <small>, a
   admin-user2.css daje small { opacity: .7 } - to wybielało też wyróżnienie.
   Przygaszenie tekstu kolorem zamiast przezroczystości. */
#searchProductResults small.xs-normal-text {
  opacity: 1;
  color: var(--dh-stone-500);
}

/* lista odbiorców: "Dostawcy: N" + rozwijana lista badge */
.dh-content .suppliers-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .55rem .3rem .75rem;
  background: #fff;
  border: 1px solid var(--dh-stone-200);
  border-radius: 999px;
  color: var(--dh-stone-700);
  font-size: .8rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dh-content .suppliers-toggle strong {
  color: var(--dh-stone-900);
}
.dh-content .suppliers-toggle .mdi {
  font-size: 1rem;
  line-height: 1;
  transition: transform .2s ease;
}
.dh-content .suppliers-toggle:hover,
.dh-content .suppliers-toggle:focus {
  background: var(--dh-orange-50);
  border-color: var(--dh-orange-200);
  color: var(--dh-orange-700);
  outline: none;
}
.dh-content .suppliers-toggle:hover strong,
.dh-content .suppliers-toggle[aria-expanded="true"] strong {
  color: var(--dh-orange-700);
}
.dh-content .suppliers-toggle[aria-expanded="true"] {
  background: var(--dh-orange-50);
  border-color: var(--dh-orange-200);
  color: var(--dh-orange-700);
}
.dh-content .suppliers-toggle[aria-expanded="true"] .mdi {
  transform: rotate(180deg);
}
/* szerokość ustalana przy ładowaniu (JS kopiuje ją do nagłówka), żeby po
   rozwinięciu badge układały się w kilka kolumn, a nie jeden pod drugim */
.dh-content .table td.hotel-suppliers-cell {
  min-width: 340px;
}
.dh-content .hotel-suppliers__list {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding-top: .5rem;
}
/* rozwinięty wiersz - pozostałe komórki do góry, a nie na środek */
.dh-content .table tr:has(.hotel-suppliers.show, .hotel-suppliers.collapsing) > td {
  vertical-align: top;
}
.dh-content .hotel-suppliers__list .badge {
  white-space: normal;
  text-align: left;
}

/* --- Badge (statusy) ------------------------------------------------------ */
.dh-content .badge {
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: .72rem;
  padding: .3em .7em;
  letter-spacing: .01em;
}
.dh-content .badge .mdi {
  font-size: .8rem;
  line-height: 1;
}
/* małe ikonki statusu przy dostawcach w wierszach tabeli */
.dh-content .table td .small .badge {
  padding: .1em .3em;
  font-size: .65rem;
  vertical-align: middle;
}
.dh-content .table td .small .badge .mdi {
  font-size: .7rem;
}
.dh-content .badge.badge-info,
.dh-content .badge.badge-info.text-white {
  background-color: #e0f2fe;
  border-color: #bae6fd;
  color: #0369a1 !important;
}
.dh-content .badge.badge-success,
.dh-content .badge.badge-success.text-white {
  background-color: #dcfce7;
  border-color: #bbf7d0;
  color: #15803d !important;
}
.dh-content .badge.badge-warning,
.dh-content .badge.badge-warning.text-white {
  background-color: #fef3c7;
  border-color: #fde68a;
  color: #b45309 !important;
}
.dh-content .badge.badge-danger,
.dh-content .badge.badge-danger.text-white {
  background-color: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c !important;
}
.dh-content .badge.badge-secondary {
  background-color: var(--dh-stone-100);
  border-color: var(--dh-stone-200);
  color: var(--dh-stone-700) !important;
}
.dh-content .badge.badge-primary {
  background-color: var(--dh-orange-50);
  border-color: var(--dh-orange-200);
  color: var(--dh-orange-700) !important;
}

/* --- Formularze / filtry -------------------------------------------------- */
.dh-content input.form-control,
.dh-content textarea.form-control,
.dh-content select.form-control,
.dh-content select {
  border: 1px solid var(--dh-stone-300);
  border-radius: var(--dh-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dh-content input.form-control:hover,
.dh-content select:hover {
  border-color: var(--dh-stone-400);
}
.dh-content input.form-control:focus,
.dh-content textarea.form-control:focus,
.dh-content select:focus {
  border-color: var(--dh-orange) !important;
  box-shadow: var(--dh-ring) !important;
  outline: none;
}
.dh-content .select2-container--default .select2-selection--single,
.dh-content .select2-container--default .select2-selection--multiple {
  background: #fff !important;
  border: 1px solid var(--dh-stone-300);
  border-radius: var(--dh-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dh-content .select2-container--default .select2-selection:hover {
  border-color: var(--dh-stone-400);
}
.dh-content .select2-container--default.select2-container--focus .select2-selection,
.dh-content .select2-container--default.select2-container--open .select2-selection {
  border-color: var(--dh-orange);
  box-shadow: var(--dh-ring);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--dh-orange) !important;
  color: #fff !important;
}
.select2-dropdown {
  border-color: var(--dh-stone-300) !important;
  border-radius: var(--dh-radius) !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(28, 25, 23, .12);
}

/* --- Paginacja ------------------------------------------------------------ */
.dh-content .pagination .current,
.dh-content .pagination .page,
.dh-content .pagination .last,
.dh-content .pagination .previous,
.dh-content .pagination .first,
.dh-content .pagination .next {
  border: 1px solid var(--dh-stone-200);
  border-radius: .4rem;
  background: #fff;
  padding: 0;
  margin-right: 4px;
  overflow: hidden;
}
.dh-content .pagination .page a,
.dh-content .pagination .last a,
.dh-content .pagination .previous a,
.dh-content .pagination .first a,
.dh-content .pagination .next a,
.dh-content .pagination .current {
  display: inline-block;
  min-width: 34px;
  padding: .35rem .6rem;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--dh-stone-600);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.dh-content .pagination .page a:hover,
.dh-content .pagination .last a:hover,
.dh-content .pagination .previous a:hover,
.dh-content .pagination .first a:hover,
.dh-content .pagination .next a:hover {
  background: var(--dh-orange-50);
  color: var(--dh-orange-700);
}
.dh-content .pagination .current {
  background: var(--dh-orange);
  border-color: var(--dh-orange);
  color: #fff;
}

/* --- Przyciski formularzy edycji: Anuluj | Zapisz ------------------------
   Ten sam układ we wszystkich modułach; w .row dostają padding kolumny,
   żeby stały równo z lewą krawędzią kart. */
.dh-content .form-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 1.25rem;
}
.dh-content .row > .form-actions {
  padding-left: 15px;
  padding-right: 15px;
}
.dh-content .form-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 42px;
  padding: 0 1.5rem;
  font-size: .95rem;
}

/* Formularze edycji: zewnętrzne <div class="form-check mb-3"> wokół selecta
   statusu / sekcji dawało zbędne wcięcie 1.25rem. Prawdziwe checkboxy mają
   własny, wewnętrzny .form-check z formularza Symfony, więc zostają poprawne. */
.dh-content .form-check.mb-3 {
  padding-left: 0;
}

/* --- Edycja produktu: Powiązania (dostawcy) ------------------------------ */
/* nagłówek "Dostawca / Cena / Kod" - jak nagłówki tabel */
.dh-content #supplierHasProducts > .row.mb-1 {
  /* bez ujemnych marginesów .row - równo z tytułem, polami i przyciskiem */
  margin-left: 0;
  margin-right: 0;
  margin-bottom: .75rem !important;
  border-radius: var(--dh-radius);
  overflow: hidden;
}
.dh-content #supplierHasProducts > .row.mb-1 > .bg-light {
  background-color: var(--dh-stone-900) !important;
  border-color: var(--dh-stone-800) !important;
  padding-top: .45rem;
  padding-bottom: .45rem;
}
.dh-content #supplierHasProducts > .row.mb-1 > .col-6.bg-light {
  border-top: 1px solid var(--dh-stone-800);
}
.dh-content #supplierHasProducts > .row.mb-1 > .col-6.bg-light + .col-6.bg-light {
  border-left: 1px solid var(--dh-stone-800);
}
.dh-content #supplierHasProducts > .row.mb-1 label {
  margin: 0;
  color: var(--dh-stone-200);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
/* wiersz dostawcy */
.dh-content #supplierHasProducts .collection-container {
  border-bottom: 1px solid var(--dh-stone-150) !important;
  padding-bottom: .75rem;
  margin: 0 0 .75rem 0 !important;
  align-items: flex-end;
}
/* kolumny bez paddingu - krawędzie równo z nagłówkiem; odstępy ręcznie:
   [dostawca .......... ][usuń]
   [cena    ]  [kod        ] */
.dh-content #supplierHasProducts .collection-container > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.dh-content #supplierHasProducts .collection-container > .col-10 {
  padding-right: .5rem !important;
}
.dh-content #supplierHasProducts .collection-container > .col-2 {
  display: flex;
  justify-content: flex-end;
}
.dh-content #supplierHasProducts .collection-container > .col-6:nth-child(3) {
  padding-right: .375rem !important;
}
.dh-content #supplierHasProducts .collection-container > .col-6:nth-child(4) {
  padding-left: .375rem !important;
}
.dh-content #supplierHasProducts .collection-container .form-group {
  margin-bottom: 0;
}
.dh-content #supplierHasProducts .select2-small .select2-selection,
.dh-content #supplierHasProducts .select2-selection {
  height: 40px !important;
}
.dh-content #supplierHasProducts .select2-selection__rendered {
  line-height: 38px !important;
  padding-left: .9rem;
}
.dh-content #supplierHasProducts .select2-selection__arrow {
  height: 38px !important;
}
.dh-content #supplierHasProducts .collection-container .btn-danger {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fef2f2;
  border-color: #fecaca;
  font-size: 1rem;
}
.dh-content #supplierHasProducts .collection-container .btn-danger .mdi {
  color: #dc2626 !important;
}
.dh-content #supplierHasProducts .collection-container .btn-danger:hover {
  background-color: #dc2626;
  border-color: #dc2626;
}
.dh-content #supplierHasProducts .collection-container .btn-danger:hover .mdi {
  color: #fff !important;
}

/* --- Filtry nad listami - tylko desktop ----------------------------------
   Karta filtra: form > .card > .card-body.py-2  albo  .card-body.py-2 > form.
   Pola i przyciski jednej wysokości, "szukaj" jako kwadratowa ikona
   (bez min-width 120px z admin-user2.css). */
@media (min-width: 992px) {
  .dh-content form .card-body.py-2 input.form-control,
  .dh-content form .card-body.py-2 select,
  .dh-content .card-body.py-2 > form input.form-control,
  .dh-content .card-body.py-2 > form select {
    height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .dh-content form .card-body.py-2 .btn,
  .dh-content .card-body.py-2 > form .btn {
    height: 40px;
    min-width: 0;
    padding: 0 1.1rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    font-size: .875rem;
    border-radius: var(--dh-radius);
  }
  .dh-content form .card-body.py-2 .btn-primary,
  .dh-content .card-body.py-2 > form .btn-primary {
    width: 44px;
    padding: 0 !important;
    font-size: 1.25rem;
  }
  .dh-content form .card-body.py-2 .btn + .btn,
  .dh-content .card-body.py-2 > form .btn + .btn {
    margin-left: .35rem;
  }
  .dh-content form .card-body.py-2 .btn-light,
  .dh-content .card-body.py-2 > form .btn-light {
    background: #fff;
    border: 1px solid var(--dh-stone-300);
    color: var(--dh-stone-600);
  }
  .dh-content form .card-body.py-2 .btn-light:hover,
  .dh-content .card-body.py-2 > form .btn-light:hover {
    background: var(--dh-orange-50);
    border-color: var(--dh-orange-200);
    color: var(--dh-orange-700);
  }
}

/* Przycisk "Wybierz produkty / i kliknij aby kontynuować": na desktopie jedna
   linia (small dziedziczy rozmiar i pogrubienie), na węższych - dwie linie. */
#searchProduct .search-modal-continue__sub {
  font-size: inherit;
  font-weight: inherit;
}
@media (max-width: 991.98px) {
  #searchProduct .card-header div[style*="position: fixed"] .btn-dark {
    justify-content: flex-start;
    gap: .75rem;
    padding: .55rem 1rem;
    text-align: left;
  }
  #searchProduct .search-modal-continue__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
  }
  #searchProduct .search-modal-continue__title {
    font-size: 1rem;
    font-weight: 700;
  }
  #searchProduct .search-modal-continue__sub {
    display: block;
    margin-top: .1rem;
    font-size: .8rem;
    font-weight: 400;
    opacity: .9;
  }
  #searchProduct .search-modal-continue__sub::first-letter {
    text-transform: uppercase;
  }
}

/* --- Modal wyszukiwania produktów - węższe ekrany (< 992px) ---------------
   Wiersz Cena/Fav: "od" i "do" z małym odstępem (klasa g-0 z BS5 nie działa
   w BS4), Fav do prawej krawędzi - równo z polami i przyciskami ⊘ wyżej. */
@media (max-width: 991.98px) {
  #searchProductForm .search-box .row.g-0 {
    margin: 0 -4px;
  }
  #searchProductForm .search-box .row.g-0 > .col {
    padding: 0 4px;
  }
  #searchProductForm .product-fav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
  }
  /* boksy (kategorie / formularz) jeden pod drugim - z odstępem */
  #searchProductForm .search-box {
    margin-bottom: .75rem;
  }
  /* pola i przyciski jednej wysokości (także 768-991px, nie tylko telefon);
     Szukaj / Wyczyść - normalny rozmiar zamiast btn-sm */
  #searchProductForm .search-box .form-control {
    height: 42px !important;
  }
  #searchProductForm .input-group-addon .btn {
    height: 42px;
  }
  #searchProductForm .search-box .btn-block:not(.text-white) {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    font-weight: 700;
  }

  /* górny pasek: [ ✓ Wybierz produkty... → ][ X ] */
  #searchProduct .card-header div[style*="position: fixed"] {
    display: flex;
    align-items: stretch;
  }
  #searchProduct .card-header div[style*="position: fixed"] .btn-dark {
    flex: 1 1 auto;
    width: auto;
    margin: 0;
  }
  #searchProduct .search-modal-cancel {
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border: none;
    border-left: 1px solid var(--dh-orange-600);
    border-radius: 0;
    color: var(--dh-stone-700);
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(28, 25, 23, .15);
  }
  #searchProduct .search-modal-cancel:hover,
  #searchProduct .search-modal-cancel:focus {
    background: #fef2f2;
    color: #dc2626;
  }
}

/* --- Modal wyszukiwania produktów (#searchProduct) – tylko desktop -------- */
@media (min-width: 992px) {
  /* dwa boksy obok siebie: kategorie + formularz, równa wysokość, pełna szerokość */
  #searchProductForm > .row.m-0 {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1.25rem;
  }
  #searchProductForm .search-box {
    margin: 0 !important;
    padding: 1.25rem;
    background: var(--dh-stone-50);
    border: 1px solid var(--dh-stone-200);
    border-radius: var(--dh-radius-lg);
  }
  /* lista kategorii: wysokość bierze od formularza, przewija się w środku */
  #searchProductForm .search-box.col-lg-4 {
    flex: 0 0 36%;
    max-width: 36%;
    max-height: none !important;
    contain: size;
    overflow-y: auto;
    padding: .75rem 1rem;
  }
  #searchProductForm .search-box.col-lg-4 > .row {
    margin: 0 -4px;
  }
  #searchProductForm .search-box.col-lg-4 .btn.btn-secondary.text-white {
    background: #fff !important;
    border: 1px solid var(--dh-stone-200);
    border-radius: var(--dh-radius);
    color: var(--dh-stone-700) !important;
    padding: .45rem .5rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #searchProductForm .search-box.col-lg-4 .btn.btn-secondary.text-white:hover {
    background: var(--dh-orange-50) !important;
    border-color: var(--dh-orange-200);
    color: var(--dh-orange-700) !important;
  }
  #searchProductForm .search-box:not(.col-lg-4) {
    flex: 1 1 auto;
    max-width: none;
  }

  /* pola i przyciski - jedna wysokość */
  #searchProductForm .search-box:not(.col-lg-4) label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--dh-stone-600);
    margin-bottom: .35rem;
  }
  #searchProductForm .search-box:not(.col-lg-4) .form-group {
    margin-bottom: 1rem;
  }
  #searchProductForm .search-box:not(.col-lg-4) .form-control {
    height: 42px !important;
    padding: 0 .9rem !important;
    font-size: .9rem;
    background-color: #fff !important;
  }
  #searchProductForm .search-box:not(.col-lg-4) select.form-control {
    padding-right: 2.25rem !important;
  }
  #searchProductForm .search-box:not(.col-lg-4) .row.g-0 {
    margin: 0 -4px;
  }
  #searchProductForm .search-box:not(.col-lg-4) .row.g-0 > .col {
    padding: 0 4px;
  }
  #searchProductForm .input-group {
    flex-wrap: nowrap;
  }
  #searchProductForm .input-group > .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  #searchProductForm .input-group-addon .btn {
    height: 42px;
    width: 46px;
    padding: 0 !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-size: 1.05rem;
  }
  #searchProductForm .product-fav-btn {
    height: 42px;
    width: 100%;
    max-width: 64px;
    padding: 0 !important;
    font-size: 1.1rem;
  }
  /* Szukaj / Wyczyść */
  #searchProductForm .search-box:not(.col-lg-4) .btn-block {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
  }

  /* Nagłówek modalu przyklejony do góry przy przewijaniu wyników.
     Pierwsza karta dostaje display: contents, żeby rodzicem nagłówka było
     .modal-content (sticky działa wtedy na całej wysokości modalu). */
  #searchProduct .modal-content > .card:first-child {
    display: contents;
  }
  #searchProduct .modal-content > .card:first-child > .card-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--dh-stone-200);
    border-radius: var(--dh-radius-lg) var(--dh-radius-lg) 0 0 !important;
    box-shadow: 0 6px 12px -8px rgba(28, 25, 23, .18);
  }
  #searchProduct .modal-content > .card:first-child > .card-body {
    background: #fff;
  }

  /* "Wybierz produkty i kliknij aby kontynuować" + "X" - w prawym rogu
     nagłówka (inline position: fixed nadpisane na absolute względem nagłówka,
     więc nie wyjdą poza modal niezależnie od paska przewijania) */
  #searchProduct .card-header div[style*="position: fixed"] {
    position: absolute !important;
    top: 50% !important;
    right: 1.25rem !important;
    left: auto !important;
    width: auto !important;
    transform: translateY(-50%);
    display: flex;
    align-items: stretch;
    gap: .5rem;
  }
  /* "X" - zamknij bez dodawania wybranych produktów */
  #searchProduct .search-modal-cancel {
    align-items: center;
    justify-content: center;
    width: 42px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--dh-stone-300);
    border-radius: var(--dh-radius);
    color: var(--dh-stone-600);
    font-size: 1.3rem;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(28, 25, 23, .12);
  }
  #searchProduct .search-modal-cancel:hover,
  #searchProduct .search-modal-cancel:focus {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
  }
  #searchProduct .card-header div[style*="position: fixed"] .btn-dark {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: auto;
    padding: .55rem 1.1rem;
    background: var(--dh-orange);
    border: 1px solid var(--dh-orange);
    border-radius: var(--dh-radius);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(255, 104, 28, .35);
  }
  #searchProduct .card-header div[style*="position: fixed"] .btn-dark::before {
    content: "\F133"; /* mdi-checkbox-marked-circle */
    font-family: "Material Design Icons";
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 1;
  }
  #searchProduct .card-header div[style*="position: fixed"] .btn-dark:hover,
  #searchProduct .card-header div[style*="position: fixed"] .btn-dark:focus {
    background: var(--dh-orange-600);
    border-color: var(--dh-orange-600);
    box-shadow: 0 6px 18px rgba(226, 80, 15, .4), var(--dh-ring);
  }
  #searchProduct .card-header div[style*="position: fixed"] .btn-dark .mdi {
    font-size: 1.05rem;
    transition: transform .15s ease;
  }
  #searchProduct .card-header div[style*="position: fixed"] .btn-dark:hover .mdi {
    transform: translateX(3px);
  }
  #searchProduct > .modal-dialog {
    margin-top: 1.75rem;
  }
  #searchProduct .card-header strong {
    display: inline-block;
    line-height: 38px;
  }
}

/* ==========================================================================
   MOBILE (< 768px) - karty generowane zamiast tabel:
   - .mobile-card: lista zamówień i dostaw
   - tr.product-item: wyniki wyszukiwania produktów i koszyk (admin2.css
     zamienia wiersze tabeli w karty)
   Ujednolicenie do palety panelu (stone + pomarańcz), zamiast starej
   niebieskiej/szaroniebieskiej.
   ========================================================================== */
@media (max-width: 767.98px) {

  /* --- wspólny wygląd karty --- */
  .dh-content .mobile-card,
  .dh-content tr.product-item {
    background: #fff !important;
    border: 1px solid var(--dh-stone-200) !important;
    border-radius: var(--dh-radius-lg) !important;
    box-shadow: var(--dh-shadow) !important;
  }
  .dh-content .mobile-card .text-primary,
  .dh-content .xs-text-primary,
  #searchProduct .xs-text-primary,
  #searchProductResults .xs-text-primary {
    color: var(--dh-stone-900) !important;
  }
  .dh-content .mobile-card .border-bottom,
  .dh-content .mobile-card .border-top,
  .dh-content .mobile-card hr {
    border-color: var(--dh-stone-150) !important;
  }
  /* szaroniebieskie boksy (bg-light = #c6d1dc) -> jasne, z ramką */
  .dh-content .mobile-card .bg-light {
    background-color: var(--dh-stone-50) !important;
    border: 1px solid var(--dh-stone-150);
  }
  .dh-content .mobile-card .text-success,
  .dh-content tr.product-item .product-supplier,
  .dh-content .xs-supplier,
  #searchProductResults .xs-supplier {
    color: #15803d !important;
  }

  /* --- badge w kartach: jak statusy w tabelach (miękkie) --- */
  .dh-content .mobile-card .badge.bg-light {
    background-color: var(--dh-stone-100) !important;
    border: 1px solid var(--dh-stone-200) !important;
    color: var(--dh-stone-700) !important;
  }
  .dh-content .mobile-card .badge.bg-warning {
    background-color: #fef3c7 !important;
    border: 1px solid #fde68a;
    color: #b45309 !important;
  }
  .dh-content .mobile-card .badge.bg-success {
    background-color: #dcfce7 !important;
    border: 1px solid #bbf7d0;
    color: #15803d !important;
  }
  /* szaroniebieskie/szare etykiety w kartach produktów (kod, #id, kategoria, cena za kg/szt.) */
  .dh-content tr.product-item .xs-badge-light,
  #searchProductResults tr.product-item .xs-badge-light {
    background-color: var(--dh-stone-100) !important;
    border: 1px solid var(--dh-stone-200);
    border-radius: var(--dh-radius) !important;
    color: var(--dh-stone-800) !important;
  }
  .dh-content tr.product-item .xs-badge,
  #searchProductResults tr.product-item .xs-badge {
    background-color: var(--dh-stone-100) !important;
    border: 1px solid var(--dh-stone-200);
    border-radius: .35rem !important;
    color: var(--dh-stone-700) !important;
  }
  .dh-content tr.product-item td.tool {
    border-top-color: var(--dh-stone-150) !important;
  }

  /* --- przyciski akcji w kartach: jak w tabelach desktop --- */
  .dh-content .mobile-card .btn-sm,
  .dh-content tr.product-item .tool .btn-sm {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dh-radius);
    font-size: .9rem;
  }
  .dh-content .mobile-card .btn-secondary,
  .dh-content .mobile-card .btn-outline-primary,
  .dh-content .mobile-card .btn-outline-secondary {
    background-color: #fff;
    border: 1px solid var(--dh-stone-300);
    color: var(--dh-stone-600);
  }
  .dh-content .mobile-card .btn-secondary:hover,
  .dh-content .mobile-card .btn-outline-primary:hover,
  .dh-content .mobile-card .btn-outline-secondary:hover {
    background-color: var(--dh-orange);
    border-color: var(--dh-orange);
    color: #fff;
  }
  .dh-content .mobile-card .btn-outline-danger,
  .dh-content tr.product-item .btn-danger {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
  }
  .dh-content .mobile-card .btn-outline-danger:hover,
  .dh-content tr.product-item .btn-danger:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #fff;
  }

  /* --- notatki zamówienia: autor i data pod treścią --- */
  .dh-content .order-notice__meta {
    margin-top: .5rem;
    color: var(--dh-stone-500);
  }

  /* --- modal wyszukiwania produktów --- */
  /* pasek "Wybierz produkty..." - pomarańczowy z ikoną jak na desktopie */
  #searchProduct .card-header div[style*="position: fixed"] .btn-dark {
    display: flex;
    align-items: center;
    background: var(--dh-orange);
    border-color: var(--dh-orange);
    border-radius: 0;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(255, 104, 28, .35);
  }
  #searchProduct .card-header div[style*="position: fixed"] .btn-dark::before {
    content: "\F133"; /* mdi-checkbox-marked-circle */
    font-family: "Material Design Icons";
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 1;
  }
}