/* CRM PM — "drafting table" theme: millimeter-grid paper, DIN-flavored type, safety amber.
   Daily-use internal tool: dense but calm, 2px radii, 1px rules, tabular numerals. */

:root {
  --paper: #faf8f3;
  --paper-2: #f3efe6;
  --grid-line: rgba(47, 72, 88, 0.055);
  --ink: #303959;
  --ink-soft: #51616e;
  --ink-faint: #8b97a1;
  --rule: rgba(48, 57, 89, 0.16);
  --rule-soft: rgba(48, 57, 89, 0.09);
  --card: #fffdf9;
  --amber: #d97708;
  --amber-deep: #b35e00;
  --amber-wash: #fdf2e0;
  --steel: #2f6f8f;
  --steel-wash: #e8f1f5;
  --green: #2e7d4f;
  --green-wash: #e7f3ec;
  --red: #b3362b;
  --red-wash: #faeae8;
  --violet: #5b5ea6;
  --violet-wash: #ecedf7;
  --shadow: 0 1px 0 rgba(48, 57, 89, 0.08), 0 4px 14px -6px rgba(48, 57, 89, 0.18);
  --font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Menlo", monospace;
}

* { box-sizing: border-box; }
html { font-size: 15px; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(rgba(47, 72, 88, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 72, 88, 0.025) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  min-height: 100vh;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.5rem;
}
h1 { font-size: 1.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
h1 .count { color: var(--ink-faint); font-weight: 500; }
h2 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
a { color: var(--steel); text-decoration: none; }
a:hover { text-decoration: underline; }
.num, td.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  background: var(--ink);
  color: #f4f1ea;
  display: flex;
  align-items: stretch;
  gap: 1.2rem;
  padding: 0 1.2rem;
  box-shadow: 0 2px 0 var(--amber);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  padding: 0.65rem 0;
}
.brand:hover { text-decoration: none; }
.brand-logo { height: 1.6rem; width: auto; display: block; }
.topnav { display: flex; align-items: stretch; gap: 0.1rem; flex: 1; }
.topnav a {
  display: flex; align-items: center; gap: 0.45rem;
  color: #cfd6da; padding: 0 0.85rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 3px solid transparent;
}
.topnav a:hover { color: #fff; text-decoration: none; }
.topnav a.active { color: #fff; border-bottom-color: var(--amber); background: rgba(255,255,255,0.04); }
.topnav .badge {
  background: var(--amber); color: #2b1a02; border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.72rem; padding: 0.05rem 0.35rem;
}
.top-right { display: flex; align-items: center; gap: 0.9rem; }
.credits-chip {
  display: flex; flex-direction: column; gap: 3px; min-width: 130px;
  font-family: var(--font-mono); font-size: 0.72rem; color: #cfd6da;
}
.credits-chip .bar { height: 4px; background: rgba(255,255,255,0.18); border-radius: 2px; overflow: hidden; }
.credits-chip .bar i { display: block; height: 100%; background: var(--amber); }
.credits-chip.depleted .bar i { background: var(--red); }
.userbox { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: #cfd6da; }
.userbox form { margin: 0; }
.btn-logout {
  background: none; border: 1px solid rgba(255,255,255,0.25); color: #cfd6da;
  padding: 0.25rem 0.6rem; border-radius: 2px; cursor: pointer; font-size: 0.78rem;
}
.btn-logout:hover { border-color: var(--amber); color: #fff; }

/* ------------------------------------------------------------- layout */
.container { max-width: 1280px; margin: 0 auto; padding: 1.4rem 1.2rem 4rem; }
.container.wide { max-width: 1560px; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs { display: flex; gap: 0.2rem; border-bottom: 2px solid var(--rule); margin-bottom: 1.1rem; }
.tabs a {
  padding: 0.45rem 0.9rem; color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 0.95rem;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs a.active { color: var(--amber-deep); border-bottom-color: var(--amber); }
.tabs .count { color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.8rem; }

.messages { margin: 0 0 1rem; padding: 0; list-style: none; }
.messages li {
  padding: 0.6rem 0.9rem; border: 1px solid; border-left-width: 4px;
  border-radius: 2px; margin-bottom: 0.4rem; background: var(--card); font-size: 0.92rem;
  animation: slide-in 0.25s ease-out;
}
.messages li.success { border-color: var(--green); background: var(--green-wash); }
.messages li.error { border-color: var(--red); background: var(--red-wash); }
.messages li.warning, .messages li.info { border-color: var(--amber); background: var(--amber-wash); }
@keyframes slide-in { from { opacity: 0; transform: translateY(-4px); } }

.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 2px;
  box-shadow: var(--shadow); padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.card > h2:first-child { margin-top: 0.1rem; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.1rem; align-items: start; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } }

.empty {
  text-align: center; color: var(--ink-faint); padding: 2.5rem 1rem;
  border: 1px dashed var(--rule); border-radius: 2px; background: rgba(255,255,255,0.5);
}

/* -------------------------------------------------------------- chips */
.chip {
  display: inline-block; padding: 0.12rem 0.5rem; border-radius: 2px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  border: 1px solid transparent; white-space: nowrap;
}
.chip-rwdz { background: var(--amber-wash); color: var(--amber-deep); border-color: var(--amber); }
.chip-sios { background: var(--green-wash); color: var(--green); border-color: var(--green); }
.chip-bzp { background: var(--steel-wash); color: var(--steel); border-color: var(--steel); }
.chip-ted { background: var(--violet-wash); color: var(--violet); border-color: var(--violet); }
.chip-flag { background: var(--red-wash); color: var(--red); border-color: rgba(179,54,43,0.4); font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }
.chip-muted { background: var(--paper-2); color: var(--ink-soft); border-color: var(--rule-soft); }
.chip-ok { background: var(--green-wash); color: var(--green); border-color: var(--green); }
.chip-warn { background: var(--amber-wash); color: var(--amber-deep); border-color: var(--amber); }
.chip-danger { background: var(--red-wash); color: var(--red); border-color: var(--red); }
.chip-stage { background: var(--steel-wash); color: var(--steel); border-color: var(--steel); }
.chip-stage.wygrany { background: var(--green-wash); color: var(--green); border-color: var(--green); }
.chip-stage.przegrany, .chip-stage.nie_startujemy, .chip-stage.po_terminie { background: var(--paper-2); color: var(--ink-soft); border-color: var(--rule); }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-block; padding: 0.42rem 0.95rem; border-radius: 2px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 2px 0 rgba(48,57,89,0.25); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-primary { background: var(--amber); border-color: var(--amber-deep); color: #2b1a02; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-danger { background: transparent; color: var(--red); border-color: rgba(179,54,43,0.5); }
.btn-danger:hover { border-color: var(--red); }
.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }
/* Buttons that pair a leading icon with a label (e.g. the "Wzbogać" enrich action). em-sized so
   the glyph tracks the button's font size across btn / btn-sm. */
.btn-icon { display: inline-flex; align-items: center; gap: 0.4em; }
.btn-icon-svg { width: 1.05em; height: 1.05em; flex: none; }
/* Buttons that swap their label for a spinner + looping action phrases (enrich / reveal email).
   A constant min-width + centered, no-wrap content keeps the button from jumping as phrases of
   different lengths cycle. Sized to the longest phrase at btn-sm; tune if copy changes. */
.btn-looping { min-width: 12.5rem; justify-content: center; white-space: nowrap; }

/* -------------------------------------------------------------- forms */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select {
  font-family: var(--font-body); font-size: 0.92rem; color: var(--ink);
  padding: 0.42rem 0.55rem; border: 1px solid var(--rule); border-radius: 2px;
  background: #fff; max-width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--amber); outline-offset: 0; border-color: var(--amber-deep); }
label { font-size: 0.82rem; color: var(--ink-soft); display: block; margin-bottom: 0.2rem; }
.field { margin-bottom: 0.8rem; }
.inline-form { display: inline-flex; gap: 0.35rem; align-items: center; margin: 0; }
.filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end;
  padding: 0.7rem 0.9rem; margin-bottom: 1rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: 2px;
}
.filters label { margin: 0 0 0.15rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.filters .grow { flex: 1; min-width: 160px; }
.filters input, .filters select { width: 100%; }
/* Invite row (Zespół): <input>/<select>/<button> auto-size to slightly different heights, so the
   bottom-aligned (.filters align-items: end) send button and role select stick up past the text
   inputs. Pin them all to one height so the row reads on a single axis. */
.invite-form input, .invite-form select, .invite-form .btn { height: 2rem; }

.errorlist { color: var(--red); font-size: 0.85rem; margin: 0.2rem 0; padding-left: 1.1rem; }

/* -------------------------------------------------------------- tables */
table.data { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow); }
table.data th {
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft);
  text-align: left; padding: 0.55rem 0.7rem; border-bottom: 2px solid var(--rule);
  background: var(--paper-2);
}
table.data td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule-soft); font-size: 0.9rem; vertical-align: top; }
table.data tr:hover td { background: var(--amber-wash); }
table.data tr.no-hover:hover td { background: inherit; }
table.data tr.clickable { cursor: pointer; }
table.data td.row-actions .actions { display: flex; gap: 0.35rem; align-items: stretch; }
table.data td.row-actions .actions .inline-form { align-items: stretch; }
.cell-main { font-weight: 600; }
.cell-sub { color: var(--ink-soft); font-size: 0.82rem; }

.pagination { display: flex; gap: 0.4rem; align-items: center; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.85rem; }
.pagination a, .pagination span.cur { padding: 0.2rem 0.6rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--card); }
.pagination span.cur { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------------------------------------------------------- inbox card */
.inbox-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 175px; gap: 1rem;
  background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--amber);
  border-radius: 2px; box-shadow: var(--shadow); padding: 0.95rem 1.05rem; margin-bottom: 0.8rem;
}
.inbox-card.src-sios { border-left-color: var(--green); }
.inbox-card .inbox-main { cursor: pointer; min-width: 0; border-radius: 2px; }
.inbox-card .inbox-main:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.inbox-card .inbox-main h3 { transition: color 0.12s; }
.inbox-card .inbox-main:hover h3 { color: var(--amber-deep); }
.inbox-card h3 { margin: 0.15rem 0 0.25rem; font-size: 1.12rem; }
.inbox-card .proj { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 0.5rem; }
.meta-row { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.84rem; color: var(--ink-soft); margin-bottom: 0.45rem; }
.meta-row .num { color: var(--ink); }
.flags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.inbox-actions { display: flex; flex-direction: column; gap: 0.45rem; justify-content: flex-start; }
.inbox-actions form { margin: 0; display: contents; }
.judge details { margin-top: 0.5rem; font-size: 0.85rem; color: var(--ink-soft); }
.judge summary { cursor: pointer; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); }

/* -------------------------------------------------------------- kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(225px, 1fr); gap: 0.7rem; overflow-x: auto; padding-bottom: 1rem; align-items: start; }
.kcol { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px; min-height: 320px; display: flex; flex-direction: column; }
.kcol-head {
  padding: 0.5rem 0.65rem; border-bottom: 2px solid var(--rule);
  font-family: var(--font-display); font-weight: 700; font-size: 0.86rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft);
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem;
  /* Was position:sticky; top:52px — but .kanban's overflow-x makes it a scroll container, so the
     sticky header resolved against the wrong box and floated down over the first card. The column
     headers don't need to pin (columns are short), so keep them in flow — never overlaps a card. */
  background: var(--paper-2);
}
.kcol-head .num { font-size: 0.78rem; color: var(--ink-faint); }
.kcol-body { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.kcol.dragover .kcol-body {
  outline: 2px dashed var(--amber); outline-offset: -4px;
  background-image: repeating-linear-gradient(-45deg, rgba(217,119,8,0.06) 0 10px, transparent 10px 20px);
}
.kcard {
  background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--steel);
  border-radius: 2px; padding: 0.55rem 0.65rem; cursor: grab; box-shadow: var(--shadow);
}
.kcard.src-rwdz { border-left-color: var(--amber); }
.kcard.src-sios { border-left-color: var(--green); }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: 0.45; }
.kcard .t { font-weight: 600; font-size: 0.9rem; line-height: 1.25; }
.kcard .s { color: var(--ink-soft); font-size: 0.78rem; margin-top: 0.15rem; }
.kcard-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.35rem; font-size: 0.76rem; color: var(--ink-soft); }
.kcard-tags .chip { font-size: 0.68rem; }
.kcard .v { font-family: var(--font-mono); font-size: 0.78rem; color: var(--amber-deep); margin-top: 0.3rem; }
.kcard select { width: 100%; margin-top: 0.45rem; font-size: 0.78rem; padding: 0.2rem 0.3rem; }
.kcol[data-stage="wygrany"] .kcol-head { color: var(--green); }
.kcol[data-stage="przegrany"] .kcol-head { color: var(--red); }

/* ------------------------------------------------------------- dialog */
dialog {
  position: relative;
  border: 1px solid var(--rule); border-top: 4px solid var(--amber); border-radius: 2px;
  box-shadow: 0 14px 40px -10px rgba(48,57,89,0.45); padding: 1.2rem 1.3rem;
  max-width: 430px; width: 92vw; background: var(--card); color: var(--ink);
}
dialog::backdrop { background: rgba(48, 57, 89, 0.45); }
/* Set by scrollLock.ts while any modal dialog is open (body is also pinned via inline styles). */
body.modal-open { overflow: hidden; }
dialog h3 { margin-top: 0; }
.dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.dialog-close {
  position: absolute; top: 0.5rem; right: 0.55rem; z-index: 1;
  width: 1.9rem; height: 1.9rem; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 2px;
  color: var(--ink-soft); font-size: 1.05rem; cursor: pointer; transition: background 0.12s, color 0.12s;
}
.dialog-close:hover { background: var(--paper-2); color: var(--ink); border-color: var(--rule-soft); }
dialog.lead-detail-dialog { max-width: 620px; max-height: 85vh; overflow: auto; }
dialog.lead-detail-dialog .facts-table td { white-space: normal; word-break: break-word; }
.detail-dialog-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; padding-right: 1.8rem; }
.detail-dialog-head h3 { margin: 0; }
.reject-reason { background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 2px; padding: 0.6rem 0.7rem; margin-bottom: 0.8rem; font-size: 0.9rem; }

