/* ===========================================================================
   prospect-finder — panel operacyjny

   Wszystkie kolory pochodza z tokens.css. Surowy kolor w tym pliku jest
   bledem: tokeny sa jedynym mechanizmem, ktory utrzyma spojnosc landingu
   i panelu, a te dwie powierzchnie musza wygladac jak jeden produkt.

   Kolejnosc ladowania: tokens.css -> fonts.css -> base.css -> panel.css.
   fonts.css deklaruje IBM Plex; bez niego strona zejdzie na krój systemowy.

   Uklad jest mobile-first. Panel bywa uzywany na telefonie miedzy spotkaniami
   — triaz leadow to typowa czynnosc "w kolejce po kawe", a nie przy biurku.
   Dlatego tabela leadow zamienia sie na karty ponizej 900px, a nie zwija sie
   w poziomy scroll.
   =========================================================================== */

/* --- Szkielet ------------------------------------------------------------ */

body {
  background: var(--pf-surface-sunken);
  min-height: 100dvh;
}

.pf-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

.pf-main {
  width: 100%;
  max-width: var(--pf-width-page);
  margin: 0 auto;
  padding: var(--pf-space-6) var(--pf-space-4) var(--pf-space-16);
}

/* --- Nawigacja ----------------------------------------------------------- */

.pf-topbar {
  background: var(--pf-surface);
  border-bottom: 1px solid var(--pf-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.pf-topbar__inner {
  max-width: var(--pf-width-page);
  margin: 0 auto;
  padding: var(--pf-space-3) var(--pf-space-4);
  display: flex;
  align-items: center;
  gap: var(--pf-space-4);
  flex-wrap: wrap;
}

.pf-brand {
  display: flex;
  align-items: center;
  gap: var(--pf-space-2);
  font-weight: var(--pf-weight-bold);
  color: var(--pf-text);
  text-decoration: none;
  font-size: var(--pf-text-base);
}

.pf-brand img { width: 26px; height: 26px; }

.pf-topbar__spacer { flex: 1 1 auto; }

.pf-wallet-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--pf-space-2);
  padding: var(--pf-space-1) var(--pf-space-3);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-surface-sunken);
  border: 1px solid var(--pf-border);
  font-size: var(--pf-text-sm);
  text-decoration: none;
  color: var(--pf-text);
  font-variant-numeric: tabular-nums;
}

.pf-wallet-chip strong { color: var(--pf-wallet-available); }
.pf-wallet-chip--empty strong { color: var(--pf-wallet-empty); }

/* Nawigacja: na mobile poziomy pasek przewijany, na desktopie zwykly rzad. */
.pf-nav {
  background: var(--pf-surface);
  border-bottom: 1px solid var(--pf-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.pf-nav::-webkit-scrollbar { display: none; }

.pf-nav__inner {
  max-width: var(--pf-width-page);
  margin: 0 auto;
  padding: 0 var(--pf-space-4);
  display: flex;
  gap: var(--pf-space-1);
  white-space: nowrap;
}

.pf-nav a {
  display: inline-block;
  padding: var(--pf-space-3) var(--pf-space-3);
  color: var(--pf-text-muted);
  text-decoration: none;
  font-size: var(--pf-text-sm);
  border-bottom: 2px solid transparent;
}

.pf-nav a:hover { color: var(--pf-text); }

.pf-nav a[aria-current="page"] {
  color: var(--pf-accent);
  border-bottom-color: var(--pf-accent);
  font-weight: var(--pf-weight-medium);
}

.pf-nav__badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.35em;
  margin-left: var(--pf-space-1);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-accent);
  color: var(--pf-on-accent);
  font-size: var(--pf-text-xs);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- Naglowki stron ------------------------------------------------------ */

.pf-page-head { margin-bottom: var(--pf-space-6); }
.pf-page-head h1 { font-size: var(--pf-text-2xl); margin-bottom: var(--pf-space-2); }
.pf-page-head p {
  color: var(--pf-text-muted);
  max-width: var(--pf-width-prose);
  margin-bottom: 0;
}

.pf-eyebrow {
  font-size: var(--pf-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pf-text-subtle);
  font-weight: var(--pf-weight-medium);
  margin-bottom: var(--pf-space-1);
}

/* --- Karty --------------------------------------------------------------- */

.pf-card {
  background: var(--pf-surface-raised);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-6);
  margin-bottom: var(--pf-space-6);
}

