/* =========================================================================
   Helpdesk IT — system wizualny
   Jasny motyw domyślnie (niezależnie od ustawień systemu), ciemny tylko przez [data-theme="dark"].
   Jedyny „głośny” element: sygnały statusów (kolorowy pasek wiersza + kropka).
   ========================================================================= */
:root {
  --canvas: #f4f5f5;
  --surface: #ffffff;
  --surface-2: #f8f9f9;      /* lekko wyróżnione tło (nagłówki, paski narzędzi) */
  --hover: #f0f3f3;
  --ink: #1b2124;
  --ink-2: #3c474c;
  --muted: #5e6a70;
  --faint: #8d989d;
  --line: #e3e6e8;
  --line-strong: #cfd5d8;

  --accent: #0f6475;         /* petrol */
  --accent-hover: #0b5160;
  --accent-soft: #e2eff1;
  --accent-ink: #0b5160;
  --on-accent: #ffffff;

  --danger: #c43d2f;
  --danger-soft: #fbebe8;
  --ok: #2e8a55;
  --ok-soft: #e6f4ec;
  --warn: #a8690a;
  --warn-soft: #fcf2df;
  --info-soft: #e7eefb;

  /* Sygnały statusów */
  --st-new: #2f6fdb;
  --st-progress: #c98410;
  --st-wait: #8a5cd1;
  --st-done: #2e9a5e;
  --st-closed: #98a2a7;

  --shadow-pop: 0 12px 32px rgba(20, 30, 35, .14), 0 2px 6px rgba(20, 30, 35, .06);
  --radius: 10px;
  --radius-sm: 7px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;

  /* Wykresy: kategoryczne sloty 1–2 (zweryfikowane walidatorem palety) */
  --series-1: #2a78d6; --series-2: #eb6834;

  /* Aliasy dla komponentów: formularz zgłoszenia, kategorie, raporty, pasek przerwy */
  --card: var(--surface); --surface-3: var(--hover);
  --border: var(--line); --border-strong: var(--line-strong);
  --brand: var(--accent); --brand-solid: var(--accent); --brand-soft: var(--accent-soft); --brand-ring: var(--accent-soft);
  --brand-line: color-mix(in srgb, var(--accent) 45%, var(--line));
  --success: var(--ok); --success-soft: var(--ok-soft); --success-line: color-mix(in srgb, var(--ok) 35%, transparent);
  --warn-solid: var(--warn); --warn-line: color-mix(in srgb, var(--warn) 35%, transparent);
  --danger-solid: var(--danger); --danger-line: color-mix(in srgb, var(--danger) 35%, transparent);
  --info: var(--st-new); --info-line: color-mix(in srgb, var(--st-new) 30%, transparent);
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem;
  --r-sm: 5px; --r-md: var(--radius-sm); --r-lg: var(--radius); --r-full: 999px;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .875rem; --fs-base: .9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.25rem;
  --shadow-sm: none; --shadow-lg: var(--shadow-pop);
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* Ciemny motyw — tylko ręcznie wybrany (przełącznik w aplikacji) */
:root[data-theme="dark"] {
  --canvas: #121619;
  --surface: #191e22;
  --surface-2: #1e2428;
  --hover: #232a2f;
  --ink: #e4e9eb;
  --ink-2: #c3ccd0;
  --muted: #93a0a6;
  --faint: #6c787e;
  --line: #2a3237;
  --line-strong: #3a444a;
  --accent: #5bb8c8;
  --accent-hover: #7ccad7;
  --accent-soft: #1d3439;
  --accent-ink: #8fd3df;
  --on-accent: #0c1a1d;
  --danger: #ef7a6c;
  --danger-soft: #3a2220;
  --ok: #5cc48a;
  --ok-soft: #1b3226;
  --warn: #e3a948;
  --warn-soft: #382c17;
  --info-soft: #1c2a40;
  --st-new: #6a9cf0;
  --st-progress: #e3a948;
  --st-wait: #b18ff0;
  --st-done: #5cc48a;
  --st-closed: #6c787e;
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --series-1: #3987e5; --series-2: #d95926;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { letter-spacing: -.01em; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85em; }
::selection { background: var(--accent-soft); }

/* ---------- Layout ---------- */
.layout { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.1rem 1.15rem 1rem; font-weight: 600; font-size: 1rem; color: var(--ink);
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-size: .95rem; flex: none;
}
.sidebar nav { padding: .25rem .6rem 1rem; display: flex; flex-direction: column; gap: 1px; flex: 1; overflow-y: auto; }
.sidebar .nav-section { font-size: .78rem; font-weight: 500; color: var(--muted); padding: 1rem .6rem .3rem; }
.sidebar a.item {
  position: relative; display: flex; align-items: center; gap: .65rem;
  padding: .45rem .6rem; border-radius: var(--radius-sm);
  color: var(--ink-2); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.sidebar a.item i { font-size: 1rem; width: 1.1rem; text-align: center; color: var(--faint); }
.sidebar a.item:hover { background: var(--hover); color: var(--ink); }
.sidebar a.item.active { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.sidebar a.item.active i { color: var(--accent); }
.sidebar a.item.active::before {
  content: ""; position: absolute; left: -.6rem; top: .45rem; bottom: .45rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.sidebar .foot { padding: .9rem 1.15rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--canvas);
  background: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 2rem; min-height: 60px;
}
.topbar h1 { font-size: 1.2rem; margin: 0; font-weight: 600; line-height: 1.25; }
.topbar .sub { color: var(--muted); font-size: .84rem; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; }
.content { padding: 1.5rem 2rem 3rem; width: 100%; }

/* ---------- User chip / avatary ---------- */
.userchip { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 600; font-size: .78rem;
}
.avatar.sm { width: 24px; height: 24px; font-size: .64rem; }
.avatar.alt { background: var(--info-soft); color: var(--st-new); }
.userchip .meta { line-height: 1.2; }
.userchip .meta b { font-size: .86rem; font-weight: 600; }
.userchip .meta span { font-size: .76rem; color: var(--muted); }
.icon-btn {
  position: relative; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; cursor: pointer; font-size: 1.05rem; color: var(--muted); display: grid; place-items: center; flex: none;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }

/* ---------- Powierzchnie ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card .card-body { padding: 1.25rem 1.4rem; }
.card-title { font-weight: 600; font-size: 1rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.stack > * + * { margin-top: 1rem; }

/* ---------- Kolejka zgłoszeń ---------- */
.queue-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tabs { display: flex; gap: 1.4rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 0 .7rem; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  color: var(--muted); font-weight: 500; font-size: .92rem; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.tab .count { font-size: .76rem; font-weight: 600; color: var(--muted); background: var(--hover); border-radius: 999px; padding: .05rem .5rem; font-variant-numeric: tabular-nums; }
.tab.active .count { background: var(--accent-soft); color: var(--accent-ink); }
.queue-head .btn { margin-bottom: .55rem; }

.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .9rem; }
.filters .form-select { width: auto; min-width: 150px; padding-top: .38rem; padding-bottom: .38rem; font-size: .86rem; }
.filters .form-select.set { border-color: var(--accent); color: var(--accent-ink); background-color: var(--accent-soft); }
.filters .fl-label { font-size: .84rem; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; }

.queue { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

/* ---------- Tabela ---------- */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font-size: .8rem; font-weight: 500; color: var(--muted); padding: .6rem .9rem; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.tbl td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl tbody tr.clickable:hover { background: var(--hover); }
.tbl a.row-link { color: var(--ink); text-decoration: none; font-weight: 500; }
.tbl a.row-link:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.tbl .nowrap { white-space: nowrap; }
.tbl .num { color: var(--muted); font-size: .84rem; }
.tbl .col-title { min-width: 240px; }
.tbl .row-meta { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.tbl .row-meta i { font-size: .72rem; margin-right: .2rem; }
.tbl .dim { color: var(--muted); }
/* Sygnał statusu: pasek przy lewej krawędzi wiersza */
.tbl td.sig { width: 4px; padding: 0; position: relative; }
.tbl td.sig::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sig, transparent); }
.tbl th.sig { width: 4px; padding: 0; }
/* Kolejka: zwarta tabela, jedna linia na zgłoszenie, stałe szerokości kolumn */
.tbl-queue { table-layout: fixed; min-width: 640px; }
.tbl-queue td { padding-top: .55rem; padding-bottom: .55rem; }
.tbl-queue .cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-queue th { overflow: hidden; text-overflow: ellipsis; }
.tbl-queue .c-num { width: 64px; }
.tbl-queue .c-cat { width: 190px; }
.tbl-queue .c-person { width: 190px; }
.tbl-queue .c-status { width: 170px; }
.tbl-queue .c-date { width: 110px; }
.tbl-queue .lock-ic { color: var(--warn); font-size: .78rem; margin-right: .4rem; }
@media (max-width: 1400px) {
  .tbl-queue .c-cat { width: 150px; } .tbl-queue .c-person { width: 160px; }
  .tbl-queue .c-status { width: 140px; } .tbl-queue .c-date { width: 90px; }
}
@media (max-width: 1200px) {
  .tbl .hide-md { display: none; }
  .tbl-queue .c-num { width: 52px; } .tbl-queue .c-person { width: 150px; }
  .tbl-queue .c-status { width: 125px; } .tbl-queue .c-date { width: 80px; }
}
@media (max-width: 1000px) { .tbl .hide-lg { display: none; } }

/* ---------- Status: kropka + nazwa ---------- */
.status { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sig); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig) 18%, transparent); }
.sig-new { --sig: var(--st-new); }
.sig-progress { --sig: var(--st-progress); }
.sig-wait { --sig: var(--st-wait); }
.sig-done { --sig: var(--st-done); }
.sig-closed { --sig: var(--st-closed); }

/* ---------- Paginacja ---------- */
.pager { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; padding: .75rem .9rem; border-top: 1px solid var(--line); }
.pager:empty { display: none; }
.pager .pg { min-width: 32px; height: 32px; padding: 0 .5rem; border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; font-size: .86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pager .pg:hover:not(:disabled):not(.active) { background: var(--hover); }
.pager .pg.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.pager .pg:disabled { opacity: .35; cursor: default; }
.pager .pg-gap { color: var(--muted); padding: 0 .2rem; }
.pager .pg-info { margin-left: auto; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* ---------- Etykiety (kategorie, role, flagi) ---------- */
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 5px; font-size: .76rem; font-weight: 500; white-space: nowrap; background: var(--hover); color: var(--ink-2); border: 1px solid var(--line); }
.pill.sky { background: var(--info-soft); color: var(--st-new); border-color: transparent; }
.pill.amber, .pill.lock { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.emerald { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill.violet { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.pill.rose { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.pill.slate { background: var(--hover); color: var(--ink-2); }
.pill.trunc { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

/* ---------- Formularze ---------- */
.form-label { display: block; font-weight: 500; font-size: .86rem; margin-bottom: .3rem; color: var(--ink-2); }
.req::after { content: " *"; color: var(--danger); }
.form-control, .form-select {
  display: block; width: 100%; background-color: var(--surface); color: var(--ink);
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong); padding: .5rem .7rem; font-size: .9rem; line-height: 1.4;
  transition: border-color .12s, box-shadow .12s;
}
.form-control::placeholder { color: var(--faint); }
.form-control:hover, .form-select:hover { border-color: var(--faint); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: 0; }
.form-control:disabled, .form-select:disabled { background-color: var(--surface-2); color: var(--muted); }
.form-select { appearance: none; padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238d989d' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center; }
.form-control-sm, .form-select-sm { padding-top: .35rem; padding-bottom: .35rem; font-size: .85rem; }
textarea.form-control { resize: vertical; }
input[type="checkbox"] { accent-color: var(--accent); }

/* ---------- Przyciski ---------- */
.btn {
  border-radius: var(--radius-sm); font-weight: 500; font-size: .88rem; padding: .48rem .95rem; line-height: 1.3;
  border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  flex: none; white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s, color .12s;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-light { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-light:hover:not(:disabled) { background: var(--hover); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--line-strong); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); border-color: transparent; }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover:not(:disabled) { filter: brightness(.92); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); background: var(--hover); }
.btn-sm { padding: .3rem .6rem; font-size: .82rem; }
.btn.on { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-control:focus-visible, .form-select:focus-visible, .wys-edit:focus-visible { outline: none; }

/* ---------- Szczegóły zgłoszenia ---------- */
.ticket-head { margin-bottom: 1.25rem; }
.ticket-head .crumbs { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.ticket-head h2 { margin: 0 0 .5rem; font-size: 1.55rem; font-weight: 600; line-height: 1.25; max-width: 60ch; }
.ticket-head .tags { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; color: var(--muted); font-size: .86rem; }
.ticket-head .tags .num { color: var(--muted); font-variant-numeric: tabular-nums; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
.side-panel { position: sticky; top: 76px; }
.side-label { font-size: .82rem; font-weight: 500; color: var(--muted); margin: 0 0 .35rem; }
.side-block + .side-block { margin-top: 1rem; }

/* ---------- Korespondencja ---------- */
.thread { display: flex; flex-direction: column; }
.msg { display: flex; gap: .75rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.msg:first-child { border-top: 0; padding-top: .2rem; }
.msg .av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .72rem; background: var(--accent-soft); color: var(--accent-ink); }
.msg .bubble { flex: 1; min-width: 0; }
.msg.internal .bubble { background: var(--warn-soft); border-radius: var(--radius-sm); padding: .6rem .8rem; margin: -.3rem 0; }
.msg.internal .av { background: var(--warn-soft); color: var(--warn); }
.msg .who { font-size: .88rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.msg .time { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 400; }
.msg .body { margin-top: .2rem; white-space: pre-wrap; font-size: .92rem; overflow-wrap: anywhere; }

/* Zmiana statusu w korespondencji — zwarty wiersz między wiadomościami */
.evt { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); flex-wrap: wrap; }
.evt:first-child { border-top: 0; padding-top: .2rem; }
.evt-ic { flex: none; width: 32px; height: 24px; display: grid; place-items: center; color: var(--sig, var(--muted)); font-size: .95rem; }
.evt-text { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; min-width: 0; flex: 1; }
.evt-text b { color: var(--ink-2); font-weight: 600; }
.evt .status { font-size: .84rem; }
.evt-arrow { font-size: .75rem; color: var(--faint); }
.evt .time { font-size: .78rem; font-variant-numeric: tabular-nums; }

/* ---------- Historia ---------- */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 .9rem 1.1rem; border-left: 1px solid var(--line); margin-left: 4px; font-size: .88rem; }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--sig, var(--accent)); box-sizing: border-box; }
.timeline .t { font-size: .78rem; color: var(--muted); }

/* ---------- Różne ---------- */
.meta-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.meta-row:last-child { border-bottom: 0; }
.meta-row .k { color: var(--muted); flex: none; }
.meta-row > :last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
a.plain { color: var(--accent-ink); text-decoration: none; }
a.plain:hover { text-decoration: underline; }
.empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }
.empty i { font-size: 1.6rem; color: var(--faint); }
.empty p { margin: .5rem 0 1rem; }
.loading { display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--muted); padding: 3rem 1rem; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: spin .7s linear infinite; flex: none; }
.btn .spinner { width: 14px; height: 14px; border-color: color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; }
@keyframes spin { to { transform: rotate(360deg); } }
.hint { color: var(--muted); font-size: .82rem; margin-top: .35rem; }
.alert { border-radius: var(--radius-sm); padding: .7rem .9rem; font-size: .88rem; display: flex; gap: .55rem; align-items: flex-start; }
.alert.err { background: var(--danger-soft); color: var(--danger); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.alert.info { background: var(--info-soft); color: var(--ink-2); }
.alert.info > i { color: var(--st-new); }
.token { display: inline-flex; align-items: center; gap: .3rem; }
.token code { background: var(--hover); padding: .15rem .4rem; border-radius: 5px; color: var(--ink-2); }
.divider { border: 0; border-top: 1px solid var(--line); margin: 1.1rem 0; }
.inline-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; cursor: pointer; color: var(--ink-2); }

/* Toasty */
.toast-wrap { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 6000; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; }
.toast-fixed { pointer-events: auto; animation: toast-in .18s ease-out; padding: .6rem 1rem; border-radius: var(--radius-sm); background: var(--ink); color: var(--canvas); box-shadow: var(--shadow-pop); font-weight: 500; font-size: .88rem; display: flex; align-items: center; gap: .5rem; }
.toast-fixed.ok::before { content: "✓"; color: var(--st-done); font-weight: 700; }
.toast-fixed.err { background: var(--danger); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* Klasy pomocnicze używane w szablonach */
.text-muted { color: var(--muted) !important; }
.text-end { text-align: right; }
.text-primary { color: var(--accent); }
.mt-2 { margin-top: .5rem; }

/* ---------- Załączniki ---------- */
.attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .6rem; }
.attach-thumb { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in; background: var(--surface-2); }
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-thumb .zoom { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(10, 15, 18, .4); opacity: 0; transition: opacity .15s; font-size: 1.2rem; }
.attach-thumb:hover .zoom, .attach-thumb:focus-visible .zoom { opacity: 1; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 5000; background: rgba(8, 11, 13, .92); display: grid; place-items: center; }
.lightbox .lb-fig { margin: 0; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.lightbox .lb-img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 6px; }
.lightbox .lb-cap { color: #c3ccd0; font-size: .85rem; }
.lightbox .lb-close, .lightbox .lb-nav { position: fixed; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lightbox .lb-close { top: 1rem; right: 1.25rem; width: 42px; height: 42px; font-size: 1.1rem; }
.lightbox .lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 1.3rem; }
.lightbox .lb-close:hover, .lightbox .lb-nav:hover { background: rgba(255, 255, 255, .22); }
.lightbox .lb-prev { left: 1rem; }
.lightbox .lb-next { right: 1rem; }

/* ---------- Dialog ---------- */
.dialog-back { position: fixed; inset: 0; background: rgba(12, 18, 21, .45); display: grid; place-items: center; z-index: 4000; padding: 1rem; animation: fade .12s ease-out; }
.dialog { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; width: 100%; max-width: 500px; box-shadow: var(--shadow-pop); max-height: 90vh; display: flex; flex-direction: column; animation: pop .14s ease-out; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.99); } }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem .5rem; font-size: 1.02rem; }
.dialog-head b { font-weight: 600; }
.dialog-body { padding: .75rem 1.25rem 1.1rem; overflow-y: auto; }
.dialog-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .9rem 1.25rem; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 12px 12px; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 500; font-size: .86rem; margin-bottom: .3rem; color: var(--ink-2); }
.field input, .field select { width: 100%; }

/* ---------- Przełącznik ---------- */
.switch { position: relative; display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .9rem; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); transition: background .2s; position: relative; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- WYSIWYG ---------- */
.wys { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.wys:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wys-tools { display: flex; align-items: center; gap: 1px; padding: .3rem .4rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--surface-2); }
.wys-tools button { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 5px; cursor: pointer; color: var(--muted); display: grid; place-items: center; font-size: .95rem; }
.wys-tools button:hover { background: var(--hover); color: var(--ink); }
.wys-tools .sep { width: 1px; height: 18px; background: var(--line); margin: 0 .3rem; }
.wys-edit { min-height: 130px; padding: .7rem .8rem; font-size: .92rem; outline: none; }
.wys-edit:empty::before { content: attr(data-ph); color: var(--faint); }
.wys-edit ul, .wys-edit ol { padding-left: 1.4rem; }
.wys-edit a { color: var(--accent-ink); }

.rich { color: var(--ink-2); line-height: 1.6; max-width: 75ch; overflow-wrap: anywhere; }
.rich ul, .rich ol { padding-left: 1.4rem; }
.rich a { color: var(--accent-ink); }
.rich img { display: block; max-width: 100%; max-height: 420px; margin: .6rem 0; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; }
.rich img:hover { border-color: var(--accent); }
.wys-edit img { display: block; max-width: 100%; max-height: 260px; margin: .4rem 0; border-radius: 6px; border: 1px solid var(--line); }
.wys-edit img[data-pending] { opacity: .45; }

/* ---------- Role i uprawnienia ---------- */
.perm-group-title { font-size: .84rem; font-weight: 500; color: var(--muted); margin: 1rem 0 .45rem; }
.roles-layout { display: grid; grid-template-columns: 290px 1fr; gap: 1.25rem; align-items: start; }
.role-list-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .65rem .8rem; margin-bottom: .5rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.role-list-item:hover { background: var(--hover); }
.role-list-item.active { border-color: var(--accent); background: var(--accent-soft); }
.role-list-item .rl-name { font-weight: 600; font-size: .92rem; }
.role-list-item .rl-meta { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
.perm-card { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .12s, background .12s; }
.perm-card:hover { border-color: var(--line-strong); }
.perm-card.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.perm-card input { margin-top: .2rem; width: 1rem; height: 1rem; flex: none; }
.perm-card .pl { font-weight: 500; font-size: .88rem; }
.perm-card .pk { font-size: .74rem; color: var(--muted); font-family: ui-monospace, Consolas, monospace; }
.perm-columns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 1100px) { .roles-layout { grid-template-columns: 1fr; } .perm-columns { grid-template-columns: 1fr; } }

/* ---------- Powiadomienia ---------- */
.notif { position: relative; }
.notif-badge { position: absolute; top: 3px; right: 2px; background: var(--danger); color: #fff; font-size: .62rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--canvas); box-sizing: content-box; }
.notif-panel { position: absolute; right: 0; top: 44px; width: 360px; max-width: 90vw; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); z-index: 50; overflow: hidden; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.notif-head b { font-weight: 600; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { display: flex; gap: .7rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); position: relative; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--hover); }
.notif-item.unread::after { content: ""; position: absolute; right: .9rem; top: 1rem; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.notif-item.unread .nm { font-weight: 500; }
.notif-item i { color: var(--muted); font-size: 1rem; margin-top: .1rem; }
.notif-item .nm { font-size: .87rem; padding-right: 1rem; }
.notif-item .nt { font-size: .76rem; color: var(--muted); margin-top: .1rem; }
.notif-empty { padding: 1.5rem; text-align: center; color: var(--muted); font-size: .88rem; }

/* ---------- Nowe zgłoszenie ---------- */
/* Widoki-formularze: wyśrodkowany blok o czytelnej szerokości zamiast przyklejenia do lewej */
.new-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 1000px) { .new-layout { grid-template-columns: 1fr; } }
.tips-card { background: transparent; border-style: dashed; }
.tips-card ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.tips-card li { font-size: .86rem; color: var(--muted); margin-bottom: .45rem; }
.form-section { border-top: 1px solid var(--line); padding-top: 1rem; margin: .25rem 0 .9rem; color: var(--muted); font-weight: 500; font-size: .86rem; }

/* ---------- Komponenty pomocnicze (formularz zgłoszenia, kategorie, raporty) ---------- */
h2.card-title, h3.card-title { margin: 0 0 .75rem; }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.alert > div { min-width: 0; }
.btn-icon { padding: 0; width: 32px; height: 32px; justify-content: center; }
.btn-group { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.btn-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 500; color: inherit; text-decoration: underline; cursor: pointer; }
.btn-ghost.danger:hover:not(:disabled) { color: var(--danger); background: var(--danger-soft); }
.check { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }
.form-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; }
.side-note { border-top: 1px solid var(--line); margin-top: .75rem; padding-top: .75rem; color: var(--muted); font-size: .82rem; display: flex; gap: .5rem; }
.pill.count { border-color: transparent; color: var(--muted); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.m-only { display: none; }
kbd { font-family: var(--mono); font-size: .8em; padding: .05rem .35rem; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); }
/* Lista + szczegóły (kategorie) — ten sam wzór co role */
.split { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.list-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .65rem .8rem; margin-bottom: .5rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; cursor: pointer; }
.list-item:hover { background: var(--hover); }
.list-item.active { border-color: var(--accent); background: var(--accent-soft); }
.list-item .rl-name { font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: .4rem; }
.list-item .rl-meta { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
@media (max-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .m-only { display: block; } }

/* ---------- Nowe zgłoszenie: kroki, kafelki, kompletność ---------- */
.form-step + .form-step, #ndyn:not(:empty), #stepShots { border-top: 1px solid var(--border); margin-top: var(--s-5); padding-top: var(--s-5); }
#ndyn .form-step { border: 0; margin: 0; padding: 0; }
.form-step-head { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-4); }
.form-step-head h2 { font-size: var(--fs-lg); margin: 0; font-weight: 650; }
.form-step-head p { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-md); }
.step-no { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: var(--fs-md); display: grid; place-items: center; }
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2); }
.cat-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); border: 1px solid var(--border-strong); border-radius: var(--r-md); cursor: pointer; background: var(--card); transition: border-color .12s, background .12s, box-shadow .12s; }
.cat-tile:hover { border-color: var(--faint); }
.cat-tile input { position: absolute; opacity: 0; pointer-events: none; }
.cat-tile:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand); }
.cat-tile:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.ct-name { font-weight: 600; font-size: var(--fs-md); display: flex; align-items: center; gap: var(--s-1); }
.ct-name i { color: var(--warn); font-size: .8rem; }
.ct-desc { color: var(--muted); font-size: var(--fs-sm); line-height: 1.35; }
.field-foot { display: flex; justify-content: space-between; gap: var(--s-3); }
.field-foot .counter { flex: none; font-variant-numeric: tabular-nums; }
/* Podpowiedzi struktury opisu — stopka w ramce edytora */
.wys-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-1); padding: var(--s-1) var(--s-2); border-top: 1px solid var(--border); background: var(--surface-2); }
.wys-foot-label { font-size: var(--fs-xs); color: var(--muted); margin-right: var(--s-1); }
.prompt { border: 0; background: none; padding: .2rem .45rem; border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); color: var(--brand); cursor: pointer; }
.prompt::before { content: "+ "; }
.prompt:hover { background: var(--brand-soft); }
.prompt.used { color: var(--muted); }
.prompt.used::before { content: "✓ "; }

