/*
 * Źródło: handshake-integrations/apps/ui/static/ui/app.css (commit b8b9ab7),
 * skopiowane 1:1 dnia 2026-09-30. Zmiany w stylu Handshake przenosić ręcznie.
 * Klasy wyłącznie Prospectora są na końcu pliku, w sekcji "Prospector".
 */

/*
 * System wizualny Handshake CRM — przeniesiony na ten serwis z makiet w
 * .superpowers/sdd/2026-09-09-plan-d-interfejs-po-angielsku/task-2-brief.md.
 *
 * Font: CRM hostuje Inter u siebie przez pakiet npm. Ten serwis nie ma frontendowego
 * builda (WhiteNoise + collectstatic, żadnego bundlera), więc nie da się zrobić tego
 * samego bez wciągania zależności frontendowych. Zamiast tego <link> do Google Fonts
 * w base.html (wagi 400/500/600, display=swap) — świadoma rozbieżność wobec CRM-u,
 * nie przypadkowa.
 *
 * Skala tekstu jest zamknięta: 12/16, 13/18, 14/20, 16/24, 20/28, 24/32 (px, rozmiar/interlinia).
 * Żaden nowy komponent nie powinien wprowadzać rozmiaru spoza tej listy.
 */

:root {
  /* Powierzchnie i tekst */
  --canvas: #f7f7f7;
  --surface: #ffffff;
  --surface-sunken: #f0f0f0;
  --surface-active: #e4e4e4;
  --fg: #282828;
  --fg-muted: #5c5c5c;
  --fg-subtle: #6b6b6b;
  --fg-faint: #8f8f8f;
  --border: #e2e2e2;
  --border-strong: #8f8f8f;

  /* Akcent (marka) */
  --accent: #cc432d;
  --accent-hover: #b93a26;
  --accent-active: #a5321f;
  --accent-soft: #fdeae4;
  --accent-border: #f2b5a8;
  --accent-fg: #a8331f;
  --ring: #d84c35;

  --sidebar-fg: #4a4a4a;

  /* Statusy */
  --success: #0f7a4a;
  --success-soft: #e2f5ec;
  --success-border: #a7ddc4;
  --success-fg: #0b6b40;

  --warning: #a86a08;
  --warning-soft: #fdf1dc;
  --warning-border: #eecb8a;
  --warning-fg: #8a5605;

  --danger: #b0123c;
  --danger-soft: #fbe4ed;
  --danger-border: #f0aec3;
  --danger-fg: #9c0f35;

  --info: #0f9bd1;
  --info-soft: #e2f5fc;
  --info-border: #a5ddf2;
  --info-fg: #0a6a8f;

  --avatar: #037ac0;

  /* Typografia */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Skala rozmiar/interlinia — jedyne dopuszczalne pary w tym arkuszu */
  --text-xs-size: 12px;
  --text-xs-line: 16px;
  --text-sm-size: 13px;
  --text-sm-line: 18px;
  --text-base-size: 14px;
  --text-base-line: 20px;
  --text-md-size: 16px;
  --text-md-line: 24px;
  --text-lg-size: 20px;
  --text-lg-line: 28px;
  --text-xl-size: 24px;
  --text-xl-line: 32px;

  /* Wysokości kontrolek i pasków */
  --h-btn: 32px;
  --h-btn-lg: 40px;
  --h-field: 36px;
  --h-nav-row: 32px;
  --h-table-head: 32px;
  --h-topbar: 56px;
  --w-sidebar: 240px;

  /* Promienie */
  --radius-control: 8px;
  --radius-card: 10px;
  --radius-pill: 999px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-fg);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  font-family: inherit;
}

/* ---------- Layout: powłoka zalogowanego operatora ---------- */

.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: var(--w-sidebar);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  height: var(--h-topbar);
  padding: 0 12px;
}

.sidebar-logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  padding: 0 8px 8px;
}

.sidebar-section-label {
  padding: 14px 8px 6px;
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--h-nav-row);
  padding: 0 8px;
  border-radius: var(--radius-control);
  font-size: var(--text-base-size);
  font-weight: 500;
  color: var(--sidebar-fg);
}

.nav-link:hover {
  color: var(--accent-fg);
}

