/* ==========================================================================
   Flekni - Custom Styles
   Brand Colors:
     Primary:   #4fde5c  (green)
     Text:      #1a1a1a  (near black)
     Surface:   #f9f9f9  (page canvas, inputs, secondary badges/buttons, nested surfaces)
     White:     #ffffff  (cards, panels, modals, dropdowns, raised surfaces)
   ========================================================================== */

/* ---------- Bootstrap variable overrides ---------- */
:root {
  --bs-primary: #4fde5c;
  --bs-primary-rgb: 79, 222, 92;
  --bs-success-rgb: 79, 222, 92;
  --bs-secondary: #1a1a1a;
  --bs-secondary-rgb: 26, 26, 26;
  /* Muted/secondary TEXT + .form-text čtou --bs-secondary-color → nastavením
     tady renderují klasickou šedou #6c757d nativně (bez našich !important override). */
  --bs-secondary-color: #6c757d;
  /* .text-dark / .bg-dark → brand black #1a1a1a nativně (default #212529 je
     opticky totožný, tohle je konzistentnější s body-color). */
  --bs-dark-rgb: 26, 26, 26;
  --bs-light: #f9f9f9;
  --bs-light-rgb: 249, 249, 249;
  --bs-body-bg: #f9f9f9;
  --bs-body-color: #1a1a1a;
  --bs-body-font-family: "Helvetica", Arial, sans-serif;
  --bs-link-color: #4fde5c;
  --bs-link-hover-color: #1a1a1a;
  --flekni-surface: #f9f9f9;
  --flekni-text: #1a1a1a;
  --flekni-subtle: #6c757d;

  /* ---- Flekni design tokeny (V2.3) ---- */
  --flekni-panel: #ffffff;         /* karty / panely / zdvižené plochy */
  --flekni-border: #e6e8ec;        /* jemná hrana */
  --flekni-brand: #4fde5c;         /* brand zelená (fill) */
  --flekni-brand-ink: #147a1e;     /* tmavší zeleň pro text/ikony na bílé */
  /* Radiusy — jedna škála pro celý web */
  --radius-sm: 10px;               /* inputy, malé prvky */
  --radius-md: 14px;               /* textarea, vnořené karty, tipy */
  --radius-lg: 18px;               /* hlavní karty, panely */
  --radius-pill: 9999px;           /* tlačítka, badge, chips (brand identita) */
  /* Vstupní pole — jeden token, ať se dá pill/rounded přepnout na jednom místě */
  --radius-input: var(--radius-sm);
}

/* ---------- Global ---------- */
body {
  font-family: "Helvetica", Arial, sans-serif;
  background-color: #f9f9f9;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

a {
  color: #4fde5c;
}

a:hover {
  color: #1a1a1a;
}

/* ---------- Buttons ---------- */
.btn-primary {
  --bs-btn-bg: #4fde5c;
  --bs-btn-border-color: #4fde5c;
  --bs-btn-hover-bg: #4fde5c;
  --bs-btn-hover-border-color: #4fde5c;
  --bs-btn-color: #1a1a1a;
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-active-bg: #4fde5c;
  --bs-btn-active-border-color: #4fde5c;
  --bs-btn-active-color: #1a1a1a;
  font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-bg: #f9f9f9;
  --bs-btn-color: #1a1a1a;
  --bs-btn-border-color: #f9f9f9;
  --bs-btn-hover-bg: #4fde5c;
  --bs-btn-hover-border-color: #4fde5c;
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-active-bg: #4fde5c;
  --bs-btn-active-color: #1a1a1a;
}

/* .text-primary / .bg-primary renderují brand zelenou automaticky přes
   --bs-primary-rgb (:root) — žádný override netřeba. */

/* ---------- Navbar ---------- */
.navbar {
  background-color: #fff;
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.05em;
  color: #4fde5c;
}

.navbar-brand:hover {
  color: #4fde5c;
}

.nav-link {
  color: #1a1a1a;
  font-weight: 500;
}

.nav-link:hover {
  color: #4fde5c;
}

/* ---------- Cards ---------- */
.card {
  border: none;
  border-radius: var(--radius-lg);
  background-color: var(--flekni-panel);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.1));
}

/* ---------- Footer (dark green) ---------- */
footer {
  position: relative;
  background: radial-gradient(130% 140% at 70% 20%, #235c3c 0%, #163f29 50%, #0e2c1d 100%);
  color: #ffffff;
}

.footer-logo:hover img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.footer-logo img {
  transition: filter 0.3s ease;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.65;
}

/* Footer columns / vertical dividers */
@media (min-width: 992px) {
  .footer-col-divider {
    position: relative;
    padding-left: 2.25rem;
  }
  .footer-col-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.14);
  }
}

/* Footer headings */
.footer-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1.4rem;
}

/* Footer links with circular arrow icon */
.footer-links li {
  margin-bottom: 0.9rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  transition: color 0.2s ease;
}

.footer-links a i {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-links a:hover {
  color: #4fde5c;
}

.footer-links a:hover i {
  color: #4fde5c;
  transform: translateX(2px);
}

/* Footer contact */
.footer-contact-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.6rem;
}

.footer-contact-head i {
  font-size: 1.15rem;
  color: #ffffff;
}

.footer-email {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.95rem;
  display: inline-block;
  margin-bottom: 1.75rem;
  transition: color 0.2s ease;
}

.footer-email:hover {
  color: #4fde5c;
}

.footer-legal {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.8rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* Footer bottom bar */
.footer-bottom {
  background-color: rgba(0, 0, 0, 0.22);
  padding: 1rem 0;
}

.footer-copy {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8125rem;
}

/* Interní vstup do CRM — nenápadný odkaz úplně dole v patičce. */
.footer-crm-link {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.75rem;
  text-decoration: none;
}
.footer-crm-link:hover {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}

.footer-version {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

/* ---------- SEO landing pages (/prace/) ---------- */
.landing-hero {
  background: radial-gradient(120% 120% at 50% 18%, #235c3c 0%, #163f29 50%, #0e2c1d 100%);
  color: #ffffff;
  padding: 3.5rem 0 3rem;
  position: relative;
  overflow: hidden;
}

.landing-cat-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.landing-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.5rem 1.25rem rgba(14, 44, 29, 0.12);
  border-color: #4fde5c;
}

.landing-cat-card:hover .landing-cat-title {
  color: #235c3c;
}

.landing-cat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eafbe7;
  color: #235c3c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.landing-cat-title {
  /* Base tmavá barva jako CSS pravidlo (ne .link-dark utilita v markupu),
     takže hover #235c3c vyhraje specificitou bez !important. */
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wrap varianta pro víceslovné nadpisy (kalkulačky) — stejná hover barva,
   ale bez oříznutí na jeden řádek. */
.landing-cat-title--wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.landing-breadcrumb .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.landing-breadcrumb .breadcrumb-item.active,
.landing-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.55);
}

/* Badge na tmavém hero landing/mzdy stránek — „glass" pilulka.
   (.hero-tag z homepage nemá vlastní padding, tady potřebujeme samostatný styl) */
.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

.landing-badge .bi {
  color: #4fde5c;
  font-size: 1.05rem;
}