.pf-card__title {
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-weight-bold);
  margin-bottom: var(--pf-space-2);
}

.pf-grid {
  display: grid;
  gap: var(--pf-space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pf-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .pf-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .pf-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .pf-main { padding-left: var(--pf-space-6); padding-right: var(--pf-space-6); }
}

/* --- Kafelki liczbowe ---------------------------------------------------- */

.pf-stat {
  background: var(--pf-surface-raised);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  padding: var(--pf-space-4);
}

.pf-stat__label {
  font-size: var(--pf-text-xs);
  color: var(--pf-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--pf-space-1);
}

.pf-stat__value {
  font-size: var(--pf-text-2xl);
  font-weight: var(--pf-weight-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pf-stat__hint {
  font-size: var(--pf-text-xs);
  color: var(--pf-text-muted);
  margin-top: var(--pf-space-2);
}

.pf-stat--available .pf-stat__value { color: var(--pf-wallet-available); }
.pf-stat--reserved  .pf-stat__value { color: var(--pf-wallet-reserved); }
.pf-stat--empty     .pf-stat__value { color: var(--pf-wallet-empty); }

/* --- Podpowiedzi ---------------------------------------------------------
   Produkt sprzedaje twierdzenie "nie zmyslamy danych". Klient musi rozumiec,
   co widzi i za co placi — dlatego podpowiedzi sa elementem konstrukcji
   interfejsu, a nie ozdoba doklejona na koncu.                             */

.pf-hint {
  border-left: 3px solid var(--pf-border-strong);
  background: var(--pf-surface-sunken);
  padding: var(--pf-space-3) var(--pf-space-4);
  border-radius: 0 var(--pf-radius-md) var(--pf-radius-md) 0;
  font-size: var(--pf-text-sm);
  color: var(--pf-text-muted);
  margin-bottom: var(--pf-space-4);
}

.pf-hint p:last-child { margin-bottom: 0; }
.pf-hint strong { color: var(--pf-text); }

.pf-hint--info     { border-left-color: var(--pf-accent); background: var(--pf-accent-subtle); }
.pf-hint--evidence { border-left-color: var(--pf-evidence-border); background: var(--pf-evidence-bg); }
.pf-hint--warning  { border-left-color: var(--pf-status-complained-fg); background: var(--pf-status-complained-bg); }
.pf-hint--danger   { border-left-color: var(--pf-wallet-empty); background: var(--pf-status-complained-bg); }

.pf-hint__title {
  display: block;
  font-weight: var(--pf-weight-bold);
  color: var(--pf-text);
  margin-bottom: var(--pf-space-1);
}

/* Podpowiedz przy polu formularza */
.pf-field-hint {
  display: block;
  font-size: var(--pf-text-xs);
  color: var(--pf-text-muted);
  margin-top: var(--pf-space-1);
  line-height: var(--pf-leading-base);
}

.pf-field-why {
  display: block;
  font-size: var(--pf-text-xs);
  color: var(--pf-text-subtle);
  margin-top: var(--pf-space-1);
}

/* --- Statusy -------------------------------------------------------------
   Kazdy status MUSI byc rozroznialny bez koloru — para tlo/tekst plus osobny
   znacznik tekstowy. Klient triazuje szybko, czesto na ekranie o kiepskim
   kontrascie.                                                              */

.pf-badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: var(--pf-radius-pill);
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-weight-medium);
  white-space: nowrap;
}

.pf-badge--new        { background: var(--pf-status-new-bg);        color: var(--pf-status-new-fg); }
.pf-badge--accepted   { background: var(--pf-status-accepted-bg);   color: var(--pf-status-accepted-fg); }
.pf-badge--rejected   { background: var(--pf-status-rejected-bg);   color: var(--pf-status-rejected-fg); }
.pf-badge--complained { background: var(--pf-status-complained-bg); color: var(--pf-status-complained-fg); }
.pf-badge--dupe       { background: var(--pf-status-dupe-bg);       color: var(--pf-status-dupe-fg); }
.pf-badge--blocked    { background: var(--pf-status-blocked-bg);    color: var(--pf-status-blocked-fg); }

/* --- Dowod kwalifikacji --------------------------------------------------
   Komponent charakterystyczny calego produktu: kazdy lead ma source_url.
   To jest element, po ktorym klient poznaje, ze nie zmyslamy.              */

.pf-evidence {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-space-2);
  padding: var(--pf-space-2) var(--pf-space-3);
  background: var(--pf-evidence-bg);
  border: 1px solid var(--pf-evidence-border);
  border-radius: var(--pf-radius-md);
  color: var(--pf-evidence-fg);
  font-size: var(--pf-text-sm);
  text-decoration: none;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.pf-evidence:hover { color: var(--pf-evidence-fg); text-decoration: underline; }
.pf-evidence__label { font-weight: var(--pf-weight-medium); }

/* --- Lista leadow --------------------------------------------------------
   Ponizej 900px tabela zamienia sie w karty. Poziomy scroll w tabeli leadow
   sprawia, ze na telefonie nie da sie porownac dwoch rekordow — a to jest
   dokladnie ta czynnosc, ktora klient wykonuje.                            */

.pf-leads { display: grid; gap: var(--pf-space-4); }

.pf-lead {
  background: var(--pf-surface-raised);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-4);
}

