/* PlatformaB2E — wspólny system wizualny (paper/ink, print-heritage).
   Źródło: zaakceptowany po wielu rundach przeglądu mockup (Historia Operacji i in.).
   Wdrażane stopniowo strona po stronie — patrz PlatformaB2E.Presentation/Pages. */

:root {
  --paper: #f5f6f8;
  --paper-raised: #ffffff;
  --ink: #1b2430;
  --ink-muted: #5b6472;
  --ink-faint: #8892a0;
  --line: #dce1e7;
  --line-soft: #eaedf1;
  --line-strong: #c3ccd4;
  --accent: #3b5b7a;
  --accent-ink: #1f374d;
  --accent-soft: #e4ebf2;
  --on-accent: #ffffff;

  --act-create-bg: #e3f1ea; --act-create-fg: #1e6b4a;
  --act-update-bg: #e5edf5; --act-update-fg: #2f5273;
  --act-delete-bg: #f7e7e6; --act-delete-fg: #a13b34;
  --act-login-bg:  #eef0f2; --act-login-fg:  #5b6472;
  --act-approve-bg:#e1f0ec; --act-approve-fg:#1c7767;

  --role-superadmin-bg: #f2e6ec; --role-superadmin-fg: #8a3862;
  --role-ordermanager-bg:#e7e6f4; --role-ordermanager-fg:#4d3f96;
  --role-centrala-bg:    #e1f0ec; --role-centrala-fg:    #1c7767;
  --role-kierownik-bg:   #f7edda; --role-kierownik-fg:   #8a5a12;
  --role-pos-bg:         #eef0f2; --role-pos-fg:         #5b6472;

  --vis-global-bg: #e5edf5; --vis-global-fg: #2f5273;
  --vis-scoped-bg: #f7edda; --vis-scoped-fg: #8a5a12;
  --vis-hidden-bg:  #eef0f2; --vis-hidden-fg: #8892a0;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: "Segoe UI", ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12161c; --paper-raised: #181d25; --ink: #e7eaee; --ink-muted: #98a1ad; --ink-faint: #6b7480;
    --line: #2a323c; --line-soft: #212830; --line-strong: #3a4550; --accent: #8fb2d4; --accent-ink: #d7e5f2; --accent-soft: #1f2b38;
    --on-accent: #10151b;
    --act-create-bg: #16261f; --act-create-fg: #6fceA0;
    --act-update-bg: #182636; --act-update-fg: #8fb6dd;
    --act-delete-bg: #2c1c1b; --act-delete-fg: #e2938c;
    --act-login-bg:  #1c2027; --act-login-fg:  #97a1ad;
    --act-approve-bg:#142622; --act-approve-fg:#6ccbb8;
    --role-superadmin-bg:#2c1f27; --role-superadmin-fg:#dd9dbe;
    --role-ordermanager-bg:#211f34; --role-ordermanager-fg:#b3a7ed;
    --role-centrala-bg:#142622; --role-centrala-fg:#6ccbb8;
    --role-kierownik-bg:#2b220f; --role-kierownik-fg:#e0b565;
    --role-pos-bg:#1c2027; --role-pos-fg:#97a1ad;
    --vis-global-bg:#182636; --vis-global-fg:#8fb6dd;
    --vis-scoped-bg:#2b220f; --vis-scoped-fg:#dba960;
    --vis-hidden-bg:#1c2027; --vis-hidden-fg:#6b7480;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* width:100% jest konieczne, nie ozdobne: .shell jest elementem flex w kolumnowym .sidebar-content,
   a element z auto-marginesami w osi poprzecznej NIE jest rozciągany (flexbox spec) - bez tego main
   dostaje szerokość dopasowaną do treści i każda strona ma inną szerokość. */
.shell { max-width: 1180px; width: 100%; margin: 0 auto; padding: 1.5rem 1.75rem 4rem; }

/* --- header --- */
header {
  background: var(--paper-raised); color: var(--ink); border-bottom: 1px solid var(--line);
  padding: 0.85rem 1.75rem; display: flex; justify-content: space-between; align-items: center;
}
header a { color: var(--ink); text-decoration: none; font-weight: 700; font-family: var(--font-display); font-size: 1.1rem; }
header nav a { color: var(--ink-muted); margin-left: 1.2rem; font-weight: 600; font-size: 13.5px; font-family: var(--font-body); }
header nav a:hover { color: var(--accent); }
header nav span { color: var(--ink-muted); font-size: 13.5px; }

.crumb { font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.02em; margin-bottom: 0.9rem; }
.crumb a { color: var(--ink-muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }
.crumb-sep { color: var(--ink-faint); }

/* --- global sidebar navigation (wraps every authenticated page via _Layout.cshtml) --- */
.sidebar-layout { display: flex; align-items: stretch; min-height: 100vh; }
.sidebar {
  width: 232px; flex: none; background: var(--paper-raised); border-right: 1px solid var(--line-strong);
  padding: 1.1rem 0.9rem; display: flex; flex-direction: column;
}
.sidebar .brand {
  font-weight: 700; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink);
  text-decoration: none; padding: 0 0.5rem 0.9rem; display: block;
}
.sidebar-toggle-all {
  background: none; border: 1px solid var(--line-strong); color: var(--ink-muted); font-size: 11.5px;
  font-weight: 600; padding: 0.35rem 0.6rem; border-radius: 5px; cursor: pointer; min-height: 0;
  margin: 0 0.5rem 1rem; align-self: flex-start;
}
.sidebar-toggle-all:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--line-strong); }
.sidebar details.sb-group { margin-bottom: 0.15rem; }
.sidebar summary.sb-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint);
  padding: 0.5rem 0.5rem; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.4rem;
  border-radius: 5px;
}
.sidebar summary.sb-group-label:hover { color: var(--ink-muted); background: var(--paper); }
.sidebar summary.sb-group-label::-webkit-details-marker { display: none; }
.sidebar summary.sb-group-label::before { content: "\25B8"; font-size: 10px; transition: transform 0.15s; }
.sidebar details[open] > summary.sb-group-label::before { transform: rotate(90deg); }
.sidebar a {
  display: block; padding: 0.5rem 0.6rem 0.5rem 1.3rem; border-radius: 5px; color: var(--ink-muted); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
}
.sidebar a:hover { background: var(--accent-soft); color: var(--accent-ink); }
.sidebar a.active-page { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }

.sidebar-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.content-topbar {
  background: var(--paper-raised); border-bottom: 1px solid var(--line); padding: 0.85rem 1.75rem;
  display: flex; justify-content: flex-end; align-items: center; color: var(--ink-muted); font-size: 13.5px;
}

/* --- Pulpit startowy (Pages/Index) - jeden ekran per rola: co zrobić + co czeka --- */

/* Akcje roli. Główna jest CELOWO duża: dla konta POS szybkie złożenie zamówienia to sedno pracy,
   a nie jedna z wielu równorzędnych opcji. */
.dash-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-bottom: 1.4rem; }
.btn-primary-lg {
  font-size: 15px; font-weight: 600; color: var(--on-accent); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 5px; padding: 0.7rem 1.5rem; text-decoration: none;
}
.btn-primary-lg:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.dash-actions .btn-secondary { text-decoration: none; display: inline-flex; align-items: center; }

/* Kafle kolejek. auto-fit + minmax zamiast sztywnej liczby kolumn: rola z jednym kaflem (Pracownik
   Wykonawcy) i rola z sześcioma (SuperAdmin) mają wyglądać dobrze bez osobnych reguł. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; margin-bottom: 1.4rem; }
.tile {
  display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none;
  background: var(--paper-raised); border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: 6px; padding: 0.9rem 1rem;
}
.tile:hover { border-color: var(--accent); }
.tile-count { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.tile-hint { font-size: 11.5px; color: var(--ink-muted); }

/* Czeka na reakcję TEGO użytkownika - jedyne mocne wyróżnienie na ekranie. */
.tile-hot { border-left-color: var(--role-kierownik-fg); }
.tile-hot .tile-count { color: var(--role-kierownik-fg); }

