/* Motyw ciemny (domyslny) i jasny - przelaczane atrybutem data-theme na <html> (patrz
   theme.js), zapamietywane w localStorage. Reszta arkusza korzysta WYLACZNIE z tych
   zmiennych (kolory, --overlay-rgb) - dzieki temu przelacznik motywu dziala globalnie
   bez dotykania pozostalych reguł. */
:root {
  --bg: #0a0e1a;
  --sidebar-bg: #0d1424;
  --card-bg: #121a2e;
  --border: #1e293b;
  --text: #e5e9f0;
  --text-muted: #7c8aa5;
  --accent: #22d3ee;
  --accent-text: #04222b;
  --accent-dim: rgba(34, 211, 238, 0.12);
  --success: #34d399;
  --success-dim: rgba(52, 211, 153, 0.12);
  --purple: #a78bfa;
  --purple-dim: rgba(167, 139, 250, 0.12);
  --danger: #f87171;
  /* Baza (bez alpha) dla subtelnych nakladek hover/tla (rgba(var(--overlay-rgb),X)) -
     biala nakladka rozjasnia ciemne tlo, czarna przyciemnia jasne (patrz nizej) */
  --overlay-rgb: 255, 255, 255;
}

:root[data-theme="light"] {
  --bg: #f1f5f9;
  --sidebar-bg: #ffffff;
  --card-bg: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #64748b;
  --accent: #2563eb;
  --accent-text: #ffffff;
  --accent-dim: rgba(37, 99, 235, 0.1);
  --success: #059669;
  --success-dim: rgba(5, 150, 105, 0.1);
  --purple: #7c3aed;
  --purple-dim: rgba(124, 58, 237, 0.1);
  --danger: #dc2626;
  --overlay-rgb: 15, 23, 42;
}

/* Auto = idz za preferencja systemu operacyjnego - dziala TYLKO gdy nikt recznie nie
   wybral Jasny/Ciemny (patrz theme.js - "auto" nie ustawia data-theme wcale) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f1f5f9; --sidebar-bg: #ffffff; --card-bg: #ffffff; --border: #e2e8f0;
    --text: #0f172a; --text-muted: #64748b; --accent: #2563eb; --accent-text: #ffffff;
    --accent-dim: rgba(37, 99, 235, 0.1); --success: #059669; --success-dim: rgba(5, 150, 105, 0.1);
    --purple: #7c3aed; --purple-dim: rgba(124, 58, 237, 0.1); --danger: #dc2626;
    --overlay-rgb: 15, 23, 42;
  }
}

* { box-sizing: border-box; }

html {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  height: 100%;
  overflow: hidden; /* scroll obsluguje tylko main, nie cale okno */
}

.layout {
  height: 100vh;
  display: flex;
}

.sidebar {
  width: 240px;
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 1.25rem 0.75rem;
  flex-shrink: 0;
  transition: width 0.2s ease;
  overflow-y: auto; /* gdyby menu bylo dluzsze niz ekran, przewija sie samo */
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem 1.5rem;
}

.sidebar .logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.1rem;
  min-width: 0;
}

.sidebar .logo { cursor: pointer; }
.sidebar .logo .logo-mark { width: 26px; height: 26px; flex-shrink: 0; fill: var(--accent); }
.sidebar .logo .logo-accent { color: var(--accent); }

/* Tryb zwiniety: pasek ikon bez etykiet */
.sidebar.collapsed { width: 60px; padding: 1.25rem 0.5rem; }
.sidebar.collapsed .sidebar-header { flex-direction: column; gap: 0.6rem; padding: 0 0 1rem; }
.sidebar.collapsed .logo-text { display: none; }
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .nav-group-arrow { display: none; }
.sidebar.collapsed .nav-item,
.sidebar.collapsed .nav-group-header { justify-content: center; padding: 0.6rem 0; gap: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 0.15rem;
}

.nav-item:hover { background: rgba(var(--overlay-rgb),0.03); color: var(--text); }

.nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
}

.nav-group { margin-bottom: 0.15rem; position: relative; }
.nav-group-header { margin-bottom: 0; justify-content: flex-start; }

/* Strzalka rozwijania (chevron SVG) po PRAWEJ stronie naglowka grupy, obraca sie po rozwinieciu */
.nav-group-arrow {
  margin-left: auto;
  display: inline-flex;
  transition: transform 0.2s ease;
}
.nav-group-arrow svg { width: 16px; height: 16px; }
.nav-group-header.expanded .nav-group-arrow { transform: rotate(180deg); }

/* Ikony pozycji menu: liniowe SVG (stroke=currentColor), wiec kolor idzie za stanem pozycji */
.nav-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; }
.nav-icon svg { width: 20px; height: 20px; }
/* Maly ramkowany znacznik zamiast ikony (np. "All" przy Allegro w sekcji Marketplace) */
.nav-tag {
  border: 1px solid currentColor; border-radius: 4px; padding: 0 0.3rem;
  font-size: 0.62rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em;
}
.nav-item.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* Naglowek sekcji "MARKETPLACE" w sidebarze z przyciskiem "+" (dodaj konto) */
.nav-section-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 0.75rem 0.45rem; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.nav-section-add {
  width: 24px; height: 24px; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1;
  background: transparent; color: var(--text-muted); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.nav-section-add:hover { color: var(--accent); border-color: var(--accent); filter: none; }
.sidebar.collapsed .nav-section-label { height: 0; padding: 0; margin: 0.7rem 0; border-top: 1px solid var(--border); }
.sidebar.collapsed .nav-section-label span,
.sidebar.collapsed .nav-section-label button { display: none; }

.nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.nav-submenu.open { max-height: 400px; }

.nav-subitem {
  padding: 0.5rem 0.75rem 0.5rem 2.2rem;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 0.1rem;
}
.nav-subitem:hover { background: rgba(var(--overlay-rgb),0.03); color: var(--text); }
.nav-subitem.active { background: var(--accent-dim); color: var(--accent); }
.nav-subitem.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tryb zwiniety: podmenu grupy renderowane jako wysuwane okienko (flyout) obok ikony,
   zamiast wbudowanego rozwiniecia. Ta sama zawartosc i ten sam mechanizm .open co w trybie
   pelnym - tylko inna prezentacja CSS dla .sidebar.collapsed.
   position:fixed (nie absolute) - .sidebar ma teraz overflow-y:auto (wlasne przewijanie
   menu), co przycinaloby position:absolute wychodzace poza jego 60px szerokosci w trybie
   zwinietym. Fixed nie jest obcinany przez overflow przodkow, ale nie sledzi automatycznie
   pozycji naglowka grupy - dlatego "top" jest ustawiane w JS przy otwarciu (patrz listener
   na .nav-group-header w dashboard.js), "left" moze zostac stala wartoscia bo sidebar stoi
   przy lewej krawiedzi viewportu i nie przewija sie w poziomie. */
.sidebar.collapsed .nav-submenu.open {
  position: fixed;
  left: 64px;
  max-height: none;
  overflow: visible;
  width: 220px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  z-index: 2000;
}
.sidebar.collapsed .nav-subitem { padding-left: 0.75rem; }

/* Naglowek flyoutu z nazwa grupy (np. "Zamowienia") - widoczny WYLACZNIE w trybie flyoutu.
   W trybie pelnym pomijamy go, bo etykieta grupy jest juz widoczna nad rozwinietym podmenu -
   pokazanie jej drugi raz tutaj byloby zbednym duplikatem. Dziala dla kazdej .nav-group,
   nazwa jest wstrzykiwana generycznie przez JS (patrz dashboard.js). */
.nav-submenu-title { display: none; }
.sidebar.collapsed .nav-submenu.open .nav-submenu-title {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  padding: 0 0.75rem 0.6rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* grid, nie flex - srodkowa kolumna (wyszukiwarka globalna) ma byc naprawde wysrodkowana
   wzgledem calego topbaru, niezaleznie od tego, jak szerokie sa lewa/prawa kolumna */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0; /* gorny pasek nigdy sie nie kurczy ani nie przewija */
}
.topbar-left { display: flex; align-items: center; }
.topbar-right { display: flex; align-items: center; gap: 0.6rem; justify-self: end; }
.topbar-icon-btn {
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.topbar-icon-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Wariant "wypelniony akcentem" - toggle sidebara, jedyny przycisk w topbarze z realna
   akcja od razu (help/dzwonek to placeholdery), stad wyrozniony kolorem jak w referencji */
.topbar-icon-btn-accent {
  border-radius: 8px; background: var(--accent); color: var(--accent-text); border: none;
}
.topbar-icon-btn-accent:hover { filter: brightness(1.1); }
.topbar-icon-btn:hover { background: rgba(var(--overlay-rgb), 0.04); }
.topbar-icon-btn:disabled { cursor: not-allowed; opacity: 0.5; }

/* Globalna wyszukiwarka w topbarze (jak w BaseLinkerze) - wysrodkowana, max-width zeby nie
   robila sie absurdalnie szeroka na duzych ekranach. Flyout pod nia (ostatnio szukane +
   "szukaj w") reuzywa .status-flyout, patrz topbar-search.js */
.topbar-search-global { position: relative; width: 100%; max-width: 520px; justify-self: center; }
.topbar-search-input-wrap {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.5rem 0.4rem 0.5rem 1rem;
}
.topbar-search-input-wrap .search-icon { font-size: 0.85rem; color: var(--text-muted); flex-shrink: 0; }
.topbar-search-input-wrap input {
  border: none; background: transparent; padding: 0; width: 100%; min-width: 0;
  color: var(--text); font-size: 0.85rem;
}
.topbar-search-input-wrap input:focus { outline: none; }
#globalSearchSubmit {
  width: 30px; height: 30px; border-radius: 50%; padding: 0; flex-shrink: 0;
  background: rgba(var(--overlay-rgb), 0.06); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.global-search-flyout { left: 0; width: 100%; max-width: 420px; }
.global-search-flyout-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.order-status-item.disabled { color: var(--text-muted); cursor: not-allowed; }
.order-status-item.disabled:hover { background: none; }

/* Budowniczy wielu warunkow ALBO w panelu filtrow (jak "Wybor filtrow" w BaseLinkerze) -
   patrz order-filters.js. Lewa kolumna to zawsze-aktualne podsumowanie, prawa to same
   wiersze warunkow (pole + operator + wartosc + usun). */
.or-filter-builder {
  display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem;
  margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}
.or-filter-summary-item { font-size: 0.82rem; margin-bottom: 0.3rem; }
.or-filter-summary-albo { color: var(--accent); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; margin: 0.3rem 0; }
.or-filter-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.or-filter-row .or-filter-field { flex: 1.3; min-width: 0; }
.or-filter-row .or-filter-operator { flex: 0.8; min-width: 0; }
.or-filter-value-wrap {
  flex: 2; min-width: 0; display: flex; align-items: center; gap: 0.3rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0 0.3rem;
}
.or-filter-value-wrap input {
  border: none; background: transparent; flex: 1; min-width: 0;
  padding: 0.5rem 0.2rem; color: var(--text); font-size: 0.85rem;
}
.or-filter-value-wrap input:focus { outline: none; }
.or-filter-value-clear { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.2rem; font-size: 0.9rem; flex-shrink: 0; }
.or-filter-value-clear:hover { color: var(--text); }
.or-filter-albo-label { color: var(--accent); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; margin: 0.2rem 0 0.5rem; }

main {
  padding: 2rem;
  flex: 1;
  overflow-y: auto; /* TYLKO ten obszar sie przewija */
  min-height: 0; /* wazne dla flex, zeby overflow dzialal poprawnie */
}

h1 { font-size: 1.4rem; margin: 0 0 0.25rem; }
.subtitle { color: var(--text-muted); margin: 0 0 1.5rem; font-size: 0.9rem; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card, .panel-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
}

.stat-card { display: flex; align-items: center; gap: 0.9rem; }

.stat-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.stat-icon.cyan { background: var(--accent-dim); color: var(--accent); }
.stat-icon.green { background: var(--success-dim); color: var(--success); }
.stat-icon.purple { background: var(--purple-dim); color: var(--purple); }

.stat-label { color: var(--text-muted); font-size: 0.8rem; }
.stat-value { font-size: 1.4rem; font-weight: 700; }

.panel-card h2 { font-size: 1rem; margin: 0 0 1rem; }

table { width: 100%; border-collapse: collapse; }
/* vertical-align:top - domyslne "middle" dla <td> powodowalo, ze przy zamowieniu z wieloma
   produktami (wysoki wiersz z powodu kolumny Przedmioty) reszta kolumn (Kwota, Informacje
   dodatkowe, Daty...) "plynela" do srodka wysokosci wiersza, zamiast zostawac przy gornej
   linii - zweryfikowane na zywo, user zglosil to jako niespojne z BaseLinkerem */
th, td { text-align: left; vertical-align: top; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.87rem; }
th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; }
.th-sub {
  display: block;
  text-transform: none;
  font-weight: 400;
  font-size: 0.68rem;
  margin-top: 0.15rem;
}
.th-sub-accent { color: var(--accent); }
.order-meta-line.status-changed-date { color: var(--accent); }

.badge {
  padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
}
.badge.success { background: var(--success-dim); color: var(--success); }
.badge.neutral { background: rgba(var(--overlay-rgb),0.06); color: var(--text-muted); }
.badge.orange { background: #f28c1b; color: #fff; }
button.badge:disabled { cursor: default; opacity: 1; filter: none; }
button.badge:not(:disabled) { cursor: pointer; }

button, .btn {
  padding: 0.55rem 1rem; border: none; border-radius: 8px;
  background: var(--accent); color: var(--accent-text); font-weight: 600; cursor: pointer; font-size: 0.87rem;
}
button:hover, .btn:hover { filter: brightness(1.1); }
button.secondary { background: rgba(var(--overlay-rgb),0.06); color: var(--text); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input, select {
  padding: 0.55rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 0.87rem;
}

.empty { color: var(--text-muted); padding: 2rem; text-align: center; }

.view { display: none; }
.view.active { display: block; }

/* Wspolna "koperta" widoku Zamowien i widoku szczegolow zamowienia - boczna lista
   statusow (.orders-status-panel) zostaje widoczna w OBU, wiec przelacza sie razem z
   nimi (patrz .orders-shell.active w activateView w dashboard.js), nie jako czesc
   pojedynczego .view */
.orders-shell { display: none; gap: 1.5rem; align-items: flex-start; }
.orders-shell.active { display: flex; }
/* position:sticky - panel statusow zostaje "przyklejony" do gornej krawedzi obszaru
   przewijania (main), podczas gdy przewija sie tylko tabela zamowien (orders-shell-content)
   obok niego - dokladnie jak w BaseLinkerze. top:0 liczy sie od wnetrza main (main jest
   scroll-containerem, topbar jest poza nim, wiec nie trzeba odjmowac jego wysokosci).
   min-height rozciaga panel od gory do dolu widoku nawet gdy lista statusow jest krotka. */
.orders-status-panel {
  width: 220px; flex-shrink: 0; padding: 0.75rem;
  position: sticky; top: 0; min-height: calc(100vh - 4rem - 4.5rem);
  max-height: calc(100vh - 4rem - 4.5rem); overflow-y: auto;
}
.orders-shell-content { flex: 1; min-width: 0; }

.key-reveal {
  background: var(--success-dim); border: 1px solid var(--success);
  color: var(--success); padding: 0.75rem; border-radius: 8px;
  font-family: monospace; font-size: 0.85rem; word-break: break-all; margin-top: 0.75rem;
}

.order-status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 0.1rem;
}
.order-status-item:hover { background: rgba(var(--overlay-rgb),0.03); color: var(--text); }
.order-status-item.active { background: var(--accent-dim); color: var(--accent); }

.order-archive-item {
  margin-top: 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.status-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.status-group-header:hover { background: rgba(var(--overlay-rgb),0.03); color: var(--text); }
.status-group-right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.status-group-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s;
}
.status-group-arrow svg { width: 13px; height: 13px; }
.status-group-header.collapsed .status-group-arrow { transform: rotate(-90deg); }
.status-group-items.collapsed { display: none; }
.status-group-items .order-status-item { padding-left: 1.5rem; font-size: 0.8rem; }

/* Przycisk "Dodaj zamowienie" nad boczna lista statusow (jak w BaseLinkerze) - otwiera
   modal reczne tworzenie zamowienia, patrz new-order.js */
.add-order-btn {
  width: 100%; display: flex; align-items: center; gap: 0.6rem;
  background: var(--accent); color: var(--accent-text); border: none; border-radius: 10px;
  padding: 0.65rem 0.9rem; font-weight: 700; font-size: 0.88rem; cursor: pointer; margin-bottom: 0.75rem;
}
.add-order-btn:hover { filter: brightness(1.08); }
.add-order-btn-icon {
  width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0;
}

/* Wiersz produktu w modalu "Dodaj zamowienie" - nazwa/ilosc/cena/usun, patrz new-order.js */
.new-order-item-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.new-order-item-row .new-order-item-name { flex: 1; min-width: 0; }
.new-order-item-row .new-order-item-qty { width: 70px; flex-shrink: 0; }
.new-order-item-row .new-order-item-price { width: 100px; flex-shrink: 0; }

.order-item-line {
  font-size: 0.82rem;
  padding: 0.1rem 0;
}

.order-row-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 0.2rem;
}
.order-thumb {
  width: 34px; height: 34px; border-radius: 6px;
  object-fit: cover; background: rgba(var(--overlay-rgb),0.05); flex-shrink: 0;
}
.order-meta-line {
  color: var(--text-muted);
  font-size: 0.76rem;
}
.amount-underline {
  text-decoration: underline;
  text-decoration-style: dotted;
  color: var(--accent);
  font-weight: 600;
}

.buyer-login-copy {
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: pointer;
}
.buyer-login-copy:hover { color: var(--accent); }
.buyer-login-copy.copied { color: var(--success); text-decoration: none; }
.badge.purple { background: var(--purple-dim); color: var(--purple); }
.flag { margin-right: 0.2rem; }

.order-number-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
}
.order-number-link:hover { text-decoration: underline; }

