/* ==========================================================================
   SNAPSHOT stylow panelu legacy (style.css + zaimportowane czesci, splaszczone).
   NIE EDYTOWAC RECZNIE. Zrodlo: public/style.css (+ @import).
   Regeneracja po zamierzonej zmianie stylow panelu:
       node scripts/build-legacy-css-snapshot.mjs
   Hash zrodla: 9a3ed182b232
   ========================================================================== */
/* Core bundle: importy wydzielonych modułów CSS */
/* >>> css/tokens.css */
/* Design tokens — Calm workspace */
:root {
  /* Statusy listy ofert */
  --st-nowa: #ffffff;
  --st-wyslana: #fff6cf;
  --st-zamowiona: #ffe2c2;
  --st-rozliczona: #e6f4ec;
  /* Soczewka B: lista ofert malowala statusy INLINE z status.ts (cellStyle na
     kazdym td) — te tla przenosza inline do CSS. do_zamowienia = para z
     --status-text-warn; --st-order = badge "W zamowieniu" (indygo, odróznia
     lock zamowienia od zwyklych statusow). */
  --st-do-zamowienia: #fef3c7;
  --st-order: #e0e7ff;
  /* Kolory TEKSTU badge'y statusow (fala 1): stare pary (np. #d97706 na #fef3c7
     = 2.86:1) nie przechodzily progu 4.5. Odcienie z tych samych rodzin barw,
     kontrast na swoich pastelowych tlach: info 5.49, warn 6.37, ok 6.49.
     Literalowy duplikat warn zyje w src/modules/offers-core/status.ts (inline). */
  --status-text-info: #1d4ed8;
  --status-text-warn: #92400e;
  --status-text-ok: #166534;
  /* Tekst badge'a "W zamowieniu" na tle --st-order (#e0e7ff): kontrast ~8:1. */
  --status-text-order: #3730a3;

  /* Powierzchnie */
  --bg-app: #F7F5F1;
  --surface: #ffffff;
  --surface-muted: #faf9f5;
  --border: #e2e8f0;
  --border-warm: #e8dccd;
  /* Mocniejsza waga obramowania — stany hover pól i tabele wymagające
     wyraźniejszej siatki (fala 0: nazwany istniejący odcień, nie nowy kolor). */
  --border-strong: #cbd5e1;

  /* Tekst.
     --text-muted pociemniony 2026-07-31 z #64748b: stary odcień dawał kontrast
     4.41:1 na tle --bg-app/#f8f6f3 i 4.52:1 na --surface-muted, czyli PONIŻEJ
     progu 4.5 dla tekstów 13-14px, których pełno w listach (audyt: 22-41%
     tekstów poniżej progu). #475569 daje 6.76-7.58:1 na wszystkich naszych
     tłach. Tam, gdzie token służy jako TŁO (np. .delivery-more z białym
     tekstem), zmiana też poprawia kontrast: 4.76 -> 7.58.
     --text-subtle = stary odcień; TYLKO dla elementów nietekstowych
     (obramowania, ikony dekoracyjne, stany disabled) — nie dla treści. */
  --text: #1e293b;
  --text-muted: #475569;
  --text-subtle: #64748b;
  --text-inverse: #ffffff;

  /* Akcent (teal — spokojny B2B; główny kolor marki w UI) */
  --accent: #1F2A44;
  --accent-hover: #34456B;
  --accent-soft: rgba(31, 42, 68, 0.12);
  /* --accent-text (fala 0): --accent ma kontrast tylko 3.74:1 na białym, więc
     tekst nim pisany ORAZ biały tekst na nim (przyciski) nie przechodzą progu
     4.5. Ten sam problem widać żywo na login.html. Zamiast wprowadzać nowy
     kolor używamy istniejącego ciemniejszego odcienia marki (= --accent-hover),
     który daje 5.47:1. Stosować dla: linków/tekstu w kolorze marki i jako tło
     przycisków z białym napisem. Czyste plamy koloru (paski, ikony, ramki)
     zostają na --accent. */
  --accent-text: #34456B;
  /* --accent-text-hover (fala 1): --accent-text to TEN SAM odcien co
     --accent-hover, wiec po migracji przyciskow na --accent-text para
     tlo/hover zlewalaby sie w jeden kolor i hover by znikal — a naglowki
     .offers-table thead th[data-sort] dostaja z JS klase .sortable, wiec
     hover to afordancja sortowania, nie ozdoba. #2F4A85 (teal-800, ta sama
     rodzina marki): 7.58:1 na bialym i dla bialego tekstu na nim. */
  --accent-text-hover: #2F4A85;
  /* Legacy orange — wycofywany z UI; NIE zmieniać szablonów PDF (offer-template.html) */
  --accent-legacy: #dc5f00;
  --accent-legacy-hover: #b84e00;

  /* Semantyka stanów (jednolite kolory dla całej platformy) */
  --danger: #b3261e;
  --danger-hover: #9a2a2a;
  --danger-soft: rgba(179, 38, 30, 0.1);
  --success: #16a34a;
  --warning: #d97706;
  --info: #2563eb;

  /* Powierzchnie i obramowania formularzy */
  --surface-input: #ffffff;
  --surface-subtle: #f9fafb;
  --border-input: #d6d3cd;
  /* Tło kart (alias --surface; używany m.in. w filtrach parkiety) */
  --card-bg: var(--surface);

  /* Promienie i cienie */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  /* --shadow-lg (fala 0): warstwa unosząca się — hover kafla panelu, modale,
     dropdowny. Bez trzeciego stopnia kilkadziesiąt cieni typu 0 8px 25px /
     0 16px 32px / 0 10px 40px nie miało na co się mapować. */
  --shadow-lg: 0 16px 32px rgba(15, 23, 42, 0.12);

  /* Typografia */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-tabular: tabular-nums;

  /* Skala rozmiarów tekstu (fala 0, 2026-07-31).
     Powód: tokens.css definiował tylko krój, więc każdy plik wymyślał własne
     wartości — w bundlu żyło 26 różnych px (8-64), a na jednej stronie do 16
     rozmiarów naraz. Skala ma PIĘĆ kroków dla UI + jeden nagłówkowy.
     MINIMUM UI = --fs-xs 12px: wszystko poniżej (8-11px) to miejsca, gdzie
     audyt wykazał najgorszy kontrast i najmniejsze cele — te wartości
     wymieniamy w fali 1, tutaj tylko dostarczamy skalę.
     Interlinie dobrane pod gęste tabele (--lh-tight) i tekst czytany (--lh-base). */
  --fs-xs: 12px;    /* badge, meta, podpisy pod polami — PODŁOGA dla tekstu */
  --fs-sm: 13px;    /* gęste tabele, drugorzędne opisy */
  --fs-base: 14px;  /* domyślny tekst UI, pola formularzy */
  --fs-md: 16px;    /* nagłówki sekcji, ważne kwoty; na mobile MINIMUM dla input (blokuje auto-zoom iOS) */
  --fs-lg: 18px;    /* podtytuły, wyróżnione kwoty */
  --fs-xl: 20px;    /* tytuły kart i sekcji */
  /* Stopnie display — nagłówki stron i liczby na dashboardzie */
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 48px;
  --lh-tight: 1.25;
  --lh-base: 1.5;

  /* Glify i ikony (emoji, strzałki, znaki „×"). To NIE jest tekst czytany,
     więc nie obowiązuje ich podłoga 12px ani skala --fs-*; mają własne stopnie,
     żeby literały 18/24/48px nie musiały być wyjątkami w stylelincie. */
  --icon-sm: 18px;
  --icon-md: 24px;
  --icon-lg: 48px;

  /* Odstępy */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Touch — WCAG 2.5.5: minimalny cel dotykowy 44px */
  --touch-min: 44px;
  --focus-ring: 0 0 0 3px var(--accent-soft);
}

#dashboard table tr[data-status="nowa"] > td { background: var(--st-nowa) !important; }
#dashboard table tr[data-status="wysłana"] > td,
#dashboard table tr[data-status="wyslana"] > td { background: var(--st-wyslana) !important; }
#dashboard table tr[data-status="zamówiona"] > td,
#dashboard table tr[data-status="zamowiona"] > td { background: var(--st-zamowiona) !important; }
#dashboard table tr[data-status="rozliczona"] > td { background: var(--st-rozliczona) !important; }
#dashboard table tr[data-status] > td:first-child { position: relative; }
#dashboard table tr[data-status] > td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent-legacy);
  opacity: 0.6;
}

/* <<< css/tokens.css */
/* >>> css/ui-kit.css */
/* Ofertownia UI layer — tokens + spójny shell */

body.panel-body,
body.offers-page {
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-sans);
}

/* Topbar */
.topbar {
  background: var(--surface) !important;
  border-bottom: 2px solid var(--accent) !important;
  box-shadow: var(--shadow-sm);
}

.topbar .brand strong {
  color: var(--text);
  font-weight: 600;
}

/* Przyciski — zachowanie legacy + tokens */
.btn-primary {
  background: var(--accent-text) !important;
  color: var(--text-inverse) !important;
  border-radius: var(--radius-pill) !important;
  min-height: var(--touch-min);
  font-weight: 600;
  transition: background 0.15s ease;
}

.btn-primary:hover {
  background: var(--accent-text-hover) !important;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-secondary {
  border-color: var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-pill) !important;
  min-height: var(--touch-min);
}

/* Ta sama wysokość co primary/secondary — inaczej Wyloguj byłby niższy od sąsiadów */
.btn-danger {
  min-height: var(--touch-min);
}

.btn-secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent-text) !important;
}

/* Formularze — pełna szerokość tylko w .form-group */
.form-group .form-input,
.form-group .form-select,
.form-group textarea.form-input {
  width: 100%;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--focus-ring) !important;
}

/* Breadcrumbs */
.breadcrumbs {
  color: var(--text-muted);
  font-size: var(--fs-base);
  margin-bottom: var(--space-4);
}

.breadcrumb-item,
.breadcrumb-link {
  color: var(--accent-text);
  text-decoration: none;
}

.breadcrumb-item:hover,
.breadcrumb-link:hover {
  color: var(--accent-text-hover);
  text-decoration: underline;
}

.breadcrumb-current {
  color: var(--text);
  font-weight: 500;
}

/* Panel menu */
.menu-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.menu-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.menu-card--soon {
  opacity: 0.92;
}

.menu-card--soon .menu-desc {
  color: var(--text-muted);
}

.menu-title {
  color: var(--text);
}

.menu-desc {
  color: var(--text-muted);
}

/* Stub (parkiety, WIP) */
.wz-stub-card {
  max-width: 520px;
  margin: var(--space-6) auto;
  padding: var(--space-6);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.wz-stub-card__icon {
  font-size: var(--fs-4xl);
  line-height: 1;
  margin-bottom: var(--space-4);
}

.wz-stub-card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text);
}

.wz-stub-card__text {
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
  line-height: 1.5;
}