/* Pusta kolejka to dobra wiadomość - ma zniknąć w tle, nie krzyczeć zerem. */
.tile-empty .tile-count { color: var(--ink-faint); }
.tile-empty { border-left-color: var(--line-soft); }

/* Pasek trybu testowego platformy - nad topbarem, na każdej stronie, WYŁĄCZNIE dla kadry wykonawcy.
   Celowo w tonacji "kierownik" (ostrzegawczy ochr z palety ról), a nie czerwonej: to stan roboczy, który
   sami włączyliśmy, a nie awaria. Ma być nie do przeoczenia, bo zapomniany tryb testowy = klient nie
   dostaje poczty. */
.testmode-bar {
  background: var(--role-kierownik-bg); color: var(--role-kierownik-fg);
  border-bottom: 1px solid var(--role-kierownik-fg);
  padding: 0.55rem 1.75rem; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.testmode-bar a { color: var(--role-kierownik-fg); font-weight: 600; white-space: nowrap; }

.site-footer {
  text-align: center; color: var(--ink-faint); font-size: 12px; padding: 1.25rem 1.75rem;
  border-top: 1px solid var(--line-soft);
}

h1 {
  font-family: var(--font-display); font-weight: 500; font-size: 2rem; margin: 0 0 0.3rem;
  text-wrap: balance; color: var(--ink);
}

.subhead { color: var(--ink-muted); font-size: 14.5px; max-width: 66ch; margin: 0.5rem 0 1.75rem; }

/* --- summary strip --- */
.summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--ink-muted); font-size: 12.5px; margin: 0 0.15rem 0.6rem; flex-wrap: wrap; }
.summary .count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.summary .legend { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* --- panels --- */
.panel { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; }
.panel h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; margin: 0 0 0.25rem; color: var(--ink); }
.panel .panel-hint { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 1.1rem; max-width: 62ch; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.1rem; align-items: end; }
.form-grid .field.grow-2 { grid-column: span 2; }

.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.75rem; align-items: start; }
.spec-grid h3 { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.9rem; }

.cats { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.cat-chip { font-size: 12px; color: var(--ink-muted); background: var(--paper); border: 1px solid var(--line); padding: 0.18rem 0.6rem; border-radius: 4px; white-space: nowrap; }

/* marks a Products/Index row as representing multiple SKUs grouped under one pricing family */
.variant-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 0.12rem 0.5rem; border-radius: 999px; white-space: nowrap; margin-left: 0.5rem; }

/* compact key/value display table (read-only specs) */
table.kv-table { width: 100%; border-collapse: collapse; }
.kv-table td { padding: 0.4rem 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink); }
.kv-table tr:last-child td { border-bottom: none; }
.kv-table td:first-child { color: var(--ink-muted); font-weight: 600; width: 46%; }

/* same tabular alignment, but with a real editable control in the value column —
   labels and inputs line up vertically/horizontally exactly like a table, because it is one */
table.kv-form-table { width: 100%; border-collapse: collapse; }
.kv-form-table td { padding: 0.4rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.kv-form-table tr:last-child td { border-bottom: none; }
.kv-form-table td:first-child { color: var(--ink-muted); font-weight: 600; font-size: 13px; width: 44%; padding-right: 0.9rem; }
.kv-form-table td:last-child { padding-left: 0; }
.field { display: flex; flex-direction: column; gap: 0.32rem; min-width: 0; }
.field label, label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 0.25rem; }

/* --- real form controls (mockup used a static .ctl div; here the same look applies to real inputs) --- */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=file], select, textarea {
  font-size: 13.5px; font-family: var(--font-body); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 4px; padding: 0.45rem 0.6rem; min-height: 34px;
  width: 100%; box-sizing: border-box;
}
textarea { min-height: 80px; font-family: var(--font-body); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type=checkbox] { width: auto; min-height: 0; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; background: var(--line-soft); }
input[type=checkbox]:disabled, input[type=radio]:disabled { cursor: not-allowed; }

