/* Arkusz wzorcowy leki.farm przemalowany na paletę DrWidgeta przez bin/repaint.php.
   Nazwy klas zachowują oryginalne brzmienie (np. .text-blue-600 renderuje granat)
   — to świadomy koszt forka, patrz docs/superpowers/specs/. Nie edytuj ręcznie. */
/* ===================================
   praca.farm — Design System v2
   Glassmorphism + Outfit + Tailwind
   =================================== */

:root {
  --color-bg:          #f0f4f8;
  --color-bg-alt:      #e2e8f0;  /* neutral slate (was #e8f4ee — zielony tint wyciekał do wszystkich portali) */
  --color-navy:        #0a324a;
  --color-green:       #2d8653;
  --color-green-light: #e8f5ee;  /* used in praca-specific badges only */
  --color-muted:       #64748b;
  --color-warning:     #b45309;
  --color-warning-bg:  #fef3c7;
  /* Topnav row height — single source dla praca + core ecosystem layoutów.
     Wcześniej praca/helpers-layout.php definiowało to inline, core/layout.php używało
     statycznego h-11 sm:h-14 — niespójne na desktopie (56px core vs 72px praca). */
  --farm-nav-h: 44px;            /* mobile (h-11) */
}
@media (min-width: 640px)  { :root { --farm-nav-h: 56px; } }   /* tablet (h-14) */
@media (min-width: 1024px) { :root { --farm-nav-h: 72px; } }   /* desktop — wyższy, grupowany pasek */
.farm-topnav-row { height: var(--farm-nav-h); }

/* Topnav auto-hide on scroll (mobile/tablet) + desktop grouped-bar styling.
   Ported z praca/includes/helpers-layout.php (task 234: rich praca nav → shared renderer). */
.farm-nav-auto-hide { transition: transform .3s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
/* Auto-hide topnav tylko na mobile/tablet (<1024px). Na desktopie pasek
   zawsze widoczny — większy viewport, scroll-hide tam bardziej przeszkadza
   niż pomaga. */
@media (max-width: 1023.98px) {
    .farm-nav-auto-hide.farm-nav-hidden { transform: translateY(-100%); }
}

@media (min-width: 1024px) {
    .farm-topnav-logo { font-size: 1.7rem; }
    /* Zakładki (Lista, Mapa…) zostają po PRAWEJ — logo lewo, nawigacja+narzędzia
       prawo (row ma justify-between z Tailwinda). Większe odstępy + narzędzia/konto
       odcięte pionowym separatorem od zakładek. */
    .farm-topnav { gap: 1rem; }
    /* Hover-pill na KAŻDEJ zakładce nav (jak „Mapa"): zaokrąglone tło brand-50 +
       płynna zmiana koloru. Scope: linki nav (bezpośrednie dzieci .farm-topnav oraz
       grupy .farm-topnav-home-nav) — NIE narzędzia/CTA (te są w .farm-nav-tools). */
    .farm-topnav > a, .farm-topnav-home-nav > a { padding: .25rem .5rem; border-radius: .5rem; transition: color .15s ease, background-color .15s ease; }
    .farm-topnav > a:hover, .farm-topnav-home-nav > a:hover { background: #f0fdf5; }
    .dark .farm-topnav > a:hover, .dark .farm-topnav-home-nav > a:hover { background: rgba(255,255,255,.05); }
    .farm-nav-tools { display: flex; align-items: center; gap: .45rem; padding-left: 1rem; border-left: 1px solid rgba(15,23,42,.12); }
    .dark .farm-nav-tools { border-left-color: rgba(255,255,255,.14); }
    .farm-nav-sep { display: inline-block; width: 1px; height: 28px; background: rgba(15,23,42,.12); margin: 0 .15rem; flex: none; }
    .dark .farm-nav-sep { background: rgba(255,255,255,.14); }
    /* Admin/staff „testowo widzi wszystkie zakładki" — dużo linków; wypełnij rząd,
       trzymaj prawą stronę, pozwól na poziomy scroll zamiast rozwalać layout. */
    /* padding-block/right: zostawia miejsce na znacznik notyfikacji avatara
       (absolutny dot wystaje ~4px ponad/za avatar przez -top-0.5 + ring-2),
       którego inaczej overflow-y:hidden przycina od góry. */
    .farm-topnav--all { flex: 1 1 auto; min-width: 0; justify-content: flex-end; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; padding-block: .375rem; padding-right: .375rem; }
    .farm-topnav--all::-webkit-scrollbar { display: none; }
    .farm-topnav--all > * { flex: none; }
}

* { font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif; }

/* Focus outline używa CSS var brand color (per-portal) zamiast hardcoded zielonego.
   Każdy portal ma --brand-500 set via core/layout.php:282 z service config. */
*:focus-visible {
  outline: 2px solid var(--brand-500, var(--color-green));
  outline-offset: 2px;
  border-radius: 2px;
}
.dark *:focus-visible { outline-color: var(--brand-400, #34d399); }

/* Brak białego paska pod stopką na samym dole strony: tło <html> = kolor stopki
   (navy / gray-950 w dark), więc odbicie rubber-band na dole pokazuje kolor stopki,
   nie domyślną biel. NIE używamy `overscroll-behavior-y: none` — blokowało natywny
   pull-to-refresh na mobile; sam background-color załatwia biały pasek. */
html {
  background-color: var(--color-navy);
}
html.dark { background-color: #030712; } /* gray-950 — zgodne z dark:bg-gray-950 stopki */

body {
  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  min-height: 100vh;   /* fallback dla starszych przeglądarek */
  min-height: 100dvh;  /* mobile: dynamiczny viewport — wysokość nie skacze przy chowaniu paska URL */
  font-size: 17px;
  line-height: 1.6;
}

/* Body stron nie-app-shell (np. /moje, account-shell) dostaje klasę Tailwind .min-h-screen.
   .min-h-screen{min-height:100vh} (specyficzność 0,1,0) wygrywało nad regułą body{} (0,0,1) i
   przypinało stronę do DUŻEGO viewportu (vh = pasek URL schowany). Na mobile chowający się pasek
   adresu zmieniał realną wysokość → treść „przeskakiwała". Override z wyższą specyficznością:
   dvh (dynamiczny, śledzi pasek) z fallbackiem vh. Spójne z .farm-shell-main / body.farm-app. */
body.min-h-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Bump arbitrary font sizes +2px for readability */
.\!text-\[9px\], .text-\[9px\]   { font-size: 11px !important; }
.\!text-\[10px\], .text-\[10px\] { font-size: 12px !important; }
.\!text-\[11px\], .text-\[11px\] { font-size: 13px !important; }
.\!text-\[13px\], .text-\[13px\] { font-size: 15px !important; }

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* Glassmorphism cards */
.card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.card-static {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* Salary as hero */
.salary {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-green);
}

/* Animacje wejściowe/stagger (slideUp/.animate-up, fadeIn/.fade-in, scaleIn/.scale-in,
   slideInRight/.onboarding-step, pulse-badge/.badge-trusted) usunięte — opóźniały
   pojawianie się treści (kart) i były niejednolite. Treść renderuje się od razu. */

/* Response bar */
.response-bar { height: 4px; border-radius: 2px; background: #e2e8f0; overflow: hidden; }
.response-bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; }
.response-fast   .response-bar-fill { background: #2d8653; width: 90%; }
.response-medium .response-bar-fill { background: #f59e0b; width: 55%; }
.response-slow   .response-bar-fill { background: #ef4444; width: 20%; }
.response-none   .response-bar-fill { background: #94a3b8; width: 5%; }

/* Streak */
.streak-count { font-size: 1.5rem; font-weight: 700; color: #f97316; }

/* Badge status colors */
.badge-status-sent { background: #eff6ff; color: #1e40af; }
.badge-status-viewed { background: #fef9c3; color: #854d0e; }
.badge-status-contacted { background: #dcfce7; color: #166534; }
.badge-status-rejected { background: #fef2f2; color: #991b1b; }
.badge-status-active { background: #dcfce7; color: #166534; }
.badge-status-pending { background: #fef9c3; color: #854d0e; }
.badge-status-inactive { background: #fef2f2; color: #991b1b; }

/* Dual range slider */
.range-slider { position: relative; height: 6px; }
.range-slider input[type=range] {
  position: absolute; width: 100%;
  -webkit-appearance: none;
  background: transparent; pointer-events: none;
}
.range-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  background: var(--color-green);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  pointer-events: all; cursor: pointer;
}
.range-slider input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--color-green);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  pointer-events: all; cursor: pointer;
}
.range-track {
  position: absolute; height: 6px;
  background: var(--color-green);
  border-radius: 3px;
}

/* Single range slider */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  background: var(--color-green);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px;
  background: var(--color-green);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* Form inputs compatible with Tailwind */
.form-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  font-size: 0.9375rem;
  color: #0a324a;
  background: white;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.form-input:focus {
  border-color: #2d8653;
  box-shadow: 0 0 0 3px rgba(45,134,83,0.1);
}
select.form-input {
  appearance: auto;
}
textarea.form-input {
  resize: vertical;
  min-height: 80px;
}

/* Quiz option cards */
.quiz-option {
  transition: all 0.15s ease;
  cursor: pointer;
}
.quiz-option:hover {
  border-color: #2d8653;
  background: rgba(45, 134, 83, 0.05);
}
.quiz-option.selected {
  border-color: #2d8653;
  background: #e8f5ee;
}
.quiz-option.correct {
  border-color: #16a34a;
  background: #dcfce7;
}
.quiz-option.wrong {
  border-color: #dc2626;
  background: #fef2f2;
}

/* Badge card styles */
.badge-card {
  transition: transform 0.2s ease;
}
.badge-card:hover {
  transform: scale(1.05);
}
.badge-card.earned {
  background: rgba(255, 255, 255, 0.8);
}
.badge-card.locked {
  background: rgba(255, 255, 255, 0.4);
  opacity: 0.6;
}

/* ===================================
   Dark mode (class-based via Tailwind)
   =================================== */

/* Body & base — dark mode neutral (was #132a1f green tint dla praca-only) */
.dark body,
body.dark { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #e2e8f0; }

/* Cards */
.dark .card, .dark .card-static {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.dark .card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* Salary */
.dark .salary { color: #4ade80; }

/* Form inputs (Tailwind-style) */
.dark .form-input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}
.dark .form-input:focus {
  border-color: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}
.form-input::placeholder { color: #94a3b8; opacity: 1; }
.dark .form-input::placeholder { color: #94a3b8; opacity: 1; }

/* Dark-mode dla map Leafleta — invert + hue-rotate (classic "google-maps-like
   dark theme" bez zmiany tile providera). Override per-page filters via
   !important. Wody/zieleń odwrócone wracają do podobnych odcieni; reszta
   ciemnieje. Markery i ikony Leafleta NIE są inverted (są poza tile-pane). */
.dark .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.95) saturate(0.7) !important;
}

/* Salary pill w kartach ofert — własna klasa zamiast Tailwind utilities,
   bo tailwind-built.css nie ma dark:from-emerald-950, dark:text-emerald-300 etc.
   (statyczny build, ograniczony zestaw). */
.salary-pill {
  background: linear-gradient(to right, #dcfce7, #ecfdf5);
  border: 1px solid #a7f3d0;
}
.salary-pill-text { color: #15803d; }
.dark .salary-pill {
  background: #047857;
  border: 1px solid #10b981;
}
.dark .salary-pill-text { color: #d1fae5; }
.salary-pill-tbd {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #b45309;
}
.dark .salary-pill-tbd {
  background: #78350f;
  border-color: #d97706;
  color: #fde68a;
}
/* Salary-min input: kompaktowy, bez spinnerów (mniej wizualnego balastu) */
.form-input.salary-min-input {
  padding: 0.35rem 0.65rem !important;
  font-size: 0.8125rem !important;
  border-radius: 8px !important;
  -moz-appearance: textfield;
}
.form-input.salary-min-input::-webkit-outer-spin-button,
.form-input.salary-min-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dark .form-input.salary-min-input { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.18); }
.dark .form-input.salary-min-input::placeholder { color: #cbd5e1; opacity: 1; }

/* Legacy form inputs */
.dark .form__input, .dark .form__select, .dark .form__textarea {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}
.dark .form__input:focus, .dark .form__select:focus, .dark .form__textarea:focus {
  border-color: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}
.dark .form__label { color: #94a3b8; }
.dark .form__hint { color: #64748b; }
.dark .form h2, .dark .form h3 { color: #e2e8f0; }

/* Stat cards */
.dark .stat-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.dark .stat-card__value { color: #e2e8f0; }
.dark .stat-card__label { color: #94a3b8; }

/* Tables */
.dark .table {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.dark .table th {
  color: #94a3b8;
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}
.dark .table td {
  color: #e2e8f0;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.dark .table td a { color: #4ade80; }
.dark .table tbody tr:hover { background: rgba(74, 222, 128, 0.05); }

/* Sitewide: CAŁY serwis jest zaznaczalny/kopiowalny (decyzja usera 2026-07-07 —
   odwrócenie wcześniejszego „native-app feel" z 2026-06-16). Wymuszamy
   user-select:text również na chrome (przyciski, .btn/.btn--*/.btn-*,
   [role="button"], nagłówki h1–h6), żeby nadpisać ewentualne none z innych reguł.
   To dotyczy WYŁĄCZNIE zaznaczania — dragowanie (user-drag niżej) zostaje bez zmian. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
[class~="btn"],
[class*="btn-"],
h1, h2, h3, h4, h5, h6 {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
  -webkit-user-drag: none;
}
a {
  -webkit-user-drag: none;
}
button img,
[role="button"] img,
a img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Wyjątek: nagłówki WEWNĄTRZ treści redakcyjnej (artykuły newsy, opisy ofert,
   leksykon leków, prawo) są treścią — zostają zaznaczalne, żeby dało się
   skopiować cały tekst razem z jego śródtytułami. */
.prose :is(h1, h2, h3, h4, h5, h6),
.prose-newsy :is(h1, h2, h3, h4, h5, h6),
.prose-job :is(h1, h2, h3, h4, h5, h6),
.prawo-prose :is(h1, h2, h3, h4, h5, h6) {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Panel admina (WSZYSTKIE serwisy: gabinet/praca/newsy/leki/szkolenia — przez
   wspólny core/admin-layout.php → <body class="farm-admin">). Admin to narzędzie
   do pracy na danych, więc nadpisujemy globalny chrome (nagłówki h1–h6 oraz
   przyciski/.btn z user-select:none) — w panelu admina ZAZNACZALNE jest wszystko,
   żeby dało się skopiować dowolny tekst, etykietę, ID czy wartość z tabeli. */
body.farm-admin,
body.farm-admin :is(h1, h2, h3, h4, h5, h6),
body.farm-admin button,
body.farm-admin input[type="button"],
body.farm-admin input[type="submit"],
body.farm-admin input[type="reset"],
body.farm-admin [role="button"],
body.farm-admin [class~="btn"],
body.farm-admin [class*="btn-"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Buttons */
.dark .btn--ghost {
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.15);
}
.dark .btn--ghost:hover {
  border-color: #4ade80;
  color: #4ade80;
}

/* Badges (status pills) — dark overrides */
.dark .badge--inactive { background: rgba(255, 255, 255, 0.08); color: #94a3b8; }
.dark .badge--sent { background: rgba(59, 130, 246, 0.15); color: #93bbfd; }
.dark .badge--viewed { background: rgba(234, 179, 8, 0.15); color: #fcd34d; }
.dark .badge--contacted, .dark .badge--active, .dark .badge--verified { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.dark .badge--rejected { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.dark .badge--pending { background: rgba(234, 179, 8, 0.15); color: #fcd34d; }

.dark .badge-status-sent { background: rgba(59, 130, 246, 0.15); color: #93bbfd; }
.dark .badge-status-viewed { background: rgba(234, 179, 8, 0.15); color: #fcd34d; }
.dark .badge-status-contacted { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.dark .badge-status-rejected { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.dark .badge-status-active { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.dark .badge-status-pending { background: rgba(234, 179, 8, 0.15); color: #fcd34d; }
.dark .badge-status-inactive { background: rgba(255, 255, 255, 0.08); color: #94a3b8; }

/* Candidate cards */
.dark .candidate-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.dark .candidate-card__header h3 { color: #e2e8f0; }
.dark .candidate-card__job { color: #94a3b8; }
.dark .candidate-card__job a { color: #4ade80; }
.dark .candidate-card__field { color: #e2e8f0; }
.dark .candidate-card__field strong { color: #94a3b8; }
.dark .candidate-card__field a { color: #4ade80; }
.dark .candidate-card__note { color: #e2e8f0; background: rgba(255, 255, 255, 0.04); }
.dark .candidate-card__date { color: #64748b; }

/* Application cards */
.dark .application-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.dark .application-card__header h3 { color: #e2e8f0; }
.dark .application-card__header h3 a { color: #e2e8f0; }
.dark .application-card__header h3 a:hover { color: #4ade80; }
.dark .application-card__company { color: #94a3b8; }
.dark .application-card__company a { color: #4ade80; }
.dark .application-card__salary { color: #4ade80; }
.dark .application-card__note { color: #94a3b8; }
.dark .application-card__footer { color: #64748b; }

/* Review cards */
.dark .review-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.dark .review-card__comment { color: #e2e8f0; }
.dark .review-card__author { color: #94a3b8; }
.dark .review-card__date { color: #64748b; }
.dark .review-card__subcategories { color: #94a3b8; }
.dark .review-card__response {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: #4ade80;
}
.dark .review-card__response strong { color: #e2e8f0; }
.dark .review-card__response small { color: #64748b; }
.dark .review-card__warning { background: rgba(234, 179, 8, 0.15); color: #fcd34d; }
.dark .review-card__response-form textarea {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}

/* Job cards */
.dark .job-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.dark .job-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }
.dark .job-card__title a { color: #e2e8f0; }
.dark .job-card__title a:hover { color: #4ade80; }
.dark .job-card__salary { color: #4ade80; }
.dark .job-card__date { color: #64748b; }

/* Alert cards */
.dark .alert-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.dark .alert-card__criteria { color: #e2e8f0; }
.dark .alert-card__frequency { color: #64748b; }

/* Empty state */
.dark .empty-state {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.dark .empty-state p { color: #94a3b8; }

/* Alert messages */
.dark .alert--error { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; }
.dark .alert--success { background: rgba(74, 222, 128, 0.15); border-color: rgba(74, 222, 128, 0.3); color: #4ade80; }

/* Tags */
.dark .tag { background: rgba(255, 255, 255, 0.08); color: #94a3b8; }

/* Panel / Admin headers */
.dark .panel__header h1 { color: #e2e8f0; }
.dark .panel__section h2 { color: #e2e8f0; }
.dark .panel-card { background: #1e293b; border-color: #334155; }
.dark .panel-card--hover:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .35); border-color: #475569; }
.dark .panel-head__title { color: #f1f5f9; }
.dark .panel-card__title { color: #f1f5f9; }
.dark .panel-nav { border-bottom-color: rgba(255, 255, 255, .1); }
.dark .panel-nav__item { color: #94a3b8; }
.dark .panel-nav__item:hover { background: rgba(255, 255, 255, .06); color: #e2e8f0; }
.dark .panel-nav__item.is-active { background: var(--color-green); color: #fff; }
.dark .panel-nav__item.is-active:hover { background: #2d8653; color: #fff; }
.dark .panel-sidebar__loc { background: #1e293b; border-color: #334155; }
.dark .panel-sidebar__loc-name { color: #f1f5f9; }
.dark .panel-sidebar__item { color: #94a3b8; }
.dark .panel-sidebar__item:hover { background: rgba(255, 255, 255, .06); color: #e2e8f0; }
/* Stan aktywny stonowany także w ciemnym motywie (2026-07-30) — patrz `.panel-sidebar__item.is-active`. */
.dark .panel-sidebar__item.is-active { background: rgba(45, 134, 83, .18); color: var(--brand-300); }
.dark .panel-sidebar__item.is-active:hover { background: rgba(45, 134, 83, .22); color: var(--brand-300); }
.dark .panel-tabs { border-bottom-color: rgba(255, 255, 255, .1); }
.dark .panel-tabs__item { color: #94a3b8; }
.dark .panel-tabs__item:hover { color: #e2e8f0; }
.dark .panel-tabs__item.is-active { color: #4ade80; border-bottom-color: #4ade80; }
/* .admin__header migrated to .panel__header */

/* Profile */
.dark .profile__header h1 { color: #e2e8f0; }
.dark .profile__section h2 { color: #e2e8f0; }
.dark .profile__nav { background: rgba(255, 255, 255, 0.06); }
.dark .profile__nav-link { color: #94a3b8; }
.dark .profile__nav-link:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.08); }
.dark .profile__nav-link--active { color: #e2e8f0; background: rgba(255, 255, 255, 0.12); box-shadow: none; }

/* Employer profile */
.dark .employer-profile__header {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.dark .employer-profile__header h1 { color: #e2e8f0; }
.dark .employer-profile__location { color: #94a3b8; }
.dark .employer-profile__rating-value { color: #4ade80; }
.dark .employer-profile__section h2 { color: #e2e8f0; }

/* Review form section */
.dark .review-form-section { border-top-color: rgba(255, 255, 255, 0.1); }
.dark .review-form-section h3 { color: #e2e8f0; }

/* Star rating */
.dark .star-rating__star { color: rgba(255, 255, 255, 0.15); }

/* Quiz options */
.dark .quiz-option:hover {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.05);
}
.dark .quiz-option.selected {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}
.dark .quiz-option.correct {
  border-color: #22c55e;
  background: rgba(74, 222, 128, 0.15);
}
.dark .quiz-option.wrong {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

/* Badge cards */
.dark .badge-card.earned { background: rgba(255, 255, 255, 0.08); }
.dark .badge-card.locked { background: rgba(255, 255, 255, 0.03); }

/* Response bar */
.dark .response-bar { background: rgba(255, 255, 255, 0.1); }

/* Range slider */
.dark input[type=range] { background: rgba(255, 255, 255, 0.1); }
.dark input[type=range]::-webkit-slider-thumb { border-color: #0a324a; }
.dark input[type=range]::-moz-range-thumb { border-color: #0a324a; }

/* ===================================
   Backward-compatible classes
   (panel, admin, legacy pages)
   =================================== */

/* Panel layout */
.panel { max-width: 72rem; margin: 0 auto; padding: 2rem 0; }
.panel__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;
}
.panel__header h1 { font-size: 1.5rem; font-weight: 700; color: var(--color-navy); margin: 0; }
.panel__section { margin-top: 2rem; }
.panel__section h2 { font-size: 1.15rem; font-weight: 600; color: var(--color-navy); margin-bottom: 1rem; }
/* .admin__header removed — unified into .panel__header */

/* ── Employer panel: unified chrome (nav + flat cards) ───────────────────
   Clean, crisp surfaces per styles.md §4 (flat white card, not glass) +
   one consistent sub-nav across every /panel/ page. Dark variants below
   live with the rest of the .dark overrides (search ".dark .panel-"). */

/* Flat card — styles.md §4 canon (bg-white + slate border, no glass) */
.panel-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}
.panel-card--hover { transition: box-shadow .15s ease, border-color .15s ease; }
.panel-card--hover:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, .07); border-color: #cbd5e1; }

/* Page header: title + subtitle + actions (consistent across pages).
   min-height = wspólna wysokość nagłówka na WSZYSTKICH stronach panelu (2026-07-30):
   bez niej strona z podtytułem i bez podtytułu zaczynały treść na różnej wysokości. */
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.5rem; min-height: 3.5rem; }
.panel-head__title { font-size: 1.5rem; font-weight: 700; color: var(--color-navy); margin: 0; line-height: 1.15; letter-spacing: -0.01em; }
.panel-head__sub { font-size: .875rem; color: var(--color-muted); margin: .35rem 0 0; }
.panel-head__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Sub-navigation — scrollable pill row, brand-filled active */
.panel-nav {
  display: flex; gap: .35rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: -.25rem 0 1.5rem; padding-bottom: .85rem;
  border-bottom: 1px solid #e2e8f0; scrollbar-width: none;
}
.panel-nav::-webkit-scrollbar { display: none; }
.panel-nav__item {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .5rem .9rem; border-radius: 9999px;
  font-size: .875rem; font-weight: 600; color: var(--color-muted);
  background: transparent; border: 1px solid transparent; text-decoration: none;
  transition: color .15s, background .15s;
}
.panel-nav__item svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.panel-nav__item:hover { background: rgba(15, 23, 42, .045); color: var(--color-navy); }
.panel-nav__item.is-active { background: var(--color-green); color: #ffffff; }
.panel-nav__item.is-active:hover { background: #236b44; color: #ffffff; }
.panel-nav__badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; height: 1.1rem;
  padding: 0 .3rem; border-radius: 9999px; font-size: .68rem; font-weight: 700; line-height: 1;
  background: #e11d48; color: #fff;
}
.panel-nav__item.is-active .panel-nav__badge { background: rgba(255, 255, 255, .25); }

/* Section label inside a panel card */
.panel-card__title { font-size: .9375rem; font-weight: 600; color: var(--color-navy); margin: 0; }

/* ── Panel shell: sidebar (desktop) + treść ─────────────────────────── */
/* 96rem (nie 80rem): panel jest jedynym miejscem w .farm, gdzie treść ma obok siebie
   stałą szynę nawigacji 264 px — przy 80rem środek zostawał 888 px i wiersz oferty
   łamał tytuł obok przycisków. Limit `max-w-6xl` kontenera portalu zdejmuje reguła
   `body:has(.panel-shell)` niżej. */
.panel-shell { max-width: 96rem; margin: 0 auto; }
@media (min-width: 1024px) {
  .panel-shell { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2rem; align-items: start; }
}
.panel-main { min-width: 0; }

/* WARIANTY SZEROKOŚCI TREŚCI (2026-07-30) — `panel_shell_start($a, ['width' => …])`.
   Jedna szerokość dla listy 48 ofert i dla formularza z pięcioma polami dawała albo
   ciasną tabelę, albo input rozciągnięty na 1240 px. Domyślny wariant to `default`,
   więc strona, która nic nie deklaruje, nie zmienia się sama z siebie.
     wide    — lista ofert, analityka, kandydaci (cała dostępna kolumna)
     default — cenniki, apteki, profil firmy
     narrow  — formularze (zespół, ustawienia, preferencja faktury) */
.panel-main--default { max-width: 72rem; }
/* `form` — kreatory (dodaj/edytuj ofertę): nagłówek strony, karta kroku i nawigacja
   kreatora dzielą JEDNĄ szerokość. Bez tego karta stała wyśrodkowana na 56rem wewnątrz
   kolumny 72rem, a nagłówek i pasek akcji ciągnęły się nad nią do pełnej szerokości. */
.panel-main--form    { max-width: 56rem; }
.panel-main--narrow  { max-width: 48rem; }

.panel-sidebar { display: none; }
@media (min-width: 1024px) {
  .panel-sidebar { display: block; position: sticky; top: calc(var(--farm-nav-h, 72px) + 1.25rem); align-self: start; }
}
.panel-sidebar__loc { display: block; padding: .6rem .75rem; margin-bottom: 1rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.panel-sidebar__loc-name { font-size: .9375rem; font-weight: 700; color: var(--color-navy); line-height: 1.2; }
.panel-sidebar__loc-meta { font-size: .75rem; color: var(--color-muted); margin-top: .1rem; }
/* Rozmiar pozycji = wzorzec newsy (`.nfv-nav__item`): pigułka .7rem/.9rem, ikona 24 px,
   font .9875rem, odstęp .85rem. Duże, klikalne cele — panel ma nietechnicznych
   użytkowników, a szyna jest jedyną nawigacją na desktopie. */
.panel-sidebar__group { margin-bottom: 1.25rem; }
.panel-sidebar__group + .panel-sidebar__group { margin-top: .25rem; }
.panel-sidebar__label { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; margin: 0 0 .4rem .8rem; }
.panel-sidebar__item {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .55rem .8rem; border-radius: 10px;
  font-size: .9375rem; font-weight: 600; line-height: 1.2;
  color: var(--color-muted); text-decoration: none; transition: background .15s, color .15s;
}
.panel-sidebar__item + .panel-sidebar__item { margin-top: 2px; }
.panel-sidebar__item svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.panel-sidebar__item:hover { background: rgba(15, 23, 42, .045); color: var(--color-navy); }
/* Stan aktywny STONOWANY (2026-07-30): pełna zielona pigułka na 264-px szynie krzyczała
   głośniej niż treść strony. Teraz tło marki + lewy znacznik — czytelne, nie dominujące. */
.panel-sidebar__item.is-active { background: var(--brand-50); color: var(--brand-700); }
.panel-sidebar__item.is-active:hover { background: var(--brand-50); color: var(--brand-700); }
.panel-sidebar__item.is-active::before {
  content: ""; position: absolute; left: 0; top: .45rem; bottom: .45rem;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-500);
}
.panel-sidebar__item .panel-nav__badge { margin-left: auto; }
/* Fokus klawiaturowy widoczny w całym panelu (nawigacja, akcje, kontrolki filtrów). */
.panel-sidebar__item:focus-visible,
.panel-drawer__toggle:focus-visible,
.panel-guide-launch:focus-visible {
  outline: 2px solid var(--brand-500); outline-offset: 2px;
}

/* ── Drawer nawigacji na mobile (<1024 px, 2026-07-30) ────────────────
   Zastępuje pasek 11 pigułek w poziomym scrollu (1406 px treści w 358 px okna).
   Pozycje pochodzą z TEGO SAMEGO `_panel_nav_groups()` co sidebar — zero rozjazdu.
   Escape, scrim, focus-trap i powrót fokusu obsługuje panel_drawer_script(). */
.panel-bar {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 1024px) { .panel-bar { display: none; } }
.panel-drawer__toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .55rem .85rem;
  border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
  font-size: .9375rem; font-weight: 600; color: var(--color-navy); cursor: pointer;
}
.panel-drawer__toggle svg { width: 1.25rem; height: 1.25rem; }
.panel-bar__title { font-size: .9375rem; font-weight: 700; color: var(--color-navy); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-bar__badge { margin-left: auto; }
.panel-drawer { position: fixed; inset: 0; z-index: 400; }
.panel-drawer[hidden] { display: none; }
.panel-drawer__scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.panel-drawer__panel {
  position: absolute; inset: 0 auto 0 0; width: min(19rem, 86vw);
  background: #fff; padding: 1rem .9rem 2rem; overflow-y: auto;
  box-shadow: 0 20px 45px -20px rgba(15, 23, 42, .45);
  display: flex; flex-direction: column;
}
.panel-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.panel-drawer__brand { font-size: .9375rem; font-weight: 800; color: var(--color-navy); }
.panel-drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -.35rem;
  border: 0; border-radius: 12px; background: transparent; color: var(--color-muted); cursor: pointer;
}
.panel-drawer__close:hover { background: rgba(15, 23, 42, .05); color: var(--color-navy); }
.panel-drawer__close:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.panel-drawer__close svg { width: 1.35rem; height: 1.35rem; }
.panel-drawer .panel-sidebar { display: block; position: static; }
.panel-drawer .panel-sidebar__item { padding: .7rem .8rem; font-size: 1rem; }
.dark .panel-drawer__panel { background: #0f172a; }
.dark .panel-drawer__toggle { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.dark .panel-bar__title { color: #f1f5f9; }

/* Mobile nav wrapper (switcher + pigułki) — widoczne tylko <lg */
.panel-mobilenav { margin-bottom: 1.25rem; }
@media (min-width: 1024px) { .panel-mobilenav { display: none; } }
.panel-mobilenav .panel-sidebar__loc { margin-bottom: .85rem; }

/* Sub-zakładki w treści (Aplikacje/Polecani, Cennik/Proformy) */
.panel-tabs { display: flex; gap: .25rem; border-bottom: 1px solid #e2e8f0; margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.panel-tabs::-webkit-scrollbar { display: none; }
.panel-tabs__item { padding: .6rem .9rem; font-size: .9rem; font-weight: 600; color: var(--color-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.panel-tabs__item:hover { color: var(--color-navy); }
.panel-tabs__item.is-active { color: var(--color-green); border-bottom-color: var(--color-green); }

/* ══════════════════════════════════════════════════════════════════════
   Panel pracodawcy — SZEROKI UKŁAD DWUKOLUMNOWY (2026-07-30)
   Lewa szyna = nawigacja zakładek · cała reszta = treść.

   Prawa szyna „Kandydaci" (trzecia kolumna `.panel-shell--rail` + karta
   `.prail*`, praca 2.374.0) ZDJĘTA — decyzja usera: „zostawiamy pomysł
   z oddzielną kartą kandydatów, jest ona jako normalna zakładka".
   Kandydaci wrócili do lewego menu (`panel_sidebar` już ich nie filtruje),
   a zwolnione miejsce dostaje treść. Kod szyny: git 47811a1c / bf9250e8.

   Kontener treści portali .farm to `max-w-6xl` (1152 px) — na stronach
   panelu zdejmujemy ten limit i trzymamy szerokość na `.panel-shell`
   (96rem = 1536 px, czyli ~1240 px na treść przy szynie 264 px), żeby
   wiersz oferty, KPI-strip i tabele miały realne miejsce. Ta sama
   technika co newsy (`body:has(.nfv) main.farm-shell-main > div`);
   sticky sidebar żyje, bo praca ma własny layout z `overflow-x: clip`. */
body:has(.panel-shell) main.farm-shell-main > div { max-width: none; }

/* ══════════════════════════════════════════════════════════════════════
   .pmodal — duży („prawie pełnoekranowy") popup widoków szczegółowych panelu
   Kandydat i hub oferty (statystyki + jej kandydaci) otwierają się TUTAJ, a nie
   przez przejście na stronę: lista i prawa szyna zostają w tle, nie tracisz
   kontekstu. Mechanizm i ograniczenia: praca/panel/_modal.php.
   z-index 500 — nad topnavem/toastami (60), POD ścianą cookies (9998).
   ══════════════════════════════════════════════════════════════════════ */
.pmodal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; }
.pmodal[x-cloak] { display: none; }
.pmodal__scrim { position: absolute; inset: 0; background: rgba(15,23,42,.55); }
/* Wysokość PO TREŚCI, przycięta do 94vh: krótki widok (np. „kandydaci ukryci") nie
   rozciąga się na pół ekranu pustką, a długi hub oferty przewija się w środku. */
.pmodal__box {
  position: relative; display: flex; flex-direction: column;
  width: min(90rem, 100%); height: auto; max-height: min(94vh, 100%);
  background: #f8fafc; border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 90px -25px rgba(15,23,42,.55), 0 0 0 1px rgba(15,23,42,.06);
}
/* Wariant „narrow" — widok jednego kandydata. Jego karta ma czytelną szerokość
   (max-w-2xl), więc w popupie 90rem połowa boksu stała pusta. */
.pmodal__box--narrow { width: min(58rem, 100%); }
.pmodal__head { flex: none; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.5rem; background: #fff; border-bottom: 1px solid #e2e8f0; }
.pmodal__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: var(--color-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmodal__link { flex: none; font-size: .8125rem; font-weight: 700; color: var(--color-green); text-decoration: none; }
.pmodal__link:hover { text-decoration: underline; }
.pmodal__x { flex: none; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 999px; background: #f1f5f9; color: #475569; cursor: pointer; transition: background .15s, color .15s; }
.pmodal__x svg { width: 1.15rem; height: 1.15rem; }
.pmodal__x:hover { background: #e2e8f0; color: var(--color-navy); }
.pmodal__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.5rem; }
.pmodal__body:focus { outline: none; }
.pmodal__note { padding: 2rem .5rem; font-size: .9375rem; color: var(--color-muted); text-align: center; }
/* Treść embed nie dubluje marginesów strony — pionowy rytm daje padding popupu. */
.panel-embed > :first-child { margin-top: 0; }
.panel-embed .panel-head { margin-top: 0; }
/* Limit czytelności karty (max-w-2xl) jest sensowny na PEŁNEJ stronie, ale w popupie
   zostawiał martwe pole — tam karta bierze całą (i tak ograniczoną) szerokość boksu. */
.panel-embed .max-w-2xl { max-width: 100%; }

/* Blokada przewijania tła, gdy popup otwarty (inaczej kółko myszy przewija stronę
   pod scrimem, a lista ucieka pod popupem). */
html.pmodal-lock { overflow: hidden; }

.dark .pmodal__box { background: #0f172a; box-shadow: 0 40px 90px -25px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }
.dark .pmodal__head { background: #1e293b; border-color: #334155; }
.dark .pmodal__title { color: #f1f5f9; }
.dark .pmodal__x { background: rgba(255,255,255,.08); color: #cbd5e1; }
.dark .pmodal__x:hover { background: rgba(255,255,255,.14); color: #f1f5f9; }
.dark .pmodal__note { color: #94a3b8; }

/* Telefon: popup nie jest używany (JS przepuszcza klik na pełną stronę), ale gdyby
   go otwarto programowo — pełny ekran bez marginesów i zaokrągleń. */
@media (max-width: 767.98px) {
  .pmodal { padding: 0; }
  .pmodal__box { width: 100%; height: 100%; border-radius: 0; }
  .pmodal__body { padding: 1rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   Employer panel — dashboard components (redesign 2.158.0)
   Hand-written classes (purge-safe, no Tailwind dependency) — same
   philosophy as .panel-card / .panel-nav. Dark = class-based (.dark …).
   Brand accents via per-portal --brand-* vars; semantic (amber/sky/rose)
   hardcoded to match existing panel status pills.
   ══════════════════════════════════════════════════════════════════════ */

/* Subtle lift on every panel card (was flat) */
.panel-card { box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.dark .panel-card { box-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* Company identity block (sidebar + mobile) — replaces .panel-sidebar__loc */
.panel-company { display: flex; align-items: center; gap: .7rem; padding: .8rem; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.panel-company__logo { width: 42px; height: 42px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: -.03em; background: linear-gradient(140deg, var(--brand-500), var(--brand-700)); box-shadow: 0 10px 22px -12px rgba(45,134,83,.7); }
.panel-company__name { font-size: .9rem; font-weight: 700; color: var(--color-navy); line-height: 1.2; }
.panel-company__meta { font-size: .72rem; color: var(--color-muted); margin-top: .12rem; display: flex; align-items: center; gap: .3rem; }
.panel-company__meta svg { width: .82rem; height: .82rem; color: var(--brand-500); flex: none; }
.dark .panel-company { background: #1e293b; border-color: #334155; }
.dark .panel-company__name { color: #f1f5f9; }

/* Dashboard vertical rhythm — .panel-main is a plain block, so the dashboard
   supplies its own gap (scoped; does not touch other /panel/* pages). */
.panel-dash { display: flex; flex-direction: column; gap: 1.35rem; }

/* Header greeting band (dashboard) */
.panel-head--dash { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0; }
.panel-greet { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.panel-greet__logo { width: 52px; height: 52px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; background: linear-gradient(140deg, var(--brand-500), var(--brand-700)); box-shadow: 0 12px 26px -12px rgba(45,134,83,.65); }
.panel-greet__eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-600); }
.panel-greet__title { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--color-navy); margin: .05rem 0 0; }
.panel-greet__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.dark .panel-greet__title { color: #f1f5f9; }
.dark .panel-greet__eyebrow { color: var(--brand-400); }

/* Chips */
.panel-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; border: 1px solid #e2e8f0; background: #f8fafc; color: var(--color-muted); }
.panel-chip svg { width: .82rem; height: .82rem; flex: none; }
.panel-chip--ok { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.dark .panel-chip { background: #172033; border-color: #334155; color: #94a3b8; }
.dark .panel-chip--ok { background: rgba(45,134,83,.14); border-color: rgba(45,134,83,.3); color: var(--brand-300); }

/* Status pills — unified dot + label system */
.panel-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; padding: .16rem .55rem .16rem .45rem; border-radius: 999px; border: 1px solid transparent; line-height: 1.4; white-space: nowrap; }
.panel-pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.panel-pill--green { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.panel-pill--green .dot { background: var(--brand-500); }
.panel-pill--amber { background: #fef3c7; border-color: #fcd88a; color: #b45309; }
.panel-pill--amber .dot { background: #d97706; }
.panel-pill--sky { background: #e0f2fe; border-color: #bae6fd; color: #0369a1; }
.panel-pill--sky .dot { background: #0ea5e9; }
.panel-pill--rose { background: #ffe4e6; border-color: #fecdd3; color: #be123c; }
.panel-pill--rose .dot { background: #e11d48; }
.panel-pill--slate { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
.panel-pill--slate .dot { background: #94a3b8; }
.dark .panel-pill--green { background: rgba(45,134,83,.16); border-color: rgba(45,134,83,.36); color: var(--brand-300); }
.dark .panel-pill--amber { background: rgba(180,83,9,.18); border-color: rgba(180,83,9,.4); color: #fbbf24; }
.dark .panel-pill--sky { background: rgba(3,105,161,.18); border-color: rgba(3,105,161,.4); color: #38bdf8; }
.dark .panel-pill--rose { background: rgba(190,18,60,.18); border-color: rgba(190,18,60,.4); color: #fb7185; }
.dark .panel-pill--slate { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #94a3b8; }

/* KPI strip */
.panel-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
@media (min-width: 900px) { .panel-kpis { grid-template-columns: repeat(4, 1fr); } }
.panel-kpi { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1rem 1rem .95rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.panel-kpi:hover { box-shadow: 0 8px 26px -10px rgba(15,23,42,.14); transform: translateY(-2px); border-color: #cbd5e1; }
.panel-kpi--accent { border-color: var(--brand-200); background: linear-gradient(180deg, color-mix(in srgb, var(--brand-500) 6%, #fff), #fff); }
.panel-kpi--accent::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); }
.panel-kpi__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; gap: .5rem; }
.panel-kpi__label { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); }
.panel-kpi__icn { width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; }
.panel-kpi__icn svg { width: 18px; height: 18px; }
.panel-kpi__icn--brand { background: var(--brand-500); color: #fff; }
.panel-kpi__icn--brand-soft { background: var(--brand-50); color: var(--brand-600); }
.panel-kpi__icn--slate { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.panel-kpi__icn--sky { background: #e0f2fe; color: #0369a1; }
.panel-kpi__num { font-size: 1.85rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--color-navy); font-variant-numeric: tabular-nums; }
.panel-kpi__num--brand { color: var(--brand-600); }
.panel-kpi__foot { display: flex; align-items: center; gap: .35rem; margin-top: .5rem; font-size: .72rem; color: #94a3b8; }
.panel-kpi__cta { margin-top: .5rem; font-size: .72rem; font-weight: 700; color: var(--brand-600); display: inline-flex; align-items: center; gap: .2rem; text-decoration: none; }
.panel-kpi__cta:hover { color: var(--brand-700); }
.panel-kpi__spark { margin-top: .55rem; display: block; width: 100%; height: 26px; }
.panel-delta { font-weight: 700; display: inline-flex; align-items: center; gap: .1rem; }
.panel-delta--up { color: var(--brand-600); }
.panel-delta--down { color: #be123c; }
.panel-delta svg { width: .72rem; height: .72rem; }
.dark .panel-kpi { background: #1e293b; border-color: #334155; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.dark .panel-kpi:hover { border-color: #475569; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.dark .panel-kpi--accent { background: linear-gradient(180deg, rgba(45,134,83,.12), #1e293b); border-color: rgba(45,134,83,.34); }
.dark .panel-kpi__num { color: #f1f5f9; }
.dark .panel-kpi__num--brand { color: var(--brand-300); }
.dark .panel-kpi__icn--slate { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #94a3b8; }
.dark .panel-kpi__icn--sky { background: rgba(3,105,161,.2); color: #38bdf8; }
.dark .panel-kpi__icn--brand-soft { background: rgba(45,134,83,.16); color: var(--brand-300); }
.dark .panel-delta--up { color: var(--brand-300); }
.dark .panel-kpi__cta { color: var(--brand-300); }

/* Navy command band — the single accent moment (echoes footer bg-navy) */
.panel-band { position: relative; display: block; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; background: linear-gradient(120deg, var(--color-navy), #12233a); border: 1px solid rgba(255,255,255,.06); box-shadow: 0 8px 26px -10px rgba(15,23,42,.35); transition: transform .18s ease, box-shadow .18s ease; }
.panel-band:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(15,23,42,.5); }
.panel-band::before { content: ""; position: absolute; right: -60px; bottom: -90px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand-500) 62%, transparent), transparent 70%); pointer-events: none; }
.panel-band__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; padding: 1.35rem 1.5rem; }
.panel-band__icn { width: 52px; height: 52px; border-radius: 15px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.panel-band__icn svg { width: 26px; height: 26px; }
.panel-band__body { min-width: 0; flex: 1 1 260px; }
.panel-band__k { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-300); }
.panel-band__t { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin-top: .1rem; }
.panel-band__s { font-size: .85rem; color: rgba(255,255,255,.72); margin-top: .2rem; max-width: 52ch; }
.dark .panel-band { background: linear-gradient(120deg, #132132, #0b1626); }

/* Designed list rows (recent offers / applications) */
.panel-list { display: flex; flex-direction: column; }
.panel-row { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-top: 1px solid #eef2f7; }
.panel-row:first-child { border-top: 0; padding-top: .15rem; }
.panel-row__av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: #33445c; background: #f1f5f9; border: 1px solid #e2e8f0; }
.panel-row__av svg { width: 18px; height: 18px; color: #94a3b8; }
.panel-row__main { min-width: 0; flex: 1; }
.panel-row__title { font-size: .875rem; font-weight: 600; color: var(--color-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; display: block; }
a.panel-row__title:hover { color: var(--brand-600); }
.panel-row__meta { font-size: .75rem; color: var(--color-muted); margin-top: .15rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.panel-row__meta a { color: inherit; text-decoration: none; }
.panel-row__meta a:hover { color: var(--brand-600); }
.panel-row__sep { color: #cbd5e1; }
.panel-row__right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; text-align: right; }
.panel-row__count { font-size: .8rem; font-weight: 700; color: var(--brand-600); display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; text-decoration: none; }
.panel-row__count:hover { color: var(--brand-700); }
.panel-row__count b { font-size: .95rem; }
.panel-row__time { font-size: .7rem; color: #94a3b8; white-space: nowrap; }
.dark .panel-row { border-top-color: rgba(255,255,255,.08); }
.dark .panel-row__title { color: #f1f5f9; }
.dark .panel-row__av { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #cbd5e1; }
.dark .panel-row__count { color: var(--brand-300); }
.dark .panel-row__sep { color: #475569; }

/* Empty state */
.panel-empty { text-align: center; padding: 1.6rem .5rem; }
.panel-empty__icn { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto .7rem; display: flex; align-items: center; justify-content: center; background: #f1f5f9; border: 1px solid #e2e8f0; color: #94a3b8; }
.panel-empty__icn svg { width: 22px; height: 22px; }
.panel-empty p { font-size: .82rem; color: var(--color-muted); margin: 0 0 .7rem; }
.dark .panel-empty__icn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

/* Dashboard alerts */
.panel-alert { display: flex; align-items: center; gap: .75rem; padding: .8rem .95rem; border-radius: 12px; font-size: .83rem; border: 1px solid transparent; }
.panel-alert svg { width: 19px; height: 19px; flex: none; }
.panel-alert a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.panel-alert--amber { background: #fef3c7; border-color: #fcd88a; color: #92400e; }
.panel-alert--brand { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.dark .panel-alert--amber { background: rgba(180,83,9,.16); border-color: rgba(180,83,9,.4); color: #fbbf24; }
.dark .panel-alert--brand { background: rgba(45,134,83,.14); border-color: rgba(45,134,83,.32); color: var(--brand-300); }

/* "Wszystkie →" link */
.panel-link-more { font-size: .72rem; font-weight: 600; color: var(--brand-600); display: inline-flex; align-items: center; gap: .15rem; text-decoration: none; }
.panel-link-more:hover { color: var(--brand-700); }
.dark .panel-link-more { color: var(--brand-300); }

/* Light-on-navy button (band CTA) */
.btn--light { background: var(--brand-500); color: #fff; }
.btn--light:hover { background: var(--brand-400); color: #fff; }

/* Dashboard load-in stagger (reduced-motion safe) */
@media (prefers-reduced-motion: no-preference) {
  .panel-anim { opacity: 0; transform: translateY(10px); animation: panelRise .55s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(var(--i, 0) * 65ms); }
  @keyframes panelRise { to { opacity: 1; transform: none; } }
}

/* ══════════════════════════════════════════════════════════════════════
   Employer dashboard — clean refresh (2.x)
   Przewiewny, dopracowany, precyzyjny brand. Dashboard-scoped: współdzielone
   klasy (.panel-card/.panel-row/.panel-empty/.table) guardowane pod .panel-dash,
   inne /panel/* nietknięte. Purge-safe (ręczne klasy), light+dark, reduced-motion.
   ══════════════════════════════════════════════════════════════════════ */

/* Więcej powietrza między sekcjami */
.panel-dash { gap: 1.6rem; }

/* Hero — czysta jasna karta: pasek-akcent marki + subtelny narożny glow */
.panel-head--dash {
  position: relative; overflow: hidden;
  padding: 1.7rem 1.9rem 1.7rem 2rem;
  border: 1px solid #eef2f7;
  border-radius: 22px;
  background:
    radial-gradient(120% 150% at 100% 0%, color-mix(in srgb, var(--brand-500) 10%, #fff), transparent 55%),
    #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 30px 60px -42px rgba(15,23,42,.3);
}
.panel-head--dash::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
}
.panel-head--dash > * { position: relative; z-index: 1; }
.dark .panel-head--dash {
  border-color: #334155;
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(45,134,83,.22), transparent 55%),
    #1e293b;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 30px 60px -42px rgba(0,0,0,.7);
}

.panel-greet { gap: 1.05rem; }
.panel-greet__logo { width: 60px; height: 60px; border-radius: 17px; font-size: 1.3rem; box-shadow: 0 16px 32px -16px rgba(45,134,83,.75); }
.panel-greet__eyebrow { letter-spacing: .12em; }
.panel-greet__title { font-size: clamp(1.4rem, 2.5vw, 1.7rem); letter-spacing: -.025em; }

/* NEW: linia podsumowania stanu pod powitaniem (dane realne) */
.panel-greet__summary { font-size: .875rem; font-weight: 500; color: var(--color-muted); margin-top: .35rem; line-height: 1.45; }
.panel-greet__summary b { font-weight: 700; color: var(--brand-700); }
.dark .panel-greet__summary { color: #94a3b8; }
.dark .panel-greet__summary b { color: var(--brand-300); }

/* KPI — przewiewne premium kafle, duże liczby, delty-pigułki */
.panel-kpis { gap: 1rem; }
.panel-kpi { border-radius: 18px; padding: 1.3rem 1.35rem 1.25rem; border-color: #eef2f7; box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 18px 40px -32px rgba(15,23,42,.25); }
.panel-kpi:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 24px 46px -26px rgba(15,23,42,.28); border-color: #e2e8f0; }
.panel-kpi__label { font-size: .7rem; letter-spacing: .08em; color: #94a3b8; }
.panel-kpi__num { font-size: 2.35rem; letter-spacing: -.04em; margin-top: .15rem; }
.panel-kpi__icn { width: 38px; height: 38px; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.dark .panel-kpi { border-color: #334155; box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 18px 40px -32px rgba(0,0,0,.6); }
.dark .panel-kpi:hover { border-color: #475569; }
.dark .panel-kpi__icn { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.panel-kpi--accent::before { height: 4px; }
.panel-delta { padding: .14rem .45rem; border-radius: 999px; font-size: .7rem; gap: .12rem; }
.panel-delta--up { color: var(--brand-700); background: var(--brand-50); }
.panel-delta--down { color: #be123c; background: #ffe4e6; }
.dark .panel-delta--up { color: var(--brand-300); background: rgba(45,134,83,.18); }
.dark .panel-delta--down { color: #fb7185; background: rgba(190,18,60,.2); }

/* Command band — czystszy, spójny promień i głębszy miękki cień */
.panel-band { border-radius: 20px; box-shadow: 0 24px 54px -30px rgba(15,23,42,.6); }
.panel-band__inner { padding: 1.6rem 1.9rem; }

/* Karty list — spójny promień, miękki cień, czyste nagłówki (scoped) */
.panel-dash .panel-card { border-color: #eef2f7; border-radius: 20px; box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 20px 44px -34px rgba(15,23,42,.22); }
.dark .panel-dash .panel-card { border-color: #334155; box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 20px 44px -34px rgba(0,0,0,.55); }
.panel-card__ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-50); color: var(--brand-600); }
.panel-card__ic svg { width: 17px; height: 17px; }
.dark .panel-card__ic { background: rgba(45,134,83,.16); color: var(--brand-300); }
.panel-dash .panel-card__title { font-size: 1rem; letter-spacing: -.01em; }

/* Wiersze list — hover całego wiersza + miększe awatary (scoped) */
.panel-dash .panel-row { padding: .7rem .6rem; margin: 0 -.6rem; border-radius: 12px; transition: background .14s ease; }
.panel-dash .panel-row:hover { background: color-mix(in srgb, var(--brand-500) 6%, transparent); }
.panel-dash .panel-row:first-child { padding-top: .6rem; }
.panel-dash .panel-row__av { background: linear-gradient(140deg, #f8fafc, #e9eef5); }
.dark .panel-dash .panel-row:hover { background: rgba(45,134,83,.12); }
.dark .panel-dash .panel-row__av { background: linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }

/* Empty-states — więcej powietrza + zapraszający tint marki (scoped) */
.panel-dash .panel-empty { padding: 2rem .5rem; }
.panel-dash .panel-empty__icn { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-500); }
.dark .panel-dash .panel-empty__icn { background: rgba(45,134,83,.14); border-color: rgba(45,134,83,.3); color: var(--brand-300); }

/* Tabela płatności — lżejszy nagłówek, hover wierszy (scoped) */
.panel-dash table.table thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 700; }
.panel-dash table.table tbody tr { transition: background .14s ease; }
.panel-dash table.table tbody tr:hover { background: rgba(15,23,42,.025); }
.dark .panel-dash table.table tbody tr:hover { background: rgba(255,255,255,.03); }

/* Editable offer-title field (kreator dodaj-oferte) — czytelny sygnał „kliknij, aby
   edytować" bez ciężkiego wyglądu inputa: przerywane podkreślenie + ołówek. Purge-safe. */
.job-title-edit { position: relative; }
.job-title-edit input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px dashed #cbd5e1;
  border-radius: 0; padding: 0 1.55rem .3rem 0; margin: 0;
  font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--color-navy);
  transition: border-color .15s ease; cursor: text;
}
.job-title-edit input:hover { border-bottom-color: var(--brand-400); }
.job-title-edit input:focus { outline: none; box-shadow: none; border-bottom-style: solid; border-bottom-color: var(--brand-500); }
.job-title-edit__pencil { position: absolute; right: 0; bottom: .28rem; width: 15px; height: 15px; color: #94a3b8; pointer-events: none; transition: color .15s ease; }
.job-title-edit:hover .job-title-edit__pencil { color: var(--brand-500); }
.job-title-edit input:focus ~ .job-title-edit__pencil { color: var(--brand-500); }
.dark .job-title-edit input { color: #fff; border-bottom-color: rgba(255,255,255,.28); }
.dark .job-title-edit input:hover { border-bottom-color: var(--brand-400); }
.dark .job-title-edit input:focus { border-bottom-color: var(--brand-300); }
.dark .job-title-edit__pencil { color: #64748b; }

/* ============================================================
   Design-system W0 — sekcje, karty planów, wiersze dodatków.
   Reużywa: .panel-empty, .panel-pill*, .panel-alert*, panel_pill().
   Stonowany premium: brand-akcent tylko na --featured (color-mix),
   pełny dark-mode. Klasy pisane ręcznie (purge-safe).
   ============================================================ */

/* Section header — eyebrow + tytuł + opcjonalny aside */
.panel-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .35rem 1rem; margin: 2.4rem 0 1.1rem; }
.panel-section:first-child { margin-top: 0; }
.panel-section__eyebrow { font-size: .67rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-600); margin: 0 0 .18rem; }
.panel-section__title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--color-navy); margin: 0; line-height: 1.15; }
.panel-section__aside { font-size: .75rem; font-weight: 500; color: #94a3b8; padding-bottom: .12rem; }
.dark .panel-section__title { color: #f1f5f9; }
.dark .panel-section__eyebrow { color: var(--brand-300); }

/* ── Panel guide: opisy objaśniające („?" popover + podtytuły) + launcher przewodnika ── */
.panel-hint { font-size: .82rem; line-height: 1.5; color: #64748b; margin: .15rem 0 0; }
.dark .panel-hint { color: #94a3b8; }
.panel-section__hint { font-size: .82rem; line-height: 1.5; color: #64748b; margin: .25rem 0 0; max-width: 60ch; }
.dark .panel-section__hint { color: #94a3b8; }
.panel-help { position: relative; display: inline-flex; vertical-align: middle; margin-left: .4rem; }
.panel-help__btn { width: 1.15rem; height: 1.15rem; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff; color: #64748b; font-size: .72rem; font-weight: 800; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.panel-help__btn:hover { border-color: var(--brand-400); color: var(--brand-600); }
.dark .panel-help__btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.panel-help__pop { position: absolute; top: calc(100% + .5rem); left: 0; z-index: 40; width: min(20rem, 80vw); padding: .8rem .9rem; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 12px 34px -12px rgba(15,23,42,.35); display: flex; flex-direction: column; gap: .3rem; text-transform: none; letter-spacing: normal; }
.dark .panel-help__pop { background: #1e293b; border-color: #334155; }
.panel-help__title { font-size: .78rem; font-weight: 800; color: #0f172a; }
.dark .panel-help__title { color: #f1f5f9; }
.panel-help__body { font-size: .82rem; font-weight: 400; line-height: 1.55; color: #475569; }
.dark .panel-help__body { color: #cbd5e1; }
/* Pierwsze kroki instrukcji w dymku „?" (pełna lista żyje na /panel/przewodnik.php).
   Trzy pozycje to maksimum, jakie mieści się na telefonie bez scrolla wewnątrz dymka. */
.panel-help__steps { display: flex; flex-direction: column; gap: .25rem; margin-top: .35rem; }
.panel-help__step { font-size: .78rem; font-weight: 400; line-height: 1.5; color: #475569; }
.panel-help__step b { color: var(--brand-600); font-weight: 800; margin-right: .15rem; }
.dark .panel-help__step { color: #cbd5e1; }
.dark .panel-help__step b { color: var(--brand-300); }
.panel-help__more { margin-top: .45rem; font-size: .76rem; font-weight: 700; color: var(--brand-600); text-decoration: none; }
.panel-help__more:hover { text-decoration: underline; }
.dark .panel-help__more { color: var(--brand-300); }
/* Focus widoczny — tooltip otwiera się z klawiatury, więc musi być widać, co jest aktywne. */
.panel-help__btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-color: var(--brand-500); color: var(--brand-600); }
.dark .panel-help__btn:focus-visible { color: var(--brand-300); }
/* Wariant „(i)" (panel_tip) — objaśnienie pojęcia przy liczniku/etykiecie. Ten sam mechanizm
   co „?" przewodnika, inna typografia glifu (małe „i" zamiast wykrzyknikowego „?"). */
.panel-help--tip .panel-help__btn { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: .78rem; }
/* Wąsko: popover trzymamy w kolumnie treści, żeby nie wychodził za prawą krawędź karty. */
@media (max-width: 640px) {
    .panel-help--tip .panel-help__pop { position: fixed; left: 1rem; right: 1rem; top: auto; width: auto; z-index: 60; }
}
.panel-guide-launch { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: 10px; font-size: .82rem; font-weight: 600; color: #64748b; text-decoration: none; }
.panel-guide-launch svg { width: 1.05rem; height: 1.05rem; flex: none; }
.panel-guide-launch:hover { background: #f1f5f9; color: var(--brand-600); }
.dark .panel-guide-launch { color: #94a3b8; }
.dark .panel-guide-launch:hover { background: rgba(255,255,255,.04); color: var(--brand-300); }
.panel-sidebar__foot { border-top: 1px solid #e2e8f0; padding-top: .6rem; margin-top: .25rem; margin-bottom: 0; }
.dark .panel-sidebar__foot { border-color: #1e293b; }

/* Plan / price card — komponent ceny (oba cenniki: panel + publiczny) */
.plan-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; overflow: hidden; }
.plan-card:hover { box-shadow: 0 10px 30px -14px rgba(15,23,42,.16); transform: translateY(-2px); border-color: #cbd5e1; }
.plan-card--featured { border-color: var(--brand-300); box-shadow: 0 14px 36px -18px color-mix(in srgb, var(--brand-500) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--brand-500) 5%, #fff), #fff); }
.plan-card--featured::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); }
.plan-card__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Fixed-height flag slot: reserves a row for badge/tag on every card so the
   price baseline aligns across the grid whether or not a card is flagged. */
.plan-card__flag { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-height: 1.3rem; margin-bottom: .55rem; }
.plan-card__name { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; color: var(--color-navy); margin: 0; line-height: 1.25; }
/* W wąskiej siatce 4-kol dłuższa nazwa stanowiska zawija do 2 linii — rezerwujemy
   wysokość nazwy, żeby ceny stały w równej linii niezależnie od długości nazwy. */
@media (min-width: 1024px) { .plan-card__name { min-height: 2.4rem; } }
.plan-card__badge { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; background: var(--brand-500); color: #fff; line-height: 1.3; }
.plan-card__desc { font-size: .85rem; color: var(--color-muted); margin: .35rem 0 0; line-height: 1.45; }
.plan-card__price { display: flex; align-items: baseline; gap: .3rem; margin-top: .9rem; flex-wrap: wrap; }
.plan-card__amount { font-size: 1.95rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--color-navy); font-variant-numeric: tabular-nums; }
.plan-card__amount--text { font-size: 1.4rem; }
.plan-card__unit { font-size: .8rem; font-weight: 600; color: #94a3b8; }
.plan-card__sub { font-size: .78rem; color: #94a3b8; margin: .5rem 0 0; font-variant-numeric: tabular-nums; line-height: 1.45; }
.plan-card__features { list-style: none; margin: 1.15rem 0 0; padding: 1.15rem 0 0; border-top: 1px solid #eef2f7; display: flex; flex-direction: column; gap: .58rem; flex: 1; }
.plan-card__features li { display: flex; align-items: flex-start; gap: .5rem; font-size: .855rem; color: #475569; line-height: 1.4; }
.plan-card__features svg { width: 1rem; height: 1rem; color: var(--brand-500); flex: none; margin-top: .1rem; }
.plan-card__foot { margin-top: 1.4rem; }
.plan-card__foot .btn { width: 100%; }
.plan-card__tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-200); padding: .16rem .5rem; border-radius: 999px; }
.dark .plan-card { background: #1e293b; border-color: #334155; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.dark .plan-card:hover { border-color: #475569; box-shadow: 0 12px 34px -16px rgba(0,0,0,.65); }
.dark .plan-card--featured { border-color: rgba(45,134,83,.5); background: linear-gradient(180deg, rgba(45,134,83,.12), #1e293b); }
.dark .plan-card__name, .dark .plan-card__amount { color: #f1f5f9; }
.dark .plan-card__features { border-top-color: rgba(255,255,255,.08); }
.dark .plan-card__features li { color: #cbd5e1; }
.dark .plan-card__tag { background: rgba(45,134,83,.16); border-color: rgba(45,134,83,.34); color: var(--brand-300); }

/* Add-on rows (dodatki / promowanie) — kontener: .panel-card p-0 */
.addon-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.35rem; border-top: 1px solid #f1f5f9; transition: background .15s ease; }
.addon-row:first-child { border-top: 0; }
.addon-row:hover { background: color-mix(in srgb, var(--brand-500) 4%, transparent); }
.addon-row__name { font-size: .9rem; font-weight: 600; color: var(--color-navy); }
.addon-row__desc { font-size: .78rem; color: var(--color-muted); margin-top: .1rem; }
.addon-row__price { text-align: right; flex: none; }
.addon-row__net { font-size: .95rem; font-weight: 800; color: var(--color-navy); font-variant-numeric: tabular-nums; }
.addon-row__gross { font-size: .72rem; color: #94a3b8; margin-top: .05rem; font-variant-numeric: tabular-nums; }
.dark .addon-row { border-top-color: rgba(255,255,255,.07); }
.dark .addon-row:hover { background: rgba(255,255,255,.03); }
.dark .addon-row__name, .dark .addon-row__net { color: #f1f5f9; }

/* Stats grid */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card {
  background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  padding: 1.25rem; text-align: center;
}
.stat-card__value { display: block; font-size: 1.75rem; font-weight: 700; color: var(--color-navy); }
.stat-card__label { display: block; font-size: 0.75rem; color: var(--color-muted); margin-top: 0.25rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.625rem 1.25rem; border-radius: 12px;
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif; font-size: 0.875rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn--primary { background: var(--color-green); color: white; }
.btn--primary:hover { background: #236b44; }
.btn--ghost { background: transparent; color: var(--color-navy); border: 1px solid #e2e8f0; }
.btn--ghost:hover { border-color: var(--color-green); color: var(--color-green); }
/* Panele admina: akcent przycisków wg palety serwisu (praca green / asystent indigo).
   --color-green == praca --brand-500 (#2d8653), więc praca-admin bez regresji; asystent → indigo.
   Zakres body.farm-admin: NIE dotyka publicznego serwisu ani panelu pracodawcy. */
body.farm-admin .btn--primary { background: var(--brand-500, var(--color-green)); }
body.farm-admin .btn--primary:hover { background: var(--brand-600, #236b44); }
body.farm-admin .btn--ghost:hover { border-color: var(--brand-500, var(--color-green)); color: var(--brand-500, var(--color-green)); }
.btn--sm { padding: 0.375rem 0.75rem; font-size: 0.8rem; }
.btn--full { width: 100%; }

/* Badges (status pills) */
.badge {
  display: inline-flex; align-items: center; padding: 0.2rem 0.6rem;
  border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
  white-space: nowrap;
}
.badge--verified { background: #dcfce7; color: #166534; }
.badge--active { background: #dcfce7; color: #166534; }
.badge--sent { background: #eff6ff; color: #1e40af; }
.badge--viewed { background: #fef9c3; color: #854d0e; }
.badge--contacted { background: #dcfce7; color: #166534; }
.badge--rejected { background: #fef2f2; color: #991b1b; }
.badge--pending { background: #fef9c3; color: #854d0e; }
.badge--inactive { background: #f1f5f9; color: #64748b; }

/* Tables */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
  width: 100%; border-collapse: collapse;
  background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 16px;
  overflow: hidden;
}
.table th {
  padding: 0.75rem 1rem; text-align: left;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-muted); border-bottom: 1px solid #e2e8f0;
  background: rgba(241,245,249,0.5);
}
.table td { padding: 0.75rem 1rem; font-size: 0.875rem; border-bottom: 1px solid #f1f5f9; color: var(--color-navy); }
.table td a { color: var(--color-green); text-decoration: none; }
.table td a:hover { text-decoration: underline; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: rgba(45,134,83,0.03); }

/* Empty state */
.empty-state {
  text-align: center; padding: 3rem 1.5rem;
  background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.empty-state p { color: var(--color-muted); margin-bottom: 1rem; }

/* Alert messages */
.alert { padding: 0.75rem 1rem; border-radius: 12px; margin-bottom: 1rem; font-size: 0.875rem; }
.alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert--success { background: #dcfce7; border: 1px solid #bbf7d0; color: #166534; }
.alert ul { margin: 0; padding-left: 1.25rem; }

/* Forms (legacy) */
.form { max-width: 100%; }
.form h2, .form h3 { color: var(--color-navy); margin: 1.5rem 0 0.75rem; }
.form__group { margin-bottom: 1rem; }
.form__label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-muted); margin-bottom: 0.375rem; }
.form__input, .form__select, .form__textarea {
  width: 100%; padding: 0.625rem 0.75rem;
  border: 1px solid #e2e8f0; border-radius: 12px;
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif; font-size: 0.9375rem;
  color: var(--color-navy); background: white;
  transition: border-color 0.15s, box-shadow 0.15s; outline: none;
  box-sizing: border-box;
}
.form__input:focus, .form__select:focus, .form__textarea:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(45,134,83,0.1);
}
.form__select { appearance: auto; }
.form__textarea { resize: vertical; min-height: 80px; }
.form__hint { display: block; font-size: 0.75rem; color: var(--color-muted); margin-top: 0.25rem; }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.form__row--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.form__row--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 640px) {
  .form__row, .form__row--3, .form__row--4 { grid-template-columns: 1fr; }
}
.form__checkbox, .form__radio {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem;
}
.form__radio-group { display: flex; gap: 1rem; flex-wrap: wrap; }
.form__radio-label { font-size: 0.875rem; }

/* Candidate cards */
.candidates-list { display: flex; flex-direction: column; gap: 1rem; }
.candidate-card {
  background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06); padding: 1.25rem;
}
.candidate-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.candidate-card__header h3 { font-size: 1rem; font-weight: 600; color: var(--color-navy); margin: 0; }
.candidate-card__job { font-size: 0.8rem; color: var(--color-muted); margin-top: 0.25rem; }
.candidate-card__job a { color: var(--color-green); text-decoration: none; }
.candidate-card__details { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; font-size: 0.875rem; margin-bottom: 0.75rem; }
.candidate-card__field { color: var(--color-navy); }
.candidate-card__field strong { color: var(--color-muted); font-weight: 500; }
.candidate-card__field a { color: var(--color-green); }
.candidate-card__note { font-size: 0.875rem; color: var(--color-navy); background: #f8fafc; border-radius: 8px; padding: 0.75rem; margin-bottom: 0.75rem; }
.candidate-card__footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.candidate-card__date { font-size: 0.75rem; color: var(--color-muted); }
.candidate-card__actions { display: flex; gap: 0.5rem; }

/* Filters bar */
.filters { margin-bottom: 1.5rem; }

/* Tags */
.tag {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.75rem; border-radius: 9999px;
  font-size: 0.75rem; background: #f1f5f9; color: var(--color-muted);
  white-space: nowrap;
}

/* Job cards (legacy — employer profile) */
.jobs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.job-card {
  background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06); padding: 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.job-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
.job-card__title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.job-card__title a { color: var(--color-navy); text-decoration: none; }
.job-card__title a:hover { color: var(--color-green); }
.job-card__salary { font-size: 1.15rem; font-weight: 700; color: var(--color-green); margin-bottom: 0.5rem; }
.job-card__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }
.job-card__footer { display: flex; justify-content: space-between; align-items: center; }
.job-card__date { font-size: 0.75rem; color: var(--color-muted); }

/* Employer profile (legacy) */
.employer-profile { max-width: 56rem; margin: 0 auto; padding: 2rem 0; }
.employer-profile__header {
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;
  background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06); padding: 1.5rem; margin-bottom: 1.5rem;
}
.employer-profile__header h1 { font-size: 1.5rem; font-weight: 700; color: var(--color-navy); margin: 0; }
.employer-profile__location { font-size: 0.875rem; color: var(--color-muted); margin-top: 0.25rem; }
.employer-profile__rating { display: flex; align-items: center; gap: 0.5rem; }
.employer-profile__rating-value { font-size: 1.5rem; font-weight: 700; color: var(--color-green); }
.employer-profile__info { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.employer-profile__section { margin-bottom: 2rem; }
.employer-profile__section h2 { font-size: 1.15rem; font-weight: 600; color: var(--color-navy); margin-bottom: 1rem; }

/* Review cards */
.reviews-list { display: flex; flex-direction: column; gap: 1rem; }
.review-card {
  background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06); padding: 1.25rem;
}
.review-card--old { opacity: 0.7; }
.review-card__warning { font-size: 0.75rem; color: #b45309; background: #fef3c7; border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
.review-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.review-card__rating { display: flex; align-items: center; gap: 0.25rem; }
.review-card__date { font-size: 0.75rem; color: var(--color-muted); }
.review-card__author { font-size: 0.8rem; color: var(--color-muted); margin-bottom: 0.5rem; }
.review-card__comment { font-size: 0.875rem; color: var(--color-navy); line-height: 1.5; margin-bottom: 0.75rem; }
.review-card__subcategories { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.8rem; color: var(--color-muted); margin-bottom: 0.75rem; }
.review-card__response {
  background: #f8fafc; border-radius: 8px; padding: 0.75rem; margin-top: 0.75rem;
  font-size: 0.875rem; border-left: 3px solid var(--color-green);
}
.review-card__response strong { color: var(--color-navy); }
.review-card__response small { color: var(--color-muted); }
.review-card__response-form { margin-top: 0.75rem; }
.review-card__response-form textarea {
  width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 8px;
  font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif; font-size: 0.875rem; resize: vertical; min-height: 60px;
  margin-bottom: 0.5rem; box-sizing: border-box;
}

/* Review form section */
.review-form-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; }
.review-form-section h3 { font-size: 1.1rem; font-weight: 600; color: var(--color-navy); margin-bottom: 1rem; }

/* Star rating input */
.star-rating { display: flex; gap: 0.25rem; }
.star-rating label { cursor: pointer; }
.star-rating input { display: none; }
.star-rating__star { font-size: 1.5rem; color: #e2e8f0; transition: color 0.15s; }
.star-rating label:hover .star-rating__star,
.star-rating label:hover ~ label .star-rating__star,
.star-rating input:checked ~ .star-rating__star { color: #f59e0b; }

/* Profile layout */
.profile { max-width: 48rem; margin: 0 auto; padding: 2rem 0; }
.profile__header { margin-bottom: 1.5rem; }
.profile__header h1 { font-size: 1.5rem; font-weight: 700; color: var(--color-navy); margin: 0 0 0.75rem; }
.profile__nav { display: flex; gap: 0.25rem; background: rgba(255,255,255,0.5); border-radius: 12px; padding: 0.25rem; }
.profile__nav-link {
  padding: 0.5rem 1rem; border-radius: 10px;
  font-size: 0.875rem; font-weight: 500; color: var(--color-muted);
  text-decoration: none; transition: all 0.15s;
}
.profile__nav-link:hover { color: var(--color-navy); background: rgba(255,255,255,0.6); }
.profile__nav-link--active { color: var(--color-navy); background: white; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.profile__section { margin-top: 2rem; }
.profile__section h2 { font-size: 1.1rem; font-weight: 600; color: var(--color-navy); margin-bottom: 1rem; }

/* Application cards */
.applications-list { display: flex; flex-direction: column; gap: 1rem; }
.application-card {
  background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06); padding: 1.25rem;
}
.application-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
.application-card__header h3 { font-size: 1rem; font-weight: 600; color: var(--color-navy); margin: 0; }
.application-card__header h3 a { color: var(--color-navy); text-decoration: none; }
.application-card__header h3 a:hover { color: var(--color-green); }
.application-card__company { font-size: 0.8rem; color: var(--color-muted); margin-top: 0.2rem; }
.application-card__company a { color: var(--color-green); text-decoration: none; }
.application-card__details { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.875rem; margin-bottom: 0.5rem; }
.application-card__salary { font-weight: 600; color: var(--color-green); }
.application-card__note { font-size: 0.8rem; color: var(--color-muted); margin-bottom: 0.5rem; }
.application-card__footer { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.75rem; color: var(--color-muted); }

/* Alert cards */
.alerts-list { display: flex; flex-direction: column; gap: 0.75rem; }
.alert-card {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;
  background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06); padding: 1rem 1.25rem;
}
.alert-card--inactive { opacity: 0.5; }
.alert-card__details { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.alert-card__criteria { font-size: 0.875rem; font-weight: 500; color: var(--color-navy); }
.alert-card__frequency { font-size: 0.75rem; color: var(--color-muted); }
.alert-card__actions { display: flex; gap: 0.5rem; }

/* ===================================
   Promoted card styles
   =================================== */

.promoted-card {
  border: 2px solid var(--brand-500, #2d8653);
  background: linear-gradient(135deg, rgba(45,134,83,0.07) 0%, rgba(45,134,83,0.03) 100%);
  position: relative;
  overflow: hidden;
}
.promoted-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2d8653, #34d399, #2d8653);
}
.promoted-card:hover {
  border-color: var(--brand-600, #236b44);
  box-shadow: 0 12px 40px rgba(45, 134, 83, 0.15);
}

.dark .promoted-card {
  border-color: rgba(74, 222, 128, 0.4);
  background: linear-gradient(135deg, rgba(74,222,128,0.08) 0%, rgba(52,211,153,0.04) 100%);
}
.dark .promoted-card::before {
  background: linear-gradient(90deg, rgba(74,222,128,0.6), rgba(52,211,153,0.8), rgba(74,222,128,0.6));
}
.dark .promoted-card:hover {
  border-color: rgba(74, 222, 128, 0.6);
  box-shadow: 0 12px 40px rgba(45, 134, 83, 0.1);
}

/* Featured card = oferta KUPIONA/opłacona (is_promoted=1) — zielony akcent brand
   zamiast bursztynu. Subtelny lewy akcent; wyróżnia płatne oferty nad zwykłymi.
   Jedno źródło prawdy — duplikat w praca/assets/css/style.css usunięty. */
.card.featured-card,
.featured-card {
  border: 1px solid rgba(45, 134, 83, 0.40) !important;
  background: #eff9f3 !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.card.featured-card::before,
.featured-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--brand-500, #2d8653);
}
.card.featured-card:hover,
.featured-card:hover {
  border-color: rgba(45, 134, 83, 0.60) !important;
  box-shadow: 0 8px 24px rgba(45, 134, 83, 0.14) !important;
  transform: translateY(-2px);
}
.dark .card.featured-card,
.dark .featured-card {
  border-color: rgba(74, 222, 128, 0.35) !important;
  background: rgba(74, 222, 128, 0.06) !important;
  box-shadow: none !important;
}
.dark .card.featured-card::before,
.dark .featured-card::before {
  background: rgba(74, 222, 128, 0.85);
}
.dark .card.featured-card:hover,
.dark .featured-card:hover {
  border-color: rgba(74, 222, 128, 0.55) !important;
  box-shadow: 0 8px 24px rgba(45, 134, 83, 0.12) !important;
}

/* ===================================
   Dark mode — Tailwind utility overrides
   =================================== */

/* Text colors */
.dark .text-navy           { color: #e2e8f0; }
.dark .text-slate-700      { color: #cbd5e1; }
.dark .text-slate-600      { color: #94a3b8; }
.dark .text-slate-500      { color: #94a3b8; }
.dark .text-slate-400      { color: #64748b; }
.dark .text-slate-300      { color: rgba(255,255,255,0.15); }
.dark .text-green-700      { color: #4ade80; }
.dark .text-green-600      { color: #4ade80; }
.dark .text-green-800      { color: #86efac; }
.dark .text-red-600        { color: #fca5a5; }
.dark .text-red-700        { color: #fca5a5; }
.dark .text-amber-700      { color: #fcd34d; }

/* Background colors — auto-dark dla light bg-* WITHOUT explicit dark:bg-*.
 * `:where()` ma 0 specificity → eksplicytne `dark:bg-gray-900` w Tailwind wygrywa
 * (np. mobile drawer) gdzie design wymaga konkretnego dark variant.
 * Bez `:where()` ten rule blokował ALL bg-white elements w dark mode na 6% white opacity. */
:where(.dark) .bg-white            { background: rgba(255,255,255,0.06); }
:where(.dark) .bg-slate-50         { background: rgba(255,255,255,0.06); }
:where(.dark) .bg-slate-100        { background: rgba(255,255,255,0.08); }
:where(.dark) .bg-green-50         { background: rgba(74,222,128,0.1); }
:where(.dark) .bg-green-100        { background: rgba(74,222,128,0.15); }
:where(.dark) .bg-red-50           { background: rgba(239,68,68,0.1); }
:where(.dark) .bg-red-100          { background: rgba(239,68,68,0.15); }
:where(.dark) .bg-amber-100        { background: rgba(245,158,11,0.15); }

/* Border colors — same `:where()` strategia */
:where(.dark) .border-slate-50     { border-color: rgba(255,255,255,0.05); }
:where(.dark) .border-slate-100    { border-color: rgba(255,255,255,0.08); }
:where(.dark) .border-slate-200    { border-color: rgba(255,255,255,0.12); }
:where(.dark) .border-green-200    { border-color: rgba(74,222,128,0.2); }

/* Hover states */
:where(.dark) .hover\:bg-white:hover     { background: rgba(255,255,255,0.1); }
:where(.dark) .hover\:bg-slate-50:hover  { background: rgba(255,255,255,0.08); }
:where(.dark) .hover\:bg-green-50:hover  { background: rgba(74,222,128,0.1); }

/* Hero search input */
.dark input.shadow-lg      { background: rgba(255,255,255,0.08); color: #e2e8f0; border-color: rgba(255,255,255,0.12); }

/* ===================================
   Admin Layout — Sidebar + Topbar
   =================================== */

/* Nieprzezroczysty (dawniej rgba .8 + blur): treść „wjeżdżała" widoczna pod
 * półprzezroczysty pasek przy scrollu. Switcher ekosystemu jest teraz w środku. */
.admin-topbar {
  background: #fff;
}
.dark .admin-topbar {
  background: #111827;
}

.admin-layout {
  display: flex;
  min-height: calc(100vh - 3.5rem);
}

/* Sidebar — desktop */
.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 3.5rem;
  height: calc(100vh - 3.5rem);
  overflow-y: auto;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  z-index: 35;
  transition: transform 0.2s ease;
}
.dark .admin-sidebar {
  background: rgba(255,255,255,0.03);
  border-right-color: rgba(255,255,255,0.08);
}

.admin-sidebar__group {
  padding: 1.25rem 0.75rem 0.375rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}
.dark .admin-sidebar__group {
  color: #64748b;
}

.admin-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
  margin-left: -3px;
}
.admin-sidebar__link:hover {
  background: rgba(45,134,83,0.06);
  color: #2d8653;
}
.dark .admin-sidebar__link {
  color: #94a3b8;
}
.dark .admin-sidebar__link:hover {
  background: rgba(74,222,128,0.08);
  color: #4ade80;
}

.admin-sidebar__link--active {
  background: #e8f5ee;
  color: #2d8653;
  font-weight: 600;
  border-left-color: #2d8653;
}
.admin-sidebar__link--active:hover {
  background: #e8f5ee;
  color: #2d8653;
}
.dark .admin-sidebar__link--active {
  background: rgba(74,222,128,0.12);
  color: #4ade80;
  border-left-color: #4ade80;
}
.dark .admin-sidebar__link--active:hover {
  background: rgba(74,222,128,0.12);
  color: #4ade80;
}

.admin-sidebar__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0.7;
}
.admin-sidebar__link--active .admin-sidebar__icon {
  opacity: 1;
}

.admin-sidebar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: #ef4444;
  color: white;
}

/* Main content area */
.admin-main {
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
}

/* Mobile sidebar — overlay */
@media (max-width: 767px) {
  .admin-sidebar {
    position: fixed;
    top: 3.5rem;
    left: 0;
    height: calc(100vh - 3.5rem);
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }
  .admin-sidebar--open {
    transform: translateX(0);
  }
  .admin-main {
    width: 100%;
    padding: 1rem;
  }
}

/* Admin stat cards — category groups */
.admin-stats-group {
  margin-bottom: 1.5rem;
}
.admin-stats-group__title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 0.625rem;
}
.dark .admin-stats-group__title {
  color: #64748b;
}

/* Prose — rendered Markdown w opisach ofert.
   Śródtytuły ##/### są PODRZĘDNE wobec tytułu karty „Opis oferty" i renderują się
   jak etykiety sekcji (mały, wersaliki, tracking, stonowany slate) — 1:1 ze
   strukturalnymi sekcjami oferty (render_offer_content: text-sm/bold/uppercase/
   tracking-wide/slate-400). Wcześniej h2 było 1.125rem/700 navy — WIĘKSZE niż
   tytuł karty (odwrócona hierarchia) i tworzyło „ścianę" powtarzalnych navy
   nagłówków; teraz opis ma rytm, jeden tytuł i jeden język wizualny z resztą karty. */
.prose-job h2 { font-size:0.875rem; font-weight:700; letter-spacing:0.025em; text-transform:uppercase; color:#94a3b8; margin:1.75rem 0 0.5rem; }
.prose-job h3 { font-size:0.8125rem; font-weight:700; color:#64748b; margin:1.25rem 0 0.35rem; }
.dark .prose-job h2 { color:#64748b; }
.dark .prose-job h3 { color:#94a3b8; }
.prose-job h2:first-child, .prose-job h3:first-child { margin-top:0; }
.prose-job p  { margin:0.5rem 0; line-height:1.7; }
.prose-job ul, .prose-job ol { margin:0.5rem 0; padding-left:1.25rem; }
.prose-job li { margin:0.3rem 0; line-height:1.6; }
.prose-job ul li { list-style-type:disc; }
.prose-job ol li { list-style-type:decimal; }
.prose-job li::marker { color:#cbd5e1; }
.dark .prose-job li::marker { color:#475569; }
.prose-job strong { font-weight:600; }
.prose-job hr { margin:1.25rem 0; border:0; border-top:1px solid rgba(0,0,0,0.08); }
.dark .prose-job hr { border-top-color:rgba(255,255,255,0.1); }

/* Print */
@media print {
  nav, footer, .sidebar-today, button, .admin-sidebar, .admin-topbar { display: none !important; }
  body { background: white; }
  .card { box-shadow: none; border: 1px solid #ddd; }
  .admin-main { padding: 0; }
}

/* ─── Hero count emphasis ─────────────────────────────────────────
   Subtelny akcent dla głównej metryki na hero (np. "1415 ofert").
   ~18% większa liczba + animowany emerald podkreślnik (scaleX 0→1,
   1.1s ease-out z 0.5s delayem po load). Trzyma się obecnego stylu
   (Outfit + brand-400/500), dodaje tylko 2 mikrodetale.

   Użycie: <span class="hero-count text-brand-500 tabular-nums">1415</span>

   Używana na: praca/public/home.php hero, praca/public/index.php hero. */
.hero-count {
    position: relative;
    display: inline-block;
    font-size: 1.18em;
    line-height: 1;
    padding-bottom: 0.04em;
    letter-spacing: -0.015em;
}
.hero-count::after {
    content: '';
    position: absolute;
    left: 4%; right: 4%;
    bottom: 0;
    height: 0.08em;
    background: var(--brand-400, #4ade80);
    border-radius: 2px;
    transform-origin: left center;
    animation: hero-count-underline 1.1s 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    opacity: 0.85;
}
@keyframes hero-count-underline {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-count::after { animation: none; }
}

/* ─── farm-topnav: animowany underline na hover (wszystkie text-bearing links) ───
   Targetuje wszystkie linki z tekstem (Lista, Mapa, Pracodawcy, Wynagrodzenia,
   Doradca kariery, Dla pracodawców, Cennik) przez wspólną sygnaturę klas
   Tailwind: `inline-flex.text-sm.font-medium`.

   Co NIE matchuje (zamierzone):
   - "Moje konto" avatar — używa `flex` nie `inline-flex`
   - "Zapisane oferty" icon-only — brak `text-sm.font-medium`
   - "Zaloguj / Zarejestruj" CTA button — brak `inline-flex`
   - Theme toggle / grid switcher — to <button> nie <a>

   Animacja: scaleX 0→1 z lewej, 250ms ease-out. Color brand-400 żeby pasował
   do .hero-count i był subtelny. Dla pill-style (Lista/Mapa) underline pojawia
   się PONIŻEJ pill bg-brand-50, jako "tab indicator". */
.farm-topnav a.inline-flex.text-sm.font-medium {
    position: relative;
}
.farm-topnav a.inline-flex.text-sm.font-medium::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -3px;
    height: 2px;
    background: var(--brand-400, #4ade80);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}
.farm-topnav a.inline-flex.text-sm.font-medium:hover::after {
    transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
    .farm-topnav a.inline-flex.text-sm.font-medium::after { transition: none; }
}

/* ===========================================================================
   Page primitives — wyciągnięte z home (/), /oferty, /oferta/{slug}, /siec/{slug}
   2026-05-25 — dodaję powtarzające się patterny z layoutów praca.farm jako
   utility classes. Inline Tailwind w PHP nadal działa; te klasy są skrótem
   dla nowego kodu i punktem konsolidacji.
   =========================================================================== */

/* --- Hero header (eyebrow + H1; .hero-count już istnieje wyżej) --------- */
.page-hero { margin-bottom: 1.25rem; }

.hero-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-500, #2d8653);
    margin-bottom: 0.375rem;
}
.dark .hero-eyebrow { color: var(--brand-400, #4ade80); }

.hero-title {
    font-size: 1.875rem;          /* text-3xl */
    font-weight: 800;
    color: #0a324a;               /* navy */
    letter-spacing: -0.025em;
    line-height: 1.15;
}
@media (min-width: 640px) { .hero-title { font-size: 2.25rem; } }
@media (min-width: 768px) { .hero-title { font-size: 3rem; } }
.dark .hero-title { color: #ffffff; }

.hero-subtitle {
    color: #64748b;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
.dark .hero-subtitle { color: #94a3b8; }

/* --- Section heading ----------------------------------------------------- */
.section-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0a324a;
    margin-bottom: 1rem;
}
.dark .section-heading { color: #ffffff; }

/* --- Pill chips (filter chips, status pills, meta pills) ---------------- */
.pill-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: #f1f5f9;
    color: #64748b;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.pill-chip--brand   { background: #e8f5ee; color: #1f6e44; }
.pill-chip--emerald { background: #d1fae5; color: #047857; }
.pill-chip--amber   { background: #fef3c7; color: #b45309; }
.pill-chip--rose    { background: #ffe4e6; color: #be123c; }
.pill-chip--violet  { background: #ede9fe; color: #6d28d9; }
.pill-chip--slate   { background: #f1f5f9; color: #64748b; }

.dark .pill-chip          { background: rgba(255,255,255,0.08); color: #cbd5e1; }
.dark .pill-chip--brand   { background: rgba(74,222,128,0.15); color: #4ade80; }
.dark .pill-chip--emerald { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.dark .pill-chip--amber   { background: rgba(245,158,11,0.18); color: #fcd34d; }
.dark .pill-chip--rose    { background: rgba(244,63,94,0.18); color: #fda4af; }
.dark .pill-chip--violet  { background: rgba(139,92,246,0.18); color: #c4b5fd; }

.pill-chip--removable { cursor: pointer; }
.pill-chip--removable:hover { background: #d1e7dc; }
.dark .pill-chip--removable:hover { background: rgba(74,222,128,0.25); }

/* --- Salary highlight card (oferta — left-border accent) ---------------- */
.salary-highlight {
    border-radius: 0.75rem;
    background: #ffffff;
    border-left: 4px solid var(--brand-500, #2d8653);
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    padding: 1rem;
}
.dark .salary-highlight {
    background: rgba(255,255,255,0.04);
    border-left-color: var(--brand-400, #4ade80);
}
.salary-highlight__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-500, #2d8653);
    margin-bottom: 0.25rem;
}
.dark .salary-highlight__label { color: var(--brand-400, #4ade80); }
.salary-highlight__amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1f6e44;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.dark .salary-highlight__amount { color: #86efac; }

/* --- Soft promo cards (gradient hero blocks, CTA boxes) ----------------- */
.promo-soft {
    border-radius: 1rem;
    padding: 1.25rem;
    border: 1px solid;
    position: relative;
    overflow: hidden;
}
.promo-soft--brand {
    background: linear-gradient(135deg, #e8f5ee 0%, #d1fae5 100%);
    border-color: rgba(45,134,83,0.25);
}
.promo-soft--violet {
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 50%, #fdf4ff 100%);
    border-color: #ddd6fe;
}
.promo-soft--amber {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border-color: #fde68a;
}
.promo-soft--blue {
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
    border-color: #bfdbfe;
}
.dark .promo-soft--brand  { background: linear-gradient(135deg, rgba(45,134,83,0.18) 0%, rgba(16,185,129,0.10) 100%); border-color: rgba(74,222,128,0.30); }
.dark .promo-soft--violet { background: linear-gradient(135deg, rgba(139,92,246,0.20) 0%, rgba(15,23,42,1) 50%, rgba(236,72,153,0.18) 100%); border-color: rgba(139,92,246,0.40); }
.dark .promo-soft--amber  { background: linear-gradient(135deg, rgba(245,158,11,0.18) 0%, rgba(251,191,36,0.10) 100%); border-color: rgba(245,158,11,0.35); }
.dark .promo-soft--blue   { background: linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(99,102,241,0.12) 100%); border-color: rgba(59,130,246,0.35); }

/* --- Decorative blur blob (konsultantka card, hero corners) ------------- */
.deco-blob {
    position: absolute;
    width: 10rem;
    height: 10rem;
    border-radius: 9999px;
    filter: blur(2.5rem);
    pointer-events: none;
    opacity: 0.5;
}
.deco-blob--violet { background: linear-gradient(135deg, #c4b5fd 0%, #f0abfc 100%); }
.deco-blob--brand  { background: linear-gradient(135deg, #86efac 0%, #6ee7b7 100%); }
.deco-blob--amber  { background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%); }
.dark .deco-blob { opacity: 0.25; }

/* --- `.live-dot` USUNIĘTY (martwy kod) ----------------------------------
   Zasada globalna: ZERO live-indicatorów w całym ekosystemie .farm (żadnych
   pulsujących/migających kropek „na żywo", „dostępne teraz", „X osób online").
   Statusy pokazujemy statyczną kropką (`.pa-dot` w adminie) albo samym tekstem. */

/* --- Buttons -------------------------------------------------------------- */
.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--brand-500, #2d8653);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 20px rgba(45,134,83,0.25);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    text-decoration: none;
}
.btn-brand:hover { background: var(--brand-600, #236b44); box-shadow: 0 10px 26px rgba(45,134,83,0.32); }
.btn-brand:active { transform: translateY(1px); }

.btn-violet-grad {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(90deg, #7c3aed 0%, #d946ef 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.75rem;
    box-shadow: 0 6px 16px rgba(124,58,237,0.30);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    text-decoration: none;
}
.btn-violet-grad:hover {
    background: linear-gradient(90deg, #6d28d9 0%, #c026d3 100%);
    box-shadow: 0 10px 22px rgba(124,58,237,0.38);
}
.btn-violet-grad:active { transform: translateY(1px); }
.btn-violet-grad svg { transition: transform 0.15s ease; }
.btn-violet-grad:hover svg { transform: translateX(2px); }

.btn-ghost-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-500, #2d8653);
    text-decoration: none;
    transition: color 0.15s ease;
}
.btn-ghost-brand:hover { color: var(--brand-600, #236b44); text-decoration: underline; }
.dark .btn-ghost-brand { color: var(--brand-400, #4ade80); }

/* --- Sticky mobile apply bar (oferta) ----------------------------------- */
.sticky-apply-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
.dark .sticky-apply-bar {
    background: rgba(15,23,42,0.94);
    border-top-color: rgba(255,255,255,0.10);
}
@media (min-width: 1024px) { .sticky-apply-bar { display: none; } }

/* --- Soft alert (Wynagrodzenie: do uzgodnienia type) -------------------- */
.alert-soft {
    border-radius: 0.75rem;
    border: 1px solid;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
}
.alert-soft--amber { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.alert-soft--brand { background: #e8f5ee; border-color: #a7d4ba; color: #1f6e44; }
.alert-soft--rose  { background: #ffe4e6; border-color: #fecdd3; color: #9f1239; }
.alert-soft--blue  { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.dark .alert-soft--amber { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.35); color: #fcd34d; }
.dark .alert-soft--brand { background: rgba(45,134,83,0.18); border-color: rgba(74,222,128,0.30); color: #86efac; }
.dark .alert-soft--rose  { background: rgba(244,63,94,0.15); border-color: rgba(244,63,94,0.30); color: #fda4af; }
.dark .alert-soft--blue  { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.30); color: #93c5fd; }

/* --- Avatar stack (konsultantki — overlapping circles) ------------------ */
.avatar-stack { display: inline-flex; }
.avatar-stack > * + * { margin-left: -0.5rem; }
.avatar-stack-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    box-shadow: 0 0 0 2px #ffffff, 0 1px 2px rgba(15,23,42,0.10);
}
.dark .avatar-stack-item { box-shadow: 0 0 0 2px #0f172a, 0 1px 2px rgba(0,0,0,0.30); }

/* ── Brand-color opacity utilities (color-mix shim) ──────────────────────────
   Prebuilt Tailwind CDN nie ma /opacity wariantów dla custom koloru `brand`
   (brand zdef. jako hex var, nie kanały RGB) → np. `dark:bg-brand-900/30` nie
   działało, więc w dark mode element zostawał z jasnym `bg-brand-50` (zły kontrast,
   np. chipy „Aktywne filtry"). color-mix() odtwarza zamierzony półprzezroczysty
   tint per-portal (var(--brand-*)). style.css ładuje się PO tailwind-built.css →
   równa specyficzność, wygrywa kolejnością; w light `:is(.dark *)` nie matchuje. */
.bg-brand-900\/30 { background-color: color-mix(in srgb, var(--brand-900,#14532d) 30%, transparent); }
.hover\:bg-brand-900\/50:hover { background-color: color-mix(in srgb, var(--brand-900,#14532d) 50%, transparent); }
.dark\:bg-brand-900\/10:is(.dark *) { background-color: color-mix(in srgb, var(--brand-900,#14532d) 10%, transparent); }
.dark\:bg-brand-900\/15:is(.dark *) { background-color: color-mix(in srgb, var(--brand-900,#14532d) 15%, transparent); }
.dark\:bg-brand-900\/20:is(.dark *) { background-color: color-mix(in srgb, var(--brand-900,#14532d) 20%, transparent); }
.dark\:bg-brand-900\/30:is(.dark *) { background-color: color-mix(in srgb, var(--brand-900,#14532d) 30%, transparent); }
.dark\:bg-brand-900\/40:is(.dark *) { background-color: color-mix(in srgb, var(--brand-900,#14532d) 40%, transparent); }
.dark\:bg-brand-900\/90:is(.dark *) { background-color: color-mix(in srgb, var(--brand-900,#14532d) 90%, transparent); }
.dark\:hover\:bg-brand-900\/10:hover:is(.dark *) { background-color: color-mix(in srgb, var(--brand-900,#14532d) 10%, transparent); }
.dark\:hover\:bg-brand-900\/20:hover:is(.dark *) { background-color: color-mix(in srgb, var(--brand-900,#14532d) 20%, transparent); }
.dark\:hover\:bg-brand-900\/30:hover:is(.dark *) { background-color: color-mix(in srgb, var(--brand-900,#14532d) 30%, transparent); }
.dark\:hover\:bg-brand-900\/50:hover:is(.dark *) { background-color: color-mix(in srgb, var(--brand-900,#14532d) 50%, transparent); }
.bg-brand-50\/30 { background-color: color-mix(in srgb, var(--brand-50,#f0fdf4) 30%, transparent); }
.bg-brand-50\/40 { background-color: color-mix(in srgb, var(--brand-50,#f0fdf4) 40%, transparent); }
.bg-brand-50\/50 { background-color: color-mix(in srgb, var(--brand-50,#f0fdf4) 50%, transparent); }
.hover\:bg-brand-50\/40:hover { background-color: color-mix(in srgb, var(--brand-50,#f0fdf4) 40%, transparent); }
.hover\:bg-brand-50\/50:hover { background-color: color-mix(in srgb, var(--brand-50,#f0fdf4) 50%, transparent); }
.hover\:bg-brand-500\/5:hover { background-color: color-mix(in srgb, var(--brand-500,#2d8653) 5%, transparent); }

/* ── Stopka pod foldem — cały serwis ─────────────────────────────────────────
   Reguła produktowa: na pierwszym ekranie (bez scrolla) stopka NIGDY nie jest
   widoczna. Lepiej dużo wolnego białego miejsca niż stopka na powitanie.
   Layoutowy <main> (klasa .farm-shell-main, obecna w core + praca + newsy +
   szkolenia + leki) dostaje min-height = pełna wysokość ekranu, więc nawet przy
   krótkiej treści nav+main przepychają stopkę pod fold. Strona pozostaje
   scrollowalna → mobilny pull-to-refresh działa (żadnego overscroll:none na html). */
.farm-shell-main {
  min-height: 100vh;   /* fallback */
  min-height: 100dvh;  /* mobile: dynamiczny viewport (uwzględnia pasek URL) */
}

/* ── App-shell — formularze „jak aplikacja webowa" ───────────────────────────
   Strona ustawia $GLOBALS['app_shell']=true PRZED layout_start/ecosystem_layout_start.
   Skutki: <body class="farm-app"> (zamiast min-h-screen), stopka pominięta, strona
   nie-scrollowalna (height:100dvh + overflow:hidden). Treść scrolluje się WEWNĄTRZ
   <main>. Pull-to-refresh jest tu celowo nieaktywny (brak scrolla dokumentu) — to
   świadomy wybór dla ekranów app-shell; reszta serwisu zachowuje P2R. */
body.farm-app {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body.farm-app .farm-shell-main {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   „miejsce na banner" — placeholder USUNIĘTY (zgłoszenie: „wywal wszystkie
   miejsce na banner"). farm_ad_slot() nic nie renderuje; reguły .farm-banner-ph
   skasowane. Hook na realne kreacje: core/ads.php farm_ad_slot_html().
   ============================================================ */

/* ============================================================
   Miejsca reklamowe — placeholdery w stylu bannerów (core/ads.php)
   Gradient w barwach marki portalu + rozbłysk + tekstura + megafon.
   Białe treści — wygląd identyczny w light/dark (jak bannery).
   [DEPRECATED — farm_ad_slot() nic nie renderuje (placeholder usunięty); te
    reguły zostają na wypadek powrotu do kreacji promo.]
   ============================================================ */
.farm-ad {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  color: #fff;
}
.farm-ad__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 85% at 0% 0%, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 60%);
}
.farm-ad__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size: 13px 13px;
}
.farm-ad__art {
  position: absolute;
  right: -12px;
  bottom: -16px;
  width: 116px;
  height: 116px;
  opacity: 0.9;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
}
.farm-ad__body { position: relative; padding: 1.25rem 1.5rem; }
.farm-ad__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.6rem;
}
.farm-ad__dot { width: 0.35rem; height: 0.35rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.9); }
.farm-ad__title { display: block; font-weight: 800; font-size: 1.05rem; line-height: 1.3; }
.farm-ad__sub { display: block; margin-top: 0.35rem; font-size: 0.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.farm-ad__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  background: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transition: gap 0.2s ease;
}
.farm-ad__cta:hover { gap: 0.65rem; }

/* leaderboard — poziomy */
.farm-ad--leaderboard { min-height: 104px; }
.farm-ad--leaderboard .farm-ad__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.farm-ad--leaderboard .farm-ad__cta { margin-top: 0; flex-shrink: 0; }
@media (max-width: 639px) { .farm-ad--leaderboard .farm-ad__art { display: none; } }
@media (min-width: 640px) {
  .farm-ad--leaderboard .farm-ad__body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-right: 124px;
  }
  .farm-ad--leaderboard .farm-ad__pill { margin-bottom: 0.4rem; }
}

/* rectangle — prostokąt in-content */
.farm-ad--rectangle {
  min-height: 250px;
  max-width: 336px;
  margin-left: auto;
  margin-right: auto;
}
.farm-ad--rectangle .farm-ad__body { padding-right: 88px; }

/* sidebar — karta pionowa */
.farm-ad--sidebar { min-height: 280px; }
.farm-ad--sidebar .farm-ad__body { padding-right: 84px; }

/* ── Ujednolicone logo (pracodawca / sieć / apteka): squircle + CAŁE logo ──────────
   Współdzielona klasa dla WSZYSTKICH miniatur log w .farm. Zamień nią shape+fit na
   <img> loga (zostaw klasy rozmiaru w-/h- oraz border/shrink-0).
   - object-fit: contain → logo NIGDY nie przycięte (widać całość, nie center-crop);
   - białe tło → loga z przezroczystością/niekwadratowe siedzą na czystym kaflu (spójnie w dark mode);
   - border-radius 30% = „squircle" (miękki kwadrat — mieści więcej loga niż koło);
     radius (nie maska SVG) → działa też z border/cieniem, więc bezpieczne na każdej powierzchni. */
.logo-squircle {
  object-fit: contain;
  background-color: #fff;
  border-radius: 30%;
}

/* ── Faza A CRM-unification: wspólny system badge (admin-ui.php) ──────────────
   Ręczny CSS (poza purge Tailwinda), pary light/dark. SSOT kolorów statusów. */
.a-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1.25rem;white-space:nowrap}
.a-badge--positive{background:#dcfce7;color:#166534}
.a-badge--info{background:#d5e3ec;color:#1e40af}
.a-badge--warning{background:#fef9c3;color:#854d0e}
.a-badge--danger{background:#fee2e2;color:#991b1b}
.a-badge--neutral{background:#f1f5f9;color:#475569}
.a-badge--accent{background:#ede9fe;color:#6d28d9}
.dark .a-badge--positive{background:rgba(34,197,94,.16);color:#4ade80}
.dark .a-badge--info{background:rgba(59,130,246,.18);color:#93c5fd}
.dark .a-badge--warning{background:rgba(245,158,11,.18);color:#fbbf24}
.dark .a-badge--danger{background:rgba(239,68,68,.18);color:#f87171}
.dark .a-badge--neutral{background:rgba(148,163,184,.18);color:#cbd5e1}
.dark .a-badge--accent{background:rgba(139,92,246,.18);color:#c4b5fd}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN — REFRESH WIZUALNY (CROSS-PANEL, scoped: body.farm-admin)
   ───────────────────────────────────────────────────────────────────────────
   Jeden spójny, PŁASKI system komponentów admina dla WSZYSTKICH paneli
   (praca/asystent/newsy/leki/szkolenia), wyprowadzony ze wzorca praca /admin/scraper.php
   (struktura/gęstość/kod kolorów), bez glassmorphismu (flat surfaces).

   ZAKRES: reguły scope'owane do `body.farm-admin` (WSZYSTKIE panele admina), więc:
     • NIE dotykają publicznych serwisów ani paneli pracodawcy (globalne
       .card-static/.table/.btn/.badge poza adminem zostają bez zmian).
   PALETA MARKI PER-SERWIS: `--pa-brand`/`--pa-brand-ink` = `var(--brand-*)`, które core
   wstrzykuje per-serwis (green=praca, indigo=asystent, itd.) → akcent podąża za marką
   bez per-serwis bloków. Tokeny neutralne (card/ink/muted/hair/shadow) wspólne.
   Prefiks `body.farm-admin` daje specyficzność (0,2,x) — wygrywa z bazowymi
   `.dark .card-static`/`.dark .table` (0,2,0). Klasy .pa-* ADDYTYWNE (adopcja falami).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokeny (light) ─────────────────────────────────────────────────────── */
body.farm-admin {
  --pa-card-bg:      #ffffff;
  --pa-card-border:  #e6eaf1;
  --pa-card-border2: #d6dce8;   /* mocniejsze obramowanie (hover / wyróżnienie) */
  --pa-radius:       14px;
  --pa-radius-sm:    10px;
  --pa-shadow:       0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.03);
  --pa-shadow-hover: 0 4px 16px rgba(16,24,40,.08);
  --pa-ink:          #0a324a;   /* tekst główny (navy) */
  --pa-muted:        #5b6b82;   /* tekst drugorzędny */
  --pa-faint:        #8a97ab;   /* etykiety/hinty */
  --pa-brand:        var(--brand-500);   /* per-serwis: green(praca)/indigo(asystent)/… */
  --pa-brand-ink:    var(--brand-700);
  --pa-hover:        #f6f8fb;   /* powierzchnia hover (wiersz) */
  --pa-head-bg:      #f7f9fc;   /* nagłówek tabeli / subnagłówek */
  --pa-hair:         #eef1f6;   /* cienka linia (wiersze) */
}
.dark body.farm-admin {
  --pa-card-bg:      #1e293b;
  --pa-card-border:  #334155;
  --pa-card-border2: #475569;
  --pa-shadow:       0 1px 2px rgba(0,0,0,.30);
  --pa-shadow-hover: 0 4px 16px rgba(0,0,0,.40);
  --pa-ink:          #e2e8f0;
  --pa-muted:        #a3b1c6;
  --pa-faint:        #7c8aa0;
  --pa-brand:        var(--brand-400);   /* per-serwis (dark): jaśniejszy odcień marki */
  --pa-brand-ink:    var(--brand-400);
  --pa-hover:        rgba(255,255,255,.04);
  --pa-head-bg:      rgba(255,255,255,.03);
  --pa-hair:         rgba(255,255,255,.07);
}

/* ── Karty — flat, bez glassu (nadpisuje .card / .card-static) ──────────── */
body.farm-admin .card,
body.farm-admin .card-static {
  background: var(--pa-card-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--pa-card-border);
  border-radius: var(--pa-radius);
  box-shadow: var(--pa-shadow);
  transition: box-shadow .15s ease, border-color .15s ease;
}
/* Zabij „unoszenie" (translateY) — na narzędziu roboczym to szum, nie ozdoba. */
body.farm-admin .card:hover {
  transform: none;
  box-shadow: var(--pa-shadow-hover);
  border-color: var(--pa-card-border2);
}

/* ── Tabele — flat, spójna gęstość, czytelny nagłówek ──────────────────── */
body.farm-admin .table {
  background: var(--pa-card-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--pa-card-border);
  border-radius: var(--pa-radius);
}
body.farm-admin .table th {
  background: var(--pa-head-bg);
  color: var(--pa-muted);
  border-bottom: 1px solid var(--pa-card-border);
  font-size: .6875rem;         /* 11px */
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  padding: .6rem 1rem;
}
body.farm-admin .table td {
  color: var(--pa-ink);
  border-bottom: 1px solid var(--pa-hair);
  padding: .625rem 1rem;
  vertical-align: middle;
}
body.farm-admin .table tbody tr:last-child td { border-bottom: none; }
body.farm-admin .table tbody tr:hover { background: var(--pa-hover); }
body.farm-admin .table td a { color: var(--pa-brand); }

/* ── Stat cards / panel header / empty state — flat + spójna typografia ── */
body.farm-admin .stat-card {
  background: var(--pa-card-bg);
  border: 1px solid var(--pa-card-border);
  border-radius: var(--pa-radius);
  box-shadow: var(--pa-shadow);
}
body.farm-admin .stat-card__value { color: var(--pa-ink); }
body.farm-admin .stat-card__label { color: var(--pa-muted); }

body.farm-admin .panel__header { margin-bottom: 1.25rem; }
body.farm-admin .panel__header h1 { color: var(--pa-ink); font-size: 1.5rem; letter-spacing: -.01em; }
body.farm-admin .panel__section h2 { color: var(--pa-ink); }

body.farm-admin .empty-state {
  background: var(--pa-card-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--pa-card-border);
  border-radius: var(--pa-radius);
  box-shadow: var(--pa-shadow);
}

/* ── Przyciski — spójny flat, focus a11y, stan disabled, wariant danger ─── */
body.farm-admin .btn { border-radius: var(--pa-radius-sm); }
body.farm-admin .btn:focus-visible {
  outline: 2px solid var(--pa-brand);
  outline-offset: 2px;
}
body.farm-admin .btn:disabled,
body.farm-admin .btn[disabled],
body.farm-admin .btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
/* Wariant destrukcyjny (NOWA klasa, addytywna) — czerwony, wyraźnie oddzielony. */
.btn--danger { background: #dc2626; color: #fff; }
.btn--danger:hover { background: #b91c1c; }
.dark .btn--danger { background: #ef4444; }
.dark .btn--danger:hover { background: #dc2626; }
/* Wariant neutralny/secondary (NOWA klasa) — jasne tło, do akcji drugorzędnych. */
.btn--secondary { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }
.btn--secondary:hover { background: #e2e8f0; }
.dark .btn--secondary { background: rgba(255,255,255,.08); color: #cbd5e1; border-color: rgba(255,255,255,.12); }
.dark .btn--secondary:hover { background: rgba(255,255,255,.14); }

/* ── Pola formularza — spójny focus (brand) i promień ──────────────────── */
body.farm-admin .form-input,
body.farm-admin .form__input,
body.farm-admin .form__select,
body.farm-admin .form__textarea { border-radius: var(--pa-radius-sm); }

/* ═══ Komponenty .pa-* (addytywne — do adopcji w falach) ═════════════════ */

/* Sekcja: karta z nagłówkiem (tytuł + opcjonalny opis + akcje po prawej).
   Wariant tonu przez modyfikator paska akcentu: .pa-section--info/-warn/-danger/-accent. */
body.farm-admin .pa-section {
  background: var(--pa-card-bg);
  border: 1px solid var(--pa-card-border);
  border-radius: var(--pa-radius);
  box-shadow: var(--pa-shadow);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
body.farm-admin .pa-section__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .875rem 1.1rem;
  border-bottom: 1px solid var(--pa-hair);
}
body.farm-admin .pa-section__title {
  font-size: .95rem; font-weight: 700; color: var(--pa-ink); margin: 0;
  display: flex; align-items: center; gap: .5rem;
}
body.farm-admin .pa-section__desc { font-size: .8rem; color: var(--pa-muted); margin: .15rem 0 0; }
body.farm-admin .pa-section__body { padding: 1.1rem; }
/* Pasek akcentu po lewej — kod koloru sekcji (spójny z semantyką badge'y). */
body.farm-admin .pa-section--info   { border-left: 3px solid #3b82f6; }
body.farm-admin .pa-section--success{ border-left: 3px solid #22c55e; }
body.farm-admin .pa-section--warn   { border-left: 3px solid #f59e0b; }
body.farm-admin .pa-section--danger { border-left: 3px solid #ef4444; }
body.farm-admin .pa-section--accent { border-left: 3px solid #8b5cf6; }

/* Toolbar: rząd akcji/filtrów nad treścią. */
body.farm-admin .pa-toolbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
body.farm-admin .pa-toolbar__spacer { flex: 1 1 auto; }

/* Kropka statusu (semantyczna, z etykietą tekstową obok — NIE tylko kolor). */
body.farm-admin .pa-dot {
  display: inline-block; width: .625rem; height: .625rem; border-radius: 9999px;
  background: #94a3b8; flex: none;
}
body.farm-admin .pa-dot--on   { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
body.farm-admin .pa-dot--off  { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
body.farm-admin .pa-dot--warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }

/* Zakładki lokalne (pod-nawigacja strony) — spójny styl podkreślenia. */
body.farm-admin .pa-tabs {
  display: flex; gap: .25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--pa-card-border);
  margin-bottom: 1.25rem;
}
body.farm-admin .pa-tab {
  padding: .55rem 1rem; font-size: .875rem; font-weight: 500;
  color: var(--pa-muted); text-decoration: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .15s, border-color .15s;
}
body.farm-admin .pa-tab:hover { color: var(--pa-ink); }
body.farm-admin .pa-tab--active { color: var(--pa-brand); border-bottom-color: var(--pa-brand); }

/* Skeleton (stan ładowania). */
body.farm-admin .pa-skeleton {
  border-radius: var(--pa-radius-sm);
  background: linear-gradient(90deg, var(--pa-hair) 25%, var(--pa-head-bg) 37%, var(--pa-hair) 63%);
  background-size: 400% 100%;
  animation: pa-shimmer 1.4s ease infinite;
}
@keyframes pa-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { body.farm-admin .pa-skeleton { animation: none; } }

/* a11y: wyraźny focus na klikalnych wierszach tabeli (gdy dostaną tabindex). */
body.farm-admin .table tbody tr[data-href]:focus-visible {
  outline: 2px solid var(--pa-brand); outline-offset: -2px;
}
/* Mobile: długie stringi kodu/URL zawijają się zamiast wypychać stronę w poziomie. */
body.farm-admin code { overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
/* koniec PRACA ADMIN — REFRESH WIZUALNY */

/* ── Końcówka „.farm" w wordmarku serwisu ──────────────────────────────────
   Kolor marki bierze się z ECOSYSTEM_SERVICES i trafia do atrybutu `style`, więc
   nie da się go przełączyć wariantem `dark:`. Przy 11 px obowiązuje próg AA 4,5:1,
   a same kolory marki go nie trzymają: szkolenia 3,56:1 i rynek 3,68:1 na bieli,
   praca 3,93:1 i leki 3,43:1 na ciemnym tle. Stąd para zmiennych z pól
   `color_text` / `color_text_dark` — marka (`color`) zostaje nietknięta dla ikon,
   teł i dużych znaków. */
.farm-wm { color: var(--wm); }
.dark .farm-wm { color: var(--wm-dark); }

/* ── Wyspy „treść z innego portalu .farm" (core/portal-island.php) ──────────
   Bloki obcych serwisów na praca.farm (newsy, leki) to JEDEN system, nie dwa
   niezależne moduły. Wspólne są: rytm odstępów, konstrukcja nagłówka (nadlinia
   z oznaczeniem serwisu → tytuł-pytanie → jedno zdanie korzyści → przycisk CTA),
   promienie, obramowania i styl kart. Różni je WYŁĄCZNIE `--xp` (kolor marki)
   i treść — dzięki temu czytają się jak rodzeństwo, a przynależność treści widać
   przed przeczytaniem tytułu.

   Wysokości celowo NIE zrównujemy: wyspa newsów niesie karty artykułów, leków —
   pole wyszukiwania i trzy działania. Ma je łączyć rytm, nie linijka.

   Klasy własne, nie utilities: tailwind-built.css jest PREBUDOWANY i nie zawiera
   `aspect-[16/9]`, `lg:flex-1` ani `bg-black/30`; nową klasę Tailwinda sprawdzaj
   `grep -F` w arkuszu, zanim jej użyjesz. */
.farm-island {
  --xp: #dc2626; --xp-dark: #f87171; --xp-tint: 10%;
  --xp-radius: 1.25rem;
  --xp-card-radius: 0.875rem;
  --xp-gap: 0.75rem;
  border-radius: var(--xp-radius);
  padding: 1.125rem;
  background: color-mix(in srgb, var(--xp) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--xp) 20%, transparent);
}
@media (min-width: 768px) { .farm-island { padding: 1.5rem; } }
/* Czerwień jest optycznie „głośniejsza" od zieleni i błękitu — na ciemnym tle ta
   sama domieszka robiła bordową plamę, stąd niższy --xp-tint dla newsów. */
.farm-island--newsy { --xp: #dc2626; --xp-dark: #f87171; --xp-tint: 6%; }
.farm-island--leki  { --xp: #0f4769; --xp-dark: #4a83a8; --xp-tint: 8%; }
.farm-island--praca { --xp: #2d8653; --xp-dark: #4ade80; }
/* Ciemny: wyspa MUSI być ciemniejsza od kart, inaczej panel i karty zlewają się
   w jedną plamę i kolor w ogóle nie czyta się jako wydzielony blok. */
.dark .farm-island {
  background: color-mix(in srgb, var(--xp) var(--xp-tint), #0f172a);
  border-color: color-mix(in srgb, var(--xp) 32%, transparent);
}

/* ── Nagłówek wyspy ──────────────────────────────────────────────────────────
   Layout siedzi TUTAJ, nie w utilities: `basis-64` nie ma w prebudowanym arkuszu,
   więc grupa tytułu jechała na flex-basis 0 i na telefonie ściskała się do ~140 px
   (tytuł łamany na trzy linie). */
.farm-island__head {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 0.875rem 1.5rem; margin-bottom: 1.125rem;
}
.farm-island__intro { flex: 1 1 18rem; min-width: 0; }

/* Nadlinia = oznaczenie serwisu („NEWSY.FARM · DLA FARMACEUTY"). Zastąpiła plakietkę
   doklejaną w środku zdania podtytułu: źródło treści ma stać NAD tytułem, bo o nim
   informuje, a nie doprecyzowywać opis. */
.farm-island__kicker {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.6875rem; font-weight: 700; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: color-mix(in srgb, var(--xp) 88%, #0f172a);
  margin: 0 0 0.5rem;
}
.dark .farm-island__kicker { color: var(--xp-dark); }

.farm-island__icon {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--xp) 15%, transparent);
  color: color-mix(in srgb, var(--xp) 88%, #0f172a);
}
.dark .farm-island__icon {
  background: color-mix(in srgb, var(--xp) 22%, transparent);
  color: var(--xp-dark);
}
.farm-island__icon svg { width: 1rem; height: 1rem; }

.farm-island__title {
  font-size: 1.25rem; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.015em; color: #0f2942; margin: 0;
  text-wrap: balance;
}
.dark .farm-island__title { color: #fff; }
@media (min-width: 768px) { .farm-island__title { font-size: 1.5rem; } }

.farm-island__lede {
  font-size: 0.875rem; line-height: 1.5; color: #64748b;
  margin: 0.375rem 0 0; max-width: 46ch;
}
.dark .farm-island__lede { color: #94a3b8; }

/* CTA obu wysp jest tym samym przyciskiem — wcześniej był gołym linkiem i przy
   dwóch blokach obok siebie czytał się jak dwa różne wzorce. Na telefonie rozciąga
   się na pełną szerokość, żeby zostać widocznym celem dotyku (44 px wysokości). */
.farm-island__cta {
  flex: 0 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: 2.75rem; padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem; font-weight: 600; line-height: 1.3;
  color: color-mix(in srgb, var(--xp) 92%, #0f172a);
  background: color-mix(in srgb, var(--xp) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--xp) 30%, transparent);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.farm-island__cta:hover { background: color-mix(in srgb, var(--xp) 18%, #fff); border-color: color-mix(in srgb, var(--xp) 45%, transparent); }
.dark .farm-island__cta {
  color: var(--xp-dark);
  background: color-mix(in srgb, var(--xp) 18%, transparent);
  border-color: color-mix(in srgb, var(--xp) 40%, transparent);
}
.dark .farm-island__cta:hover { background: color-mix(in srgb, var(--xp) 28%, transparent); }
/* Na telefonie CTA schodzi do własnego wiersza (flex-wrap), ale NIE rozciąga się
   na pełną szerokość: pełnowymiarowy przycisk nad polem wyszukiwania przejmował
   pierwszeństwo nad czynnością, po którą wyspa w ogóle istnieje. Wysokość zostaje
   44 px, więc cel dotyku się nie kurczy. */
@media (max-width: 639px) { .farm-island__cta { flex: 0 0 auto; } }

/* Fokus: obrys w kolorze marki na KAŻDYM elemencie interaktywnym wyspy. Domyślny
   obrys przeglądarki ginął na ciemnym tle wyspy, a nawigacja klawiaturą przez
   cztery karty i formularz musi być widoczna. */
.farm-island a:focus-visible,
.farm-island button:focus-visible,
.farm-island input:focus-visible {
  outline: 2px solid var(--xp);
  outline-offset: 2px;
  border-radius: 0.5rem;
}
.dark .farm-island a:focus-visible,
.dark .farm-island button:focus-visible,
.dark .farm-island input:focus-visible { outline-color: var(--xp-dark); }

/* Etykieta tematu na małej karcie (archetyp newsa). Kolor może przyjść z zewnątrz
   przez --meta/--meta-dark (archetypy newsów mają własną paletę); bez nich schodzi
   na kolor marki wyspy. Pary jasny/ciemny, bo koloru z atrybutu `style` nie da się
   przełączyć wariantem `dark:`. */
.farm-island__meta {
  display: block;
  font-size: 0.6875rem; font-weight: 600; line-height: 1.4;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--meta, color-mix(in srgb, var(--xp) 85%, #0f172a));
}
.dark .farm-island__meta { color: var(--meta-dark, var(--xp-dark)); }

/* ── Wyspa newsów: jedna karta wyróżniona + trzy w kolumnie ───────────────────
   Cztery pozycje, nie pięć: blok ma być SELEKCJĄ. Kadr dużej karty trzyma 16/9
   na każdej szerokości — wcześniej od `lg` rozciągał się do wysokości sąsiedniej
   kolumny i to on decydował o wysokości całej wyspy, przez co sekcja newsów
   przerastała listę ofert, obok której stoi. */
.farm-island-news { display: grid; grid-template-columns: 1fr; gap: var(--xp-gap); }
/* Dwie kolumny już od tabletu (768 px), nie dopiero od 1024. W jednej kolumnie kadr
   16/9 dużej karty rozciągał się na całą szerokość i sama wyspa robiła na tablecie
   ponad 1000 px — ekran treści z innego portalu ponad sekcją ofert. */
@media (min-width: 768px) {
  .farm-island-news { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; }
}

.farm-island-news__lead {
  display: flex; flex-direction: column;
  border-radius: var(--xp-card-radius); overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.farm-island-news__lead:hover { box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .35); }

.farm-island-news__media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;   /* rezerwuje proporcje → zero CLS przy dojeżdżającym obrazie */
}
/* Telefon: kadr niższy niż 16/9. Zdjęcie nie ma zjadać ekranu przed tytułem —
   pierwszy ekran ma nieść treść, nie ilustrację. */
@media (max-width: 639px) { .farm-island-news__media { aspect-ratio: 2 / 1; } }
.farm-island-news__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.farm-island-news__tag, .farm-island-news__flag {
  position: absolute; top: 0.625rem; z-index: 1;
  font-size: 0.6875rem; line-height: 1.4;
  padding: 0.2rem 0.5rem; border-radius: 0.375rem; color: #fff;
}
.farm-island-news__tag {
  left: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(0, 0, 0, .42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* „Ważne" niesie TEKST, nie sam kolor — informacja o randze nie może zależeć od
   tego, czy ktoś odróżnia czerwień od tła. */
.farm-island-news__flag { right: 0.625rem; font-weight: 700; background: #b91c1c; }

.farm-island-news__body { padding: 0.75rem 0.875rem 0.875rem; }
.farm-island-news__h {
  font-size: 0.875rem; font-weight: 600; line-height: 1.35; margin: 0;
  color: #0f2942;
  /* `anywhere` chroni layout przed nazwą substancji bez spacji na 40 znaków. */
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.dark .farm-island-news__h { color: #fff; }
.farm-island-news__h--lead { font-size: 1rem; font-weight: 700; }
@media (min-width: 768px) { .farm-island-news__h--lead { font-size: 1.0625rem; } }

.farm-island-news__excerpt {
  margin: 0.375rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: #64748b;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.dark .farm-island-news__excerpt { color: #94a3b8; }

.farm-island-news__when {
  display: block; margin: 0.5rem 0 0;
  font-size: 0.75rem; line-height: 1.3; color: #94a3b8;
}
.dark .farm-island-news__when { color: #94a3b8; }

.farm-island-news__list { display: grid; gap: var(--xp-gap); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .farm-island-news__list { grid-template-rows: repeat(3, 1fr); } }
/* Telefon: karta wyróżniona + DWIE. Trzecia nie znika z powodu braku miejsca —
   znika, bo blok ozdobny nie ma prawa zająć dwóch ekranów przewijania nad
   ofertami, po które ktoś tu przyszedł. */
@media (max-width: 767px) { .farm-island-news__list > li:nth-child(n+3) { display: none; } }

.farm-island-news__item {
  display: flex; gap: 0.75rem; align-items: stretch;
  height: 100%; padding: 0.625rem;
  border-radius: var(--xp-card-radius);
  transition: box-shadow .15s ease;
}
.farm-island-news__item:hover { box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .35); }

/* Miniatura ciągnie się na WYSOKOŚĆ karty, a nie trzyma kwadrat 72 px. Karty w tej
   kolumnie mają równe wiersze (1fr), żeby zrównać się z dużą kartą obok — przy stałym
   kwadracie zostawał pod spodem pas pustki i kolumna wyglądała na niedokończoną. */
.farm-island-news__thumb {
  position: relative; flex: none; align-self: stretch;
  width: 4.5rem; min-height: 4.5rem;
  border-radius: 0.625rem; overflow: hidden;
}
.farm-island-news__itembody { min-width: 0; display: block; align-self: center; }
.farm-island-news__itembody .farm-island-news__h { margin-top: 0.125rem; }

/* ── Wyspa leków: wyszukiwarka → trzy działania → wiersz katalogów ────────────
   Pole wyszukiwania stoi pierwsze, bo to jedyna czynność, którą farmaceuta
   wykonuje odruchowo. Sześć równorzędnych kafli (stan do 2026-08-12) opisywało
   serwis; to ma pozwolić coś zrobić. */
.farm-island-search {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: var(--xp-gap);
}
.farm-island-search__field { position: relative; flex: 1 1 16rem; min-width: 0; display: block; }
.farm-island-search__icon {
  position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%);
  width: 1.0625rem; height: 1.0625rem; color: #94a3b8; pointer-events: none;
}
.farm-island-search__input {
  width: 100%; min-height: 2.75rem;              /* 44 px = wygodny cel dotyku */
  padding: 0.5rem 0.875rem 0.5rem 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0; background: #fff; color: #0f2942;
  font-size: 0.9375rem; line-height: 1.4;
  /* 16 px na telefonie: iOS zoomuje stronę przy fokusie w pole mniejsze niż 16 px
     i użytkownik zostaje z przybliżonym, przesuniętym layoutem. */
  transition: border-color .15s ease, box-shadow .15s ease;
}
@media (max-width: 639px) { .farm-island-search__input { font-size: 1rem; } }
.farm-island-search__input::placeholder { color: #94a3b8; }
.farm-island-search__input:hover { border-color: color-mix(in srgb, var(--xp) 40%, #e2e8f0); }
.dark .farm-island-search__input {
  background: rgba(15, 23, 42, .6); border-color: rgba(148, 163, 184, .3); color: #fff;
}
/* Krzyżyk czyszczenia w Chrome/Safari jest czarny — na ciemnym tle znika. */
.dark .farm-island-search__input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }

.farm-island-search__submit {
  flex: 0 0 auto; min-height: 2.75rem; padding: 0.5rem 1.25rem;
  border-radius: 0.75rem; border: 1px solid transparent;
  background: var(--xp); color: #fff;
  font-size: 0.875rem; font-weight: 600; line-height: 1.3;
  cursor: pointer;
  transition: filter .15s ease;
}
.farm-island-search__submit:hover { filter: brightness(1.08); }

.farm-island-search__scan {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.4375rem;
  min-height: 2.75rem; padding: 0.5rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--xp) 28%, transparent);
  background: color-mix(in srgb, var(--xp) 8%, #fff);
  color: color-mix(in srgb, var(--xp) 92%, #0f172a);
  font-size: 0.875rem; font-weight: 600; line-height: 1.3;
  transition: background-color .15s ease;
}
.farm-island-search__scan svg { width: 1.0625rem; height: 1.0625rem; flex: none; }
.farm-island-search__scan:hover { background: color-mix(in srgb, var(--xp) 16%, #fff); }
.dark .farm-island-search__scan {
  background: color-mix(in srgb, var(--xp) 16%, transparent);
  border-color: color-mix(in srgb, var(--xp) 38%, transparent);
  color: var(--xp-dark);
}
.dark .farm-island-search__scan:hover { background: color-mix(in srgb, var(--xp) 26%, transparent); }

.farm-island-acts { display: grid; gap: var(--xp-gap); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .farm-island-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.farm-island-act {
  display: flex; align-items: center; gap: 0.75rem;
  height: 100%; padding: 0.75rem;
  border-radius: var(--xp-card-radius);
  transition: box-shadow .15s ease;
}
.farm-island-act:hover { box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .35); }
.farm-island-act__label {
  display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: #0f2942;
}
.dark .farm-island-act__label { color: #fff; }
.farm-island-act__desc {
  display: block; margin-top: 0.125rem;
  font-size: 0.75rem; line-height: 1.4; color: #64748b;
}
.dark .farm-island-act__desc { color: #94a3b8; }
.farm-island-act__arrow {
  width: 1rem; height: 1rem; flex: none; margin-left: auto;
  color: color-mix(in srgb, var(--xp) 70%, #94a3b8);
  transition: transform .15s ease;
}
.farm-island-act:hover .farm-island-act__arrow { transform: translateX(2px); }

/* Kafel działania i miniatura modułu dzielą pastylkę z piktogramem — jeden rysunek,
   jedno miejsce w arkuszu. */
.farm-island-tool__icon {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.625rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--xp) 12%, transparent);
  color: color-mix(in srgb, var(--xp) 85%, #0f172a);
}
.dark .farm-island-tool__icon {
  background: color-mix(in srgb, var(--xp) 20%, transparent);
  color: var(--xp-dark);
}
.farm-island-tool__icon svg { width: 1.25rem; height: 1.25rem; }

/* Katalogi (A–Z, substancje, ATC) NIE konkurują z działaniami: jeden wiersz tekstu
   pod spodem zamiast trzech kolejnych kafli. Licznik dosuwa się do prawej na
   szerokim ekranie, na telefonie ląduje w nowej linii. */
.farm-island-browse {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem;
  margin: var(--xp-gap) 0 0;
  font-size: 0.8125rem; line-height: 1.5; color: #64748b;
}
.dark .farm-island-browse { color: #94a3b8; }
.farm-island-browse__label { font-weight: 600; }
/* Pionowy padding na elemencie INLINE powiększa pole trafienia, nie ruszając układu
   wiersza — link w zdaniu miał 16 px wysokości, czyli cel na granicy trafialności
   kciukiem. Wiersz zostaje wizualnie taki sam, palec dostaje 30 px. */
.farm-island-browse__link {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  padding-block: 0.4375rem;
}
.farm-island-browse__link:hover { color: color-mix(in srgb, var(--xp) 92%, #0f172a); }
.dark .farm-island-browse__link:hover { color: var(--xp-dark); }
.farm-island-browse__item { display: inline; }
.farm-island-browse__sep { opacity: .5; margin-left: 0.4375rem; }
.farm-island-browse__count { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { .farm-island-browse__count { margin-left: 0; flex: 1 1 100%; } }

/* Ruch jest tu dekoracją (cień, przesunięcie strzałki), więc znika w całości,
   gdy system prosi o mniej animacji. */
@media (prefers-reduced-motion: reduce) {
  .farm-island *, .farm-island *::before, .farm-island *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .farm-island-act:hover .farm-island-act__arrow { transform: none; }
}