.pf-lead__head {
  display: flex;
  align-items: flex-start;
  gap: var(--pf-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--pf-space-3);
}

.pf-lead__name {
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-weight-bold);
  margin: 0;
  flex: 1 1 12rem;
}

.pf-lead__name a { color: var(--pf-text); text-decoration: none; }
.pf-lead__name a:hover { color: var(--pf-accent); }

.pf-lead__score {
  font-variant-numeric: tabular-nums;
  font-size: var(--pf-text-sm);
  color: var(--pf-text-subtle);
}

.pf-lead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-2) var(--pf-space-4);
  font-size: var(--pf-text-sm);
  color: var(--pf-text-muted);
  margin-bottom: var(--pf-space-3);
}

.pf-lead__meta > span { display: inline-flex; gap: var(--pf-space-1); }
.pf-lead__meta dt { color: var(--pf-text-subtle); }

.pf-lead__brands {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-1);
  margin-bottom: var(--pf-space-3);
}

.pf-chip {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-surface-sunken);
  border: 1px solid var(--pf-border);
  font-size: var(--pf-text-xs);
  color: var(--pf-text-muted);
}

.pf-chip--own { background: var(--pf-status-dupe-bg); color: var(--pf-status-dupe-fg); border-color: transparent; }

.pf-lead__actions {
  display: flex;
  gap: var(--pf-space-2);
  flex-wrap: wrap;
  padding-top: var(--pf-space-3);
  border-top: 1px solid var(--pf-border);
}

/* --- Przyciski ----------------------------------------------------------- */

.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-space-2);
  padding: var(--pf-space-2) var(--pf-space-4);
  border-radius: var(--pf-radius-md);
  border: 1px solid var(--pf-border-strong);
  background: var(--pf-surface);
  color: var(--pf-text);
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-weight-medium);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  /* Cel dotykowy — panel jest uzywany na telefonie. */
  min-height: 44px;
}

.pf-btn:hover { border-color: var(--pf-text-subtle); color: var(--pf-text); }

.pf-btn--primary {
  background: var(--pf-accent);
  border-color: var(--pf-accent);
  color: var(--pf-on-accent);
}
.pf-btn--primary:hover { background: var(--pf-accent-hover); color: var(--pf-on-accent); }

.pf-btn--accept {
  background: var(--pf-status-accepted-bg);
  border-color: var(--pf-status-accepted-fg);
  color: var(--pf-status-accepted-fg);
}