/* --- buttons --- */
button, .btn, .btn-filter {
  font-size: 13.5px; font-weight: 600; font-family: var(--font-body); color: var(--on-accent); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px; padding: 0.55rem 1.1rem; min-height: 34px; cursor: pointer;
}
button:hover, .btn:hover, .btn-filter:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
button:disabled, .btn-filter:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
  font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: 4px; padding: 0.55rem 1.1rem; min-height: 34px; cursor: pointer;
}
/* rendered as a plain <span>, not a real button, when a page is fully read-only (no handler to submit to) */
.btn-filter.is-disabled, .btn-secondary.is-disabled {
  display: inline-block; opacity: 0.5; cursor: not-allowed; pointer-events: none;
}
.btn-add { font-size: 13.5px; font-weight: 600; color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 0.5rem 1.1rem; min-height: 34px; cursor: pointer; }
.btn-danger { font-size: 13.5px; font-weight: 600; color: var(--act-delete-fg); background: var(--act-delete-bg); border: 1px solid var(--act-delete-bg); border-radius: 4px; padding: 0.5rem 1.05rem; min-height: 34px; cursor: pointer; }
.gus-fetch-btn { margin-top: 0.6rem; align-self: flex-start; }
.gus-status { font-size: 13px; margin: 0 0 0.9rem; font-weight: 600; }
.gus-status.is-ok { color: var(--accent-ink); }
.gus-status.is-error { color: var(--act-delete-fg); }

/* --- tables --- */
.table-wrap { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  position: sticky; top: 0; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint); background: var(--paper-raised);
  border-bottom: 1.5px solid var(--ink-muted); border-right: 1px solid var(--line-soft);
  padding: 0.7rem 0.9rem; white-space: nowrap;
}
thead th:last-child { border-right: none; }
tbody td {
  padding: 0.68rem 0.9rem; border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line-soft);
  vertical-align: middle; color: var(--ink);
}
tbody td:last-child { border-right: none; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--accent-soft); }
tfoot td { padding: 0.7rem 0.9rem; border-top: 2px solid var(--line); font-weight: 700; color: var(--ink); }

/* filter row embedded directly in <thead>, as its own <tr> — same grid as the data columns below,
   so alignment can never drift the way an independent filter toolbar would. */
tr.filter-row th, tr.filter-row td {
  background: var(--paper); padding: 0.5rem 0.7rem; border-right: 1px solid var(--line-soft);
  border-bottom: 1.5px solid var(--ink-muted); vertical-align: middle;
}
tr.filter-row th:last-child, tr.filter-row td:last-child { border-right: none; }
.mini-ctl { width: 100%; font-size: 12px; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 4px; padding: 0.32rem 0.45rem; min-height: 0; }
.mini-range { display: flex; align-items: center; gap: 0.3rem; }
.mini-range .mini-ctl { min-width: 0; }
.btn-mini-filter { width: 100%; font-size: 12px; font-weight: 700; color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 0.34rem 0.5rem; min-height: 0; }