/* Błędy walidacji przy polach */
.field-error { display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--danger); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.cat-tiles.is-invalid .cat-tile { border-color: var(--danger-line); }
#newResult .alert { margin-bottom: var(--s-5); }
.field-error + .field-foot > .hint:first-child { visibility: hidden; }
kbd { font-family: var(--mono); font-size: .8em; padding: .05rem .35rem; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--card); }
.btn-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }
.submit-row { border-top: 1px solid var(--border); padding-top: var(--s-5); }
.sticky-aside { position: sticky; top: 76px; }
.quality { margin-bottom: var(--s-4); }
.quality-bar { height: 8px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.quality-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--danger); transition: width .3s ease, background .3s; }
.quality-bar span[data-level=mid] { background: var(--warn-solid); }
.quality-bar span[data-level=good] { background: var(--brand-solid); }
.quality-bar span[data-level=great] { background: var(--success); }
.quality-label { font-size: var(--fs-md); color: var(--ink-2); margin-top: var(--s-2); }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist button { display: flex; gap: var(--s-2); align-items: flex-start; width: 100%; text-align: left; padding: var(--s-2); margin: 0 calc(-1 * var(--s-2)); width: calc(100% + 2 * var(--s-2)); border: 0; background: none; border-radius: var(--r-sm); font: inherit; font-size: var(--fs-md); color: var(--ink-2); cursor: pointer; }
.checklist button:hover { background: var(--surface-2); }
.checklist i { color: var(--faint); margin-top: 2px; }
.checklist .done i { color: var(--success); }
.checklist .part i { color: var(--warn-solid); }
.checklist .done .cl-label { color: var(--muted); }
.cl-sub { display: block; font-size: var(--fs-xs); color: var(--muted); }
.quality-mini { font-size: var(--fs-sm); color: var(--muted); margin-left: auto; align-items: center; gap: var(--s-1); }
.quality-mini .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-right: var(--s-1); }
.quality-mini .dot[data-level=mid] { background: var(--warn-solid); }
.quality-mini .dot[data-level=good] { background: var(--brand-solid); }
.quality-mini .dot[data-level=great] { background: var(--success); }
@media (max-width: 960px) { .sticky-aside { position: static; } }
@media (max-width: 820px) { .quality-mini.m-only { display: inline-flex; width: 100%; margin: 0; } .cat-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .cat-tiles { grid-template-columns: 1fr; } }

/* ---------- Podobne zgłoszenia ---------- */
.similar { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); margin: calc(-1 * var(--s-2)) 0 var(--s-4); overflow: hidden; }
.similar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.similar-head i { color: var(--muted); margin-right: var(--s-1); }
.similar-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.similar-list li + li { border-top: 1px solid var(--border); }
.similar-list button { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-3); border: 0; background: var(--card); text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.similar-list button:hover { background: var(--brand-soft); }
.sim-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sim-title { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-meta { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); }
.sim-go { flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--brand); display: flex; align-items: center; gap: 2px; }
.similar-foot { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--muted); }

/* Status szkicu przy przycisku wysyłki */
.draft-status { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-sm); color: var(--muted); }
.draft-status:empty { display: none; }
.draft-status .btn-link { color: var(--muted); font-weight: 500; }
.draft-status .btn-link:hover { color: var(--ink); }

/* ---------- Kategorie: lista pól ---------- */
.fld-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); }
.fld-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-1); border-bottom: 1px solid var(--border); }
.fld-row:last-child { border-bottom: 0; }
.fld-row:hover { background: var(--surface-2); }
.fld-move { display: flex; flex-direction: column; flex: none; }
.fld-move .btn { width: 28px; min-height: 20px; height: 20px; font-size: .75rem; }
.fld-move .btn:disabled { opacity: .25; }
.fld-ic { flex: none; width: 34px; height: 34px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.fld-main { flex: 1; min-width: 0; }
.fld-label { font-weight: 600; font-size: var(--fs-md); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.fld-meta { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.fld-meta code { font-size: inherit; padding: 0 .3rem; }
.fld-actions { flex: none; display: flex; gap: 2px; }
.btn-ghost.danger:hover { color: var(--danger); background: var(--danger-soft); }
.fld-empty { border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.form-preview { margin-top: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); }
.form-preview summary { cursor: pointer; padding: var(--s-3) var(--s-4); font-size: var(--fs-md); font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: var(--s-2); }
.form-preview summary:hover { color: var(--ink); }
.form-preview[open] summary { border-bottom: 1px solid var(--border); }
.form-preview-body { padding: var(--s-4); background: var(--surface-2); border-radius: 0 0 var(--r-md) var(--r-md); }

/* ---------- Raporty ---------- */
.report-toolbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-md); background: var(--surface-3); }
.seg button { border: 0; background: none; padding: .35rem .8rem; border-radius: var(--r-sm); font: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--muted); cursor: pointer; }
.seg button:hover { color: var(--ink); }
.seg button[aria-checked=true] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-sm); }
.kpi-label { color: var(--muted); font-size: var(--fs-sm); font-weight: 500; }
.kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 2px 0; font-variant-numeric: tabular-nums; }
.kpi-delta { font-size: var(--fs-xs); color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.legend { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sw { display: inline-block; width: 12px; height: 3px; border-radius: 2px; flex: none; }
.sw.s1 { background: var(--series-1); }
.sw.s2 { background: var(--series-2); }
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; outline: none; touch-action: pan-y; }
.chart svg:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--r-sm); }
.chart .grid line { stroke: var(--border); stroke-width: 1; }
.chart .grid line:first-of-type { stroke: var(--border-strong); }
.chart text { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.s1, .chart .dot.s1 { stroke: var(--series-1); }
.chart .line.s2, .chart .dot.s2 { stroke: var(--series-2); }
.chart .dot { fill: var(--card); stroke-width: 2; }
.chart .cross { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart-tip { position: absolute; pointer-events: none; min-width: 150px; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-lg); font-size: var(--fs-sm); color: var(--ink-2); z-index: 2; }
.chart-tip .tt { font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.chart-tip div:not(.tt) { display: flex; align-items: center; gap: var(--s-2); }
.chart-tip b { margin-left: auto; padding-left: var(--s-3); color: var(--ink); font-variant-numeric: tabular-nums; }
.report-totals { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--muted); }
.report-totals b { color: var(--ink); font-variant-numeric: tabular-nums; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-5); align-items: start; }
.report-grid .card + .card { margin-top: 0; }
.tbl .tnum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-details { margin-top: var(--s-5); }
.report-details summary { cursor: pointer; padding: var(--s-4) var(--s-6); font-weight: 600; font-size: var(--fs-md); color: var(--ink-2); }
.report-details summary:hover { color: var(--ink); }
.report-details[open] summary { margin-bottom: var(--s-2); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .report-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .kpi { padding: var(--s-3); } .kpi-value { font-size: var(--fs-xl); } .report-details summary { padding: var(--s-4); } .seg { width: 100%; } .seg button { flex: 1; padding: .35rem .25rem; } }