.pf-btn--reject {
  background: var(--pf-surface);
  border-color: var(--pf-border-strong);
  color: var(--pf-text-muted);
}

.pf-btn--ghost { background: transparent; border-color: transparent; color: var(--pf-accent); }
.pf-btn--sm { min-height: 36px; padding: var(--pf-space-1) var(--pf-space-3); font-size: var(--pf-text-xs); }
.pf-btn--block { width: 100%; }
.pf-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --- Formularze ---------------------------------------------------------- */

.pf-form { display: grid; gap: var(--pf-space-6); }
.pf-field { display: block; }

.pf-field > label,
.pf-fieldset > legend {
  display: block;
  font-weight: var(--pf-weight-medium);
  margin-bottom: var(--pf-space-1);
  font-size: var(--pf-text-sm);
}

.pf-field input[type="text"],
.pf-field input[type="email"],
.pf-field input[type="password"],
.pf-field input[type="number"],
.pf-field input[type="url"],
.pf-field select,
.pf-field textarea {
  width: 100%;
  padding: var(--pf-space-3);
  border: 1px solid var(--pf-border-strong);
  border-radius: var(--pf-radius-md);
  background: var(--pf-surface);
  color: var(--pf-text);
  font-family: inherit;
  font-size: var(--pf-text-base); /* 16px — mniej powoduje zoom na iOS */
  min-height: 44px;
}

.pf-field textarea { min-height: 7rem; resize: vertical; line-height: var(--pf-leading-base); }
.pf-field--required > label::after { content: " *"; color: var(--pf-wallet-empty); }

.pf-fieldset { border: 0; padding: 0; margin: 0; }

.pf-checks { display: grid; gap: var(--pf-space-2); }

.pf-check {
  display: flex;
  align-items: flex-start;
  gap: var(--pf-space-3);
  padding: var(--pf-space-3);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  cursor: pointer;
}

.pf-check:hover { border-color: var(--pf-border-strong); }
.pf-check input { margin-top: 0.2em; width: 1.1em; height: 1.1em; flex: none; }
.pf-check__body { font-size: var(--pf-text-sm); }
.pf-check__body strong { display: block; font-weight: var(--pf-weight-medium); }

.pf-form-actions {
  display: flex;
  gap: var(--pf-space-3);
  flex-wrap: wrap;
  padding-top: var(--pf-space-4);
  border-top: 1px solid var(--pf-border);
}

/* --- Komunikaty ---------------------------------------------------------- */

.pf-flash {
  padding: var(--pf-space-3) var(--pf-space-4);
  border-radius: var(--pf-radius-md);
  margin-bottom: var(--pf-space-4);
  font-size: var(--pf-text-sm);
  border: 1px solid transparent;
}

.pf-flash--ok    { background: var(--pf-status-accepted-bg); color: var(--pf-status-accepted-fg); }
.pf-flash--error { background: var(--pf-status-complained-bg); color: var(--pf-status-complained-fg); }
.pf-flash--info  { background: var(--pf-accent-subtle); color: var(--pf-accent); }

/* --- Tabele (skarbonka, przebiegi, zrodla) -------------------------------
   Tabele finansowe zostaja tabelami — kolumna kwot musi sie wyrownywac.
   Zawijamy je we wlasny kontener z przewijaniem, zeby strona nie przewijala
   sie w poziomie jako calosc.                                              */

.pf-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  background: var(--pf-surface-raised);
}

.pf-table { width: 100%; border-collapse: collapse; font-size: var(--pf-text-sm); }
.pf-table th { text-align: left; color: var(--pf-text-subtle); font-weight: var(--pf-weight-medium); white-space: nowrap; }
.pf-table td, .pf-table th { padding: var(--pf-space-3); border-bottom: 1px solid var(--pf-border); }
.pf-table tr:last-child td { border-bottom: 0; }
.pf-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-table .pos { color: var(--pf-wallet-available); }
.pf-table .neg { color: var(--pf-text-muted); }

/* --- Pusty stan ---------------------------------------------------------- */

.pf-empty {
  text-align: center;
  padding: var(--pf-space-12) var(--pf-space-4);
  color: var(--pf-text-muted);
}

