/* ds.css — Bramka SMS Wellbeing — design system (tokeny + komponenty).
   Ładowany PO style.css: nadpisuje tokeny i wygląd istniejących klas
   (.btn, .form-input, .table, .badge, .card, .flash, .modal…) oraz natywnych
   pól (input, select, textarea, checkbox, radio), więc istniejące szablony
   dostają nowy wygląd bez przepisywania. Nowe komponenty: .switch,
   .segmented, .chip, .tabs, .banner, .icon. Wzorzec: /styleguide. */

/* ── Czcionka: Inter hostowany lokalnie (static/fonts/inter, licencja OFL) ──
   Dwie grubości: 400 i 500. Plik 500 deklarowany dla zakresu 500–700, żeby
   starsze reguły z font-weight 600/700 nie dostawały sztucznie pogrubionej
   czcionki. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("fonts/inter/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("fonts/inter/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokeny ─────────────────────────────────────────────────────────────── */
:root {
  /* marka */
  --color-primary: #0F6E56;
  --color-primary-hover: #0B5B47;
  --color-primary-dark: #0B5B47;
  --color-primary-light: #E1F5EE;
  --color-focus-ring: rgba(15, 110, 86, 0.18);

  /* neutralne */
  --color-bg: #F6F7F6;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F9FAF9;
  --color-border: #E3E7E5;
  --color-border-strong: #CBD2CE;
  --color-text: #1B201E;
  --color-text-secondary: #4A5451;
  --color-text-muted: #7B8581;

  /* semantyczne: tło / tekst / kropka */
  --color-success-bg: #E7F5EC;  --color-success-text: #1D6B3A;  --color-success-dot: #2E9D55;
  --color-warning-bg: #FDF3DD;  --color-warning-text: #8A5800;  --color-warning-dot: #D9931A;
  --color-danger-bg: #FCEBE9;   --color-danger-text: #A3261D;   --color-danger-dot: #D93A2F;
  --color-info-bg: #E8F1FB;     --color-info-text: #1A5A9E;     --color-info-dot: #3B82D6;
  --color-neutral-bg: #EEF1EF;  --color-neutral-text: #4A5451;  --color-neutral-dot: #9AA39F;

  /* zgodność z nazwami używanymi w style.css */
  --color-success: var(--color-success-text);   --color-success-light: var(--color-success-bg);
  --color-warning: var(--color-warning-text);   --color-warning-light: var(--color-warning-bg);
  --color-danger: var(--color-danger-text);     --color-danger-light: var(--color-danger-bg);
  --color-info: var(--color-info-text);         --color-info-light: var(--color-info-bg);

  /* odstępy */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;

  /* zaokrąglenia */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-full: 999px;
  --radius: var(--radius-md);

  /* cienie */
  --shadow-sm: 0 1px 2px rgba(16, 24, 20, 0.05);
  --shadow-md: 0 6px 16px rgba(16, 24, 20, 0.08), 0 1px 3px rgba(16, 24, 20, 0.05);
  --shadow: var(--shadow-sm);

  /* typografia */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 24px;
  --weight-regular: 400; --weight-medium: 500;

  --control-height: 42px;
  --control-height-sm: 34px;
}