/* --- pills --- */
.pill {
  display: inline-flex; align-items: center; font-size: 13.2px; font-weight: 700;
  padding: 0.28rem 0.68rem; border-radius: 999px; white-space: nowrap;
}
.pill.legend-pill { font-size: 11px; font-weight: 600; padding: 0.16rem 0.5rem; }
.pill.create  { background: var(--act-create-bg);  color: var(--act-create-fg); }
.pill.update  { background: var(--act-update-bg);  color: var(--act-update-fg); }
.pill.delete  { background: var(--act-delete-bg);  color: var(--act-delete-fg); }
.pill.login   { background: var(--act-login-bg);   color: var(--act-login-fg); }
.pill.approve { background: var(--act-approve-bg); color: var(--act-approve-fg); }
.pill.role-superadmin   { background: var(--role-superadmin-bg);   color: var(--role-superadmin-fg); }
.pill.role-ordermanager { background: var(--role-ordermanager-bg); color: var(--role-ordermanager-fg); }
.pill.role-centrala     { background: var(--role-centrala-bg);     color: var(--role-centrala-fg); }
.pill.role-kierownik    { background: var(--role-kierownik-bg);    color: var(--role-kierownik-fg); }
.pill.role-pos          { background: var(--role-pos-bg);          color: var(--role-pos-fg); }
.pill.vis-global { background: var(--vis-global-bg); color: var(--vis-global-fg); }
.pill.vis-scoped { background: var(--vis-scoped-bg); color: var(--vis-scoped-fg); }
.pill.vis-hidden  { background: var(--vis-hidden-bg);  color: var(--vis-hidden-fg); }

/* --- row action links: the flex wrapper is a nested <div>, NEVER the <td> itself —
   overriding a table cell's own display to flex breaks its row/column grid participation
   (lesson learned the hard way across several mockup review rounds). --- */
.row-link { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; white-space: nowrap; }
.row-link:hover { border-bottom-color: var(--accent); }
/* przycisk POST (np. Usuń) udający link akcji - resetuje chrome globalnego <button>, by pasował do sąsiednich <a> */
button.row-link { background: none; border: none; border-bottom: 1px solid transparent; padding: 0; min-height: 0; cursor: pointer; font-family: var(--font-body); }
.row-link-danger { color: var(--act-delete-fg); }
.row-link-danger:hover { border-bottom-color: var(--act-delete-fg); }
.undo-link { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; white-space: nowrap; }
.undo-link:hover { border-bottom-color: var(--accent); }
.row-links { display: flex; align-items: center; gap: 0.7rem; white-space: nowrap; }
.remove-link { font-size: 12.5px; color: var(--act-delete-fg); text-decoration: none; border-bottom: 1px solid transparent; }
.remove-link:hover { border-bottom-color: var(--act-delete-fg); }

.foot-note { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.9rem; color: var(--ink-faint); font-size: 12.5px; flex-wrap: wrap; }
.foot-note .page-nums { display: flex; gap: 0.6rem; align-items: center; }
.foot-note .page-nums a { color: var(--accent); text-decoration: none; font-weight: 600; }
.foot-note .page-nums a:hover { text-decoration: underline; }
.foot-note .page-nums span.current { color: var(--ink-muted); font-weight: 700; }
.foot-note .page-nums span.disabled { opacity: 0.5; }

.callout {
  margin-top: 1.75rem; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--paper-raised); border-radius: 0 6px 6px 0; padding: 0.95rem 1.15rem;
  font-size: 13px; color: var(--ink-muted); max-width: 74ch;
}
.callout b { color: var(--ink); }

/* Adnotacja o cenach netto - dyskretna, informacyjna, przy każdym miejscu z ceną. */
.net-notice { font-size: 12.5px; color: var(--ink-muted); font-style: italic; margin: 0.4rem 0.15rem 0.9rem; max-width: 74ch; }

/* Podpowiedź pod polem formularza - drobna, wyszarzona. */
.field-hint { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 0.25rem; }

/* Podsumowanie VAT: Netto | VAT | Brutto. Wąska tabela, liczby prawo, brutto wyróżnione. */
table.vat-summary { border-collapse: collapse; margin: 0.6rem 0 0.2rem; min-width: 22rem; }
table.vat-summary th { text-align: right; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; padding: 0.4rem 1.1rem; border-bottom: 1px solid var(--line); }
table.vat-summary th:first-child { text-align: left; }
table.vat-summary td { text-align: right; padding: 0.55rem 1.1rem; font-variant-numeric: tabular-nums; color: var(--ink); }
table.vat-summary td.total { font-weight: 700; color: var(--accent-ink); font-size: 1.05em; }