/* Tabele — tabular nums */
.offers-table th.col-money,
.offers-table td.col-money,
.offers-table .c-after,
.offers-table .c-networth,
.offers-table .c-brutto {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Listy — delikatniejsze nagłówki tabel */
.offers-table thead th {
  background: var(--accent-text) !important;
}

/* Toolbar */
.offers-toolbar {
  gap: var(--space-3);
}

/* Safe area (mobile) */
@supports (padding: max(0px)) {
  .offer-sticky {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* Login */
.login-card {
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}

.login-title {
  color: var(--text);
}

/* Profil */
.profile-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
  .topbar .user .btn {
    min-height: var(--touch-min);
    padding: 8px 12px;
  }
}

/* Telefon: rząd Panel/e-mail/Profil/Wyloguj nie mieści się w 375px —
   pozwalamy zawijać i skracamy e-mail wielokropkiem (Wyloguj był ucinany). */
@media (max-width: 480px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .topbar .user {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
    /* Nested-flex min-size w Chromium liczy się z max-content — wymuszamy pełny rząd */
    width: 100%;
    min-width: 0;
  }
  .topbar .user .user-profile-link {
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* <<< css/ui-kit.css */
/* >>> css/pages/offer-editor.css */
/* Edytor oferty + lista (fragment) — wydzielone z style.css */

:root {
  /* Promien kompaktowych kontrolek edytora (pola i przyciski w wierszu pozycji).
     6px nie ma odpowiednika w skali platformy (--radius-sm to 8px), a powtarza sie
     w trzech miejscach tego pliku — zmienna kasuje duplikat, nie chowa literalu. */
  --offer-radius-control: 6px;
}
/* === EDITOR LAYOUT FIX (если ещё не добавлял) === */
#editor{padding:12px 16px}
.oferta-header{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px,1fr));
  gap:12px;
  background:#fff;
  border:1px solid #eee;
  border-radius: var(--radius-md);
  padding:12px;
  margin:10px 0 14px;
}
.oferta-row{display:flex;align-items:center;gap:8px}
.oferta-input{width:100%;height:36px;border:1px solid var(--border-warm, #e8dccd);border-radius:var(--radius-sm);padding:6px 10px;background:#fff}

.products{
  background:#fff;border:1px solid #eee;border-radius:var(--radius-md);overflow:hidden
}
.products table{width:100%;border-collapse:collapse}
.products thead th{background:var(--accent,#1F2A44);color:var(--text-inverse);padding:10px;border-radius:0}
.products tbody td{padding:10px;border-top:1px solid var(--border-warm, #e8dccd)}

.totals{
  display:flex;gap:16px;justify-content:flex-end;margin-top:10px;
  background:#fff;border:1px solid #eee;border-radius:var(--radius-md);padding:10px 14px
}

/* DnD + выбор позиции вставки */
#selectedBody tr{cursor:default}
#selectedBody tr.dragging{opacity:.6}
#selectedBody tr.drop-over{outline:2px dashed var(--accent,#1F2A44)}

/* Szerokości i ikonki w kolumnie Akcje */
.offers td.col-actions, .offers th:last-child { white-space: nowrap; text-align: left; }
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:1px solid var(--border-warm, #e8dccd);border-radius:var(--radius-sm);
  background:#fff; cursor:pointer; margin-right:6px;
}
/* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- blada rozowa
   OBWODKA przycisku Usun; --danger #b3261e to nasycona czerwien (dystans RGB 209),
   a przycisk jest w KAZDYM wierszu edytora — token zrobilby z arkusza czerwony plot */
.icon-btn.danger{ border-color:#e9b1b1 }
.icon-btn svg{ width:16px;height:16px; }

/* czytelność klienta */
.offers td.col-client{ max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* (опционально) выровнять шрифты заголовков/компактность */
.offers thead th{ font-weight:700; }

/* ===== Специальные стили для формы оферты ===== */

/* Унифицированная ширина для всех элементов формы оферты */
.offers-container .offers-toolbar {
  margin: 0;
  padding: 16px 20px;
  width: 100%;
  box-sizing: border-box;
}

.offers-container .ofr-head {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.offers-container .ofr-form {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.offers-container .filters-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin: 0;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-warm, #e8dccd);
  width: 100%;
  box-sizing: border-box;
}

/* Липкий блок с кнопками поиска на странице оферты */
.offers-container .ofr-head + .filters-card {
  position: sticky;
  top: 96px; /* ниже фиксированного .topbar */
  z-index: 50; /* выше таблиц и их кнопок */
  overflow: visible;
}

/* Dropdown результатов поиска под липкой панелью на stronie oferty */
.search-results-dropdown{
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 420px;
  overflow: auto;
  padding: 0;
}
.search-results-dropdown.hidden{ display:none; }
.offers-table--dropdown thead{ display:none; }
.offers-table--dropdown tbody tr td{ background:#fff; }
/* Cały wiersz wyniku jest klikalny */
#productBody tr.product-result-row{ cursor:pointer; }
#productBody tr.product-result-row:hover > td{ background:#faf3ec; }

/* Компактные строки результатов и выбранных товаров */
.offers-table tbody td{ padding:8px 10px; }
.offers-table tbody tr{ height: 36px; }

/* Уменьшаем высоту инпутов в таблицах и общий компактный вид */
#selectedBody input{ height:24px; padding:2px 4px; font-size: var(--fs-xs); }
#selectedBody select{ height:24px; padding:1px 3px; font-size: var(--fs-xs); }

/* Кнопка Dodaj в dropdown: прижать вправо, компактнее */
.offers-table--dropdown tbody tr td:last-child .btn-primary{
  padding:6px 10px;
  border-radius: var(--radius-md);
}

/* Строки выбранных товаров: чуть меньше вертикальный ритм */
#selectedTable tbody td{ padding-top:3px; padding-bottom:3px; }
/* Центровка значений в 3 последних колонках */
#selectedTable tbody td:nth-child(9),
#selectedTable tbody td:nth-child(10),
#selectedTable tbody td:nth-child(11){ text-align:center; }

/* Поджать 4 последние колонки по горизонтали */
#selectedTable thead th:nth-child(9),
#selectedTable thead th:nth-child(10),
#selectedTable thead th:nth-child(11),
#selectedTable thead th:nth-child(12){ padding-left:4px; padding-right:4px; }
#selectedTable tbody td:nth-child(9),
#selectedTable tbody td:nth-child(10),
#selectedTable tbody td:nth-child(11),
#selectedTable tbody td:nth-child(12){ padding-left:6px; padding-right:6px; }

/* Kompaktowe wiersze edytora (regresja: wąska Akcja + duże icon-btn w pionie) */
#selectedTable.offers-table tbody tr{ height:auto; }
#selectedTable tbody td{
  padding:4px 6px !important;
  vertical-align:middle;
}
#selectedBody input.oferta-input,
#selectedBody .oferta-input{
  height:24px;
  min-height:24px;
  padding:2px 6px !important;
  font-size: var(--fs-xs);
  line-height:1.2 !important;
}
#selectedBody .row-actions-cell{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:4px;
  padding:2px 4px !important;
  white-space:nowrap;
}
#selectedBody .row-actions-cell .icon-btn{
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  margin:0 !important;
  flex-shrink:0;
  display:inline-flex !important;
  border-radius:var(--offer-radius-control);
  font-size: var(--fs-xs);
}
#selectedTable thead th:last-child,
#selectedTable tbody td:last-child{
  /* 3 przyciski (26px) + odstępy + padding ≈ 94px — kolumna musi je zmieścić
     po dodaniu „+” (Wstaw poniżej), inaczej ostatni przycisk wychodził poza. */
  width:104px !important;
  min-width:104px !important;
  max-width:112px !important;
}


.offers-container .filters-card .search-input-wrapper {
  flex: 1;
  margin: 0;
  min-width: 0;
}

.offers-container .filters-card .btn {
  margin: 0;
  white-space: nowrap;
}

.offers-container .table-container {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative; /* формируем более низкий стек */
  z-index: 1;
}

.offers-container .section-title {
  margin: 0 0 10px 0;
  width: 100%;
  box-sizing: border-box;
}

.offers-container .offer-sticky {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}


/* Стили для сепараторов */
.separator-row {
  background: var(--accent-soft, rgba(31, 42, 68, 0.1));
  border: 1px solid var(--accent, #1F2A44);
  border-radius: var(--radius-sm, 8px);
  margin: 8px 0;
  padding: 10px 12px;
  text-align: center;
  font-weight: 600;
  color: var(--accent-hover, #34456B);
  font-size: var(--fs-sm);
}

/* Separator row (pomieszczenie) */
/* Сепаратор стилизуем как обычную строку продуктов */
tr.sep td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: var(--accent-soft, rgba(31, 42, 68, 0.08));
}

/* Сепаратор использует обычные стили input как у товаров */
tr.sep input.oferta-input {
  background: var(--surface, #fff);
  border: 1px solid var(--accent, #1F2A44);
  font-weight: 600;
  height: 32px;
  padding: 6px 10px;
}
tr.sep input.oferta-input::placeholder {
  color: var(--text-muted, #94a3b8);
}

/* Вписываем текст сепаратора по центру колонки "Opis" */
tr.sep .sep-input{ text-align: left; width: 100%; }

/* Кнопка переключения группировки - УДАЛЕНА */

/* Адаптивность для формы оферты */


/* --- Tabela wybranych pozycji (#selectedTable / #selectedBody) — z style.css --- */

/* style.css 1936-1958 */
/* ===== Offer tables: compact headers & OPIS widest ===== */
.tbl--compact thead th{
  padding: 8px 8px;
  font-size: var(--fs-sm);
  line-height: 1.2;
}
.tbl--compact tbody td{
  padding: 6px 8px;
  font-size: var(--fs-sm);
}

/* Opis — najważniejsza kolumna; nie przycinać tekstu na sąsiednie pola */
#selectedTable thead th.col-desc,
#selectedTable tbody td.col-desc {
  overflow: hidden;
  white-space: normal;
}
#selectedTable td.col-desc .offer-cell-input,
#selectedTable td.col-desc .oferta-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Search results: ширины колонок — Lp | Kod | Nazwa | Producent | Cena | Jm | Rabat */
#productBody td:nth-child(2){ width: 7rem; }    /* Kod */
#productBody td:nth-child(3){ width: auto; }    /* Nazwa */
#productBody td:nth-child(4){ width: 10rem; }   /* Producent */
#productBody td:nth-child(5){ width: 7.5rem; }  /* Cena netto */
#productBody td:nth-child(6){ width: 4rem; }    /* Jm */
#productBody td:nth-child(7){ width: 6rem; }    /* Rabat */

/* style.css 1975-1980 */
/* 1) Спрятать «пунктиры» при клике по фону таблицы, оставить аккуратный фокус у инпутов */
.tbl *:focus { outline: none !important; }
.oferta-input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(31, 42, 68, 0.12));
}

/* style.css 1984-2021 */
/* убить пунктиры, которые рисуются на tr/td при :focus / :focus-within */
.tbl tr:focus,
.tbl tr:focus-within,
.tbl td:focus,
.tbl td:focus-within,
.tbl th:focus,
.tbl th:focus-within { outline: none !important; box-shadow: none !important; }

/* если где-то задаётся dashed на границах при фокусе — принудительно solid */
.tbl tbody tr:focus-within > td {
  border-top-style:    solid !important;
  border-right-style:  solid !important;
  border-bottom-style: solid !important;
  border-left-style:   solid !important;
  border-image: none !important;
}



/* убираем dashed/outline/псевдо-рамки у строки таблицы при фокусе */
table.tbl.tbl--compact tbody tr:focus,
table.tbl.tbl--compact tbody tr:focus-within,
table.tbl tbody tr:focus,
table.tbl tbody tr:focus-within{
  outline: none !important;
  box-shadow: none !important;
}
table.tbl.tbl--compact tbody tr:focus-within td,
table.tbl tbody tr:focus-within td,
#selectedBody tr:focus-within td{
  border-style: solid !important;
  border-image: none !important;
  box-shadow: none !important;
}
table.tbl tbody tr:focus-within::before,
table.tbl tbody tr:focus::before{
  content: none !important;
}

/* style.css 2024-2058 */
/* === HOTFIX: убрать пунктиры и выровнять липкие суммы === */

/* анти-пунктиры на строках таблиц */
.tbl *:focus{ outline: none !important; }
.tbl tr:focus, .tbl tr:focus-within,
.tbl td:focus, .tbl td:focus-within,
.tbl th:focus, .tbl th:focus-within{
  outline: none !important;
  box-shadow: none !important;
}
.tbl tbody tr:focus-within > td{
  border-style: solid !important;
  border-image: none !important;
  box-shadow: none !important;
}


/* шапка таблицы без «пилюль», как просил */
.tbl--flat thead th{
  border-radius: 0 !important;
}





/* style.css 2060-2088 — bazowy .offer-sticky w sekcji „Footer” poniżej */
.offer-sticky .totals,
.offer-sticky > div,
.offer-sticky > section{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.offer-sticky b {
  font-weight: inherit;
  margin: 0;
  line-height: inherit;
}
.offer-sticky-pad{ padding-bottom: 0; }

/* style.css 2092-2153 */
#selectedBody tr{ scroll-margin-bottom: 0; }


/* Перетаскивание — мягкая подсветка без пунктиров */
#selectedBody tr.drop-over{
  outline:0 !important;
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- jedyna ZYWA
     obwodka przeciagania wiersza; guard nie rozbija box-shadow, a --accent-legacy
     (#dc5f00) to inny odcien niz rgba(216,111,31) */
  box-shadow: inset 0 0 0 2px rgba(216,111,31,.25) !important;
}

/* Drag handle */
.row-actions-cell{
  white-space: nowrap;
}
/* Row grip cell styles removed - no longer using drag handles */
#selectedBody tr[draggable="true"]{ cursor: grab; }
/* Показывать лапку сразу над любыми неинтерактивными зонами строки */
#selectedBody tr td{ cursor: grab; }
#selectedBody input, #selectedBody textarea{ cursor: text; }
#selectedBody select{ cursor: auto; }
#selectedBody button, #selectedBody .icon-btn{ cursor: pointer; }
#selectedBody tr.dragging{ opacity: 0.6; }
#selectedBody tr.drop-over{ outline: 2px dashed var(--accent, #1F2A44); outline-offset: -2px; }


/* --- kill black separators on focus in selected table --- */
#selectedBody tr:focus,
#selectedBody tr:focus-within{
  outline: none !important;
  box-shadow: none !important;
}

#selectedBody tr:focus-within > td,
#selectedBody tr:focus > td{
  outline: none !important;
  box-shadow: none !important;
  border-style: solid !important;
  border-image: initial !important;
  border-top-color:    var(--border-warm, #e8dccd) !important;
  border-bottom-color: var(--border-warm, #e8dccd) !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* вернуть нормальные края только первому/последнему столбцу */
#selectedBody tr:focus-within > td:first-child{ border-left: 1px solid var(--border-warm, #e8dccd) !important; }
#selectedBody tr:focus-within > td:last-child { border-right:1px solid var(--border-warm, #e8dccd) !important; }

/* Снижаем общую высоту выбранных строк за счет центрирования по вертикали */
#selectedBody td{ vertical-align: middle; }

/* Co drugi wiersz produktu — delikatna zieleń */
#selectedBody tr:not(.sep):not(.separator-row) td {
  background: var(--surface, #fff);
}

#selectedBody tr.zebra-row:not(.sep) td {
  background: var(--accent-soft, rgba(31, 42, 68, 0.07));
}

#selectedBody tr.sep.zebra-row td,
#selectedBody tr.separator-row td {
  background: var(--accent-soft, rgba(31, 42, 68, 0.08));
}

/* style.css 2163-2180 */
#productBody tr:focus,
#productBody tr:focus-within{
  outline:none !important;
  box-shadow:none !important;
}
#productBody tr:focus-within > td,
#productBody tr:focus > td{
  outline:none !important;
  box-shadow:none !important;
  border-style: solid !important;
  border-image: initial !important;
  border-top-color:var(--border-warm, #e8dccd) !important;
  border-bottom-color:var(--border-warm, #e8dccd) !important;
  border-left:0 !important;
  border-right:0 !important;
}
#productBody tr:focus-within > td:first-child{ border-left:1px solid var(--border-warm, #e8dccd) !important; }
#productBody tr:focus-within > td:last-child { border-right:1px solid var(--border-warm, #e8dccd) !important; }

/* ===== Подсветка опций по строкам ===== */
#selectedBody tr[data-opt="1"] td { background:#eaf5ff; }
#selectedBody tr[data-opt="2"] td { background:#eafaf1; }
#selectedBody tr[data-opt="3"] td { background:#fff3e6; }
#selectedBody tr[data-opt="4"] td { background:#f3eaff; }


/* Flash highlight of newly added rows */
#selectedBody tr.flash td {
  animation: flashRow 1.2s ease-in-out;
}
@keyframes flashRow {
  0%   { background-color: var(--accent-soft, rgba(31, 42, 68, 0.18)); }
  100% { background-color: transparent; }
}

/* --- Column profile (#selectedTable) — jeden blok --- */
#selectedTable.offers-table--editor {
  width: 100%;
  min-width: 1240px;
  table-layout: fixed;
  border-collapse: collapse;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  background: var(--surface, #fff);
}

#selectedTable.offers-table--editor col.col-lp-col { width: 2.75rem; }
#selectedTable.offers-table--editor col.col-code-col { width: 8.25rem; }
#selectedTable.offers-table--editor col.col-brand-col { width: 7rem; }
#selectedTable.offers-table--editor col.col-desc-col { width: auto; min-width: 190px; }
#selectedTable.offers-table--editor col.col-qty-col { width: 4.25rem; }
#selectedTable.offers-table--editor col.col-unit-col { width: 3.25rem; }
#selectedTable.offers-table--editor col.col-money-col { width: 6.75rem; }
#selectedTable.offers-table--editor col.col-pct-col { width: 3.25rem; }
#selectedTable.offers-table--editor col.col-delivery-col { width: 7.5rem; }
#selectedTable.offers-table--editor col.col-actions-col { width: 6.5rem !important; }

/* Reguły responsywne listy nie mogą ukrywać kolumn edytora */
#selectedTable.offers-table--editor thead th,
#selectedTable.offers-table--editor tbody td,
#productTable.offers-table thead th,
#productTable.offers-table tbody td {
  display: table-cell !important;
  visibility: visible !important;
}

#selectedTable.offers-table--editor thead th.col-desc,
#selectedTable.offers-table--editor tbody td.col-desc {
  display: table-cell !important;
  width: auto !important;
  min-width: 190px !important;
}

#selectedTable.offers-table--editor thead th.col-actions,
#selectedTable.offers-table--editor tbody td.col-actions {
  position: static;
  /* 3 przyciski (+, POWIEL, Usuń) po 26px + odstępy + padding ≈ 94px.
     !important, bo późniejsza reguła #selectedTable .col-actions {width:5.5rem}
     i table-layout: fixed nadpisywały szerokość do 72px. */
  min-width: 104px !important;
  width: 104px !important;
  box-shadow: none;
}

#selectedTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 6px;
  font-size: var(--fs-sm);
}

#selectedTable.offers-table--editor tbody td {
  font-size: var(--fs-xs);
}

#selectedTable .col-lp {
  width: 3rem;
  text-align: center;
}

#selectedTable .col-code {
  width: 8.25rem;
}

#selectedTable .col-brand {
  width: 7rem;
}

#selectedTable .col-desc {
  width: auto;
  min-width: 190px;
}

#selectedTable .col-qty {
  width: 4.5rem;
  text-align: right;
}

#selectedTable .col-unit {
  width: 3.5rem;
  text-align: center;
}

#selectedTable .col-money {
  width: 6.75rem;
}

#selectedTable .col-pct {
  width: 3.25rem;
  min-width: 3.25rem;
  max-width: 3.25rem;
  text-align: right;
}

#selectedTable .col-actions {
  width: 104px !important;
  min-width: 104px !important;
  text-align: center;
}

#selectedTable .offer-cell-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#selectedTable .offer-cell-input--num,
#selectedTable .offer-input--pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#selectedTable .offer-input--pct {
  width: 100%;
  min-width: 0;
  max-width: 3.25rem;
  padding: 4px 2px;
}

#selectedTable .offer-cell-input--unit {
  text-align: center;
  width: 100%;
  max-width: 3.5rem;
}

#selectedTable tbody tr .row-actions-cell {
  white-space: nowrap;
}

/* --- Formularz + stopka oferty (offer.html) — ze style.css --- */

/* style.css 1290-1790 */
/* Oferta form layout */
.ofr-form{ 
  background: var(--surface, #fff);
  border-radius: var(--radius-lg, 16px);
  padding: 20px;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(15, 23, 42, 0.08));
  border: 1px solid var(--border, #e2e8f0);
  position: relative;
  overflow: hidden;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ofr-form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent, #1F2A44);
}

/* Стильные поля ввода для формы оферты */
/* Удалены конфликтующие стили полей формы */

/* Унифицированная ширина для всех полей формы */
.ofr-form input[id="orderNr"],
.ofr-form input[type="date"],
.ofr-form input[id="fvPhone"],
.ofr-form input[type="text"],
.ofr-form input[type="email"],
.ofr-form input[type="tel"] {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Дополнительная специфичность для поля orderNr */
input[id="orderNr"],
.form-input[id="orderNr"],
.ofr-form input[id="orderNr"] {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.ofr-form input[type="text"]:focus,
.ofr-form input[type="email"]:focus,
.ofr-form input[type="tel"]:focus,
.ofr-form input[type="date"]:focus,
.ofr-form textarea:focus,
.ofr-form select:focus {
  outline: none !important;
  border-color: var(--accent, #1F2A44) !important;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(31, 42, 68, 0.12)) !important;
}

.ofr-form textarea {
  height: auto !important;
  min-height: 80px !important;
  resize: vertical !important;
  line-height: 1.4 !important;
}

/* Исключение для полей fvData и deliveryAddress - они должны быть однострочными */
.ofr-form textarea#fvData,
.ofr-form textarea#deliveryAddress {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  resize: none !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
  padding: 4px 8px !important;
}

/* Układ pól .form-grid — offer-form-clean.css (offer.html, ładowany po style.css) */

.filters-card .search-input,
.search-bar .search-input {
  height: 36px !important;
  min-height: 36px;
  max-height: 36px;
  padding: 8px 12px !important;
  font-size: var(--fs-sm);
  border-radius: var(--offer-radius-control) !important;
}

.currency-select,
.vat-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}

.wide-field {
  grid-column: span 2;
}



/* style.css 1802-1826 */
.ofr-row{ 
  display: grid; 
  grid-template-columns: 160px 1fr; 
  align-items: center; 
  gap: 8px; 
  margin: 1px 0; 
}
.ofr-row span{ 
  font-size: var(--fs-sm); 
  font-weight: 600; 
  color: var(--text-muted, #475569);
  line-height: 1.2;
}
.oferta-input{ 
  height: 32px !important; 
  min-height: 32px !important;
  max-height: 32px !important;
  border: 1px solid var(--border-warm, #e8dccd) !important;
  border-radius: var(--offer-radius-control) !important; 
  padding: 0 10px !important; 
  background: #fff !important; 
  font-size: var(--fs-sm) !important;
  transition: border-color 0.2s ease !important;
  line-height: 1.2 !important;
}


/* style.css 1998-2052 */
/* Сетка строки формы: метка + поле */
.oferta-row{
  display:grid;
  grid-template-columns: 170px 1fr;  /* фиксированная ширина колонки слева */
  align-items:center;
  gap:10px;
}
.oferta-field{ position:relative; width:100%; }
.oferta-field .oferta-input{ width:100%; box-sizing:border-box; }

/* автокомплит проектанта */
.suggest.hidden{display:none}
.suggest-item{padding:8px 10px; cursor:pointer}
.suggest-item:hover{background:var(--accent-soft,rgba(31, 42, 68,.1))}

/* style.css 2345-2390 */

/* style.css 2518-2711 */
/* ===== СТИЛИ ДЛЯ СТРАНИЦЫ OFFER ===== */

/* Заголовок секции */
.section-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  margin: 24px 0 16px;
  padding: 0 16px;
}

/* Стили для формы оферты */
.ofr-head {
  display: grid;
  grid-template-columns: 1fr; /* единая колонка для ровной сетки меток */
  gap: 12px;
  margin: 0 16px 20px;
}

/* Удален дублирующий стиль .ofr-form */

/* Удалены конфликтующие стили сетки формы */

/* Удалены старые медиа-запросы формы */


/* Стили для поиска продуктов */
.filters-card {
  background: var(--surface, #fff);
  border-radius: var(--radius-lg, 16px);
  padding: 20px;
  margin: 0 16px 20px;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(15, 23, 42, 0.08));
  border: 1px solid var(--border, #e2e8f0);
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.filters-card .search-input-wrapper {
  flex: 1;
  min-width: 300px;
}

.filters-card .btn {
  white-space: nowrap;
}

/* Стили для таблиц продуктов */
.table-container {
  margin: 0 0 20px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
}

/* Stopka oferty — ten sam język co filters-card / formularz */
.offers-container .offer-sticky {
  position: relative;
  bottom: auto;
  z-index: 1;
  margin: 12px 0 0;
  padding: 16px 18px;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
}

.offer-sticky {
  position: relative;
  bottom: auto;
  z-index: 1;
}

.offer-sticky__grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto;
  gap: var(--space-4, 16px) var(--space-5, 24px);
  align-items: stretch;
}

.offer-sticky__finance {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 12px 28px;
  align-items: end;
  padding: 14px 18px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 12px);
}

.offer-sticky__notes {
  min-width: 0;
}

.offer-sticky__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, #475569);
  margin-bottom: 6px;
}

#offerNotes {
  width: 100%;
  min-height: 56px;
  max-height: 120px;
  resize: vertical;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
  background: var(--surface, #fff);
  font: inherit;
  box-sizing: border-box;
  font-size: var(--fs-sm);
  line-height: 1.35;
}

#offerNotes:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(31, 42, 68, 0.12));
}

.offer-sticky__totals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  white-space: nowrap;
}

.offer-sticky__sum-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.offer-sticky__sum-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted, #475569);
  line-height: 1.2;
}

.offer-sticky__sum-value {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent, #1F2A44);
  font-variant-numeric: tabular-nums;
}

.offer-sticky__block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.offer-sticky__block .offer-sticky__sum-label {
  margin-bottom: 2px;
}