/* ---------- Pasek przerwy technicznej ---------- */
.maint-bar { position: fixed; top: var(--s-3); left: 50%; transform: translateX(-50%); z-index: 5500; display: flex; align-items: center; gap: var(--s-3); width: max-content; max-width: calc(100vw - 2rem); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--warn-line); background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--card); color: var(--ink); box-shadow: var(--shadow-lg); font-size: var(--fs-md); }
.maint-bar[data-state=down] { padding-right: var(--s-4); }
.maint-bar[data-state=up] { border-color: var(--success-line); background: linear-gradient(var(--success-soft), var(--success-soft)), var(--card); }
.maint-bar[data-state=up] > i { color: var(--success); }
.maint-bar .spinner { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--warn-line); border-top-color: var(--warn-solid); animation: spin .8s linear infinite; }

/* ---------- Branding w menu, znaczek w menu ---------- */
.sidebar a.brand { text-decoration: none; }
.sidebar .brand .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
img.brand-logo { object-fit: contain; background: transparent; padding: 0; border-radius: 6px; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .72rem; font-weight: 600; display: inline-grid; vertical-align: middle; place-items: center; }

/* ---------- Panel administratora ---------- */
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.admin-tile { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color .12s, box-shadow .12s, transform .12s; }
.admin-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-pop); transform: translateY(-1px); }
.admin-tile .at-ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-size: 1.15rem; margin-bottom: .35rem; }
.admin-tile .at-title { font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.admin-tile .at-desc { color: var(--muted); font-size: .86rem; }
.admin-tile .at-stat { margin-top: auto; padding-top: .6rem; font-size: .82rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
.admin-tile .at-stat .warn { color: var(--warn); font-weight: 600; }
.crumb-link { color: var(--muted); text-decoration: none; }
.crumb-link:hover { color: var(--accent-ink); text-decoration: underline; }

/* ---------- Ustawienia: rejestracja i branding ---------- */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } }
.brand-preview { display: flex; gap: .75rem; flex-wrap: wrap; }
.brand-preview .bp { flex: 1; min-width: 180px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1rem; display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.brand-preview .bp.light { background: #f8f9f9; color: #1b2124; }
.brand-preview .bp.dark { background: #1e2428; color: #e4e9eb; }
.brand-preview .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: #0f6475; color: #fff; display: grid; place-items: center; flex: none; }
.brand-preview img.brand-mark { background: transparent; }
.logo-drop { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 2px dashed var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.logo-drop:hover, .logo-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.logo-drop .ld-img { width: 64px; height: 64px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--faint); font-size: 1.4rem; }
.logo-drop .ld-img img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Użytkownicy: blokada i scalanie ---------- */
.pending-card { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.pending-row { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pending-row:first-of-type { border-top: 0; }
.pending-row .pr-main { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.pending-row .pr-main span { font-size: .82rem; color: var(--muted); }
.tbl tr.is-blocked td { color: var(--muted); }
.tbl tr.is-blocked .avatar { opacity: .5; filter: grayscale(1); }
.choice { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .4rem; cursor: pointer; }
.choice:hover { background: var(--hover); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice.disabled { opacity: .55; cursor: not-allowed; }
.field label.switch { display: inline-flex; font-weight: 400; color: var(--ink); margin-bottom: 0; }
.field label.choice { display: flex; font-weight: 400; color: var(--ink); margin-bottom: .4rem; }
.choice input { margin-top: .2rem; accent-color: var(--accent); width: auto; flex: none; }
.choice-label { display: block; font-size: .9rem; font-weight: 500; overflow-wrap: anywhere; }
.choice-sub { display: block; font-size: .78rem; color: var(--muted); }
.merge-summary { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem .9rem; margin-bottom: .75rem; }
.merge-summary ul { margin: 0 0 .4rem; padding-left: 1.1rem; font-size: .88rem; }
.dialog { max-height: 90vh; }

.pwa-install { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-2); }
.pwa-install span { flex: 1; min-width: 180px; }
.pwa-install > i { color: var(--accent); font-size: 1.1rem; }

/* ---------- Avatary i profil ---------- */
img.avatar, img.av { object-fit: cover; padding: 0; background: var(--hover); }
.userchip-link { display: flex; align-items: center; gap: .55rem; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--radius-sm); padding: .2rem .4rem .2rem .2rem; margin: -.2rem 0; }
.userchip-link:hover, .userchip-link.active { background: var(--hover); }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.profile-grid > .stack > .card + .card { margin-top: 1.25rem; }
.avatar-edit { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.avatar-drop { position: relative; width: 96px; height: 96px; border-radius: 50%; flex: none; cursor: pointer; border: 0; padding: 0; background: none; }
.avatar-drop .avatar { width: 96px; height: 96px; font-size: 1.6rem; }
.avatar-drop .ov { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 15, 18, .45); color: #fff; font-size: 1.3rem; opacity: 0; transition: opacity .15s; }
.avatar-drop:hover .ov, .avatar-drop:focus-visible .ov, .avatar-drop.over .ov { opacity: 1; }
.avatar-drop.busy .ov { opacity: 1; }
.crop { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.crop-view { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--canvas); cursor: grab; touch-action: none; user-select: none; }
.crop-view.dragging { cursor: grabbing; }
.crop-view img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; pointer-events: none; }
/* okrągły kadr: wszystko poza kołem przyciemnione */
.crop-view::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(10, 15, 18, .55); outline: 2px solid rgba(255, 255, 255, .85); outline-offset: -2px; pointer-events: none; }
.crop-view:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.crop-zoom { display: flex; align-items: center; gap: .6rem; width: 100%; max-width: 280px; color: var(--muted); }
.crop-zoom input { flex: 1; accent-color: var(--accent); }
.pw-rules { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .8125rem; color: var(--muted); }
.pw-rules li { display: flex; align-items: center; gap: .4rem; }
.pw-rules li.ok { color: var(--ok); }
.pw-field { position: relative; }
.pw-field .form-control { padding-right: 2.6rem; }
.pw-field.is-invalid .form-control { border-color: var(--danger); }
.pw-field .pw-eye { position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 1000px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Mobilne menu + baner podglądu roli ---------- */
.menu-toggle { display: none; }
.sb-overlay { display: none; position: fixed; inset: 0; background: rgba(12, 18, 21, .45); z-index: 900; }
.sb-overlay.show { display: block; }
.sim-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 2rem; background: var(--accent); color: var(--on-accent); font-size: .88rem; }
.sim-banner b { font-weight: 600; }
.sim-banner .btn { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 50%, transparent); }

@media (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; }
  .side-panel { position: static; }
}

@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 260px; height: 100vh; z-index: 1000;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-pop); }
  .menu-toggle { display: grid; }
  .topbar { padding: .55rem 1rem; min-height: 54px; }
  .topbar h1 { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar > div:first-child { min-width: 0; }
  .topbar > div:first-child > div { min-width: 0; }
  .topbar .sub { display: none; }
  .userchip .meta { display: none; }
  .content { padding: 1rem 1rem 2.5rem; }
  .sim-banner { padding: .5rem 1rem; }
  .notif-panel { position: fixed; top: 58px; right: 8px; left: 8px; width: auto; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; }
  .filters .form-select { min-width: 0; width: 100%; }
  .filters .fl-label { grid-column: 1 / -1; }
  .tbl .hide-sm { display: none; }
  .tbl .col-title { min-width: 0; }
  .tbl-queue { min-width: 0; }
  .tbl-queue .cut { white-space: normal; }
  .tbl-queue .c-status { width: 120px; }
  .tbl th, .tbl td { padding-left: .6rem; padding-right: .6rem; }
  .card .card-body { padding: 1rem; }
  .grid2-2 { grid-template-columns: 1fr !important; }
  .ticket-head h2 { font-size: 1.3rem; }
}

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

/* ---------- Powiadomienia push: rodzaje (profil) ---------- */
.push-prefs { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .5rem; }

/* ---------- Wzmianki (@osoba) w odpowiedziach ---------- */
.mention { color: var(--accent-ink); background: var(--accent-soft); border-radius: 4px; padding: 0 .2em; font-weight: 500; white-space: nowrap; }
.mention-menu { position: absolute; z-index: 50; min-width: 220px; max-width: 300px; max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); padding: .25rem; }
.mention-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: transparent; padding: .4rem .5rem;
  border-radius: 6px; cursor: pointer; text-align: left; font-size: .88rem; color: var(--ink); }
.mention-menu button.active, .mention-menu button:hover { background: var(--hover); }
.mention-menu .avatar-xs { width: 22px; height: 22px; font-size: .62rem; }
.mention-menu .empty { padding: .45rem .5rem; color: var(--muted); font-size: .85rem; }