.nav-link.active {
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.nav-link svg {
  flex-shrink: 0;
}

.worker-status {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding: 10px 12px;
}

.worker-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.worker-dot-on {
  background: var(--success);
}

.worker-dot-off {
  background: var(--border-strong);
}

.worker-label {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--fg-muted);
}

.main-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--h-topbar);
  flex-shrink: 0;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-subtle);
}

.breadcrumb a {
  color: var(--fg-muted);
}

.breadcrumb .current {
  color: var(--fg);
}

.account-form {
  margin-left: auto;
}

.account {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--avatar);
  color: var(--surface);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  font-weight: 500;
  flex-shrink: 0;
}

.account-email {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg);
}

.account svg {
  color: var(--fg-subtle);
  flex-shrink: 0;
}

main {
  flex: 1;
  padding: 24px 24px 40px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.page-title {
  margin: 0 0 4px;
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.page-subtitle {
  margin: 0;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--h-btn);
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--fg);
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  font-weight: 500;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: var(--surface);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-primary:active {
  background: var(--accent-active);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--fg);
}

.btn-secondary:hover {
  background: var(--surface-sunken);
}

.btn-lg {
  height: var(--h-btn-lg);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
}

.btn-block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Forms ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.field:last-child {
  margin-bottom: 0;
}

.field-label {
  font-size: var(--text-sm-size);
  line-height: 1;
  font-weight: 500;
  color: var(--fg);
}

.input {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--h-field);
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
}

select.input {
  /* Natywna strzałka znika razem z `appearance`, więc rysujemy własną tłem — inaczej pole
     wygląda jak zwykły input i nikt nie widzi, że jest z czego wybierać. */
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(204 67 45 / 0.25);
}

.field-error {
  margin: 0;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--danger-fg);
}

/* Django rend errorlist jako <ul class="errorlist"> — stylujemy to, co framework robi
   sam, zamiast go omijać, żeby `{{ form.field.errors }}` zostało jak brief każe. */
.errorlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.errorlist li {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--danger-fg);
}

.field-hint {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
}

/* ---------- Cards ---------- */

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.card + .card {
  margin-top: 16px;
}

.card-head {
  padding: 16px 16px 12px;
}

.card-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
}

.card-title {
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  font-weight: 600;
  color: var(--fg);
}

.card-desc {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
}

.card-body {
  padding: 0 16px 16px;
}

/* ---------- Tables ---------- */

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

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.table thead tr {
  border-bottom: 1px solid var(--border);
}

.table th {
  height: var(--h-table-head);
  padding: 0 12px;
  text-align: left;
  vertical-align: middle;
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  white-space: nowrap;
}

.table th.text-right,
.table td.text-right {
  text-align: right;
}

.table tbody tr {
  border-bottom: 1px solid var(--border);
}

.table tbody tr:last-child {
  border-bottom: none;
}

.table td {
  padding: 12px;
  vertical-align: middle;
  color: var(--fg);
}

.table td.muted {
  color: var(--fg-muted);
}

.table td.nowrap {
  white-space: nowrap;
}

.table-empty-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  padding: 10px 16px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
}

/* ---------- Pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--fg-muted);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  font-weight: 500;
  white-space: nowrap;
}

.pill-neutral {
  border-color: var(--border);
  background: var(--surface-sunken);
  color: var(--fg-muted);
}

.pill-accent {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.pill-success {
  border-color: var(--success-border);
  background: var(--success-soft);
  color: var(--success-fg);
}

.pill-warning {
  border-color: var(--warning-border);
  background: var(--warning-soft);
  color: var(--warning-fg);
}

.pill-danger {
  border-color: var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger-fg);
}

.pill-info {
  border-color: var(--info-border);
  background: var(--info-soft);
  color: var(--info-fg);
}

/* ---------- Banners (django.contrib.messages) ---------- */

.banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  margin-bottom: 12px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.banner:last-child {
  margin-bottom: 20px;
}

.banner svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.banner-error {
  border-color: var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger-fg);
}

.banner-success {
  border-color: var(--success-border);
  background: var(--success-soft);
  color: var(--success-fg);
}

.banner-warning {
  border-color: var(--warning-border);
  background: var(--warning-soft);
  color: var(--warning-fg);
}

/* ---------- Login ---------- */

.auth-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.auth-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  padding: 24px 16px;
}