.offer-total-control {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.offer-sticky .offer-input--pct {
  width: 3.25rem;
  min-width: 3.25rem;
  max-width: 3.25rem;
  height: 32px;
  padding: 4px 6px;
  font-size: var(--fs-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface, #fff);
  font-weight: 600;
  box-sizing: border-box;
}

.offer-input--pct:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

.offer-total-control__suffix,
.offer-total-control__eq {
  color: var(--text-muted, #475569);
  font-weight: 500;
}

@media (max-width: 1024px) {
  .offer-sticky__grid {
    grid-template-columns: 1fr;
  }
  .offer-sticky__finance {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .offer-sticky__totals {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .offer-sticky__finance {
    grid-template-columns: 1fr;
  }
  .offer-sticky__totals {
    flex-direction: column;
    gap: 10px;
  }
}

.offer-total-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  padding: 0 10px;
  background: var(--surface, #fff);
  height: 32px;
  min-width: 9.5rem;
  box-sizing: border-box;
}

.offer-total-input {
  border: none;
  background: transparent;
  text-align: right;
  flex: 1;
  min-width: 0;
  width: 7.5rem;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent, #1F2A44);
  font-variant-numeric: tabular-nums;
}

.offer-total-input:disabled {
  color: var(--text-subtle);
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: not-allowed;
  opacity: 0.85;
}

.offer-total-input:focus {
  outline: none;
}

.offer-total-input:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: -2px;
}

.offer-total-unit {
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--text-muted, #475569);
  flex-shrink: 0;
}

.offer-sticky__block--discount .offer-total-control input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent, #1F2A44);
  flex-shrink: 0;
}

.offer-totals b {
  color: var(--accent, #1F2A44);
  font-weight: 700;
  font-size: var(--fs-md);
}

#selectedTable tbody td.col-money.c-after,
#selectedTable tbody td.col-money.c-networth,
#selectedTable tbody td.col-money.c-brutto {
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--text, #1e293b);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#selectedBody .icon-btn.duplicate {
  border-color: var(--accent, #1F2A44);
  color: var(--accent-hover, #34456B);
}

#selectedBody .icon-btn.duplicate:hover {
  background: var(--accent-soft, rgba(31, 42, 68, 0.12));
}

.offer-sticky-pad {
  height: 0;
}


/* style.css 3597-3637 */
/* Убеждаемся, что родительские контейнеры не обрезают выпадающий список */
.ofr-form .form-group {
  overflow: visible !important;
}

.ofr-form .autocomplete-wrapper {
  overflow: visible !important;
  z-index: 1;
}

.ofr-form .form-row {
  overflow: visible !important;
}

/* Дополнительные стили для обеспечения видимости выпадающего списка */
.offers-container {
  overflow: visible !important;
}

.ofr-form .form-grid {
  overflow: visible !important;
}

.ofr-form .ofr-form-card {
  overflow: visible !important;
}

.ofr-form .card {
  overflow: visible !important;
}

/* Специальные стили для контейнера проектанта */
.ofr-form .form-group:has(#designerName) {
  overflow: visible !important;
  /* Ponad .filters-card (SZUKAJ PRODUKT, sticky z-index:50) — lista podpowiedzi
     projektanta ma się pokazywać NAD paskiem wyszukiwania produktu. */
  z-index: 60 !important;
}

.ofr-form .form-group:has(#designerSuggest) {
  overflow: visible !important;
  z-index: 60 !important;
}

/* === Etap 3: eksport, wyszukiwarka, pusty stan tabeli === */

.export-dropdown {
  position: relative;
}

.export-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.export-dropdown__chevron {
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.export-dropdown.is-open .export-dropdown__chevron {
  transform: rotate(180deg);
}

.export-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 220px;
  padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(15, 23, 42, 0.12));
}

.export-dropdown__menu.hidden {
  display: none;
}

.export-dropdown__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--text, #1e293b);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.export-dropdown__item:hover,
.export-dropdown__item:focus-visible {
  background: var(--accent-soft, rgba(31, 42, 68, 0.12));
  outline: none;
}

.export-dropdown__item:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: -2px;
}

.offers-container .filters-card.offer-search-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 16px 18px !important;
}

.offer-search-panel__search {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.offer-search-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.offer-search-panel .search-input-wrapper {
  width: 100%;
}

.offer-search-panel .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #94a3b8);
  pointer-events: none;
}

.offer-search-panel .search-input {
  padding-left: 34px !important;
}

.selected-empty {
  text-align: center;
  padding: 40px 20px !important;
  background: var(--surface-muted, #faf9f5) !important;
  color: var(--text-muted, #475569);
  border: none !important;
}

.selected-empty__icon {
  display: block;
  font-size: var(--fs-3xl);
  margin-bottom: 8px;
  opacity: 0.85;
}

.selected-empty__title {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text, #1e293b);
  margin-bottom: 6px;
}

.selected-empty__hint {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.table-container--editor {
  background: linear-gradient(to right, var(--surface, #fff) 30%, transparent) 0 0 / 24px 100% no-repeat local,
    linear-gradient(to left, var(--surface, #fff) 30%, transparent) 100% 0 / 24px 100% no-repeat local;
  background-attachment: local, local;
}

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


#selectedTable.offers-table--editor thead th {
  background: var(--accent, #1F2A44);
  color: var(--text-inverse, #fff);
}

/* === Responsywność edytora oferty (final) === */

@media (max-width: 1200px) {
  .offers-container .ofr-head + .filters-card {
    top: 90px;
  }

  #selectedTable {
    min-width: 1100px;
  }
}

@media (max-width: 768px) {
  .offers-container .ofr-head + .filters-card {
    top: 72px;
  }

  .offers-container .filters-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 16px;
  }

  .offers-container .filters-card .search-input-wrapper {
    flex: none;
    min-width: auto;
  }

  .offers-container .filters-card .btn {
    width: 100%;
  }

  .ofr-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;
  }

  .ofr-form {
    margin: 8px 0;
    padding: 16px;
  }

  .filters-card {
    flex-direction: column;
    align-items: stretch;
  }

  .filters-card .search-input-wrapper {
    min-width: auto;
  }

  .offer-sticky {
    padding: 12px;
    margin: 8px 0;
  }

  #offerNotes {
    padding: 12px;
    font-size: var(--fs-base);
    min-height: 80px;
  }

  #selectedTable {
    min-width: 1100px;
  }

  #selectedTable thead th.col-desc,
  #selectedTable tbody td.col-desc {
    display: table-cell !important;
    visibility: visible !important;
    min-width: 200px !important;
    width: 200px !important;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-group {
    gap: 6px;
  }

  /* USUNIETE (fala 1): 28px wysokosci + 12px tekstu = auto-zoom iOS i cel
     dotykowy o polowe mniejszy niz --touch-min. Rozmiar pol na mobile
     ustala teraz jedna regula na koncu style.css. */


  .separator-row {
    font-size: var(--fs-sm);
    padding: 10px 12px;
    margin: 12px 0;
  }
}

@media (max-width: 400px) {
  #selectedTable thead th:nth-child(4),
  #selectedTable tbody td:nth-child(4) {
    min-width: 200px !important;
    width: 200px !important;
  }
}

/* Lista: ukrywanie kolumn — nigdy w edytorze */
.offers-table--editor th.col-desc,
.offers-table--editor td.col-desc {
  display: table-cell !important;
  visibility: visible !important;
  min-width: 190px !important;
}

/* A11y (fala 1): przywrocenie widocznego fokusu klawiatury w tabelach oferty.
   Wyzej `.tbl *:focus { outline: none !important }` wycina fokus polom,
   przyciskom akcji i wierszom — tu wraca on wylacznie dla nawigacji
   klawiatura (:focus-visible), wiec klik myszka nadal nie rysuje ramki.
   Ta sama specyficznosc co reguly wycinajace -> MUSI byc na koncu pliku.
   #productBody/#selectedBody osobno, bo tamte reguly maja ID (1,0,1). */
.tbl *:focus-visible,
#selectedBody tr:focus-visible,
#productBody tr:focus-visible {
  outline: 2px solid var(--accent-text) !important;
  outline-offset: -2px !important;
}

/* <<< css/pages/offer-editor.css */
/* >>> css/components/offers-list.css */
/* Lista ofert (offers.html) — tokens + Calm workspace */

/* ===== Etap 2: lista + edytor (.filters-card / .table-container) ===== */

.offers-container .filters-card::before,
.offers-container .table-container::before,
.offers-container .pagination::before {
  display: none !important;
  content: none !important;
}

.offers-container .filters-card {
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: var(--radius-lg, 16px) !important;
  padding: 20px 24px !important;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06)) !important;
}

.offers-container .table-container {
  border: 1px solid var(--border, #e2e8f0) !important;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06)) !important;
  border-radius: var(--radius-lg, 16px) !important;
}

.offers-container .offers-toolbar {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
}

/* Etap 3: paginacja i puste stany — bez pomarańczowych gradientów */
.offers-container .pagination {
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: var(--radius-lg, 16px) !important;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06)) !important;
}

.offers-container .empty-message,
.offers-container .loading-message,
.offers-container .error-message {
  background: var(--surface-muted, #faf9f5) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06)) !important;
  color: var(--text-muted, #475569) !important;
}

/* Klikalne wiersze ofert */
.offers-container .offers-table tbody tr.offer-row,
.offers-container .offers-table tbody tr.order-row {
  cursor: pointer !important;
}

.offers-container .offers-table tbody tr.order-row:hover td {
  background-color: rgba(31, 42, 68, 0.07) !important;
}

.offers-container .offers-table tbody tr.offer-row:hover td {
  background-color: rgba(31, 42, 68, 0.07) !important;
}

.offers-container .offers-table tbody tr.offer-row:hover td:first-child {
  border-left: none !important;
}

.offers-container .offers-table tbody td:first-child,
.offers-container .offers-table tbody tr {
  border-left: none !important;
}

.offers-container .offers-table tbody tr .action-buttons,
.offers-container .offers-table tbody tr .action-btn,
.offers-container .offers-table tbody tr .status-select,
.offers-container .offers-table tbody tr select {
  cursor: pointer !important;
}

.offers-container .offers-table thead th,
.offers-container .offers-table thead th:last-child {
  background: var(--accent-text, #34456B) !important;
}

.offers-container .offers-table thead th:hover {
  background: var(--accent-text-hover) !important;
}

.offers-container .offers-table tbody td {
  border-bottom: 1px solid var(--border, #e2e8f0) !important;
  font-variant-numeric: tabular-nums;
}

/* Filtry — czytelniejsze pola i przyciski */
.offers-container .filters-grid {
  gap: 14px 16px;
}

.offers-container .filter-label {
  font-size: var(--fs-xs, 12px);
  font-weight: 600;
  color: var(--text-muted, #475569);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.offers-container .search-input-wrapper {
  min-height: 40px;
}

.offers-container .search-input,
.offers-container .filter-select,
.offers-container .filter-input,
.offers-container input.filter-input[type="date"] {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 8px 12px !important;
  font-size: var(--fs-base, 14px);
  line-height: 1.3 !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: var(--radius-sm, 8px) !important;
  background: var(--surface, #fff) !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.offers-container .search-input {
  padding-left: 36px !important;
  text-indent: 0 !important;
}

.offers-container .search-input:focus,
.offers-container .filter-select:focus,
.offers-container .filter-input:focus {
  outline: none !important;
  border-color: var(--accent, #1F2A44) !important;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(31, 42, 68, 0.12)) !important;
}

.offers-container .search-input:hover,
.offers-container .filter-select:hover,
.offers-container .filter-input:hover {
  border-color: var(--accent, #1F2A44) !important;
  box-shadow: none !important;
}

.offers-container .search-input:focus + .search-icon,
.offers-container .search-input-wrapper:focus-within .search-icon {
  color: var(--accent, #1F2A44) !important;
}

.offers-container .filter-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface, #fff);
  color: var(--text, #1e293b);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.offers-container .filter-clear-btn:hover {
  border-color: var(--accent, #1F2A44);
  color: var(--accent-text, #34456B);
  background: var(--accent-soft, rgba(31, 42, 68, 0.08));
}

.offers-container .only-mine-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 4px;
  font-size: var(--fs-base, 14px);
  color: var(--text, #1e293b);
  cursor: pointer;
}

.offers-container .only-mine-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent, #1F2A44);
  cursor: pointer;
}

.sort-btn.active {
  border-color: var(--accent, #1F2A44) !important;
  color: var(--accent-text, #34456B) !important;
}

/* --- było: style.css 794-814 --- */
/* Перекрываем общие стили таблиц для offers-table */
.offers-table thead th {
  padding: 5px 4px !important;
  font-size: var(--fs-xs, 12px) !important;
}
/* UWAGA: te reguły były globalne (`table thead th…`, `table tbody td…`) i wyciekały
   na KAŻDĄ stronę panelu — m.in. zamalowywały kolory statusów na desce logistycznej
   (zamowionka.html) i maskowały hover wierszy na probki/fabryki/tile-pricing.
   Teraz oscope'owane do .offers-table; tabele legacy bez własnych stylów dostają
   odpowiednik niżej. Nie dodawaj tu selektorów bez klasy! */
.offers-table thead th:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.offers-table thead th:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.offers-table tbody td{background:#fff;padding:12px;border-top:1px solid #eee;border-bottom:1px solid #eee}
/* import.html „Historia importów” — tabela bez klasy, żyła na globalnej regule */
.import-section table thead th:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.import-section table thead th:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.import-section table tbody td{background:#fff;padding:12px;border-top:1px solid #eee;border-bottom:1px solid #eee}
.offers tbody tr{position:relative;transition:background .15s}
/* Цвета фона для строк в зависимости от статуса */
.offers-table tbody tr[data-status="nowa"] td{background:#ffffff !important}
.offers-table tbody tr[data-status="wysłana"] td, .offers-table tbody tr[data-status="wyslana"] td{background:#dbeafe !important}
.offers-table tbody tr[data-status="zamówiona"] td, .offers-table tbody tr[data-status="zamowiona"] td{background:#fef3c7 !important}
.offers-table tbody tr[data-status="rozliczona"] td{background:#dcfce7 !important}


/* Kolory statusów wierszy LISTY OFERT — było inline (cellStyle z status.ts na
   każdym td). Po normalizeOfferStatus data-status to wyłącznie "nowa" lub
   "do_zamowienia" (stare aliasy wysłana/zamówiona/rozliczona są mapowane),
   więc reguły aliasów wyleciały. UWAGA: zamówienia (tr.order-row[data-status])
   mają WŁASNE reguły w sekcji "Slice 4" niżej — nie łączyć, nie duplikować.
   Hover nadal wygrywa: .offers-container ... tr.offer-row:hover td ma wyższą
   specyficzność i też !important. */
.offers-table tbody tr.offer-row[data-status="nowa"] td {
  background: var(--st-nowa, #ffffff) !important;
  color: var(--text) !important;
}
.offers-table tbody tr.offer-row[data-status="do_zamowienia"] td {
  background: var(--st-do-zamowienia, #fef3c7) !important;
  color: var(--status-text-warn, #92400e) !important;
}

/* --- było: style.css 903-921 --- */
/* === OFFERS TOOLBAR === */

.offers-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin:12px 20px;
  width: calc(100% - 40px);
  box-sizing: border-box;
  margin-left: 20px;
  margin-right: 20px;
}
.offers-toolbar .ctrl{
  height:36px;border:1px solid #e3d3c2;border-radius:var(--radius-sm);padding:6px 10px;background:#fff
}
.tools-left{display:flex;gap:8px;flex-wrap:wrap}
.tools-right{display:flex;gap:8px;align-items:center}
.sort-btn{
  background:#fff;border:1px solid #e3d3c2;border-radius:var(--radius-sm);padding:6px 10px;cursor:pointer
}
.sort-btn.active{border-color:var(--accent);box-shadow:var(--shadow-sm)}

/* --- było: style.css 2351-2724 --- */
/* ===== НОВАЯ СТРАНИЦА OFFERS ===== */

/* Основной контейнер */
.offers-container {
  max-width: none;
  margin: 0;
  padding: 20px 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Панель инструментов */
.offers-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 16px 20px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid #f0e7dc;
  width: 100%;
  box-sizing: border-box;
  /* Убираем лишние отступы */
  margin-left: 0;
  margin-right: 0;
}

.tools-left {
  display: flex;
  gap: 12px;
  align-items: center;
  /* Убираем лишние отступы */
  margin: 0;
  padding: 0;
}

.tools-right {
  display: flex;
  align-items: center;
  /* Убираем лишние отступы */
  margin: 0;
  padding: 0;
}

.results-info {
  font-size: var(--fs-base, 14px);
  color: var(--text-muted);
  font-weight: 500;
  /* Убираем лишние отступы */
  margin: 0;
  padding: 0;
}

/* Карточка фильтров */
.filters-card {
  background: linear-gradient(135deg, #fff 0%, #faf9f5 100%);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 0;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(31, 42, 68, 0.15);
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.filters-card::before {
  display: none;
  content: none;
}

.filters-grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr auto auto auto auto;
  gap: 16px;
  align-items: start;
}

/* Адаптивность для фильтров */
@media (max-width: 1400px) {
  .filters-grid {
    grid-template-columns: 1fr 1.5fr 1.5fr auto auto auto auto;
  }
}

@media (max-width: 1200px) {
  .filters-grid {
    grid-template-columns: 1fr 1fr auto auto auto auto;
  }
}

@media (max-width: 1000px) {
  .filters-grid {
    grid-template-columns: 1fr 1fr auto auto auto;
  }
}

@media (max-width: 800px) {
  .filters-grid {
    grid-template-columns: 1fr 1fr auto auto;
  }
}

@media (max-width: 600px) {
  .filters-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .offer-number,
  .offer-date {
    font-size: var(--fs-xs, 12px);
  }

  .bulk-actions {
    flex-direction: column;
    align-items: stretch;
  }
}


.filter-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-label {
  font-size: var(--fs-xs, 12px);
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

/* Поле поиска */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 28px;
}

.search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: var(--fs-xs, 12px);
  pointer-events: none;
  z-index: 1;
  transition: color 0.2s ease;
}

.search-input {
  width: 100%;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--border-warm, #e8dccd) !important;
  border-radius: var(--radius-sm) !important;
  background: #fff !important;
  font-size: var(--fs-xs, 12px) !important;
  transition: all 0.2s ease;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.2;
  text-indent: 16px !important;
}

.search-input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: var(--focus-ring) !important;
  background: #fff !important;
}

.search-input:hover {
  border-color: var(--accent) !important;
}

.search-input:focus + .search-icon {
  color: var(--accent) !important;
}

.search-input::placeholder {
  color: var(--text-muted, #475569) !important;
  font-style: italic;
}

.filter-select option {
  font-size: var(--fs-xs, 12px) !important;
  padding: 4px 8px !important;
}

.filter-select option:first-child {
  color: var(--text-muted, #475569) !important;
  font-style: italic;
}

.search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: none;
  background: #f3f4f6;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs, 12px);
  font-weight: bold;
  transition: all 0.2s ease;
  z-index: 10;
}

.search-clear:hover {
  background: var(--accent-hover);
  color: var(--text-inverse);
  transform: translateY(-50%) scale(1.1);
}

/* Селекты и инпуты */
.filter-select,
.filter-input {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--border-warm, #e8dccd) !important;
  border-radius: var(--radius-sm) !important;
  background: #fff !important;
  font-size: var(--fs-xs, 12px) !important;
  transition: all 0.2s ease;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  width: 100%;
}

.filter-select:hover,
.filter-input:hover {
  border-color: var(--accent) !important;
}

.filter-select:focus,
.filter-input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: var(--focus-ring) !important;
  background: #fff !important;
}

/* Специфичные ширины для полей фильтров */
.filter-group:has(input[id="fltFrom"]) .filter-input,
.filter-group:has(input[id="fltTo"]) .filter-input {
  width: 120px;
}

/* Размеры для селектов */
#fltDesigner,
#fltStatus {
  min-width: 140px;
}

/* Размер для чекбокса */
.filter-group:has(.only-mine-checkbox) {
  min-width: 160px;
}

/* Стили для второй строки фильтров */
.filters-actions {
  margin-top: 6px;
  gap: 16px;
}

.filters-actions .filter-group {
  flex: 0 0 auto;
}

/* Поиск */
.search-input-wrapper {
  position: relative;
  width: 100%;
}

.search-input {
  padding: 8px 12px !important;
  width: 100%;
  min-height: 36px;
  height: 36px;
  font-size: var(--fs-sm);
  line-height: 1.4;
}

/* Контейнер таблицы */
.table-container {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(31, 42, 68, 0.1);
  margin: 0 0 20px 0;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  max-width: none; /* Убираем ограничение максимальной ширины */
}

/* Edytor oferty: przewijanie poziome zamiast obcinania kolumn */
.table-container.table-container--editor,
.offers-container .table-container.table-container--editor {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
}

/* Для больших экранов - убираем боковые отступы */
@media (min-width: 1200px) {
  .table-container {
    margin: 0 0 20px 0;
    width: 100%;
  }
}

.table-container::before {
  display: none;
  content: none;
}

/* Таблица оферт */
.offers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base, 14px);
}

.offers-table--list {
  min-width: 1040px;
}

.offers-table--editor {
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  min-width: 1240px;
}

/* --- było: style.css 2747-2756 --- */
.offers-table:not(.offers-table--editor) {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: white;
  table-layout: fixed;
  /* Предотвращение переполнения */
  min-width: 800px;
  max-width: none;
}

/* --- było: style.css 2794-2801 --- */
/* Скругления для последней строки таблицы */
.offers-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px !important;
}

.offers-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px !important;
}

/* --- było: style.css 2863-3425 --- */
.offers-table thead th:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.offers-table--list thead th:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  min-width: 92px;
  width: 92px;
}

.offers-table--list tbody td:last-child {
  min-width: 92px;
  width: 92px;
  vertical-align: middle;
}

/* Kolumna statusu — select nie może być obcięty */
.offers-table--list thead th:nth-child(8),
.offers-table--list tbody td.offer-status,
.offers-table--list tbody td:nth-child(8) {
  min-width: 168px;
  width: 168px;
  overflow: visible;
  vertical-align: middle;
}

.offers-table--list .status-select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 22px 6px 8px;
  font-size: var(--fs-xs, 12px);
  font-weight: 600;
  line-height: 1.25;
  min-height: 34px;
  border-radius: var(--radius-sm);
  appearance: auto;
}





.offers-table tbody td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(31, 42, 68, 0.1);
  vertical-align: middle;
  transition: all 0.2s ease;
  position: relative;
}

.offers-table tbody td:first-child {
  border-left: 3px solid transparent;
}

.offers-table tbody tr.offer-row:hover td:first-child {
  border-left: none;
}

.offers-table tbody tr {
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}



.offers-table tbody tr:nth-child(even)[data-status="nowa"] {
  background: rgba(249, 250, 251, 0.8);
}



.offers-table tbody tr:hover {
  background: #f8f9fa !important;
}

/* Колонки таблицы */
.offer-date {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.offer-number {
  font-weight: 700;
  color: var(--accent-text, #34456B);
  font-variant-numeric: var(--font-tabular);
}

/* Numer oferty = prawdziwy link (Ctrl/⌘/środkowy klik otwiera nową kartę).
   color: inherit — inline kolor statusu na <td> i tak wygrywa z klasą,
   więc wygląd wiersza się nie zmienia; underline na hover sygnalizuje link.
   Focus-visible ma globalny --focus-ring, tu tylko dokładamy podkreślenie. */
.offer-row-link {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}

.offer-row-link:hover,
.offer-row-link:focus-visible {
  text-decoration: underline;
}

.offer-buyer {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offer-designer {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.offer-net,
.offer-gross {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: var(--font-tabular);
  color: var(--text);
}

.offer-gross {
  color: var(--text);
}

/* Бейджи статусов */
.status-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.status-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.status-badge:hover::before {
  left: 100%;
}

.status-badge:hover {
  transform: translateY(-2px);
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- hover badge musi byc
     CIEMNIEJSZY od spoczynku (--shadow-sm); --shadow-md jest jasniejszy, wiec efekt by zniknal */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Кнопки действий */
.action-buttons {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  padding: 4px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(249,250,251,0.1) 100%);
}

.action-btn {
  width: 44px !important;
  height: 44px !important;
  /* border/background/color BEZ !important — inaczej bija wlasne :hover/:active
     tego przycisku (fala 2, 08.08): !important wygrywa z kazda specyficznoscia,
     wiec kodowanie barwa akcji nie dzialalo w ogole. */
  border: 2px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-md) !important;
  background: linear-gradient(135deg, #fff 0%, #faf9f5 100%);
  color: var(--text-subtle);
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 2px !important;
}

/* Powiel (duplicate) */
.action-btn.action-duplicate {
  color: var(--text-subtle) !important;
  border-color: var(--border) !important;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s ease;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn:hover {
  border-color: var(--accent-hover);
  color: var(--accent-hover);
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, #fff 0%, #fef3c7 100%);
}

.action-btn.action-duplicate:hover {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-color: var(--text-subtle);
  color: var(--text-subtle);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px) scale(1.08);
}

.action-btn.action-edit:hover {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: var(--info);
  color: var(--info);
  box-shadow: var(--shadow-md);
}

.action-btn.action-delete:hover {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border-color: var(--danger);
  color: var(--danger);
  box-shadow: var(--shadow-md);
}

/* USUNIETE (fala 2): reguly .action-btn.action-pdf/.action-excel/
   .action-excel-subject/.action-excel-order/.action-view (spoczynek, hover,
   active) — zadnego z tych piatku klas nie tworzy zaden renderer w src/**.
   Kolorowa kodyfikacja pozostalych przyciskow i tak nie dziala: blok
   .offers-table tbody tr .action-btn ponizej ustawia color/background/border
   z !important, wiec bije warianty .action-btn.action-X nawet na hover. */

/* Улучшенные стили для touch устройств */
@media (hover: none) and (pointer: coarse) {
  .offers-table tbody tr .action-btn:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  
  .offers-table tbody tr .action-btn:active {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- ramka wcisnietego
       przycisku: celowo ciemniejsza od --border-strong, brak tokenu na ten stan */
    border-color: #9ca3af !important;
    color: var(--text) !important;
    transform: scale(0.95) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  .action-btn.action-edit:active {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- wcisniety edit na
       dotyku: ciemniejszy wariant --info, ktorego paleta nie ma */
    border-color: #0284c7 !important;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- j.w. */
    color: #0284c7 !important;
  }
  
  .action-btn.action-delete:active {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%) !important;
    border-color: var(--danger, #b3261e) !important;
    color: var(--danger, #b3261e) !important;
  }
}

/* Состояние загрузки для кнопок */
.action-btn.btn-loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.action-btn.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Кликабельные строки tabлицы */
.offers-table tbody tr.offer-row,
.offers-table tbody tr.order-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.offers-table tbody tr:not(.offer-row):not(.order-row) {
  cursor: default;
}

/* Заголовки с сортировкой */
.offers-table thead th {
  cursor: default;
  user-select: none;
  position: relative;
  transition: background-color 0.2s ease;
}

.offers-table thead th:hover {
  background: var(--accent-text-hover);
}

.offers-table thead th.sortable {
  padding-right: 18px !important;
}

.offers-table thead th.sortable::after {
  content: '↕';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-xs);
  opacity: 0.3;
  color: var(--text-inverse);
  transition: opacity 0.2s ease;
}

.offers-table thead th.sortable:hover::after {
  opacity: 0.7;
}

/* Aktywna (sortowana) kolumna — subtelne, czyste zaznaczenie */
.offers-table thead th.sort-asc,
.offers-table thead th.sort-desc {
  font-weight: 800;
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- to nie cien, tylko
     podkreslenie wewnetrzne aktywnej kolumny sortowania; tokeny --shadow-* sa kierunkowe */
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.7);
}

.offers-table thead th.sort-asc::after {
  content: '↑';
  opacity: 1;
  color: var(--text-inverse);
  font-size: var(--fs-base, 14px);
}

.offers-table thead th.sort-desc::after {
  content: '↓';
  opacity: 1;
  color: var(--text-inverse);
  font-size: var(--fs-base, 14px);
}



.offers-table tbody tr:hover {
  background: #f8f9fa !important;
}

.offers-table tbody tr:active {
  background: #f1f3f4 !important;
}

/* Исключаем кнопки действий из кликабельности строки */
.offers-table tbody tr .action-buttons {
  cursor: default;
  display: flex !important;
  flex-wrap: wrap;
  gap: 3px !important; /* Уменьшаем gap */
  padding: 6px 8px !important; /* Уменьшаем правый отступ */
  min-width: 100px !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
  justify-content: flex-start !important; /* Выравниваем по левому краю с отступом */
  align-items: center !important;
  position: relative !important;
  z-index: 100 !important;
  /* Улучшенная поддержка touch */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Предотвращение переполнения */
  overflow: hidden;
}

.offers-table tbody tr .action-btn {
  cursor: pointer !important;
  position: relative;
  z-index: 10;
  width: 32px !important;
  height: 32px !important;
  /* jw. — te trzy bez !important, zeby :hover/:active przyciskow dzialaly */
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm) !important;
  background: linear-gradient(135deg, #fff 0%, #faf9f5 100%);
  color: var(--text-subtle);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  margin-right: 2px !important; /* Уменьшаем отступ между кнопками */
  min-width: 32px !important;
  max-width: 32px !important;
  flex-shrink: 0 !important;
  /* Улучшенная поддержка touch */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Улучшенная доступность */
  user-select: none;
  -webkit-user-select: none;
  /* Предотвращение переполнения */
  box-sizing: border-box;
}

/* Сообщения загрузки и ошибок */
.loading-message,
.empty-message,
.error-message {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
  background: linear-gradient(135deg, #faf9f5 0%, #fef3c7 100%);
  border-radius: var(--radius-md);
  margin: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(31, 42, 68, 0.1);
}

.empty-message {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: rgba(14, 165, 233, 0.1);
}

.error-message {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border-color: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(31, 42, 68, 0.15);
  border-top: 4px solid var(--accent, #1F2A44);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
  box-shadow: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-message span,
.empty-message span,
.error-message span {
  display: block;
  font-size: var(--fs-md);
  font-weight: 500;
}

.empty-icon,
.error-icon {
  font-size: var(--fs-4xl);
  margin-bottom: 16px;
  opacity: 0.7;
  display: block;
}

.error-icon {
  animation: pulse 2s infinite;
}

.empty-icon {
  animation: bounce 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* --- było: style.css 3427-3478 --- */
/* Пагинация */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #fff 0%, #faf9f5 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(31, 42, 68, 0.1);
  position: relative;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.pagination::before {
  display: none;
  content: none;
}

.pagination-info {
  font-size: var(--fs-base, 14px);
  color: var(--text-muted);
  font-weight: 500;
}

.pagination-controls {
  display: flex;
  gap: 12px;
}

.pagination-controls .btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: var(--fs-base, 14px);
  font-weight: 600;
}

.pagination-controls .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- było: style.css 3658-3743 --- */
/* Чекбокс "Tylko moje" */
.only-mine-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px !important;
  border: 1px solid var(--border-warm, #e8dccd) !important;
  border-radius: var(--radius-sm) !important;
  background: #fff !important;
  transition: all 0.2s ease;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  font-size: var(--fs-xs, 12px) !important;
  font-weight: 500;
  color: var(--text);
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.2;
  user-select: none;
  width: 100%;
  justify-content: flex-start;
  min-width: 160px;
}

.only-mine-checkbox:hover {
  border-color: var(--accent) !important;
}

.only-mine-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

.only-mine-checkbox span {
  font-weight: 500;
  line-height: 1.2;
  font-size: var(--fs-xs, 12px) !important;
  white-space: nowrap;
}

/* Селект статуса */
.status-select {
  background: inherit;
  color: inherit;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6px 22px 6px 8px;
  font-size: var(--fs-xs, 12px);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
}

.status-select:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.status-select:focus {
  border-color: rgba(255, 255, 255, 0.5);
}

.status-select option {
  background: white;
  color: var(--text, #1e293b);
  font-weight: 500;
  padding: 8px;
}

.status-select:focus {
  box-shadow: var(--focus-ring);
}

.status-select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* --- było: style.css 4460-4490 --- */
/* ===== ХЛЕБНЫЕ КРОШКИ ===== */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  margin: 0 20px 16px;
  font-size: var(--fs-base, 14px);
}

.breadcrumb-item {
  color: var(--text-muted, #475569);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-item:hover {
  color: var(--accent, #1F2A44);
}

.breadcrumb-separator {
  color: var(--border-strong);
}

.breadcrumb-current {
  color: var(--text);
  font-weight: 600;
}

/* --- było: style.css 6230-6448 --- */
/* ===== СПЕЦИАЛЬНЫЕ СТИЛИ ДЛЯ СТРАНИЦЫ ЛИСТИНГА ОФЕРТ ===== */

/* Унифицированное выравнивание для страницы листинга */
.offers-container .offers-toolbar {
  margin: 0;
  padding: 16px 20px;
  width: 100%;
  box-sizing: border-box;
}

.offers-container .breadcrumbs {
  margin: 0 0 16px 0;
  padding: 2px;
  width: 100%;
  box-sizing: border-box;
}

.offers-container .filters-card {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.offers-container .table-container {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.offers-container .pagination {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .offers-container {
    padding: 8px 0;
  }

  .offers-toolbar {
    margin: 8px 0;
  }

  .tools-left,
  .tools-right {
    flex-wrap: wrap;
    gap: 8px;
  }

  .btn {
    flex: 1;
    min-width: 0;
    text-align: center;
  }
  
  .topbar {
    padding: 6px 8px;
  }
  
  .breadcrumbs {
    padding: 6px 8px;
    font-size: var(--fs-xs, 12px);
  }
  
  .offers-toolbar {
    padding: 8px;
  }
  
  .ofr-form {
    padding: 12px;
  }
  
  .filters-card {
    padding: 8px;
    margin: 0;
  }
  
  /* Еще более компактная таблица */
  .offers-table {
    min-width: 500px;
    font-size: var(--fs-xs, 12px);
  }
  
  .offers-table th,
  .offers-table td {
    padding: 6px 2px;
  }
  
  /* Lista: wszystkie kolumny widoczne — przewijanie poziome */
  
  /* Минимальные кнопки действий */
  /* USUNIETE (fala 1): martwe — te same wlasciwosci redeklaruja @media 768px i 400px nizej. */
  
  /* USUNIETE (fala 1): blok byl martwy — nadpisywal go pozniejszy @media 768px
     oraz @media 400px. Zostawial w bundlu 20px cel dotykowy i 8px font. */
  
  /* Компактные формы */
  .form-input {
    padding: 8px 10px;
    font-size: var(--fs-sm);
  }
  
  .search-input {
    padding: 10px 12px;
    font-size: var(--fs-sm);
  }
}


/* --- Slice 4: lista — ze style.css --- */

/* style.css 805-815 */
.offers-table tbody tr.order-row[data-status="do_zamowienia"] td{background:rgba(254, 243, 199, 0.6) !important; color:var(--status-text-warn) !important}
.offers-table tbody tr.order-row[data-status="zamowione"] td{background:var(--surface) !important; color:var(--text-muted) !important}
/* diacritic fallback */
.offers-table tbody tr.order-row[data-status="zamówione"] td{background:var(--surface) !important; color:var(--text-muted) !important}
.offers-table tbody tr.order-row[data-status="zafakturowane"] td{background:rgba(219, 234, 254, 0.6) !important; color:var(--status-text-info) !important}/* Разделители и hover для читаемости */
.offers-table tbody tr.order-row td{border-bottom:1px solid var(--surface-muted, #faf9f5)}
.offers-table tbody tr.order-row:last-child td{border-bottom:none}
.offers-table tbody tr.order-row:hover td{background:#fbfbfb}

/* style.css 1937-1950 */
.offer-row {
  animation: rowFadeIn 0.3s ease;
}

@keyframes rowFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* style.css 2167-2200 */
.quick-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.offer-row:hover .quick-actions {
  opacity: 1;
}

.quick-action-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs, 12px);
  transition: all 0.2s ease;
}

.quick-action-btn:hover {
  border-color: var(--accent-hover);
  color: var(--accent-hover);
  transform: scale(1.1);
}




/* style.css 3868-3880 */
.offers-table tbody tr {
  cursor: pointer;
}

.offers-table tbody tr:active {
  cursor: pointer;
}

.offers-table tbody tr.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
  box-shadow: var(--shadow-lg);
}

/* style.css 3884-3917 */
.sep-wrap .action-buttons {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 60px !important;
  gap: 2px !important;
  padding: 4px !important; /* Добавляем отступы */
}

/* USUNIETE (fala 1): .sep-wrap nie wystepuje w zadnym HTML/TS — martwy CSS z celem 24px. */


/* style.css 3919-3938 */
/* ===== СТАТУСНЫЕ ЦВЕТА ДЛЯ СТРОК ОФЕРТ ===== */.status-zamowiona {
    background-color: var(--st-do-zamowienia) !important;
    color: var(--status-text-warn, #92400e) !important;
}/* === Responsywność listy ofert (final) === */

.offers-container .table-container,
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

@media (max-width: 1200px) {
  .offers-table tbody tr .action-buttons {
    min-width: 70px !important;
    gap: 2px !important;
    padding: 6px 8px !important;
  }

  .offers-table tbody tr .action-btn {
    width: 32px !important;
    height: 32px !important;
    margin-right: 2px !important;
    min-width: 32px !important;
  }

  /* USUNIETE (fala 1) razem z bazowa regula .sep-wrap — brak markupu. */
}

@media (max-width: 1024px) {
  .offers-container {
    padding: 15px 0;
  }

  .filters-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .offers-toolbar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    margin: 0;
  }

  .tools-left,
  .tools-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .btn {
    flex: 1;
    min-width: 120px;
  }

  .table-container {
    overflow-x: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
  }

  .offers-table {
    min-width: 800px;
    font-size: var(--fs-sm);
  }

  .offers-table th,
  .offers-table td {
    padding: 12px 8px;
  }

  /* Lista: bez ukrywania kolumn — tylko scroll w .table-container */

  .offers-table tbody tr .action-buttons {
    min-width: 90px !important;
    gap: 3px !important;
    padding: 5px !important;
    justify-content: center !important;
  }

  .offers-table tbody tr .action-btn {
    width: 32px !important;
    height: 32px !important;
    margin-right: 3px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }
}

@media (max-width: 768px) {
  .offers-container {
    padding: 10px max(12px, env(safe-area-inset-left, 0px)) 24px max(12px, env(safe-area-inset-right, 0px));
  }

  .topbar {
    padding: 8px 12px;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .brand {
    justify-content: center;
  }

  .user {
    justify-content: center;
    gap: 8px;
  }

  .breadcrumbs {
    padding: 8px 12px;
    font-size: var(--fs-xs, 12px);
  }

  .offers-toolbar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    padding: 12px;
    margin: 0;
  }

  .tools-left {
    justify-content: center;
  }

  .tools-left,
  .tools-right {
    flex-direction: column;
    gap: 8px;
  }

  .btn {
    width: 100%;
    min-width: auto;
    justify-content: center;
  }

  .filters-card {
    padding: 12px;
    margin: 0;
  }

  .offers-container .offers-toolbar {
    padding: 12px 16px;
  }

  .offers-container .filters-card {
    padding: 20px;
  }

  .filters-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .filter-select,
  .filter-input,
  .only-mine-checkbox {
    height: 52px;
    min-height: 52px;
  }

  .pagination {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  .offer-buyer,
  .offer-designer {
    max-width: 150px;
  }

  .table-container {
    margin: 8px 0;
  }

  .offers-table {
    min-width: 600px;
    font-size: var(--fs-xs, 12px);
  }

  .offers-table th,
  .offers-table td {
    padding: 8px 4px;
  }

  .offers-table--list thead th:nth-child(8),
  .offers-table--list tbody td:nth-child(8) {
    min-width: 150px;
    width: 150px;
  }

  .offers-table--list .status-select {
    font-size: var(--fs-md);
    padding: 8px 22px 8px 8px;
    min-height: var(--touch-min);
  }

  .offers-table tbody tr .action-buttons {
    min-width: 60px !important;
    gap: 1px !important;
    padding: 4px 6px !important;
    justify-content: center !important;
  }

  .offers-table tbody tr .action-btn {
    width: var(--touch-min) !important;
    height: var(--touch-min) !important;
    min-width: var(--touch-min) !important;
    max-width: var(--touch-min) !important;
    margin-right: 0 !important;
    font-size: var(--fs-xs, 12px) !important;
  }

  .search-input-wrapper {
    margin-bottom: 12px;
  }

  .search-input {
    padding: 8px 12px;
    font-size: var(--fs-sm);
  }

  .sep-wrap {
    padding: 16px 12px 12px 12px;
  }

  .sep-wrap .action-buttons {
    top: 6px;
    right: 6px;
    min-width: 50px !important;
  }

  /* USUNIETE (fala 1): .sep-wrap nie wystepuje w zadnym HTML/TS (martwy CSS, cel 24px). */
}

@media (max-width: 400px) {

  .offers-table {
    min-width: 400px;
    font-size: var(--fs-xs, 12px);
  }

  .offers-table th,
  .offers-table td {
    padding: 4px 1px;
  }

  .offers-table tbody tr .action-buttons {
    min-width: 40px !important;
    gap: 0 !important;
    padding: 1px !important;
  }

  .offers-table tbody tr .action-btn {
    width: var(--touch-min) !important;
    height: var(--touch-min) !important;
    min-width: var(--touch-min) !important;
    max-width: var(--touch-min) !important;
    margin-right: 0 !important;
    font-size: var(--fs-xs, 12px) !important;
  }
}


@media (min-width: 1400px) {
  .table-container {
    margin: 0 0 20px 0;
    width: 100%;
    max-width: none;
  }
  
  .offers-table {
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- 15px lezy miedzy
     --fs-base 14 a --fs-md 16; oba zmienialyby gestosc calej tabeli, wiec zostaje 1:1 */
    font-size: 15px;
  }
  
  .offers-table thead th {
    padding: 10px 12px;
    font-size: var(--fs-base, 14px);
  }
  
  .offers-table tbody td {
    padding: 12px 14px;
  }
}

/* ===== Soczewka B: style przeniesione z inline (offers-list-render.ts) ===== */

/* Badge "-X%" rabatu dodatkowego (lista ofert; tę samą klasę emituje orders.page.ts) */
.extra-disc-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs, 12px);
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent-text, #34456B);
  vertical-align: middle;
}

/* Bejdż-przycisk "e-mail zamówienia nie wyszedł" (hook JS: offers-list.page.ts) */
.order-email-retry {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 7px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs, 12px);
  font-weight: 700;
  background: var(--st-do-zamowienia, #fef3c7);
  color: var(--status-text-warn, #92400e);
  cursor: pointer;
  vertical-align: middle;
}

/* Badge statusu w wierszu listy: kolory dziedziczy z td (tr[data-status] wyżej) */
.offer-row .status-badge {
  background: inherit;
  color: inherit;
}

/* "W zamówieniu" (lock) — indygo, odróżnia się od tint statusów */
.offer-row .status-badge--order {
  background: var(--st-order, #e0e7ff);
  color: var(--status-text-order, #3730a3);
}

.offer-row .status-badge--deleted {
  opacity: 0.6;
}

/* Select statusu: tło/kolor z td (base .status-select ma inherit), ramka w kolorze
   tekstu statusu — było inline `border: 1px solid ${color}` z JS. SCOPE: tylko wiersze
   OFERT (tr.offer-row) — orders.html używa tej samej tabeli .offers-table--list,
   a jego selecty mają zostać bez ramki (weryfikacja adwersaryjna złapała wyciek).
   Wariant :hover celowo — wygrywa remis specyficzności z .status-select:hover. */
tr.offer-row .status-select,
tr.offer-row .status-select:hover {
  border: 1px solid currentColor;
}

/* Notatki: statyczne ucięcie wielokropkiem (było inline na każdym td.offer-notes) */
.offers-table--list td.offer-notes {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Checkbox "zaznacz do połączenia ofert" (było inline) */
.offers-table--list .merge-select {
  width: 18px;
  height: 18px;
  cursor: pointer;
  align-self: center;
}

/* <<< css/components/offers-list.css */
/* >>> css/components/list-filters.css */
/* Panel filtrów — offers.html, orders.html (Pro) */

.offers-container .filters-card.filters-panel {
  padding: 16px 18px !important;
  margin: 0 !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: var(--radius-lg, 14px) !important;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06)) !important;
}

.offers-container .filters-panel__grid {
  display: grid;
  grid-template-columns:
    minmax(200px, 2.2fr)
    minmax(130px, 1fr)
    minmax(130px, 1fr)
    minmax(124px, 0.85fr)
    minmax(124px, 0.85fr);
  gap: 10px 12px;
  align-items: end;
}

.offers-container .filters-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.offers-container .filters-panel__footer-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}

.offers-container .filters-panel .filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  min-height: 0;
}

.offers-container .filters-panel .filter-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #475569);
  line-height: 1.2;
  margin: 0;
}

.offers-container .filters-panel .search-input-wrapper {
  position: relative;
  width: 100%;
  min-height: 36px;
}

.offers-container .filters-panel .search-icon {
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--text-muted, #94a3b8);
}

.offers-container .filters-panel .search-clear {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  /* Wizualnie kompaktowy, hit-area 40×40 (mieści się w polu 44px) */
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text-muted, #94a3b8);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offers-container .filters-panel .search-clear:hover {
  background: var(--accent-soft, rgba(31, 42, 68, 0.1));
  color: var(--accent-text);
}

.offers-container .filters-panel .search-input,
.offers-container .filters-panel .filter-select,
.offers-container .filters-panel .filter-input,
.offers-container .filters-panel input.filter-input[type="date"] {
  width: 100% !important;
  height: auto !important;
  min-height: var(--touch-min, 44px) !important;
  padding: 0 11px !important;
  font-size: var(--fs-sm);
  line-height: 1.25 !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface, #fff) !important;
  color: var(--text, #1e293b) !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.offers-container .filters-panel .search-input {
  padding-left: 34px !important;
  padding-right: 34px !important;
  text-indent: 0 !important;
}

.offers-container .filters-panel .filter-select {
  padding-right: 28px !important;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

.offers-container .filters-panel .search-input:focus,
.offers-container .filters-panel .filter-select:focus,
.offers-container .filters-panel .filter-input:focus {
  outline: none !important;
  border-color: var(--accent, #1F2A44) !important;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(31, 42, 68, 0.12)) !important;
}

.offers-container .filters-panel .search-input:hover,
.offers-container .filters-panel .filter-select:hover,
.offers-container .filters-panel .filter-input:hover {
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
}

.offers-container .filters-panel .only-mine-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text, #1e293b);
  cursor: pointer;
  user-select: none;
}

.offers-container .filters-panel .only-mine-checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent, #1F2A44);
  cursor: pointer;
}

.offers-container .filters-panel .filter-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface, #fff);
  color: var(--text-muted, #475569);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.offers-container .filters-panel .filter-clear-btn:hover {
  border-color: var(--accent, #1F2A44);
  color: var(--accent-text);
  background: var(--accent-soft, rgba(31, 42, 68, 0.08));
}

.offers-container .filters-panel .filter-clear-btn svg {
  flex-shrink: 0;
  opacity: 0.75;
}

@media (max-width: 1280px) {
  .offers-container .filters-panel__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .offers-container .filters-panel__grid .filter-group:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .offers-container .filters-panel__grid {
    grid-template-columns: 1fr 1fr;
  }

  .offers-container .filters-panel__grid .filter-group:first-child {
    grid-column: 1 / -1;
  }

  .offers-container .filters-panel__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .offers-container .filters-panel .filter-clear-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .offers-container .filters-panel__grid {
    grid-template-columns: 1fr;
  }
}

/* <<< css/components/list-filters.css */
/* >>> css/pages/legacy-shell.css */
/* Legacy public pages — teal shell, spójny z offers/orders (bez security) */

body.panel-body {
  background: var(--bg-app) !important;
}

/* Panel — nadpisanie pomarańczowego border-top z style.css (ładuje się po importach ui-kit) */
body.panel-body .menu-card {
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

body.panel-body .panel-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

/* Tabele globalne (.table) — projektanci, starsze widoki */
.table th,
body.panel-body .table th {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
}

.header {
  border-bottom-color: var(--accent) !important;
}

/* Pracownicy — alias layoutu list ofert */
body.panel-body .main-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5) var(--space-6);
  box-sizing: border-box;
}

body.panel-body .tools-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

body.panel-body .tools-bar .tools-left,
body.panel-body .tools-bar .tools-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Filtry na stronach bez pełnego filters-panel w HTML */
body.panel-body .offers-container .filters-card:not(.filters-panel) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

/* Import */
body.panel-body .import-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5) var(--space-6);
}

body.panel-body .import-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

body.panel-body .section-icon,
body.panel-body .card-icon {
  background: var(--accent) !important;
}

body.panel-body .import-card:hover {
  border-color: var(--accent) !important;
}

body.panel-body .btn-import {
  background: var(--accent) !important;
}

body.panel-body .btn-import:hover {
  background: var(--accent-hover) !important;
}

body.panel-body .progress-fill {
  background: var(--accent) !important;
}

/* Produkty — modal inline */
body.panel-body.products-page .form-group input:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--focus-ring) !important;
}

body.panel-body.products-page .editable-field:hover {
  background-color: var(--accent-soft) !important;
}

body.panel-body.products-page .editable-field:hover span {
  color: var(--accent) !important;
}

/* Listy — pomarańczowe akcenty w offers-list.css */
.offers-container .sort-btn.active {
  border-color: var(--accent) !important;
}

.offers-container .filter-chip.active,
.offers-container .quick-filter.active {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.offers-container .pagination-btn.active,
.offers-container .page-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.offers-container .only-mine-checkbox input {
  accent-color: var(--accent);
}

.offers-container a.row-link,
.offers-container .offer-number-link {
  color: var(--accent);
}

.offers-container a.row-link:hover,
.offers-container .offer-number-link:hover {
  color: var(--accent-hover);
}

.offers-container .bulk-bar,
.offers-container .selection-count {
  border-color: var(--accent);
}

.offers-container .loading-spinner {
  border-top-color: var(--accent);
}

/* Produkty — search + akcje w jednej karcie */
.offers-container .products-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
}

.offers-container .products-filters .search-input-wrapper {
  flex: 1 1 280px;
  min-width: 200px;
}

.offers-container .products-filters .filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* <<< css/pages/legacy-shell.css */

:root {
  /* Wartosci bez odpowiednika 1:1 w skali platformy, powtarzajace sie w tym
     pliku wielokrotnie. Zmienne kasuja duplikaty — nie sa kandydatami do
     tokens.css (stad prefiks legacy/cta). */
  --radius-legacy-6: 6px;
  --radius-legacy-10: 10px;
  --shadow-cta: 0 4px 12px rgba(31, 42, 68, 0.25);
  --shadow-cta-hover: 0 6px 20px rgba(31, 42, 68, 0.3);
  --shadow-cta-danger: 0 4px 12px rgba(239, 68, 68, 0.25);
  --shadow-cta-danger-hover: 0 6px 20px rgba(239, 68, 68, 0.3);
}

*{ box-sizing:border-box }
html,body{ 
  height:100%; 
  width: 100%;
  max-width: none;
  overflow-x: hidden;
}
body{ 
  margin:0; 
  font-family:var(--font-sans, system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial); 
  color:var(--text, #1d1d1f); 
  background:var(--bg-app, #F7F5F1);
  width: 100%;
  max-width: none;
}

/* Кнопки */
.btn-primary{ background:var(--accent-text); color:var(--text-inverse); border:0; border-radius:var(--radius-pill); padding:8px 14px; cursor:pointer }
.btn-primary:hover{ background:var(--accent-text-hover) }
.btn-secondary{ background:#fff; color:var(--text, #1e293b); border:1px solid var(--border-warm, #e8dccd); border-radius:var(--radius-pill); padding:8px 12px; cursor:pointer }
.btn-secondary:hover{ border-color:var(--accent, #1F2A44) }
.btn-danger{ background:var(--danger-hover, #9a2a2a); color:var(--text-inverse); border:0; border-radius:var(--radius-pill); padding:8px 12px; cursor:pointer }
.btn-danger:hover{ background:var(--danger-hover, #9a2a2a) }

.hidden{ display:none!important }
.wrap{ max-width:1200px; margin:0 auto; padding:12px 16px }

.header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:2px solid var(--accent, #1F2A44);background:#fff}
.header .brand{display:flex;gap:10px;align-items:center}
.header .brand img{height:22px}
.header .user-actions{display:flex;gap:8px;align-items:center}
.header #userEmail{opacity:.8}



/* Оферта — шапка/формы */
.oferta-input{ width:100%; padding:8px 10px; border:1px solid var(--border-warm, #e8dccd); border-radius:var(--radius-legacy-10); background:var(--surface-muted, #faf9f5) }

.table-block{ background:#fff; border:1px solid var(--border-warm, #e8dccd); border-radius:var(--radius-md); overflow:auto }
.table-block table{ width:100%; border-collapse:collapse }
.table-block th{ position:sticky; top:0; background:var(--accent, #1F2A44); color:var(--text-inverse); text-align:left; padding:8px 10px }
.table-block td{ padding:8px 10px; border-top:1px solid var(--surface-muted, #faf9f5) }


.icon.pdf   { background: url('icons/pdf.svg') center/contain no-repeat; }

/* --- login card --- */
.login-card{max-width:520px;margin:64px auto;padding:22px;border:1px solid var(--border-warm, #e8dccd);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-md)}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.login-logo img{height:auto;max-height:80px;width:auto;object-fit:contain}
.login-title{margin:6px 0 10px;font-size:var(--fs-lg)}
.login-input{width:100%;padding:12px 14px;border:1px solid #e6d6c5;border-radius:var(--radius-legacy-10);background:var(--surface-muted, #faf9f5);margin:6px 0}
.login-actions{display:flex;gap:8px;margin-top:8px}

/* --- topbar / toolbar --- */
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#fff;border-bottom:2px solid var(--accent, #1F2A44)}

/* Currency selector in form */
.currency-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-legacy-10);
  padding: 8px 10px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text, #1e293b);
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease;
  position: relative;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 35px;
}

.currency-select:hover {
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--shadow-sm);
}

.currency-select:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

/* VAT selector in form */
.vat-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-legacy-10);
  padding: 8px 10px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text, #1e293b);
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease;
  position: relative;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 35px;
}

.vat-select:hover {
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--shadow-sm);
}

.vat-select:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

/* --- Deliveries Calendar --- */
.deliveries-page {
  padding: 20px;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* (dawne .deliveries-tab* usunięte — style żyją w apps/deliveries/globals.css,
   duplikat tutaj wymuszał wojny specyficzności w aplikacji) */

#viewCalendar {
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 24px;
  align-items: start;
}

.calendar-section {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-md);
}

@media (max-width: 1024px) {
  #viewCalendar {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 4px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.calendar-nav button {
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-muted, #475569);
  font-size: var(--fs-md);
  font-weight: bold;
}


.calendar-nav button:hover {
  border-color: var(--accent, #1F2A44);
  color: var(--accent, #1F2A44);
  transform: scale(1.05);
}

.calendar-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text, #1e293b);
  text-transform: capitalize;
}

.btn-add-delivery {
  background: linear-gradient(135deg, var(--accent, #1F2A44), #34456B);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-cta);
  font-size: var(--fs-base);
}


.btn-add-delivery span:first-child {
  font-size: var(--fs-lg);
  font-weight: bold;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-md);
}

#calendarGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.calendar-weekday {
  text-align: center;
  font-weight: 600;
  color: var(--text-muted, #475569);
  font-size: var(--fs-base);
  padding: 8px;
  background: #f9fafb;
  border-radius: var(--radius-legacy-6);
  margin-bottom: 4px;
}

.calendar-cell {
  aspect-ratio: 1;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-legacy-6);
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100px;
  min-width: 100px;
}


.calendar-cell:hover {
  border-color: var(--accent, #1F2A44);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.calendar-cell.empty {
  background: #f9fafb;
  border-color: var(--border);
  cursor: default;
  opacity: 0.6;
}

.calendar-cell.empty:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}

.calendar-cell.active {
  background: linear-gradient(135deg, var(--accent, #1F2A44), #34456B);
  border-color: var(--accent, #1F2A44);
  color: var(--text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}

.calendar-cell.active .calendar-daynum {
  color: var(--text-inverse);
}

.calendar-cell.active .calendar-preview {
  color: rgba(255, 255, 255, 0.9);
}

.calendar-cell.active .delivery-icon {
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- cien na KOLOROWEJ pastylce lezacej na teal gradiencie aktywnej komorki; tokeny --shadow-* maja alfe .06-.12 skalibrowana pod biale powierzchnie, wiec podmiana skasowalaby obwodke ikon dostaw */
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.calendar-cell.active .delivery-more {
  background: rgba(255, 255, 255, 0.3);
  color: var(--text-inverse);
}

.calendar-cell.active .badge {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-inverse);
}

.calendar-daynum {
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text, #1e293b);
  margin-bottom: 2px;
  margin-top: 2px;
  text-align: center;
}

.delivery-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 4px;
  justify-content: center;
}

.delivery-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- glif w kolku 16x16 z tej samej reguly; skala --icon-* zaczyna sie od 18px, a podloga tekstu to --fs-xs 12px — kazdy token przepelnilby pastylke. Wlasciwa naprawa to skasowanie legacy geometrii na rzecz clamp() z apps/deliveries/globals.css, nie podmiana wartosci */
  font-size: 8px;
  color: var(--text-inverse);
  cursor: pointer;
  transition: all 0.2s ease;
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- cien na kolorowej pastylce (tlo z JS: getCalendarDeliveryPillBackgroundColor); alfa .2 robi obwodke, tokeny --shadow-* maja .06-.12 pod biale tla */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.delivery-icon:hover {
  transform: scale(1.2);
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- hover pastylki dostawy: cien na kolorowym tle, alfa .3 poza zakresem tokenow (.06-.12) */
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.delivery-more {
  background: var(--text-muted, #475569);
  color: var(--text-inverse);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- glif '+N' w kolku 16x16; --fs-xs 12px przepelnilby pastylke, --icon-sm to 18px */
  font-size: 8px;
  font-weight: bold;
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- cien na kolorowej pastylce '+N'; alfa .2 poza zakresem tokenow */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.calendar-preview {
  font-size: var(--fs-xs);
  color: var(--text-muted, #475569);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  margin-top: 4px;
}

.calendar-preview div {
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-preview .more {
  color: var(--text-muted, #475569);
  font-style: italic;
}

.delivery-form {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
  height: fit-content;
  position: sticky;
  top: 20px;
}

.delivery-form h3 {
  margin: 0 0 20px 0;
  color: var(--text, #1e293b);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.delivery-list {
  margin-top: 16px;
}

.delivery-item {
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}


.delivery-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.delivery-status-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--text-inverse);
  flex-shrink: 0;
}

.delivery-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.delivery-details.hidden {
  display: none;
}


.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text, #1e293b);
  font-size: var(--fs-base);
}

.form-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-sm);
  background: #faf9f5;
  font-size: var(--fs-base);
  transition: all 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  background: #fff;
  box-shadow: var(--focus-ring);
}

.form-input::placeholder {
  color: var(--text-muted, #475569);
}

.form-select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-sm);
  background: #faf9f5;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-select:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  background: #fff;
  box-shadow: var(--focus-ring);
}

.form-textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-sm);
  background: #faf9f5;
  font-size: var(--fs-base);
  min-height: 60px;
  resize: vertical;
  transition: all 0.2s ease;
  font-family: inherit;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  background: #fff;
  box-shadow: var(--focus-ring);
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.btn-save {
  background: linear-gradient(135deg, var(--accent, #1F2A44), #34456B);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.btn-save:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}

.btn-cancel {
  background: #fff;
  color: var(--text-muted, #475569);
  border: 2px solid #f0f0f0;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
}

.btn-cancel:hover {
  border-color: var(--accent, #1F2A44);
  color: var(--accent, #1F2A44);
  transform: translateY(-2px);
}

.delivery-list {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-md);
}

.delivery-item {
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.delivery-item:hover {
  border-color: var(--accent, #1F2A44);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.delivery-item h4 {
  margin: 0 0 8px 0;
  color: var(--text, #1e293b);
  font-size: var(--fs-md);
  font-weight: 600;
}

.delivery-meta {
  color: var(--text-muted, #475569);
  font-size: var(--fs-base);
  line-height: 1.4;
  margin-bottom: 12px;
}

.delivery-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.delivery-actions .btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.delivery-actions .btn:hover {
  transform: translateY(-1px);
}

.btn-add-delivery {
  background: linear-gradient(135deg, var(--accent, #1F2A44), #34456B);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.btn-add-delivery:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}

@media (max-width: 768px) {
  .deliveries-page {
    padding: 12px;
  }
  
  .calendar-grid {
    padding: 12px;
    gap: 4px;
  }
  
  .calendar-cell {
    padding: 6px;
  }
  
  .calendar-daynum {
    font-size: var(--fs-base);
  }
  
  .delivery-form {
    padding: 16px;
  }
  
  .form-actions {
    flex-direction: column;
  }
}
.topbar .brand{display:flex;gap:10px;align-items:center}
.toolbar{display:flex;gap:8px;margin:12px 0}

/* --- buttons --- */
.btn-primary{background:var(--accent-text);color:var(--text-inverse);border:0;border-radius:var(--radius-pill);padding:8px 12px;cursor:pointer}
.btn-primary:hover{background:var(--accent-text-hover)}
.btn-secondary{background:#fff;border:1px solid #e4d5c4;border-radius:var(--radius-legacy-10);padding:10px 14px;cursor:pointer}
.btn-danger{background:#9a2c2c;color:var(--text-inverse);border:0;border-radius:var(--radius-legacy-10);padding:10px 14px}

/* --- tables --- */
.table-block{overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0 10px}
table thead th{background:var(--accent-text);color:var(--text-inverse);padding:10px;border-radius:0}


/* Стили для строк заказов - более мягкие и прозрачные цвета */
table tbody tr.order-row[data-status="do_zamowienia"] td{background:rgba(254, 243, 199, 0.6) !important; color:var(--status-text-warn) !important}
table tbody tr.order-row[data-status="zamowione"] td{background:#ffffff !important; color:var(--text-muted) !important}
/* diacritic fallback */
table tbody tr.order-row[data-status="zamówione"] td{background:#ffffff !important; color:var(--text-muted) !important}
table tbody tr.order-row[data-status="zafakturowane"] td{background:rgba(219, 234, 254, 0.6) !important; color:var(--status-text-info) !important}
table tbody tr.order-row[data-status="rozliczone"] td{background:rgba(220, 252, 231, 0.6) !important; color:var(--status-text-ok) !important}

/* Дополнительные селекторы для надежности */

/* Кликабельные строки заказов */
.order-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.order-row:hover {
  opacity: 0.9;
}

/* Стили для кнопки удаления заказа */
.btn-delete-order {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-md);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

.btn-delete-order:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

.actions-cell {
  text-align: center;
  width: 60px;
}


/* Улучшенные стили для таблицы - УДАЛЕНО ДУБЛИРОВАНИЕ */

/* Улучшенные стили для селектов статусов */
.status-select {
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.status-select:hover {
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--shadow-md);
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  min-width: 80px;
}

/* --- row actions (ikonki) --- */
.row-actions{display:flex;gap:8px;justify-content:flex-end}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid #e3d3c2;border-radius:var(--radius-sm);background:#fff;cursor:pointer}
.icon-btn:hover{border-color:var(--accent, #1F2A44);box-shadow:var(--shadow-md)}
.icon-btn img{width:18px;height:18px;display:block}



.only-mine{display:inline-flex;gap:6px;align-items:center;user-select:none}

/* Сообщения об ошибках и пустых результатах */
.error-message, .empty-message {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted, #475569);
}

.error-message .error-icon, .empty-message .empty-icon {
  font-size: var(--fs-4xl);
  margin-bottom: 16px;
  display: block;
}

.error-message {
  color: var(--danger-hover, #9a2a2a);
}

.empty-message {
  color: var(--text-muted, #475569);
}

.error-message small, .empty-message small {
  display: block;
  margin-top: 8px;
  opacity: 0.7;
  font-size: var(--fs-xs);
}

/* LOGIN — центрируем и увеличиваем логотип */

.login-logo.only-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.login-logo.only-logo img{
  width: 220px;          /* увеличенный размер логотипа */
  max-width: 80%;
  height: auto;
  display: block;
}


/* мелкие улучшения полей */
.login-input{
  width: 100%;
  height: 44px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--border-input, #d6d3cd);
  border-radius: var(--radius-sm);
  background: var(--surface-input, #fff);
  outline: none;
}
.login-input:focus{ border-color: var(--accent, #1F2A44); box-shadow: var(--focus-ring); }

.login-actions{
  display:flex; gap:10px; margin-top: 8px; justify-content: center;
}


/* ——— Login: большой логотип по центру, над полями ——— */
.login-card{
  max-width: 520px;
  margin: 72px auto;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
}

#authBox .login-logo{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;   /* центрируем по горизонтали */
  margin: 6px 0 22px;        /* отступ над полями */
}

/* Сделать логотип на логин-форме некликабельным даже если это ссылка */
#authBox .login-logo a{
  pointer-events: none;
  cursor: default;
}

#authBox .login-logo img{
  width: 260px;              /* крупный логотип */
  max-width: 86%;
  height: auto;
  display: block;
}

@media (min-width: 768px){
  #authBox .login-logo img{ width: 400px; }
}

/* убираем тексты логотипа и "Logowanie", если где-то остались */
.login-logo b,
.login-title{ display: none !important; }


/* ====== PANEL (menu page) ====== */
.panel-body{ 
  background: #fbf7f2; 
  width: 100%;
  max-width: none;
  overflow-x: hidden;
}

.panel-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

.menu-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.menu-card{
  display: block;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  border-top: 6px solid var(--accent, #1F2A44);
  text-decoration: none;
  color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease;
}
.menu-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.menu-ico{
  font-size: var(--icon-md);
  line-height: 1;
  margin-bottom: 10px;
}
.menu-title{
  font-weight: 700;
  font-size: var(--fs-md);
  margin-bottom: 6px;
}
.menu-desc{
  font-size: var(--fs-sm);
  color: var(--text-muted);
}


/* Auth extras */
.pw-wrap{ position: relative; }
.pw-wrap .login-input{
  padding-right: 2.75rem;
  box-sizing: border-box;
}
.pw-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  z-index: 2;
  border:0; background:transparent; cursor:pointer; font-size:var(--fs-md); line-height:1;
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  opacity:.7;
  pointer-events: auto;
}
.pw-toggle:hover,
.pw-toggle:focus-visible{ opacity:1; }
.pw-toggle:focus-visible{ outline: 2px solid var(--accent-text); outline-offset: 2px; }
.pw-toggle[aria-pressed="true"]{ opacity: 1; }

.login-row{
  display:flex; justify-content:space-between; align-items:center;
  margin: 4px 0 10px;
}
.remember{ font-size: var(--fs-sm); color:var(--text-muted); }
.linklike{
  background:none; border:0; color: var(--accent, #1F2A44); cursor:pointer; font-size:var(--fs-sm); text-decoration:underline;
}

.auth-error{
  background:#fff1f0; color:var(--danger); border:1px solid #ffc9c4;
  padding:8px 10px; border-radius:var(--radius-sm); font-size:var(--fs-sm); margin-bottom:10px;
}
/* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- blada rozowa OBWODKA pola z bledem walidacji; :invalid zapala sie na KAZDYM pustym polu required, wiec --danger (#b3261e, dystans RGB 221) pomalowalby cala forme logowania na jaskrawa czerwien */
.login-input:invalid{ border-color:#e07a7a; }

/* ===== Search bar ===== */
.search-bar{ display:flex; gap:8px; align-items:center; margin: 0; }
.search-bar .ctrl{ flex:1; }


/* THEME */
:root{
  --brand:#d86f1f;
  --brand-d:var(--accent-hover, #34456B);
  --bg:#f6f2ed;
  --card:#ffffff;
  --text:#2b221c;
  --muted:#6b625a;
}

/* Global header polish */
.topbar{ background:#fff; }
.topbar .brand img{ height:40px; width:auto; max-width:140px; margin-right:10px; object-fit:contain; }
.topbar .user .btn{ margin-left:8px; }

.user-profile-link {
  color: var(--text, #1e293b);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s;
}

.user-profile-link:hover {
  background-color: var(--surface-subtle);
  text-decoration: none;
}

/* ===== PROFILE PAGE STYLES ===== */
.profile-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.profile-wrap {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.profile-card {
  padding: 30px;
}

.profile-card h2 {
  margin: 0 0 30px 0;
  color: var(--text, #1e293b);
  font-size: var(--fs-2xl);
  font-weight: 600;
}

.profile-section {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--surface-muted, #faf9f5);
}

.profile-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.profile-section h3 {
  margin: 0 0 20px 0;
  color: var(--text, #1e293b);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.profile-info {
  display: grid;
  gap: 15px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.info-row label {
  min-width: 120px;
  font-weight: 600;
  color: var(--text-muted);
}

.info-row span {
  color: var(--text, #1e293b);
}

.password-form {
  display: grid;
  gap: 20px;
  max-width: 400px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  color: var(--text-muted);
}

.form-input {
  padding: 12px 14px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  background: var(--surface-muted, #faf9f5);
  font-size: var(--fs-base);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

/* (dawny system .message-* usunięty — profil używa wspólnego toasta) */

/* Breadcrumbs */
.breadcrumbs {
  margin-bottom: 20px;
  padding: 10px 0;
  font-size: var(--fs-base);
}

.breadcrumb-link {
  color: var(--accent, #1F2A44);
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: var(--accent-hover, #34456B);
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: var(--text-subtle);
}

.breadcrumb-current {
  color: var(--text);
  font-weight: 500;
}

/* Cards / layout */
.card{ background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.toolbar.gap{ padding:12px 16px; display:flex; gap:8px; }

/* Buttons — единый стиль (обновлено) */
.btn{ 
  appearance:none; 
  border:0; 
  border-radius: var(--radius-md); 
  padding:8px 14px; 
  font-weight:600; 
  cursor:pointer; 
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary{ 
  background: linear-gradient(135deg, var(--accent-text) 0%, var(--accent-text-hover) 100%);
  color:var(--text-inverse); 
  box-shadow:var(--shadow-cta); 
  /* Убираем лишние отступы */
  margin: 0;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover{ 
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-hover);
}
.btn-secondary{ 
  background:#fff; 
  color:var(--text); 
  border:1px solid var(--border-warm, #e8dccd); 
}
.btn-secondary:hover:not(:disabled){ 
  border-color: var(--accent, #1F2A44);
  color: var(--accent, #1F2A44);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-danger{ 
  background: linear-gradient(135deg, var(--danger, #b3261e) 0%, #dc2626 100%);
  color:var(--text-inverse); 
  box-shadow: var(--shadow-cta-danger);
}
.btn-danger:hover{ 
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-danger-hover);
}
.btn:disabled{ 
  opacity:0.5; 
  cursor:not-allowed; 
  transform: none !important;
  box-shadow: none !important;
}

/* Search bar — фирменный */
.search-wrap{ margin: 4px 16px 10px; padding:10px; display:flex; gap:10px; align-items:center; }
.search-icon{ font-size:var(--icon-sm); margin:0 6px 0 4px; }
.search-input{ flex:1; height:30px; border-radius:var(--radius-pill); border:1px solid #efd6c5; background:#fff; padding:0 8px; font-size: var(--fs-sm); }
.search-input:focus{ outline:2px solid #ffd7bf; }

/* Tables — «WOW» */
.tbl{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.tbl thead th{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-d) 100%);
  color:var(--text-inverse); padding:10px 10px; text-align:left; font-weight:800; letter-spacing:.2px;
  border-radius: var(--radius-md);
}
.tbl tbody td{ background:#fff; padding:10px 10px; border-top:1px solid var(--surface-muted, #faf9f5); border-bottom:1px solid var(--surface-muted, #faf9f5); }
.tbl tbody tr td:first-child{ border-left:1px solid var(--surface-muted, #faf9f5); border-top-left-radius:12px; border-bottom-left-radius:12px; }
.tbl tbody tr td:last-child{ border-right:1px solid var(--surface-muted, #faf9f5); border-top-right-radius:12px; border-bottom-right-radius:12px; }
.tbl tbody tr:hover td{ background:var(--accent-soft, rgba(31, 42, 68, 0.08)); }
.tbl tbody tr.selected td{ outline:2px dashed var(--brand); }


/* Small polish */



/* Чуть скруглим углы у липкой шапки для красоты */
.tbl thead th:first-child{ border-top-left-radius:12px; }
.tbl thead th:last-child { border-top-right-radius:12px; }


/* Убрать «пилюли» на заголовках выбранных таблиц */
.tbl--flat thead th{
  border-radius: 0 !important;
}
.tbl--flat thead th:first-child,
.tbl--flat thead th:last-child{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}






/* Sticky totals: один общий контейнер без фона у внутренних обёрток */


/* Row scroll offset so last row isn't hidden under sticky totals */

/* на всякий — если где-то остался selected */
table.tbl tbody tr.selected td{
  outline:none !important;
  box-shadow:none !important;
  border-color:var(--surface-muted, #faf9f5) !important;
}

/* Убираем чёрные разделители при фокусе в таблице результатов */


/* Designers: убрать чёрные бордеры/аутлайны у строк при фокусе */
#designersBody tr:focus,
#designersBody tr:focus-within,
#designersBody td:focus,
#designersBody td:focus-within {
  outline: none !important;
  box-shadow: none !important;
}
#designersBody tr:focus-within > td {
  border-style: inherit !important;  /* отмена принудительного solid */
  border-image: none !important;
}
#designersBody tr:focus::before,
#designersBody tr:focus-within::before {
  content: none !important;
}


/* Autocomplete dropdown for designers */
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #eee;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); max-height:240px; overflow:auto; z-index:10}
.suggest.hidden{display:none}
.suggest-item{padding:8px 10px; cursor:pointer}
.suggest-item:hover{background:#fff7ef}





/* Модальное окно удаления */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  box-sizing: border-box;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  animation: modalSlideIn 0.3s ease;
  /* Dluga tresc (np. karta pracownika z uprawnieniami) byla wyzsza niz ekran,
     a przy `align-items: center` na .modal gora okna uciekala poza widok
     i nie dalo sie do niej doscrollowac (klasyczny problem flex + overflow).
     margin:auto centruje bez ucinania, a wlasny scroll trzyma okno w ekranie.
     Ten sam uklad dziala od dawna w .modal-large (reklamacje). */
  margin: auto;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 0;
}

.modal-header h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #f3f4f6;
  border-radius: 50%;
  color: var(--text-subtle);
  cursor: pointer;
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #e5e7eb;
  color: var(--text);
}

.modal-body {
  padding: 20px 24px;
}

.modal-body p {
  margin: 0 0 8px;
  color: var(--text);
  font-size: var(--fs-md);
}

.modal-details {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin: 0;
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 0 24px 20px;
}

/* Powiadomienia (toast) — jedyny kanoniczny blok (scalone dwa dawne duplikaty).
   Biała karta + kolorowy pasek z lewej wg typu; klasy renderują też aplikacje Next. */
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10000;
  align-items: flex-end;
}

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  /* Na telefonie (375px) 400px wychodziło za ekran */
  max-width: min(400px, calc(100vw - 32px));
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(15, 23, 42, 0.08));
  border-left: 4px solid var(--accent, #1F2A44);
  z-index: 10000;
  animation: slideInRight 0.3s ease;
}

.notification-container .notification {
  position: relative;
  top: 0;
  right: 0;
}

.notification-success {
  border-left-color: var(--success, #16a34a);
}

.notification-error {
  border-left-color: var(--danger, #b3261e);
}

.notification-warning {
  border-left-color: var(--warning, #d97706);
}

.notification-info {
  border-left-color: var(--info, #2563eb);
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  min-width: min(300px, 100%);
}

.notification-close {
  /* Kompaktowy wizualnie; hit-area 36px, żeby toast nie puchł do 44 */
  min-width: 36px;
  min-height: 36px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted, #475569);
  cursor: pointer;
  font-size: var(--fs-xl);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-left: auto;
}

.notification-close:hover {
  background: var(--surface-subtle, #f9fafb);
  color: var(--text, #1e293b);
}


/* Кнопка редактирования */
.action-btn.action-edit:hover {
  background: #f0f9ff;
  border-color: var(--info);
  color: var(--info);
}

.action-btn.action-excel:hover {
  background: #f0fdf4;
  border-color: var(--success, #16a34a);
  color: var(--success, #16a34a);
}

/* Форма проектировщиков */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

/* Убираем растягивание третьего элемента */
/* .form-group:nth-child(3) {
  grid-column: 1 / -1;
} */

.form-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.form-input {
  height: 52px;
  padding: 0 20px;
  border: 2px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: var(--fs-base);
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.form-input:hover {
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--shadow-md);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

.form-input.error {
  border-color: var(--danger, #b3261e);
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pierscien bledu pola; guard nie rozbija box-shadow, a tokenu typu --ring-danger nie ma. --focus-ring jest teal (przemalowalby blad na kolor marki), a rgba(239,68,68) to nie jest --danger (#b3261e) — mapowanie byloby przemalowaniem, nie normalizacja. */
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

.form-input.success {
  border-color: var(--success, #16a34a);
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pierscien poprawnego pola; rgba(22,163,74) to DOKLADNIE --success (#16a34a), ale guard przepuszcza w box-shadow tylko pojedynczy var() na cala wartosc, wiec tokenu nie da sie tu wpiac bez zmiany wygladu. */
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
}

.validation-message {
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-top: 4px;
  min-height: 16px;
  transition: all 0.3s ease;
}

.validation-message.error {
  color: var(--danger, #b3261e);
}

.validation-message.success {
  color: var(--success, #16a34a);
}

.validation-message.info {
}


/* Стили .autocomplete-dropdown перенесены в offer-form-clean.css */

/* Стили для выпадающего списка проектантов перенесены в offer-form-clean.css */

.autocomplete-item {
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f3f4f6;
  border-radius: var(--radius-sm);
  margin: 4px 8px;
}

.autocomplete-item:last-child {
  border-bottom: none;
  margin-bottom: 8px;
}

.autocomplete-item:first-child {
  margin-top: 8px;
}

.autocomplete-item:hover {
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.autocomplete-item:active {
  background: #f1f5f9;
  transform: translateY(0);
}





/* Анимации для строк таблицы */

/* ===== ИНДИКАТОРЫ ЗАГРУЗКИ И УВЕДОМЛЕНИЯ ===== */

/* Глобальный индикатор загрузки */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  backdrop-filter: blur(4px);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f4f6;
  border-top: 4px solid var(--accent, #1F2A44);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Индикатор загрузки для кнопок */
.btn-loading {
  position: relative;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* (dawny drugi blok .notification* scalony z kanonicznym powyżej) */

/* Анимации */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* ===== МАССОВЫЕ ОПЕРАЦИИ ===== */
.bulk-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid var(--warning, #d97706);
  border-radius: var(--radius-sm);
  margin: 0 20px 16px;
  animation: slideInUp 0.3s ease;
}

.bulk-actions.hidden {
  display: none;
}

/* ===== SZYBKIE FILTRY ===== */

/* Przycisk czyszczenia filtrow */
.filter-clear-btn {
  padding: 6px 12px !important;
  border: 1px solid var(--border-warm, #e8dccd) !important;
  border-radius: var(--radius-sm) !important;
  background: #ffffff !important;
  color: var(--text-muted) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.filter-clear-btn:hover {
  background: #f9fafb !important;
  border-color: var(--accent, #1F2A44) !important;
  color: var(--accent-text) !important;
  box-shadow: var(--shadow-md) !important;
}

.filter-clear-btn:active {
  background: #f3f4f6;
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
}


/* ===== УЛУЧШЕННАЯ МОБИЛЬНАЯ ВЕРСИЯ ===== */

/* ===== УЛУЧШЕННАЯ ДОСТУПНОСТЬ ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Фокус для клавиатурной навигации */
.btn:focus,
.filter-input:focus,
.filter-select:focus,
.search-input:focus {
  outline: 2px solid var(--accent, #1F2A44);
  outline-offset: 2px;
}

/* ===== АВТОДОПОЛНЕНИЕ ===== */
/* Стили .autocomplete-dropdown перенесены в offer-form-clean.css */

.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.autocomplete-item:hover {
  background: #f3f4f6;
}

.autocomplete-item.selected {
  background: var(--accent, #1F2A44);
}

/* ===== ВАЛИДАЦИЯ В РЕАЛЬНОМ ВРЕМЕНИ ===== */
.form-input.valid {
  border-color: var(--success, #16a34a);
}

.form-input.invalid {
  border-color: var(--danger, #b3261e);
}

.validation-message {
  font-size: var(--fs-xs);
  margin-top: 4px;
  min-height: 16px;
}

.validation-message.error {
  color: var(--danger, #b3261e);
}

.validation-message.success {
  color: var(--success, #16a34a);
}

/* ===== АВТОСОХРАНЕНИЕ ===== */
.auto-save-indicator {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: var(--text-inverse);
  font-size: var(--fs-base);
  z-index: 1000;
  box-shadow: var(--shadow-md);
  transition: opacity 0.25s ease, transform 0.2s ease;
}

.auto-save-indicator.saving { background: var(--warning, #d97706); }
.auto-save-indicator.error { background: var(--danger, #b3261e); }
.auto-save-indicator.success { background: var(--success, #16a34a); }

/* ===== УЛУЧШЕННАЯ ОБРАБОТКА ОШИБОК ===== */
.error-boundary {
  padding: 20px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  margin: 20px;
}

.error-boundary h3 {
  margin: 0 0 12px 0;
}

.error-boundary p {
  margin: 0;
}

/* ===== ГЛОБАЛЬНАЯ АДАПТИВНОСТЬ ХЕДЕРА ===== */
/* Унифицированный хедер для всех страниц */
.topbar, .header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 2px solid var(--accent, #1F2A44);
  box-shadow: var(--shadow-sm);
}

.topbar .brand, .header .brand {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

.topbar .brand img, .header .brand img {
  height: 32px;
  width: auto;
  max-width: 120px;
}

.topbar .brand strong, .header .brand strong {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text, #1e293b);
  white-space: nowrap;
}

.topbar .user, .header .user-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.topbar .user span, .header .user-actions span {
  font-size: var(--fs-base);
  color: var(--text-muted, #475569);
  white-space: nowrap;
}

/* Адаптивность для планшетов */
@media (max-width: 1024px) {
  .topbar, .header {
    padding: 10px 16px;
  }
  
  .topbar .brand img, .header .brand img {
    height: 28px;
  }
  
  .topbar .brand strong, .header .brand strong {
    font-size: var(--fs-md);
  }
  
  .topbar .user, .header .user-actions {
    gap: 8px;
  }
  
  .topbar .user .btn, .header .user-actions .btn {
    padding: 8px 12px;
    font-size: var(--fs-base);
  }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .topbar, .header {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .topbar .brand, .header .brand {
    flex: 1;
    min-width: 0;
  }
  
  .topbar .brand img, .header .brand img {
    height: 24px;
  }
  
  .topbar .brand strong, .header .brand strong {
    font-size: var(--fs-base);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .topbar .user, .header .user-actions {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
  }
  
  .topbar .user .btn, .header .user-actions .btn {
    padding: 6px 10px;
    font-size: var(--fs-xs);
    min-width: auto;
  }
  
  .topbar .user span, .header .user-actions span {
    font-size: var(--fs-xs);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
  .topbar, .header {
    padding: 6px 8px;
  }
  
  .topbar .brand, .header .brand {
    gap: 8px;
  }
  
  .topbar .brand img, .header .brand img {
    height: 20px;
  }
  
  .topbar .brand strong, .header .brand strong {
    font-size: var(--fs-sm);
  }
  
  .topbar .user, .header .user-actions {
    gap: 4px;
  }
  
  .topbar .user .btn, .header .user-actions .btn {
    padding: 5px 8px;
    font-size: var(--fs-xs);
  }
  
  .topbar .user span, .header .user-actions span {
    display: none; /* Скрываем email на очень маленьких экранах */
  }
}




/* Стили .autocomplete-dropdown перенесены в offer-form-clean.css */

/* Стили .autocomplete-dropdown.hidden перенесены в offer-form-clean.css */

.autocomplete-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.autocomplete-item:hover {
  background: #f8f9fa;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
  }
  
  .form-row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .form-input, .form-select {
    font-size: var(--fs-md); /* Предотвращает зум на iOS */
    padding: 12px 14px;
  }
  
  .form-label {
    font-size: var(--fs-xs);
  }
}

@media (max-width: 480px) {
  .form-grid {
    gap: 10px;
  }
  
  .form-row {
    gap: 6px;
  }
  
  .form-input, .form-select {
    padding: 10px 12px;
    font-size: var(--fs-md);
  }
  
  .form-label {
    font-size: var(--fs-xs);
  }
}

/* ===== АДАПТИВНОСТЬ КАРТОЧЕК ===== */
.card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: #fff;
  overflow: hidden;
}

@media (max-width: 768px) {
  .card {
    border-radius: var(--radius-sm);
    margin: 8px 0;
  }
}

/* ===== УЛУЧШЕННАЯ НАВИГАЦИЯ ===== */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: var(--fs-base);
  color: var(--text-muted, #475569);
  /* Убираем лишние отступы */
  padding: 2px;
  width: 100%;
  box-sizing: border-box;
}

.breadcrumb-item {
  color: var(--accent-text);
  text-decoration: none;
}

.breadcrumb-item:hover {
  color: var(--accent-text-hover);
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--border-strong);
}

.breadcrumb-current {
  color: var(--text, #1e293b);
  font-weight: 600;
}

@media (max-width: 768px) {
  .breadcrumbs {
    font-size: var(--fs-xs);
    margin-bottom: 12px;
    padding: 3px;
  }
}

/* ===== АДАПТИВНОСТЬ ПАНЕЛИ ===== */
.panel-wrap {
  padding: 20px;
  max-width: 100%;
  box-sizing: border-box;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  text-align: center;
}

.menu-card:hover {
  border-color: var(--accent, #1F2A44);
  transform: translateY(-2px);
}

.menu-ico {
  font-size: var(--fs-4xl);
  margin-bottom: 16px;
}

.menu-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text, #1e293b);
  margin-bottom: 8px;
}

.menu-desc {
  font-size: var(--fs-base);
  color: var(--text-muted, #475569);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .panel-wrap {
    padding: 16px;
  }
  
  .menu-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
  
  .menu-card {
    padding: 20px;
  }
  
  .menu-ico {
  }
  
  .menu-title {
    font-size: var(--fs-md);
  }
}

@media (max-width: 768px) {
  .panel-wrap {
    padding: 12px;
  }
  
  .menu-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }
  
  .menu-card {
    padding: 16px;
  }
  
  .menu-ico {
    font-size: var(--fs-3xl);
    margin-bottom: 12px;
  }
  
  .menu-title {
    font-size: var(--fs-base);
  }
  
  .menu-desc {
    font-size: var(--fs-xs);
  }
}

@media (max-width: 480px) {
  .panel-wrap {
    padding: 8px;
  }
  
  .menu-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .menu-card {
    padding: 12px;
    flex-direction: row;
    text-align: left;
    gap: 12px;
  }
  
  .menu-ico {
    font-size: var(--fs-2xl);
    margin-bottom: 0;
    flex-shrink: 0;
  }
  
  .menu-title {
    font-size: var(--fs-sm);
    margin-bottom: 4px;
  }
  
  .menu-desc {
    font-size: var(--fs-xs);
  }
}

/* ===== АДАПТИВНОСТЬ ПОИСКА И ФИЛЬТРОВ ===== */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all 0.2s ease;
  min-height: 36px;
}

.search-input-wrapper:focus-within {
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

.search-icon {
  padding: 0 12px;
  color: var(--text-muted, #475569);
  font-size: var(--fs-md);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  border: none;
  padding: 0;
  font-size: var(--fs-base);
  background: transparent;
  outline: none;
  min-height: 36px;
  line-height: 1.4;
}

.search-input::placeholder {
  color: var(--text-muted, #475569);
}

/* Удален дублирующий блок стилей для .search-clear */

/* ===== СТРАНИЦА ПРОДУКТОВ ===== */
.filter-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.pagination {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin: 20px;
  padding: 16px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-warm, #e8dccd);
}

.pagination-info {
  font-size: var(--fs-base);
  color: var(--text-muted, #475569);
  min-width: 120px;
  text-align: center;
}

.pagination .btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text, #1e293b);
  text-decoration: none;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination .btn:hover:not(:disabled) {
  background: #f8f6f3;
  border-color: var(--accent, #1F2A44);
}

.pagination .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Numery stron (listy ofert i zamówień) ------------------------------
   Przy 155 stronach same strzałki znaczyły 88 kliknięć do strony 90.
   Kontener siedzi MIĘDZY „Poprzednia" a „Następna" i zwija się na wąskich
   ekranach — strzałki zostają zawsze. */
.pagination-pages {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-number {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text, #1e293b);
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.page-number:hover:not(:disabled) {
  background: #f8f6f3;
  border-color: var(--accent, #1F2A44);
}

.page-number.is-current {
  background: var(--accent, #1F2A44);
  border-color: var(--accent, #1F2A44);
  color: var(--text-inverse, #ffffff);
  font-weight: 600;
  cursor: default;
  opacity: 1;
}

.page-gap {
  padding: 0 2px;
  color: var(--text-muted, #475569);
  user-select: none;
}

.page-jump {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-jump__label {
  font-size: var(--fs-sm, 13px);
  color: var(--text-muted, #475569);
}

.page-jump__input {
  width: 72px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- iOS
     przybliża stronę przy wejściu w pole o foncie < 16px; to próg przeglądarki,
     nie decyzja typograficzna, więc nie ma dla niego tokenu (tak samo robią
     pozostałe pola formularzy od Fali 1) */
  font-size: 16px;
  text-align: center;
}

.page-jump__input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

.page-jump__btn {
  min-height: 44px;
}

/* Na telefonie numery zajmowałyby całą szerokość — zostają strzałki,
   skok do strony i informacja „Strona X z Y". Sam pasek musi się przy tym
   zawijać, inaczej strzałki wychodzą poza ekran. */
@media (max-width: 640px) {
  .page-numbers {
    display: none;
  }

  .pagination,
  .pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.product-row {
  transition: background-color 0.2s ease;
}

.product-row:hover {
  background-color: var(--surface-muted);
}

.error-message {
  text-align: center;
  padding: 40px 20px;
}

.error-icon {
  font-size: var(--fs-4xl);
  margin-bottom: 16px;
  display: block;
}

/* ===== ИСПРАВЛЕНИЕ ФИЛЬТРОВ - ВОЗВРАТ К ГОРИЗОНТАЛЬНОМУ РАСПОЛОЖЕНИЮ ===== */
.filters-card {
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 20px;
  box-shadow: var(--shadow-sm);
  width: calc(100% - 40px);
  box-sizing: border-box;
}

.filters-grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr auto auto auto auto;
  gap: 16px;
  align-items: start;
}

/* Адаптивность для фильтров */
@media (max-width: 1400px) {
  .filters-grid {
    grid-template-columns: 1fr 1.5fr 1.5fr auto auto auto auto;
  }
}

@media (max-width: 1200px) {
  .filters-grid {
    grid-template-columns: 1fr 1fr auto auto auto auto;
  }
}

@media (max-width: 1000px) {
  .filters-grid {
    grid-template-columns: 1fr 1fr auto auto auto;
  }
}

@media (max-width: 800px) {
  .filters-grid {
    grid-template-columns: 1fr 1fr auto auto;
  }
}

@media (max-width: 600px) {
  .filters-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.filter-select {
  padding: 12px 16px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  background: #fff;
  transition: all 0.2s ease;
  min-height: 36px;
  line-height: 1.4;
}

.filter-select:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

.filter-input {
  padding: 12px 16px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  background: #fff;
  transition: all 0.2s ease;
  min-height: 36px;
  line-height: 1.4;
}

.filter-input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

/* Улучшение отображения плейсхолдеров в селектах */
.filter-select option {
  font-size: var(--fs-base);
  padding: 8px;
}

.filter-select option:first-child {
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 1024px) {
  .filters-card {
    padding: 16px;
    margin: 16px 0;
  }
}

@media (max-width: 768px) {
  .filters-card {
    padding: 12px;
    margin: 12px 0;
  }
  
  .search-input-wrapper {
    margin-bottom: 12px;
  }
  
  .search-input {
    font-size: var(--fs-md);
    padding: 8px 12px !important;
    min-height: var(--touch-min);
  }
  
  .filter-select {
    font-size: var(--fs-md);
    padding: 12px 14px;
  }
  
  .filter-label {
    font-size: var(--fs-xs);
  }
}

@media (max-width: 480px) {
  .filters-card {
    padding: 10px;
    margin: 10px 0;
  }
  
  .filters-grid {
    gap: 10px;
  }
  
  .search-input {
    padding: 8px 12px !important;
    min-height: 36px;
  }
  
  .filter-select {
    padding: 10px 12px;
  }
  
  .filter-label {
    font-size: var(--fs-xs);
  }
}

/* Дополнительные стили для кнопок действий на очень маленьких экранах */
@media (max-width: 400px) {
  .action-buttons {
    min-width: 70px !important;
    padding-right: 4px !important;
  }
  
  /* USUNIETE (fala 1): w tabelach martwe (przegrywa specyficznoscia z
     offers-list.css), a poza nimi tylko scinalo bazowe 44x44 do 28px. */
}

/* Стили для очень узких экранов (консоль разработчика) */

/* ===== УЛУЧШЕННАЯ АДАПТИВНОСТЬ ДЛЯ ВСЕГО ПРОЕКТА ===== */

/* Общие адаптивные стили для всех страниц */
@media (max-width: 1024px) {
  .panel-body {
    padding: 10px;
  }
  
  .card {
    margin: 8px 0;
    padding: 16px;
  }
  
  .btn {
    padding: 10px 16px;
    font-size: var(--fs-base);
  }
  
  .form-input,
  .search-input,
  .filter-input {
    padding: 10px 12px;
    font-size: var(--fs-base);
  }
}

@media (max-width: 768px) {
  .panel-body {
    padding: 8px;
  }
  
  .card {
    margin: 6px 0;
    padding: 12px;
  }
  
  .btn {
    padding: 12px 16px;
    font-size: var(--fs-base);
    min-height: 44px;
  }
  
  .form-input,
  .search-input,
  .filter-input {
    padding: 8px 12px;
    font-size: var(--fs-md);
    min-height: var(--touch-min);
  }
  
  /* Улучшенная навигация */
  .topbar {
    padding: 8px 12px;
  }
  
  .breadcrumbs {
    padding: 8px 12px;
    font-size: var(--fs-xs);
  }
  
  /* Адаптивные сетки */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  /* Адаптивные таблицы */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table-responsive table {
    min-width: 600px;
  }
}

/* ===== СПЕЦИАЛЬНЫЕ СТИЛИ ДЛЯ ГЛАВНОЙ ПАНЕЛИ ===== */
@media (max-width: 1024px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .menu-card {
    padding: 20px;
  }
  
  .menu-ico {
    font-size: var(--fs-3xl);
    margin-bottom: 12px;
  }
  
  .menu-title {
    font-size: var(--fs-md);
    margin-bottom: 8px;
  }
  
  .menu-desc {
    font-size: var(--fs-sm);
  }
}

@media (max-width: 768px) {
  .menu-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .menu-card {
    padding: 16px;
  }
  
  .menu-ico {
    font-size: var(--icon-md);
    margin-bottom: 10px;
  }
  
  .menu-title {
    font-size: var(--fs-base);
    margin-bottom: 6px;
  }
  
  .menu-desc {
    font-size: var(--fs-xs);
  }
}

@media (max-width: 480px) {
  .panel-body {
    padding: 4px;
  }
  
  .card {
    margin: 4px 0;
    padding: 8px;
  }
  
  .btn {
    padding: 10px 12px;
    font-size: var(--fs-base);
    min-height: var(--touch-min);
  }
  
  .form-input,
  .search-input,
  .filter-input {
    padding: 10px 12px;
    font-size: var(--fs-md);
    min-height: var(--touch-min);
  }
  
  .topbar {
    padding: 6px 8px;
  }
  
  .breadcrumbs {
    padding: 6px 8px;
    font-size: var(--fs-xs);
  }
}

/* Очень маленькие экраны */

/* ===== ROLE BADGES ===== */
.role-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-admin {
    background-color: var(--danger, #b3261e);
    color: var(--text-inverse);
}

.role-seller {
    background-color: var(--info, #2563eb);
    color: var(--text-inverse);
}

.role-warehouse {
    background-color: var(--success, #16a34a);
    color: var(--text-inverse);
}

.role-logistyka {
    background-color: var(--accent);
    color: var(--text-inverse);
}

.role-reklamacja {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- fiolet roli "reklamacja": paleta 5 rol musi zostac rozroznialna, a w tokenach nie ma zadnego fioletu */
    background-color: #6f42c1;
    color: var(--text-inverse);
}

/* ===== STATUS BADGES ===== */
.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    font-weight: 500;
}

.status-active {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pastelowe tlo tworzy pare z border:1px solid #c3e6cb w linii nizej, ktorego guard NIE lapie (shorthand border); podmiana samego tla rozjechalaby zestaw */
    background-color: #d4edda;
    color: var(--status-text-ok);
    border: 1px solid #c3e6cb;
}

.status-inactive {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- jak wyzej: para z border:1px solid #f5c6cb, ktorego guard nie lapie */
    background-color: #f8d7da;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- brak tokenu ciemnej czerwieni tekstu; --danger (#b3261e) rozjasnia o 65 pkt w kanale R i zbija kontrast 8,25 -> 4,89 */
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ===== PREVIEW TABLE ===== */
.preview-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-size: var(--fs-base);
}

.preview-table th,
.preview-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.preview-table th {
    background-color: var(--surface-subtle);
    font-weight: 600;
    color: var(--text-muted);
}

.preview-table tr:hover {
    background-color: var(--surface-subtle);
}

/* ===== ALERT STYLES ===== */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.alert-info {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pastelowa rodzina alertu info (tlo + obramowanie + tekst) nie ma odpowiednikow w tokenach; podmiana pojedynczej warstwy rozjechalaby komplet */
    background-color: #d1ecf1;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- obramowanie z tej samej rodziny co tlo powyzej */
    border-color: #bee5eb;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- --status-text-info (#1d4ed8) przeskakuje z cyjanu na blekit krolewski (kanal B 96 -> 216) i rozjezdza sie z ramka */
    color: #0c5460;
}

.alert code {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 2px 4px;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- mikro-promien chipa inline <code> (padding 2px 4px, wysokosc ~18px); --radius-sm (8px) zamienilby go w pigulke */
    border-radius: 3px;
    font-family: monospace;
}

/* ===== CHECKBOX STYLES ===== */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-wrapper input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Горизонтальная прокрутка для таблиц */
.table-container {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-app);
  /* Улучшенная прокрутка */
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  /* Предотвращение переполнения */
  max-width: 100%;
  margin: 8px 0;
}

.table-container::-webkit-scrollbar {
  height: 6px;
}

.table-container::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: var(--radius-pill);
}

.table-container::-webkit-scrollbar-thumb {
  background: var(--accent, #1F2A44);
  border-radius: var(--radius-pill);
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: var(--warning, #d97706);
}

/* Улучшенные стили для drag & drop */

/* Улучшенные стили для сепараторов */



/* ===== ACCESS DENIED ===== */
.access-denied {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.access-denied-content {
    text-align: center;
    max-width: 500px;
    background: white;
    padding: 40px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid #e5e7eb;
}

.access-denied-icon {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- emoji blokady jako plakat pustego stanu; --icon-lg (48px) scialoby je o 25% */
    font-size: 64px;
    margin-bottom: 20px;
}

.access-denied h2 {
    color: var(--danger);
    font-size: var(--fs-2xl);
    font-weight: 600;
    margin-bottom: 16px;
}

.access-denied p {
    color: var(--text-muted);
    font-size: var(--fs-md);
    line-height: 1.5;
    margin-bottom: 12px;
}

.access-denied p strong {
    color: var(--text);
}

.access-denied-actions {
    margin-top: 24px;
}

.form-label {
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  margin: 0;
}

.form-input, .form-select {
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  padding: 8px 10px;
}

/* ===== Prezenty module ===== */
.gift-controls {
  margin-bottom: 24px;
}

.gift-summary-card {
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}

.gift-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.gift-summary-header h2 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text, #1e293b);
}

.gift-summary-table-wrapper {
  position: relative;
}

.gift-summary-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--surface-muted, #faf9f5);
}

.gift-summary-table th,
.gift-summary-table td {
  padding: 12px 16px;
  text-align: center;
  font-weight: 600;
}

.gift-summary-table th {
  background: var(--accent, #1F2A44);
  color: var(--text-inverse);
  font-size: var(--fs-base);
  letter-spacing: 0.03em;
}

.gift-summary-table td {
  background: var(--surface-muted, #faf9f5);
  font-size: var(--fs-md);
}

.gift-summary-empty {
  padding: 12px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-base);
}

.gift-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 80px;
}

.gift-group-card {
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.gift-group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 20px;
  border-bottom: 1px solid var(--surface-muted, #faf9f5);
  background: linear-gradient(135deg, #fff8f1 0%, #fff 70%);
}

.gift-group-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text, #1e293b);
}

.gift-group-count {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.gift-table {
  width: 100%;
  border-collapse: collapse;
}

.gift-table th {
  text-align: left;
  padding: 12px 18px;
  background: #fffaf3;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--surface-muted, #faf9f5);
}

.gift-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #f6ecdf;
  vertical-align: top;
  background: #fff;
}

.gift-table tr:last-child td {
  border-bottom: none;
}

.gift-designer-name {
  font-weight: 600;
  font-size: var(--fs-md);
  margin-bottom: 6px;
}

.gift-designer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.gift-designer-header .gift-row-indicator {
  min-width: 20px;
}

.gift-table tr.gift-row--poinformowany td {
  background: #fff4e0;
  transition: background-color 0.2s ease;
}

.gift-table tr.gift-row--odebrany td {
  background: #e8f6ec;
  transition: background-color 0.2s ease;
}

.gift-designer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.gift-input {
  width: 100%;
  max-width: 90px;
  padding: 8px 10px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  background: var(--surface-muted, #faf9f5);
  font-size: var(--fs-base);
}

.gift-input:focus {
  outline: 2px solid rgba(31, 42, 68, 0.2);
}

.gift-col {
  min-width: 120px;
}

.gift-col-remaining {
  min-width: 110px;
  font-weight: 600;
  color: var(--accent, #1F2A44);
}

.gift-col-notes {
  min-width: 220px;
}

.gift-remaining {
  font-weight: 600;
  color: var(--accent-hover, #34456B);
}

.gift-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.gift-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text);
}

.gift-status-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #1F2A44);
}

.gift-status-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.gift-notes {
  width: 100%;
  min-width: 180px;
  min-height: 70px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-warm, #e8dccd);
  background: var(--surface-muted, #faf9f5);
  font-family: inherit;
  resize: vertical;
  font-size: var(--fs-sm);
}

.gift-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 130px;
}

.gift-row-indicator {
  font-size: var(--fs-lg);
  line-height: 1;
  min-width: 20px;
  text-align: center;
  color: var(--accent-hover, #34456B);
}

.gift-placeholder,
.gift-empty {
  padding: 40px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--border-warm, #e8dccd);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

.gift-empty-icon {
  font-size: var(--icon-lg);
  margin-bottom: 12px;
}

.gift-error {
  padding: 20px;
  background: #fff2f0;
  border: 1px solid #ffb3a6;
  border-radius: var(--radius-md);
  color: var(--danger);
  text-align: center;
}

.gift-loading {
  position: fixed;
  inset: 0;
  background: rgba(250, 249, 245, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  z-index: 999;
  color: var(--text-muted);
  font-size: var(--fs-md);
}

.gift-loading-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid var(--surface-muted, #faf9f5);
  border-top-color: var(--accent, #1F2A44);
  animation: gift-spin 1s linear infinite;
}

@keyframes gift-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1024px) {
  .gift-table th,
  .gift-table td {
    padding: 12px;
  }

  .gift-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .gift-row-indicator {
    align-self: flex-end;
  }
}

@media (max-width: 768px) {
  .gift-group-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .gift-status {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .gift-notes {
    min-height: 56px;
  }
}


/* ===== СТИЛИ ДЛЯ МОДУЛЯ РЕКЛАМАЦИЙ ===== */
.modal-large {
  max-width: min(900px, 100%);
  width: min(95vw, 900px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto;
}

.modal-large .modal-header {
  flex-shrink: 0;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #e8e0d5;
  background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-large .modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px;
}

.modal-large .modal-footer {
  flex-shrink: 0;
  padding: 12px 20px 16px;
  border-top: 1px solid #e8e0d5;
  background: #fff;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.btn-icon {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s;
}

.btn-icon:hover {
  background: var(--surface-muted, #faf9f5);
  color: var(--accent, #1F2A44);
}

.btn-icon svg {
  width: 16px;
  height: 16px;
}

.action-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Listing ofert: checkbox merge + POWIEL + Usuń w JEDNEJ linii.
   Kolumna była ściśnięta przez auto-layout tabeli (~92px), więc trzy
   elementy się zawijały i podwajały wysokość wiersza. Szerokość ustawiamy
   na th ORAZ td (auto-layout bierze maksimum z kolumny), a kontener akcji
   wymuszamy w jednym rzędzie bez zawijania i bez ściskania dzieci. */
.offers-table--list th.col-actions,
.offers-table--list td.offer-actions {
  /* table-layout: fixed → szerokość kolumny bierze się z nagłówka; !important,
     bo istnieje reguła o wyższym priorytecie ściskająca kolumnę do ~92px. */
  width: 140px !important;
  min-width: 140px !important;
  white-space: nowrap;
}
.offers-table--list td.offer-actions .action-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end;
}
.offers-table--list td.offer-actions .action-buttons > * {
  flex: 0 0 auto;
}

.urgent-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: var(--fs-base);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.empty-message,
.error-message {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-message span,
.error-message span {
  display: block;
  margin-top: 10px;
}


/* Стили для формы рекламаций */
#reklamacjaForm .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

#reklamacjaForm .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#reklamacjaForm .form-group--wide {
  grid-column: 1 / -1;
}

#reklamacjaForm .form-group label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
}

#reklamacjaForm .form-input {
  padding: 8px 10px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  background: var(--surface-muted, #faf9f5);
  font-size: var(--fs-base);
  font-family: inherit;
}

#reklamacjaForm textarea.form-input {
  min-height: 120px;
  line-height: 1.45;
  resize: vertical;
  padding: 10px 12px;
}

#reklamacjaForm .form-input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--focus-ring);
}

#reklamacjaForm .form-input[readonly] {
  background: #f5f5f5;
  cursor: not-allowed;
}

/* Panel dashboard */
.panel-dashboard-host {
  margin-bottom: 20px;
}

.panel-dashboard {
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

.panel-dashboard__title {
  margin: 0 0 16px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text, #1e293b);
}

.panel-dashboard__loading {
  color: var(--text-muted, #475569);
  font-size: var(--fs-base);
  padding: 8px 0;
}


.panel-dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-dash-action {
  font-size: var(--fs-base);
}

/* Nagłówek dashboardu: tytuł + chipy akcji (styl jak skróty w topbarze) */
.panel-dashboard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.panel-dashboard__head .panel-dashboard__title {
  margin: 0;
}

.panel-dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-warm, #e8dccd);
  background: #fff;
  color: var(--text, #1e293b);
  font: 600 13px/1 inherit;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  min-height: var(--touch-min, 44px);
}

.panel-dash-chip:hover,
.panel-dash-chip:focus-visible {
  border-color: var(--accent, #1F2A44);
  box-shadow: var(--shadow-md);
  background: #EDF0F7;
}

.panel-dash-chip__ico {
  font-size: var(--fs-md);
}

/* Personalizacja chipów: przycisk „＋" + menu z gwiazdkami (jak skróty topbara) */
.panel-dash-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-dash-actions__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-dash-actions__more {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text, #1e293b);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
}

.panel-dash-actions__more:hover,
.panel-dash-actions__more:focus-visible {
  background: #EDF0F7;
  border-color: var(--accent, #1F2A44);
}

.panel-dash-actions__more:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.panel-dash-actions__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1200;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  padding: 6px;
  box-shadow: var(--shadow-lg);
}

.panel-dash-actions__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text, #1e293b);
  font: inherit;
  font-size: var(--fs-base);
  text-align: left;
  cursor: pointer;
}

.panel-dash-actions__row:hover,
.panel-dash-actions__row:focus-visible {
  background: #EDF0F7;
}

.panel-dash-actions__row:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: -2px;
}

.panel-dash-actions__star {
  width: 20px;
  text-align: center;
  color: var(--accent, #1F2A44);
  font-size: var(--fs-md);
}

/* Osobista lista zadań */
.panel-dash-todo {
  margin-bottom: 16px;
}

.panel-dash-todo__form {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.panel-dash-todo__input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #f8f6f3;
}

.panel-dash-todo__input:focus {
  outline: none;
  border-color: var(--accent, #1F2A44);
  background: #fff;
}

.panel-dash-todo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}

.panel-dash-todo__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}

.panel-dash-todo__item:hover {
  background: #f8f6f3;
}

.panel-dash-todo__label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.panel-dash-todo__check {
  width: 18px;
  height: 18px;
  accent-color: var(--accent, #1F2A44);
  flex: none;
  cursor: pointer;
}

.panel-dash-todo__text {
  font-size: var(--fs-base);
  overflow-wrap: anywhere;
}

.panel-dash-todo__item--done .panel-dash-todo__text {
  text-decoration: line-through;
  color: var(--text-muted, #475569);
}

.panel-dash-todo__del {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--danger);
  font-size: var(--icon-sm);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}

.panel-dash-todo__item:hover .panel-dash-todo__del,
.panel-dash-todo__del:focus-visible {
  opacity: 1;
}

.panel-dash-todo__del:hover {
  background: #fee2e2;
}

.panel-dash-todo__empty {
  color: var(--text-muted, #475569);
  font-size: var(--fs-sm);
  padding: 6px 2px;
  list-style: none;
}

.panel-dash-todo__clear {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--text-muted, #475569);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: underline;
}

.panel-dash-todo__clear:hover {
  color: var(--accent, #1F2A44);
}

@media (max-width: 768px) {
  .panel-dash-todo__del {
    opacity: 1; /* na dotyku brak hovera */
  }
}

/* Polski format dat w filtrach */
input[type="date"][lang="pl"] {
  font-family: inherit;
}

/* Reklamacje — pełny tekst statusu */
.offers-table .reklamacja-row td:nth-child(7) {
  min-width: 11rem;
  max-width: none;
}

.reklamacja-status-badge {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
}

/* ===== Mobile card layout dla tabel list ===== */
@media (max-width: 768px) {
  .mobile-cards-container {
    overflow-x: visible;
    border: none;
    background: transparent;
  }

  .mobile-cards-table {
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 12px;
  }

  .mobile-cards-table thead {
    display: none;
  }

  .mobile-cards-table tbody {
    display: block;
  }

  .mobile-cards-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #e8e0d8;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  .mobile-cards-table tbody tr.reklamacja-row,
  .mobile-cards-table tbody tr.offer-row,
  .mobile-cards-table tbody tr.order-row {
    cursor: pointer;
  }

  .mobile-cards-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 10px 14px !important;
    border: none !important;
    border-bottom: 1px solid #f3ede6 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    background: transparent !important;
    color: inherit !important;
  }

  .mobile-cards-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    flex: 0 0 42%;
    padding-right: 8px;
  }

  .mobile-cards-table tbody td:last-child {
    border-bottom: none !important;
  }

  .mobile-cards-table tbody td.loading-message,
  .mobile-cards-table tbody td.empty-message,
  .mobile-cards-table tbody td.error-message,
  .mobile-cards-table tbody td.no-data {
    display: block;
    text-align: center;
    padding: 24px 16px !important;
  }

  .mobile-cards-table tbody td.loading-message::before,
  .mobile-cards-table tbody td.empty-message::before,
  .mobile-cards-table tbody td.error-message::before,
  .mobile-cards-table tbody td.no-data::before {
    content: none;
  }

  .mobile-cards-table tbody td.col-actions,
  .mobile-cards-table tbody td.actions-cell,
  .mobile-cards-table tbody td.offer-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .mobile-cards-table tbody td.col-actions .action-buttons,
  .mobile-cards-table tbody td.actions-cell .action-buttons,
  .mobile-cards-table tbody td.offer-actions .action-buttons {
    justify-content: flex-end;
    width: 100%;
  }

  .mobile-cards-table tbody td .status-select {
    max-width: 100%;
    width: 100%;
  }

  /* Na mobile: numer oferty zamiast daty jako pierwszy wiersz karty */
  .mobile-cards-table tbody td.offer-date,
  .mobile-cards-table tbody td.col-date {
    display: none !important;
  }

  .mobile-cards-table tbody td.offer-number,
  .mobile-cards-table tbody td.col-number {
    font-weight: 700;
    font-size: var(--fs-md);
    border-bottom: 1px solid #e8e0d8 !important;
    background: #faf9f7 !important;
  }

  .mobile-cards-table tbody td.offer-number::before,
  .mobile-cards-table tbody td.col-number::before {
    color: var(--text-muted);
  }

  /* Próbki: kolumny ukrywane na węższych desktopach (nth-child w <head> probki.html)
     wracają w widoku kart — tam pionowe miejsce jest tanie */
  .probki-page .mobile-cards-table tbody td:not(.loading-message):not(.no-data) {
    display: flex !important;
  }

  /* Próbki: kolumna akcji jako pełnowymiarowe przyciski jeden pod drugim */
  .mobile-cards-table tbody td.probki-actions-cell {
    flex-direction: column;
    align-items: stretch;
  }

  .mobile-cards-table tbody td.probki-actions-cell .btn {
    min-height: var(--touch-min, 44px);
  }

  /* Próbki: wrapper .probki-table ma overflow:hidden — nie przycinamy cieni kart */
  .probki-page .probki-table.mobile-cards-container {
    overflow: visible;
  }
}

/* ===== Cross-links między modułami ===== */
.entity-cross-link {
  color: var(--accent, #1F2A44);
  font-weight: 600;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.entity-cross-link:hover {
  color: var(--accent-hover, #34456B);
  text-decoration: underline;
}

.entity-cross-link--btn {
  display: inline;
}

.entity-cross-link-sep {
  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- cieply
     separator "·" miedzy linkami; najblizszy token lezy 65 jednostek RGB dalej,
     a element jest dekoracyjny, wiec token bylby przemalowaniem */
  color: #c4b5a8;
  margin: 0 6px;
  user-select: none;
}

.offer-related-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.offer-related-links.hidden {
  display: none;
}

.offer-related-links__label {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-muted);
}

.offer-related-links__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* === A11y (fala 1): zbiorczy widoczny fokus klawiatury =====================
   Kontrolkom nizej zdejmowano outline zostawiajac cien rgba .1-.2 (~1,1:1,
   niewidoczny). Ta regula jest OSTATNIA w bundlu (css/* sa @import, wiec
   hoistowane na poczatek), ma te same specyficznosci co wycinacze i wygrywa
   pozycja. Klik myszka bez zmian — dziala tylko :focus-visible. */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.login-input:focus-visible,
.filter-input:focus-visible,
.filter-select:focus-visible,
.currency-select:focus-visible,
.vat-select:focus-visible,
.panel-dash-todo__input:focus-visible,
.panel-dash-chip:focus-visible,
.icon-btn:focus-visible,
.linklike:focus-visible,
#reklamacjaForm .form-input:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 1px;
}

/* === Fala 1 (mobile): blokada auto-zoomu iOS + cele dotykowe ===============
   Safari na iOS powieksza cala strone przy fokusie pola o font-size < 16px.
   Stary fix (Предотвращает зум) byl martwy — nadpisywala go pozniejsza regula
   o tej samej specyficznosci. Jedno miejsce zamiast poprawek w 8 blokach @media;
   koniec pliku = wygrana pozycja przy remisie. !important konieczne, bo
   konkurenci tez go maja. Lancuch :not() wyklucza kontrolki, ktorych nie wolno
   rozciagac do 44px, i podnosi specyficznosc <input> ponad (0,5,0)
   z offer-form-clean.css. Pola maja height ORAZ max-height 24-36px — bez
   height:auto/max-height:none tekst 16px bylby przyciety; min-height wygrywa
   z max-height, wiec --touch-min domyka konwencje 44px. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  .form-input,
  .form-select,
  .search-input,
  .filter-input,
  .filter-select,
  .oferta-input,
  .login-input,
  .status-select {
    font-size: var(--fs-md) !important;
    line-height: var(--lh-tight) !important;
    height: auto !important;
    max-height: none !important;
    min-height: var(--touch-min) !important;
  }

  /* Textarea dostaje TYLKO rozmiar tekstu — min-height 44px SKROCILOBY pole
     (bazowe min-height to 100px). */
  textarea,
  .form-textarea {
    font-size: var(--fs-md) !important;
    line-height: var(--lh-base) !important;
  }
}

/* ===== Scalony ekran ofert/zamowien: przelacznik widoku ===== */
.list-view-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  background: var(--surface-muted, #faf9f5);
  border: 1px solid var(--border-warm, #e8dccd);
  border-radius: var(--radius-pill);
}

.list-view-toggle__btn {
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  min-height: 44px;
}

.list-view-toggle__btn.is-active {
  background: var(--card, #fff);
  color: var(--text, #2b221c);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
}