/* ════════════════════════════════════════════════════════════════
   Alasta WMS — Cloud
   Design tokens + komponenty (Figma-aesthetic)
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Sizing */
  --sidebar-w: 248px;
  --topbar-h: 60px;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 999px;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME (default)
   ═══════════════════════════════════════════════════════════ */
:root,
:root[data-theme="light"] {
  --bg:         #f8f9fb;
  --bg-2:       #ffffff;
  --surface:    #ffffff;
  --surface-2: #ffffff;
  --surface-3:  #f1f3f7;
  --surface-hover: #f5f6fa;

  --border:    #e8eaef;
  --border-2:  #d6dae3;
  --border-strong: #c1c7d3;

  --text:      #0f172a;
  --text-2:    #1f2937;
  --muted:     #64748b;
  --muted-2:   #94a3b8;

  --accent:       #4f46e5;
  --accent-2:     #4338ca;
  --accent-soft:  #eef2ff;
  --accent-soft-2: #e0e7ff;
  --accent-glow:  rgba(79,70,229,.18);

  --green:    #10b981;
  --green-soft: #ecfdf5;
  --red:      #ef4444;
  --red-soft:  #fef2f2;
  --amber:    #f59e0b;
  --amber-soft: #fffbeb;

  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 4px 12px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.04);

  --ring: 0 0 0 3px var(--accent-glow);
}

/* ═══════════════════════════════════════════════════════════
   DARK THEME
   ═══════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --bg:         #0a0c10;
  --bg-2:       #0f1218;
  --surface:    #131720;
  --surface-2:  #181d27;
  --surface-3:  #1e2330;
  --surface-hover: #1c2231;

  --border:    #242937;
  --border-2:  #313847;
  --border-strong: #3f4756;

  --text:      #f1f5f9;
  --text-2:    #cbd5e1;
  --muted:     #94a3b8;
  --muted-2:   #64748b;

  --accent:       #818cf8;
  --accent-2:     #a5b4fc;
  --accent-soft:  rgba(129,140,248,.12);
  --accent-soft-2: rgba(129,140,248,.18);
  --accent-glow:  rgba(129,140,248,.25);

  --green:    #34d399;
  --green-soft: rgba(52,211,153,.12);
  --red:      #f87171;
  --red-soft:  rgba(248,113,113,.12);
  --amber:    #fbbf24;
  --amber-soft: rgba(251,191,36,.10);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.30);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
  --shadow:    0 4px 12px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.20);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.40), 0 4px 8px rgba(0,0,0,.20);
}

/* ═══════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* HTML hidden attribute - wymuszamy, żeby moje display: flex / inline-flex go nie nadpisywały */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  overflow: hidden;
  letter-spacing: -.005em;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .mono { font-family: var(--mono); font-size: 0.9em; }
code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-3);
  border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════
   IKONY (SVG sprite)
   ═══════════════════════════════════════════════════════════ */
.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon-sm { width: 15px; height: 15px; }
.icon-xs { width: 13px; height: 13px; }
.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: .75;
  transition: opacity .15s;
}

/* ═══════════════════════════════════════════════════════════
   BOOT SCREEN
   ═══════════════════════════════════════════════════════════ */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
}
.boot-spinner {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2.5px solid var(--border-2);
  border-top-color: var(--accent);
  animation: spin .85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* Stany aplikacji */
body.state-boot .sidebar,
body.state-boot main,
body.state-boot #backdrop,
body.state-boot #auth-screen { visibility: hidden; }

body.state-auth .sidebar,
body.state-auth main,
body.state-auth #backdrop { visibility: hidden; }
body.state-auth #boot-screen { display: none; }
body.state-auth #auth-screen { display: flex; visibility: visible; }

body.state-app #boot-screen { display: none; }
body.state-app #auth-screen { display: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--accent);
  color: white;
  padding: 8px 14px;
  border-radius: var(--r-xs);
  font-weight: 600;
  font-size: 13px;
  z-index: 1000;
  text-decoration: none;
}
.skip-link:focus { left: 8px; }

/* ═══════════════════════════════════════════════════════════
   AUTH SCREEN
   ═══════════════════════════════════════════════════════════ */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
  overflow: auto;
}

.auth-theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.auth-card h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

.auth-sub {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 22px;
  line-height: 1.55;
}

#auth-form { display: flex; flex-direction: column; gap: 14px; }

.auth-submit { margin-top: 6px; }

.auth-switch {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.auth-msg {
  padding: 11px 13px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  gap: 8px;
  border: 1px solid transparent;
}
.auth-msg-error {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red);
}
.auth-msg-info {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
}

.dot-sep {
  margin: 0 6px;
  color: var(--border-2);
}

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}
.link-btn:hover { color: var(--accent-2); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   BRAND MARK
   ═══════════════════════════════════════════════════════════ */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 22px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.brand-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.2;
}
.brand-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  padding: 22px 14px 16px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100dvh;
  overflow-y: auto;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
  position: relative;
}

.pill:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.pill:hover .nav-icon { opacity: 1; }

.pill.active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
.pill.active .nav-icon { opacity: 1; color: var(--accent); }

.sidebar-foot {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.user-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
}
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.user-meta { min-width: 0; flex: 1; }
.user-email {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-shortcut {
  font-size: 11px;
  color: var(--muted-2);
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════
   MAIN / TOPBAR
   ═══════════════════════════════════════════════════════════ */
main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
}

.topbar-left,
.topbar-right { display: flex; align-items: center; gap: 8px; }

.page-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
}

/* ─── STATUS PILL (subtelny dot + text) ─────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  letter-spacing: .005em;
  margin-left: 6px;
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
  flex-shrink: 0;
}
.status-pill[data-state="syncing"] .status-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: pulse 1.2s ease-in-out infinite;
}
.status-pill[data-state="error"] .status-dot {
  background: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.iconbtn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.iconbtn:hover {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--border);
}
.iconbtn:active { transform: translateY(1px); }
.iconbtn-sm { width: 30px; height: 30px; }

#btn-refresh.spinning {
  animation: spin 1s linear infinite;
  pointer-events: none;
  opacity: .6;
}

#nav-toggle { display: none; }

/* ═══════════════════════════════════════════════════════════
   CONTENT
   ═══════════════════════════════════════════════════════════ */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 40px;
  scroll-behavior: smooth;
}
.content::-webkit-scrollbar { width: 8px; }
.content::-webkit-scrollbar-track { background: transparent; }
.content::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 99px;
  border: 2px solid var(--bg);
}
.content::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

.view { display: none; animation: fadeUp .25s ease both; }
.view.active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   VIEW HEADER (h1 + subtitle + actions)
   ═══════════════════════════════════════════════════════════ */
.view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--text);
  line-height: 1.2;
}

.view-subtitle {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 400;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
  margin: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.card-header h3 + .small { margin-left: 6px; }
.card-header > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ═══════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  margin-bottom: 14px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.stat-card {
  padding: 22px;
}

.stat-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: -.005em;
}

.big-number {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.big-number.warn   { color: var(--amber); }
.big-number.ok     { color: var(--green); }
.big-number.accent { color: var(--accent); }

.stat-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.stat-footer .icon { color: var(--muted-2); }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  height: 36px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 500;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .08s;
  white-space: nowrap;
  letter-spacing: -.005em;
}
.btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.btn.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  box-shadow: 0 2px 6px var(--accent-glow);
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn.ghost:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

.btn.danger {
  color: var(--red);
  border-color: var(--border);
}
.btn.danger:hover {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red);
}

.btn-sm { height: 30px; padding: 6px 10px; font-size: 12.5px; }

.btn .icon { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════════════ */
.input, select.input, textarea {
  height: 36px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  width: 100%;
}
.input:hover { border-color: var(--border-strong); }
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

textarea {
  height: auto;
  min-height: 90px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.55;
  font-family: var(--font);
}

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 32px;
}

.input::placeholder { color: var(--muted-2); }

/* Search input with icon */
.input-with-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 240px;
}
.input-with-icon .input {
  padding-left: 36px;
  width: 100%;
}
.input-icon {
  position: absolute;
  left: 11px;
  color: var(--muted-2);
  pointer-events: none;
}

/* Bumped specificity so it wins over select.input { width: 100% } */
select.input.filter-group { width: 180px; }

/* Field */
label.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
label.field .input,
label.field select {
  color: var(--text);
  font-weight: 400;
}

/* Password wrap */
.password-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.password-wrap .input {
  padding-right: 42px;
}
.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted-2);
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  transition: color .12s, background .12s;
}
.password-toggle:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.input.readonly,
.input[readonly] {
  background: var(--surface-3);
  color: var(--muted);
  cursor: not-allowed;
}

.flex-grow { flex: 1; min-width: 180px; }
.flex-sku  { max-width: 200px; }
.flex-who  { flex: 2; min-width: 220px; }
.flex-qty  { max-width: 100px; }

.form-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   TOOLBAR
   ═══════════════════════════════════════════════════════════ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.toolbar-spacer {
  flex: 1;
  min-width: 0;
}

.icon-btn { gap: 6px; }

/* ═══════════════════════════════════════════════════════════
   TABELA TOWARÓW
   ═══════════════════════════════════════════════════════════ */
.table-card {
  padding: 0;
  overflow: hidden;
}

.table-wrap { width: 100%; }

.table-head {
  display: grid;
  grid-template-columns: 140px 1fr 140px 100px 80px 130px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
}

.table-row {
  display: grid;
  grid-template-columns: 140px 1fr 140px 100px 80px 130px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}

/* v5.5: gdy widoczna kolumna Koszt - dodatkowy 110px slot przed Akcje */
.table-wrap.with-costs .table-head,
.table-wrap.with-costs .table-row {
  grid-template-columns: 130px 1fr 130px 90px 70px 110px 130px;
}
.cost-cell {
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 12px;
}
.cost-cell strong { font-weight: 600; }
.table-row:last-child { border-bottom: none; }
.table-row:hover { background: var(--surface-hover); }

.th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  padding-right: 12px;
}
.th.num { text-align: right; }
.th.actions { text-align: right; }

.th.th-sort {
  background: none;
  border: 0;
  padding: 0 12px 0 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: color .12s;
}
.th.th-sort:hover { color: var(--text); }
.th.th-sort.active { color: var(--accent); }
.th.th-sort.num { text-align: right; padding-right: 12px; }

.td {
  font-size: 13.5px;
  color: var(--text-2);
  padding-right: 12px;
  min-width: 0;
}
.td.sku {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.td.name {
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.td.actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* qty badge */
.qty-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.qty-badge.low {
  background: var(--red-soft);
  color: var(--red);
}

/* ═══════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  flex-wrap: wrap;
}
.pagination-left,
.pagination-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-info {
  font-size: 12.5px;
  color: var(--muted);
  min-width: 50px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.page-size-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}

.page-size-select {
  height: 30px;
  padding: 4px 8px;
  padding-right: 26px;
  font-size: 12.5px;
  width: auto;
  min-width: 60px;
}

/* ═══════════════════════════════════════════════════════════
   MOVEMENTS (Wydania / Przyjęcia)
   ═══════════════════════════════════════════════════════════ */
.mov-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mov-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: background .1s, border-color .12s;
}
.mov-item:hover {
  background: var(--surface-hover);
  border-color: var(--border-2);
}

.mov-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mov-icon.plus {
  background: var(--green-soft);
  color: var(--green);
}
.mov-icon.minus {
  background: var(--red-soft);
  color: var(--red);
}

.mov-qty {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
}
.mov-qty.plus  { color: var(--green); }
.mov-qty.minus { color: var(--red); }

.mov-main { flex: 1; min-width: 0; }
.mov-name {
  font-weight: 500;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mov-sku {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.mov-meta {
  font-size: 11.5px;
  color: var(--muted);
  text-align: right;
  flex-shrink: 0;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   FORM CARD / SKU PREVIEW
   ═══════════════════════════════════════════════════════════ */
.form-card { padding: 18px 22px; }

.sku-preview {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--accent-soft-2);
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 36px;
  align-items: center;
}
.sku-preview.warn {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red);
}

/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
}
dialog::backdrop {
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
}

.modal-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  width: min(540px, calc(100vw - 32px));
  box-shadow: var(--shadow-lg);
}

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

.modal-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.grid-full { grid-column: 1 / -1; }

.modal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-footer-spacer { flex: 1; }

/* ═══════════════════════════════════════════════════════════
   ASSISTANT
   ═══════════════════════════════════════════════════════════ */
.assistant-card textarea {
  margin-top: 4px;
  margin-bottom: 12px;
}
.assistant-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   SETTINGS
   ═══════════════════════════════════════════════════════════ */
.settings-card { padding: 22px; }

.settings-subheader {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 22px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 12px;
  border-radius: var(--r-full);
  font-size: 12.5px;
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-soft-2);
}

.tag-count {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 2px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.6);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
  line-height: 1.4;
}
:root[data-theme="dark"] .tag-count {
  background: rgba(255,255,255,.10);
}

.tag-del {
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  border: 0;
  background: none;
  padding: 0 0 0 4px;
  transition: color .12s;
  margin-left: 2px;
}
.tag-del:hover { color: var(--red); }

/* ═══════════════════════════════════════════════════════════
   CHART
   ═══════════════════════════════════════════════════════════ */
.chart-wrap {
  position: relative;
  height: 200px;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}

.empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--muted-2);
  opacity: .6;
  margin-bottom: 4px;
}
.empty-icon .icon {
  width: 32px;
  height: 32px;
}

.empty-cta {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   BACKDROP (mobile sidebar)
   ═══════════════════════════════════════════════════════════ */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.50);
  backdrop-filter: blur(2px);
  z-index: 9;
}