/* Kwadrat, nie kolo (zmienione na prosbe uzytkownika, dopasowanie do BaseLinkera -
   te same kwadraty co .status-square przy naglowku listy, patrz updateOrdersListHeader) */
.status-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  margin-right: 0.4rem;
}

/* Kolorowy kwadrat przed naglowkiem listy zamowien (jak w BaseLinkerze) - kolor
   aktualnie wybranego statusu z bocznej listy, patrz updateOrdersListHeader
   w orders-view.js. Domyslny szary (--text-muted), gdy wybrano "Wszystkie". */
.status-square { display: inline-block; width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; }

/* Znaczki statusu zamowienia w tabeli (formularz dostawy, oplacone, za pobraniem,
   przesylka) - patrz extractOrderFlags w orders.js */
.order-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px;
  font-size: 0.7rem; font-weight: 700; margin-right: 0.2rem;
}
.flag-t { background: #059669; color: #fff; }
.flag-dollar { background: #059669; color: #fff; }
.flag-n, .flag-dollar-off { background: rgba(var(--overlay-rgb),0.08); color: var(--text-muted); }
.flag-dollar-cod { background: #f59e0b; color: #000; }
.flag-invoice { background: #7c3aed; color: #fff; }
.flag-parcel { background: #2563eb; color: #fff; }
.flag-label { background: #2563eb; color: #fff; }
.flag-label-off { background: rgba(var(--overlay-rgb),0.08); color: var(--text-muted); }
.order-flag { cursor: pointer; }
.order-flag svg { width: 12px; height: 12px; }

/* Modal z opisem ikon (klik na dowolna ikone w tabeli zamowien - patrz orders-view.js) */
.icon-legend-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.icon-legend-desc { color: var(--text-muted); font-size: 0.85rem; margin-left: 0.3rem; }

.orders-filter-panel {
  display: none;
  margin-bottom: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
}
.orders-filter-panel.open { display: block; }
.orders-filter-panel input, .orders-filter-panel select { width: 100%; }
.filter-label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.orders-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.toolbar-icon-btn {
  background: rgba(var(--overlay-rgb),0.06);
  color: var(--text-muted);
  border: none;
  border-radius: 8px;
  width: 34px; height: 34px;
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.toolbar-icon-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.toolbar-icon-btn:disabled { cursor: not-allowed; opacity: 0.35; }
.toolbar-icon-btn:not(:disabled):hover { background: rgba(var(--overlay-rgb),0.12); color: var(--text); filter: none; }
.toolbar-icon-btn.active { background: var(--accent); color: var(--accent-text); }

.toolbar-flyout-anchor { position: relative; display: inline-block; }
.status-flyout {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.4rem;
  width: 240px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  z-index: 2000;
}
.status-flyout.open { display: block; }

/* Menu uzytkownika w topbarze (avatar/nazwa -> flyout Moje konto/Wyloguj/motyw) - reuzywa
   .status-flyout, tylko przypiete do prawej krawedzi przycisku (left:auto/right:0), zeby
   nie wystawalo poza ekran przy wąskim viewport - patrz userMenuFlyout w dashboard.html */
.user-menu-btn {
  display: flex; align-items: center; gap: 0.5rem;
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: 0.3rem 0.7rem 0.3rem 0.3rem; color: var(--text); font-size: 0.85rem; font-weight: 600;
  cursor: pointer;
}
.user-menu-btn:hover { background: rgba(var(--overlay-rgb), 0.04); }
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
}
.user-menu-flyout { left: auto; right: 0; width: 240px; padding: 0.4rem; }
.user-menu-item {
  padding: 0.5rem 0.6rem; border-radius: 8px; font-size: 0.85rem; cursor: pointer; color: var(--text);
}
.user-menu-item:hover { background: rgba(var(--overlay-rgb), 0.06); }
.user-menu-item.disabled { color: var(--text-muted); cursor: not-allowed; }
.user-menu-item.disabled:hover { background: none; }
.user-menu-divider { height: 1px; background: var(--border); margin: 0.4rem 0.2rem; }
.user-menu-theme-label { padding: 0.3rem 0.6rem; font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; }
.user-menu-theme-pills { display: flex; gap: 0.4rem; padding: 0.2rem 0.6rem 0.4rem; }
.theme-pill {
  flex: 1; padding: 0.4rem 0.3rem; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.theme-pill:hover { color: var(--text); }
.theme-pill.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.status-current-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  width: 100%; max-width: 300px;
  background: rgba(var(--overlay-rgb),0.03); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.55rem 0.7rem; color: var(--text); font-size: 0.88rem; cursor: pointer;
}
.status-current-btn:hover { background: rgba(var(--overlay-rgb),0.06); }

/* Przyciski Paragon/Faktura (jeszcze niewdrozone - "Wkrotce") stylizowane na wzor
   BaseLinkera: maly, kapitalikowy "pill" ksztalt; Faktura jako split-button (glowna
   akcja + strzalka rozwijania podmenu) plus osobny kwadratowy przycisk Pro Forma z
   ikona drukarki */
.btn-pill { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.03em; padding: 0.45rem 0.9rem; }
.btn-split { display: inline-flex; align-items: center; gap: 0.35rem; }
.btn-icon-only { width: 34px; padding: 0.45rem; display: flex; align-items: center; justify-content: center; }
.btn-icon-only svg { width: 14px; height: 14px; }

/* Wyszukiwarka w flyoucie zmiany statusu w szczegolach zamowienia (jak w BaseLinkerze) -
   filtruje pozycje na zywo (patrz order-detail-view.js), bez mozliwosci zwijania grup
   (stad brak strzalki i ukryty cursor:pointer naglowka - inaczej filtr i zwijanie
   kolidowalyby ze soba) */
#statusDetailFlyout { max-height: 380px; }
.status-flyout-search {
  width: 100%; margin-bottom: 0.5rem; padding: 0.5rem 0.6rem;
  background: rgba(var(--overlay-rgb),0.04); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 0.85rem;
}
#statusDetailFlyout .status-group-arrow { display: none; }
#statusDetailFlyout .status-group-header { cursor: default; }
#statusDetailFlyout .status-group-header:hover { background: none; color: var(--text-muted); }

.orders-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

textarea {
  padding: 0.55rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 0.87rem;
  font-family: inherit; resize: vertical;
}

/* Szczegoly zamowienia - widok osadzony w SPA (view-order-detail w dashboard.html),
   zeby wejscie w zamowienie NIE zamykalo bocznego panelu (patrz dashboard.js) */
.back-link { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; display: inline-block; margin-bottom: 1rem; cursor: pointer; }
.back-link:hover { color: var(--text); }
/* .detail-grid (para "Informacje o zamowieniu" / "Status zamowienia") rozciaga obie karty
   do jednakowej wysokosci (align-items:stretch, domyslne dla grid). .detail-grid-3
   (Adres/Faktura/Odbior) ma inaczej ksztaltowana trescia miedzy kolumnami, wiec tam
   zostaje align-items:start - kazda karta ma wysokosc swojej trecsi. */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 1.5rem; margin-top: 1.5rem; }
.detail-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; gap: 1.5rem; }
/* Etykieta i wartosc w JEDNEJ linii (np. "Klient (login): felix8024"), nie jedna nad
   drugą - inaczej karta zajmuje 2x wiecej wysokosci niz potrzeba, a szerokosc karty
   (ktora teraz jest szeroka, bo #view-order-detail nie ma juz sztywnego max-width)
   zostaje niewykorzystana */
.field-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.2rem; }
.field-row label {
  flex-shrink: 0; width: 190px; color: var(--text-muted); font-size: 0.85rem;
  margin-bottom: 0;
}
.field-row label::after { content: ':'; }
/* Linie oddzielajace grupy pol w kafelku "Informacje o zamowieniu" (Zaplacono / Klient+
   dane kontaktowe / dane wysylki+platnosci / pola dodatkowe+uwagi) - border-top na
   PIERWSZYM wierszu kazdej nowej grupy, wiec linia wypada miedzy grupami, nie w nich */
.field-group-divider { border-top: 1px solid var(--border); padding-top: 0.6rem; margin-top: 0.4rem; }

/* Male "pill" przyciski-skroty w edycji "Zaplacono" (patrz order-detail-view.js) - klik
   wypelnia input pelna kwota zamowienia (zielony) albo zerem (czerwony), do zapisania
   klikniciem w fajke */
.btn-preset {
  padding: 0.3rem 0.55rem; border-radius: 6px; font-size: 0.78rem; cursor: pointer;
  background: transparent;
}
.btn-preset-success { border: 1px solid var(--success); color: var(--success); }
.btn-preset-danger { border: 1px solid var(--danger); color: var(--danger); }
.btn-preset:hover { filter: brightness(1.3); }
.field-row input[type="text"],
.field-row textarea { flex: 1; min-width: 0; }
.field-row textarea { min-height: 2.2rem; }
.field-row input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0; }

/* Kafelki "zablokowane do edycji" (Informacje o zamowieniu / Adres dostawy / Dane do
   faktury) - domyslnie pola sa readonly i wygladaja jak zwykly tekst, klik w olowek
   (.icon-btn-edit) odblokowuje je do edycji (patrz order-detail-view.js). Padding:0 (nie
   tylko padding-left) - bazowe "input { padding:0.55rem }" dodawalo ~9px u gory i u dolu
   KAZDEGO pola, co przy kilkunastu polach w kafelku sumowalo sie do bardzo duzych odstepow
   (zweryfikowane na zywo - user zglosil to jako "tresci sa zbyt daleko od siebie") */
.field-row input:read-only,
.field-row textarea:read-only,
.field-row select:disabled {
  border-color: transparent;
  background: transparent;
  padding: 0;
  cursor: default;
}
/* select:disabled nie respektuje padding:0 tak samo jak input/textarea (natywny "chrome"
   przegladarki) - appearance:none zdejmuje strzalke/tlo, zeby wygladal identycznie jak
   zablokowany input, bez wizualnej roznicy (user zglosil to na zywo) */
.field-row select:disabled {
  -webkit-appearance: none;
  appearance: none;
  color: var(--text);
  opacity: 1;
}
.icon-btn-edit {
  background: rgba(var(--overlay-rgb),0.06);
  border: none; border-radius: 8px; padding: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer;
  flex-shrink: 0;
}
/* flex-shrink:0 - inaczej svg sie splaszcza do 0px szerokosci wewnatrz flex-kontenera
   przycisku, gdyby jego content-box kiedys znowu byl wezszy niz suma paddingu (patrz
   powyzej padding:0 - to byl dokladnie ten sam blad, zweryfikowany na zywo) */
.icon-btn-edit svg { width: 15px; height: 15px; flex-shrink: 0; }
.icon-btn-edit:hover { background: rgba(var(--overlay-rgb),0.12); color: var(--text); }
.icon-btn-edit.active { background: var(--accent-dim); color: var(--accent); }
.tile-actions { display: flex; }
.order-thumb-lg { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: rgba(var(--overlay-rgb),0.05); }
.status-pill {
  border: none; border-radius: 999px; padding: 0.35rem 0.8rem;
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.status-pill.active { outline: 2px solid var(--text); }
#statusSelect { width: 220px; }
#notesInput { width: 100%; min-height: 80px; }

/* Lista statusow w Ustawieniach */
.status-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.3rem;
  border-bottom: 1px solid var(--border);
}
.status-row:last-child { border-bottom: none; }
.status-row-name { flex: 1; font-size: 0.87rem; }
.status-row-actions { display: flex; gap: 0.4rem; }

.drag-handle { cursor: grab; color: var(--text-muted); font-size: 1rem; user-select: none; }
.status-row.dragging { opacity: 0.5; }
.status-row.drag-over-top { border-top: 2px solid var(--accent); }
.status-row.drag-over-bottom { border-bottom: 2px solid var(--accent); }

/* Modal (dodawanie/edycja statusu) */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem;
}
.modal-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  width: 640px; max-width: 100%; max-height: 88vh; overflow-y: auto;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 1.1rem; }
.modal-close {
  background: none; color: var(--text-muted); font-size: 1.4rem;
  padding: 0; width: 32px; height: 32px; line-height: 1;
}
.modal-close:hover { color: var(--text); filter: none; }
.modal-body { padding: 1.5rem; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 0.6rem;
  padding: 1.25rem 1.5rem; border-top: 1px solid var(--border);
}