.auth-logo {
  height: 56px;
  width: auto;
  object-fit: contain;
  margin-bottom: 10px;
}

.auth-kicker {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-subtle);
  margin-bottom: 28px;
}

.auth-card {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 24px;
}

.auth-card h1 {
  margin: 0 0 4px;
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.auth-card > .card-desc {
  margin-bottom: 20px;
}

.auth-footnote {
  margin: 20px 0 0;
  text-align: center;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-subtle);
}

/* ---------- Empty state ---------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 16px;
  text-align: center;
}

.empty-state p {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
}

.form-shell {
  max-width: 880px;
}

.workflows-shell {
  max-width: 1000px;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  /* Odstęp pod przyciskiem: bez niego tabela ostatnich przebiegów kleiła się do „Build call list". */
  margin-bottom: 32px;
}

/* ---------- New run: workflow option cards ---------- */

.workflow-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.workflow-option {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
}

.workflow-option:has(input:checked) {
  border: 2px solid var(--accent);
}

.workflow-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.workflow-option-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 10px;
}

.workflow-option:has(input:checked) .workflow-option-head {
  background: var(--accent-soft);
}

.workflow-option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
  color: var(--surface);
}

.workflow-option:has(input:checked) .workflow-option-check {
  background: var(--accent);
  border-color: var(--accent);
}

.workflow-option-name {
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  font-weight: 600;
  color: var(--fg);
}

.workflow-option-slug {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
}

.workflow-option:has(input:checked) .workflow-option-slug {
  color: var(--accent-fg);
}

.workflow-option-body {
  padding: 12px 14px 14px;
}

.workflow-option-body p {
  margin: 0;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
}

/* ---------- New run: file drop zone ---------- */

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  text-align: center;
}

.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone-title {
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  font-weight: 500;
  color: var(--fg);
}

.dropzone-hint {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
}

/* ---------- Workflows screen ---------- */

.workflow-card-steps {
  display: grid;
  border-top: 1px solid var(--border);
}

.workflow-card-step {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
}

.workflow-card-step:last-child {
  border-right: none;
}

.workflow-card-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.workflow-card-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--surface-sunken);
  color: var(--fg-muted);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  font-weight: 600;
}

.workflow-card-step-name {
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  font-weight: 600;
  color: var(--fg);
}

.workflow-card-step p {
  margin: 0;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
}

.workflow-card-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: transparent;
  padding: 14px 16px;
  margin-top: 16px;
}

.workflow-card-placeholder svg {
  flex-shrink: 0;
  color: var(--fg-subtle);
}

.workflow-card-placeholder span {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
}

/* ---------- Run detail: stage bar ---------- */

/* Reuses `.workflow-card-step` (padding + border-right divider) for the columns — only the
   grid itself is new, since the stage bar has no card-head above it to supply a top border. */
.stage-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.stage-icon-not-started {
  border: 2px solid var(--border);
}

.stage-icon-active {
  border: 2px solid var(--accent);
}

.stage-icon-attention {
  background: var(--danger);
  color: var(--surface);
}

.stage-icon-done {
  background: var(--success);
  color: var(--surface);
}

/* „Nie było czego robić" — wyciszone, ale WYPEŁNIONE: puste kółko czyta się jako „czeka",
   a ten etap już się nie ruszy. Kolor neutralny, bo to nie jest ani sukces, ani problem. */
.stage-icon-empty {
  background: var(--border);
  color: var(--fg-muted);
}

.stage-progress-track {
  height: 6px;
  margin-top: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.stage-progress-fill {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

/* ---------- Run detail: jobs filter + pagination ---------- */

.jobs-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}

.jobs-filter .pill {
  cursor: pointer;
}

/* Sits inside `.table-empty-footer` (existing bar style) — only the internal flex row is new. */
.pagination-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- Run detail ---------- */

.run-meta {
  margin: 0;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  /* Każda karta ma własną wysokość. Domyślne `stretch` rozciągałoby krótszą do wysokości
     dłuższej, a te dwie różnią się drastycznie: oś czasu pokazuje 50 wpisów, a tabela zadań
     przy filtrze „wymagające uwagi" bywa trzywierszowa — zostawała pod nią pusta karta
     wysokości ekranu. */
  align-items: start;
  gap: 16px;
  margin-top: 16px;
}

.detail-grid + .card {
  margin-top: 16px;
}

.timeline {
  border-top: 1px solid var(--border);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.timeline-item {
  display: flex;
  gap: 10px;
}

.timeline-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.timeline-dot-info {
  background: var(--fg-faint);
}

.timeline-dot-warning {
  background: var(--warning);
}

.timeline-dot-error {
  background: var(--danger);
}

.timeline-message {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg);
}

.timeline-time {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--fg-subtle);
}