/* ── Podstawa ───────────────────────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: var(--text-xl); font-weight: var(--weight-medium); letter-spacing: -0.01em; }
h2 { font-size: var(--text-lg); font-weight: var(--weight-medium); }
h3 { font-size: var(--text-md); font-weight: var(--weight-medium); }
h4 { font-size: var(--text-base); font-weight: var(--weight-medium); }
strong, b { font-weight: var(--weight-medium); }
small, .text-sm { font-size: var(--text-sm); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }

/* ── Ikony (static/icons/sprite.svg, Lucide) ───────────────────────────── */
.icon {
  width: 18px; height: 18px; flex-shrink: 0; vertical-align: -3px;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

/* ── Pola ───────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-4); }
.form-label {
  display: block; margin-bottom: 6px;
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text);
}
.form-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 6px; }
.form-error { font-size: var(--text-sm); color: var(--color-danger-text); margin-top: 6px; display: flex; gap: 6px; align-items: center; }

/* Specyficzność: pola bazowe i hover przez :where() (0,0,0 / 0,1,0), focus
   przez :is() z pełną listą pól (0,3,1) — focus wygrywa zawsze, także przy
   najechaniu myszą i z regułami pól z style.css. .is-focus (styleguide)
   dostaje dokładnie tę samą regułę co prawdziwy :focus. */
.form-input, .form-select, .form-textarea,
:where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"],
       input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"],
       select, textarea) {
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  max-width: 100%;
}
.form-input, .form-select, .form-textarea { width: 100%; }
:where(textarea), .form-textarea { padding: 10px var(--space-3); min-height: 96px; line-height: 1.5; resize: vertical; }
:where(select), .form-select, select.form-input {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237B8581' 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 12px center;
}
:where(select[multiple]) { background-image: none; padding: var(--space-2); min-height: 120px; }
/* Miejsce na strzałkę — wyższa specyficzność niż kontekstowe skróty
   „padding: …” (np. .user-actions .form-select w tabeli), inaczej tekst
   najdłuższej opcji wchodzi pod strzałkę. Select z width:auto dopasowuje
   się wtedy do najdłuższej opcji + strzałki. */
select.form-select:not([multiple]), select.form-input:not([multiple]), select:not([multiple]) {
  padding-right: 36px;
  text-overflow: ellipsis;
}
:where(input, textarea)::placeholder { color: var(--color-text-muted); }

:where(.form-input, .form-select, .form-textarea, input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover {
  border-color: #AEB7B2;
}
:is(.form-input, .form-select, .form-textarea, input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
:is(.form-input, .form-select, .form-textarea, input:not([type="checkbox"]):not([type="radio"]), select, textarea).is-focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.is-invalid, input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--color-danger-dot) !important;
}
:is(.is-invalid, [aria-invalid="true"]):focus { box-shadow: 0 0 0 3px rgba(217, 58, 47, 0.15); }
:is(input, select, textarea):disabled, .form-input:disabled {
  background-color: var(--color-surface-muted); color: var(--color-text-muted); border-color: var(--color-border); cursor: not-allowed;
}

/* ── Checkbox i radio (własny wygląd) ──────────────────────────────────── */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; flex-shrink: 0;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface) no-repeat center / 14px 14px;
  vertical-align: -4px; cursor: pointer;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
input[type="checkbox"] { border-radius: var(--radius-sm); }
input[type="radio"] { border-radius: var(--radius-full); }
input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled) { border-color: var(--color-primary); }
input[type="checkbox"]:checked {
  background-color: var(--color-primary); border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
input[type="checkbox"]:indeterminate {
  background-color: var(--color-primary); border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
input[type="radio"]:checked {
  border-color: var(--color-primary);
  background-image: radial-gradient(circle, var(--color-primary) 0 5px, transparent 5.5px);
  background-size: 100% 100%;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }

.checkbox-item, .radio-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--text-base); cursor: pointer; padding: 4px 0; line-height: 1.4;
}
.checkbox-group { display: flex; flex-direction: column; gap: 6px; }

/* ── Przełącznik (switch) ──────────────────────────────────────────────── */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-base); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch__track {
  position: relative; width: 38px; height: 22px; flex-shrink: 0;
  background: var(--color-border-strong); border-radius: var(--radius-full); transition: background .15s;
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  background: #fff; border-radius: var(--radius-full); box-shadow: var(--shadow-sm); transition: transform .15s;
}
.switch input:checked + .switch__track { background: var(--color-primary); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--color-focus-ring); }
.switch input:disabled + .switch__track { opacity: .45; }