a.landing-badge {
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

a.landing-badge:hover {
  background: rgba(79, 222, 92, 0.18);
  border-color: #4fde5c;
  color: #ffffff;
}

/* ---------- Mzdové statistiky (/mzdy/) ---------- */
.accent-green-dark { color: #235c3c; }

.salary-table td, .salary-table th {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* Odlišená hlavička (tabulka jinak prosvítá bílou kartou) — jemná šedozelená
   výplň + tlumený popisek, aby řádky nesplývaly s hlavičkou. */
.salary-table thead th {
  background: #eef4f0;
  color: #5c6b62;
  font-weight: 600;
  border-bottom: 1px solid #dbe4dd;
}

.salary-table td {
  border-color: #eef1ef;
}

.salary-table tbody tr {
  transition: background 0.1s ease;
}

.salary-table tbody tr:hover {
  background: #f3fbf1;
}

.salary-table a {
  color: #1a1a1a;
  font-weight: 600;
  text-decoration: none;
}

.salary-table a:hover {
  color: #235c3c;
}

.salary-table .salary-median {
  color: #235c3c;
  font-weight: 700;
}

.salary-filter-input {
  max-width: 280px;
}

/* Profesní průvodce — pruhy požadavků */
.req-progress { height: 14px; }
.text-req-label { min-width: 130px; }
.text-req-pct { min-width: 38px; text-align: right; }

/* Datové řádky v profesních kartách (města/benefity/zaměstnavatelé) */
.profese-datarow { border-bottom: 1px solid #eef1ef; }
.profese-datarow:last-child { border-bottom: 0; }

/* CTA odkaz na profesní průvodce (z výpisu /prace/, detailu nabídky) */
.profese-cta { transition: background 0.12s ease, border-color 0.12s ease; }
.profese-cta:hover { background: #f3fbf1; }
.profese-cta__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #eef4f0;
  color: #235c3c;
  font-size: 1.35rem;
}

/* ---------- Kalkulačka čisté mzdy ---------- */
.calc-result-box {
  background: #f3fbf1;
  border: 1px solid #d6f2d0;
  border-radius: var(--radius-md);
}

.calc-bar {
  display: flex;
  height: 14px;
  border-radius: 9999px;
  overflow: hidden;
  background: #e9ecef;
}

.calc-bar__net { background: #4fde5c; transition: width 0.3s ease; }
.calc-bar__tax { background: #f0ad4e; transition: width 0.3s ease; }
.calc-bar__ins { background: #6c9bd1; transition: width 0.3s ease; }

.calc-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
}

.calc-dot--net { background: #4fde5c; }
.calc-dot--tax { background: #f0ad4e; }
.calc-dot--ins { background: #6c9bd1; }

/* Jednotny layout kalkulacek: vstupy v sedem panelu, vysledek v zelenem,
   obe poloviny stejne vysoke a zarovnane nahoru (fix neprofi zarovnani). */
.calc-inputs {
  background: #f8f9fa;
  border: 1px solid #eef0f2;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  height: 100%;
}

.calc-inputs .form-label {
  margin-top: 0.75rem;
}

.calc-inputs .form-label:first-child {
  margin-top: 0;
}

/* vetsi ikona na dlazdicich hubu /kalkulacky/ */
.tool-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  font-size: 1.8rem;
}

.salary-histogram {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 180px;
}

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

.salary-histogram__bar {
  background: linear-gradient(180deg, #4fde5c 0%, #2e9e4f 100%);
  border-radius: 6px 6px 0 0;
  min-height: 2px;
  transition: height 0.4s ease;
}

.salary-histogram__label {
  font-size: 0.7rem;
  color: #6c757d;
  text-align: center;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-bottom-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: color 0.2s ease;
}

.footer-bottom-link:hover {
  color: #4fde5c;
}

/* ==========================================================================
   Utility Classes — replacing inline styles (V2.0)
   ========================================================================== */

/* ---------- Avatar / Logo sizing ---------- */
.avatar-xs  { width: 40px; height: 40px; max-width: 40px; max-height: 40px; }
.avatar-sm  { width: 48px; height: 48px; max-width: 48px; max-height: 48px; }
.avatar-md  { width: 56px; height: 56px; max-width: 56px; max-height: 56px; }
.avatar-lg  { width: 64px; height: 64px; max-width: 64px; max-height: 64px; }
.avatar-xl  { width: 72px; height: 72px; max-width: 72px; max-height: 72px; }
.avatar-xxl { width: 80px; height: 80px; max-width: 80px; max-height: 80px; }
.avatar-100 { width: 100px; height: 100px; max-width: 100px; max-height: 100px; }
.avatar-contain { object-fit: contain; }
.avatar-cover   { object-fit: cover; }

/* Circular placeholder with initials / icon */
.logo-placeholder {
  background-color: #f9f9f9;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0.5rem;
}

/* ---------- Text max-width constraints ---------- */
.text-constrain-sm  { max-width: 440px; }
.text-constrain-md  { max-width: 560px; }
.text-constrain-lg  { max-width: 600px; }
.text-constrain-xl  { max-width: 800px; }
.text-constrain-xxl { max-width: 820px; }
.text-constrain-xs  { max-width: 300px; }
.text-constrain-520 { max-width: 520px; }
.text-constrain-380 { max-width: 380px; }

/* ---------- Link dark (brand secondary) ---------- */
.link-dark {
  color: #1a1a1a;
  text-decoration: none;
}
.link-dark:hover {
  color: #4fde5c;
}

/* ---------- Badge font sizes ---------- */
.badge-xs { font-size: 0.6rem; }
.badge-sm { font-size: 0.7rem; }
.badge-md { font-size: 0.75rem; }
.badge-lg { font-size: 0.8rem; }
.badge-xl { font-size: 0.85rem; }

/* ---------- Floating Action Button ---------- */
.fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Typography utilities ---------- */
.pre-wrap         { white-space: pre-wrap; }
.lh-relaxed       { line-height: 1.7; }
.lh-tight         { line-height: 1.1; }
.lh-snug          { line-height: 1.15; }
.lh-loose         { line-height: 1.8; }

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Hero / Landing page ---------- */
.hero-z       { position: relative; z-index: 2; }
.hero-overlay { color: #f9f9f9; }
.hero-overlay-dim { color: #f9f9f9; }
.hero-overlay-faint { color: #f9f9f9; }

.hero-gradient-text {
  color: #4fde5c;
}

.faded-emoji {
  font-size: 6rem;
  opacity: 0.15;
}
.faded-emoji-lg {
  font-size: 8rem;
  opacity: 0.15;
}

.accent-green { color: #4fde5c; }

.hero-tag {
  background: #f9f9f9;
  color: #1a1a1a;
  border-radius: 9999px;
}

/* ---------- Autocomplete / Dropdown ---------- */
.autocomplete-dropdown {
  z-index: 1050;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

/* ---------- Quill editor ---------- */
.quill-container { min-height: 200px; }
.quill-container-lg { min-height: 250px; }

/* ---------- Blog cards ---------- */
.blog-img {
  height: 200px;
  object-fit: cover;
}

.blog-placeholder {
  height: 200px;
  background-color: #f9f9f9;
}

/* ---------- Employer detail hero ---------- */
.hero-banner {
  max-height: 320px;
  overflow: hidden;
}
.hero-banner img {
  object-fit: cover;
  max-height: 320px;
}

/* ---------- Misc repeated patterns ---------- */
.min-vh-70 { min-height: 70vh; }
.offscreen { position: absolute; left: -9999px; }

.scroll-box-sm {
  max-height: 100px;
  overflow: hidden;
}
.scroll-box-md {
  max-height: 200px;
  overflow-y: auto;
}
.scroll-box-lg {
  max-height: 300px;
  overflow-y: auto;
}

.input-narrow { max-width: 120px; }

.font-xs  { font-size: 0.65rem; }
.font-sm  { font-size: 0.7rem; }
.font-md  { font-size: 0.75rem; }
.font-lg  { font-size: 0.9rem; }
.font-xl  { font-size: 1.05rem; }
.font-2xl { font-size: 1.15rem; }
.font-icon-lg  { font-size: 1.1rem; }
.font-icon-xl  { font-size: 1.2rem; }
.font-icon-2xl { font-size: 1.5rem; }
.font-icon-3xl { font-size: 2rem; }
.font-icon-4xl { font-size: 2.5rem; }

/* Star rating icons */
.star-sm { font-size: 0.8rem; }

/* Hero search form controls */
.hero-select {
  background: #f9f9f9;
  border: none;
  border-radius: 9999px;
  padding: 0.85rem 0.6rem;
  font-size: 0.9rem;
}

/* Featured badge */
.badge-featured {
  background: #4fde5c;
  color: #1a1a1a;
  font-size: 0.75rem;
  padding: 0.35em 0.85em;
  border-radius: 9999px;
}

/* img logo with small border radius */
.logo-icon-sm {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 3px;
}


/* ---------- Additional avatar sizes ---------- */
.avatar-28  { width: 28px; height: 28px; }
.avatar-32  { width: 32px; height: 32px; }
.avatar-36  { width: 36px; height: 36px; }
.avatar-40  { width: 40px; height: 40px; min-width: 40px; }

/* ---------- Footer / filter ---------- */
.invert-white { filter: brightness(0) invert(1); }
.min-w-auto   { min-width: auto; }
.text-constrain-500 { max-width: 500px; }
.pt-section   { padding-top: 4rem; }

/* ---------- Blog detail hero ---------- */
.blog-hero-img  { max-height: 400px; object-fit: cover; }

/* ---------- Window-dot (mockup illustrations) ---------- */
.window-dot { width: 12px; height: 12px; }

/* ---------- Landing page icon boxes ---------- */
.icon-box-green {
  background: #f9f9f9;
  color: #1a1a1a;
}
.icon-box-blue {
  background: #f9f9f9;
  color: #1a1a1a;
}
.icon-box-orange {
  background: #f9f9f9;
  color: #1a1a1a;
}
.icon-box-pink {
  background: #f9f9f9;
  color: #1a1a1a;
}
.icon-box-green-bg {
  background: #f9f9f9;
}

/* Landing page step circles */
.step-circle {
  width: 80px;
  height: 80px;
  font-size: 2rem;
  font-weight: 800;
  background: #ffffff;
  color: #2bbf3a;
  border: 2px solid #eaeaea;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}

/* Landing page CTA card icons */
.cta-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* Badge with font-weight: 500 */
.badge-fw-500 { font-weight: 500; }

/* Landing page hero overlay combined */
.hero-lead {
  color: #f9f9f9;
  max-width: 560px;
  font-size: 1.15rem;
}
.hero-lead-dim {
  color: #f9f9f9;
  max-width: 600px;
}

/* Accent link (green) */
.link-green {
  color: #4fde5c;
  text-decoration: none;
}
.link-green:hover {
  color: #1a1a1a;
}

/* Dashboard mockup text colors */
.text-blue-600  { color: #1a1a1a; }
.text-orange-800 { color: #1a1a1a; }

/* Salary badge (green) */
.badge-salary-light {
  background-color: #4fde5c;
  color: #1a1a1a;
}

/* ---------- Pagination ---------- */
.page-link {
  color: #1a1a1a;
  border: none;
}

.page-link:hover {
  color: #1a1a1a;
  background-color: #f9f9f9;
}

.active > .page-link {
  background-color: #4fde5c;
  color: #1a1a1a;
}

/* ---------- Custom badges ---------- */
.badge-salary {
  background-color: #4fde5c;
  color: #1a1a1a;
  font-weight: 600;
}

/* ---------- Hero section ---------- */
.hero-primary {
  background: #4fde5c;
}

/* ---------- Line-clamp utility ---------- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ========================================
   Guide page (recruiters)
   ======================================== */
.guide-hero {
    background: #1a1a1a;
    color: #fff;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.guide-section         { padding: 3rem 0; }
.guide-section.alt-bg  { background: #ffffff; }

.guide-step-number, .step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.guide-card {
    background: #ffffff;
    border-radius: 20px;
    border: none;
    padding: 2rem;
    height: 100%;
}
.guide-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.guide-tip {
    background: #ffffff;
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid #4fde5c;
}
.guide-warning {
    background: #ffffff;
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid #f0ad4e;
}
.toc-link {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    color: #1a1a1a;
    transition: all 0.2s ease;
}
.toc-link:hover {
    background: #f9f9f9;
    color: #1a1a1a;
}
.screenshot-placeholder {
    background: #f9f9f9;
    border-radius: 20px;
    border: none;
    padding: 2rem;
    text-align: center;
    color: #1a1a1a;
}

/* Solid variants (guide step-numbers & icons) */
.gradient-green  { background: #f9f9f9; color: #1a1a1a; }
.gradient-blue   { background: #f9f9f9; color: #1a1a1a; }
.gradient-orange { background: #f9f9f9; color: #1a1a1a; }
.gradient-pink   { background: #f9f9f9; color: #1a1a1a; }
.gradient-indigo { background: #f9f9f9; color: #1a1a1a; }
.gradient-purple { background: #f9f9f9; color: #1a1a1a; }

/* Solid background tints */
.bg-green-50  { background: #f9f9f9; }
.bg-orange-50 { background: #f9f9f9; }
.bg-blue-50   { background: #f9f9f9; }
.bg-purple-50 { background: #f9f9f9; }
.bg-yellow-50 { background: #f9f9f9; }
.bg-indigo-50 { background: #f9f9f9; }
.bg-red-50    { background: #f9f9f9; }

.guide-hero-icon { font-size: 6rem; opacity: 0.15; }
.guide-cta-bg    { background: #1a1a1a; }
.sticky-toc      { top: 100px; }

/* (Bloky .employer-link / .employer-link-list smazány — mrtvý kód, třídy nebyly
   v žádné šabloně/JS. Obsahovaly 2 !important na :hover .text-muted.) */

/* Truncated employer description in the 'O společnosti' card on
   the job detail page — 4 lines max, then a 'Zobrazit celý profil
   firmy' button leads to the employer profile. */
.employer-description-preview {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Keep block-level child margins from breaking the clamp */
    line-clamp: 4;
}
.employer-description-preview p:last-child,
.employer-description-preview ul:last-child,
.employer-description-preview ol:last-child {
    margin-bottom: 0;
}

/* Basic → Profi upgrade CTA on /naborar/pozice/ */
.upgrade-cta {
    background: #ffffff;
}
.upgrade-cta ul li {
    line-height: 1.7;
}

/* ---------- Recruiter applications: note preview + detail timeline ---------- */
/* Truncated internal-note preview in the applications table */
.note-preview {
    max-width: 260px;
    vertical-align: bottom;
}
/* Meta line (date · author) under each internal note on the detail page */
.timeline-meta {
    font-size: .75rem;
}
/* Dimmed e-mail block in the 'Napsat uchazeči' form when
   'Informovat uchazeče e-mailem' is unchecked */
.email-disabled {
    opacity: .5;
}

/* ---------- Recruiter application detail: sticky quick-nav ---------- */
.app-quicknav {
    position: sticky;
    top: var(--app-navbar-h, 64px);    /* JS sets the real navbar height */
    z-index: 1019;                      /* just below the sticky navbar (1020) */
    display: flex;
    flex-wrap: wrap;                    /* mobile-first: zalom pod sebe, žádný posuvník */
    gap: .4rem;
    padding: .5rem;
    background: #ffffff;
    border: none;
    border-radius: 20px;
}
.app-quicknav-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    padding: .4rem .9rem;
    border-radius: 9999px;
    font-size: .85rem;
    font-weight: 600;
    color: #1a1a1a;
    background: #f9f9f9;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.app-quicknav-link:hover {
    background: #4fde5c;
    color: #1a1a1a;
}
.app-quicknav-link.active {
    background: #4fde5c;
    color: #1a1a1a;
}
.app-quicknav-link i {
    font-size: .95em;
    opacity: .85;
}
/* Offset anchored sections so they aren't hidden under navbar + quick-nav */
[id^="sec-"] {
    scroll-margin-top: calc(var(--app-navbar-h, 64px) + 72px);
}

/* ---------- Recruiter application detail: pipeline stepper ---------- */
.pipeline {
    display: flex;
    gap: 4px;
}
.pipeline-step {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    padding: .55rem .3rem;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 9999px;
    cursor: pointer;
    background: #f9f9f9;
    color: #1a1a1a;
    transition: background-color .15s ease, color .15s ease;
}
.pipeline-step:hover {
    background: #4fde5c;
    color: #1a1a1a;
}
.pipeline-step.pipeline-done {
    background: #1a1a1a;
    color: #ffffff;
}
.pipeline-step.pipeline-current {
    background: #4fde5c;
    color: #1a1a1a;
}
.pipeline-step-label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Recruiter application detail: activity timeline ---------- */
.activity-feed {
    position: relative;
}
.activity-item {
    position: relative;
    display: flex;
    gap: .75rem;
    padding-bottom: 1.1rem;
}
.activity-item:last-child {
    padding-bottom: 0;
}
.activity-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 2.1rem;
    bottom: 0;
    width: 2px;
    background: #f9f9f9;
    transform: translateX(-50%);
}
.activity-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    position: relative;
    z-index: 1;
}
.activity-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: .15rem;
    overflow-wrap: anywhere;
}
.activity-meta {
    font-size: .75rem;
    color: #6c757d;
}
.act-note            { background: #f9f9f9; color: #1a1a1a; }
.act-status          { background: #4fde5c; color: #1a1a1a; }
.act-applied         { background: #4fde5c; color: #1a1a1a; }
.act-message-sent    { background: #4fde5c; color: #1a1a1a; }
.act-message-pending { background: #4fde5c; color: #1a1a1a; }
.act-message-failed  { background: #1a1a1a; color: #ffffff; }
.act-interview       { background: #4fde5c; color: #1a1a1a; }
.min-w-0 {
    min-width: 0;
}

/* Inline CV preview iframe on the recruiter application detail */
.cv-preview {
    width: 100%;
    height: 600px;
    border: 0;
    display: block;
    background: #f9f9f9;
}

/* ==========================================================================
   V2.3 — flat-design enforcement ODSTRANĚN.
   Dřív tu globální `* { box-shadow:none !important }` + `.shadow*{…!important}`
   zabíjely VŠECHNY stíny na webu, takže žádná komponenta nemohla mít hloubku
   a všude jsme to obcházeli !importantem. Bootstrap shadow utility teď fungují
   normálně; konzistentní decentní stíny řešíme přes design tokeny (viz níže),
   ne globálním killem.
   ========================================================================== */

/* Design tokeny — konzistentní stíny/radiusy pro celý web (V2.3). */
:root {
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.07);
  --shadow: 0 6px 18px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.16);
}
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.btn {
  border-radius: var(--radius-pill);
}

/* Primary → brand green via Bootstrap's button vars (no !important). .bg-primary
   already renders green through --bs-primary-rgb (:root), so it needs no override. */
.btn-primary {
  --bs-btn-bg: #4fde5c;
  --bs-btn-border-color: #4fde5c;
  --bs-btn-color: #1a1a1a;
  --bs-btn-hover-bg: #3ccf4a;
  --bs-btn-hover-border-color: #3ccf4a;
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-active-bg: #3ccf4a;
  --bs-btn-active-border-color: #3ccf4a;
  --bs-btn-active-color: #1a1a1a;
}

/* Secondary / outline buttons become flat grey pills — with a subtle border so
   they don't vanish on the #f9f9f9 page background. */
.btn-secondary,
.btn-light,
.btn-outline-secondary,
.btn-outline-dark {
  --bs-btn-bg: #f9f9f9;
  --bs-btn-color: #1a1a1a;
  --bs-btn-border-color: #dcdcdc;
  --bs-btn-hover-bg: #4fde5c;
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-hover-border-color: #4fde5c;
  --bs-btn-active-bg: #4fde5c;
  --bs-btn-active-color: #1a1a1a;
  --bs-btn-active-border-color: #4fde5c;
}

/* Success + primary-outline map to brand green. Info/warning/danger stay
   Bootstrap-semantic (cyan / yellow / red). */
.btn-success {
  --bs-btn-bg: #4fde5c;
  --bs-btn-color: #1a1a1a;
  --bs-btn-border-color: #4fde5c;
  --bs-btn-hover-bg: #43c94f;
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-hover-border-color: #43c94f;
  --bs-btn-active-bg: #43c94f;
  --bs-btn-active-color: #1a1a1a;
  --bs-btn-active-border-color: #43c94f;
}
/* Outline = skutečně ghost (transparent + zelený rámeček/text, plný fill až na
   hover), aby sekundární akce nekonkurovaly hlavnímu solid tlačítku. */
.btn-outline-primary,
.btn-outline-success {
  --bs-btn-bg: transparent;
  --bs-btn-color: #147a1e;
  --bs-btn-border-color: #4fde5c;
  --bs-btn-hover-bg: #4fde5c;
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-hover-border-color: #4fde5c;
  --bs-btn-active-bg: #43c94f;
  --bs-btn-active-color: #1a1a1a;
  --bs-btn-active-border-color: #43c94f;
}

/* (.card flat style is defined once up in the Cards section — no duplicate here.) */
/* Card nested inside a white card sits on grey so it stays distinguishable */
.card .card {
  background-color: #f9f9f9;
}

.form-control,
.form-select {
  background-color: var(--flekni-surface);
  border: 1px solid #dcdcdc;
  border-radius: var(--radius-input);
  color: var(--flekni-text);
}

/* Tlačítko "Vybrat soubor" — ponecháváme Bootstrap default (světlé, decentní).
   Dřívější custom černá pilulka byla odstraněna (V2.3). */

textarea.form-control {
  border-radius: var(--radius-md);
}

.form-control:focus,
.form-select:focus {
  background-color: #f9f9f9;
  border: 1px solid #4fde5c;
  color: #1a1a1a;
  /* Viditelný keyboard-focus ring, on-brand zelený (přístupnost). */
  box-shadow: 0 0 0 0.2rem rgba(79, 222, 92, 0.35);
}

/* Input-group icon addons — subtle border so the group has a visible edge */
.input-group-text {
  background-color: #f9f9f9;
  border: 1px solid #dcdcdc;
  color: #6c757d;
}

.input-group > .input-group-text:first-child {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  padding-left: 1.1rem;
}

.input-group > .input-group-text:last-child {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
  padding-right: 1.1rem;
}

/* .text-muted + .form-text renderují #6c757d nativně přes --bs-secondary-color
   (:root). Globální .text-secondary override smazán — používal se jen na 2 místech
   (ikony), přemapováno na .text-muted, takže žádný override netřeba. */

/* .text-success renders brand green automatically via --bs-success-rgb (:root),
   so no override is needed. .text-info / .text-warning stay Bootstrap-semantic
   (cyan / yellow) — the old green remap was an over-reach. */

/* .bg-success is brand green via --bs-success-rgb; .bg-info is Bootstrap cyan.
   We only force readable dark text on them (the background is Bootstrap's own). */
.bg-success,
.bg-info {
  color: #1a1a1a;
}

/* .bg-light renders #f9f9f9 automatically via --bs-light-rgb (:root) — no override needed. */

.modal-content {
  border-radius: 20px;
  border: none;
  background-color: #ffffff;
}

/* Shape only. A bare .badge (no colour utility) gets the neutral grey default;
   native coloured badges (bg-*/text-bg-*) keep their colour because the guard
   below doesn't match them and carries no !important, so utilities win. */
.badge {
  --bs-badge-border-radius: 9999px;
}
.badge:not([class*="bg-"]):not([class*="text-bg-"]) {
  background-color: #f9f9f9;
  color: #1a1a1a;
}

.dropdown-menu {
  border-radius: 16px;
  border: none;
  background-color: #ffffff;
}

/* Checked checkboxes / radios / switches use the brand green, not Bootstrap blue */
.form-check-input:checked {
  background-color: #4fde5c;
  border-color: #4fde5c;
}

/* Flash messages / alerts: flat containers on the palette */
.alert {
  border: 0;
  border-radius: 14px;
  padding: 0.8rem 1.1rem;
}

/* Soft tints instead of loud full-saturation bars (flash messages). */
.alert-success {
  --bs-alert-bg: #e3f6e6;
  --bs-alert-color: #1e7a34;
}

.alert-danger {
  --bs-alert-bg: #f8e3e3;
  --bs-alert-color: #a33a3a;
}

.alert-info,
.alert-light {
  --bs-alert-bg: #f9f9f9;
  --bs-alert-color: #1a1a1a;
}

/* Accessibility: visible focus without glows */
:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}


/* ==========================================================================
   Page styles — moved out of template <style> blocks (V2.3 de-CSS refactor)
   ========================================================================== */
/* moved from cms/templates/base.html */

/* --- moved from <style> block (Hide Google Translate bar) --- */
.goog-te-banner-frame,
.skiptranslate {
    display: none !important;
}

body {
    top: 0 !important;
}

/* --- new class replacing inline style="display:none;" on #google_translate_element --- */
.base-hidden {
    display: none;
}

/* moved from cms/templates/cms/home.html */

/* ---------- Tom Select (was in {% block extra_css %} <style>) ---------- */
.hero-search-box .ts-wrapper .ts-control {
    background: #f9f9f9;
    border: none;
    border-radius: 9999px;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    min-height: 48px;
}
.hero-search-box .ts-wrapper.focus .ts-control {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}
.hero-search-box .ts-wrapper .ts-dropdown {
    border-radius: 20px;
    margin-top: 4px;
}

/* ---------- Hero (was in {% block content %} <style>) ---------- */
.home-hero {
    background: radial-gradient(120% 120% at 50% 18%, #235c3c 0%, #163f29 50%, #0e2c1d 100%);
    color: #ffffff;
    padding: 5.5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

/* Maskot na hlavním banneru — vpravo, ukazuje na obsah. Jen na širokých
   obrazovkách (d-xl-block), aby nekolidoval s centrovaným hledáním. */
.home-hero-mascot {
    position: absolute;
    right: 2.5%;
    bottom: 0;
    max-height: 400px;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 1500px) {
    .home-hero-mascot { max-height: 320px; opacity: .95; }
}

/* Hero stats (live numbers, on the dark-green hero) */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.25rem 4rem;
    margin-top: 3.5rem;
}
.hero-stat {
    text-align: center;
    color: #ffffff;
}
.hero-stat__num {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
}
.hero-stat__label {
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
}
a.hero-stat:hover .hero-stat__num { color: #4fde5c; }

.hero-search-box {
    background: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 1rem 1.2rem;
}

.hero-search-box .form-control {
    background: #f9f9f9;
    border: none;
    border-radius: 9999px;
    padding: 0.85rem 1rem;
    font-size: 1rem;
}

.hero-search-box .btn-search {
    background: #4fde5c;
    border: none;
    border-radius: 9999px;
    padding: 0.85rem 1.2rem;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 0.9rem;
}

.hero-search-box .btn-search:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounceDown 2s infinite;
    opacity: 0.5;
}

@keyframes bounceDown {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(10px);
    }
}

/* ---------- Stats bar ---------- */
.stats-bar {
    background: #ffffff;
    margin-top: -3rem;
    position: relative;
    z-index: 10;
    border-radius: 20px;
    padding: 2rem 0;
}

.stat-item {
    text-align: center;
    padding: 0.5rem 1rem;
}

.stat-item .stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
}

.stat-item .stat-label {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
}

/* ---------- Section base ---------- */
.home-section {
    padding: 5rem 0;
}

.home-section.alt-bg {
    background: #ffffff;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #4fde5c;
    color: #1a1a1a;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

/* ---------- Featured job cards ---------- */
.featured-job-card {
    background: #ffffff;
    border-radius: 20px;
    border: none;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.featured-job-card h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.featured-job-card.is-featured {
    position: relative;
}



.job-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: contain;
}

.job-logo-placeholder {
    width: 48px;
    height: 48px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #1a1a1a;
}

/* ---------- Photo sections ---------- */
.photo-section img {
    border-radius: 20px;
    width: 100%;
    height: 380px;
    object-fit: cover;
}

/* ---------- Feature cards ---------- */
.feature-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* ---------- CTA ---------- */
.home-cta {
    background: #1a1a1a;
    color: #fff;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.home-hero .hero-gradient-text {
    background: none;
    -webkit-text-fill-color: #4fde5c;
    color: #4fde5c;
}

/* moved from cms/templates/cms/pro_zamestnavatele.html */

/* ═══════════════════ SALES PAGE STYLES (moved from <style> block) ═══════════════════ */

/* Hero */
.sales-hero {
    background: #1a1a1a;
    position: relative;
}

/* Green radial glow overlay for the dark hero (dropped during the <style> move).
   Kept as the original subtle depth effect on the dark #1a1a1a hero section. */
.sales-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(79, 222, 92, 0.15) 0%, transparent 60%);
}

/* Scoped to the sales page: bare Bootstrap utility name kept from occupying a
   global override (Bootstrap already ships .min-vh-100). */
.sales-hero .min-vh-100 {
    min-height: 100vh;
}

.sales-scroll-indicator {
    animation: salesBounce 2s ease-in-out infinite;
}

@keyframes salesBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

.sales-badge {
    background: #4fde5c;
    color: #1a1a1a;
}

.sales-gradient-text {
    color: #4fde5c;
}

/* Section badges */
.sales-section-badge {
    background: #4fde5c;
    color: #1a1a1a;
}

/* Feature cards */
.sales-feature-card {
    background: #ffffff;
    border-radius: 20px;
    transition: transform 0.3s ease;
    cursor: default;
}

.sales-feature-card:hover {
    transform: translateY(-6px);
}

.sales-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 20px;
    background: #4fde5c;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Floating animations */
@keyframes salesFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.sales-floating-card {
    animation: salesFloat 4s ease-in-out infinite;
}

/* Steps */
.sales-step-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #4fde5c;
    color: #1a1a1a;
    font-size: 1.4rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Showcase cards. Radius řešen pořadím zdrojů, ne důrazem — .rounded-4
   z markupu odstraněn, takže tento pozdější selektor vyhraje. */
.sales-showcase-card {
    background: #ffffff;
    border-radius: 20px;
}

/* Pricing */
.sales-pricing-card {
    background: #ffffff;
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.sales-pricing-card:hover {
    transform: translateY(-4px);
}

/* Highlighted "popular" pricing tier. Border řešen pořadím, ne důrazem —
   .border-0 z markupu populární karty odstraněn. */
.sales-pricing-popular {
    border: 2px solid #4fde5c;
}

/* CTA Section */
.sales-cta-section {
    background: #1a1a1a;
}

/* Green radial glow overlay for the dark CTA section (dropped during the move). */
.sales-cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(79, 222, 92, 0.12) 0%, transparent 60%);
}

/* Page-specific white surfaces for floating/showcase elements */
.sales-floating-card,
.sales-floating-notif,
.sales-floating-stat {
    background-color: #ffffff;
}

.sales-showcase-card .card {
    background-color: #ffffff;
}

/* .bg-light consolidated into the base design-system section (~line 1048). */

/* Šedý info/tip panel (marketing stránky + guide). Dřív `bg-light rounded-3`, kde
   .rounded-3 (BS utilita !important) dávalo jen 8px — teď účelová třída s design
   tokenem (surface + --radius-lg), bez !important a konzistentní s kartami (18px). */
.info-panel {
    background-color: var(--flekni-surface);
    border-radius: var(--radius-lg);
}

/* Mini histogram rozložení mezd na detailu nabídky (výška sloupců je
   dynamická přes inline height:%, tady jen výška plochy). */
.salary-mini-hist { height: 64px; }

/* Mzdová heatmapa krajů (/trh-prace/) — barva dlaždice dle výše průměrné
   mzdy, intenzita v inline --i (0–100). */
.salary-map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75rem;
}
.salary-map-tile {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: #1a1a1a;
    background: #eef4f0;
    background: color-mix(in srgb, var(--flekni-brand) calc(var(--i, 50) * 0.8%), #eef4f0);
    border: 1px solid rgba(0, 0, 0, .05);
    transition: transform .15s ease, box-shadow .15s ease;
}
.salary-map-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    color: #1a1a1a;
}
.salary-map-tile__name { font-weight: 700; font-size: .95rem; }
.salary-map-tile__salary { font-weight: 800; font-size: 1.15rem; color: var(--flekni-brand-ink); }
.salary-map-tile__jobs { font-size: .8rem; color: #45564c; }

/* .text-success je brand green nativně přes --bs-success-rgb (:root) → tady
   řešíme jen .text-info (design ho chce zeleně, ale .bg-info/.alert-info zůstávají
   Bootstrap cyan pro barevnou pestrost avatarů → nelze přes globální --bs-info-rgb). */
.text-info {
    color: #4fde5c !important;
}

/* Responsive */
@media (max-width: 768px) {
    .sales-hero .display-4 {
        font-size: 2rem;
    }

    .min-vh-75 {
        min-height: auto;
        padding: 3rem 0;
    }
}

/* ═══════════════════ Classes extracted from inline style="" attributes ═══════════════════ */

/* was style="border-radius:50%;font-size:1.1rem" (hero avatar JN) */
.zam-avatar-jn {
    border-radius: 50%;
    font-size: 1.1rem;
}

/* was style="top:10%;right:5%;animation:salesFloat 3s ease-in-out infinite" (floating notif) */
.zam-float-notif {
    top: 10%;
    right: 5%;
    animation: salesFloat 3s ease-in-out infinite;
}

/* was style="bottom:5%;left:5%;animation:salesFloat 3s ease-in-out 1.5s infinite" (floating stat) */
.zam-float-stat {
    bottom: 5%;
    left: 5%;
    animation: salesFloat 3s ease-in-out 1.5s infinite;
}

/* was style="font-size:0.85rem" (application-list avatar initials) */
.zam-fs-085 {
    font-size: 0.85rem;
}

/* was style="font-size:0.8rem" (testimonial avatar initials) */
.zam-fs-08 {
    font-size: 0.8rem;
}

/* moved from cms/templates/cms/pro_uchazece.html */

/* ═══════════════════ APPLICANT PAGE STYLES (moved from <style> block) ═══════════════════ */

/* Hero */
.applicant-hero {
    background: #1a1a1a;
    position: relative;
}

.applicant-badge {
    background: #4fde5c;
    color: #1a1a1a;
    border: none;
}

.applicant-gradient-text {
    color: #4fde5c;
}

/* Section badges */
.applicant-section-badge {
    background: #4fde5c;
    color: #1a1a1a;
    border: none;
}

/* Feature cards */
.applicant-feature-card {
    background: #ffffff;
    border-radius: 20px;
    transition: transform 0.3s ease;
    cursor: default;
}

.applicant-feature-card:hover {
    transform: translateY(-6px);
}

.applicant-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4fde5c;
    color: #1a1a1a;
}

/* Floating animations */
@keyframes applicantFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.applicant-floating-card {
    animation: applicantFloat 4s ease-in-out infinite;
}

/* Scroll indicator */
.applicant-scroll-indicator {
    animation: applicantBounce 2s ease-in-out infinite;
}

@keyframes applicantBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

/* Steps */
.applicant-step-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #4fde5c;
    color: #1a1a1a;
    font-size: 1.4rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Showcase cards */
/* Radius řešen pořadím zdrojů, ne důrazem — .rounded-4 z markupu odstraněn. */
.applicant-showcase-card {
    background: #ffffff;
    border-radius: 20px;
}

/* CTA Section */
.applicant-cta-section {
    background: #1a1a1a;
}

/* .bg-light consolidated into the base design-system section (~line 1048). */
.applicant-hero .card {
    border-radius: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .applicant-hero .display-4 {
        font-size: 2rem;
    }
}

/* ═══════════════════ CLASSES FOR CONVERTED INLINE STYLES ═══════════════════ */

/* was inline style="border-radius:12px;font-size:1.1rem" on hero floating-card avatar */
.uch-avatar-box {
    border-radius: 12px;
    font-size: 1.1rem;
}

/* was inline style="top:10%;right:5%;animation:applicantFloat 3s ease-in-out infinite"
   on hero floating notification card */
.uch-float-notification {
    top: 10%;
    right: 5%;
    animation: applicantFloat 3s ease-in-out infinite;
}

/* was inline style="bottom:5%;left:5%;animation:applicantFloat 3s ease-in-out 1.5s infinite"
   on hero floating saved card */
.uch-float-saved {
    bottom: 5%;
    left: 5%;
    animation: applicantFloat 3s ease-in-out 1.5s infinite;
}

/* was inline style="border-radius:10px" on showcase list avatars (3 occurrences) */
.uch-avatar-rounded {
    border-radius: 10px;
}

/* moved from cms/templates/cms/o_nas.html */

/* Hero */
.about-hero {
    background: #1a1a1a;
    color: #fff;
    min-height: 60vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Section styling */
.about-section {
    padding: 5rem 0;
}

.about-section.alt-bg {
    background: #ffffff;
}

/* Value cards */
.value-card {
    background: #f9f9f9;
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    border: none;
    height: 100%;
}

.value-card .icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #4fde5c;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.75rem;
    color: #1a1a1a;
}

/* Story timeline */
.story-item {
    position: relative;
    padding-left: 3rem;
    margin-bottom: 2.5rem;
}

.story-item::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 36px;
    bottom: -2.5rem;
    width: 2px;
    background: #4fde5c;
}

.story-item:last-child::before {
    display: none;
}

.story-dot {
    position: absolute;
    left: 0;
    top: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #4fde5c;
    border: none;
}

/* Stats */
/* Radius řešen pořadím zdrojů, ne důrazem — .rounded-3 z markupu odstraněn. */
.stat-box {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 20px;
}

.stat-number {
    font-size: 2.75rem;
    font-weight: 800;
    color: #4fde5c;
    line-height: 1;
    margin-bottom: 0.5rem;
}

/* Team card */
.team-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: none;
}

.team-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #4fde5c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #1a1a1a;
    margin: 0 auto;
}

/* CTA */
.about-cta {
    background: #1a1a1a;
    color: #fff;
    padding: 5rem 0;
}

/* Design-system mapping for Bootstrap utility classes used on this page */
.about-hero,
.about-section,
.about-cta {
    font-family: "Helvetica", Arial, sans-serif;
}

.about-section .shadow-sm,
.about-section .shadow,
.about-cta .shadow,
.about-cta .shadow-sm {
    box-shadow: none;
}

.about-section .card {
    background-color: #f9f9f9;
    border: none;
    border-radius: 20px;
    box-shadow: none;
}

/* .about-section .text-muted / .text-success dříve zde — smazáno, globální
   .text-muted (#6c757d) a .text-success (#4fde5c) dávají identickou barvu. */

.about-hero .badge,
.about-section .badge {
    background-color: #4fde5c !important;
    color: #1a1a1a !important;
}

.about-section .btn-outline-primary,
.about-section .btn-outline-success,
.about-cta .btn-success {
    background-color: #4fde5c;
    color: #1a1a1a;
    border: none;
    box-shadow: none;
}

.about-section .btn-outline-primary:hover,
.about-section .btn-outline-primary:focus,
.about-section .btn-outline-primary:active,
.about-section .btn-outline-success:hover,
.about-section .btn-outline-success:focus,
.about-section .btn-outline-success:active,
.about-cta .btn-success:hover,
.about-cta .btn-success:focus,
.about-cta .btn-success:active {
    background-color: #4fde5c;
    color: #1a1a1a;
    border: none;
    box-shadow: none;
}

.about-cta .btn-outline-light {
    background-color: #f9f9f9;
    color: #1a1a1a;
    border: none;
    box-shadow: none;
}

.about-cta .btn-outline-light:hover,
.about-cta .btn-outline-light:focus,
.about-cta .btn-outline-light:active {
    background-color: #f9f9f9;
    color: #1a1a1a;
    border: none;
    box-shadow: none;
}

.about-section .btn:focus-visible,
.about-cta .btn:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    box-shadow: none;
}

/* Fade in animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

/* moved from cms/templates/cms/maintenance.html */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* extracted inline styles */
.maint-body {
    min-height: 100vh;
}

.maint-spinner {
    animation: spin 3s linear infinite;
}

/* moved from cms/templates/cms/_cookie_banner.html */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 1rem;
    animation: cookieSlideUp .5s ease-out;
    font-family: "Helvetica", Arial, sans-serif;
}

.cookie-inner {
    max-width: 700px;
    margin: 0 auto;
    background: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
    box-shadow: none;
    color: #1a1a1a;
}

.cookie-header {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .875rem;
    line-height: 1.5;
    margin-bottom: .75rem;
}

.cookie-header strong {
    color: #1a1a1a;
    display: block;
    margin-bottom: .1rem;
}

.cookie-header a {
    color: #1a1a1a;
    text-decoration: underline;
}

.cookie-header a:hover {
    color: #1a1a1a;
}

.cookie-icon {
    font-size: 1.5rem;
    color: #4fde5c;
    margin-top: 2px;
    flex-shrink: 0;
}

.cookie-categories {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin-bottom: 1rem;
}

.cookie-cat {
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    font-size: .8rem;
    flex-wrap: wrap;
}

.cookie-cat input {
    display: none;
}

.cookie-toggle {
    width: 34px;
    height: 18px;
    border-radius: 9999px;
    background: #f9f9f9;
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}

.cookie-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1a1a1a;
    transition: transform .2s;
}

.cookie-cat input:checked+.cookie-toggle {
    background: #4fde5c;
}

.cookie-cat input:checked+.cookie-toggle::after {
    transform: translateX(16px);
}

.cookie-cat input:disabled+.cookie-toggle {
    opacity: .5;
    cursor: not-allowed;
}

.cookie-cat-name {
    color: #1a1a1a;
    font-weight: 600;
}

.cookie-cat-desc {
    width: 100%;
    color: #6c757d;
    font-size: .72rem;
    margin-left: 38px;
    margin-top: -2px;
}

.cookie-buttons {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.cookie-buttons .btn {
    font-family: "Helvetica", Arial, sans-serif;
    border: none;
    border-radius: 9999px;
    box-shadow: none;
}

.cookie-buttons .btn:focus,
.cookie-buttons .btn:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

#cookieAccept,
#cookieAccept:hover,
#cookieAccept:focus,
#cookieAccept:active {
    background: #4fde5c;
    color: #1a1a1a;
}

#cookieReject,
#cookieSave,
#cookieReject:hover,
#cookieSave:hover,
#cookieReject:focus,
#cookieSave:focus,
#cookieReject:active,
#cookieSave:active {
    background: #f9f9f9;
    color: #1a1a1a;
}

@keyframes cookieSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@media(max-width:768px) {
    .cookie-inner {
        padding: 1rem
    }

    .cookie-buttons {
        flex-direction: column
    }

    .cookie-buttons .btn {
        width: 100%
    }
}

/* moved from jobs/templates/jobs/job_list.html */
.ts-wrapper .ts-control { min-height: 38px; background-color: #f9f9f9; color: #1a1a1a; border: none; border-radius: 9999px; box-shadow: none; }
.ts-wrapper.focus .ts-control { box-shadow: none; outline: 2px solid #1a1a1a; outline-offset: 2px; }
/* A long single-select value must not wrap and grow the cell — keep it on one
   line and truncate with an ellipsis so all filter cells stay the same height. */
.ts-wrapper.single .ts-control { flex-wrap: nowrap; overflow: hidden; }
.ts-wrapper.single .ts-control > .item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* Multi-selects may grow a little for chips, then scroll instead of ballooning. */
.ts-wrapper.multi .ts-control { max-height: 110px; overflow-y: auto; }

/* /nabidky/ advanced filters — rounded RECTANGLE (not full pill) so multi-select
   chips wrap into a clean box, jobs.cz style. Scoped to the advanced-filter
   panel so the top search bar and other pages keep their pill controls. */
#advancedFilters .ts-control,
#advancedFilters .form-control,
/* ID selektor (1,1,0) vyhraje nad globálním .form-select i bez důrazu. */
#advancedFilters .form-select {
    border-radius: 8px;
}
#advancedFilters .ts-wrapper.multi .ts-control {
    max-height: none;
    overflow-y: visible;
    padding: 6px 8px;
}
/* Compact rectangular chips */
#advancedFilters .ts-wrapper.multi .ts-control > div {
    background-color: #e6e6e6;
    color: #1a1a1a;
    border-radius: 6px;
    padding: 3px 8px;
    margin: 2px 5px 2px 0;
    font-size: 0.85rem;
    line-height: 1.3;
}
#advancedFilters .ts-wrapper.multi .ts-control > div.active {
    background-color: #4fde5c;
    color: #1a1a1a;
}
#advancedFilters .ts-wrapper.multi .ts-control > div .remove {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    margin-left: 7px;
    padding-left: 7px;
}
.featured-pill {
    display: inline-flex;
    align-items: center;
    background-color: #ffe680;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
}

/* AI screening recommendation pills (applications list). Dedicated classes
   so the global .badge grey override doesn't kill the semantic colour. */
.ai-pill {
    display: inline-block;
    border-radius: 9999px;
    padding: 3px 11px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.ai-pill--hire   { background-color: #e3f6e6; color: #1e7a34; }
.ai-pill--maybe  { background-color: #fdf0d3; color: #8a5a00; }
.ai-pill--reject { background-color: #ededed; color: #555555; }
.ai-pill__score  { font-weight: 400; opacity: 0.7; }

/* Count chip next to a page title (e.g. "Moji zaměstnavatelé 25967").
   Dedicated class — the global .badge grey override kills bg-success. */
.count-pill {
    display: inline-flex;
    align-items: center;
    background-color: #e3f6e6;
    color: #1e7a34;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.25rem 0.7rem;
    border-radius: 9999px;
    vertical-align: middle;
}

/* Semantic status pills — dedicated classes so the global `.badge { …!important }`
   grey override can't kill the colour. Use instead of `.badge bg-*`. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 9999px;
    padding: 3px 11px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.status-pill--ok      { background: #e3f6e6; color: #1e7a34; }
.status-pill--warn    { background: #fdf0d3; color: #8a5a00; }
.status-pill--bad     { background: #fdecea; color: #b02a1a; }
.status-pill--info    { background: #e7f0f8; color: #2c6389; }
.status-pill--neutral { background: #ededed; color: #555555; }

.card .logo-placeholder { background-color: transparent; color: #1a1a1a; }
.job-card-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 1.25rem 0 1rem;
    opacity: 1;
}
.job-card-cta {
    display: inline-flex;
    align-items: center;
    color: #4fde5c;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
}
.job-card-cta:hover { color: #1a1a1a; }

/* Job-list row card: meta pills + whole-card click */
.job-meta-pill {
    display: inline-flex;
    align-items: center;
    background-color: #f9f9f9;
    color: #1a1a1a;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 400;
}
.job-meta-pill--salary { font-weight: 700; }
.job-card__employer {
    position: relative;
    z-index: 2;
    color: #6c757d;
}
.job-card__employer:hover { color: #4fde5c; }
/* Whole-card hover cue: the title greens so it's clear the card is clickable. */
.job-list-card .stretched-link { transition: color 0.15s ease; }
.job-list-card:hover .stretched-link { color: #4fde5c; }
/* Bigger employer logo on the job-list row, details sit in a column beside it. */
.job-list-logo {
    height: 90px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
}

/* moved from recruiters/templates/recruiters/reviews.html */
.nav-pills {
    --bs-nav-pills-link-active-bg: #4fde5c;
    --bs-nav-pills-link-active-color: #1a1a1a;
    --bs-nav-pills-border-radius: 9999px;
}
/* moved from recruiters/templates/recruiters/product_form.html */

/* --- moved from <style> block (all static) --- */
.ql-toolbar.ql-snow { border: none; background-color: #f9f9f9; border-radius: 20px 20px 0 0; }
.ql-container.ql-snow { border: none; background-color: #f9f9f9; border-radius: 0 0 20px 20px; font-size: 1rem; min-height: 280px; }
/* Emoji tlačítko v Quill liště (panel řeší emoji-picker.js) */
.ql-toolbar button.ql-emoji { width: auto; font-size: 1rem; line-height: 1; }

/* --- converted from inline style="" --- */
/* was style="max-height:140px" on product image preview <img> */
.rpf-img-preview { max-height: 140px; }

/* moved from recruiters/templates/recruiters/product_list.html */

.rpl-product-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.rpl-product-thumb-placeholder {
    width: 64px;
    height: 64px;
}

/* moved from recruiters/templates/recruiters/jobs.html */
.job-name-pencil { color: #6c757d; font-size: .8em; }
/* Podtržení jen na hover — base bez podtržení jako CSS pravidlo (ne .text-decoration-none
   utilita v markupu), takže hover vyhraje specificitou bez důrazu. */
.job-name-link { text-decoration: none; }
.job-name-link:hover { text-decoration: underline; color: var(--bs-primary); }
.job-name-link:hover .job-name-pencil { color: var(--bs-primary); }

/* Flat design (V2.2) — page-scoped overrides for utilities not covered globally */
/* Only clip cards that wrap edge-to-edge flush content (list-group-flush /
   table) to the rounded corners. Previously an UNSCOPED `.card{overflow:hidden}`
   clipped absolutely-positioned overflow (homepage/nabidky featured star pill,
   sales floating cards, dropdowns) on every page. */
.card:has(> .list-group-flush),
.card:has(> .table),
.card:has(> .table-responsive) { overflow: hidden; }
/* .card.upgrade-cta border override smazán — base .card už má border:none
   a markup nese .border-0; pravidlo bylo redundantní. */

/* Bootstrap natírá buňky tabulky barvou --bs-table-bg, která defaultně = pozadí
   stránky (--bs-body-bg:#f9f9f9). Uvnitř bílých karet pak tabulka vypadá jako
   plochý šedý blok bez odlišené hlavičky. Necháme buňky prosvítat bílou kartou.
   Řádky/hlavičky s vlastním --bs-table-bg (thead.table-light, tr.table-warning,
   tr.table-light) si svou barvu drží — hodnota nastavená na bližším <thead>/<tr>
   přebíjí tuhle na <table>. */
.card .table { --bs-table-bg: transparent; }

.table-light {
    --bs-table-bg: #f9f9f9;
    --bs-table-color: #1a1a1a;
}
/* "TOPOVANÁ" / featured row (recruiter positions list) — subtle green tint,
   not a full bright-green fill, so the row stays readable. */
.table-warning {
    --bs-table-bg: #eafbec;
    --bs-table-color: #1a1a1a;
    --bs-table-hover-bg: #dff6e2;
    --bs-table-hover-color: #1a1a1a;
}
.btn-outline-danger {
    --bs-btn-bg: #f9f9f9;
    --bs-btn-color: #dc3545;
    --bs-btn-border-color: #f9f9f9;
    --bs-btn-hover-bg: #f9f9f9;
    --bs-btn-hover-color: #dc3545;
    --bs-btn-active-bg: #f9f9f9;
    --bs-btn-active-color: #dc3545;
}
/* .text-dark renderuje #1a1a1a nativně přes --bs-dark-rgb (:root). */
.pagination {
    gap: .25rem;
    --bs-pagination-color: #1a1a1a;
    --bs-pagination-bg: #f9f9f9;
    --bs-pagination-border-width: 0;
    --bs-pagination-hover-color: #1a1a1a;
    --bs-pagination-hover-bg: #4fde5c;
    --bs-pagination-focus-color: #1a1a1a;
    --bs-pagination-focus-bg: #f9f9f9;
    --bs-pagination-active-color: #1a1a1a;
    --bs-pagination-active-bg: #4fde5c;
}
.pagination .page-link { border-radius: 9999px; }

/* moved from recruiters/templates/recruiters/job_form.html */

/* ── Moved verbatim from the template's {% block extra_css %} <style> block ── */

.ts-wrapper.focus .ts-control {
    border: none;
    box-shadow: none;
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.ts-dropdown {
    background-color: #ffffff;
    border: none;
    box-shadow: none;
    border-radius: 20px;
}

/* Quill editor styling */
.ql-snow .ql-tooltip,
.ql-snow .ql-picker-options {
    box-shadow: none;
}
/* Emoji tlačítko v Quill liště (panel řeší emoji-picker.js) */

/* Card sub-elements not covered by the global .card rule.
   Scoped to the job-form page (via its always-present .rjf-hidden mirror
   textarea) so its transparent card-header intent does not collide globally
   with the employer-edit white card-header rule further down.
   Bez !important — selektor (0,3,0) přebije komponentu .card-header (0,1,0),
   a .bg-white utilita byla z markupu headerů odstraněna. */
.container:has(.rjf-hidden) .card .card-header {
    background-color: transparent;
    border-bottom: none;
}
/* Sdílení leadu s členy týmu: skupina checkboxů místo <select multiple>.
   Strop výšky je pojistka do budoucna — dnes jsou v CRM čtyři lidi, ale
   seznam roste a bez stropu by odsunul zbytek formuláře mimo obrazovku. */
.crm-sdileni {
    max-height: 14rem;
    overflow-y: auto;
}

/* Šedé rounded panely uvnitř formuláře. Dřív .border.rounded (BS utility s
   !important) → přemapováno na účelovou třídu .jf-panel, žádný !important. */
.jf-panel {
    background-color: #f9f9f9;
    border-radius: 20px;
}

/* Warning alert / badge variants (green accent) — not in the global flat set */
.alert.alert-warning {
    background-color: #ffffff;
    border: none;
    color: #1a1a1a;
    border-radius: 20px;
}
.alert.alert-warning .text-warning { color: #4fde5c !important; }

/* ── Extracted from inline style="" attributes ── */

/* was: style="display:none;" on the hidden #id_description mirror textarea */
.rjf-hidden { display: none; }

/* moved from recruiters/templates/recruiters/employer_edit.html */

/* Emoji tlačítko v Quill liště (panel řeší emoji-picker.js) */
.field-help { font-size: .82rem; color: #6c757d; margin-top: .35rem; }

/* Nested-card surface tweaks specific to this page.
   Scoped to the employer-edit page (via its always-present, page-unique
   .quill-container-lg) so its white card-header does not override the
   job-form page's transparent card-header (or any other page) globally. */
/* Bílá hlavička s rounded-top. Bez !important — .bg-white v markupu dává bílou,
   selektor (0,3,0) přebije komponentu .card-header pro border/radius.
   .bg-light override smazán (bg-light už je #f9f9f9), .border odstraněn z markupu panelů. */
.container:has(.quill-container-lg) .card .card-header { border-bottom: none; border-radius: 20px 20px 0 0; }

/* max-height:100px — náhled loga / úvodní fotky */
.ree-preview-img { max-height: 100px; }

/* Flat design (V2.2) — page-scoped overrides for utilities not covered globally */
/* (Was a duplicate unscoped `.card{overflow:hidden}` — removed; the structural
   `.card:has(> .list-group-flush)` rule above already clips the dashboard's
   flush-list card without clipping absolutely-positioned overflow elsewhere.) */
/* Smazáno: .card.bg-success/info/warning + .card.border-start — mrtvý kód (žádný
   markup je nemá). .btn.text-white override smazán — jediné 2 užití (btn-info)
   měla .text-white odstraněno v šablonách, btn-info renderuje tmavý text sám. */
.card .card-header { border-bottom: 0; }
/* .btn-warning stays Bootstrap-semantic yellow (the green remap was an over-reach). */
.list-group:not(.list-group-flush) {
    border-radius: 20px;
    overflow: hidden;
}
.list-group:not(.list-group-flush) .list-group-item {
    background-color: #f9f9f9;
    border-color: #ffffff;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: #ffffff;
}

/* --- converted from inline style="" --- */
.rdash-day-col { min-width: 48px; }
.rdash-day-num { font-size: 1.2rem; }

/* moved from recruiters/templates/recruiters/career_settings.html */

/* ===== Moved verbatim from the template's <style> block ===== */
.card-header .sec-help { font-weight: 400; font-size: .82rem; color: #6c757d; }
.icon-preview-box {
    flex: 0 0 auto; width: 44px; height: 38px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f9f9f9; color: #1a1a1a; border: none;
}
.icon-preview { font-size: 1.25rem; line-height: 1; }
.career-save-bar {
    position: sticky; bottom: 0; z-index: 1020;
    margin: .5rem -12px 0; padding: .6rem 12px;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
}
.breadcrumb {
    --bs-breadcrumb-divider: '›';
    --bs-breadcrumb-divider-color: #6c757d;
    --bs-breadcrumb-item-active-color: #6c757d;
}
.breadcrumb a { color: #1a1a1a; }

/* ── Page-specific card/panel tuning (not in global design system) ──
   Scoped to the career-settings page (via its always-present .career-save-bar)
   so these card-internal overrides no longer restyle every card site-wide. */
/* Bez !important — .bg-white odstraněno z markupu headerů, selektor (0,3,0)
   přebije komponentu .card-header (0,1,0). */
.container:has(.career-save-bar) .card > .card-header { background-color: transparent; border-bottom: 0; }
.container:has(.career-save-bar) .card .bg-light .bg-light,
.container:has(.career-save-bar) .card .border .bg-light { background-color: #ffffff !important; }
.container:has(.career-save-bar) .card .border { border: 0 !important; }
.container:has(.career-save-bar) .card > .card-body .border.rounded { background-color: #f9f9f9; }
/* Scoped to the career-settings page (via its always-present .career-save-bar)
   so it no longer forces every Bootstrap .rounded/.rounded-3 element on all
   pages to 20px, overriding Bootstrap's small default radii elsewhere. */
.container:has(.career-save-bar) .rounded,
.container:has(.career-save-bar) .rounded-3 { border-radius: 20px !important; }

/* ── Page-specific button scoping (grey outline pills inside cards / save bar) ── */
.container:has(.career-save-bar) .card .btn-outline-primary,
.container:has(.career-save-bar) .card .btn-outline-secondary,
.container:has(.career-save-bar) .card .btn-outline-info,
.container:has(.career-save-bar) .card .btn-outline-success,
.container:has(.career-save-bar) .career-save-bar .btn-outline-primary,
.container:has(.career-save-bar) .career-save-bar .btn-outline-secondary,
.container:has(.career-save-bar) .career-save-bar .btn-outline-info {
    --bs-btn-bg: #f9f9f9; --bs-btn-hover-bg: #f9f9f9; --bs-btn-active-bg: #f9f9f9;
}

/* ── Page-specific form scoping ── */
.container:has(.career-save-bar) .card .form-control,
.container:has(.career-save-bar) .card .form-select { background-color: #f9f9f9; }
.container:has(.career-save-bar) .card .input-group-text { background-color: #f9f9f9; }
/* Inside the grey inset blocks (.border.rounded, e.g. reason/highlight cards)
   the fields must be WHITE so they don't blend into the grey block. */
.container:has(.career-save-bar) .card > .card-body .border.rounded .form-control,
.container:has(.career-save-bar) .card > .card-body .border.rounded .form-select,
.container:has(.career-save-bar) .card > .card-body .border.rounded .ts-control,
.container:has(.career-save-bar) .card > .card-body .border.rounded .input-group-text {
    background-color: #ffffff;
}

/* ── Page-specific text/alert overrides (differ from / absent in global) ── */
/* .form-text renderuje #6c757d nativně přes --bs-secondary-color (:root). */
/* Scoped to the career-settings page so it cannot flip warning-accent text to
   dark on other pages (global keeps .text-warning green at ~1023). */
.container:has(.career-save-bar) .text-warning { color: #1a1a1a !important; }
.alert-primary { --bs-alert-bg: #ffffff; --bs-alert-color: #1a1a1a; --bs-alert-border-color: transparent; }

/* ===== New classes created from converted inline style="" attributes ===== */

/* was style="max-width:460px" — adresa stránky input-group */
.rcs-mw-460 { max-width: 460px; }

/* was style="max-width:220px" — výška loga input-group wrapper */
.rcs-mw-220 { max-width: 220px; }

/* was style="max-height:50px;vertical-align:middle" — náhled loga firmy */
.rcs-logo-preview { max-height: 50px; vertical-align: middle; }

/* was style="max-height:32px;vertical-align:middle" — náhled favicony */
.rcs-favicon-preview { max-height: 32px; vertical-align: middle; }

/* was style="height:28px;width:28px;object-fit:contain" — náhled vlastní ikony */
.rcs-icon-img { height: 28px; width: 28px; object-fit: contain; }

/* was style="max-height:280px;overflow-y:auto;" — scrollovací seznam benefitů */
.rcs-benefit-list { max-height: 280px; overflow-y: auto; }

/* was style="max-height:100px" — náhled foto „O nás“ */
.rcs-mh-100 { max-height: 100px; }

/* was style="max-height:90px" — náhledy hero bannerů podstránek + hero video */
.rcs-mh-90 { max-height: 90px; }

/* was style="max-height:80px" — náhled fotky v galerii */
.rcs-mh-80 { max-height: 80px; }

/* was style="max-height:70px" — náhled snímku hero slideru */
.rcs-mh-70 { max-height: 70px; }

/* was style="max-height:60px" — náhledy fotek (reference, pobočky, kontakty) */
.rcs-mh-60 { max-height: 60px; }

/* was style="max-height:50px" — náhled loga klienta */
.rcs-mh-50 { max-height: 50px; }

/* was style="cursor:pointer;list-style:none" — summary sekce „Texty stránky“ */
.rcs-summary-plain { cursor: pointer; list-style: none; }

/* NOTE: textarea#id_description style="display:none;" was converted to the
   existing Bootstrap utility class "d-none" (no new class created). JS reads
   only its .value, never its .style, so this is purely presentational. */

/* moved from recruiters/templates/recruiters/blog_form.html */

/* Emoji tlačítko v Quill liště (panel řeší emoji-picker.js) */

/* Inline style extracted: <img> náhled titulního obrázku */
.rbf-preview-img { max-height: 140px; }

/* moved from recruiters/templates/recruiters/blog_list.html */

/* Blog post thumbnail image (64x64, cropped) */
.rbl-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

/* Blog post thumbnail placeholder (64x64 box, no crop) */
.rbl-thumb-placeholder {
    width: 64px;
    height: 64px;
}

/* moved from recruiters/templates/recruiters/applications.html */
/* Flat design (V2.2) — page-scoped overrides for utilities not covered globally */
/* moved from recruiters/templates/recruiters/application_detail.html */

/* moved from recruiters/templates/recruiters/applicant_search.html */
/* Tom Select — flat pill controls */
.card .ts-wrapper .ts-control { background-color: #f9f9f9; }
.ts-wrapper.focus .ts-control {
    box-shadow: none;
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}
/* Nested surfaces inside cards.
   Scoped to the applicant-search page (via its always-present .filter-card) so
   these do not round/flatten every card-footer or form control site-wide. */
.container:has(.filter-card) .card .card-footer {
    border-top: none;
    border-radius: 0 0 20px 20px;
}
.applicant-card:hover { transform: translateY(-2px); transition: all .2s; }
.container:has(.filter-card) .card .form-control,
.container:has(.filter-card) .card .form-select { background-color: #f9f9f9; }
.form-check-input:focus {
    box-shadow: none;
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}
/* Page overrides — outline buttons flattened to solid palette pills.
   Scoped to the applicant-search page (.filter-card) so the flat `border:none`
   .btn-success does not clobber the global .btn-success button styling (~952,
   with proper hover/active border states) on every other page. */
.container:has(.filter-card) .btn-success,
.container:has(.filter-card) .btn-success:hover,
.container:has(.filter-card) .btn-success:focus,
.container:has(.filter-card) .btn-success:active,
.container:has(.filter-card) .btn-outline-primary,
.container:has(.filter-card) .btn-outline-primary:hover,
.container:has(.filter-card) .btn-outline-primary:focus,
.container:has(.filter-card) .btn-outline-primary:active {
    background-color: #4fde5c;
    color: #1a1a1a;
    border: none;
}
.container:has(.filter-card) .btn-outline-secondary,
.container:has(.filter-card) .btn-outline-secondary:hover,
.container:has(.filter-card) .btn-outline-secondary:focus,
.container:has(.filter-card) .btn-outline-secondary:active {
    background-color: #f9f9f9;
    color: #1a1a1a;
    border: none;
}
.container:has(.filter-card) .card .btn-outline-secondary,
.container:has(.filter-card) .card .btn-outline-secondary:hover,
.container:has(.filter-card) .card .btn-outline-secondary:focus,
.container:has(.filter-card) .card .btn-outline-secondary:active {
    background-color: #f9f9f9;
}
/* (Badge palette-remap blok smazán — stránka applicant_search nemá žádné
   .badge.bg-* elementy, pravidla byla mrtvý kód.) */
/* Text colors — page mapping to palette (scoped to the applicant-search page
   via its always-present, page-unique .filter-card). Previously UNSCOPED:
   `.text-secondary` overrode the global muted rule (#6c757d at ~1017) and made
   muted text dark on every page, and `.text-danger` mapped error text to green
   site-wide. The design system intentionally keeps danger red, so `.text-danger`
   is dropped here entirely — the page has no danger text that needs green. */
/* (Filter-card text-color remapy smazány — všech 6 se řeší globálně nativně:
   text-dark/secondary → #1a1a1a přes --bs-*-rgb, text-success/info → zelená,
   a text-primary/text-warning byly v markupu přemapovány (name bez třídy = dědí
   tmavou, translate ikona → .text-success). Nulová vizuální změna.) */
/* Pagination — pill chips */
.pagination .page-item .page-link {
    background-color: #f9f9f9;
    border: none;
    border-radius: 9999px;
    color: #1a1a1a;
    margin: 0 0.125rem;
}
.pagination .page-item.active .page-link {
    background-color: #4fde5c;
    color: #1a1a1a;
}
.pagination .page-link:focus {
    box-shadow: none;
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

/* moved from recruiters/templates/recruiters/my_employers.html */

/* was inline style="max-height:100px; overflow:hidden;" on description preview box */
.rme-desc-preview {
    max-height: 100px;
    overflow: hidden;
}

/* moved from applicants/templates/applicants/resume_list.html */

/* replaces inline style="cursor:pointer" on file-upload <label> elements */
.arl-cursor-pointer {
    cursor: pointer;
}

/* moved from applicants/templates/applicants/resume_form.html */
/* Nothing to move: the only inline style (style="display:none" on #delete-photo-form)
   was replaced by the existing Bootstrap utility class "d-none" (exact equivalent),
   which already lives in the shared stylesheet/Bootstrap. No new CSS created. */

/* moved from templates/404.html */
.error-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.error-code .digit {
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
    color: #1a1a1a;
    letter-spacing: -0.04em;
}

.error-code .zero {
    color: #4fde5c;
    position: relative;
    animation: pulse404 2s ease-in-out infinite;
}

.error-code .zero i {
    font-size: 4.5rem;
}

@keyframes pulse404 {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

.error-page .btn-outline-secondary {
    background-color: #f9f9f9;
    border: none;
    border-radius: 9999px;
    box-shadow: none;
    color: #1a1a1a;
}

.error-page .btn-outline-secondary:hover {
    background-color: #f9f9f9;
    color: #1a1a1a;
}

.error-page .btn-outline-secondary:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    box-shadow: none;
}

/* pro_uchazece.html — hero/CTA background glow (restored from template <style>) */
.applicant-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(79, 222, 92, 0.12) 0%, transparent 60%);
}

.applicant-cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(79, 222, 92, 0.12) 0%, transparent 60%);
}

/* ── Social login buttons (Google / Seznam) ── */
.oauth-login {
    margin-top: 1rem;
}
.oauth-login__sep {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    margin: 1rem 0;
}
.oauth-login__sep::before,
.oauth-login__sep::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid var(--bs-border-color);
}
.oauth-login__sep span {
    padding: 0 .75rem;
}
.oauth-login__btn {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 600;
}
.oauth-login__btn:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
.oauth-login__btn--seznam {
    border-color: #cc0000;
    color: #cc0000;
}
.oauth-login__btn--seznam:hover {
    background: #cc0000;
    border-color: #cc0000;
    color: #fff;
}


/* ── Pro firmy: maskot v sekcích funkcí ── */
.sales-mascot {
    max-height: 320px;
    width: auto;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .12));
}
.sales-mascot--sm { max-height: 230px; }
/* maskot stojící vedle ukázkové karty (jen širší obrazovky) */
.sales-mascot--side {
    max-height: 250px;
    max-width: 210px;      /* pojistka: široká póza nesmí vytlačit kartu */
    width: auto;
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .15));
}
/* nohama přesně na spodní hraně sekce (kompenzuje py-5 = 3rem paddingu) */
.sales-mascot--ground {
    margin-bottom: -3rem;
}
.sales-fn-section { scroll-margin-top: 90px; }

/* ─────────────── Týmové CRM (/tym/) ─────────────── */
/* Pipeline board — sloupce stavů se ZALAMUJÍ do řad (žádný boční
   scroll: na osmi stavech byl pás nepřehledný a posuvník na macOS
   neviditelný). Mobile-first: na telefonu přirozeně jeden sloupec. */
.crm-pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding-bottom: .5rem;
}
.crm-pipeline__col {
    min-width: 0;
}
.crm-pipeline__list {
    max-height: 70vh;
    overflow-y: auto;
}
.crm-subnav .nav-link { padding: .35rem .9rem; }

/* Našeptávač firem ve formuláři leadu — plovoucí seznam pod inputem. */
.crm-ac {
    z-index: 1050;
    max-height: 320px;
    overflow-y: auto;
}

/* Štítek projektu v CRM (Flekni / HRdinsky / …) — menší než stavová pilulka,
   projekt má být poznat, ne přebít stav leadu. */
.crm-project-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* Řádkové editace číselníků v CRM nastavení. Šířky jsou tady, ne inline —
   mobile first: na úzkém displeji zabere pole celý řádek a teprve od sm
   se zúží do jedné řady. */

@media (max-width: 575.98px) {
    .crm-input-name,
    .crm-input-icon { flex: 1 1 100%; }
}

/* Honeypot obal. MUSÍ to být display:none — autofill (Chrome/Safari/správci
   hesel) vyplňuje i pole odsunutá mimo obrazovku, a přesně to 10.–15. 8.
   tiše zahazovalo přihlášky reálných lidí. Třída místo inline style=,
   ať ji kontrolní program umí vyžadovat. */
.hp-skryte { display: none; }


/* ============================================================
   MŘÍŽKY — počet sloupců podle počtu položek
   ============================================================ */
/* auto-fit dá na širokém displeji vždycky maximum sloupců, takže šest
   položek spadne jako 4 + 2 a vpravo zeje díra. Pravidla níž se chytají
   atributu data-pocet, který šablona doplňuje z délky kolekce — proto se
   uplatní JEN tam, kde je záměrně uvedený (opt-in), ne plošně.
   Počty 5, 6 a 9 vyjdou na tři sloupce beze zbytku, 1 a 2 by se jinak
   roztáhly přes celou šířku. Menší displeje řeší dál auto-fit. */
@media (min-width: 992px) {
    [data-pocet="6"],
    [data-pocet="9"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    [data-pocet="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    [data-pocet="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-pocet="1"] {
        grid-template-columns: minmax(0, 460px);
        justify-content: center;
    }
}

/* Čtyři položky: až od 1200 px, aby se karty nezmáčkly pod čitelnou šířku. */
@media (min-width: 1200px) {
    [data-pocet="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Pět položek se nerozdělí beze zbytku do žádného rozumného počtu sloupců.
   Šestisloupcová mřížka s položkami přes dva sloupce dá 3 + 2, kde druhá
   řada sedí na střed — místo díry vpravo je odsazení symetrické. */
@media (min-width: 992px) {
    [data-pocet="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    [data-pocet="5"] > * { grid-column: span 2; }
    [data-pocet="5"] > :nth-child(4) { grid-column: 2 / span 2; }
}

/* Tablet (2 sloupce): lichý počet nechá poslední kartu samotnou vlevo.
   Čtyřsloupcová mřížka s kartami přes dva sloupce dá stejné dvě karty
   na řádek, ale osamocenou poslední posadí na střed. Pod 576 px je
   jeden sloupec, tam díra vzniknout nemůže. */
@media (min-width: 576px) and (max-width: 991.98px) {
    [data-pocet="3"],
    [data-pocet="5"],
    [data-pocet="7"],
    [data-pocet="9"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    [data-pocet="3"] > *,
    [data-pocet="5"] > *,
    [data-pocet="7"] > *,
    [data-pocet="9"] > * { grid-column: span 2; }

    [data-pocet="3"] > :last-child,
    [data-pocet="5"] > :last-child,
    [data-pocet="7"] > :last-child,
    [data-pocet="9"] > :last-child { grid-column: 2 / span 2; }
}

/* Sedm položek na desktopu: tři sloupce dají 3 + 3 + 1 a poslední karta
   zůstane sama vlevo. Stejný trik jako u pětice — šest stop, karta přes
   dvě, osamocená poslední doprostřed. */
@media (min-width: 992px) {
    [data-pocet="7"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    [data-pocet="7"] > * { grid-column: span 2; }
    [data-pocet="7"] > :last-child { grid-column: 3 / span 2; }
}

/* Čtyři položky na tabletu: mřížka s drobnými kartami (pruh s čísly) jich
   pojme tři, takže vyjde 3 + 1. Dva sloupce dají 2 + 2 bez zbytku. */
@media (min-width: 576px) and (max-width: 991.98px) {
    [data-pocet="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   OBRÁZKOVÁ POLE V PORTÁLU — mazání tlačítkem
   ============================================================ */
/* Nahrazuje výchozí zaškrtávátko „Zrušit", které mazalo až při uložení
   celého formuláře. Viz recruiters/widgets.py. */
.obrazek-aktualni {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.obrazek-aktualni a {
    word-break: break-all;
    font-size: .875rem;
}
.obrazek-aktualni .obrazek-smazat {
    flex-shrink: 0;
    white-space: nowrap;
}
.obrazek-zmenit {
    margin-bottom: .25rem;
    font-size: .875rem;
    font-weight: 600;
}

/* Čtyři položky mezi 992 a 1199 px: čtyři sloupce by karty zmáčkly pod
   čitelnou šířku, auto-fit by dal tři a zbyla by díra. Dva sloupce vyjdou. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    [data-pocet="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Klikací řádky tabulek (data-href, static/js/row-link.js) ── */
tr[data-href] { cursor: pointer; }
.jmeno-sipka {
    font-size: .7rem;
    margin-left: .35rem;
    color: #6c757d;
    vertical-align: middle;
}

/* ============================================================
   NASTAVENÍ CRM — řádky číselníků: pevná mřížka
   ============================================================ */
/* Flex-wrap lámal každý řádek jinde (štítky mají různou šířku) a na
   užších oknech se fajfky a koše rozsypaly na vlastní řádky. Pevná
   šablona sloupců drží všechny řádky sekce identicky; ovládací prvky
   jsou přímé buňky gridu a k formuláři patří přes atribut form="".
   Mobile-first: pod md jeden sloupec pod druhým. */
.crm-radek {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem .75rem;
    align-items: center;
}
.crm-radek .form-check { margin-bottom: 0; white-space: nowrap; }
.crm-radek__akce { display: flex; gap: .5rem; justify-content: flex-end; }
.crm-radek__pozn { grid-column: 1 / -1; }

/* Každý řádek je VLASTNÍ grid, takže sloupce se mezi řádky srovnají jen
   tehdy, když jsou šířky deterministické. Proto je pružný jedině název
   (1fr) a všechno ostatní má PEVNOU šířku — včetně slotu akcí, který
   zůstává rezervovaný i u řádku bez koše (položka, kterou nelze smazat).
   Bez toho měl „V jednání" jinak široká pole než sousedi a karta
   vypadala rozsypaně.
   Pevné šířky vycházejí ze změřeného max-content popisků (Výchozí 74,
   Aktivní 67, Kontakt 72, Akt. 49, dvě tlačítka 72 px) — proto se text
   nikdy nezalomí.
   Jednořádkový režim se zapíná podle šířky KARTY (container query), ne
   viewportu. Práh má KAŽDÁ sekce vlastní: je to součet jejích sloupců
   plus mezery. Společný práh lhal — sedmisloupcové „Typy aktivit"
   potřebují o 110 px víc než „Stavy" a v užší kartě přetékaly. */
.list-group-item:has(> .crm-radek) { container-type: inline-size; }

.crm-radek__akce { justify-content: flex-start; }

/* zdroj: 8+4.5+3.5+4.75 rem + 3 mezery = 23 rem */
@container (min-width: 24rem) {
    .crm-radek--zdroj {
        grid-template-columns: minmax(8rem, 1fr) 4.5rem 3.5rem 4.75rem;
    }
}
/* projekt: 8+3.2+4.5+5+4.5+4.75 rem + 5 mezer = 33.7 rem */
@container (min-width: 35rem) {
    .crm-radek--projekt {
        grid-template-columns: minmax(8rem, 1fr) 3.2rem 4.5rem 5rem 4.5rem 4.75rem;
    }
}
/* stav: 8+3.2+9+4.5+4.5+4.75 rem + 5 mezer = 37.7 rem */
@container (min-width: 39rem) {
    .crm-radek--stav {
        grid-template-columns: minmax(8rem, 1fr) 3.2rem 9rem 4.5rem 4.5rem 4.75rem;
    }
}
/* aktivita: 1.6+8+9+4.5+4.75+3.5+4.75 rem + 6 mezer = 40.6 rem */
@container (min-width: 42rem) {
    .crm-radek--aktivita {
        grid-template-columns: 1.6rem minmax(8rem, 1fr) 9rem 4.5rem 4.75rem 3.5rem 4.75rem;
    }
}