/* ------------------------------------------------------------ contacts (Kontakty) */
.contacts-section { margin-top: 1rem; }
.contacts-section h4 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.contact-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem;
  padding: 0.5rem 0; border-top: 1px solid var(--rule-soft);
}
.contact-row:first-of-type { border-top: none; }
.contact-main { min-width: 0; }
.contact-line { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.contact-name { font-weight: 600; color: var(--ink); }
.contact-title { color: var(--ink-soft); font-size: 0.88rem; }
.contact-note { color: var(--ink-soft); font-size: 0.82rem; font-style: italic; margin-top: 0.2rem; }
.contact-detail {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  justify-content: flex-end; font-size: 0.88rem; flex: none;
}
.contact-detail a { color: var(--steel); }

/* ------------------------------------------------------------ timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 0.85rem 1.4rem; border-left: 2px solid var(--rule); margin-left: 0.4rem; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 0.2rem;
  width: 10px; height: 10px; background: var(--amber); border: 2px solid var(--card);
  border-radius: 50%; box-shadow: 0 0 0 1px var(--rule);
}
.timeline .when { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-faint); }
.timeline .what { font-size: 0.88rem; }
.timeline .vals { font-size: 0.8rem; color: var(--ink-soft); font-family: var(--font-mono); }

/* ----------------------------------------------------------- analytics */
/* "Inne" reason cell — opens the typed-reasons breakdown modal. */
.linklike {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: none; padding: 0; font: inherit; color: var(--amber-deep); cursor: pointer;
}
.linklike > span { text-decoration: underline; text-underline-offset: 2px; }
.linklike:hover > span { color: var(--ink); }
/* translateY drops the icon onto the lowercase text body — the flex line-box center sits a hair high.
   Hover colour tracks the label (both go to --ink) instead of the icon staying amber. */
.linklike .open-icon { color: var(--amber); flex: none; transform: translateY(1px); }
.linklike:hover .open-icon { color: var(--ink); }
/* The list scrolls inside itself (not the whole dialog) so the title + ✕ stay pinned. */
.reason-tally { list-style: none; margin: 0.2rem 0 0; padding: 0 0.3rem 0 0; max-height: calc(85vh - 7rem); overflow-y: auto; }
.reason-tally li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--rule-soft);
}
.reason-tally li:last-child { border-bottom: none; }
.reason-tally .reason-text { flex: 1; font-size: 0.9rem; }
.reason-tally .reason-count {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--ink-soft); white-space: nowrap; font-size: 0.85rem;
}
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.7rem; margin-bottom: 1rem; }
.kpi { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--amber); border-radius: 2px; padding: 0.7rem 0.85rem; box-shadow: var(--shadow); }
.kpi .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-family: var(--font-display); font-weight: 600; }
.kpi .value { font-family: var(--font-mono); font-size: 1.55rem; font-weight: 600; margin-top: 0.15rem; }
.kpi .sub { font-size: 0.76rem; color: var(--ink-faint); }
.bars { display: flex; flex-direction: column; gap: 0.45rem; }
.bar-row { display: grid; grid-template-columns: 170px 1fr 130px; gap: 0.6rem; align-items: center; font-size: 0.86rem; }
.bar-row .lbl { text-align: right; color: var(--ink-soft); font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; }
.bar-track { background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 2px; height: 22px; position: relative; }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #e8924a, var(--amber)); border-right: 2px solid var(--amber-deep); min-width: 2px; transition: width 0.4s ease; }
.bar-fill.steel { background: linear-gradient(180deg, #5b93ad, var(--steel)); border-right-color: #1d5572; }
.bar-row .val { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- auth */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth-card {
  width: 380px; max-width: 94vw; background: var(--card);
  border: 1px solid var(--rule); border-top: 5px solid var(--amber);
  border-radius: 2px; box-shadow: 0 18px 50px -16px rgba(48,57,89,0.4); padding: 1.8rem 1.7rem;
}
.auth-card .brand { color: var(--ink); font-size: 1.5rem; padding: 0; margin-bottom: 1.2rem; }
.auth-card input { width: 100%; }
.auth-card .btn { width: 100%; margin-top: 0.4rem; }
.auth-links { margin-top: 0.9rem; font-size: 0.84rem; text-align: center; }

/* ------------------------------------------------------------- details */
.facts-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.facts-table th { text-align: left; color: var(--ink-soft); font-weight: 500; padding: 0.3rem 0.8rem 0.3rem 0; white-space: nowrap; vertical-align: top; width: 180px; }
.facts-table td { padding: 0.3rem 0; }
.facts-empty { color: var(--ink-soft); font-style: italic; }
.snapshot-raw { font-family: var(--font-mono); font-size: 0.76rem; }
.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.detail-head h1 { margin: 0; }
.side-meta { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; }
.contact-email { font-family: var(--font-mono); font-size: 0.84rem; }
.enrich-status-box { padding: 0.7rem 0.8rem; border: 1px dashed var(--rule); border-radius: 2px; background: var(--paper-2); font-size: 0.88rem; }
.enrich-status-box.warn { border-color: var(--amber); background: var(--amber-wash); }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--amber); border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -2px; margin-right: 0.3rem; }
/* Inside a button, track the button's own text colour — a fixed amber spinner is invisible on the
   amber primary button (e.g. the modal "Wzbogać"). */
.btn .spinner { border-color: currentColor; border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; padding-bottom: 0.4rem; }
  .topnav { order: 3; width: 100%; overflow-x: auto; }
  .inbox-card { grid-template-columns: 1fr; }
  .inbox-actions { flex-direction: row; flex-wrap: wrap; }
  .bar-row { grid-template-columns: 110px 1fr 90px; }
}