/* ── Segmenty (2–4 opcje) ──────────────────────────────────────────────── */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--color-neutral-bg); border-radius: var(--radius-md);
}
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.segmented label {
  padding: 0 14px; min-height: 34px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 8px; font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s;
}
.segmented label:hover { color: var(--color-text); }
.segmented input:checked + label { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + label { box-shadow: 0 0 0 3px var(--color-focus-ring); }

/* ── Chipy / kafelki wyboru ────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 14px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  background: var(--color-surface); font-size: var(--text-sm); color: var(--color-text);
  cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s;
}
.chip span:hover { border-color: var(--color-primary); }
.chip input:checked + span { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-dark); }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--color-focus-ring); }
.chip input:disabled + span { opacity: .45; cursor: not-allowed; }
.tile span { border-radius: var(--radius-lg); min-height: 64px; padding: var(--space-3) var(--space-4); flex-direction: column; align-items: flex-start; justify-content: center; }

/* ── Przyciski ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); padding: 0 18px;
  font: inherit; font-size: var(--text-base); font-weight: var(--weight-medium); line-height: 1;
  white-space: nowrap; text-decoration: none;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover { background: var(--color-surface-muted); border-color: #AEB7B2; text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }
/* .btn--ghost to w istniejących szablonach przycisk DRUGORZĘDNY (z ramką:
   „Anuluj”, „Zarządzaj…”) — ten sam wygląd co .btn--secondary. Przycisk
   tekstowy (bez ramki) to .btn--text. */
.btn--secondary, .btn--ghost { background: var(--color-surface); color: var(--color-text); }
.btn--text { background: transparent; border-color: transparent; color: var(--color-primary); }
.btn--text:hover { background: var(--color-primary-light); border-color: transparent; color: var(--color-primary-dark); }
.btn--danger { background: var(--color-surface); border-color: #F0C4BF; color: var(--color-danger-text); }
.btn--danger:hover { background: var(--color-danger-bg); border-color: var(--color-danger-dot); color: var(--color-danger-text); }
.btn--danger-solid { background: var(--color-danger-dot); border-color: var(--color-danger-dot); color: #fff; }
.btn--sm { min-height: var(--control-height-sm); padding: 0 12px; font-size: var(--text-sm); border-radius: 8px; }
.btn--full { width: 100%; }
.btn:disabled, .btn.is-disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn.is-loading, .btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after, .btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-radius: 50%; border-right-color: transparent;
  animation: ds-spin .7s linear infinite;
  color: var(--color-text-secondary);
}
.btn--primary.is-loading::after, .btn--primary[aria-busy="true"]::after { color: #fff; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.btn-group { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ── Karty ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.card__title { font-size: var(--text-md); font-weight: var(--weight-medium); margin: 0; }
.card__subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin: 2px 0 0; }

/* ── Plakietki statusów (tło + kropka) ─────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap;
  background: var(--color-neutral-bg); color: var(--color-neutral-text);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-neutral-dot); flex-shrink: 0; }
.badge--success, .badge--sent, .badge--delivered, .badge--completed, .badge--wybrany {
  background: var(--color-success-bg); color: var(--color-success-text);
}
.badge--success::before, .badge--sent::before, .badge--delivered::before, .badge--completed::before, .badge--wybrany::before {
  background: var(--color-success-dot);
}
.badge--warning, .badge--hold, .badge--scheduled, .badge--queued, .badge--sending, .badge--test {
  background: var(--color-warning-bg); color: var(--color-warning-text);
}
.badge--warning::before, .badge--hold::before, .badge--scheduled::before, .badge--queued::before,
.badge--sending::before, .badge--test::before { background: var(--color-warning-dot); }
.badge--danger, .badge--failed, .badge--send_failed, .badge--bounced, .badge--spam, .badge--rejected,
.badge--dropped, .badge--odrzucony, .badge--expired {
  background: var(--color-danger-bg); color: var(--color-danger-text);
}
.badge--danger::before, .badge--failed::before, .badge--send_failed::before, .badge--bounced::before,
.badge--spam::before, .badge--rejected::before, .badge--dropped::before, .badge--odrzucony::before,
.badge--expired::before { background: var(--color-danger-dot); }
.badge--info { background: var(--color-info-bg); color: var(--color-info-text); }
.badge--info::before { background: var(--color-info-dot); }
.badge--neutral, .badge--draft, .badge--cancelled { background: var(--color-neutral-bg); color: var(--color-neutral-text); }

/* ── Banery / komunikaty ───────────────────────────────────────────────── */
.banner, .flash, .hold-notice {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: var(--text-base); line-height: 1.5;
}
.banner .icon { margin-top: 1px; }
.banner__title { font-weight: var(--weight-medium); display: block; }
.banner--success, .flash--success { background: var(--color-success-bg); color: var(--color-success-text); border-color: #C7E6D1; }
.banner--warning, .flash--warning, .hold-notice { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: #F2DDAE; }
.banner--danger, .flash--danger { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: #F4CBC6; }
.banner--info, .flash--info { background: var(--color-info-bg); color: var(--color-info-text); border-color: #C9DDF4; }

/* ── Tabele (lżejsze) ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.table th, .table td { border: 0; border-bottom: 1px solid var(--color-border); padding: 12px 14px; text-align: left; vertical-align: middle; }
.table th {
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .04em; background: transparent; white-space: nowrap;
}
.table tbody tr { transition: background .1s; }
.table tbody tr:hover { background: var(--color-surface-muted); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ── Zakładki ──────────────────────────────────────────────────────────── */
/* Linia pod zakładkami jako cień wewnętrzny kontenera (nie border + ujemny
   margines elementów) — treść nie wystaje poza kontener, więc przy
   overflow-x: auto nie pojawiają się pionowe strzałki przewijania. */
.tabs {
  display: flex; gap: var(--space-1); overflow-x: auto; overflow-y: hidden;
  box-shadow: inset 0 -1px 0 var(--color-border); scrollbar-width: thin;
}
.tabs__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: var(--text-base); font-weight: var(--weight-medium);
  color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.tabs__item:hover { color: var(--color-text); text-decoration: none; }
.tabs__item--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tabs__count { font-size: var(--text-xs); background: var(--color-neutral-bg); color: var(--color-text-secondary); border-radius: var(--radius-full); padding: 1px 7px; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal__backdrop { background: rgba(16, 24, 20, 0.4); }
.modal__dialog { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--color-border); }
.modal__header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.modal__header h3 { margin: 0; }
.modal__body { padding: var(--space-5); }
.modal__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); display: flex; gap: var(--space-2); justify-content: flex-end; }
.modal__close { border: 0; background: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); }
.modal__close:hover { background: var(--color-neutral-bg); color: var(--color-text); }

/* ── Pusty stan ────────────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--text-base);
}
.empty-state .icon { width: 32px; height: 32px; color: var(--color-border-strong); }
.empty-state__title { color: var(--color-text); font-weight: var(--weight-medium); font-size: var(--text-md); }

/* ── Paginacja ─────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: var(--space-2); justify-content: space-between; flex-wrap: wrap; margin-top: var(--space-4); }
.pagination__info { font-size: var(--text-sm); color: var(--color-text-muted); }
.pagination__pages { display: flex; gap: 4px; }
.pagination__page {
  min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: none;
}
.pagination__page:hover { background: var(--color-neutral-bg); text-decoration: none; }
.pagination__ellipsis { min-width: 24px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.pagination__page--active { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: var(--weight-medium); }

/* ── Wyjątek: przypięty pasek przycisków na stronie zapisu (mobile) ──────
   Dwa przyciski obok siebie na ~390 px (główny 2/3, drugorzędny 1/3 —
   patrz style.css .sticky-actions): drugorzędny „Nie jestem
   zainteresowany/a” nie mieści się w jednej linii, więc tylko tutaj tekst
   może się złamać — inaczej zostałby ucięty. */
.sticky-actions__btn { white-space: normal; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }