/* 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-rwdz_wip {
  background: var(--amber-wash); color: var(--violet); border-color: var(--violet);
  white-space: normal; line-height: 1.2;
}
.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; }

/* The AI action (tender "Podsumowanie AI"): a gradient sweep running around the border, plus a
   breathing halo, so the LLM-backed action is legible as such in a dense row of plain buttons.
   ::before paints the ring — the conic gradient fills the pseudo, and the two-layer xor mask
   punches out everything but the 2px band, so the button's own fill and label stay untouched.
   ::after is only a box-shadow (drawn outside the border box), which keeps the halo clear of the
   label; `isolation: isolate` is what makes it visible at all inside a table — without a stacking
   context of its own, a z-index:-1 pseudo paints *behind* the row background.
   --ai-angle must be registered to be animatable. Browsers without @property drop the (then
   invalid) conic-gradient and fall back to the plain ghost border — label and action unaffected. */
@property --ai-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.btn-ai { position: relative; isolation: isolate; white-space: nowrap; animation: ai-sweep 5s linear infinite; }
.btn-ai .btn-ai-glyph { width: 1.15em; height: 1.15em; color: var(--amber); }
.btn-ai::before, .btn-ai::after { content: ""; position: absolute; inset: -2px; border-radius: 4px; pointer-events: none; }
.btn-ai::before {
  padding: 2px;
  background: conic-gradient(from var(--ai-angle), transparent 0deg, var(--amber) 45deg,
    var(--violet) 95deg, transparent 150deg, transparent 210deg, var(--amber) 255deg,
    var(--steel) 300deg, transparent 355deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.btn-ai::after { z-index: -1; animation: ai-halo 5s ease-in-out infinite; }
@keyframes ai-sweep { to { --ai-angle: 360deg; } }
@keyframes ai-halo {
  0%, 100% { box-shadow: 0 0 8px -1px rgba(217, 119, 8, 0.40); }
  50% { box-shadow: 0 0 13px 0 rgba(91, 94, 166, 0.42); }
}
/* The motion is decoration — freeze it, but keep the gradient border so the button still reads as
   the AI action. */
@media (prefers-reduced-motion: reduce) {
  .btn-ai, .btn-ai::after { animation: none; }
  .btn-ai::after { box-shadow: 0 0 7px -1px rgba(217, 119, 8, 0.28); }
}

/* -------------------------------------------------------------- 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.src-rwdz_wip { border-left-color: var(--violet); }
.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-rwdz_wip { border-left-color: var(--violet); }
.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; }
}