.modal-field { display: flex; gap: 1rem; margin-bottom: 1.4rem; }
.modal-field label {
  width: 150px; flex-shrink: 0; text-align: right;
  color: var(--text-muted); font-size: 0.85rem; padding-top: 0.55rem;
}
.modal-field-input { flex: 1; min-width: 0; }
.modal-field-input input,
.modal-field-input select,
.modal-field-input textarea { width: 100%; }
.field-help {
  color: var(--text-muted); font-size: 0.76rem; line-height: 1.4;
  margin: 0.4rem 0 0;
}

.color-input-row { display: flex; align-items: center; gap: 0.6rem; }
.color-input-row input[type="color"] {
  width: 44px; height: 38px; padding: 2px; cursor: pointer; flex-shrink: 0;
}
.color-input-row input[type="text"] { flex: 1; }

/* ---------- Katalog produktow / oferty (products-view.js, offers-view.js) ---------- */
.catalog-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
.catalog-main { flex: 1; min-width: 0; }
.catalog-searchbar { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.9rem; }
.catalog-searchbar input[type="text"] { flex: 1; min-width: 0; }
.btn-success { background: #16a34a; color: #fff; border-radius: 999px; padding: 0.55rem 1.2rem; }
.catalog-progress {
  background: var(--accent-dim); color: var(--accent); border-radius: 8px;
  padding: 0.5rem 0.8rem; font-size: 0.82rem; margin-bottom: 0.75rem;
}
.catalog-note {
  background: var(--accent-dim); border-left: 3px solid var(--accent); border-radius: 6px;
  padding: 0.6rem 0.8rem; font-size: 0.82rem; margin-bottom: 1rem; line-height: 1.45;
}
.product-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: rgba(var(--overlay-rgb),0.05); display: block; }
.integration-badge {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 6px; font-size: 0.72rem;
  font-weight: 700; text-decoration: none; margin: 0 0.25rem 0.25rem 0; color: #fff; background: #ea580c;
}
.integration-badge.inactive { background: #64748b; }
.integration-badge.ended, .integration-badge.error { background: #b91c1c; }
.integration-badge.unknown, .integration-badge.draft { background: #94a3b8; color: #0f172a; }
.status-pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.status-pill.active { background: var(--success-dim); color: var(--success); }
.status-pill.inactive, .status-pill.unknown, .status-pill.draft { background: rgba(var(--overlay-rgb),0.08); color: var(--text-muted); }
.status-pill.ended, .status-pill.error { background: rgba(248,113,113,0.15); color: var(--danger); }
.row-menu-btn { background: none; color: var(--text-muted); padding: 0.2rem 0.5rem; font-size: 1.1rem; }
.star-toggle { cursor: pointer; color: var(--text-muted); user-select: none; font-size: 1rem; }
.star-toggle.on { color: #f59e0b; }
.variants-toggle { cursor: pointer; color: var(--accent); font-size: 0.8rem; }
.variants-list { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; display: none; }
.variants-list.open { display: block; }
.category-item .cat-actions { display: none; gap: 0.2rem; margin-left: 0.3rem; }
.category-item:hover .cat-actions { display: inline-flex; }
.cat-actions span { padding: 0 0.25rem; opacity: 0.8; }
.cat-actions span:hover { opacity: 1; color: var(--accent); }
.edit-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
.edit-row input { min-width: 0; }
.wizard-results { max-height: 180px; overflow-y: auto; margin-top: 0.4rem; }
.wizard-results .order-status-item { cursor: pointer; }
.mini-table { width: 100%; font-size: 0.8rem; }
.mini-table td, .mini-table th { padding: 0.25rem 0.4rem; }

/* ---------- Integracje (integrations-view.js) ---------- */
/* Pomaranczowy kwadrat z litera "a" - neutralny znacznik Allegro (bez uzywania ich logotypu) */
.allegro-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 8px; background: #ff5a00; color: #fff;
  font-weight: 800; font-size: 1rem; text-transform: lowercase;
}
.badge.danger { background: rgba(248,113,113,0.15); color: var(--danger); }
.badge.warning { background: rgba(245,158,11,0.15); color: #f59e0b; }

/* Panel ustawien konta Allegro (zakladki jak w BaseLinkerze) - integrations-view.js */
.settings-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.settings-tab {
  background: none; color: var(--text-muted); border: 1px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0; padding: 0.7rem 1.1rem; font-size: 0.85rem; font-weight: 500;
}
.settings-tab:hover:not(:disabled) { color: var(--text); filter: none; }
.settings-tab.active { color: var(--accent); border-color: var(--border); background: var(--card-bg); margin-bottom: -1px; box-shadow: inset 0 -2px 0 var(--accent); }
.settings-tab:disabled { opacity: 0.4; cursor: not-allowed; }
.settings-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem; align-items: start; }
.settings-box { border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; background: rgba(var(--overlay-rgb),0.02); }
.btn-outline-success {
  background: transparent; color: var(--success); border: 1.5px solid var(--success);
  border-radius: 999px; padding: 0.6rem 1.3rem; font-weight: 600;
}
.btn-outline-success:hover { background: var(--success-dim); filter: none; }

/* ---------- Analityka / Statystyki (analytics-view.js) ---------- */
.analytics-filters { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; align-items: center; }
.an-span-2 { grid-column: span 2; }
/* "Pigulka" z etykieta i selectem w srodku, jak filtry w BaseLinkerze */
.an-select {
  display: flex; align-items: center; gap: 0.5rem; margin: 0;
  border: 1px solid var(--border); border-radius: 999px; padding: 0 1rem; background: var(--card-bg);
}
.an-select span { font-size: 0.82rem; color: var(--text); white-space: nowrap; font-weight: 500; }
.an-select select { flex: 1; min-width: 0; border: none; background: transparent; padding: 0.7rem 0; font-size: 0.82rem; color: var(--text); }
.an-select select:focus { outline: none; }
.an-arrows { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.an-arrows button { flex: 1; background: transparent; color: var(--text); border-radius: 0; padding: 0.6rem 0.9rem; font-size: 1.1rem; }
.an-arrows button + button { border-left: 1px solid var(--border); }
.an-arrows button:disabled { opacity: 0.35; cursor: not-allowed; }
.an-show-btn { border-radius: 999px; padding: 0.75rem 1rem; }
.analytics-custom { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; }
.analytics-custom input { max-width: 160px; }
.an-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; }
.analytics-chart { position: relative; height: 400px; }
.analytics-cards { display: grid; grid-template-columns: 1fr 1.6fr 2.4fr; gap: 1.25rem; margin-top: 1.25rem; }
.an-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; }
.an-card-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.an-card-icon svg { width: 26px; height: 26px; }
.an-big { font-size: 3.2rem; font-weight: 300; line-height: 1; }
.an-big small { font-size: 1rem; font-weight: 400; color: var(--text-muted); }
.an-summary { width: 100%; border: 1px solid var(--border); }
.an-summary td { padding: 0.65rem 1rem; font-size: 0.9rem; }
.an-summary td:last-child { text-align: right; }
.an-pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 4px; color: #fff; font-size: 0.78rem; font-weight: 600; }
.an-pill-green { background: #15803d; }
.an-pill-orange { background: #ea7c1a; }
.an-pill-gray { background: #7c8aa5; }
@media (max-width: 1100px) { .analytics-filters { grid-template-columns: 1fr 1fr; } .an-span-2 { grid-column: span 2; } .analytics-cards { grid-template-columns: 1fr; } }

/* Analityka - zestawienia (zrodla, wysylka/platnosc, klienci, produkty) */
.an-bd-title { font-size: 0.95rem; margin: 1.25rem 0 0.5rem; }
.an-bd-title:first-child { margin-top: 0; }
.an-breakdown { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.an-breakdown th { text-align: left; font-weight: 600; color: var(--text-muted); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.an-breakdown td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); }
.an-breakdown .num { text-align: right; white-space: nowrap; }
.an-breakdown .an-rank { color: var(--text-muted); width: 2rem; }
.an-breakdown .an-bd-label { word-break: break-word; }
.an-share { width: 11rem; }
.an-share-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.an-share-bar span { display: block; height: 100%; background: var(--accent); }
.an-share small { color: var(--text-muted); font-size: 0.72rem; }

/* Rozwijane listy (natywne <select>) w motywie aplikacji - bez tego przegladarka rysuje
   biale tlo listy z jasnym tekstem z ciemnego motywu */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } }
select option, select optgroup { background: var(--card-bg); color: var(--text); }
select option:disabled { color: var(--text-muted); }
select option:checked { background: var(--accent-dim); }

/* Produkty -> Ustawienia: wewnetrzne menu boczne (Katalogi, Magazyny, ...) */
.pset-layout { display: grid; grid-template-columns: 230px 1fr; gap: 1.5rem; align-items: start; }
.pset-menu { display: flex; flex-direction: column; gap: 2px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem; }
.pset-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left; background: transparent;
  color: var(--text); border: none; border-radius: 999px; padding: 0.55rem 0.9rem; font-size: 0.88rem; font-weight: 500;
}
.pset-item:hover:not(:disabled) { background: rgba(var(--overlay-rgb), 0.05); filter: none; }
.pset-item.active { background: var(--accent-dim); color: var(--accent); }
.pset-item.disabled, .pset-item:disabled { color: var(--text-muted); opacity: 0.6; cursor: not-allowed; }
.pset-icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.pset-icon svg { width: 18px; height: 18px; }
.pset-chev { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; }
.pset-panel { display: none; }
.pset-panel.active { display: block; }
@media (max-width: 800px) { .pset-layout { grid-template-columns: 1fr; } }

.pset-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.pset-content td .muted { color: var(--text-muted); }
.pset-content td button + button { margin-left: 0.4rem; }
.pset-content td button.secondary, #warehousesBody button.secondary { padding: 0.35rem 0.75rem; font-size: 0.78rem; }
.pset-multi { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.4rem; max-height: 200px; overflow-y: auto; }
.pset-multi label { display: flex; gap: 0.5rem; align-items: center; margin: 0; font-size: 0.85rem; }
.pset-chip { display: inline-block; padding: 0.15rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: #fff; background: var(--chip); }
.pset-badge { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.68rem; background: var(--accent-dim); color: var(--accent); font-weight: 600; }

button.secondary.danger { color: var(--danger); }

/* Katalogi: baner informacyjny, uchwyt przeciagania, gwiazdka domyslnego, menu wiersza */
.pset-banner { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.pset-banner svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted); margin-top: 2px; }
.pset-banner p { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--text-muted); }
.pset-grip { color: var(--text-muted); cursor: grab; width: 1%; user-select: none; letter-spacing: -2px; }
tr.dragging { opacity: 0.45; }
.pset-star { width: 1%; }
.pset-star-btn { background: none; padding: 0; width: 22px; height: 22px; color: var(--text-muted); display: inline-flex; }
.pset-star-btn svg { width: 18px; height: 18px; }
.pset-star-btn.on { color: #f59e0b; cursor: default; }
.pset-star-btn:hover:not(.on) { color: #f59e0b; filter: none; }
.pset-menu-wrap { position: relative; display: inline-block; }
.pset-dots { width: 32px; height: 32px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--border); color: var(--text); font-size: 1.1rem; line-height: 1; }
.pset-dots:hover { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.pset-pop { position: absolute; right: 0; top: 36px; z-index: 30; min-width: 130px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); padding: 0.3rem; text-align: left; }
.pset-pop button { display: block; width: 100%; text-align: left; background: transparent; color: var(--text); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.85rem; }
.pset-pop button:hover { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.pset-pop button.danger { color: var(--danger); }

/* Baner: uklad kolumnowy (tresc + przelacznik "zwin opis"), listy, zwiniecie */
.pset-banner { display: block; }
.pset-banner-row { display: flex; gap: 0.9rem; align-items: flex-start; }
.pset-banner-body { flex: 1; min-width: 0; font-size: 0.85rem; line-height: 1.55; color: var(--text-muted); }
.pset-banner-body p { margin: 0 0 0.6rem; }
.pset-banner-body p:last-child { margin-bottom: 0; }
.pset-banner-body ul { margin: 0 0 0.6rem; padding-left: 1.4rem; }
.pset-banner-body em { font-style: normal; color: var(--accent); }
.pset-banner.collapsed .pset-banner-body { display: none; }
.pset-banner.collapsed .pset-banner-row { display: none; }
.pset-banner-foot { text-align: center; margin-top: 0.6rem; }
.pset-banner.collapsed .pset-banner-foot { margin-top: 0; }
.pset-banner-toggle { background: var(--accent-dim); color: var(--accent); border-radius: 999px; padding: 0.35rem 1.1rem; font-size: 0.8rem; font-weight: 600; }
/* Magazyny: nazwa w "pigulce" i chipy synchronizacji */
.pset-namechip { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 6px; background: rgba(var(--overlay-rgb), 0.06); font-size: 0.85rem; }
.pset-sync-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pset-sync { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.75rem; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pset-sync svg { width: 12px; height: 12px; flex-shrink: 0; }
.pset-sync-in { background: var(--accent-dim); color: var(--accent); }
.pset-sync-off { background: rgba(var(--overlay-rgb), 0.07); color: var(--text-muted); }

/* ---------- Lista produktow (BaseLinker-like) ---------- */
.pl-card { padding: 0; }
.pl-topbar { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pl-topbar-right { margin-left: auto; display: flex; gap: 0.6rem; align-items: center; }
.pl-field { position: relative; display: block; border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.6rem 0.3rem; margin: 0; background: transparent; }
.pl-field > span { position: absolute; top: -0.55em; left: 0.55rem; padding: 0 0.25rem; background: var(--card-bg); font-size: 0.72rem; color: var(--text-muted); line-height: 1.1; }
.pl-field input, .pl-field select { width: 100%; border: none; background: transparent; padding: 0.25rem 0.1rem; font-size: 0.85rem; color: var(--text); min-height: 1.6rem; }
.pl-field input:focus, .pl-field select:focus { outline: none; }
.pl-field:focus-within { border-color: var(--accent); }
.pl-sel { min-width: 150px; }
.pl-disabled { opacity: 0.45; cursor: not-allowed; }
.pl-disabled input { cursor: not-allowed; }
.pl-range { display: flex; gap: 0; padding: 0; }
.pl-range > span { z-index: 1; }
.pl-range label { position: relative; flex: 1; margin: 0; padding: 0.5rem 0.6rem 0.3rem; display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--text-muted); }
.pl-range label + label { border-left: 1px solid var(--border); }
.pl-range input { padding: 0.25rem 0; }
.pl-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; border-radius: 999px; background: transparent; color: var(--text); border: 1px solid var(--border); font-size: 0.82rem; font-weight: 500; }
.pl-pill svg { width: 16px; height: 16px; }
.pl-pill:hover:not(:disabled) { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.pl-pill:disabled { opacity: 0.5; cursor: not-allowed; }
.pl-pill.open, #plFilterToggle.open { border-color: var(--accent); color: var(--accent); }
/* Strzalka rozwijania - jedna, spojna ikonka SVG (zamiast znaku "⌄", ktory rozjezdzal sie
   rozmiarem/wyrownaniem miedzy przegladarkami/fontami) uzywana we WSZYSTKICH przyciskach
   rozwijajacych panel/menu (Pobierz/Operacje/Warianty, Filtrowanie, Zapisane filtry...) */
.pl-caret { display: inline-flex; align-items: center; margin-left: 0.3rem; transition: transform 0.15s; }
/* Specyficzniej niz .pl-pill svg / .pl-tbtn svg (te same przyciski, ktore osadzaja strzalke
   obok wlasnej ikonki) - inaczej kolejnosc regul w arkuszu decydowalaby, ktory rozmiar wygrywa,
   i strzalki znow byłyby nierowne miedzy przyciskami */
.pl-pill .pl-caret svg, .pl-tbtn .pl-caret svg, .pl-caret svg { width: 13px; height: 13px; }
.open .pl-caret { transform: rotate(180deg); }
.pl-pill.pl-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.pl-pill.pl-primary:hover { filter: brightness(1.08); background: var(--accent); }
.pl-plus { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; line-height: 1; font-size: 0.95rem; }
.pl-pill.pl-blue { background: #2563eb; color: #fff; border-color: #2563eb; font-weight: 600; }
.pl-pill.pl-blue:hover { filter: brightness(1.1); background: #2563eb; }
.pl-icon-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.pl-icon-btn svg { width: 17px; height: 17px; }
.pl-icon-btn:hover { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.pl-filters { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); }
.pl-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.85rem 0.6rem; }
.pl-filter-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.1rem; flex-wrap: wrap; }
.pl-toolbar { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pl-toolbar-left, .pl-toolbar-right { display: flex; align-items: center; gap: 0.4rem; }
.pl-toolbar-right { margin-left: auto; gap: 0.9rem; }
.pl-tbtn { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.4rem 0.7rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; display: inline-flex; align-items: center; }
.pl-tbtn svg { width: 15px; height: 15px; }
.pl-tbtn:hover:not(:disabled) { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.pl-tbtn:disabled { opacity: 0.45; cursor: not-allowed; }
.pl-sort { padding: 0.35rem 0.5rem; font-size: 0.78rem; margin-left: 0.4rem; }
.pl-ops { position: relative; }
.pl-ops-menu { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 250px; margin-top: 4px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); padding: 0.3rem; }
.pl-ops-menu button { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; background: transparent; color: var(--text); padding: 0.5rem 0.75rem; font-size: 0.85rem; border-radius: 6px; }
.pl-ops-menu button:hover { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.pl-ops-menu button.danger { color: var(--danger); }
.pl-ops-menu button:disabled { opacity: 0.45; cursor: not-allowed; }
.pl-ops-menu button:disabled:hover { background: transparent; }
.pl-ops-menu button.active { color: var(--accent); font-weight: 600; background: var(--accent-dim); }
.pl-menu-ico { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; }
.pl-menu-ico svg { width: 100%; height: 100%; }
.pl-ops-title { padding: 0.4rem 0.75rem 0.2rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.pl-ops-title:not(:first-child) { margin-top: 0.4rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }

/* Warianty pogrupowane pod produktem-rodzicem (tryb "Grupuj warianty" w toolbarze Listy produktow) */
.pl-variant-toggle { background: transparent; border: none; padding: 0; cursor: pointer; color: var(--text-muted); display: inline-flex; margin-right: 0.3rem; transition: transform 0.15s; }
.pl-variant-toggle svg { width: 13px; height: 13px; }
.pl-variant-toggle.open { transform: rotate(90deg); }
tr.pl-variant-row td { background: rgba(var(--overlay-rgb), 0.03); font-size: 0.85rem; color: var(--text-muted); }
tr.pl-variant-row .pl-meta { margin: 0; }
tr.pl-variant-row .pl-thumb img, tr.pl-variant-row .pl-noimg { width: 32px; height: 32px; }

/* Pigulka "Warianty: N" na wierszu produktu-rodzica (jak w Base) - otwiera/zamyka pod-wiersze
   wariantow ponizej, patrz plVariantRow/data-pl-variant-toggle w product-list-view.js */
.pl-variants-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.72rem; font-weight: 600; cursor: pointer;
  vertical-align: middle;
}
.pl-variants-pill svg { width: 12px; height: 12px; transition: transform 0.15s; }
.pl-variants-pill.open svg { transform: rotate(180deg); }
.pl-variants-pill:hover { filter: brightness(1.1); }

/* Numer porzadkowy wariantu w rozwinietym wierszu (jak w Base: mala niebieska kropka 1,2,3...) */
.pl-variant-seq {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent-dim); color: var(--accent);
  font-size: 0.65rem; font-weight: 700;
}
.pl-pager { display: flex; align-items: center; gap: 0.3rem; margin: 0 auto; }
.pl-pager button { min-width: 34px; height: 34px; padding: 0 0.5rem; background: transparent; color: var(--text); border-radius: 6px; font-size: 0.85rem; }
.pl-pager button.on { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.pl-pager button:disabled { opacity: 0.35; cursor: default; }
.pl-pager button:hover:not(:disabled):not(.on) { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.pl-dots { color: var(--text-muted); padding: 0 0.2rem; }
.pl-total { color: var(--text-muted); font-size: 0.8rem; }
.pl-perpage { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--text); }
.pl-perpage select { padding: 0.35rem 0.5rem; font-size: 0.82rem; }
.pl-table { width: 100%; }
.pl-table th { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.02em; padding: 0.9rem 0.6rem; }
.pl-table td { padding: 0.55rem 0.6rem; vertical-align: middle; }
.pl-table .pl-num { text-align: right; white-space: nowrap; }
.pl-thumb-h svg { width: 18px; height: 18px; }
.pl-check { white-space: nowrap; width: 1%; padding-left: 1rem !important; }
.pl-check input { width: auto; vertical-align: middle; margin-right: 0.4rem; }
.pl-star { background: none; padding: 0; width: 20px; height: 20px; color: var(--text-muted); vertical-align: middle; display: inline-flex; }
.pl-star svg { width: 16px; height: 16px; }
.pl-star.on { color: #22a55b; }
.pl-star:hover { color: #22a55b; filter: none; }
.pl-thumb { width: 1%; }
.pl-thumb img, .pl-noimg { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--border); border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; }
.pl-noimg { background: rgba(var(--overlay-rgb), 0.06); color: var(--text-muted); }
.pl-noimg svg { width: 26px; height: 26px; }
.pl-name { color: var(--text); font-size: 0.88rem; text-decoration: none; }
.pl-name:hover { color: var(--accent); }
.pl-meta { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.15rem; }
.pl-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 4px; font-size: 0.75rem; background: var(--accent-dim); color: var(--accent); font-weight: 600; border: none; cursor: pointer; font-family: inherit; }
.pl-chip:hover { filter: brightness(1.1); }
.pl-chip b { background: var(--accent); color: var(--accent-text); border-radius: 999px; padding: 0 0.4rem; font-size: 0.68rem; }
.pl-stock-edit { cursor: pointer; }
.pl-stock-edit [data-pl-stock-val] { display: inline-block; padding: 0.3rem 0.6rem; border: 1px solid var(--field-border, var(--border)); border-radius: 6px; background: var(--field-bg, transparent); }
.pl-stock-edit:hover [data-pl-stock-val] { border-color: var(--accent); }
.pl-stock-box { display: inline-flex; align-items: flex-end; gap: 0.3rem; padding: 0.25rem 0.4rem 0.3rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--card-bg); position: relative; }
.pl-stock-box span { position: absolute; top: -0.55rem; left: 0.4rem; font-size: 0.65rem; padding: 0 0.25rem; background: var(--card-bg); color: var(--accent); }
.pl-stock-box input { width: 64px; padding: 0.25rem 0.35rem; font-size: 0.85rem; }
.pl-stock-box button { width: 28px; height: 28px; padding: 0; border-radius: 6px; background: transparent; border: 1px solid var(--border); color: var(--text); font-size: 0.85rem; }
.pl-chip-wrap { position: relative; display: inline-block; }
.pl-chip-pop { position: absolute; left: 0; top: 100%; margin-top: 4px; z-index: 30; min-width: 260px; max-width: 340px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); padding: 0.5rem; text-align: left; }
.pl-chip-pop-row { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); }
.pl-chip-pop-row:last-of-type { border-bottom: none; }
.pl-chip-pop-title { font-size: 0.82rem; font-weight: 600; }
.pl-chip-pop-title a { color: var(--text); text-decoration: none; }
.pl-chip-pop-title a:hover { color: var(--accent); }
.pl-chip-pop-meta { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.15rem; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.pl-chip-pop-full { display: block; width: 100%; text-align: left; background: transparent; color: var(--accent); border: none; padding: 0.5rem 0.5rem 0.2rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.pl-chip-pop-full:hover { text-decoration: underline; filter: none; }
.pl-empty { flex-direction: column; align-items: center; text-align: center; padding: 3.5rem 1rem 4rem; color: var(--text-muted); }
.pl-empty-art { width: 150px; height: 125px; color: #e0736b; margin-bottom: 1rem; }
.pl-empty h3 { margin: 0 0 0.5rem; color: var(--text); font-size: 1.25rem; }
.pl-empty p { margin: 0; max-width: 520px; font-size: 0.85rem; line-height: 1.5; }

/* Modal katalogu: pigulki (tags), pole statyczne, separator, notatka ID w stopce */
.modal-card.pset-wide .modal-field label { width: 200px; }
.pset-tags, .pset-static { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; min-height: 40px; border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.5rem; }
.pset-static { background: rgba(var(--overlay-rgb), 0.03); }
.pset-tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 4px; background: rgba(var(--overlay-rgb), 0.08); font-size: 0.82rem; }
.pset-tag button { background: none; padding: 0; width: 16px; height: 16px; line-height: 1; border-radius: 50%; color: var(--text-muted); font-size: 0.95rem; }
.pset-tag button:hover { color: var(--danger); filter: none; }
.pset-tag-add { width: auto !important; border: none !important; background: transparent !important; color: var(--accent); font-size: 0.82rem; padding: 0.15rem 0.2rem !important; cursor: pointer; }
.pset-tag-empty { color: var(--text-muted); font-size: 0.82rem; }
.pset-divider { border: none; border-top: 1px solid var(--border); margin: 0.4rem 0 1.4rem; }
.pset-footnote { margin-right: auto; color: var(--text-muted); opacity: 0.7; font-size: 0.8rem; align-self: center; }
.modal-field-input select:disabled, .modal-field-input input:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Karta produktu (pelnoekranowa) ---------- */
.pc-overlay { position: fixed; inset: 0; z-index: 1100; background: var(--bg); flex-direction: column; color: var(--text); }
.pc-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; background: var(--card-bg); border-bottom: 1px solid var(--border); }
.pc-title { font-size: 0.95rem; font-weight: 500; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-nav { display: flex; gap: 0.4rem; }
.pc-nav button { background: transparent; color: var(--text); width: 34px; height: 34px; padding: 0; font-size: 1.2rem; border-radius: 6px; }
.pc-nav button:disabled { opacity: 0.3; cursor: default; }
.pc-nav button:hover:not(:disabled) { background: rgba(var(--overlay-rgb), 0.08); filter: none; }
.pc-tabs { display: flex; justify-content: center; gap: 0.25rem; padding: 0 1.5rem; background: var(--card-bg); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pc-tabs button { background: transparent; color: var(--text-muted); padding: 1rem 1.6rem; font-size: 0.92rem; border-radius: 0; border-bottom: 2px solid transparent; }
.pc-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.pc-tabs button:disabled { opacity: 0.45; cursor: not-allowed; }
.pc-tabs button:hover:not(:disabled):not(.active) { color: var(--text); filter: none; }
.pc-badge { display: inline-block; background: rgba(var(--overlay-rgb), 0.1); color: var(--text-muted); border-radius: 4px; padding: 0 0.45rem; margin-left: 0.4rem; font-size: 0.75rem; }
.pc-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.pc-content { max-width: 1150px; margin: 0 auto; padding-bottom: 2rem; }
.pc-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.5rem; background: var(--card-bg); border-top: 1px solid var(--border); }
.pc-footer-left, .pc-footer-right { display: flex; gap: 0.6rem; }
.pc-footer-left { margin-left: max(0px, calc((100vw - 1150px) / 2 - 1.5rem)); }
.pc-footer-right { margin-right: max(0px, calc((100vw - 1150px) / 2 - 1.5rem)); }
.pc-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.2rem; border-radius: 999px; background: transparent; color: var(--text); border: 1px solid var(--border); font-size: 0.85rem; font-weight: 500; }
.pc-btn:hover { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.pc-btn.pc-soft { background: var(--accent-dim); color: var(--accent); border-color: transparent; }
.pc-btn.pc-go { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.pc-btn.pc-go:hover { background: var(--accent); filter: brightness(1.08); }
.pc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem 1.2rem; }
.pc-f { min-width: 0; }
.pc-f.s2 { grid-column: span 2; } .pc-f.s3 { grid-column: span 3; } .pc-f.s4 { grid-column: span 4; } .pc-f.s6 { grid-column: span 6; } .pc-f.s12 { grid-column: span 12; }
.pc-f > label { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--text-muted); margin: 0 0 0.3rem; }
.pc-f input[type="text"], .pc-f input[type="date"], .pc-f select { width: 100%; padding: 0.6rem 0.75rem; font-size: 0.88rem; }
.pc-f input:disabled, .pc-f select:disabled { background: rgba(var(--overlay-rgb), 0.05); color: var(--text-muted); cursor: not-allowed; }
.pc-suffix { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--card-bg); }
.pc-suffix input { flex: 1; min-width: 0; border: none !important; border-radius: 0 !important; background: transparent; padding: 0.6rem 0.75rem; }
.pc-suffix input:disabled { background: rgba(var(--overlay-rgb), 0.05) !important; }
.pc-suffix > span, .pc-suffix-btn { display: flex; align-items: center; padding: 0 0.8rem; font-size: 0.8rem; color: var(--text-muted); background: rgba(var(--overlay-rgb), 0.04); border-left: 1px solid var(--border); white-space: nowrap; }
.pc-suffix-btn { border-radius: 0; color: var(--text); }
.pc-vat-btns { padding: 0 !important; gap: 0; }
.pc-vat-btns button { background: transparent; color: var(--text); border-radius: 0; padding: 0 0.9rem; border-left: 1px solid var(--border); font-size: 0.85rem; }
.pc-vat-btns button.on { background: #2563eb; color: #fff; }
.pc-hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.pc-h2 { font-size: 1.25rem; font-weight: 600; margin: 2.2rem 0 1rem; }
.pc-h3 { font-size: 1rem; margin: 1.6rem 0 0.6rem; }
.pc-hint { color: var(--text-muted); font-size: 0.85rem; }
.pc-starrow { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.pc-starbtn { width: 44px; height: 36px; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.pc-starbtn svg { width: 18px; height: 18px; }
.pc-starbtn.on { color: #22a55b; }
.pc-extra-ean { display: flex; gap: 0.3rem; margin-top: 0.4rem; }
.pc-extra-ean input { flex: 1; }
.pc-extra-ean button { background: transparent; color: var(--text-muted); width: 30px; padding: 0; }
.pc-wide-btn { width: 100%; padding: 0.6rem; background: rgba(var(--overlay-rgb), 0.05); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; }
.pc-wide-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pc-check { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.5rem 0; font-size: 0.88rem; color: var(--text); }
.pc-check input { width: auto; }
.pc-change { background: none; color: var(--accent); font-size: 0.78rem; padding: 0; }
.pc-change:hover { filter: none; text-decoration: underline; }
.pc-table { width: 100%; border-collapse: collapse; }
.pc-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; color: var(--text); padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--border); }
.pc-table td { padding: 0.5rem; vertical-align: middle; }
.pc-table td input[type="text"] { width: 100%; padding: 0.55rem 0.7rem; font-size: 0.85rem; }
.pc-table td:first-child { white-space: nowrap; font-size: 0.85rem; }
.pc-table td a { color: var(--accent); text-decoration: none; }
.pc-table td a:hover { text-decoration: underline; }
.pc-empty { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 2rem 1rem; text-align: center; }
.pc-empty strong { font-size: 1.15rem; }
.pc-empty span { color: var(--text-muted); font-size: 0.85rem; }
.pc-lang { margin-bottom: 1rem; }
.pc-lang label { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.pc-lang-btn { background: #2563eb; color: #fff; padding: 0.5rem 1.1rem; border-radius: 6px; font-weight: 600; }
.pc-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; }
.pc-card-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.pc-card-head h2 { margin: 0; font-size: 1.05rem; }
.pc-card-body { padding: 1.25rem; }
.pc-rowhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.pc-rowhead span { display: flex; gap: 0.4rem; }
.pc-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.4rem 0.8rem; font-size: 0.78rem; }
.pc-ghost:hover:not(:disabled) { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.pc-ghost:disabled { opacity: 0.45; cursor: not-allowed; }
.pc-card textarea { width: 100%; padding: 0.75rem; font-size: 0.88rem; resize: vertical; font-family: inherit; }
.pc-drop { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px dashed var(--text-muted); border-radius: 999px; padding: 0.6rem 1.25rem; margin-bottom: 1.25rem; font-size: 0.82rem; color: var(--text-muted); flex-wrap: wrap; }
.pc-drop button { background: none; color: var(--text-muted); padding: 0; font-size: 0.85rem; }
.pc-drop button:hover { color: var(--accent); filter: none; }
.pc-drop b { color: var(--text); }
.pc-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.pc-slot { position: relative; aspect-ratio: 1; border: 2px solid var(--border); border-radius: 8px; background: rgba(var(--overlay-rgb), 0.04); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pc-slot.filled { background: #fff; }
.pc-slot img { width: 100%; height: 100%; object-fit: contain; }
.pc-slot-n { position: absolute; top: 8px; left: 8px; z-index: 2; min-width: 26px; height: 26px; padding: 0 0.4rem; border: 2px solid var(--border); border-radius: 999px; background: var(--card-bg); display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; color: var(--text-muted); }
.pc-slot-add { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.6rem; background: transparent; color: var(--text); font-size: 0.85rem; font-weight: 600; padding: 0.6rem; justify-content: flex-start; border-radius: 0; }
.pc-slot-add b { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 4px; font-size: 1.1rem; }
.pc-slot-add:hover { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.pc-slot-del { position: absolute; top: 6px; right: 6px; z-index: 2; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1rem; line-height: 1; }
.pc-url-row { display: flex; gap: 0.5rem; margin-top: 1rem; }
.pc-url-row input { flex: 1; padding: 0.55rem 0.75rem; font-size: 0.85rem; }
.pc-toast { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); background: #16a34a; color: #fff; padding: 0.6rem 1.2rem; border-radius: 999px; font-size: 0.85rem; z-index: 5; }
@media (max-width: 900px) { .pc-f.s2, .pc-f.s3, .pc-f.s4, .pc-f.s6 { grid-column: span 12; } }

/* Karta produktu -> Informacje: sekcje zwijane */
.pc-acc { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.8rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.pc-acc-head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.25rem; cursor: pointer; }
.pc-acc-head h2 { margin: 0; font-size: 1.05rem; }
.pc-acc-btn { width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text); display: inline-flex; align-items: center; justify-content: center; pointer-events: none; }
.pc-acc-btn svg { width: 16px; height: 16px; transition: transform 0.15s; }
.pc-acc.open .pc-acc-btn svg { transform: rotate(180deg); }
.pc-acc-body { display: none; padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.pc-acc.open .pc-acc-body { display: block; }
.pc-acc textarea { width: 100%; padding: 0.75rem; font-size: 0.88rem; resize: vertical; font-family: inherit; }
.pc-thumbs { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pc-thumbs img { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 6px; }

/* ---------- Okna: Powiazania / Dostawy / Historia ---------- */
.pl-pop { min-width: 190px; }
.pl-pop button { display: flex; align-items: center; }
.pl-pop button svg { width: 17px; height: 17px; margin-right: 0.8rem; flex-shrink: 0; }
.modal-card.pd-card { width: 900px; max-width: 96vw; }
.pd-card .modal-header h2 { font-size: 1.05rem; line-height: 1.35; padding-right: 1rem; }
.pd-card .pc-acc { margin-bottom: 1.25rem; }
.pd-ico { display: inline-flex; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 6px; align-items: center; justify-content: center; }
.pd-ico svg { width: 15px; height: 15px; }
.pd-panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 1.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.pd-panel-head { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); }
.pd-panel-head h2 { margin: 0; font-size: 1.05rem; }
.pd-panel .pc-table th, .pd-panel .pc-table td { padding-left: 1.25rem; }
.pd-tabs { display: flex; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.pd-tabs button { background: transparent; color: var(--text-muted); padding: 0.9rem 1.6rem; font-size: 0.9rem; border-radius: 0; border-bottom: 2px solid transparent; }
.pd-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.pd-tabs button:hover:not(.active) { color: var(--text); filter: none; }
.pd-log td:first-child { white-space: nowrap; }
.pd-hrow { cursor: pointer; }
.pd-hrow:hover { background: rgba(var(--overlay-rgb), 0.04); }
.pd-chev { display: inline-block; width: 14px; transition: transform 0.15s; color: var(--text-muted); }
.pd-chev.open { transform: rotate(90deg); }
.pd-detail td { background: rgba(var(--overlay-rgb), 0.04); font-size: 0.82rem; line-height: 1.7; padding: 0.6rem 1.25rem 0.8rem 2.6rem !important; }
.pd-old { color: var(--text-muted); text-decoration: line-through; }
.pd-new { color: var(--success); }
.pd-pager { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; padding: 0.9rem 1.25rem; font-size: 0.85rem; }
.pd-pager button { min-width: 30px; height: 30px; padding: 0; background: transparent; color: var(--text); border-radius: 4px; }
.pd-pager button.on { background: var(--accent-dim); color: var(--accent); }

/* ---------- Pola formularzy: ciemne tlo jak strona + subtelna niebieskawa ramka ---------- */
:root { --field-bg: #0a0e1a; --field-border: #2b3652; }
:root[data-theme="light"] { --field-bg: #ffffff; --field-border: #cbd5e1; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { --field-bg: #ffffff; --field-border: #cbd5e1; } }

input, select, textarea { background: var(--field-bg); border-color: var(--field-border); border-radius: 10px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }

/* Pola zlozone (pole + jednostka, tagi, pola z etykieta na ramce) */
.pc-suffix, .pset-tags, .pset-static, .pl-field { background: var(--field-bg); border-color: var(--field-border); border-radius: 10px; }
.pc-suffix > span, .pc-suffix-btn { background: rgba(var(--overlay-rgb), 0.05); border-left-color: var(--field-border); }
.pc-range label + label, .pl-range label + label { border-left-color: var(--field-border); }
/* etykieta lezaca na ramce: gorna polowa na tle karty, dolna na tle pola - bez "dziury" w ramce */
.pl-field > span { background: linear-gradient(to bottom, var(--card-bg) 50%, var(--field-bg) 50%); }
.pl-field:focus-within, .pc-suffix:focus-within { border-color: var(--accent); }
.pc-suffix input, .pl-field input, .pl-field select { background: transparent; }
.pc-table td input[type="text"], .pc-url-row input, .pc-extra-ean input { background: var(--field-bg); }
input[type="checkbox"], input[type="radio"] { background: initial; border-radius: initial; accent-color: var(--accent); }

/* Media: menu "Dodaj" przy miejscu na zdjecie (Z urzadzenia / Z linku) */
.pc-slot-add { color: var(--accent); }
.pc-slot-add b { border-color: var(--accent); color: var(--accent); }
.pc-slot-add span { flex: 1; text-align: center; }
.pc-slot-pop { position: absolute; left: 8px; right: 8px; bottom: 56px; z-index: 4; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); padding: 0.35rem 0; text-align: center; }
.pc-slot-pop button { display: block; width: 100%; background: transparent; color: var(--text); padding: 0.5rem; font-size: 0.85rem; border-radius: 0; }
.pc-slot-pop button:hover { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.pc-img-menu { position: fixed; z-index: 4000; width: 250px; bottom: auto; text-align: left; }
.pc-img-menu button { text-align: left; padding: 0.5rem 0.75rem; }
.pc-img-menu button:disabled { opacity: 0.45; cursor: not-allowed; }
.pc-slot-ai { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 0.1rem 0.45rem; border-radius: 4px; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.7rem; font-weight: 700; }
.pc-slot-busy { position: absolute; inset: 0; z-index: 3; background: rgba(255,255,255,0.75); color: #111; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; }
.pc-lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.pc-lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; background: #fff; border-radius: 6px; }
.pc-slot-pop hr { border: none; border-top: 1px solid var(--border); margin: 0.15rem 0.5rem; }
.pc-slot-link { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.5rem; }
.pc-slot-link input { width: 100%; padding: 0.4rem 0.5rem; font-size: 0.78rem; }
.pc-slot-link button { background: var(--accent); color: var(--accent-text); border-radius: 6px; padding: 0.4rem; font-weight: 600; }

/* Import/Eksport: lista ostatnich importow */
.imp-title { margin: 0; font-size: 1.1rem; font-weight: 600; }
.imp-status { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.imp-status.ok { background: var(--success-dim); color: var(--success); }
.imp-status.err { background: rgba(248, 113, 113, 0.15); color: var(--danger); cursor: help; }

/* Zamowienia: menu zaznaczania (checkbox + szewron) i gwiazdka */
.toolbar-split-btn { display: inline-flex; align-items: center; gap: 0.35rem; height: 36px; padding: 0 0.7rem; background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; }
.toolbar-split-btn:hover { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.toolbar-split-btn.accent { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.toolbar-split-btn .tb-ico { width: 17px; height: 17px; }
.toolbar-split-btn .tb-chev { width: 14px; height: 14px; transition: transform 0.15s; }
.toolbar-split-btn.open .tb-chev { transform: rotate(180deg); }
.select-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 290px; padding: 0.9rem 0 0.6rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.select-menu.open { display: block; }
.select-menu-title { padding: 0.4rem 1.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); }
.select-menu-title:not(:first-child) { margin-top: 0.6rem; }
.select-menu button { display: block; width: 100%; text-align: left; background: transparent; color: var(--text); padding: 0.6rem 1.4rem; font-size: 0.9rem; border-radius: 0; }
.select-menu button:hover { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
#starMenu { min-width: 250px; padding: 0.4rem 0; }
/* Licznik "zaznaczono/razem" WEWNATRZ przycisku zaznaczania (jak w Base) - zamiast osobnego
   tekstu gdzies dalej w toolbarze. Widoczny tylko gdy jest co pokazac (total > 0) - patrz
   plUpdateSelectedCount/updateSelectedCount/rtUpdateSelectedCount w -view.js */
.select-count-badge { margin-left: 0.35rem; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.select-count-badge:empty { display: none; }
.order-num-cell { display: flex; align-items: center; gap: 0.4rem; }
.order-star { background: none; padding: 0; width: 20px; height: 20px; color: var(--text-muted); display: inline-flex; flex-shrink: 0; }
.order-star svg { width: 16px; height: 16px; }
.order-star.on { color: #22a55b; }
.order-star:hover { color: #22a55b; filter: none; }

/* Paleta gwiazdek zamowien (pusta + 5 kolorow) */
.star-palette { display: flex; gap: 0.5rem; padding: 0.6rem 1.2rem 0.9rem; }
.star-swatch { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); }
.star-swatch svg { width: 20px; height: 20px; }
.star-swatch:hover { background: rgba(var(--overlay-rgb), 0.08); filter: none; }
#starMenu.star-menu { min-width: 0; padding: 0.9rem 0 0; }
.star-palette-pop { display: none; position: fixed; z-index: 60; padding: 0.6rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.star-palette-pop.open { display: flex; }

/* Panel "Filtrowanie zamowien": siatka 6 kolumn z polami z etykieta na ramce (jak w BaseLinkerze) */
.orders-filter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.85rem 0.6rem; }
@media (max-width: 1400px) { .orders-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .orders-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.orders-filter-panel .pl-field input, .orders-filter-panel .pl-field select { border: none; background: transparent; width: 100%; padding: 0.25rem 0.1rem; }
.orders-filter-panel .pl-range input { width: auto; flex: 1; min-width: 0; }
.pl-date { padding-right: 2.2rem; }
.pl-date .pl-cal { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-40%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.pl-date input.flatpickr-input[type="hidden"] { display: none; }
.pl-stars { display: flex; align-items: center; }
.pl-stars .star-swatch { width: 30px; height: 30px; }
.pl-stars .star-swatch svg { width: 16px; height: 16px; }
.star-swatch.active { border-color: var(--accent); background: var(--accent-dim); }
.orders-filter-grid .pl-stars { grid-column: span 2; }
.pl-stars .star-palette { gap: 0.3rem; flex-wrap: nowrap; }

/* Marketplace -> Allegro -> Zarzadzanie ofertami */
.ao-tabs { display: flex; gap: 0.25rem; margin: -0.5rem 0 1.25rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ao-tabs button { background: transparent; color: var(--text-muted); padding: 0.9rem 1.4rem; font-size: 0.9rem; border-radius: 0; border-bottom: 2px solid transparent; }
.ao-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.ao-tabs button:disabled { opacity: 0.5; cursor: not-allowed; }
.ao-status-lines { margin: 0.9rem 0 0.4rem; font-size: 0.85rem; display: grid; gap: 0.4rem; }
.ao-status-lines em { font-style: normal; color: var(--text-muted); }
.ao-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); margin-right: 0.6rem; }
.ao-refresh { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.8rem; flex-wrap: wrap; }
.ao-status-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 1.25rem 0 0; }
.ao-status-tabs button { background: var(--card-bg); color: var(--text-muted); padding: 0.9rem 1.5rem; font-size: 0.92rem; border-radius: 8px 8px 0 0; border: 1px solid var(--border); border-bottom: none; display: inline-flex; align-items: center; gap: 0.6rem; }
.ao-status-tabs button.active { color: var(--text); border-bottom: 2px solid var(--card-bg); margin-bottom: -1px; z-index: 1; font-weight: 600; }
.ao-count { display: inline-block; min-width: 26px; padding: 0.05rem 0.55rem; border: 1.5px solid var(--text-muted); border-radius: 999px; font-size: 0.78rem; text-align: center; color: var(--text); }
.ao-count.ok { border-color: #22a55b; }
.ao-count.warn { border-color: #f28c1b; }
.ao-count.err { border-color: #f0523f; }
.ao-count.info { border-color: #eab308; }
.ao-ops-btn { display: inline-flex; align-items: center; gap: 0.4rem; height: 36px; padding: 0 1rem; background: #2563eb; color: #fff; border-radius: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.ao-ops-btn svg { width: 14px; height: 14px; }
.ao-ops-btn:hover { background: #2563eb; filter: brightness(1.1); }
.ao-pager { gap: 0.4rem; }
.ao-pager input { width: 70px; padding: 0.35rem 0.5rem; }
.ao-pager button { min-width: 34px; height: 34px; padding: 0; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.ao-pager button:disabled { opacity: 0.35; cursor: default; }
.ao-table td { vertical-align: middle; }
.ao-title a { color: var(--accent); text-decoration: none; }
.ao-sub { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.15rem; }
.ao-sub a { color: var(--accent); text-decoration: none; }
.ao-qty { font-size: 0.85rem; line-height: 1.5; white-space: nowrap; }
.ao-qty small { color: var(--text-muted); display: block; }
.ao-price { display: inline-block; padding: 0.35rem 0.7rem; border: 1px solid var(--field-border, var(--border)); border-radius: 6px; background: var(--field-bg, transparent); white-space: nowrap; font-size: 0.88rem; }
.ao-status { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.ao-status.active { background: var(--success-dim); color: var(--success); }
.ao-status.ended { background: rgba(var(--overlay-rgb), 0.1); color: var(--text-muted); }
.ao-status.unknown { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.ao-status.error { background: rgba(248, 113, 113, 0.15); color: var(--danger); }
.ao-time { font-size: 0.82rem; white-space: nowrap; line-height: 1.6; }
.ao-time small { display: block; color: var(--text-muted); }

/* Menu zrodel importu ("Importuj teraz") */
.imp-src-menu { right: 0; left: auto; min-width: 290px; padding: 0.5rem 0; }
.imp-src-menu button { display: flex; align-items: center; gap: 0.9rem; padding: 0.65rem 1.2rem; }
.imp-src-menu button svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); }
.imp-src-menu button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Zarzadzanie ofertami: powiazanie oferty z produktem (skad brac stan docelowy) */
.ao-link-row { margin-top: 0.35rem; }
.ao-link-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(var(--overlay-rgb), 0.06); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.74rem; }
.ao-link-btn:hover { background: rgba(var(--overlay-rgb), 0.1); filter: none; color: var(--text); }
.ao-link-btn.warn { background: rgba(234, 179, 8, 0.15); color: #eab308; border-color: transparent; font-weight: 600; }
.ao-link-btn.warn:hover { filter: brightness(1.1); }
.ao-link-plain { color: var(--text-muted); font-size: 0.78rem; }
.ao-copy-chip { display: inline; background: none; border: none; padding: 0; font-size: 0.78rem; color: var(--accent); }
.ao-copy-chip:hover { filter: none; text-decoration: underline; }
.ao-copy-chip.copied { color: var(--success); }
#aoLinkSearch { width: 100%; padding: 0.6rem 0.75rem; font-size: 0.88rem; margin-bottom: 0.9rem; }
.ao-link-results { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; }
.ao-link-row-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.6rem; border-radius: 8px; cursor: pointer; }
.ao-link-row-item:hover { background: rgba(var(--overlay-rgb), 0.06); }
.ao-link-row-item img, .ao-link-row-item .pl-noimg { width: 36px; height: 36px; object-fit: contain; border: 1px solid var(--border); border-radius: 4px; background: #fff; flex-shrink: 0; }
.ao-link-row-text { min-width: 0; font-size: 0.85rem; }
.ao-link-row-text .ao-sub { font-size: 0.75rem; }

/* OPERACJE (Zarzadzanie ofertami): dwie kolumny z naglowkami sekcji, jak w BaseLinkerze */
.ao-ops-menu { gap: 0 1.5rem; min-width: 620px; padding: 0.8rem 1rem; }
.ao-ops-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ao-ops-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); padding: 0.5rem 0.75rem 0.35rem; }
.ao-ops-col .ao-ops-title:first-child { padding-top: 0.1rem; }
.ao-ops-menu button.danger { color: var(--danger); }

/* Powiazywanie produktow (strona z listy OPERACJE -> Powiaz z produktami z katalogu) */
.ao-link-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.ao-link-status { margin: 0 0 0.75rem 1.25rem; }
.ao-link-status.err { color: var(--danger); }
.ao-link-status.ok { color: var(--success); }
.ao-link-table td, .ao-link-table th { vertical-align: middle; }
.ao-link-table .ao-title { font-size: 0.85rem; }
.ao-link-table input[type="number"] { width: 100%; max-width: 220px; padding: 0.5rem 0.65rem; }
.ao-link-row-err { color: var(--danger); font-size: 0.75rem; margin-top: 0.25rem; }
.ao-link-bulkset { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 1.1rem 1.25rem 0.5rem; border-top: 1px solid var(--border); margin-top: 0.5rem; }
.ao-link-bulkset .pl-field { min-width: 140px; }
.ao-link-bulkset .pl-field input { width: 100%; }
.ao-link-pop { position: relative; }
.ao-link-suggest-pop { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 2px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); max-height: 260px; overflow-y: auto; }
.pl-pill.on { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }

/* Okno "Szczegoly oferty" (public/offer-details-modal.js) */
.od-card { width: 920px; max-width: 96vw; min-height: 480px; }
.od-tabs { margin-bottom: 1.25rem; }
.od-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.od-table th { text-align: left; font-weight: 700; width: 210px; padding: 0.3rem 0.5rem 0.3rem 0; vertical-align: top; white-space: nowrap; }
.od-table td { padding: 0.3rem 0; }
.od-table a { color: var(--accent); text-decoration: none; }
.od-table a:hover { text-decoration: underline; }
.od-gap td { height: 0.9rem; }
.od-muted { color: var(--text-muted); }
.od-warn { color: #eab308; font-weight: 600; }
.od-ok { color: var(--success); font-weight: 700; }
.od-err { color: var(--danger); font-weight: 700; }
.od-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.od-note { margin-top: 0.75rem; font-style: italic; }
.od-log td { vertical-align: top; }

.ao-price-edit { cursor: pointer; }
.ao-price-edit:hover .ao-price { border-color: var(--accent); }
.ao-price-box input { width: 92px; }

/* Okno "Przebieg operacji" (public/offer-operations.js) */
.oo-card { width: 940px; max-width: 96vw; }
.oo-head { display: flex; gap: 2rem; align-items: flex-start; margin-bottom: 1.25rem; }
.oo-desc { flex: 1; white-space: pre-line; font-size: 0.9rem; }
.oo-prog { flex: 1.3; font-size: 0.85rem; }
.oo-prog p { margin: 0.7rem 0 0; }
.oo-bar { height: 8px; border-radius: 4px; background: rgba(var(--overlay-rgb), 0.12); overflow: hidden; margin-bottom: 1rem; }
.oo-bar div { height: 100%; transition: width 0.3s; }
.oo-pct { display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.5rem; border-radius: 4px; background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: 0.75rem; }
.oo-table td { padding: 0.55rem 0.6rem; }
.oo-table a { color: var(--accent); text-decoration: none; }

/* Edytor opisu (public/product-description.js) */
.pd-active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.pd-item.pd-text { border: 1px solid var(--field-border, var(--border)); border-radius: 8px; background: var(--field-bg, transparent); overflow: hidden; }
.pd-item.pd-text:focus-within { border-color: var(--accent); }
.pd-toolbar { display: flex; align-items: center; gap: 0.15rem; padding: 0.3rem 0.5rem; background: rgba(var(--overlay-rgb), 0.06); border-top: 1px solid var(--border); flex-wrap: wrap; }
.pd-toolbar button { min-width: 30px; height: 30px; padding: 0 0.5rem; font-size: 0.85rem; background: transparent; border: none; color: var(--text); border-radius: 6px; }
.pd-toolbar button:hover { background: rgba(var(--overlay-rgb), 0.12); filter: none; }
.pd-sep { width: 1px; height: 22px; background: var(--border); margin: 0 0.35rem; }
.pd-fmt { position: relative; display: inline-block; }
.pd-fmt-menu { position: absolute; bottom: 34px; left: 0; z-index: 20; flex-direction: column; min-width: 130px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); padding: 0.25rem; }
.pd-fmt-menu button { text-align: left; width: 100%; }
.pc-wysiwyg { min-height: 110px; padding: 0.7rem 0.9rem; font-size: 0.9rem; line-height: 1.5; outline: none; background: transparent; }
.pd-scroll { height: 150px; overflow-y: auto; resize: vertical; }
.pc-wysiwyg-main { height: 280px; }
.pc-wysiwyg h1 { font-size: 1.3rem; margin: 0.3rem 0; } .pc-wysiwyg h2 { font-size: 1.1rem; margin: 0.3rem 0; } .pc-wysiwyg p { margin: 0.35rem 0; }
.pd-src { display: block; width: 100%; height: 150px; border: none; border-radius: 0; resize: vertical; font-family: monospace; font-size: 0.8rem; padding: 0.7rem 0.9rem; background: transparent; }
.pd-bar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.pd-bar select { width: auto; max-width: 260px; padding: 0.4rem 0.6rem; font-size: 0.82rem; }
.pd-sec { border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.8rem 0.8rem; margin-top: 0.8rem; }
.pd-sec-head { display: flex; align-items: center; margin-bottom: 0.6rem; }
.pd-layouts { display: inline-flex; background: rgba(var(--overlay-rgb), 0.06); border-radius: 6px; overflow: hidden; }
.pd-layouts button { width: 44px; height: 32px; padding: 0; background: transparent; border: none; color: var(--text); border-radius: 0; }
.pd-layouts button svg, .pd-sec-btns button svg { width: 18px; height: 18px; }
.pd-layouts button:hover { background: rgba(var(--overlay-rgb), 0.12); filter: none; }
.pd-layouts button.on { background: rgba(var(--overlay-rgb), 0.16); box-shadow: inset 0 -2px 0 var(--accent); color: var(--accent); }
.pd-sec-btns { margin-left: auto; display: flex; gap: 0.2rem; }
.pd-sec-btns button { width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--text-muted); border-radius: 6px; }
.pd-sec-btns button:hover { background: rgba(var(--overlay-rgb), 0.1); color: var(--text); filter: none; }
.pd-sec-items { display: grid; gap: 0.8rem; }
.pd-sec-items.pd-cols-2 { grid-template-columns: 1fr 1fr; }
.pd-img { height: 130px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.4rem; overflow: hidden; }
.pd-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-item input[type="text"] { width: 100%; margin-bottom: 0.4rem; font-size: 0.82rem; }

.pd-src-main { height: 280px; }

.pd-grip { width: 24px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: grab; }
.pd-grip svg { width: 16px; height: 16px; }

/* Pusty obraz sekcji jak w BaseLinkerze: szara ikona bez ramki, pod nia wybor obrazka */
.pd-img:has(.pd-noimg) { border: none; background: transparent; }
.pd-noimg { width: 56px; height: 56px; color: #c4c7cf; }
.pd-item select[data-pc-sec-img] { display: block; width: 100%; max-width: 200px; margin: 0 auto; }

/* Cenniki wysylek */
.sr-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-bottom: 1rem; }
.sr-actions .pl-primary { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }
.sr-detail td { background: rgba(var(--overlay-rgb), 0.04); }
.sr-rates { width: 100%; font-size: 0.85rem; }
.sr-rates th, .sr-rates td { text-align: left; padding: 0.3rem 0.6rem; }
.sr-account { min-width: 180px; }

/* Kategorie Allegro */
.ac-cols { display: grid; grid-template-columns: minmax(300px, 480px) 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .ac-cols { grid-template-columns: 1fr; } }
.ac-card { margin-bottom: 1rem; }
.ac-search { display: flex; }
.ac-search input { flex: 1; border-radius: 6px 0 0 6px; }
.ac-search button { border-radius: 0 6px 6px 0; }
.ac-result { margin-top: 0.8rem; font-size: 0.9rem; }
.ac-right { background: var(--card-bg, transparent); border-radius: 8px; overflow: hidden; }
.ac-title { margin: 0 0 1rem; font-size: 1.05rem; }
.ac-path { border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.7rem; color: var(--accent); font-size: 0.9rem; margin-bottom: 1rem; word-break: break-word; }
.ac-list { display: flex; flex-direction: column; gap: 0.3rem; }
.ac-folder { display: flex; align-items: center; gap: 0.4rem; background: transparent; border: none; color: var(--accent); padding: 0.15rem 0; font-size: 0.92rem; cursor: pointer; text-align: left; }
.ac-folder svg { flex: none; }
.ac-list .ac-indent { padding-left: 1.4rem; }
.ac-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0 0.15rem 1.4rem; font-size: 0.92rem; cursor: pointer; }
.ac-all { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; font-size: 0.92rem; cursor: pointer; }
.ac-del { background: transparent; border: none; color: var(--text-muted); cursor: pointer; }

/* Przycisk odswiezania z lista polaczonych kont (jak w BaseLinkerze) */
.sr-menu { position: relative; }
.sr-menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 0.4rem 0; z-index: 50; }
.sr-menu-list button { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 0.55rem 1.1rem; font-size: 0.9rem; border-radius: 0; }
.sr-menu-list button:hover { background: rgba(var(--overlay-rgb), 0.08); filter: none; }
.sr-menu-list .field-help { padding: 0.5rem 1.1rem; margin: 0; }

/* Szablony ofert */
.ot-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 4px; background: #2b7bd6; color: #fff; font-size: 0.72rem; font-weight: 600; margin-right: 0.4rem; white-space: nowrap; }
.ot-badge-html { background: #7a8699; }
.ot-code { font-family: monospace; font-size: 0.82rem; color: var(--text-muted); max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-act { text-align: center; }
.ot-editor { position: fixed; inset: 0; z-index: 900; background: var(--bg, #f3f4f6); overflow-y: auto; }
.ot-page { max-width: 1400px; margin: 0 auto; padding: 1rem 1.6rem 3rem; }
.ot-backlink { background: transparent; border: none; color: var(--accent); padding: 0.3rem 0; margin-bottom: 0.6rem; cursor: pointer; font-size: 0.9rem; }
.ot-form h2 { margin: 0 0 1.4rem; font-size: 1.15rem; }
.ot-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.2rem; align-items: center; margin-bottom: 0.9rem; }
.ot-row > label { text-align: right; font-size: 0.82rem; color: var(--text-muted); }
.ot-row > input, .ot-row > select { max-width: 520px; }
.ot-cols { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-bottom: 1.4rem; }
.ot-cols > div[data-ot-main] { min-width: 0; }
.ot-file { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--field-border, var(--border)); border-radius: 6px; padding: 0.55rem 0.7rem; background: var(--field-bg, transparent); }
.ot-file-name { flex: 1; color: var(--text-muted); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-file-name.set { color: var(--text); }
.ot-file-btn { padding: 0.2rem 0.7rem; font-size: 0.72rem; background: rgba(var(--overlay-rgb), 0.06); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font-weight: 600; }
.ot-file-clear { background: transparent; border: none; color: var(--text-muted); padding: 0 0.3rem; cursor: pointer; }
.ot-save { background: #2b7bd6; color: #fff; border: none; border-radius: 999px; padding: 0.6rem 1.6rem; font-weight: 600; }
.ot-html { width: 100%; min-height: 420px; font-family: monospace; font-size: 0.85rem; }
.ot-tags { background: rgba(var(--overlay-rgb), 0.04); border-radius: 8px; padding: 1rem 1.1rem; font-size: 0.88rem; }
.ot-tags ul { list-style: none; margin: 0.9rem 0 0; padding: 0 0 0 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ot-prevcard { margin-top: 1.4rem; background: var(--card-bg, #fff); color: var(--text); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.ot-prevhead { background: #3d8fc9; color: #fff; padding: 0.9rem 1.4rem; font-weight: 600; font-size: 0.95rem; }
.pd-add-row { display: flex; justify-content: flex-end; margin-top: 0.9rem; }
.pd-add-green { background: #1a6b3a; color: #fff; border: none; border-radius: 999px; padding: 0.6rem 1.3rem; font-weight: 600; font-size: 0.85rem; }
@media (max-width: 1000px) { .ot-cols { grid-template-columns: 1fr; } .ot-row { grid-template-columns: 1fr; } .ot-row > label { text-align: left; } }
.ot-prev-full { position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, 0.45); }
.ot-prev-window { position: absolute; inset: 25px 100px 55px 90px; background: var(--card-bg, #fff); color: var(--text, #333); border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; overflow: hidden; }
@media (max-width: 900px) { .ot-prev-window { inset: 12px; } }
.ot-prev-head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.8rem; }
.ot-prev-head h2 { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--text); margin-right: auto; }
.ot-prev-head .modal-close { position: static; color: var(--text); font-size: 1.4rem; }
.ot-prev-form { display: flex; gap: 0.5rem; }
.ot-prev-form input { width: 230px; }
.ot-preview { flex: 1; overflow-y: auto; padding: 1.5rem 2.2rem 2rem; min-height: 200px; font-size: 1rem; line-height: 1.5; }
.ot-preview h1 { font-size: 1.3rem; margin: 0 0 1rem; } .ot-preview h2 { font-size: 1.1rem; margin: 0 0 0.8rem; }
.ot-preview p { margin: 0 0 1rem; }
.ot-sec { display: grid; gap: 2rem; margin-bottom: 1.8rem; align-items: center; max-width: 1200px; }
.ot-sec.ot-cols-2 { grid-template-columns: 1fr 1fr; }
.ot-sec img { max-width: 100%; display: block; }
.ot-imgph { background: rgba(var(--overlay-rgb), 0.12); color: var(--text-muted); aspect-ratio: 4 / 3; max-width: 100%; padding: 1.2rem; }
.ot-imgph svg { width: 74px; height: 74px; display: block; }
.ot-name-row { display: flex; gap: 0.7rem; align-items: center; max-width: 640px; }
.ot-name-row input { flex: 1; }
.ot-tag { background: transparent; border: none; padding: 0.1rem 0; color: var(--accent); font-size: 0.88rem; cursor: pointer; text-align: left; }
.ot-tag:hover { text-decoration: underline; filter: none; }
.ot-discard { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem; margin-bottom: 0.8rem; background: rgba(214, 69, 69, 0.12); border: 1px solid rgba(214, 69, 69, 0.5); border-radius: 8px; font-size: 0.9rem; }

/* Powiazania */
.ll-filters .ot-row > label { text-align: right; }
.ll-filters .ot-row > select { max-width: 420px; }
.ll-search { display: flex; gap: 0.5rem; max-width: 420px; }
.ll-search input { flex: 1; }
.ll-values { line-height: 1.7; font-size: 0.9rem; }
.ll-link { background: transparent; border: none; padding: 0; color: var(--accent); cursor: pointer; font-size: inherit; text-align: left; }
.ll-link:hover { text-decoration: underline; filter: none; }
.ll-id { color: var(--text-muted); font-size: 0.85rem; }
.ll-inh { color: var(--text-muted); }
.ll-pager { display: flex; align-items: center; gap: 0.8rem; justify-content: flex-end; margin-top: 1rem; font-size: 0.85rem; }
#view-listing-links .pset-banner-body ul { margin: 0.3rem 0 0.6rem; padding-left: 1.3rem; }

/* Wiadomosci */
.ms-layout { display: grid; grid-template-columns: 200px minmax(280px, 360px) 1fr; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .ms-layout { grid-template-columns: 1fr; } }
.ms-side { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem; }
.ms-side-item { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; background: transparent; border: none; border-radius: 6px; padding: 0.55rem 0.7rem; color: var(--text); font-size: 0.88rem; text-align: left; cursor: pointer; }
.ms-side-item:hover { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.ms-side-item.active { background: rgba(var(--overlay-rgb), 0.12); font-weight: 600; }
.ms-count { background: rgba(var(--overlay-rgb), 0.12); border-radius: 999px; padding: 0 0.5rem; font-size: 0.75rem; min-width: 1.4rem; text-align: center; }
.ms-alert { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 0.35rem; border-radius: 50%; background: #e5484d; color: #fff; font-size: 0.7rem; font-weight: 700; vertical-align: middle; flex: none; }
.nav-badge { display: inline-block; min-width: 1.2rem; padding: 0 0.35rem; margin-left: 0.4rem; border-radius: 999px; background: #e5484d; color: #fff; font-size: 0.7rem; font-weight: 700; text-align: center; }
.ms-search { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.ms-search input { flex: 1; }
.ms-threads { display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto; }
.ms-thread { display: flex; gap: 0.7rem; text-align: left; background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0.7rem 0.4rem; color: var(--text); cursor: pointer; }
.ms-thread:hover { background: rgba(var(--overlay-rgb), 0.05); filter: none; }
.ms-thread.active { background: rgba(var(--overlay-rgb), 0.1); }
.ms-thread.unread strong { color: var(--accent); }
.ms-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(var(--overlay-rgb), 0.12); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; font-weight: 600; }
.ms-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ms-thread-body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 0.15rem; }
.ms-thread-top { display: flex; justify-content: space-between; gap: 0.5rem; }
.ms-time, .ms-meta { color: var(--text-muted); font-size: 0.75rem; }
.ms-preview { color: var(--text-muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-conv-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.8rem; margin-bottom: 1rem; }
.ms-cards { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1rem; }
.ms-card { display: flex; gap: 0.7rem; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; min-width: 240px; max-width: 100%; font-size: 0.85rem; }
.ms-card img, .ms-card-ph { width: 44px; height: 44px; border-radius: 6px; object-fit: contain; background: rgba(var(--overlay-rgb), 0.08); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ms-card a { color: var(--accent); }
.ms-card-label { font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); }
.ms-card-sub { color: var(--text-muted); font-size: 0.78rem; }
.ms-messages { display: flex; flex-direction: column; gap: 0.8rem; }
.ms-bubble { max-width: 78%; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(var(--overlay-rgb), 0.07); }
.ms-bubble.out { align-self: flex-end; background: rgba(34, 211, 238, 0.15); }
.ms-bubble-head { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.ms-subject { font-weight: 600; margin-bottom: 0.2rem; }
.ms-text { font-size: 0.92rem; line-height: 1.5; overflow-wrap: anywhere; }
.ms-note { margin-top: 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ms-note label { font-size: 0.78rem; color: var(--text-muted); }
.ms-note button { align-self: flex-start; }
.ms-readonly { margin-top: 1rem; }

/* Kreator importu */
.wiz-card { width: 860px; max-width: 96vw; }
.wiz-body { max-height: 70vh; overflow-y: auto; }
.wiz-table td, .wiz-table th { padding: 0.45rem 0.6rem; }
.wiz-sample { color: var(--text-muted); font-size: 0.82rem; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-opts { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; }
.wiz-opts label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.wiz-progress { padding: 1rem 0; }
.wiz-problems { font-size: 0.82rem; color: var(--text-muted); max-height: 200px; overflow-y: auto; }
.pset-banner-warn { border-left-color: #e0902b; }
/* Kreator importu - krok 2 (mapowanie) */
.wiz-top { background: rgba(var(--overlay-rgb), 0.05); border-radius: 8px; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.wiz-top-title { font-weight: 600; }
.wiz-top select { max-width: 100%; }
.wiz-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.wiz-check select { margin-left: 0.4rem; }
.wiz-help { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid var(--text-muted); border-radius: 50%; font-size: 0.68rem; color: var(--text-muted); cursor: help; }
.wiz-facts { display: flex; flex-direction: column; gap: 0.2rem; margin: 1rem 0 0.8rem 1rem; font-size: 0.9rem; }
.wiz-facts strong { display: inline-block; min-width: 4.5rem; }
.wiz-detected { display: flex; align-items: center; gap: 0.7rem; background: rgba(61, 143, 201, 0.16); border-radius: 8px; padding: 0.9rem 1.2rem; margin-bottom: 1rem; }
.wiz-map { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; }
.wiz-map table { border-collapse: collapse; min-width: 100%; }
.wiz-map th { padding: 0.6rem; background: rgba(var(--overlay-rgb), 0.04); min-width: 230px; }
.wiz-map th select { width: 100%; }
.wiz-map td { padding: 0.6rem 0.8rem; border-top: 1px solid var(--border); font-size: 0.85rem; max-width: 300px; overflow-wrap: anywhere; vertical-align: top; }
.wiz-map td.mapped { background: rgba(224, 144, 43, 0.12); }
.wiz-map tr.wiz-first td { font-weight: 600; }
.wiz-map tr.wiz-first.skipped td { color: var(--text-muted); font-style: italic; }
.wiz-note { border: 1px solid var(--border); border-left: 3px solid #3d8fc9; border-radius: 6px; padding: 0.8rem 1rem; font-size: 0.85rem; color: var(--text-muted); margin-top: 0.4rem; }
.wiz-note strong { color: var(--text); }
.wiz-note p { margin: 0.4rem 0 0; }
.wiz-run { background: #2b7bd6; color: #fff; border: none; border-radius: 999px; padding: 0.6rem 1.6rem; font-weight: 600; }
.wiz-combo { width: 100%; text-align: left; background: var(--field-bg, transparent); color: var(--text); border: 1px solid var(--field-border, var(--border)); border-radius: 6px; padding: 0.55rem 0.7rem; font-size: 0.85rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-combo.set { border-color: var(--accent); }
/* Strzalka jako maska (nie tekstowy znak "▾") - btn.textContent w product-import-wizard.js
   nadpisuje dzieci przycisku przy kazdej zmianie mapowania, wiec prawdziwy <span> ze SVG by
   znikal; pseudo-element z maska przetrwa, a background-color (nie fill w samym SVG) pozwala
   mu dalej reagowac na motyw jasny/ciemny (var(--text-muted)) */
.wiz-combo::after {
  content: '';
  display: inline-block;
  float: right;
  width: 13px;
  height: 13px;
  background-color: var(--text-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
}
.wiz-pop { position: fixed; z-index: 2000; background: var(--card-bg, #fff); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); overflow: hidden; }
.wiz-pop-search { padding: 0.5rem; border-bottom: 1px solid var(--border); }
.wiz-pop-search input { width: 100%; }
.wiz-pop-list { max-height: 320px; overflow-y: auto; }
.wiz-pop-list button { display: flex; justify-content: space-between; width: 100%; background: transparent; border: none; border-radius: 0; text-align: left; padding: 0.55rem 0.9rem; color: var(--text); font-size: 0.88rem; cursor: pointer; }
.wiz-pop-list button:hover, .wiz-pop-list button.on { background: rgba(var(--overlay-rgb), 0.1); filter: none; }

/* Lista klikalnych tagow [tag] (Szablony e-mail, Napisz wiadomosc) - patrz message-tags.js */
.tagpicker { width: 230px; flex-shrink: 0; border-right: 1px solid var(--border); padding-right: 1rem; overflow-y: auto; max-height: 480px; }
.tagpicker-search { width: 100%; }
.tagpicker-group-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin: 1rem 0 0.35rem; }
.tagpicker-group:first-child .tagpicker-group-title { margin-top: 0; }
.tagpicker-tag { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: 4px; padding: 0.3rem 0.4rem; font-size: 0.82rem; font-family: var(--mono, monospace); color: var(--accent); cursor: pointer; }
.tagpicker-tag:hover { background: rgba(var(--overlay-rgb), 0.08); filter: none; }
.compose-with-tags { display: flex; gap: 1.25rem; align-items: flex-start; }
.compose-with-tags .compose-fields { flex: 1; min-width: 0; }
.et-attachment-slot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.8rem; min-height: 38px; box-sizing: border-box; }
.et-attachment-slot .et-slot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.et-attachment-slot .et-slot-name.has-file { color: var(--text); }
.et-attachment-slot input[type="file"] { display: none; }

/* Edytor wizualny (Quill) - Szablony e-mail, format "Kod HTML" */
#etQuillWrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
#etQuillWrap .ql-toolbar.ql-snow {
  border: none; border-bottom: 1px solid var(--border); background: rgba(var(--overlay-rgb), 0.03);
  display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; white-space: nowrap;
}
#etQuillWrap .ql-toolbar.ql-snow .ql-formats { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 10px; }
#etQuillWrap .ql-container.ql-snow { border: none; }
#etQuillEditor { height: 280px; overflow-y: auto; background: var(--card-bg, #fff); color: var(--text); font-size: 0.92rem; }
#etQuillToolbar button, #etQuillToolbar .ql-picker-label { color: var(--text); }
#etQuillToolbar .ql-stroke { stroke: var(--text); }
#etQuillToolbar .ql-fill { fill: var(--text); }
#etQuillFullscreenBtn { font-size: 0.95rem; }
#etComposeOverlay .modal-card.et-fullscreen { width: 95vw !important; max-width: 95vw !important; }
#etComposeOverlay .modal-card.et-fullscreen #etQuillEditor { height: calc(100vh - 420px); }

/* Kontrola magazynu (nowy modul) */
#view-warehouse-control .ao-tabs { flex-wrap: nowrap; overflow-x: auto; }
#view-warehouse-control .ao-tabs button { white-space: nowrap; }
.wc-soon { padding: 2rem; }
.wc-soon h2 { margin: 0 0 0.6rem; }

/* Strona glowna */
.dh-top { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(320px, 2fr); gap: 1rem; margin-bottom: 1rem; }
.dh-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .dh-top, .dh-bottom { grid-template-columns: 1fr; } }
.dh-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1.2rem 1.4rem; }
.dh-num { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; }
.dh-big { font-size: 3.6rem; font-weight: 700; line-height: 1; }
.dh-numlabel { margin-top: 0.5rem; font-size: 1.05rem; color: var(--text-muted); }
.dh-chart { position: relative; height: 200px; padding: 0.8rem 1rem; }
.dh-chart canvas { width: 100% !important; height: 100% !important; }
.dh-title { font-weight: 600; font-size: 1.05rem; }
.dh-link { cursor: pointer; }
.dh-link:hover { border-color: var(--accent); }
.dh-att { display: flex; align-items: center; gap: 0.8rem; width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0.8rem 0.2rem; color: var(--text); text-align: left; cursor: pointer; }
.dh-att:hover { background: rgba(var(--overlay-rgb), 0.05); filter: none; }
.dh-att-count { min-width: 2rem; text-align: center; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(var(--overlay-rgb), 0.12); font-weight: 700; font-size: 0.85rem; }
.dh-att.high .dh-att-count { background: #e5484d; color: #fff; }
.dh-att-label { flex: 1; font-size: 0.92rem; }
.dh-att-go { color: var(--text-muted); }
.dh-allok { color: #2ea043; padding: 1rem 0.2rem; }
.dh-att-label { display: flex; flex-direction: column; gap: 0.3rem; }
.dh-att-accounts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dh-acc { background: rgba(var(--overlay-rgb), 0.1); border-radius: 4px; padding: 0.05rem 0.5rem; font-size: 0.78rem; color: var(--text-muted); }

/* Integracje - tabela w stylu BaseLinkera */
.int-card { padding: 0; overflow: hidden; }
.int-head { display: flex; justify-content: space-between; align-items: center; background: #2b7bd6; color: #fff; padding: 0.9rem 1.4rem; }
.int-head h2 { margin: 0; font-size: 1.05rem; color: #fff; }
.int-table { width: 100%; border-collapse: collapse; }
.int-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted); padding: 1rem 1rem 0.6rem; }
.int-table td { padding: 0.7rem 1rem; border-top: 1px solid var(--border); vertical-align: middle; }
.int-card > .empty, .int-card > .field-help { margin-left: 1.4rem; margin-right: 1.4rem; margin-bottom: 1rem; }
.int-type { display: inline-block; background: #4a6fb0; color: #fff; border-radius: 4px; padding: 0.15rem 0.6rem; font-size: 0.78rem; font-weight: 600; }
.int-type.muted { background: rgba(var(--overlay-rgb), 0.18); color: var(--text-muted); }
.int-error { color: #e5484d; font-size: 0.82rem; margin-left: 0.6rem; }
.int-chips { max-width: 340px; }
.int-chip { display: inline-block; border-radius: 4px; padding: 0.12rem 0.55rem; margin: 0.12rem 0.1rem; font-size: 0.75rem; font-weight: 600; cursor: default; }
.int-chip.on { background: #1a6b3a; color: #fff; }
.int-chip.off { background: rgba(var(--overlay-rgb), 0.2); color: var(--text-muted); }
.int-trash { background: transparent; border: none; color: var(--text-muted); padding: 0.4rem; margin-left: 0.3rem; cursor: pointer; }
.int-trash:hover { color: #e5484d; filter: none; }
.int-tree-card { margin-bottom: 1rem; }
.int-tree-title { margin: 0 0 0.9rem; font-size: 1.05rem; font-weight: 600; }
h3.int-tree-title { margin-top: 1.2rem; }
.int-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 140px)); gap: 0.8rem; }
.int-logo { position: relative; height: 96px; background: #fff; border: 1px solid var(--border); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.4rem; text-align: center; }
.int-logo-name { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.int-logo-sub { font-size: 0.72rem; color: #666; }
.int-logo.ready { cursor: pointer; }
.int-logo.ready:hover, .int-logo.connected { border-color: #1a6b3a; box-shadow: 0 0 0 1px #1a6b3a; }
.int-logo.soon { opacity: 0.55; cursor: default; }
.int-beta { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); background: #e8973a; color: #fff; font-size: 0.65rem; font-weight: 700; padding: 0 0.6rem; border-radius: 3px; }
.int-soon { position: absolute; bottom: 5px; font-size: 0.65rem; color: #888; }
.int-add-row { display: flex; justify-content: flex-end; margin: 0 0 1rem; }
.int-modal { width: 1000px; max-width: 96vw; }
.int-modal .modal-body { max-height: 72vh; overflow-y: auto; }

/* Drzewko integracji (jak w BaseLinkerze): korzen + przerywane linie + kafelki */
.int-org { display: flex; flex-direction: column; align-items: center; padding: 0.5rem 0 0.2rem; }
.int-root { position: relative; width: 168px; height: 68px; background: #fff; border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.int-root-logo { font-size: 1.7rem; font-weight: 800; color: #14171f; letter-spacing: -0.03em; }
.int-root-logo b { color: #3b6ef5; }
.int-org-grid { position: relative; display: grid; gap: 30px 18px; justify-content: center; margin-top: 34px; }
.int-org-grid::before { content: ''; position: absolute; left: 50%; top: -34px; bottom: 40px; border-left: 1px dashed #9aa3b2; }
.int-node { position: relative; height: 134px; background: #fff; border: 1px solid var(--border); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 2.4rem 0.4rem 0.7rem; cursor: pointer; }
.int-node::before { content: ''; position: absolute; top: -15px; left: 50%; height: 15px; border-left: 1px dashed #9aa3b2; }
.int-node::after { content: ''; position: absolute; top: -15px; left: calc(-9px); right: calc(-9px); border-top: 1px dashed #9aa3b2; }
.int-node.first::after { left: 50%; }
.int-node.last::after { right: 50%; }
.int-node.first.last::after { display: none; }
.int-node:hover { border-color: #3b6ef5; box-shadow: 0 0 0 1px #3b6ef5; }
.int-node.problem { border-color: #e5484d; }
.int-node-go { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border: 1px solid #3b6ef5; border-radius: 50%; color: #3b6ef5; font-size: 0.75rem; display: none; align-items: center; justify-content: center; }
.int-node:hover .int-node-go { display: flex; }
.int-node .int-logo-name { font-size: 1.9rem; margin-top: 0.2rem; }
.int-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1.5px solid #4a7fc7; color: #2c5a9e; border-radius: 999px; padding: 0.15rem 0.9rem; font-size: 0.78rem; background: #fff; }

/* Okno ustawien konta Allegro: duze okno prawie na caly ekran (z marginesem), jak w BaseLinkerze */
#allegroSettingsModalOverlay { padding: 2rem 3rem; align-items: stretch; }
#allegroSettingsModalOverlay .modal-card { width: 100% !important; max-width: 1500px; margin: 0 auto; height: 100%; max-height: none; min-height: 0 !important; border-radius: 10px; }
#allegroSettingsModalOverlay .modal-header { padding: 1rem 1.8rem; border-bottom: none; }
#allegroSettingsModalOverlay .modal-body { padding: 0.4rem 1.8rem 2rem; }
@media (max-width: 800px) { #allegroSettingsModalOverlay { padding: 0.6rem; } }

/* Centrum powiadomien */
.notif-bell { position: relative; }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.notif-panel { position: fixed; top: 56px; right: 16px; width: 480px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); overflow-y: auto; z-index: 1500; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.3rem; }
.notif-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); }
.notif-tabs { display: flex; gap: 0.3rem; }
.notif-tabs button { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--text); padding: 0.3rem 0.6rem; font-size: 0.85rem; cursor: pointer; }
.notif-tabs button.active { border-bottom-color: var(--accent); font-weight: 600; }
.notif-tabs button:hover { filter: none; }
.notif-alert { display: flex; gap: 0.8rem; align-items: center; background: #b8433f; color: #fff; padding: 1rem 1.3rem; font-size: 0.9rem; line-height: 1.4; }
.notif-body { padding: 0.8rem 1.1rem 1.2rem; }
.notif-count { font-size: 0.85rem; font-weight: 600; margin: 0.4rem 0 0.8rem; }
.notif-card { position: relative; border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 0.9rem; }
.notif-card-title { font-weight: 700; padding-right: 2rem; margin-bottom: 0.3rem; }
.notif-card-text { color: var(--text-muted); font-size: 0.85rem; line-height: 1.45; }
.notif-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.9rem; }
.notif-tag { display: inline-flex; align-items: center; gap: 0.4rem; color: #c0392b; font-weight: 700; font-size: 0.85rem; }
.notif-action { background: transparent; border: none; color: var(--accent); font-size: 0.88rem; cursor: pointer; padding: 0; }
.notif-action:hover { text-decoration: underline; filter: none; }
.notif-x { position: absolute; top: 0.6rem; right: 0.8rem; background: transparent; border: none; color: var(--text-muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0; }
.notif-empty { color: #2ea043; padding: 1rem 0.2rem; }

/* Moje konto - podsumowanie */
.acc-card { padding: 1.6rem 1.8rem; }
.acc-title { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1.6rem; font-size: 1.15rem; }
.acc-dot { width: 10px; height: 10px; border-radius: 50%; background: #2b7bd6; }
.acc-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 1000px) { .acc-grid { grid-template-columns: 1fr; } }
.acc-status { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.acc-check { width: 44px; height: 44px; border-radius: 50%; background: #2b7bd6; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.acc-active { font-size: 1.15rem; font-weight: 700; color: #2b7bd6; }
.acc-col { font-size: 0.92rem; line-height: 1.8; }

/* Faktury */
.inv-cancelled td { opacity: 0.55; text-decoration: line-through; }
.inv-cancelled .int-chip { text-decoration: none; }
#view-invoices .pl-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; align-items: end; }
#view-invoices .pl-filter-actions { display: flex; gap: 0.5rem; align-items: end; }

/* Kafelek faktury w karcie zamowienia (Faktura: [nr] po wystawieniu, jak w BaseLinkerze) */
.od-inv-chip { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.5rem; background: var(--card-bg); font-size: 0.85rem; }
.od-inv-chip button { background: transparent; border: none; padding: 0.2rem; color: var(--text-muted); display: inline-flex; cursor: pointer; border-radius: 4px; }
.od-inv-chip button:hover { color: var(--text); background: rgba(var(--overlay-rgb), 0.08); filter: none; }
.od-inv-open { align-items: center; gap: 0.3rem; }
.od-inv-open:hover { color: var(--text); }
.od-inv-number { font-weight: 600; white-space: nowrap; color: var(--text); }
.od-inv-menu { position: fixed; z-index: 2000; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); min-width: 160px; overflow: hidden; padding: 0.3rem 0; }
.od-inv-menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: 0; padding: 0.5rem 0.9rem; font-size: 0.85rem; color: var(--text); cursor: pointer; }
.od-inv-menu button:hover { background: rgba(var(--overlay-rgb), 0.08); filter: none; }
.od-inv-menu button.danger { color: var(--danger); }

/* Edycja wystawionej faktury (public/invoice-edit-view.js) - pelnoekranowy panel, jak w BaseLinkerze */
#ieOverlay .ie-card { width: 100%; max-width: 1100px; height: 92vh; display: flex; flex-direction: column; }
#ieOverlay .modal-body { flex: 1; overflow-y: auto; }
.ie-head { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border); }
.ie-head h2 { margin: 0; font-size: 1.15rem; }
.ie-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.ie-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 1rem 0 1.6rem; }
.ie-col h3 { margin-top: 0; }
.icon-btn { background: transparent; border: none; padding: 0.2rem 0.4rem; color: var(--text-muted); cursor: pointer; border-radius: 4px; font-size: 0.95rem; }
.icon-btn:hover { color: var(--text); background: rgba(var(--overlay-rgb), 0.08); filter: none; }

/* Menu "..." przy pozycjach zamowienia (public/order-detail-view.js) - klasa WLASNA (nie
   .pset-pop), bo product-settings-view.js ma globalny listener ktory zamyka KAZDY element
   .pset-pop po kazdym kliknieciu (zweryfikowane na zywo - kolidowalo z tym menu) */
.oi-menu-pop { position: absolute; right: 0; top: 36px; z-index: 30; min-width: 130px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); padding: 0.3rem; text-align: left; }
.oi-menu-pop button { display: block; width: 100%; text-align: left; background: transparent; color: var(--text); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.85rem; cursor: pointer; }
.oi-menu-pop button:hover { background: rgba(var(--overlay-rgb), 0.06); filter: none; }
.oi-menu-pop button.danger { color: var(--danger); }