.summary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.summary-key {
  color: var(--fg-muted);
}

.summary-value {
  color: var(--fg);
  font-weight: 500;
  text-align: right;
}

.dropzone-chosen {
  max-width: 100%;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: 500;
  color: var(--fg);
  text-align: center;
  word-break: break-all;
}

/* `Job.last_error` to bywa jedna linia bez spacji — ścieżka albo URL z tracebacku.
   Bez łamania rozpycha kartę i cała strona zaczyna przewijać się w bok. */
.break-word {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Strony błędów: bez powłoki, bo obsługa 500 renderuje z pustym kontekstem
   i nie ma tam operatora ani nawigacji. */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 100vh;
  padding: 24px;
  background: var(--canvas);
  text-align: center;
}

.error-code {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: 500;
  letter-spacing: 0.025em;
  color: var(--fg-subtle);
}

.error-title {
  margin: 0;
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
  font-weight: 600;
  color: var(--fg);
}

.error-text {
  max-width: 420px;
  margin: 0 0 8px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
}

/* ---------- ACE: lista miast jako pola wyboru ---------- */

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Lista miast bywa długa (Warszawa ma kilkadziesiąt dzielnic) — przewijamy ją zamiast rozpychać stronę. */
.checkbox-list-scroll {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

.city-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.city-districts > summary {
  margin-left: 26px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
  cursor: pointer;
}

.city-districts[open] > summary {
  margin-bottom: 8px;
}

.city-districts .checkbox-row {
  padding-left: 26px;
}

.city-districts .checkbox-row + .checkbox-row {
  margin-top: 8px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg);
  cursor: pointer;
}

/* ---------- Prospector ---------- */

/* Znak i nazwa w pasku bocznym oraz na ekranie logowania (Sidebar.dc.html). */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--h-topbar);
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  color: var(--fg);
}

.sidebar-brand:hover {
  color: var(--fg);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--surface);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: 600;
  flex-shrink: 0;
}

.brand-mark-lg {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-control);
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
}

.brand-name {
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  font-weight: 600;
  color: var(--fg);
}

.brand-kicker {
  margin-left: auto;
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--fg-subtle);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.auth-brand .brand-name {
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
}

/* Warianty statusów pod nazwami z projektu (aliasy pill-success/warning/...). */
.pill-ok {
  border-color: var(--success-border);
  background: var(--success-soft);
  color: var(--success-fg);
}

.pill-warn {
  border-color: var(--warning-border);
  background: var(--warning-soft);
  color: var(--warning-fg);
}

.pill-muted {
  border-color: var(--border);
  background: var(--surface-sunken);
  color: var(--fg-subtle);
}

/* Źródła ofert: OT info, OLX success, MZ warning, NOL muted. */
.src-OT {
  border-color: var(--info-border);
  background: var(--info-soft);
  color: var(--info-fg);
}

.src-OLX {
  border-color: var(--success-border);
  background: var(--success-soft);
  color: var(--success-fg);
}

.src-MZ {
  border-color: var(--warning-border);
  background: var(--warning-soft);
  color: var(--warning-fg);
}

.src-NOL {
  border-color: var(--border);
  background: var(--surface-sunken);
  color: var(--fg-subtle);
}

/* Miniatura zdjęcia w wierszu; szary kafelek, gdy oferta nie ma zdjęć. */
.thumb {
  display: block;
  width: 56px;
  height: 42px;
  border-radius: 4px;
  background: var(--surface-active);
  object-fit: cover;
  flex-shrink: 0;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Filtry-chipy nad tabelą ofert. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--fg-muted);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.chip:hover {
  color: var(--fg);
  border-color: var(--border-strong);
}

.chip-on {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-fg);
}

.chip-on:hover {
  color: var(--accent-fg);
  border-color: var(--accent-border);
}

/* Ciemny pasek akcji dla zaznaczonych wierszy. */
.selbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: var(--radius-control);
  background: var(--fg);
  color: var(--surface);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.selbar[hidden] {
  display: none;
}

.selbar a,
.selbar button {
  color: var(--surface);
}

/* ---------- Lista ofert (projekt: Listings) ---------- */

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

.breadcrumb-sep {
  color: var(--fg-faint);
}

.listings-header {
  align-items: flex-end;
  margin-bottom: 16px;
}

.page-actions {
  display: flex;
  gap: 8px;
}

.page-actions .btn,
.filterbar .btn,
.pager .btn {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-muted);
}

.btn-ghost:hover {
  color: var(--fg);
}

/* Zakładki z licznikami nad filtrami. */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--fg-muted);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: 500;
}

.tab:hover {
  color: var(--fg);
  text-decoration: none;
}

.tab-active,
.tab-active:hover {
  color: var(--accent-fg);
  border-bottom-color: var(--accent);
}

.tab-count {
  padding: 0 6px;
  border-radius: 8px;
  background: var(--surface-sunken);
  color: var(--fg-muted);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  font-variant-numeric: tabular-nums;
}

.tab-active .tab-count {
  background: var(--accent-soft);
  color: var(--accent-fg);
}

/* Pasek filtrów: wyszukiwarka + chipy (select albo <details> z panelem). */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--fg-subtle);
}

.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(204 67 45 / 0.25);
}

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.chip-select {
  position: relative;
  padding: 0;
}

.chip-select select {
  appearance: none;
  height: 100%;
  padding: 0 28px 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: inherit;
  font: inherit;
  cursor: pointer;
  /* Szerokość według wybranej opcji, nie najdłuższej (Chrome 123+; inne: szerokość natywna). */
  field-sizing: content;
}

.chip-select select:focus-visible,
.chip-menu > summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.chip-menu {
  position: relative;
}

.chip-menu > summary {
  list-style: none;
}

.chip-menu > summary::-webkit-details-marker {
  display: none;
}

.chip-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
}

.chip-panel-range {
  min-width: 260px;
}

.chip-panel .field-label {
  margin: 0;
}

.range {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-subtle);
}

.input-sm {
  height: 32px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.filterbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Karta z tabelą; pasek zaznaczenia jest pierwszym wierszem karty. */
.listings-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
}

.listings-selbar {
  height: 48px;
  padding: 0 16px;
  margin: 0;
  border-radius: 0;
}

.selbar-count {
  font-weight: 600;
}

.selbar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.btn-dark {
  border-color: var(--fg-muted);
  background: transparent;
  color: var(--surface);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.btn-dark:hover {
  color: var(--surface);
  background: rgb(255 255 255 / 0.08);
}

.btn-dark.btn-ghost {
  border-color: transparent;
}

.table-scroll {
  overflow-x: auto;
}

.listings-table th {
  height: 36px;
  background: var(--canvas);
  color: var(--fg-muted);
  letter-spacing: 0;
  text-transform: none;
}

.listings-table td {
  height: 60px;
  padding: 0 12px;
  white-space: nowrap;
}

.listings-table tbody tr:hover {
  background: var(--canvas);
}

.listings-table tbody tr.is-selected {
  background: #fdf6f4;
}

.listings-table .col-check {
  width: 20px;
  padding-right: 0;
}

.listings-table .col-photo {
  width: 64px;
}

.listings-table td.muted {
  color: var(--fg-muted);
}

.sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
}

.sort:hover {
  color: var(--fg);
  text-decoration: none;
}

.sort-active {
  color: var(--fg);
  font-weight: 600;
}

.thumb-wrap {
  position: relative;
  width: 56px;
  height: 42px;
}

.thumb-count {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgb(40 40 40 / 0.75);
  color: var(--surface);
  font-size: 11px;
  line-height: 14px;
  font-variant-numeric: tabular-nums;
}

.col-listing {
  max-width: 360px;
}

.listing-title,
.listing-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-title {
  margin-bottom: 2px;
  color: var(--fg);
  font-weight: 500;
}

.listing-meta {
  color: var(--fg-subtle);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
}

.tags {
  display: flex;
  gap: 4px;
}

/* Prostokątna etykieta (źródło, stan numeru) — kolory z klas pill-* i src-*. */
.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  font-weight: 500;
  white-space: nowrap;
}

/* Kolor domyślny o zerowej specyficzności, żeby klasy pill-* i src-* zawsze wygrywały. */
:where(.tag) {
  background: var(--surface-sunken);
  color: var(--fg-muted);
}

.price {
  display: block;
  font-weight: 500;
}

.price-drop {
  display: block;
  margin-top: 2px;
  color: var(--success-fg);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
}

.listings-empty {
  text-align: center;
  color: var(--fg-muted);
}

/* Stopka tabeli z paginacją. */
.pager {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 48px;
  padding: 0 16px;
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.pager strong {
  color: var(--fg);
  font-weight: 500;
}

.pager-pages {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.btn-page {
  min-width: 32px;
  padding: 0 10px;
  border-radius: 6px;
}

.btn-page:hover {
  text-decoration: none;
}

.btn-page.is-current {
  background: var(--surface-sunken);
}

.btn-page.is-disabled {
  color: var(--fg-faint);
  cursor: not-allowed;
}

.btn-ellipsis {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

/* ---------- Karta oferty (projekt: Listing detail) ---------- */

.detail-header {
  margin-bottom: 16px;
}

.detail-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-muted);
}

.detail-meta-sep {
  color: var(--fg-faint);
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.detail-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.detail-col > .card + .card {
  margin-top: 0;
}

.detail-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
}

.detail-gallery-card {
  padding: 12px;
}

.detail-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-card-head > :last-child:not(:first-child) {
  margin-left: auto;
}

.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 150px 150px;
  gap: 8px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 120px;
  gap: 8px;
  margin-top: 8px;
}

.gallery-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-active);
}

.gallery-main {
  grid-row: span 2;
}

.gallery-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(40 40 40 / 55%);
  color: var(--surface);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: 500;
}

.gallery-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  border-radius: 6px;
  background: var(--surface-active);
  color: var(--fg-subtle);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.gallery-all > summary,
.detail-more > summary {
  cursor: pointer;
  color: var(--accent-fg);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: 500;
}

.detail-note,
.detail-key {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--fg-subtle);
}

.detail-note {
  padding: 0 4px;
}

.detail-value {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.detail-params {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 0;
}

.detail-params dt {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--fg-subtle);
}