.pf-empty h3 { color: var(--pf-text); font-size: var(--pf-text-lg); }
.pf-empty p { max-width: 48ch; margin-inline: auto; }

/* --- Kroki onboardingu --------------------------------------------------- */

.pf-steps { display: grid; gap: var(--pf-space-3); counter-reset: krok; }

.pf-step {
  display: flex;
  gap: var(--pf-space-4);
  padding: var(--pf-space-4);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-md);
  background: var(--pf-surface-raised);
  align-items: flex-start;
}

.pf-step__mark {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--pf-radius-pill);
  display: grid;
  place-items: center;
  background: var(--pf-surface-sunken);
  color: var(--pf-text-subtle);
  border: 1px solid var(--pf-border-strong);
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-weight-bold);
}

.pf-step--done .pf-step__mark {
  background: var(--pf-status-accepted-bg);
  color: var(--pf-status-accepted-fg);
  border-color: var(--pf-status-accepted-fg);
}

.pf-step--todo .pf-step__mark {
  background: var(--pf-accent);
  color: var(--pf-on-accent);
  border-color: var(--pf-accent);
}

.pf-step__body { flex: 1 1 auto; }
.pf-step__body h3 { font-size: var(--pf-text-base); margin-bottom: var(--pf-space-1); }
.pf-step__body p { font-size: var(--pf-text-sm); color: var(--pf-text-muted); margin-bottom: var(--pf-space-2); }

/* --- Rozbicie punktacji --------------------------------------------------- */

.pf-score-parts { display: grid; gap: var(--pf-space-2); font-size: var(--pf-text-sm); }

.pf-score-part {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--pf-space-2);
  align-items: baseline;
}

.pf-score-part__bar {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--pf-surface-sunken);
  border-radius: var(--pf-radius-pill);
  overflow: hidden;
}

.pf-score-part__fill { height: 100%; background: var(--pf-accent); border-radius: inherit; }
.pf-score-part__detail { grid-column: 1 / -1; font-size: var(--pf-text-xs); color: var(--pf-text-subtle); }

/* --- Stopka -------------------------------------------------------------- */

.pf-footer {
  border-top: 1px solid var(--pf-border);
  background: var(--pf-surface);
  padding: var(--pf-space-6) var(--pf-space-4);
  font-size: var(--pf-text-sm);
  color: var(--pf-text-subtle);
}

.pf-footer__inner {
  max-width: var(--pf-width-page);
  margin: 0 auto;
  display: flex;
  gap: var(--pf-space-4);
  flex-wrap: wrap;
  justify-content: space-between;
}

.pf-footer a { color: var(--pf-text-muted); }

/* --- Logowanie ----------------------------------------------------------- */

.pf-login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--pf-space-6) var(--pf-space-4);
}

.pf-login__card {
  width: 100%;
  max-width: 26rem;
  background: var(--pf-surface-raised);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-8);
}

/* --- Drobne -------------------------------------------------------------- */

.pf-muted   { color: var(--pf-text-muted); }
.pf-subtle  { color: var(--pf-text-subtle); font-size: var(--pf-text-sm); }
.pf-mono    { font-family: var(--pf-font-mono); font-size: 0.9em; }
.pf-nowrap  { white-space: nowrap; }
.pf-stack > * + * { margin-top: var(--pf-space-4); }
.pf-inline-list { display: flex; flex-wrap: wrap; gap: var(--pf-space-2); list-style: none; padding: 0; margin: 0; }

details.pf-details { border: 1px solid var(--pf-border); border-radius: var(--pf-radius-md); padding: var(--pf-space-3) var(--pf-space-4); }
details.pf-details + details.pf-details { margin-top: var(--pf-space-2); }
details.pf-details > summary { cursor: pointer; font-weight: var(--pf-weight-medium); font-size: var(--pf-text-sm); }
details.pf-details[open] > summary { margin-bottom: var(--pf-space-3); }

.pf-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;
}

@media print {
  .pf-topbar, .pf-nav, .pf-lead__actions, .pf-footer { display: none; }
}