/* ═══════════════════════════════════════════════════════════
   TOASTS
   ═══════════════════════════════════════════════════════════ */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  pointer-events: auto;
  animation: toastIn .25s cubic-bezier(.16,1,.3,1) both;
  max-width: 360px;
}

.toast-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.toast.success .toast-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.toast.error   .toast-dot { background: var(--red);   box-shadow: 0 0 0 3px var(--red-soft); }
.toast.info    .toast-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); max-height: 80px; }
  to   { opacity: 0; transform: translateY(6px); max-height: 0; padding: 0; margin: 0; }
}
.toast.out { animation: toastOut .2s ease both; }

/* ═══════════════════════════════════════════════════════════
   FOCUS
   ═══════════════════════════════════════════════════════════ */
.btn:focus-visible,
.pill:focus-visible,
.iconbtn:focus-visible,
.link-btn:focus-visible,
.password-toggle:focus-visible,
.tag-del:focus-visible,
.th-sort:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.input:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .table-head, .table-row {
    grid-template-columns: 120px 1fr 110px 90px 80px 110px;
  }
}

@media (max-width: 900px) {
  body { overflow: auto; display: block; }

  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    transform: translateX(-105%);
    z-index: 30;
    box-shadow: var(--shadow-lg);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
  }

  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .backdrop { display: block; }

  #nav-toggle { display: grid; }
  main { height: auto; overflow: visible; }
  .content { overflow: visible; padding: 18px 18px 32px; }

  .cards { grid-template-columns: 1fr; }

  .view-header { flex-direction: column; align-items: stretch; }
  .section-actions { width: 100%; }
  .input-with-icon { width: 100%; }
  .filter-group { width: 100%; }

  .topbar { padding: 0 16px; }
  .page-title { font-size: 13.5px; }
}

@media (max-width: 700px) {
  .table-head { display: none; }

  .table-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "sku       qty"
      "name      name"
      "group     threshold"
      "actions   actions";
    gap: 4px 12px;
    padding: 14px 16px;
    align-items: center;
  }
  .table-row > .td:nth-child(1) { grid-area: sku; font-size: 11px; }
  .table-row > .td:nth-child(2) {
    grid-area: name;
    white-space: normal;
    font-size: 14.5px;
    color: var(--text);
    font-weight: 600;
  }
  .table-row > .td:nth-child(3) {
    grid-area: group;
    font-size: 12px;
    color: var(--muted);
  }
  .table-row > .td:nth-child(4) {
    grid-area: qty;
    text-align: right;
  }
  .table-row > .td:nth-child(5) {
    grid-area: threshold;
    font-size: 11.5px;
    color: var(--muted);
    text-align: right;
  }
  .table-row > .td:nth-child(5)::before { content: 'próg: '; opacity: .7; }
  .td.actions {
    grid-area: actions;
    justify-content: flex-end;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
  }

  /* FORM ROW na mobile - 2 kolumny */
  .form-row .input,
  .form-row > .password-wrap {
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }
  .flex-sku, .flex-who, .flex-qty {
    max-width: none !important;
    flex: 1 1 100% !important;
  }
  .form-row .btn { width: 100%; }

  .sku-preview {
    width: 100%;
    max-width: none;
    text-align: center;
    justify-content: center;
  }

  /* MODAL na mobile - full-screen z porządnym layoutem */
  dialog { padding: 0; }
  .modal-body {
    width: 100vw;
    max-width: 100vw;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
  }
  .modal-header { margin-bottom: 16px; }
  .grid2 {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 18px;
    flex: 1;
  }
  .grid-full { grid-column: 1; }
  .modal-footer {
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    padding-top: 14px;
  }
  .modal-footer .btn { flex: 1; min-width: 110px; }
  .modal-footer-spacer { display: none; }
  #gen-sku { flex-basis: 100%; }

  /* Pagination */
  .pagination { flex-direction: column; align-items: stretch; }
  .pagination-left, .pagination-right {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   HISTORIA LOGOWAŃ (Settings)
   ═══════════════════════════════════════════════════════════ */
.login-history {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: background .1s;
  flex-wrap: wrap;
}
.login-entry:hover { background: var(--surface-hover); }
.login-entry-current {
  border-color: var(--accent-soft-2);
  background: var(--accent-soft);
}

.login-entry-time {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.login-entry-when {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.login-entry-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: white;
}

.login-entry-meta {
  text-align: right;
  min-width: 0;
}
.login-entry-email {
  font-size: 12.5px;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.login-entry-ua {
  font-size: 11.5px;
  margin-top: 2px;
}

.login-empty {
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
}

@media (max-width: 700px) {
  .login-entry { flex-direction: column; align-items: stretch; gap: 6px; }
  .login-entry-meta { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════
   SETUP MODAL - gdy brakuje tabel Supabase
   ═══════════════════════════════════════════════════════════ */
.setup-modal-body {
  width: min(720px, calc(100vw - 32px));
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.setup-modal-content {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 16px;
}
.setup-modal-content > p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 14px;
}
.setup-steps {
  margin: 12px 0 18px 20px;
  font-size: 13.5px;
  color: var(--text-2);
}
.setup-steps li { margin-bottom: 6px; line-height: 1.6; }
.setup-steps a {
  font-weight: 500;
}
.setup-steps kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11.5px;
}
.setup-sql-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.setup-sql-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.setup-sql-content {
  max-height: 260px;
  overflow-y: auto;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  background: var(--surface);
  color: var(--text-2);
  white-space: pre;
  margin: 0;
}

@media (max-width: 700px) {
  .setup-modal-body {
    width: 100vw;
    max-width: 100vw;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: 18px;
  }
  .setup-sql-content { max-height: 200px; }
}

/* ═══════════════════════════════════════════════════════════
   v4.5: ROLE, USERS, AUDIT, BARCODE, TOOLTIPS
   ═══════════════════════════════════════════════════════════ */

.auth-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.auth-notice .icon { color: var(--accent); margin-top: 2px; flex-shrink: 0; }

/* Info banner w widokach */
.info-banner {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.info-banner .icon { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.info-banner code {
  background: rgba(255,255,255,.6);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11.5px;
}
:root[data-theme="dark"] .info-banner code { background: rgba(255,255,255,.06); }

/* ─── Tooltipy [data-tip] ─────────────────────────────────── */
[data-tip] { position: relative; }
/* v4.8: Czarne dymki [data-tip] WYŁĄCZONE — używaj natywnego title="" */
[data-tip]:hover::after,
[data-tip]:focus-visible::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::before { display: none !important; }

/* ─── Tabela użytkowników ─────────────────────────────────── */
#users-table .table-head,
#users-table .table-row {
  grid-template-columns: 1.4fr 110px 140px 140px 1fr 180px;
}
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.role-badge.admin {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-soft-2);
}
.role-badge.operator {
  background: var(--surface-3);
  color: var(--muted);
  border: 1px solid var(--border);
}

.user-status {
  font-size: 12px;
  font-weight: 500;
}
.user-status.active { color: var(--green); }
.user-status.disabled { color: var(--muted); text-decoration: line-through; }

.user-current-tag {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--green-soft);
  color: var(--green);
  font-weight: 600;
}

/* ─── Audit log ───────────────────────────────────────────── */
.audit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.audit-entry {
  display: grid;
  grid-template-columns: 140px 140px 1fr 1fr 110px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: background .1s;
}
.audit-entry:hover { background: var(--surface-hover); }
.audit-entry.undone {
  opacity: .5;
  background: var(--surface-3);
}
.audit-when {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.audit-actor {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audit-action {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.audit-detail {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audit-undone-tag {
  display: inline-block;
  margin-top: 2px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--muted);
}

/* ─── Modal kodu kreskowego ───────────────────────────────── */
.modal-barcode {
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 14px;
}
.modal-barcode svg {
  width: 100%;
  max-width: 280px;
  height: auto;
  background: white;
  padding: 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
}
:root[data-theme="dark"] .modal-barcode svg { background: white; }

.barcode-modal-body {
  width: min(720px, calc(100vw - 32px));
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.barcode-list {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  padding: 8px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  min-height: 240px;
  max-height: 50vh;
}
.barcode-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  cursor: pointer;
  font-size: 12.5px;
  transition: background .1s;
}
.barcode-item:hover { background: var(--surface-hover); }
.barcode-item input { margin: 0; cursor: pointer; }
.barcode-item-info { min-width: 0; flex: 1; }
.barcode-item-sku {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.barcode-item-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Mobile responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  #users-table .table-head { display: none; }
  #users-table .table-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "email   role"
      "status  last"
      "ip      ip"
      "actions actions";
    gap: 4px 12px;
  }
  #users-table .table-row > div:nth-child(1) { grid-area: email; }
  #users-table .table-row > div:nth-child(2) { grid-area: role; justify-self: end; }
  #users-table .table-row > div:nth-child(3) { grid-area: status; }
  #users-table .table-row > div:nth-child(4) { grid-area: last; justify-self: end; font-size: 11px; }
  #users-table .table-row > div:nth-child(5) { grid-area: ip; font-size: 11px; }
  #users-table .table-row > div:nth-child(6) {
    grid-area: actions; justify-content: flex-end; padding-top: 8px;
    border-top: 1px solid var(--border); margin-top: 4px;
  }

  .audit-entry {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "when    actor"
      "action  action"
      "detail  detail"
      "actions actions";
    gap: 4px 8px;
  }
  .audit-entry > .audit-when { grid-area: when; }
  .audit-entry > .audit-actor { grid-area: actor; text-align: right; }
  .audit-entry > .audit-action { grid-area: action; }
  .audit-entry > .audit-detail { grid-area: detail; white-space: normal; }
  .audit-entry > .audit-actions { grid-area: actions; justify-self: end; padding-top: 6px; }

  /* Tooltipy na mobile - wyłączone (touch nie hover) */
  [data-tip]:hover::after,
  [data-tip]:hover::before { display: none; }
}

/* ─── Print barcode (specjalny widok #print-area używany dla starych etykiet) ─────────────────────── */
/* v5.12: KRYTYCZNA NAPRAWA — wcześniej ta reguła robiła `body * { visibility: hidden }` co
   ukrywało CAŁY content przy każdym window.print() — także druk stocktake/finance/raportów!
   Teraz reguła obowiązuje TYLKO gdy strona ma element #print-area (czyli barcode-print flow).
   Stocktake/finance/raporty mają własne reguły @media print które normalnie filtrują content. */
@media print {
  body:has(#print-area) *:not(#print-area):not(#print-area *) {
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  body:has(#print-area) #print-area {
    position: absolute;
    left: 0; top: 0; width: 100%;
    padding: 16px;
    visibility: visible !important;
  }
}
.print-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  font-family: var(--font);
}
.print-label {
  border: 1px solid #000;
  padding: 10px 12px;
  page-break-inside: avoid;
  text-align: center;
}
.print-label-name {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.print-label svg {
  width: 100%;
  height: 50px;
}
.print-label-sku {
  font-family: var(--mono);
  font-size: 10px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════
   v4.5.3: ASYSTENT AI — input prompt + quick actions
   ═══════════════════════════════════════════════════════════ */
.assistant-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 12px;
}
.assistant-input-row textarea {
  flex: 1;
  min-height: 42px;
  max-height: 180px;
  resize: vertical;
  font-family: var(--font);
  line-height: 1.5;
  padding: 10px 12px;
}
.assistant-input-row textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.assistant-input-row button {
  flex-shrink: 0;
  align-self: flex-start;
}
#assistant-output {
  min-height: 120px;
  max-height: 360px;
  background: var(--surface-3);
  cursor: default;
  font-size: 13px;
  line-height: 1.55;
}
#assistant-output:empty::before {
  content: 'Tutaj pojawi się odpowiedź AI…';
  color: var(--muted-2);
}
.assistant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  align-items: center;
}
.assistant-loading {
  display: inline-block;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
@media (max-width: 600px) {
  .assistant-input-row { flex-direction: column; }
  .assistant-input-row button { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   v4.6: AI AGENT - karty propozycji + dymki podpowiedzi
   ═══════════════════════════════════════════════════════════ */
.assistant-proposals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.proposal-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 14px 16px;
  animation: proposalIn .2s ease both;
}
@keyframes proposalIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.proposal-card.proposal-warn { border-left-color: var(--orange, #f59e0b); }
.proposal-card.proposal-executing { opacity: .6; pointer-events: none; }
.proposal-card.proposal-done {
  border-left-color: var(--green);
  background: var(--green-soft, rgba(16,185,129,.08));
  transition: opacity .4s, transform .4s;
  opacity: 0;
  transform: scale(.98);
}

.proposal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.proposal-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.proposal-icon-green { background: var(--green-soft, rgba(16,185,129,.12)); color: var(--green); }
.proposal-icon-red   { background: var(--red-soft); color: var(--red); }
.proposal-icon-accent { background: var(--accent-soft); color: var(--accent); }
.proposal-action { font-weight: 600; font-size: 13.5px; }
.proposal-sub { margin-top: 2px; }

.proposal-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.proposal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proposal-field-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.proposal-field input {
  height: 34px;
  font-size: 13px;
}
.proposal-field input[readonly] {
  background: var(--surface-3);
  font-family: var(--mono);
  font-size: 12px;
}

.proposal-warning {
  grid-column: 1 / -1;
  padding: 8px 12px;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: var(--r-xs);
  font-size: 12.5px;
  color: var(--orange, #d97706);
}

.proposal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Dymki podpowiedzi 💡 przy stat-cards */
.stat-card { position: relative; }
.inline-hint {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border: none;
  background: var(--accent-soft);
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform .15s, background .15s;
  opacity: .75;
  z-index: 2;
}
.inline-hint:hover {
  background: var(--accent);
  transform: scale(1.15);
  opacity: 1;
}
.inline-hint:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   v4.7: BACKUPY + CENY + AGENT CHAT
   ═══════════════════════════════════════════════════════════ */
.backups-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.backup-entry {
  display: grid;
  grid-template-columns: 160px 1fr 130px 110px auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: background .1s;
}
.backup-entry:hover { background: var(--surface-hover); }
.backup-entry-when {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.backup-entry-meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.backup-entry-size {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.backup-entry-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  text-transform: uppercase;
}
.backup-entry-tag.manual { background: var(--accent-soft); color: var(--accent); }
.backup-entry-tag.auto-daily { background: var(--green-soft, rgba(16,185,129,.12)); color: var(--green); }
.backup-entry-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

@media (max-width: 800px) {
  .backup-entry {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .backup-entry-actions { justify-content: flex-start; }
}

/* Kolumna cen w items - dodatkowo dla tabeli */
.item-price-info {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}
.item-price-info .price-label {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Header asystenta z przyciskiem "Nowa rozmowa" */
.assistant-header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

/* Karta propozycji - bulk variant (lista checkboxów do hurtowego dodania) */
.proposal-bulk-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 6px;
  margin-bottom: 12px;
  background: var(--surface-3);
}
.proposal-bulk-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-xs);
  background: var(--surface);
  cursor: pointer;
  font-size: 12.5px;
}
.proposal-bulk-item:hover { background: var(--surface-hover); }
.proposal-bulk-item input[type=checkbox] { margin: 0; }
.proposal-bulk-item input[type=text] {
  flex: 1;
  height: 26px;
  font-size: 12px;
  padding: 0 8px;
}

/* ═══════════════════════════════════════════════════════════
   v4.8: CHAT UI à la ChatGPT + DZWONEK + PAMIĘĆ AI
   ═══════════════════════════════════════════════════════════ */

/* ─── Chat asystenta ─────────────────────────────────────── */
.assistant-card.chat-style {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.chat-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-header-actions { margin-left: auto; }
.chat-window {
  flex: 1;
  min-height: 240px;
  max-height: 480px;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.chat-bubble {
  display: flex;
  gap: 10px;
  max-width: 85%;
  animation: chatIn .15s ease both;
}
@keyframes chatIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-bubble.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-bubble.assistant {
  align-self: flex-start;
}
.chat-bubble .chat-msg {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.chat-bubble.user .chat-msg {
  background: var(--accent);
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-bubble.assistant .chat-msg {
  background: var(--surface-3);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-bubble.assistant .chat-msg em {
  font-style: italic;
  background: rgba(0,0,0,.04);
  padding: 1px 5px;
  border-radius: 4px;
}
:root[data-theme="dark"] .chat-bubble.assistant .chat-msg em {
  background: rgba(255,255,255,.06);
}
.chat-bubble.assistant.thinking .chat-msg {
  font-style: italic;
  opacity: .65;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}

/* Karty propozycji w obrębie chatu */
.chat-window .proposal-card {
  align-self: stretch;
  max-width: 100%;
  margin: 4px 0;
}

/* Input area na dole */
.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat-input {
  flex: 1;
  min-height: 40px;
  max-height: 180px;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.4;
  resize: none;
  background: var(--bg);
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.chat-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.chat-input::placeholder { color: var(--muted-2); }
.chat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .12s, transform .08s;
  flex-shrink: 0;
}
.chat-send:hover:not(:disabled) {
  background: var(--accent-hover, var(--accent));
  transform: scale(1.05);
}
.chat-send:disabled { opacity: .4; cursor: not-allowed; }

.chat-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-3);
}

@media (max-width: 600px) {
  .chat-bubble { max-width: 92%; }
  .chat-input-row { padding: 10px 12px; }
  .chat-quick-actions { padding: 8px 12px 12px; }
}

/* ─── Dzwonek alertów AI ──────────────────────────────────── */
.bell-wrap { position: relative; }
.bell-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--red);
  color: white;
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 9px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  border: 2px solid var(--surface);
  line-height: 1.1;
}
.bell-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(380px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg, var(--shadow));
  z-index: 200;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bell-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
}
.bell-list {
  overflow-y: auto;
  flex: 1;
}
.bell-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.bell-item:last-child { border-bottom: none; }
.bell-item-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.bell-item-icon.info     { background: var(--accent-soft); color: var(--accent); }
.bell-item-icon.warning  { background: rgba(245,158,11,.15); color: #d97706; }
.bell-item-icon.danger   { background: var(--red-soft); color: var(--red); }
.bell-item-body { flex: 1; min-width: 0; }
.bell-item-msg {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 4px;
}
.bell-item-meta {
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bell-item-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 16px;
  line-height: 1;
}
.bell-item-dismiss:hover { color: var(--text); }
.bell-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
}

/* ─── Pamięć AI ──────────────────────────────────────────── */
.ai-memory-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.ai-memory-entry {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-size: 12.5px;
}
.ai-memory-scope {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--muted);
  white-space: nowrap;
  justify-self: start;
  width: max-content;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-memory-scope.auto { background: var(--accent-soft); color: var(--accent); }
.ai-memory-fact { line-height: 1.4; }
.ai-memory-when {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}
.ai-memory-del {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}
.ai-memory-del:hover { color: var(--red); }
.ai-memory-add {
  display: flex;
  gap: 6px;
}
.ai-memory-add input { flex: 1; font-size: 12.5px; height: 34px; }

/* Toggle row (powiadomienia AI) */
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}
.toggle-row input[type=checkbox] {
  width: 18px; height: 18px;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .ai-memory-entry {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "scope del"
      "fact  fact"
      "when  when";
  }
  .ai-memory-entry > :nth-child(1) { grid-area: scope; }
  .ai-memory-entry > :nth-child(2) { grid-area: fact; }
  .ai-memory-entry > :nth-child(3) { grid-area: when; }
  .ai-memory-entry > :nth-child(4) { grid-area: del; }
}

/* v4.9: AI Provider toggle */
.provider-toggle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.provider-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .12s, background .12s;
  background: var(--surface);
}
.provider-card:hover { background: var(--surface-hover); }
.provider-card input[type=radio] {
  margin: 2px 0 0 0;
  cursor: pointer;
  flex-shrink: 0;
}
.provider-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.provider-card-body { flex: 1; min-width: 0; }
.provider-name {
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════
   v5.0: AI VISION (zdjęcia) + sugestie systemowe
   ═══════════════════════════════════════════════════════════ */

.chat-attach {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .12s, color .12s, transform .08s;
  flex-shrink: 0;
  align-self: flex-end;
}
.chat-attach:hover {
  background: var(--accent-soft);
  color: var(--accent);
  transform: scale(1.05);
}
.chat-attach.has-image {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.chat-input-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.chat-image-preview {
  position: relative;
  align-self: flex-start;
  max-width: 140px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-3);
}
.chat-image-preview img {
  display: block;
  max-width: 140px;
  max-height: 100px;
  object-fit: cover;
}
#assistant-image-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 12px;
  display: grid; place-items: center;
}
#assistant-image-remove:hover { background: rgba(0,0,0,.8); }

/* Bubble z załączonym obrazem */
.chat-bubble .chat-msg img.chat-bubble-image {
  display: block;
  max-width: 280px;
  max-height: 200px;
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: zoom-in;
}

/* System hint banner — proaktywne podpowiedzi w widokach operacyjnych */
.system-hint {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  margin: 8px 0;
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 100%);
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  animation: hintIn .3s ease both;
}
@keyframes hintIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.system-hint-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--accent);
}
.system-hint-body { flex: 1; min-width: 0; line-height: 1.45; }
.system-hint-body strong { color: var(--accent); }
.system-hint-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
  font-size: 14px;
  align-self: flex-start;
}
.system-hint-dismiss:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════════════
   v5.1: ROLE księgowości + INWENTARYZACJA
   ═══════════════════════════════════════════════════════════ */

/* Role badges */
.role-badge.accountant {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}
:root[data-theme="dark"] .role-badge.accountant {
  background: linear-gradient(135deg, rgba(251, 191, 36, .15) 0%, rgba(251, 191, 36, .25) 100%);
  color: #fcd34d;
}

/* Kolumna kosztu w items table */
.item-cost-cell {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--muted);
  text-align: right;
  padding-right: 8px;
}
.item-cost-cell.has-cost { color: var(--text); font-weight: 500; }
.item-cost-empty { color: var(--muted-2); font-style: italic; font-size: 11px; }