.actions-row { display: flex; justify-content: flex-end; gap: 0.8rem; margin-top: 1.5rem; }

/* thumbnail preview next to an image upload field - same 40x40 box the product list itself uses */
.thumb-preview-row { display: flex; align-items: center; gap: 0.9rem; }
.thumb-preview-row input[type=file] { flex: 1 1 auto; }
.thumb-preview {
  width: 40px; height: 40px; border-radius: 5px; flex: none; border: 1px solid var(--line);
  background: var(--paper); display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 11px; overflow: hidden;
}
.thumb-preview img { width: 100%; height: 100%; object-fit: cover; }

/* combined 2-pair-per-row table: label|input|label|input, guarantees column+row alignment */
table.kv-form-table-quad { width: 100%; border-collapse: collapse; }
.kv-form-table-quad td { padding: 0.4rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.kv-form-table-quad tr:last-child td { border-bottom: none; }
.kv-form-table-quad td.kv-label { color: var(--ink-muted); font-weight: 600; font-size: 13px; width: 17%; padding-right: 0.7rem; }
.kv-form-table-quad td.kv-input { width: 33%; padding-right: 1.3rem; }
.kv-form-table-quad td.kv-input:last-child { padding-right: 0; }

/* read-only sibling of .kv-form-table-quad - same 4-column label|value|label|value layout, for
   Details-style display pages where the "input" cells are just static text, not real controls. */
table.kv-table-quad { width: 100%; border-collapse: collapse; }
.kv-table-quad td { padding: 0.4rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; font-size: 13.5px; color: var(--ink); }
.kv-table-quad tr:last-child td { border-bottom: none; }
.kv-table-quad td.kv-label { color: var(--ink-muted); font-weight: 600; font-size: 13px; width: 17%; padding-right: 0.7rem; }
.kv-table-quad td.kv-value { width: 33%; padding-right: 1.3rem; }
.kv-table-quad td.kv-value:last-child { padding-right: 0; }

/* --- pricing mode picker: 3 mutually exclusive square radio buttons + per-mode field blocks,
   reactively shown/hidden with pure CSS (:has() - no JavaScript anywhere in this app). The radios
   can stay nested inside their .mode-option label wrapper because :has() reaches into descendants
   of a shared ancestor (.pricing-panel), unlike the older :checked ~ sibling trick which would have
   forced flattening the radios and .mode-fields blocks into direct siblings. --- */
.mode-picker { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.mode-option { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.mode-option.is-disabled { cursor: not-allowed; opacity: 0.6; }
.mode-option input[type=radio] {
  appearance: none; width: 16px; height: 16px; min-height: 0; margin-top: 2px; flex: none;
  border: 2px solid var(--line-strong); border-radius: 3px; background: var(--paper); cursor: pointer;
}
.mode-option input[type=radio]:checked { border-color: var(--accent); background: var(--accent); }
.mode-option input[type=radio]:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.mode-option .mode-text { display: flex; flex-direction: column; gap: 0.1rem; }
.mode-option .mode-title { font-size: 13.5px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: normal; }
.mode-option .mode-sub { font-size: 12px; color: var(--ink-muted); }

.mode-fields { display: none; }
.pricing-panel:has(#mode-fixed:checked) .mode-fields.for-fixed-or-exact,
.pricing-panel:has(#mode-exact:checked) .mode-fields.for-fixed-or-exact,
.pricing-panel:has(#mode-range:checked) .mode-fields.for-range,
.pricing-panel:has(#mode-area:checked) .mode-fields.for-area { display: block; }

.pricing-help {
  margin: 1rem 0 0; padding: 0.7rem 0.9rem; background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: 5px; font-size: 12.5px; color: var(--ink-muted);
}
.pricing-help-title { margin: 0; font-weight: 600; color: var(--accent); }
.pricing-help p { margin: 0.6rem 0 0; }

/* Excel-style tier table: existing tiers read-only, last row holds live inputs + the submit button. */
table.tier-table { width: 100%; border-collapse: collapse; margin-bottom: 0.9rem; }
.tier-table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0.35rem 0.6rem 0.35rem 0; border-bottom: 1.5px solid var(--ink-muted);
}
.tier-table td { padding: 0.4rem 0.6rem 0.4rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; font-size: 13.5px; color: var(--ink); }
.tier-table tr.tier-input-row td { padding-top: 0.6rem; }
.tier-table tr.tier-input-row input { min-height: 32px; }

/* --- okno wyboru produktu (_ProductPicker): porównanie nakładów i cen --- */
.picker-details { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.picker-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.picker-thumb {
  width: 88px; height: 88px; flex: none; border: 1px solid var(--line); border-radius: 5px;
  background: var(--paper); display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); overflow: hidden;
}
.picker-thumb img { width: 100%; height: 100%; object-fit: cover; }
.picker-ident { min-width: 0; }
.picker-ident h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin: 0 0 0.2rem; }
.picker-design { font-size: 12.5px; color: var(--accent); font-weight: 600; margin: 0 0 0.3rem; }
.picker-spec { font-size: 12.5px; color: var(--ink-muted); margin: 0; max-width: 78ch; }
.picker-stock { font-size: 12.5px; color: var(--ink-muted); margin: 0.35rem 0 0; }
.picker-hint { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 0.7rem; }
.picker h4 {
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.5rem;
}
.picker-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.75rem; align-items: start; }

.tier-choices { display: flex; flex-direction: column; gap: 0.4rem; }
.tier-choice {
  display: flex; align-items: baseline; gap: 0.6rem; width: 100%; text-align: left;
  background: var(--paper); border: 1px solid var(--line); border-radius: 5px;
  padding: 0.5rem 0.7rem; cursor: pointer; font: inherit; color: var(--ink);
}
.tier-choice:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.tier-choice.is-picked { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.tier-choice.is-info { cursor: default; }
.tier-choice .tier-qty { font-weight: 700; min-width: 5.5rem; font-variant-numeric: tabular-nums; }
.tier-choice .tier-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.tier-choice .tier-unit { margin-left: auto; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.picker-quote { margin-top: 0.8rem; min-height: 1.5rem; font-size: 13.5px; }
.picker-price { font-size: 1.25rem; font-family: var(--font-display); }
.picker-note {
  margin-top: 0.4rem; font-size: 12.5px; color: var(--ink-muted);
  border-left: 2px solid var(--line); padding-left: 0.6rem;
}
.picker-note.is-warn { border-left-color: var(--accent); color: var(--ink); }

/* --- legacy classes from the previous inline theme, kept compatible so pages not yet
   migrated to .panel/.form-grid don't render broken --- */
/* Pages with no .panel AND no .table-wrap (not yet migrated, e.g. Login) keep the old single
   white card look around the whole <main>. Migrated pages already raise their own card - .panel
   for forms/details, .table-wrap for lists - so they opt out here; otherwise they render a white
   card inside a white card and get clamped to 960px while every other page is 1180px wide. */
main:not(:has(.panel)):not(:has(.table-wrap)) { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; padding: 2rem; max-width: 960px; margin: 3rem auto; }
main.narrow:not(:has(.panel)):not(:has(.table-wrap)) { max-width: 480px; }
table th, table td { padding: 0.5rem 0.75rem 0.5rem 0; }
.fieldset-section { border: 1px solid var(--line); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
.fieldset-section legend { font-weight: 600; padding: 0 0.5rem; color: var(--ink); }
.row { display: flex; gap: 1rem; }
.row .form-group { flex: 1; }
.form-group { margin-bottom: 1rem; }
.validation-summary-errors, .field-validation-error { color: var(--act-delete-fg); font-size: 0.9rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.25rem; }
.alert-success { background: var(--act-create-bg); border: 1px solid var(--act-create-fg); color: var(--act-create-fg); padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
.muted { color: var(--ink-muted); font-size: 0.9rem; }