#optionsModal .settings-col .dropdown > .btn { width: 100%; }

/* usunięto zegar */
body { background-color: #f6f7fb; }
.pos-root { height: 100vh; }
.input-group-lg .form-control { height: 3.25rem; }
/* Gdy otwarty jest modal, zablokuj interakcje z polem wejścia EAN i przyciskami przy nim */
body.modal-open .pos-root .input-group,
body.modal-open #entryField,
body.modal-open #openNameSearchBtn,
body.modal-open #addBtn { pointer-events: none; }
/* Wyłączenie niebieskiego podświetlenia pola wejścia dla kodu */
#entryField:focus { border-color: #dee2e6 !important; box-shadow: none !important; outline: 0; }
/* Wyłączenie niebieskiego podświetlenia pola ilości w modalu */
#qtyModalInput:focus { border-color: #dee2e6 !important; box-shadow: none !important; outline: 0; }
/* Wyłączenie niebieskiego podświetlenia pola ceny w modalu */
#priceModalInput:focus { border-color: #dee2e6 !important; box-shadow: none !important; outline: 0; }
.no-caret, #qtyModalInput, #priceModalInput { caret-color: transparent; }
.product-card { min-height: 60vh; }
.keypad-card { min-height: 60vh; }
.keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.key-btn { padding: 1rem 0; font-size: 1.25rem; font-weight: 600; }
.key-btn.wide { grid-column: span 3; }
.list-group-item { padding-top: .9rem; padding-bottom: .9rem; }
.price { font-weight: 600; }
.price { cursor: pointer; }
.price-badge { background-color: #e9ecef !important; color: #212529 !important; border: 1px solid #dee2e6; border-radius: .5rem; padding: .4rem 0; font-variant-numeric: tabular-nums; width: 5.5rem; display: inline-flex; align-items: center; justify-content: center; }
/* zapewnij taką samą szerokość i wygląd dla sumy */
.sum-badge { background-color: #e9ecef !important; color: #212529 !important; border: 1px solid #dee2e6; border-radius: .5rem; padding: .4rem 0; font-variant-numeric: tabular-nums; width: 5.5rem; display: inline-flex; align-items: center; justify-content: center; }
.total-amount-display { font-size: 1.55rem; gap: .5rem; }
.card { border: 1px solid #e9ecef; }
.card-header { background: #fff; }
/* Ukrycie natywnych strzałek number w modalu */
#qtyModalInput::-webkit-outer-spin-button,
#qtyModalInput::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
#qtyModalInput[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.qty-badge { cursor: pointer; user-select: none; font-size: 1.1rem; padding: .4rem 0; line-height: 1; width: 5.5rem; display: inline-flex; align-items: center; justify-content: center; background-color: #e9ecef !important; color: #212529 !important; border: 1px solid #dee2e6; border-radius: .5rem; font-variant-numeric: tabular-nums; }
.qty-key-btn { padding: 1.15rem 0; font-size: 1.25rem; font-weight: 600; }

/* Layout pełnej wysokości dla sekcji z tabelą */
.pos-main { min-height: 0; --bs-gutter-y: 0; flex: 1 1 auto; }
.pos-main { margin-bottom: calc(-1 * var(--bs-gutter-y)); }
.pos-main > [class*="col-"] { display: flex; flex-direction: column; min-height: 0; }
.product-card, .keypad-card { display: flex; flex-direction: column; min-height: 0; }
.pos-main > [class*="col-"] > .product-card,
.pos-main > [class*="col-"] > .keypad-card { flex: 1 1 auto; }
.product-card.h-100, .keypad-card.h-100 { height: 100%; }
.product-card .card-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.product-card .card-body { padding: 0; }
.product-card .card-body { overflow: hidden; }
/* Ukryj poziomy scrollbar generowany przez .table-responsive podczas swipe w prawo */
.product-list-scroll { flex: 1 1 auto; min-height: 0; height: 0; overflow-y: auto; overflow-x: hidden; cursor: grab; padding-bottom: 1rem; position: relative; }
.product-list-scroll tr.dragging { background: #fff; box-shadow: 0 8px 24px rgba(2, 6, 23, .18); }
.product-list-scroll tr.drag-placeholder > * { visibility: hidden; }
.product-list-scroll > .table { margin-bottom: 0; }
.product-list-scroll .table > :not(caption) > * > * { padding-top: .9rem; padding-bottom: .9rem; }
/* Usuwanie pozycji: logika z przyciskiem X usunięta (zostawiona pusta kolumna) */
.product-list-scroll td { position: relative; }
/* Swipe to delete – tło i ikona śmietnika po lewej podczas przesuwania */
.swipe-indicator {
  position: absolute;
  z-index: 50;
  background: linear-gradient(90deg, rgba(220,53,69,0.95), rgba(220,53,69,0.75));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 6px 16px rgba(220, 53, 69, .25);
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
  overflow: hidden;
}
.swipe-indicator .swipe-bin { margin-right: 8px; margin-left: 10px; }
.swipe-indicator .swipe-arrow { opacity: 0; transition: opacity .12s ease, transform .12s ease; }
.swipe-indicator i { font-size: clamp(18px, calc(18px + 12 * var(--swipe-progress, 0)), 30px); transition: transform .18s ease; }
.swipe-indicator .swipe-bin { font-size: clamp(22px, calc(22px + 14 * var(--swipe-progress, 0)), 36px); }
.product-list-scroll tr.is-swiping { cursor: grabbing; }
/* Drag scroll state */
.product-list-scroll.dragging { cursor: grabbing; user-select: none; }

/* //* Wskaźnik swipe w lewo: zielony gradient z etykietą Rabat */
.swipe-indicator-left {
  position: absolute;
  z-index: 50;
  background: linear-gradient(270deg, rgba(16,185,129,0.95), rgba(34,197,94,0.85));
  color: #052e16;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 14px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), 0 6px 16px rgba(16,185,129,.25);
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
  overflow: hidden;
}
.swipe-indicator-left .swipe-left-arrow { margin-right: 8px; }
.swipe-indicator-left .swipe-label {
  font-weight: 800;
  letter-spacing: .02em;
  color: #052e16;
  opacity: 0;
  transition: opacity .12s ease;
}
.swipe-indicator-left .swipe-left-arrow {
  color: #052e16;
  font-size: clamp(18px, calc(18px + 8 * var(--swipe-progress, 0)), 26px);
  transition: transform .12s ease, opacity .12s ease;
  opacity: 0;
}

/* Sticky header nad listą (z-index + tło, by nie zachodziła zawartość) */
.product-list-scroll thead { position: sticky; top: 0; z-index: 3; }
.product-list-scroll thead th { background-color: #f8f9fa; }

/* Kwadratowe duże przyciski (modal ilości) */
.btn-square-lg { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; }

/* Nowoczesny, kolorowy keypad z cieniami (tylko w prawej karcie klawiatury) */
.keypad-card .key-btn { 
  --bg1: #4f46e5; /* default dla cyfr */
  --bg2: #0ea5e9;
  background-image: linear-gradient(135deg, var(--bg1), var(--bg2));
  color: #fff;
  border: none;
  border-radius: .75rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  text-shadow: 0 1px rgba(0,0,0,.15);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
  min-height: 88px;
}

/* Ustawienie układu kolumnowego w treści klawiatury, by przycisk opcji był na dole */
.keypad-card .card-body { display: flex; flex-direction: column; }
.keypad-card .key-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .16); }
.keypad-card .key-btn:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); filter: brightness(.95); }

/* Warianty kolorystyczne */
.keypad-card .key-btn[data-action="enter"] { --bg1: #22c55e; --bg2: #16a34a; }
.keypad-card .key-btn[data-action="clear"] { --bg1: #ef4444; --bg2: #f97316; }
.keypad-card .key-btn[data-action="backspace"] { --bg1: #f59e0b; --bg2: #f97316; }
.keypad-card .key-btn i { font-size: 1.25rem; }

/* Cyfry 0-9: jasny niebieski, bez gradientu */
.keypad-card .key-btn[data-key="0"],
.keypad-card .key-btn[data-key="1"],
.keypad-card .key-btn[data-key="2"],
.keypad-card .key-btn[data-key="3"],
.keypad-card .key-btn[data-key="4"],
.keypad-card .key-btn[data-key="5"],
.keypad-card .key-btn[data-key="6"],
.keypad-card .key-btn[data-key="7"],
.keypad-card .key-btn[data-key="8"],
.keypad-card .key-btn[data-key="9"] {
  background-image: none;
  background-color: #dbeafe; /* blue-100 */
  color: #0f172a; /* slate-900 for contrast */
  border: 1px solid #bfdbfe; /* blue-200 */
  box-shadow: 0 6px 16px rgba(30, 64, 175, .12);
  text-shadow: none;
}
.keypad-card .key-btn[data-key="0"]:hover,
.keypad-card .key-btn[data-key="1"]:hover,
.keypad-card .key-btn[data-key="2"]:hover,
.keypad-card .key-btn[data-key="3"]:hover,
.keypad-card .key-btn[data-key="4"]:hover,
.keypad-card .key-btn[data-key="5"]:hover,
.keypad-card .key-btn[data-key="6"]:hover,
.keypad-card .key-btn[data-key="7"]:hover,
.keypad-card .key-btn[data-key="8"]:hover,
.keypad-card .key-btn[data-key="9"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(30, 64, 175, .16);
}
.keypad-card .key-btn[data-key="0"]:active,
.keypad-card .key-btn[data-key="1"]:active,
.keypad-card .key-btn[data-key="2"]:active,
.keypad-card .key-btn[data-key="3"]:active,
.keypad-card .key-btn[data-key="4"]:active,
.keypad-card .key-btn[data-key="5"]:active,
.keypad-card .key-btn[data-key="6"]:active,
.keypad-card .key-btn[data-key="7"]:active,
.keypad-card .key-btn[data-key="8"]:active,
.keypad-card .key-btn[data-key="9"]:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.15);
  filter: brightness(.98);
}

/* ===== MODAL: Kolorowa klawiatura ilości (#qtyModal) ===== */
#qtyModal .qty-key-btn {
  background-image: linear-gradient(135deg, #4f46e5, #0ea5e9);
  color: #fff;
  border: none;
  border-radius: .75rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  text-shadow: 0 1px rgba(0,0,0,.15);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
#qtyModal .qty-key-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .16); }
#qtyModal .qty-key-btn:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); filter: brightness(.95); }
/* Usuń auto-zaznaczenie w polach modali przy fokusie */
#qtyModal input:focus, #priceModal input:focus { user-select: text; }

/* Cyfry 0-9: jasny niebieski, bez gradientu */
#qtyModal .qty-key-btn[data-key="0"],
#qtyModal .qty-key-btn[data-key="1"],
#qtyModal .qty-key-btn[data-key="2"],
#qtyModal .qty-key-btn[data-key="3"],
#qtyModal .qty-key-btn[data-key="4"],
#qtyModal .qty-key-btn[data-key="5"],
#qtyModal .qty-key-btn[data-key="6"],
#qtyModal .qty-key-btn[data-key="7"],
#qtyModal .qty-key-btn[data-key="8"],
#qtyModal .qty-key-btn[data-key="9"] {
  background-image: none;
  background-color: #dbeafe;
  color: #0f172a;
  border: 1px solid #bfdbfe;
  box-shadow: 0 6px 16px rgba(30, 64, 175, .12);
  text-shadow: none;
}
#qtyModal .qty-key-btn[data-key="0"]:hover,
#qtyModal .qty-key-btn[data-key="1"]:hover,
#qtyModal .qty-key-btn[data-key="2"]:hover,
#qtyModal .qty-key-btn[data-key="3"]:hover,
#qtyModal .qty-key-btn[data-key="4"]:hover,
#qtyModal .qty-key-btn[data-key="5"]:hover,
#qtyModal .qty-key-btn[data-key="6"]:hover,
#qtyModal .qty-key-btn[data-key="7"]:hover,
#qtyModal .qty-key-btn[data-key="8"]:hover,
#qtyModal .qty-key-btn[data-key="9"]:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(30, 64, 175, .16); }
#qtyModal .qty-key-btn[data-key="0"]:active,
#qtyModal .qty-key-btn[data-key="1"]:active,
#qtyModal .qty-key-btn[data-key="2"]:active,
#qtyModal .qty-key-btn[data-key="3"]:active,
#qtyModal .qty-key-btn[data-key="4"]:active,
#qtyModal .qty-key-btn[data-key="5"]:active,
#qtyModal .qty-key-btn[data-key="6"]:active,
#qtyModal .qty-key-btn[data-key="7"]:active,
#qtyModal .qty-key-btn[data-key="8"]:active,
#qtyModal .qty-key-btn[data-key="9"]:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,.15); filter: brightness(.98); }

/* Akcje w modalu: C i backspace */
#qtyModal .qty-key-btn[data-action="clear"] { background-image: linear-gradient(135deg, #ef4444, #f97316); color: #fff; border: none; }
#qtyModal .qty-key-btn[data-action="backspace"] { background-image: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; border: none; }

/* ===== MODAL: Klawiatura ceny (#priceModal) ===== */
#priceModal .price-key-btn {
  background-image: linear-gradient(135deg, #4f46e5, #0ea5e9);
  color: #fff;
  border: none;
  border-radius: .75rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  text-shadow: 0 1px rgba(0,0,0,.15);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}
#priceModal .price-key-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .16); }
#priceModal .price-key-btn:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); filter: brightness(.95); }
#priceModal .price-key-btn[data-key="0"],
#priceModal .price-key-btn[data-key="1"],
#priceModal .price-key-btn[data-key="2"],
#priceModal .price-key-btn[data-key="3"],
#priceModal .price-key-btn[data-key="4"],
#priceModal .price-key-btn[data-key="5"],
#priceModal .price-key-btn[data-key="6"],
#priceModal .price-key-btn[data-key="7"],
#priceModal .price-key-btn[data-key="8"],
#priceModal .price-key-btn[data-key="9"],
#priceModal .price-key-btn[data-key=","] {
  background-image: none;
  background-color: #dbeafe;
  color: #0f172a;
  border: 1px solid #bfdbfe;
  box-shadow: 0 6px 16px rgba(30, 64, 175, .12);
  text-shadow: none;
}
#priceModal .price-key-btn[data-action="backspace"] { background-image: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; border: none; }

/* Modal zmiany ceny: kwadratowe przyciski i większa, pogrubiona cena */
#priceModal #priceModalInput { font-size: 2rem; font-weight: 700; padding: .75rem 1rem; height: auto; }
#priceModal .price-key-btn { padding: 0; width: 100%; aspect-ratio: 1 / 1; display: inline-flex; align-items: center; justify-content: center; border-radius: .75rem; }
#priceModal .price-key-btn i { font-size: 1.5rem; }

/* ===== MODAL: Klawiatura rabatu (#discountModal) – jak klawiatura ceny ===== */
#discountModal #discountInput { font-size: 2rem; font-weight: 700; padding: .75rem 1rem; height: auto; }
#discountModal .discount-key {
  background-image: linear-gradient(135deg, #4f46e5, #0ea5e9);
  color: #fff;
  border: none;
  border-radius: .75rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  text-shadow: 0 1px rgba(0,0,0,.15);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
  padding: 1.15rem 0;
  width: auto;
  aspect-ratio: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
}
#discountModal .discount-key:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .16); }
#discountModal .discount-key:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); filter: brightness(.95); }
#discountModal .discount-key[data-key] {
  background-image: none;
  background-color: #dbeafe; /* blue-100 */
  color: #0f172a; /* slate-900 */
  border: 1px solid #bfdbfe; /* blue-200 */
  box-shadow: 0 6px 16px rgba(30, 64, 175, .12);
  text-shadow: none;
}
#discountModal .discount-key[data-action="clear"] { background-image: linear-gradient(135deg, #ef4444, #f97316); color: #fff; border: none; }
#discountModal .discount-key[data-action="backspace"] { background-image: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; border: none; }
#discountModal .discount-key i { font-size: 1.5rem; }

/* Eleganckie cienie i akcenty kolorystyczne */
body { background: linear-gradient(180deg, #f6f7fb 0%, #eef2f7 100%); }
.pos-root .input-group { background: #ffffff; border-radius: 1rem; box-shadow: 0 8px 24px rgba(2, 6, 23, .08); overflow: visible; }
.pos-root .input-group .input-group-text { background: #ffffff; border-color: #eef2f7; }
.pos-root .input-group .form-control { background: #ffffff; border-color: #eef2f7; }
/* Lupa: bez obramowania i cienia na focus */
#openNameSearchBtn { border: none !important; box-shadow: none !important; }
#openNameSearchBtn:focus { outline: none !important; box-shadow: none !important; }
/* Wyrównanie pionowe ikony lupy w grupie wejściowej */
#openNameSearchBtn { display: inline-flex; align-items: center; justify-content: center; padding-top: .375rem; padding-bottom: .375rem; }
/* Dopasuj wysokość przycisku lupy do belki, bez nachodzenia góra/dół */
#openNameSearchBtn { height: 3.25rem !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box; }
/* Góra/dół: taki sam border jak w polu .form-control, bez lewej/prawej */
#openNameSearchBtn { border-top: 1px solid #eef2f7 !important; border-bottom: 1px solid #eef2f7 !important; border-left: none !important; border-right: none !important; border-radius: 0 !important; }
/* Kolor ikony lupy: domyślny i na hover (lekko ciemniejszy) */
#openNameSearchBtn { color: #6c757d !important; }
#openNameSearchBtn:hover, #openNameSearchBtn:focus { color: #495057 !important; }
/* Dystans od krawędzi belki, by nie nachodzić na cień/border */
#openNameSearchBtn { margin-left: 0 !important; margin-right: 0 !important; }
/* Lupa: przezroczyste tło w każdym stanie */
#openNameSearchBtn,
#openNameSearchBtn:hover,
#openNameSearchBtn:active,
#openNameSearchBtn:focus,
#openNameSearchBtn:disabled {
  background-color: transparent !important;
}
/* Zakończ: większa czcionka, większa wysokość, pogrubienie */
#finishBtn { font-size: 1.5rem !important; font-weight: 700 !important; padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; line-height: 1.2 !important; }
#finishBtn:disabled { opacity: .6; cursor: not-allowed; }

/* ===== FINISH MODAL KEYPAD – styl jak klawiatura główna/modale ilości/ceny ===== */
#finishModal .finish-key {
  background-image: linear-gradient(135deg, #4f46e5, #0ea5e9);
  color: #fff;
  border: none;
  border-radius: .75rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  text-shadow: 0 1px rgba(0,0,0,.15);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
  font-size: 1.6rem;
  font-weight: 700;
}
#finishModal .finish-key:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .16); }
#finishModal .finish-key:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); filter: brightness(.95); }
/* Cyfry i przecinek – jasny niebieski jak w pozostałych klawiaturach */
#finishModal .finish-key[data-key="0"],
#finishModal .finish-key[data-key="1"],
#finishModal .finish-key[data-key="2"],
#finishModal .finish-key[data-key="3"],
#finishModal .finish-key[data-key="4"],
#finishModal .finish-key[data-key="5"],
#finishModal .finish-key[data-key="6"],
#finishModal .finish-key[data-key="7"],
#finishModal .finish-key[data-key="8"],
#finishModal .finish-key[data-key="9"],
#finishModal .finish-key[data-key="," ] {
  background-image: none;
  background-color: #dbeafe; /* blue-100 */
  color: #0f172a; /* slate-900 */
  border: 1px solid #bfdbfe; /* blue-200 */
  box-shadow: 0 6px 16px rgba(30, 64, 175, .12);
  text-shadow: none;
}
#finishModal .finish-key i { font-size: 1.25rem; }

/* Backspace: pomarańczowy jak na klawiaturze głównej */
#finishModal .finish-key[data-action="backspace"] {
  background-image: linear-gradient(135deg, #f59e0b, #f97316) !important;
  background-color: transparent !important;
  color: #fff !important;
  border: none !important;
}

/* Wyróżnienie aktywnej metody płatności (gradientowy border) */
#finishModal .pay-method.active {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px transparent;
}

/* ===== FINISH MODAL – większe liczby i etykiety ===== */
#finishModal #finishTotal,
#finishModal #finishChange {
  font-size: 2rem;
  font-weight: 800;
}
#finishModal #finishPaidInput {
  font-size: 1.6rem;
  font-weight: 700;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
#finishModal label[for="finishPaidInput"],
#finishModal .border.rounded .d-flex > strong:first-child,
#finishModal .border.rounded .d-flex > span:first-child {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Szerokość modala płatności – lekko szerszy */
#finishModal .modal-dialog { max-width: 960px; width: 90vw; }
#finishModal .pay-method.active::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: .75rem;
  padding: 6px;
  background: linear-gradient(135deg, #60a5fa, #22c55e);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
}

/* Dropdown wyszukiwania po nazwie */
.name-search-dropdown { width: 480px; max-width: 80vw; z-index: 1100; }
.name-search-list { max-height: 50vh; overflow-y: auto; }
.name-search-list .list-group-item { display: flex; justify-content: space-between; align-items: center; }
/* Wskaźnik ostrzeżenia w polu skanowania (wykrzyknik) */
.pos-root .input-group { position: relative; }
.entry-warning { position: absolute; top: 50%; right: 6.25rem; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; line-height: 1.6rem; border-radius: 9999px; background: #fef3c7; color: #7c2d12; border: 1px solid #f59e0b; font-weight: 800; text-align: center; font-size: .95rem; z-index: 5; pointer-events: none; box-shadow: 0 2px 6px rgba(245, 158, 11, .25); }
/* Usunięto lokalny wykrzyknik w modalu ceny */
@media (max-width: 576px) { .entry-warning { right: 5.5rem; } }

/* Przyciski akcji – lekki gradient i cień */
.btn-primary { background-image: linear-gradient(135deg, #2563eb, #3b82f6); border: none; box-shadow: 0 8px 18px rgba(37, 99, 235, .35); }
.btn-primary:hover { filter: brightness(1.03); box-shadow: 0 10px 22px rgba(37, 99, 235, .42); }
/* //* Przycisk rabatu bez cienia i bez gradientu */
.btn-discount { background-image: none !important; background-color: #f59e0b !important; color: #212529 !important; border: 1px solid #f59e0b !important; box-shadow: none !important; }
.btn-discount:hover, .btn-discount:focus { filter: none !important; box-shadow: none !important; }

/* Karty: bardziej miękkie krawędzie i cień */
.card { border: 1px solid #e6eaf1; border-radius: 1rem; box-shadow: 0 10px 30px rgba(2, 6, 23, .08); }
.card-header, .card-footer { background: #ffffff; border-color: #eef2f7; }
.product-card .card-header { background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%); }
.keypad-card .card-header { background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); }

/* Suma w stopce – pigułka z delikatnym cieniem */
.total-amount-display #totalAmount { background-color: #eef6ff; color: #0f172a; border: 1px solid #bfdbfe; border-radius: .75rem; padding: .25rem .75rem; line-height: 1.4; box-shadow: 0 2px 6px rgba(59, 130, 246, .15); }

/* Faktura VAT – styl przycisku TAK/NIE */
#invoiceBtn.btn-outline-secondary { color: #6c757d; border-color: #ced4da; }
#invoiceBtn.btn-warning { color: #212529; }
/* Hover: delikatna zmiana – bez pełnego szarego tła */
#invoiceBtn.btn-outline-secondary:hover,
#invoiceBtn.btn-outline-secondary:focus {
  background-color: rgba(108, 117, 125, 0.08) !important;
  color: #495057 !important;
  border-color: #bfc6cd !important;
}
#invoiceBtn.btn-warning:hover,
#invoiceBtn.btn-warning:focus {
  filter: brightness(1.03);
}

/* Tabela – delikatne podświetlenie wiersza */
.table-hover > tbody > tr:hover { background-color: #f8fafc; }
.table thead th { border-bottom-color: #e6eaf1; }

/* Scroll w liście produktów – subtelny */
.product-list-scroll { box-shadow: inset 0 1px 0 rgba(0,0,0,.03); }

/* Logo w pasku skanowania */
.pos-logo { height: 40px; width: auto; display: block; border-radius: .5rem; margin-left: 12px; }
@media (max-width: 576px) {
  .pos-logo { height: 32px; margin-left: 8px; }
}

/* Bez ramki i cienia dla logo */
.pos-logo { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; }

/* Odstęp na dole dla ramki klawiatury */
.keypad-card { margin-bottom: 1rem; }
.keypad-card.h-100 { height: calc(100% - 1rem); }

/* Odstęp na dole dla ramki listy produktów */
.product-card { margin-bottom: 1rem; }
.product-card.h-100 { height: calc(100% - 1rem); }

/* Belka nad listą produktów z sumą */
.product-card .total-amount-display { font-size: 1.25rem; }
/* Resizer – upewnij się, że jest nad kolumnami i klikalny */
#colsResizer { position: absolute; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 20; }
.product-card .total-amount-display #totalAmount { background-color: #eef6ff; color: #0f172a; border: 1px solid #bfdbfe; border-radius: .5rem; padding: .1rem .6rem; line-height: 1.4; box-shadow: 0 2px 6px rgba(59, 130, 246, .15); }

/* Powiększenie czcionki sumy o 50% w belce nad listą */
.product-card .total-amount-display #totalAmount { font-size: 1.5em; }

/* Trochę mniejsze rozmiary po powiększeniu */
.product-card .price-badge,
.product-card .sum-badge { font-size: 1.6em; padding: .3rem 0; width: 7.5rem; }
.product-card .total-amount-display #totalAmount { font-size: 1.6em; }

/* Czerwona ramka dla nieprawidłowej ceny (0 lub minus) */
.product-card .price-badge.badge-error {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 .15rem rgba(220, 53, 69, 0.25);
}

/* Wyróżnienie edytowalnych badge (ilość i cena) */
.product-card .price-badge,
.product-card .qty-badge {
  background-color: #fff7ed !important; /* amber-50 */
  color: #7c2d12 !important; /* amber-900 */
  border-color: #fdba74 !important; /* amber-300 */
  cursor: pointer;
  transition: box-shadow .2s ease, transform .05s ease, background-color .2s ease;
  box-shadow: 0 1px 4px rgba(245, 158, 11, .15);
}

/* VAT badge */
.product-card .vat-badge { background-color: #f1f5f9; border: 1px solid #e2e8f0; border-radius: .5rem; padding: .3rem .5rem; font-weight: 600; }
.product-card .price-badge:hover,
.product-card .qty-badge:hover {
  background-color: #ffedd5 !important; /* amber-100 */
  box-shadow: 0 2px 8px rgba(245, 158, 11, .25);
  transform: translateY(-1px);
}
.product-card .price-badge:active,
.product-card .qty-badge:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.2);
}

/* Cyfry na klawiaturach: jak cena (2rem) i bold */
.keypad-card .key-btn { font-size: 2rem; font-weight: 700; }
#priceModal .price-key-btn { font-size: 2rem; font-weight: 700; }

/* Klawiatura: lekko niższe przyciski na prawej klawiaturze */
.keypad-card .key-btn { min-height: 72px; padding-top: .75rem; padding-bottom: .75rem; }

/* Klawiatura: jeszcze niższe przyciski (~20% mniej) */
.keypad-card .key-btn { min-height: 58px; padding-top: .6rem; padding-bottom: .6rem; }

/* Modal zmiany ceny: obniżone ~20% wymiary klawiszy (wciąż kwadratowe) */
#priceModal .price-key-btn { width: 80% !important; aspect-ratio: 1 / 1; justify-self: center; }

/* Modal zmiany ceny: pełna szerokość, niższe ~20% (ratio 5:4) */
#priceModal .price-key-btn { width: 100% !important; aspect-ratio: 5 / 4; justify-self: stretch; }

/* Modale: adaptacyjna wysokość i przewijana treść przy wąskim oknie */
#priceModal .modal-content,
#qtyModal .modal-content { max-height: 92vh; display: flex; flex-direction: column; }
#priceModal .modal-header, #priceModal .modal-footer,
#qtyModal .modal-header, #qtyModal .modal-footer { flex-shrink: 0; }
#priceModal .modal-body,
#qtyModal .modal-body { overflow: auto; }

/* Modal opcji: 80% szerokości i 80% wysokości okna */
#optionsModal .modal-dialog { width: 80vw; max-width: 1200px; }
#optionsModal .modal-content { height: 80vh; display: flex; flex-direction: column; }
#optionsModal .modal-header, #optionsModal .modal-footer { flex-shrink: 0; }
#optionsModal .modal-body { overflow: auto; }

/* Wyraźniejsze odróżnienie sekcji w modalu opcji */
#optionsModal .modal-body { background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); padding: 1.25rem; }
#optionsModal .card { border: 1px solid #e6eaf1; border-radius: 1rem; background: #ffffff; box-shadow: 0 12px 28px rgba(2, 6, 23, .10); }
#optionsModal .card + .card { margin-top: 1.25rem; }
#optionsModal .card-header { background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); border-bottom: 2px solid #e9eef5; }

/* Dropdown walut: przyjazna wysokość i przewijanie listy */
#optionsModal .currency-list { max-height: 50vh; overflow: auto; }
#optionsModal .dropdown-menu { width: 100% !important; }
#optionsModal .currency-item code { font-weight: 600; }

/* Układ opcji: Grid – 1 kolumna na mobile, 3 kolumny na ≥ md */
#optionsModal .options-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
#optionsModal .settings-col { min-width: 0 !important; }
@media (min-width: 768px) {
  #optionsModal .options-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#optionsModal .options-row { --bs-gutter-x: 0; --bs-gutter-y: 0; margin-left: 0; margin-right: 0; width: 100%; }
#optionsModal .options-row > .settings-col { padding-left: 0; padding-right: 0; }
@media (min-width: 992px) {
  #optionsModal .options-row > .settings-col.col-lg-4 { flex: 0 0 auto; width: 100% !important; max-width: 100% !important; }
}
#optionsModal .settings-col .dropdown > .btn { width: 100%; }
#optionsModal .settings-col .dropdown-menu { width: 100% !important; min-width: 100% !important; }
#optionsModal #currencySearchInput, #optionsModal #catalogSearchInput { width: 100% !important; display: block; }
#optionsModal .currency-list, #optionsModal .catalog-list { max-height: 50vh; overflow: auto; }
#optionsModal .price-group-list { max-height: 50vh; overflow: auto; }
#optionsModal .order-status-list { max-height: 50vh; overflow: auto; }
#optionsModal #priceGroupSearchInput { width: 100% !important; display: block; }

/* Dopasowanie rozmiaru i szerokości badge ilości do ceny */
.product-card .qty-badge { font-size: 1.6em; padding: .3rem 0; width: 7.5rem; }

/* Price modal keypad: dopasowanie do #qtyModal (rozmiar i styl) */
#priceModal .price-key-btn { width: auto !important; aspect-ratio: auto; justify-self: auto; padding: 1.15rem 0; font-size: 1.25rem; font-weight: 600; border-radius: .75rem; }
#priceModal .price-key-btn i { font-size: 1.25rem; }

/* Modale: większe i pogrubione cyfry na klawiaturze */
#qtyModal .qty-key-btn { font-size: 1.6rem; font-weight: 700; }
#qtyModal .qty-key-btn i { font-size: 1.6rem; }
#priceModal .price-key-btn { font-size: 1.6rem !important; font-weight: 700 !important; }
#priceModal .price-key-btn i { font-size: 1.6rem !important; }

/* ===== RESPONSYWNE SKALOWANIE PANELU KLAWIATURY (prawa karta) ===== */
@media (max-width: 1400px) {
  .keypad-card .key-btn { font-size: 1.8rem; min-height: 64px; padding-top: .6rem; padding-bottom: .6rem; }
  .keypad-grid { gap: .6rem; }
  #finishBtn { font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important; padding-top: clamp(.9rem, 1.6vw, 1.5rem) !important; padding-bottom: clamp(.9rem, 1.6vw, 1.5rem) !important; }
}
@media (max-width: 1200px) {
  .keypad-card .key-btn { font-size: 1.6rem; min-height: 58px; padding-top: .55rem; padding-bottom: .55rem; }
  .keypad-grid { gap: .5rem; }
}
@media (max-width: 992px) {
  .keypad-card .key-btn { font-size: 1.4rem; min-height: 52px; padding-top: .5rem; padding-bottom: .5rem; }
  .keypad-grid { gap: .45rem; }
}
@media (max-width: 768px) {
  .keypad-card .key-btn { font-size: 1.25rem; min-height: 46px; padding-top: .45rem; padding-bottom: .45rem; }
  .keypad-grid { gap: .4rem; }
  #finishBtn { font-size: clamp(1.05rem, 4.2vw, 1.4rem) !important; }
}

/* MK Toast: Mortal Kombat style "TOASTY!" (bottom-right) */
.mk-toast { position: fixed; right: 0; bottom: 0; z-index: 1080; pointer-events: none; transform: translateX(120%); opacity: 0; }
.mk-toast-body { background: transparent; padding: 0; border: none; box-shadow: none; }
.mk-toast-img { display: block; height: 140px; width: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.35)); }

/* Zakładki sprzedaży: nieaktywne z delikatnym szarym obramowaniem */
#salesTabs .nav-link { border: 1px solid transparent; }
#salesTabs .nav-link:not(.active) { border-color: #dee2e6; }

/* Przyciski dodawania nowej sprzedaży: wysokość jak zakładki */
#salesTabs #addSaleTabBtn {
  padding: .5rem 1rem !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  border-radius: var(--bs-nav-pills-border-radius, .375rem) !important;
}

/* Modal Faktura VAT – prosta walidacja kolorami */
#invoiceModal .is-valid { border-color: #198754 !important; }
#invoiceModal .is-invalid { border-color: #dc3545 !important; }
/* Usuń FV – czerwony, wysoki przycisk na górze */
#invoiceModal #invoiceDeleteBtn { background-color: #dc3545; border-color: #dc3545; color: #fff; }
#invoiceModal #invoiceDeleteBtn:hover { filter: brightness(1.03); }

/* ===== INVOICE MODAL NUMERIC KEYPAD ===== */
#invoiceModal .nip-keypad { gap: .75rem; }
#invoiceModal .nip-key-btn {
  background-image: linear-gradient(135deg, #4f46e5, #0ea5e9);
  color: #fff;
  border: none;
  border-radius: .75rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  text-shadow: 0 1px rgba(0,0,0,.15);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}
#invoiceModal .nip-key-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .16); }
#invoiceModal .nip-key-btn:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); filter: brightness(.95); }

/* Cyfry 0-9 – jasny niebieski jak pozostałe klawiatury */
#invoiceModal .nip-key-btn[data-key] {
  background-image: none;
  background-color: #dbeafe;
  color: #0f172a;
  border: 1px solid #bfdbfe;
  box-shadow: 0 6px 16px rgba(30, 64, 175, .12);
  text-shadow: none;
}

/* Clear i Backspace – wyróżnione */
#invoiceModal .nip-key-btn[data-action="clear"] { background-image: linear-gradient(135deg, #ef4444, #f97316); color: #fff; border: none; }
#invoiceModal .nip-key-btn[data-action="backspace"] { background-image: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; border: none; }

/* OK – szeroki przycisk */

/* Fatality overlay: pełnoekranowe przyciemnienie i obrazek na środku */
.fatality-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 2000; }
.fatality-overlay.show { display: flex; animation: fatalityFade .25s ease-out; }
.fatality-img { max-width: 80vw; max-height: 80vh; height: auto; width: auto; filter: drop-shadow(0 15px 40px rgba(0,0,0,.5)); }
@keyframes fatalityFade { from { opacity: 0; } to { opacity: 1; } }
.mk-toast.show { animation: mkToastSlide 1.8s ease-in-out forwards; }
@keyframes mkToastSlide {
  0% { transform: translateX(120%); opacity: 0; }
  10% { transform: translateX(0); opacity: 1; }
  80% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* ===== Pełnoekranowe animowane tło gradientowe ekranu logowania ===== */
#cashierLoginScreen .min-vh-100 {
  /* Niebo: jasny błękit -> błękit -> głęboki niebieski */
  background: linear-gradient(135deg, #93c5fd, #60a5fa, #3b82f6);
  background-size: 300% 300%;
  animation: loginGradient 10s ease infinite;
}
@keyframes loginGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}