.detail-params dd {
  margin: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.detail-description {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.detail-text {
  max-width: 760px;
  overflow-wrap: anywhere;
}

.detail-text.muted {
  color: var(--fg-muted);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.detail-table td {
  padding: 8px 12px 8px 0;
}

.detail-table th {
  padding-left: 0;
}

.detail-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-phone {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-phone form {
  margin: 0;
}

.phone-mask {
  letter-spacing: 0.04em;
}

.btn-sm {
  height: 28px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.detail-hint {
  margin-top: 4px;
}

.reveal-error {
  color: var(--danger-fg);
}

.detail-sources,
.detail-activity {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.detail-sources li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.detail-sources a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-relation {
  margin-left: auto;
  flex-shrink: 0;
}

.detail-activity li {
  display: flex;
  gap: 12px;
}

.detail-activity .detail-key {
  width: 92px;
  flex-shrink: 0;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

@media (max-width: 1100px) {
  .detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-params {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Zapisane widoki: rozwijana grupa w menu bocznym. */
.nav-group > summary {
  list-style: none;
  cursor: pointer;
}

.nav-group > summary::-webkit-details-marker {
  display: none;
}

.nav-group > summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.nav-group-caret {
  margin-left: auto;
  color: var(--fg-subtle);
  transition: transform 0.15s ease;
}

.nav-group:not([open]) .nav-group-caret {
  transform: rotate(-90deg);
}

.nav-sublist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 4px;
  padding: 0 0 0 26px;
  list-style: none;
}

.nav-subitem {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.nav-sublink {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border-radius: var(--radius-control);
  overflow: hidden;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--sidebar-fg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-sublink:hover {
  color: var(--accent-fg);
}

.nav-sublink.active {
  background: var(--accent-soft);
  color: var(--accent-fg);
  font-weight: 500;
}

.nav-subitem-delete {
  display: flex;
  margin: 0;
  opacity: 0;
}

.nav-subitem:hover .nav-subitem-delete,
.nav-subitem-delete:focus-within {
  opacity: 1;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--fg-subtle);
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--surface-sunken);
  color: var(--danger-fg);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

.nav-subempty {
  padding: 5px 8px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--fg-subtle);
}

/* Przycisk „Save view” nad listą: panel otwiera się do lewej, bo przycisk stoi przy prawej krawędzi. */
.save-view > summary {
  list-style: none;
}

.save-view > summary::-webkit-details-marker {
  display: none;
}

.save-view-panel {
  right: 0;
  left: auto;
  width: 280px;
}

.save-view-panel .btn {
  align-self: flex-end;
}

.save-view-hint {
  margin: 0;
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--fg-subtle);
}

@media (hover: none) {
  .nav-subitem-delete {
    opacity: 1;
  }
}

/* ---------- Sources & health ---------- */

.sources-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.sources-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* Karty w siatce: bez odstępu z reguły .card + .card. */
.sources-grid > .card + .card,
.sources-panels > .card + .card {
  margin-top: 0;
}

.source-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
}

.source-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-card-name {
  margin: 0;
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  font-weight: 600;
  color: var(--fg);
}

.source-card-status {
  margin-left: auto;
}

.metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.metric-big {
  font-size: var(--text-xl-size);
  line-height: var(--text-xl-line);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.metric-label {
  margin: 0;
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--fg-subtle);
}

.metric-row {
  display: flex;
  justify-content: space-between;
}

.metric-value {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.meter {
  flex-grow: 1;
  height: 6px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--surface-sunken);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  background: var(--success);
}

.meter-warn {
  background: var(--warning);
}

.meter-info {
  background: var(--info);
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.kv-grid dt {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--fg-subtle);
}

.kv-grid dd {
  margin: 0;
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.source-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.queue-list,
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.queue-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.queue-row .meter {
  margin-top: 0;
}

.queue-name {
  width: 88px;
}

.queue-count {
  width: 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.alert-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.alert-list .tag {
  flex-shrink: 0;
}

.source-card-link {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

@media (max-width: 1280px) {
  .sources-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .sources-grid,
  .sources-panels {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Proxy usage ---------- */

.proxy-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.proxy-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

.proxy-tiles > .card + .card,
.proxy-panels > .card + .card {
  margin-top: 0;
}

.proxy-sources {
  margin-top: 16px;
}

.proxy-chart-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.proxy-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--fg-muted);
}

.proxy-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.proxy-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.proxy-limit-swatch {
  width: 16px;
  border-top: 2px dashed var(--danger);
}

.proxy-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 4px;
  border-bottom: 1px solid var(--border);
}

.proxy-bar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.proxy-limit-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px dashed var(--danger);
  pointer-events: none;
}

.proxy-chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
  color: var(--fg-subtle);
}

.proxy-thresholds {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.proxy-thresholds label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.proxy-num {
  width: 72px;
  height: 28px;
  text-align: right;
}

.proxy-alerts {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.proxy-meter {
  width: 160px;
  flex-grow: 0;
  margin-top: 0;
}

.meter-danger {
  background: var(--danger);
}

.proxy-topup-form {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1280px) {
  .proxy-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .proxy-tiles,
  .proxy-panels {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Eksport do Handshake (projekt: Export to Handshake, Export history) ---------- */

.export-dialog {
  max-width: 620px;
  margin: 0 auto 32px;
  box-shadow: 0 20px 48px rgb(0 0 0 / 0.08);
}

.export-dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--border);
}

.export-dialog-head > :last-child {
  margin-left: auto;
}

.export-dialog-title {
  margin: 0 0 4px;
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  font-weight: 600;
}

.export-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px 20px;
}

.export-dialog-body .banner {
  margin: 0;
}

.export-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 -24px;
  padding: 12px 24px 0;
  border-top: 1px solid var(--border);
}

.export-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--canvas);
}

.export-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.export-summary-row strong {
  font-weight: 600;
}

.export-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 4px;
}

.export-dot-ok {
  background: var(--success);
}

.export-dot-muted {
  background: var(--fg-faint);
}

.export-dot-warn {
  background: var(--warning);
}

.export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.export-grid .field {
  margin-bottom: 0;
}

.export-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.export-detail-grid > .card + .card {
  margin-top: 0;
}

.detail-card-action {
  align-self: flex-start;
}

@media (max-width: 900px) {
  .export-grid,
  .export-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}