/* Stocktake — lista wpisów */
.stocktake-line {
  display: grid;
  grid-template-columns: 32px 1fr 90px 90px 90px auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.stocktake-line:last-child { border-bottom: none; }
.stocktake-line:hover { background: var(--surface-hover); }
.stocktake-line .item-icon {
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  display: grid; place-items: center;
  color: var(--muted);
}
.stocktake-name { display: flex; flex-direction: column; min-width: 0 }
.stocktake-name strong { font-size: 13px; }
.stocktake-name .sku { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.stocktake-qty { font-variant-numeric: tabular-nums; text-align: right; }
.stocktake-qty-label { font-size: 10px; color: var(--muted); display: block; margin-bottom: 2px; letter-spacing: .03em; text-transform: uppercase }
.stocktake-diff {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
  font-size: 13.5px;
}
.stocktake-diff.diff-ok { color: var(--green); }
.stocktake-diff.diff-down { color: var(--red); }
.stocktake-diff.diff-up { color: var(--orange, #f59e0b); }
.stocktake-actions {
  display: flex;
  gap: 4px;
}

.stocktake-header-row {
  display: grid;
  grid-template-columns: 32px 1fr 90px 90px 90px auto;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .04em;
}

/* Karta podsumowania końcowego */
.stocktake-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  padding: 18px;
  background: var(--surface-3);
  border-radius: var(--r-sm);
  margin-bottom: 14px;
}
.stocktake-summary-tile {
  text-align: center;
}
.stocktake-summary-value {
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stocktake-summary-value.diff-down { color: var(--red); }
.stocktake-summary-value.diff-up { color: var(--orange, #f59e0b); }
.stocktake-summary-value.diff-ok { color: var(--green); }
.stocktake-summary-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px;
}

/* Historia stocktake */
.stocktake-history-entry {
  display: grid;
  grid-template-columns: 130px 1fr 90px 100px auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.stocktake-history-entry:last-child { border-bottom: none; }
.stocktake-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.stocktake-status-pill.in_progress { background: var(--accent-soft); color: var(--accent); }
.stocktake-status-pill.finished { background: var(--green-soft, rgba(16,185,129,.12)); color: var(--green); }
.stocktake-status-pill.canceled { background: var(--surface-3); color: var(--muted); }

@media (max-width: 800px) {
  .stocktake-line, .stocktake-header-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .stocktake-header-row { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   v5.2: SKANER KODÓW KRESKOWYCH
   ═══════════════════════════════════════════════════════════ */

.scan-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.scan-wrap input {
  flex: 1;
  padding-right: 38px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.scan-btn {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-left: none;
  color: var(--muted);
  padding: 0 10px;
  cursor: pointer;
  border-top-right-radius: var(--r-xs);
  border-bottom-right-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
  min-width: 38px;
}
.scan-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.scan-btn:active { transform: scale(0.96); }

.barcode-modal {
  width: 90vw;
  max-width: 520px;
  border: none;
  padding: 0;
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg, var(--shadow));
}
.barcode-modal::backdrop {
  background: rgba(0,0,0,.7);
}
.barcode-modal-content {
  display: flex;
  flex-direction: column;
}
.barcode-video-wrap {
  position: relative;
  width: 100%;
  background: #000;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.barcode-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.barcode-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.barcode-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 3px solid var(--accent);
}
.barcode-corner.tl { top: 18%; left: 12%; border-right: none; border-bottom: none; }
.barcode-corner.tr { top: 18%; right: 12%; border-left: none; border-bottom: none; }
.barcode-corner.bl { bottom: 18%; left: 12%; border-right: none; border-top: none; }
.barcode-corner.br { bottom: 18%; right: 12%; border-left: none; border-top: none; }
.barcode-scanline {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 8px var(--accent);
  animation: scanline 2s linear infinite;
}
@keyframes scanline {
  0%   { top: 22%; opacity: 0; }
  50%  { opacity: 1; }
  100% { top: 78%; opacity: 0; }
}
.barcode-status {
  text-align: center;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--surface-3);
  font-variant-numeric: tabular-nums;
}
.barcode-status.found {
  color: var(--green);
  font-weight: 600;
}
.barcode-status.error {
  color: var(--red);
}
.barcode-modal .modal-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
}
.barcode-modal .modal-footer-spacer { flex: 1; }
.barcode-modal .modal-header {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.barcode-modal .modal-title { font-weight: 600; font-size: 14px; }

@media (max-width: 600px) {
  .barcode-modal { width: 96vw; max-height: 92vh; }
  .barcode-video-wrap { aspect-ratio: 3 / 4; }
}

/* ═══════════════════════════════════════════════════════════
   v5.3: SZCZEGÓŁY INWENTARYZACJI + DRUK + EDYCJA
   ═══════════════════════════════════════════════════════════ */

.stocktake-detail-table {
  display: flex;
  flex-direction: column;
}
.stocktake-detail-row {
  display: grid;
  grid-template-columns: 110px 1fr 80px 80px 70px 1fr 110px;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.stocktake-detail-row.header {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--surface-3);
  padding: 8px 14px;
}
.stocktake-detail-row:last-child { border-bottom: none; }
.stocktake-detail-row .sku {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}
.stocktake-detail-row .qty-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.stocktake-detail-row .diff-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.stocktake-detail-row .diff-num.diff-ok { color: var(--green); }
.stocktake-detail-row .diff-num.diff-down { color: var(--red); }
.stocktake-detail-row .diff-num.diff-up { color: var(--orange, #f59e0b); }
.stocktake-detail-row .notes {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stocktake-detail-row.editing { background: var(--accent-soft); }
.stocktake-detail-row.editing .qty-num input,
.stocktake-detail-row.editing .notes input {
  width: 100%;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}
.stocktake-detail-row.editing .qty-num input { text-align: right; }
.stocktake-row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.stocktake-row-actions button {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
}
.stocktake-row-actions button:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.stocktake-row-actions .danger { color: var(--red); }
.stocktake-row-actions .danger:hover { background: rgba(220,38,38,0.1); }
.stocktake-row-actions .primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

@media (max-width: 800px) {
  .stocktake-detail-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .stocktake-detail-row.header { display: none; }
  .stocktake-detail-row > * { font-size: 12px; }
}

/* Karta inwentaryzacji w historii - klikalna */
.stocktake-history-entry.clickable {
  cursor: pointer;
  transition: background .12s;
}
.stocktake-history-entry.clickable:hover {
  background: var(--surface-hover);
}
.stocktake-history-entry .row-arrow {
  color: var(--muted);
  font-size: 16px;
}

/* Stocktake card-header z lepszym wrapem */
#stocktake-detail-card .card-header {
  flex-wrap: wrap;
  gap: 8px;
}
#stocktake-detail-card .section-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ═══ DRUK ═══ */
.print-only { display: none; }

@media print {
  /* Reset całej strony do czystego A4 */
  @page {
    size: A4 portrait;
    margin: 1.5cm 1.2cm;
  }

  html, body {
    background: white !important;
    color: black !important;
    font-size: 11pt;
  }

  /* Ukryj wszystko poza zawartością druku */
  .sidebar, .topbar, .nav-icon,
  .no-print,
  #ai-bell-dropdown, #ai-bell, .bell-wrap,
  .system-hint,
  .scan-btn, .chat-attach, .chat-send,
  .assistant-card,
  .toast, dialog:not([open]) { display: none !important; }

  /* Pokaż tylko aktywny widok */
  .view:not(.active) { display: none !important; }

  /* Ukryj wszystkie elementy poza szczegółami stocktake */
  #stocktake-detail-view ~ *,
  #stocktake-empty,
  #stocktake-active,
  #stocktake-history-view { display: none !important; }

  /* Layout zmienić - content na pełnej szerokości */
  .content {
    margin-left: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  .layout { display: block !important; }

  /* Pokaż elementy print-only */
  .print-only { display: block !important; }

  /* Header drukowany */
  .print-header {
    text-align: center;
    margin-bottom: 1.2cm;
    border-bottom: 2px solid black;
    padding-bottom: 0.6cm;
  }
  .print-header h1 {
    font-size: 18pt;
    margin: 0 0 8pt;
    letter-spacing: 0.03em;
  }
  .print-meta {
    font-size: 11pt;
    text-align: left;
    line-height: 1.6;
  }
  .print-meta strong { display: inline-block; min-width: 4.5cm; }

  /* Karta-cała na białym */
  .card {
    background: white !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .card-header { display: none !important; }

  /* Summary tile w druku - mniejsze, w jednym rzędzie */
  .stocktake-summary {
    background: none !important;
    border: 1px solid #999;
    padding: 8pt;
    margin-bottom: 12pt;
    page-break-inside: avoid;
  }
  .stocktake-summary-value { font-size: 16pt; color: black !important; }
  .stocktake-summary-label { font-size: 9pt; color: #555 !important; }

  /* Tabela linii - klasyczna z borderami */
  .stocktake-detail-row {
    display: grid !important;
    grid-template-columns: 2.5cm 1fr 1.2cm 1.2cm 1cm 1fr !important;
    border-bottom: 1px solid #ccc !important;
    padding: 4pt 6pt !important;
    font-size: 10pt !important;
    color: black !important;
    page-break-inside: avoid;
  }
  .stocktake-detail-row.header {
    background: #eee !important;
    color: black !important;
    font-weight: 700 !important;
    border-bottom: 2px solid black !important;
  }
  .stocktake-detail-row .diff-num.diff-ok { color: #060 !important; }
  .stocktake-detail-row .diff-num.diff-down { color: #c00 !important; }
  .stocktake-detail-row .diff-num.diff-up { color: #c60 !important; }
  .stocktake-detail-row .sku, .stocktake-detail-row .notes { color: #444 !important; }
  .stocktake-row-actions { display: none !important; }

  /* Stopka z podpisami */
  .print-footer {
    margin-top: 2.5cm;
    page-break-inside: avoid;
  }
  .signature-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1cm;
    margin-bottom: 1cm;
  }
  .signature-box {
    text-align: center;
  }
  .signature-line {
    border-bottom: 1px solid black;
    height: 1.8cm;
  }
  .signature-label {
    font-size: 9pt;
    margin-top: 4pt;
    color: #333;
  }
  .print-footer-meta {
    font-size: 9pt;
    color: #555;
    text-align: right;
    border-top: 1px solid #ccc;
    padding-top: 6pt;
  }
}

/* ═══════════════════════════════════════════════════════════
   v5.5: MODUŁ FINANSE MAGAZYNU
   ═══════════════════════════════════════════════════════════ */

.finance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.finance-kpi-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 18px 22px;
  position: relative;
  overflow: hidden;
}
.finance-kpi-tile.primary {
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 80%);
  border-color: var(--accent);
}
.finance-kpi-tile.primary .finance-kpi-value { color: var(--accent); }

.finance-kpi-label {
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.finance-kpi-value {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 2px;
  letter-spacing: -.01em;
}
.finance-kpi-sub {
  font-size: 12px;
  color: var(--muted);
}
.finance-kpi-value.positive { color: var(--green); }
.finance-kpi-value.negative { color: var(--red); }
.finance-kpi-value.neutral { color: var(--text); }

/* Lista grup wartościowo */
.finance-groups {
  display: flex;
  flex-direction: column;
}
.finance-group-row {
  display: grid;
  grid-template-columns: 1fr 80px 140px 140px 120px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.finance-group-row:last-child { border-bottom: none; }
.finance-group-row .group-name { font-weight: 500; }
.finance-group-row .group-count { font-size: 11.5px; color: var(--muted); }
.finance-group-row .group-qty,
.finance-group-row .group-value {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.finance-group-row .group-value { font-weight: 600; }
.finance-group-row .group-bar-wrap {
  width: 100px;
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}
.finance-group-row .group-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
  transition: width .3s ease-out;
}

/* Top list - powtarzalny komponent */
.finance-top-list {
  display: flex;
  flex-direction: column;
}
.finance-top-row {
  display: grid;
  grid-template-columns: 28px 1fr 100px 100px 110px;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.finance-top-row:last-child { border-bottom: none; }
.finance-top-row:hover { background: var(--surface-hover); }
.finance-top-rank {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--surface-3);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.finance-top-row:nth-child(1) .finance-top-rank { background: linear-gradient(135deg, #fde047, #fbbf24); color: #78350f; }
.finance-top-row:nth-child(2) .finance-top-rank { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #374151; }
.finance-top-row:nth-child(3) .finance-top-rank { background: linear-gradient(135deg, #fdba74, #c2410c); color: white; }
.finance-top-name { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.finance-top-name strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finance-top-name .sku-mono { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.finance-top-qty, .finance-top-value {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 13px;
}
.finance-top-value { font-weight: 600; }

.finance-subhead {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.finance-rotation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 16px;
}
.finance-rotation-list .finance-top-row { grid-template-columns: 28px 1fr 80px 90px; }

.finance-chart-wrap {
  position: relative;
  height: 280px;
  padding: 14px 16px;
}

@media (max-width: 900px) {
  .finance-rotation-grid { grid-template-columns: 1fr; gap: 16px; }
  .finance-group-row { grid-template-columns: 1fr 60px 100px; gap: 8px; font-size: 12px; }
  .finance-group-row .group-bar-wrap, .finance-group-row .group-count { display: none; }
  .finance-top-row { grid-template-columns: 24px 1fr 80px 90px; font-size: 12px; }
  .finance-top-row .finance-top-qty:not(.always-show) { display: none; }
}

/* Print mode dla raportu finansowego */
@media print {
  #view-finance .finance-kpi-tile {
    background: white !important;
    border: 1px solid #999 !important;
    page-break-inside: avoid;
  }
  #view-finance .finance-kpi-value { color: black !important; }
  #view-finance .finance-chart-wrap canvas { max-width: 100%; height: 200px !important; }
  #view-finance .finance-rotation-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   v5.6: PRZEWIJALNE LISTY (long lists scroll)
   ═══════════════════════════════════════════════════════════ */

.list-scroll {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.list-scroll::-webkit-scrollbar { width: 8px; }
.list-scroll::-webkit-scrollbar-track { background: transparent; }
.list-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.list-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Aplikuję do długich list */
#audit-list,
#stocktake-history-list,
#stocktake-lines,
#stocktake-detail-lines,
#backups-list,
#login-history-list,
#users-list,
#issues-list,
#receipts-list,
#ai-memory-list,
#finance-noprices-list {
  max-height: 65vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#audit-list::-webkit-scrollbar,
#stocktake-history-list::-webkit-scrollbar,
#stocktake-lines::-webkit-scrollbar,
#stocktake-detail-lines::-webkit-scrollbar,
#backups-list::-webkit-scrollbar,
#login-history-list::-webkit-scrollbar,
#users-list::-webkit-scrollbar,
#issues-list::-webkit-scrollbar,
#receipts-list::-webkit-scrollbar,
#ai-memory-list::-webkit-scrollbar,
#finance-noprices-list::-webkit-scrollbar {
  width: 8px;
}
#audit-list::-webkit-scrollbar-thumb,
#stocktake-history-list::-webkit-scrollbar-thumb,
#stocktake-lines::-webkit-scrollbar-thumb,
#stocktake-detail-lines::-webkit-scrollbar-thumb,
#backups-list::-webkit-scrollbar-thumb,
#login-history-list::-webkit-scrollbar-thumb,
#users-list::-webkit-scrollbar-thumb,
#issues-list::-webkit-scrollbar-thumb,
#receipts-list::-webkit-scrollbar-thumb,
#ai-memory-list::-webkit-scrollbar-thumb,
#finance-noprices-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

/* Bell dropdown scroll dla wielu alertów */
.bell-dropdown-list {
  max-height: 50vh;
  overflow-y: auto;
}

/* Mobile - skróć max-height */
@media (max-width: 700px) {
  #audit-list, #stocktake-history-list, #stocktake-lines, #stocktake-detail-lines,
  #backups-list, #login-history-list, #users-list, #issues-list, #receipts-list,
  #ai-memory-list, #finance-noprices-list {
    max-height: 55vh;
  }
}

/* W druku zniszcz scrolly - pokaż całe listy */
@media print {
  .list-scroll, #stocktake-detail-lines, #audit-list, #backups-list,
  #stocktake-history-list, #stocktake-lines, #issues-list, #receipts-list {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v5.6: Wznów inwentaryzację - przycisk + status na finished
   ═══════════════════════════════════════════════════════════ */

#btn-stocktake-detail-reopen {
  color: var(--accent);
  border-color: var(--accent);
}
#btn-stocktake-detail-reopen:hover {
  background: var(--accent-soft);
}

/* ═══════════════════════════════════════════════════════════
   v5.6: SCROLLOWANE DŁUGIE LISTY
   ═══════════════════════════════════════════════════════════ */

/* Audit log, ruchy magazynowe, backupy - max 60vh z fade */
#audit-list,
#issues-list,
#receipts-list,
#backups-list,
#users-list,
#login-history-list,
#ai-memory-list,
#stocktake-history-list,
#finance-top-items,
#finance-top-parties,
#finance-noprices-list,
#finance-groups-list,
#stocktake-lines,
#stocktake-detail-lines {
  max-height: min(65vh, 720px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Custom scrollbar dla WebKit */
#audit-list::-webkit-scrollbar,
#issues-list::-webkit-scrollbar,
#receipts-list::-webkit-scrollbar,
#backups-list::-webkit-scrollbar,
#users-list::-webkit-scrollbar,
#login-history-list::-webkit-scrollbar,
#ai-memory-list::-webkit-scrollbar,
#stocktake-history-list::-webkit-scrollbar,
#finance-top-items::-webkit-scrollbar,
#finance-top-parties::-webkit-scrollbar,
#finance-noprices-list::-webkit-scrollbar,
#finance-groups-list::-webkit-scrollbar,
#stocktake-lines::-webkit-scrollbar,
#stocktake-detail-lines::-webkit-scrollbar,
#items-table::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#audit-list::-webkit-scrollbar-track,
#issues-list::-webkit-scrollbar-track,
#receipts-list::-webkit-scrollbar-track,
#backups-list::-webkit-scrollbar-track,
#users-list::-webkit-scrollbar-track,
#login-history-list::-webkit-scrollbar-track,
#ai-memory-list::-webkit-scrollbar-track,
#stocktake-history-list::-webkit-scrollbar-track,
#finance-top-items::-webkit-scrollbar-track,
#finance-top-parties::-webkit-scrollbar-track,
#finance-noprices-list::-webkit-scrollbar-track,
#finance-groups-list::-webkit-scrollbar-track,
#stocktake-lines::-webkit-scrollbar-track,
#stocktake-detail-lines::-webkit-scrollbar-track,
#items-table::-webkit-scrollbar-track {
  background: transparent;
}
#audit-list::-webkit-scrollbar-thumb,
#issues-list::-webkit-scrollbar-thumb,
#receipts-list::-webkit-scrollbar-thumb,
#backups-list::-webkit-scrollbar-thumb,
#users-list::-webkit-scrollbar-thumb,
#login-history-list::-webkit-scrollbar-thumb,
#ai-memory-list::-webkit-scrollbar-thumb,
#stocktake-history-list::-webkit-scrollbar-thumb,
#finance-top-items::-webkit-scrollbar-thumb,
#finance-top-parties::-webkit-scrollbar-thumb,
#finance-noprices-list::-webkit-scrollbar-thumb,
#finance-groups-list::-webkit-scrollbar-thumb,
#stocktake-lines::-webkit-scrollbar-thumb,
#stocktake-detail-lines::-webkit-scrollbar-thumb,
#items-table::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
#audit-list::-webkit-scrollbar-thumb:hover,
#issues-list::-webkit-scrollbar-thumb:hover,
#receipts-list::-webkit-scrollbar-thumb:hover,
#backups-list::-webkit-scrollbar-thumb:hover,
#users-list::-webkit-scrollbar-thumb:hover,
#login-history-list::-webkit-scrollbar-thumb:hover,
#ai-memory-list::-webkit-scrollbar-thumb:hover,
#stocktake-history-list::-webkit-scrollbar-thumb:hover,
#finance-top-items::-webkit-scrollbar-thumb:hover,
#finance-top-parties::-webkit-scrollbar-thumb:hover,
#finance-noprices-list::-webkit-scrollbar-thumb:hover,
#finance-groups-list::-webkit-scrollbar-thumb:hover,
#stocktake-lines::-webkit-scrollbar-thumb:hover,
#stocktake-detail-lines::-webkit-scrollbar-thumb:hover,
#items-table::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* W druku - unset max-height żeby wszystko się wydrukowało */
@media print {
  #audit-list, #issues-list, #receipts-list, #backups-list,
  #users-list, #ai-memory-list, #stocktake-history-list,
  #finance-top-items, #finance-top-parties, #finance-noprices-list,
  #finance-groups-list, #stocktake-lines, #stocktake-detail-lines,
  #items-table {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v5.6: SCROLLABLE LISTS + REOPEN STOCKTAKE
   ═══════════════════════════════════════════════════════════ */

/* Generyczna klasa dla każdej długiej listy */
.scrollable-list {
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.scrollable-list::-webkit-scrollbar { width: 8px; }
.scrollable-list::-webkit-scrollbar-track { background: transparent; }
.scrollable-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.scrollable-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Aplikuj domyślnie do kontenerów które wyświetlają duże listy */
#audit-list,
#mov-list-issues,
#mov-list-receipts,
#login-history-list,
#backups-list,
#users-list,
#ai-memory-list,
#stocktake-history-list,
#stocktake-lines,
#stocktake-detail-lines,
#finance-top-items,
#finance-top-parties,
#finance-noprices-list,
#reports-output {
  max-height: 65vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Webkit scrollbar dla wszystkich */
#audit-list::-webkit-scrollbar,
#mov-list-issues::-webkit-scrollbar,
#mov-list-receipts::-webkit-scrollbar,
#login-history-list::-webkit-scrollbar,
#backups-list::-webkit-scrollbar,
#users-list::-webkit-scrollbar,
#ai-memory-list::-webkit-scrollbar,
#stocktake-history-list::-webkit-scrollbar,
#stocktake-lines::-webkit-scrollbar,
#stocktake-detail-lines::-webkit-scrollbar,
#finance-top-items::-webkit-scrollbar,
#finance-top-parties::-webkit-scrollbar,
#finance-noprices-list::-webkit-scrollbar,
#reports-output::-webkit-scrollbar { width: 8px; }

#audit-list::-webkit-scrollbar-thumb,
#mov-list-issues::-webkit-scrollbar-thumb,
#mov-list-receipts::-webkit-scrollbar-thumb,
#login-history-list::-webkit-scrollbar-thumb,
#backups-list::-webkit-scrollbar-thumb,
#users-list::-webkit-scrollbar-thumb,
#ai-memory-list::-webkit-scrollbar-thumb,
#stocktake-history-list::-webkit-scrollbar-thumb,
#stocktake-lines::-webkit-scrollbar-thumb,
#stocktake-detail-lines::-webkit-scrollbar-thumb,
#finance-top-items::-webkit-scrollbar-thumb,
#finance-top-parties::-webkit-scrollbar-thumb,
#finance-noprices-list::-webkit-scrollbar-thumb,
#reports-output::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

/* Tabela towarów - przewijalna jeśli dużo wierszy */
#items-table {
  max-height: 70vh;
  overflow-y: auto;
}
#items-table .table-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-3);
}

/* W trybie print wyłącz max-height żeby pokazać wszystko */
@media print {
  .scrollable-list,
  #audit-list, #mov-list-issues, #mov-list-receipts,
  #login-history-list, #backups-list, #users-list,
  #ai-memory-list, #stocktake-history-list,
  #stocktake-lines, #stocktake-detail-lines,
  #finance-top-items, #finance-top-parties,
  #finance-noprices-list, #reports-output,
  #items-table {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Przycisk Przywróć w detalu inwentaryzacji */
.btn-reopen-stocktake {
  background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent)));
  color: white;
  border: none;
}
.btn-reopen-stocktake:hover { filter: brightness(1.1); }

/* Tooltip pole ceny w przyjęciach - wskazówka WAC */
.wac-hint {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   v5.6: PRZEWIJALNE LISTY (audit, login_history, etc.)
   ═══════════════════════════════════════════════════════════ */

/* Audit log lista - max 60vh i scroll */
#audit-list,
#login-history-list,
#backups-list,
#users-list,
#ai-memory-list,
#stocktake-history-list,
#finance-noprices-list,
#finance-top-items,
#finance-top-parties,
.mov-list#issues-list,
.mov-list#receipts-list,
.mov-list#reports-output {
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Lista wpisów stocktake aktywnej inwentaryzacji - mniej miejsca */
#stocktake-lines {
  max-height: 50vh;
  overflow-y: auto;
}

/* Lista wpisów w detail view - większy limit */
#stocktake-detail-lines {
  max-height: 70vh;
  overflow-y: auto;
}

/* Stylowanie scrollbara - lekkie */
#audit-list::-webkit-scrollbar,
#login-history-list::-webkit-scrollbar,
#backups-list::-webkit-scrollbar,
#users-list::-webkit-scrollbar,
#ai-memory-list::-webkit-scrollbar,
#stocktake-history-list::-webkit-scrollbar,
#stocktake-lines::-webkit-scrollbar,
#stocktake-detail-lines::-webkit-scrollbar,
#finance-noprices-list::-webkit-scrollbar,
#finance-top-items::-webkit-scrollbar,
#finance-top-parties::-webkit-scrollbar,
.mov-list::-webkit-scrollbar { width: 8px; height: 8px; }

#audit-list::-webkit-scrollbar-thumb,
#login-history-list::-webkit-scrollbar-thumb,
#backups-list::-webkit-scrollbar-thumb,
#users-list::-webkit-scrollbar-thumb,
#ai-memory-list::-webkit-scrollbar-thumb,
#stocktake-history-list::-webkit-scrollbar-thumb,
#stocktake-lines::-webkit-scrollbar-thumb,
#stocktake-detail-lines::-webkit-scrollbar-thumb,
#finance-noprices-list::-webkit-scrollbar-thumb,
#finance-top-items::-webkit-scrollbar-thumb,
#finance-top-parties::-webkit-scrollbar-thumb,
.mov-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
#audit-list::-webkit-scrollbar-thumb:hover,
#login-history-list::-webkit-scrollbar-thumb:hover,
#backups-list::-webkit-scrollbar-thumb:hover,
#users-list::-webkit-scrollbar-thumb:hover,
#ai-memory-list::-webkit-scrollbar-thumb:hover,
#stocktake-history-list::-webkit-scrollbar-thumb:hover,
#stocktake-lines::-webkit-scrollbar-thumb:hover,
#stocktake-detail-lines::-webkit-scrollbar-thumb:hover,
#finance-noprices-list::-webkit-scrollbar-thumb:hover,
#finance-top-items::-webkit-scrollbar-thumb:hover,
#finance-top-parties::-webkit-scrollbar-thumb:hover,
.mov-list::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Sticky header w listach z scrollem - opcjonalne dla audit/users */
.scroll-list-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}

/* Hint przy końcu listy - "scroll for more" */
.list-scroll-hint {
  position: sticky;
  bottom: 0;
  padding: 6px 14px;
  background: linear-gradient(to top, var(--surface), transparent);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}

/* W druku - cofnij scroll */
@media print {
  #audit-list,
  #login-history-list,
  #backups-list,
  #users-list,
  #ai-memory-list,
  #stocktake-history-list,
  #stocktake-lines,
  #stocktake-detail-lines,
  #finance-noprices-list,
  #finance-top-items,
  #finance-top-parties,
  .mov-list {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v5.8: GROUP PICKER w modal towaru
   ═══════════════════════════════════════════════════════════ */
.group-picker {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.group-picker select {
  flex: 1;
  min-width: 0;
}
.group-picker .btn {
  white-space: nowrap;
  padding: 0 10px;
  font-size: 12px;
  align-self: stretch;
}
.group-picker-new {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin-top: 6px;
  padding: 8px;
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  border: 1px solid var(--accent);
  animation: groupPickerSlideIn .15s ease-out;
}
.group-picker-new input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}
.group-picker-new .btn {
  white-space: nowrap;
  padding: 0 10px;
  font-size: 12px;
}

@keyframes groupPickerSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* W mobile - column layout */
@media (max-width: 600px) {
  .group-picker-new { flex-direction: column; }
  .group-picker-new .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   v5.10: RAPORT POZYCJE DO ZAMÓWIENIA
   ═══════════════════════════════════════════════════════════ */

/* Pasek statusu z 4 kafelkami */
.report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
}
.report-summary-tile {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}
.report-summary-tile.critical {
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.3);
}
.report-summary-tile.critical .tile-value { color: #dc2626; }
.report-summary-tile.warn {
  background: rgba(245, 158, 11, 0.05);
  border-color: rgba(245, 158, 11, 0.3);
}
.report-summary-tile.warn .tile-value { color: #d97706; }
.report-summary-tile.ok {
  background: rgba(34, 197, 94, 0.05);
  border-color: rgba(34, 197, 94, 0.3);
}
.report-summary-tile.ok .tile-value { color: #16a34a; }
.report-summary-tile.noth { background: var(--surface-3); }
.report-summary-tile.noth .tile-value { color: var(--muted); }

.tile-value {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tile-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 500;
  margin-top: 4px;
}

/* Wiersze raportu */
.report-row {
  display: grid;
  grid-template-columns: 130px 110px 1fr 130px 70px 70px 80px;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
  transition: background .12s;
}
.report-row:hover { background: var(--surface-hover); }
.report-row:last-child { border-bottom: none; }

.report-row-header {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--surface-3);
  padding: 8px 16px;
  cursor: default;
}
.report-row-header:hover { background: var(--surface-3); }

.report-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.report-row .sku-mono { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.report-row .item-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-row .group-cell { font-size: 11.5px; }

/* Status cell - kropka + tekst */
.status-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

/* Wiersze - kolorowanie wg statusu (lewa krawędź + status dot) */
.report-row.status-critical {
  border-left: 3px solid #dc2626;
  padding-left: 13px;
}
.report-row.status-critical .status-dot {
  background: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
  animation: pulse-red 1.6s ease-in-out infinite;
}
.report-row.status-critical .status-text { color: #dc2626; }
.report-row.status-critical .qty-cell { color: #dc2626; font-weight: 700; }
.report-row.status-critical .deficit-value { color: #dc2626; }

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.1); }
}

.report-row.status-warn {
  border-left: 3px solid #f59e0b;
  padding-left: 13px;
}
.report-row.status-warn .status-dot { background: #f59e0b; }
.report-row.status-warn .status-text { color: #d97706; }
.report-row.status-warn .qty-cell { color: #d97706; font-weight: 600; }

.report-row.status-ok .status-dot { background: #22c55e; }
.report-row.status-ok .status-text { color: #16a34a; }

.report-row.status-noth .status-dot { background: #94a3b8; }
.report-row.status-noth .status-text { color: var(--muted); }

/* Mobile - skrócony layout */
@media (max-width: 800px) {
  .report-row {
    grid-template-columns: 90px 1fr 70px 70px;
    gap: 8px;
    font-size: 12px;
  }
  .report-row .sku-mono,
  .report-row .group-cell {
    display: none;
  }
  .report-row-header > div:nth-child(2),
  .report-row-header > div:nth-child(4) {
    display: none;
  }
}

/* Print mode */
@media print {
  .report-summary-tile {
    border: 1px solid #999 !important;
    page-break-inside: avoid;
  }
  .report-row.status-critical { background: #fee2e2 !important; }
  .report-row.status-warn { background: #fef3c7 !important; }
  .status-dot { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   v5.11: KLIKALNE KAFELKI RAPORTU + FILTER BAR
   ═══════════════════════════════════════════════════════════ */

/* Tile jako <button> z hover/active states */
.report-summary-tile {
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  position: relative;
  outline: none;
  transition: transform .08s, box-shadow .15s;
}
.report-summary-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.report-summary-tile:active { transform: translateY(0); }
.report-summary-tile:focus-visible {
  box-shadow: 0 0 0 3px rgba(99,102,241,0.3);
}

/* Aktywny (klikniety) kafelek - akcent + checkmark */
.report-summary-tile.active {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
.report-summary-tile.critical.active {
  background: rgba(220, 38, 38, 0.12);
  outline-color: #dc2626;
}
.report-summary-tile.warn.active {
  background: rgba(245, 158, 11, 0.12);
  outline-color: #f59e0b;
}
.report-summary-tile.ok.active {
  background: rgba(34, 197, 94, 0.12);
  outline-color: #22c55e;
}
.report-summary-tile.noth.active {
  outline-color: #94a3b8;
  background: var(--surface-3);
}

/* Hint tekst u dołu kafelka */
.tile-click-hint,
.tile-active-hint {
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
  opacity: 0;
  transition: opacity .15s;
}
.report-summary-tile:hover .tile-click-hint {
  opacity: 1;
}
.report-summary-tile.active .tile-active-hint {
  opacity: 1;
  font-weight: 500;
  color: currentColor;
}
.report-summary-tile.critical.active .tile-active-hint { color: #dc2626; }
.report-summary-tile.warn.active .tile-active-hint { color: #d97706; }
.report-summary-tile.ok.active .tile-active-hint { color: #16a34a; }

/* Filter bar - pokazuje aktywny filtr + przycisk reset */
.report-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent);
  font-size: 13px;
}
.report-filter-bar .btn {
  margin-left: auto;
  font-size: 11px;
  padding: 4px 10px;
}

@media print {
  .tile-click-hint,
  .tile-active-hint,
  .report-filter-bar .btn { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   v5.12: Przycisk usuń ruch + zaktualizowany layout mov-item
   ═══════════════════════════════════════════════════════════ */
.mov-item.mov-with-actions {
  position: relative;
  padding-right: 50px;
}
.mov-delete-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity .15s, background .15s, transform .08s;
}
.mov-item:hover .mov-delete-btn {
  opacity: 1;
}
.mov-delete-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}
.mov-delete-btn:active {
  transform: translateY(-50%) scale(0.92);
}
.mov-price {
  margin-top: 2px;
}

@media print {
  .mov-delete-btn { display: none !important; }
}

/* Preview etykiet w modalu - Zebra wygląd */
.labels-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  background: #f4f4f5;
  border-radius: var(--r-sm);
}
.labels-preview-grid.zebra-preview {
  grid-template-columns: 1fr;
  max-width: 220px;
  margin: 0 auto;
}
.label-cell {
  background: white;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
  font-size: 11px;
}
.label-cell .label-sku {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}
.label-cell .label-name {
  font-size: 9px;
  margin-bottom: 4px;
  line-height: 1.3;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.label-cell .label-barcode svg {
  max-width: 100%;
}

/* ════════════════════════════════════════════════════════════════════
   v5.13: KOMPLETACJA + LOKALIZACJE + UNDO BUTTONS
   ════════════════════════════════════════════════════════════════════ */

/* ── Lokalizacja badge w liście towarów ── */
.loc-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1e40af;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, monospace);
  border-radius: 3px;
  letter-spacing: 0.3px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Cofnij własne (user) — odróżnia się od delete (admin) ── */
.mov-undo-btn {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  font-weight: 600;
}
.mov-undo-btn:hover {
  background: #fde68a;
  border-color: #f59e0b;
  color: #78350f;
}

/* ── Filtry pick list ── */
.picklist-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 18px;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 8px;
  width: fit-content;
}
.picklist-tab {
  padding: 7px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.picklist-tab:hover {
  background: rgba(255,255,255,0.7);
  color: #1e293b;
}
.picklist-tab.active {
  background: #fff;
  color: #0ea5e9;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.picklist-tab .tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  background: #e2e8f0;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  text-align: center;
}
.picklist-tab.active .tab-count {
  background: #e0f2fe;
  color: #0369a1;
}

/* ── Pick list cards ── */
.picklist-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.pick-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.pick-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.pick-card-gray  { border-left-color: #94a3b8; }
.pick-card-blue  { border-left-color: #3b82f6; background: linear-gradient(to right, #eff6ff 0%, #fff 30%); }
.pick-card-green { border-left-color: #10b981; }
.pick-card-red   { border-left-color: #ef4444; opacity: 0.7; }
.pick-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.pick-number {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: 13px;
  color: #1e40af;
  letter-spacing: 0.3px;
}
.pick-card-body { font-size: 13px; }
.pick-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #1e293b;
  line-height: 1.3;
}
.pick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
}
.pick-meta > span { white-space: nowrap; }

/* ── Status badges ── */
.pick-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  letter-spacing: 0.2px;
}
.pick-status-gray  { background: #f1f5f9; color: #475569; }
.pick-status-blue  { background: #dbeafe; color: #1e40af; }
.pick-status-green { background: #d1fae5; color: #065f46; }
.pick-status-red   { background: #fee2e2; color: #991b1b; }

/* ── Pick list detail modal ── */
.modal-wide { max-width: 92vw; width: 1000px; }
@media (max-width: 700px) {
  .modal-wide { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
}
.picklist-detail-content { padding: 4px 0; }
.pick-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 14px;
}
.pick-detail-num {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 20px;
  font-weight: 800;
  color: #1e40af;
}
.pick-detail-meta {
  background: #f8fafc;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
}
.pick-detail-meta strong { color: #475569; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; margin-right: 6px; }

/* ── Progress bar ── */
.pick-progress { margin-bottom: 14px; }
.pick-progress-track {
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.pick-progress-fill {
  height: 100%;
  background: linear-gradient(to right, #0ea5e9, #06b6d4);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.pick-progress-text {
  margin-top: 4px;
  font-size: 12px;
  color: #475569;
  font-weight: 500;
}

/* ── Scan bar ── */
.pick-scan-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px;
  background: linear-gradient(135deg, #fef3c7, #fef9c3);
  border: 1px dashed #f59e0b;
  border-radius: 6px;
}
.pick-scan-bar input {
  flex: 1;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 600;
  font-size: 14px;
}

/* ── Pick list lines ── */
.pick-lines { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.pick-line {
  display: grid;
  grid-template-columns: 110px 1fr 70px 100px 130px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.15s;
}
.pick-line-head {
  background: #f8fafc;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.4px;
  border: none;
  padding: 6px 10px;
}
.pick-line.picked-full {
  background: linear-gradient(to right, #f0fdf4, #fff);
  border-color: #86efac;
}
.pick-line.picked-over {
  background: linear-gradient(to right, #fef3c7, #fff);
  border-color: #fcd34d;
}
.pick-line.stock-low {
  background: linear-gradient(to right, #fef2f2, #fff);
  border-color: #fecaca;
}
.pl-loc { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; color: #1e40af; }
.loc-pill {
  display: inline-block;
  padding: 2px 8px;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.pl-item-name { font-weight: 600; line-height: 1.25; color: #1e293b; }
.pl-sku { font-family: var(--mono, ui-monospace, monospace); }
.pl-warn { color: #b91c1c; font-weight: 600; }
.pl-qty.num, .pl-picked.num { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pl-qty-input {
  width: 60px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pl-actions { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.pl-actions .btn-sm { padding: 3px 8px; font-size: 11px; }
.pick-add-line-wrap { padding: 8px 4px; text-align: center; }

/* ── Pick detail action bar ── */
.pick-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0 4px;
  border-top: 1px solid #e2e8f0;
  margin-top: 8px;
}
.btn.success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: 1px solid #047857;
}
.btn.success:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669, #047857);
}
.btn.success:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #94a3b8;
}

/* ── Pick list create modal ── */
.pcl-number-display {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-left: 3px solid #3b82f6;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pcl-number-display strong {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 17px;
  color: #1e40af;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* ── Pick add line - search results ── */
.pal-search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #f8fafc;
}
.pal-search-results:empty { display: none; }
.pal-result {
  display: grid;
  grid-template-columns: 110px 1fr 100px 80px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.pal-result:last-child { border-bottom: none; }
.pal-result:hover { background: #eff6ff; }
.pal-result-sku { font-family: var(--mono, ui-monospace, monospace); font-weight: 600; color: #1e40af; }
.pal-result-name { color: #1e293b; }
.pal-result-loc { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: #1e40af; }
.pal-result-qty { text-align: right; }

/* ── Mobile tuning ── */
@media (max-width: 600px) {
  .pick-line {
    grid-template-columns: 1fr 70px 90px;
    grid-template-areas:
      "loc loc loc"
      "name qty picked"
      "actions actions actions";
    gap: 6px;
    padding: 10px;
  }
  .pick-line-head { display: none; }
  .pl-loc { grid-area: loc; }
  .pl-name { grid-area: name; }
  .pl-qty { grid-area: qty; }
  .pl-picked { grid-area: picked; }
  .pl-actions { grid-area: actions; justify-content: flex-start; }
  .picklist-list { grid-template-columns: 1fr; }
  .pal-result {
    grid-template-columns: 90px 1fr;
    grid-template-areas: "sku name" "loc qty";
  }
  .pal-result-sku { grid-area: sku; }
  .pal-result-name { grid-area: name; }
  .pal-result-loc { grid-area: loc; }
  .pal-result-qty { grid-area: qty; }
}

/* ── Info box (details/summary) ── */
.info-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
}
.info-box summary {
  cursor: pointer;
  font-weight: 600;
  color: #475569;
}
.info-box ul { margin: 6px 0 0; padding-left: 20px; }
.info-box li { margin-bottom: 3px; }
.info-box p { margin: 6px 0; line-height: 1.5; color: #475569; }


/* ════════════════════════════════════════════════════════════════════
   v5.14: EDYCJA WŁASNEGO RUCHU (operator) — Edit movement modal
   ════════════════════════════════════════════════════════════════════ */

/* Edit button - żółto-zielony, odróżnia od cofnij i delete */
.mov-edit-btn {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  font-weight: 600;
}
.mov-edit-btn:hover {
  background: #a7f3d0;
  border-color: #10b981;
  color: #064e3b;
}

/* Modal layout */
.emov-item-info {
  background: #f8fafc;
  border-left: 3px solid #0ea5e9;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.emov-item-name {
  font-weight: 700;
  font-size: 15px;
  color: #1e293b;
  margin-bottom: 2px;
}
.emov-item-sku {
  font-family: var(--mono, ui-monospace, monospace);
}
.emov-current-stock {
  margin-top: 4px;
  font-weight: 600;
}

.emov-kind-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.emov-kind-badge.minus {
  background: #fee2e2;
  color: #991b1b;
}
.emov-kind-badge.plus {
  background: #d1fae5;
  color: #065f46;
}

.emov-impact {
  margin: 12px 0 4px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
}
.emov-impact.neutral {
  background: #f1f5f9;
  color: #64748b;
}
.emov-impact.ok {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}
.emov-impact.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.emov-delta-up { color: #059669; font-weight: 700; }
.emov-delta-down { color: #dc2626; font-weight: 700; }
.emov-warn { display: inline-block; margin-top: 6px; font-weight: 600; }

.emov-time-left {
  margin-top: 10px;
  padding: 6px 10px;
  background: #fef9c3;
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
  color: #854d0e;
}


/* v5.14: wyłączone przyciski Edytuj/Cofnij — operator widzi że są ale wie czemu nie działają */
.mov-edit-btn.disabled-look,
.mov-undo-btn.disabled-look {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(60%);
}
.mov-edit-btn.disabled-look:hover,
.mov-undo-btn.disabled-look:hover {
  opacity: 0.5;
  /* tooltip i tak się pokazuje, więc hover sygnalizuje że można sprawdzić */
}

/* v5.14: widoczny status pod ruchem dla operatora — czas pozostały do edycji */
.mov-op-status {
  display: block;
  margin-top: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 3px;
  letter-spacing: 0.2px;
  line-height: 1.3;
  max-width: max-content;
}
.mov-status-ok {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.mov-status-warn {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.mov-status-blocked {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.mov-status-info {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

/* Mobile - mov-op-status na pełnej szerokości */
@media (max-width: 600px) {
  .mov-op-status { max-width: 100%; }
}

/* v5.14b: pasek "Administrator — edycja bez ograniczeń" w edit modal */
.emov-time-left.emov-admin {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  color: #78350f;
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
}
.emov-time-left.emov-admin strong {
  color: #92400e;
}

/* ════════════════════════════════════════════════════════════════════
   v5.14c: WYBÓR konkretnych towarów do druku etykiet + lokalizacja na etykiecie
   ════════════════════════════════════════════════════════════════════ */

/* Toolbar nad listą (search + select-all) */
.labels-selected-wrap {
  margin: 0 0 14px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.labels-selected-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.labels-selected-toolbar input.input {
  flex: 1;
  min-width: 180px;
}
.labels-selected-count {
  margin-left: auto;
  white-space: nowrap;
  font-weight: 600;
  color: #0369a1;
}

/* Lista towarów z checkboxami */
.labels-items-list {
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
}
.labels-item-row {
  display: grid;
  grid-template-columns: 24px 110px 1fr 110px 70px;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
}
.labels-item-row:last-child { border-bottom: none; }
.labels-item-row:hover { background: #f8fafc; }
.labels-item-row.checked { background: #eff6ff; }
.labels-item-row.checked:hover { background: #dbeafe; }
.labels-item-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
}
.labels-item-sku {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 600;
  font-size: 12px;
  color: #1e40af;
}
.labels-item-name {
  font-weight: 500;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.labels-item-loc {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  color: #1e40af;
  padding: 1px 6px;
  background: #dbeafe;
  border-radius: 3px;
  white-space: nowrap;
  text-align: center;
}
.labels-item-qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Lokalizacja na PODGLĄDZIE etykiety (preview w modal) */
.label-cell .label-location {
  display: inline-block;
  margin: 4px 0;
  padding: 2px 8px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 3px;
  letter-spacing: 0.3px;
}

/* Mobile - lista zaznaczania */
@media (max-width: 600px) {
  .labels-item-row {
    grid-template-columns: 24px 1fr;
    grid-template-areas:
      "check name"
      ".     sku"
      ".     loc"
      ".     qty";
    gap: 4px 8px;
  }
  .labels-item-row > input { grid-area: check; }
  .labels-item-sku { grid-area: sku; }
  .labels-item-name { grid-area: name; white-space: normal; }
  .labels-item-loc { grid-area: loc; justify-self: start; }
  .labels-item-qty { grid-area: qty; text-align: left; }
}

/* ════════════════════════════════════════════════════════════════════
   v5.15: HISTORIA per SKU - timeline
   ════════════════════════════════════════════════════════════════════ */

.sku-history-btn {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.sku-history-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
  border-color: #94a3b8;
}

.sku-hist-head {
  background: #f8fafc;
  padding: 10px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
  border-left: 3px solid #0ea5e9;
}
.sku-hist-sku {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: 14px;
  color: #0369a1;
  margin-bottom: 4px;
}

/* Stats */
.sku-hist-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.sku-hist-stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}
.sku-hist-stat-val {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sku-hist-stat-val.plus { color: #059669; }
.sku-hist-stat-val.minus { color: #dc2626; }
.sku-hist-stat-lbl {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Filter tabs */
.sku-hist-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 8px;
}
.sku-hist-tab {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sku-hist-tab:hover { background: rgba(255,255,255,0.7); color: #1e293b; }
.sku-hist-tab.active {
  background: #fff;
  color: #0ea5e9;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.sku-hist-tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  background: #e2e8f0;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  text-align: center;
}
.sku-hist-tab.active .sku-hist-tab-count {
  background: #e0f2fe;
  color: #0369a1;
}

/* Timeline */
.sku-hist-timeline {
  position: relative;
  max-height: 60vh;
  overflow-y: auto;
}
.sku-hist-day-header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  padding: 8px 4px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 6px;
}
.sku-hist-event {
  display: grid;
  grid-template-columns: 50px 36px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 4px;
  border-bottom: 1px solid #f1f5f9;
}
.sku-hist-event:last-child { border-bottom: none; }
.sku-hist-time {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  color: #64748b;
  padding-top: 6px;
  text-align: right;
}
.sku-hist-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: #f1f5f9;
  flex-shrink: 0;
}
.sku-hist-icon.plus { background: #d1fae5; color: #065f46; }
.sku-hist-icon.minus { background: #fee2e2; color: #991b1b; }
.sku-hist-icon.warn { background: #fef3c7; color: #92400e; }
.sku-hist-icon.admin { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.sku-hist-icon.ok { background: #d1fae5; color: #065f46; }
.sku-hist-icon.neutral { background: #e0f2fe; color: #0369a1; }

.sku-hist-content { padding-top: 4px; }
.sku-hist-title {
  font-weight: 600;
  color: #1e293b;
  font-size: 13px;
  line-height: 1.3;
}
.sku-hist-details {
  font-size: 12px;
  color: #475569;
  margin-top: 2px;
  line-height: 1.4;
}
.sku-hist-actor { margin-top: 4px; }

/* Mobile */
@media (max-width: 600px) {
  .sku-hist-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sku-hist-stat-val { font-size: 18px; }
  .sku-hist-event { grid-template-columns: 36px 28px 1fr; gap: 8px; }
  .sku-hist-time { padding-top: 4px; font-size: 10px; }
  .sku-hist-icon { width: 26px; height: 26px; font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════════
   v5.15: PROGNOZA AI - tabela, podsumowanie, modal AI
   ════════════════════════════════════════════════════════════════════ */

.forecast-header { margin-bottom: 16px; }
.forecast-header h2 { margin: 0 0 4px; font-size: 18px; color: #1e293b; }

.forecast-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.forecast-stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  border-left-width: 4px;
}
.forecast-stat.critical { border-left-color: #dc2626; background: linear-gradient(to right, #fef2f2, #fff 60%); }
.forecast-stat.warning  { border-left-color: #f59e0b; background: linear-gradient(to right, #fffbeb, #fff 60%); }
.forecast-stat.watch    { border-left-color: #0ea5e9; background: linear-gradient(to right, #f0f9ff, #fff 60%); }
.forecast-stat.ok       { border-left-color: #10b981; background: linear-gradient(to right, #f0fdf4, #fff 60%); }
.forecast-stat-val { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.forecast-stat.critical .forecast-stat-val { color: #b91c1c; }
.forecast-stat.warning .forecast-stat-val  { color: #b45309; }
.forecast-stat.watch .forecast-stat-val    { color: #0369a1; }
.forecast-stat.ok .forecast-stat-val       { color: #047857; }
.forecast-stat-lbl { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }

.forecast-table {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.forecast-row {
  display: grid;
  grid-template-columns: 1fr 70px 80px 100px 110px 90px 110px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  border-left: 4px solid transparent;
  transition: background 0.1s;
}
.forecast-row:last-child { border-bottom: none; }
.forecast-row:hover:not(.forecast-head) { background: #f8fafc; }
.forecast-row.forecast-head {
  background: #f8fafc;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.4px;
  border-left: 4px solid transparent;
}
.forecast-row.urgency-critical { border-left-color: #dc2626; }
.forecast-row.urgency-warning  { border-left-color: #f59e0b; }
.forecast-row.urgency-watch    { border-left-color: #0ea5e9; }
.forecast-row.urgency-ok       { border-left-color: #10b981; }
.forecast-row .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.forecast-item-name { font-weight: 600; color: #1e293b; line-height: 1.2; }
.forecast-item-sku { font-family: var(--mono, ui-monospace, monospace); margin-top: 2px; }
.forecast-days { font-size: 14px; font-weight: 700; }
.forecast-urgency {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
  text-align: right;
}
.forecast-urgency.urgency-critical { color: #dc2626; }
.forecast-urgency.urgency-warning  { color: #b45309; }
.forecast-urgency.urgency-watch    { color: #0369a1; }
.forecast-urgency.urgency-ok       { color: #047857; }
.forecast-trend { font-size: 12px; color: #475569; }
.forecast-order-qty { color: #1e40af; font-size: 14px; }
.forecast-actions { display: flex; gap: 4px; }
.forecast-actions .btn-sm { padding: 3px 8px; font-size: 11px; white-space: nowrap; }
.forecast-ai-btn {
  background: linear-gradient(135deg, #faf5ff, #f3e8ff);
  color: #6b21a8;
  border: 1px solid #d8b4fe;
  font-weight: 600;
}
.forecast-ai-btn:hover {
  background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
  border-color: #a855f7;
  color: #581c87;
}

/* AI Modal */
.forecast-ai-ctx {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px;
  background: #f8fafc;
  border-radius: 6px;
}
.forecast-ai-ctx-item { text-align: center; }
.forecast-ai-ctx-val {
  font-size: 18px;
  font-weight: 800;
  color: #1e293b;
  margin-top: 2px;
}
.forecast-ai-ctx-val.urgency-critical { color: #dc2626; }
.forecast-ai-ctx-val.urgency-warning  { color: #b45309; }
.forecast-ai-ctx-val.urgency-watch    { color: #0369a1; }
.forecast-ai-ctx-val.urgency-ok       { color: #047857; }

.forecast-ai-answer {
  background: linear-gradient(to bottom, #faf5ff, #fff);
  border: 1px solid #e9d5ff;
  border-radius: 6px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #1e293b;
}
.forecast-ai-answer h4 {
  margin: 14px 0 6px;
  font-size: 13px;
  color: #6b21a8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.forecast-ai-answer h4:first-child { margin-top: 0; }
.forecast-ai-answer p { margin: 4px 0 8px; }
.forecast-ai-answer strong { color: #1e293b; font-weight: 700; }
.forecast-ai-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e9d5ff;
  text-align: center;
}

/* Mobile */
@media (max-width: 700px) {
  .forecast-summary { grid-template-columns: repeat(2, 1fr); }
  .forecast-ai-ctx { grid-template-columns: repeat(2, 1fr); }
  .forecast-row {
    grid-template-columns: 1fr 60px;
    grid-template-areas:
      "name name"
      "days actions"
      "trend order";
    gap: 6px;
  }
  .forecast-row.forecast-head { display: none; }
  .forecast-name { grid-area: name; }
  .forecast-days { grid-area: days; text-align: left; }
  .forecast-trend { grid-area: trend; }
  .forecast-order { grid-area: order; text-align: right; }
  .forecast-actions { grid-area: actions; }
}

/* ════════════════════════════════════════════════════════════════════
   v5.16: WIDOK PRACOWNIKA (mobile-first, duże touch targets)
   ════════════════════════════════════════════════════════════════════ */

/* Worker mode - ukryj większość ozdobników */
/* v5.16c: NIE chowamy .sidebar-foot bo to jest tam guzik wylogowania.
   Workerowi natomiast nieprzydatna jest podpowiedź skrótu klawiszowego ⌘K. */
body.worker-mode .user-shortcut {
  display: none;
}
body.worker-mode .header-actions .btn-not-essential {
  display: none;
}

/* Główny widok zamówień */
.worker-view { padding-bottom: 80px; }
.worker-head {
  margin-bottom: 20px;
  padding: 6px 0;
}
.worker-head h1 {
  font-size: 22px;
  margin: 0 0 4px;
  color: #1e293b;
  font-weight: 800;
}

/* Wielki CTA "Nowe zamówienie" */
.worker-cta-wrap { margin-bottom: 22px; }
.btn-worker-new {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
  transition: all 0.15s;
}
.btn-worker-new:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(14, 165, 233, 0.35); }
.btn-worker-new:active { transform: translateY(0); }
.btn-worker-new .big-plus {
  font-size: 36px;
  line-height: 1;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  flex-shrink: 0;
}
.worker-cta-title { font-size: 18px; font-weight: 700; }
.worker-cta-sub { font-size: 13px; opacity: 0.9; margin-top: 2px; }

/* Sekcja "Moje zamówienia" */
.worker-orders-section { background: transparent; }
.worker-orders-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 8px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.worker-orders-tab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.worker-orders-tab.active {
  background: #fff;
  color: #0ea5e9;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.worker-orders-tab .tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  background: #e2e8f0;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  text-align: center;
}

.worker-orders-list { display: flex; flex-direction: column; gap: 10px; }
.worker-order-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.worker-order-card:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.worker-order-gray  { border-left-color: #94a3b8; }
.worker-order-blue  { border-left-color: #0ea5e9; background: linear-gradient(to right, #f0f9ff, #fff 30%); }
.worker-order-amber { border-left-color: #f59e0b; background: linear-gradient(to right, #fffbeb, #fff 30%); }
.worker-order-green { border-left-color: #10b981; }
.worker-order-red   { border-left-color: #ef4444; opacity: 0.65; }
.worker-order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.worker-order-num {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: 13px;
  color: #1e40af;
}
.worker-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 12px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.worker-status-gray  { background: #f1f5f9; color: #475569; }
.worker-status-blue  { background: #dbeafe; color: #1e40af; }
.worker-status-amber { background: #fef3c7; color: #92400e; }
.worker-status-green { background: #d1fae5; color: #065f46; }
.worker-status-red   { background: #fee2e2; color: #991b1b; }

.worker-order-recipient { font-weight: 600; color: #1e293b; font-size: 14px; margin: 4px 0; }
.worker-order-notes { line-height: 1.4; font-style: italic; margin: 4px 0; }
.worker-order-status-msg { font-size: 12px; color: #64748b; margin: 4px 0 0; }
.worker-order-date { font-size: 11px; margin-top: 6px; }

.worker-empty {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
}
.worker-empty-icon { font-size: 48px; margin-bottom: 8px; }
.worker-empty-title { font-size: 15px; font-weight: 600; color: #475569; }
.worker-empty-sub { font-size: 13px; margin-top: 4px; }

/* ── Widok tworzenia zamówienia ── */
.worker-order-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 16px;
}
.btn-worker-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-worker-back:hover { background: #f1f5f9; }
.worker-order-head-title h2 { margin: 0; font-size: 18px; color: #1e293b; }

.worker-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.worker-field span {
  font-size: 12px;
  color: #475569;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.worker-field input, .worker-field textarea { font-size: 15px; padding: 12px 14px; }

.worker-search-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  position: sticky;
  top: 0;
  background: var(--bg, #fff);
  padding: 6px 0;
  z-index: 5;
}
.worker-search-input { flex: 1; font-size: 15px; padding: 12px 14px; }
.worker-scan-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.worker-search-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  min-height: 0;
}
.worker-search-empty {
  padding: 20px;
  text-align: center;
  color: #94a3b8;
  background: #f8fafc;
  border-radius: 6px;
}
.worker-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  min-height: 60px;
}
.worker-search-row.in-cart {
  background: linear-gradient(to right, #eff6ff, #fff 80%);
  border-color: #93c5fd;
}
.worker-search-main { flex: 1; min-width: 0; }
.worker-search-name {
  font-weight: 600;
  color: #1e293b;
  font-size: 15px;
  margin-bottom: 3px;
  line-height: 1.25;
}
.worker-search-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}
.worker-search-sku { font-family: var(--mono, ui-monospace, monospace); font-weight: 600; color: #475569; }
.worker-search-loc { color: #1e40af; font-weight: 600; }
.worker-search-stock.low { color: #b91c1c; font-weight: 700; }

.btn-worker-add {
  background: #0ea5e9;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
}
.btn-worker-add:hover { background: #0284c7; }

/* Qty controls */
.worker-search-qty-ctrl, .worker-cart-qty-ctrl {
  display: flex;
  align-items: center;
  gap: 4px;
}
.qty-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: #0369a1;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-btn:hover { background: #f1f5f9; }
.qty-btn-remove {
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: 1px solid #fecaca;
  color: #b91c1c; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.qty-btn-remove:hover { background: #fee2e2; }
.qty-val {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: #1e293b;
}
.qty-input {
  width: 50px;
  text-align: center;
  font-size: 15px;
  padding: 6px 4px;
  font-weight: 700;
}

/* Sticky cart u dołu */
.worker-cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
  z-index: 100;
  padding: 10px 14px;
}
.worker-cart-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}
.worker-cart-icon { font-size: 22px; }
.worker-cart-summary { flex: 1; }
.worker-cart-arrow { font-size: 12px; color: #64748b; }
.worker-cart-list {
  max-height: 50vh;
  overflow-y: auto;
  margin: 8px 0 12px;
  padding: 8px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}
.worker-cart-item {
  display: flex;
  gap: 10px;
  padding: 8px 4px;
  align-items: center;
  border-bottom: 1px solid #f8fafc;
}
.worker-cart-item:last-child { border-bottom: none; }
.worker-cart-item-main { flex: 1; min-width: 0; }
.worker-cart-item-name {
  font-weight: 600;
  color: #1e293b;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.worker-cart-item-meta {
  font-size: 11px;
  color: #64748b;
  font-family: var(--mono, ui-monospace, monospace);
  margin-top: 2px;
}

.btn-worker-submit {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}
.btn-worker-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669, #047857);
}
.btn-worker-submit:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  opacity: 0.6;
}

/* v5.16: role badge worker */
.role-badge.worker {
  background: #ddd6fe;
  color: #5b21b6;
}
.role-select { min-width: 130px; font-size: 12px; }

/* Mobile - dodatkowo zwiększ touch targets */
@media (max-width: 600px) {
  .worker-head h1 { font-size: 20px; }
  .btn-worker-new { padding: 16px; }
  .worker-cta-title { font-size: 16px; }
  .worker-search-row { padding: 10px; min-height: 64px; }
  .worker-search-name { font-size: 14px; }
  .btn-worker-add { padding: 12px 16px; min-height: 48px; }
  .qty-btn { width: 40px; height: 40px; font-size: 20px; }
  /* W trybie worker zmniejsz padding głównego content żeby było więcej miejsca */
  body.worker-mode main { padding: 12px; }
  body.worker-mode .header { padding: 8px 12px; }
}

/* v5.16d: lista dropdown w polu szukaj towarów */
.worker-search-results {
  max-height: 50vh;
  overflow-y: auto;
}
.worker-search-hint {
  padding: 6px 10px;
  background: #f0f9ff;
  border: 1px dashed #93c5fd;
  border-radius: 4px;
  text-align: center;
  margin-bottom: 6px;
  color: #1e40af;
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════
   v5.16e: WIDOK ZBIORCZY (batch picking)
   ════════════════════════════════════════════════════════════════════ */

/* Badge na przycisku Widok zbiorczy (liczba czekających) */
.agg-badge {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px;
  margin-left: 6px;
  background: #dc2626;
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  text-align: center;
  vertical-align: middle;
  animation: agg-pulse 2s ease-in-out infinite;
}
@keyframes agg-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Lista zamówień do uwzględnienia (chip-style checkboxy) */
.agg-orders-wrap {
  background: #f8fafc;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.agg-orders-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}
.agg-orders-head .btn-sm { padding: 3px 8px; font-size: 11px; }
.agg-orders-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agg-order-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.agg-order-chip:hover { border-color: #94a3b8; }
.agg-order-chip.checked {
  background: linear-gradient(to right, #eff6ff, #fff 80%);
  border-color: #3b82f6;
}
.agg-order-chip input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}
.agg-order-num {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  color: #1e40af;
}
.agg-order-recip {
  font-weight: 500;
  color: #1e293b;
}
.agg-order-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
}

/* Statystyki - 4 kolumny */
.agg-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.agg-stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
  text-align: center;
}
.agg-stat-val {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #1e293b;
  line-height: 1;
}
.agg-stat-lbl {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
}
.agg-stat.ok {
  background: linear-gradient(to bottom, #f0fdf4, #fff);
  border-left: 3px solid #10b981;
}
.agg-stat.ok .agg-stat-val { color: #047857; }
.agg-stat.warn {
  background: linear-gradient(to bottom, #fef2f2, #fff);
  border-left: 3px solid #dc2626;
}
.agg-stat.warn .agg-stat-val { color: #b91c1c; }

/* Tabela zbiorcza */
.agg-items-list {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.agg-items-table { width: 100%; }
.agg-items-row {
  display: grid;
  grid-template-columns: 110px 1fr 110px 100px 1.5fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}
.agg-items-row:last-child { border-bottom: none; }
.agg-items-row.agg-items-head {
  background: #f8fafc;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.4px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.agg-items-row.shortage {
  background: linear-gradient(to right, #fef2f2, #fff 70%);
  border-left: 3px solid #dc2626;
}
.agg-items-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.agg-loc .loc-pill {
  display: inline-block;
  padding: 2px 8px;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 4px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
}
.agg-name { min-width: 0; }
.agg-item-name {
  font-weight: 600;
  color: #1e293b;
  font-size: 14px;
  line-height: 1.2;
}
.agg-item-sku {
  font-family: var(--mono, ui-monospace, monospace);
  margin-top: 2px;
}
.agg-total {
  font-size: 18px;
  font-weight: 800;
  color: #047857;
}
.agg-qty-unit { font-weight: 500; font-size: 11px; }
.agg-stock {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.agg-stock.shortage { color: #b91c1c; }
.agg-shortage-note {
  font-size: 10px;
  font-weight: 700;
  color: #b91c1c;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}
.agg-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: flex-start;
}
.agg-breakdown-chip {
  display: inline-block;
  padding: 2px 7px;
  background: #f1f5f9;
  border-radius: 3px;
  font-size: 11px;
  color: #475569;
  font-family: var(--mono, ui-monospace, monospace);
}
.agg-breakdown-chip strong {
  color: #047857;
  font-family: inherit;
}

/* Footer modal z przyciskami */
#picklist-aggregated-modal .modal-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
.modal-footer-spacer { flex: 1; }

/* Mobile */
@media (max-width: 700px) {
  .agg-stats { grid-template-columns: repeat(2, 1fr); }
  .agg-items-row {
    grid-template-columns: 1fr 100px;
    grid-template-areas:
      "name total"
      "loc stock"
      "breakdown breakdown";
    gap: 4px;
    padding: 12px;
  }
  .agg-items-row.agg-items-head { display: none; }
  .agg-loc { grid-area: loc; }
  .agg-name { grid-area: name; }
  .agg-total { grid-area: total; text-align: right; }
  .agg-stock { grid-area: stock; text-align: right; }
  .agg-breakdown { grid-area: breakdown; margin-top: 4px; }
}

/* ════════════════════════════════════════════════════════════════════
   v5.16f: Drobne UX dla pracownika
   ════════════════════════════════════════════════════════════════════ */

/* Wyszarzone pole stanowisko (auto-fill z konta) */
.worker-field input:disabled {
  background: #f1f5f9;
  color: #475569;
  cursor: not-allowed;
  border-color: #cbd5e1;
  opacity: 1;          /* nie chcemy szarzeć dwa razy */
  font-weight: 500;
}
.worker-field input:disabled::placeholder { color: transparent; }

/* Input number w wynikach wyszukiwania (mniejszy) */
.qty-input-sm {
  width: 56px;
  text-align: center;
  font-size: 15px;
  padding: 6px 4px;
  font-weight: 700;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
}
.qty-input-sm:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
  border-color: #3b82f6;
}
/* Usuń strzałki przy input number na mobile (zajmują miejsce) */
.qty-input-sm::-webkit-outer-spin-button,
.qty-input-sm::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-input-sm[type=number] { -moz-appearance: textfield; }

/* Lista pozycji w karcie zamówienia (podsumowanie co i ile) */
.worker-order-lines {
  background: rgba(15, 23, 42, 0.03);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0 4px;
  font-size: 13px;
}
.worker-order-lines.empty {
  background: transparent;
  padding: 4px 0;
  font-style: italic;
}
.worker-order-lines-head {
  font-weight: 600;
  color: #475569;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.worker-order-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 2px 0;
  line-height: 1.3;
}
.worker-order-line-name {
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.worker-order-line-qty {
  font-weight: 700;
  color: #1e40af;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-size: 13px;
}
.worker-order-lines-more {
  margin-top: 4px;
  font-style: italic;
}

/* Mobile - jeszcze ciaśniej */
@media (max-width: 600px) {
  .qty-input-sm { width: 50px; font-size: 14px; }
  .worker-order-lines { font-size: 12px; padding: 6px 8px; }
  .worker-order-line-name { font-size: 12px; }
  .worker-order-line-qty { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   v5.16g: Statystyki pracowników
   ════════════════════════════════════════════════════════════════════ */

/* Karty podsumowania */
.ws-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.ws-card {
  background: linear-gradient(135deg, #f8fafc, #fff);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  border-left: 4px solid #0ea5e9;
}
.ws-card-val {
  font-size: 30px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ws-card-lbl {
  font-size: 12px;
  color: #475569;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
}
.ws-card-sub { margin-top: 4px; }

.ws-section-h {
  font-size: 16px;
  margin: 22px 0 10px;
  color: #1e293b;
  font-weight: 700;
}

/* Tabele */
.ws-workers-table, .ws-items-table {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ws-row {
  display: grid;
  grid-template-columns: 45px 1.8fr 1.2fr 80px 100px 130px 100px;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}
.ws-items-row {
  grid-template-columns: 45px 2fr 1.4fr 90px 1.4fr;
}
.ws-row.ws-head {
  background: #f8fafc;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.4px;
}
.ws-row:last-child { border-bottom: none; }
.ws-row .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ws-rank {
  font-weight: 800;
  color: #94a3b8;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ws-worker-info, .ws-item-info { min-width: 0; }
.ws-worker-name, .ws-item-name {
  font-weight: 700;
  color: #1e293b;
  font-size: 14px;
}
.ws-worker-email, .ws-item-sku {
  font-family: var(--mono, ui-monospace, monospace);
  margin-top: 2px;
}

.ws-top-worker { font-size: 13px; }
.ws-top-worker strong { color: #1e293b; }

/* Pasek wykresu (bar) */
.ws-bar-cell { padding: 0 4px; }
.ws-bar {
  position: relative;
  height: 24px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  min-width: 70px;
}
.ws-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.ws-bar-fill-item {
  background: linear-gradient(90deg, #10b981, #34d399);
}
.ws-bar-label {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 12px;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}

/* ── Modal detali pracownika ── */
.ws-detail-head {
  background: #f8fafc;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
  border-left: 3px solid #0ea5e9;
}
.ws-detail-email {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 600;
  font-size: 13px;
  color: #0369a1;
  margin-bottom: 4px;
}
.ws-detail-section {
  font-size: 13px;
  margin: 16px 0 8px;
  color: #475569;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.ws-status-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.ws-status-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 8px;
  text-align: center;
  border-top: 3px solid #94a3b8;
}
.ws-status-card.ws-status-gray  { border-top-color: #94a3b8; }
.ws-status-card.ws-status-blue  { border-top-color: #0ea5e9; }
.ws-status-card.ws-status-amber { border-top-color: #f59e0b; }
.ws-status-card.ws-status-green { border-top-color: #10b981; }
.ws-status-card.ws-status-red   { border-top-color: #ef4444; }
.ws-status-icon { font-size: 18px; }
.ws-status-val {
  font-size: 22px;
  font-weight: 800;
  color: #1e293b;
  margin: 2px 0;
}
.ws-status-lbl {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
}

.ws-fulfill-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.ws-fulfill-stat {
  background: linear-gradient(to bottom, #f0f9ff, #fff);
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}
.ws-fulfill-val {
  font-size: 18px;
  font-weight: 800;
  color: #1e40af;
  font-variant-numeric: tabular-nums;
}
.ws-fulfill-lbl { text-transform: uppercase; letter-spacing: 0.3px; }

.ws-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.ws-detail-item {
  display: grid;
  grid-template-columns: 40px 1.5fr 2fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 13px;
}
.ws-detail-item-rank { font-weight: 800; color: #94a3b8; }
.ws-detail-item-name { font-weight: 600; color: #1e293b; }

/* Mobile */
@media (max-width: 800px) {
  .ws-summary { grid-template-columns: repeat(2, 1fr); }
  .ws-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px;
  }
  .ws-row.ws-head { display: none; }
  .ws-row .num { text-align: left; }
  .ws-status-grid { grid-template-columns: repeat(3, 1fr); }
  .ws-fulfill-stats { grid-template-columns: 1fr; }
  .ws-detail-item { grid-template-columns: 30px 1fr; }
  .ws-detail-item-bar { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════════
   v5.16j: Pasek filtrów dla list wydań / przyjęć / kompletacji
   ════════════════════════════════════════════════════════════════════ */

.list-filters {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.list-filters-secondary {
  margin-top: 10px;
  background: #fafafa;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.filter-field span {
  font-size: 10px;
  color: #475569;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.filter-field input {
  padding: 6px 10px;
  font-size: 13px;
  min-width: 0;
  height: 34px;
}
.filter-field input[type="text"] { min-width: 160px; }
.filter-field input[type="date"] { min-width: 130px; }

.filter-clear {
  padding: 6px 12px !important;
  font-size: 12px;
  height: 34px;
  align-self: flex-end;
}

.filter-count {
  margin-left: auto;
  align-self: center;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 500;
}

.input-error {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
}

/* Mobile: szerokie pola, własna linia */
@media (max-width: 700px) {
  .list-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .filter-field { width: 100%; }
  .filter-field input { width: 100%; min-width: 0; }
  .filter-clear { width: 100%; }
  .filter-count {
    margin-left: 0;
    text-align: center;
  }
}