/* ============================================================
   ss-fixes.css | SoftwareStudio Group Sp. z o.o.
   Warstwa korekt: dostepnosc, kontrast WCAG AA, dotyk,
   iOS/Android, ujednolicenie instrukcji obslugi.
   Wczytywany JAKO OSTATNI arkusz na stronie - nie wymaga
   ani jednego !important poza dwoma wyjatkami opisanymi nizej.
   Numeracja sekcji odpowiada znaleziskom z audytu.
   ============================================================ */

/* --- 03. Odnosnik "Przejdz do tresci" -------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 900;
}
.skip-link:focus {
  left: 16px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 20px;
  background: var(--ss-navy);
  color: #fff;
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-sm);
  outline: 3px solid var(--ss-orange);
  outline-offset: 2px;
  text-decoration: none;
}
main:focus { outline: none; }

/* --- 06. Widoczny fokus klawiatury ---------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ss-orange-ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.hero :focus-visible,
.ai-band :focus-visible,
.roi-promo :focus-visible,
.contact-card :focus-visible,
.site-footer :focus-visible,
.industry-card--cta :focus-visible,
header :focus-visible {
  outline-color: #ffd9bd;
}
/* Wyjatek 1/2 z !important: home.css:247 wprost gasi pierscien. */
.post-card .product-link:focus-visible {
  outline: 3px solid var(--ss-orange-ink) !important;
  outline-offset: 2px;
}

/* --- 04. Kontrast: wypelnienia z bialym tekstem ---------- */
.btn--primary,
.main-nav .btn--demo,
.sp-btn,
.dcx-phone-btn,
.hf-badge,
.dcx-sync,
.idx-alpha-chip.is-active {
  background: var(--ss-orange-ink);
  border-color: var(--ss-orange-ink);
  color: #fff;
}
.btn--primary:hover,
.main-nav .btn--demo:hover,
.idx-alpha-chip.is-active:hover {
  background: #a8380a;
  border-color: #a8380a;
  color: #fff;
}
.mcard:hover .product-link {
  background: var(--ss-orange-ink);
  border-color: var(--ss-orange-ink);
  color: #fff;
}
/* Pas zaufania: bialy tekst na pomaranczu to 2,9:1 - na granat */
.trust { background: var(--ss-navy); }
.trust-item svg { opacity: 1; }

/* --- 04. Kontrast: pomaranczowy TEKST na jasnym tle ------ */
.eyebrow,
.section-title em,
.feature-label,
.mcard .tag,
.mcard .product-link,
.mcard .benefit strong,
.post-meta .tag,
.post-card .product-link,
.branch-card .tag,
.industry-num,
.industry-card--cta a,
.timeline-year,
.idx-card-tag,
.tech-chip .dot + span,
.nav-card-links li::before,
a:hover,
.main-nav a:hover,
.dropdown-toggle:hover,
.dropdown-menu a:hover,
.sitemap-col a:hover,
.branch-card a.contact-link:hover,
.idx-card-title a:hover,
.hub-list a:hover {
  color: var(--ss-orange-text);
}
.eyebrow::before { background: var(--ss-orange-text); }
.mcard .product-link {
  background: rgba(194,65,12,.08);
  border-color: rgba(194,65,12,.28);
}

/* --- 04. Kontrast na ciemnym tle: minimum rgba(255,255,255,.62) */
.hero-lead,
/* .section-lead NIE nalezy do tej listy: 157 sekcji .wide-section stoi na bialym
   tle, a wyjatek nizej ratowal tylko .section i .section--alt - w pozostalych
   akapit wiodacy stawal sie bialy na bialym. Kolor bazowy (vss.css:76) jest
   poprawny, a wersje na ciemnym tle ustawia ponizej regula .ai-band. */
.stat-label,
.hero-qcard span,
.ai-node p,
.ai-band .section-lead,
.roi-promo p,
.roi-promo-stats span,
.contact-card .row,
.hf-stage p,
.hf-stack,
.hf-pills span,
.sp-loc,
.fp-loc,
.fp-head,
.sp-head,
.mp-head,
.mp-stat-label,
.fp-stats-label,
.footer-brand p,
.footer-brand address,
.footer-bottom span {
  color: rgba(255,255,255,.74);
}
.fp-state--queue { color: rgba(255,255,255,.62); }
.ai-band .section-lead,
.roi-promo p { color: rgba(255,255,255,.78); }
/* Wyjatek na .ai-band musi byc po OBU stronach: pas AI lezy wewnatrz
   .wide-section.section--alt, wiec bez niego ciemny pas dostawal --ss-muted
   (2,8:1) zamiast bieli. */
.section--alt .section-lead:not(.ai-band .section-lead),
.section .section-lead:not(.ai-band .section-lead) { color: var(--ss-muted); }

/* --- 12. Dolna granica rozmiaru tekstu: 13 px ------------ */
.eyebrow,
.hero-badge,
.mcard .tag,
.post-meta .tag,
.post-meta time,
.branch-card .tag,
.idx-card-tag,
.idx-card-date,
.idx-count,
.timeline-year,
.feature-label,
.hf-tag,
.hf-stack,
.hf-pills span,
.sp-label,
.sp-head,
.sp-status,
.fp-head,
.fp-state,
.fp-doc,
.mp-head,
.mp-stat-label,
.fp-stats-label,
.stat-label,
.hero-qcard span,
.ai-node p,
.hf-stage p,
.roi-promo-stats span,
.shot-bar .url,
.dcx-row {
  font-size: var(--fs-label);
}
.fp-list li,
.tech-chip,
.nav-card-desc,
.nav-card-links a { font-size: var(--fs-sm); }

/* --- 08. Cele dotykowe 48 px ----------------------------- */
@media (max-width: 1024px) {
  .main-nav a,
  .dropdown-toggle,
  .dropdown-menu a {
    min-height: var(--tap);
    display: flex;
    align-items: center;
  }
  .main-nav .btn--demo { min-height: var(--tap); justify-content: center; }
  .nav-toggle { min-width: var(--tap); min-height: var(--tap); align-items: center; justify-content: center; }
  .idx-alpha-chip { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; }
  .footer-col ul a,
  .sitemap-col a,
  .footer-bottom a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .footer-social a { min-width: 44px; min-height: 44px; }
  .sitemap-col ul { gap: 2px; }
  .footer-bottom div { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; }
}

/* --- 05. iOS: pola formularzy min. 16 px ----------------- */
.field input,
.field select,
.field textarea,
.idx-search-input,
.index-search-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  font-size: 1rem;
}

/* --- 02. .reveal: bez JS tresc JEST widoczna ------------- */
.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
html.js .reveal.in { opacity: 1; transform: none; }

/* --- 10. Pelna obsluga prefers-reduced-motion ----------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 07. iOS 16-17: rozmycie naglowka ------------------- */
.site-header { -webkit-backdrop-filter: saturate(180%) blur(16px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--ss-white); }
}

/* --- 11. Wysokosc widoku na telefonie i bezpieczne marginesy */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
  nav.sidebar { height: calc(100dvh - 60px); }
}
@media (max-width: 1024px) {
  .main-nav { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .main-nav a:first-child { margin-top: 0; }
}
@media (max-width: 768px) {
  @supports (height: 100dvh) {
    nav.sidebar { max-height: calc(100dvh - 60px); }
  }
  nav.sidebar { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}
.site-footer { padding-bottom: env(safe-area-inset-bottom); }

/* --- iOS: overflow-x na html, nie na body (psuje sticky) - */
html { overflow-x: clip; }

/* --- 15. Chipy branz nie udaja przyciskow --------------- */
.chip { cursor: default; }
.chip:hover {
  transform: none;
  box-shadow: var(--sh-sm);
  border-color: var(--ss-border);
  color: var(--ss-navy-600);
  background: var(--ss-white);
}
.chip:hover::before { transform: none; }

/* --- 14. Tabele na telefonie ---------------------------- */
.table-scroll { -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  .cmp-table th:first-child,
  .cmp-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--ss-white);
    box-shadow: 1px 0 0 var(--ss-border);
  }
  main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   INSTRUKCJE OBSLUGI - 368 stron.
   Selektory bez klas (header, nav.sidebar, article) nie dotykaja
   witryny glownej, bo tam te elementy maja klasy o wyzszej
   specyficznosci (.site-header, .main-nav).
   ============================================================ */
body { font-family: var(--f-body); color: var(--ss-text); }

header {
  background: var(--ss-navy);
  box-shadow: 0 2px 6px rgba(12,19,32,.25);
}
header a { font-family: var(--f-head); }

nav.sidebar {
  background: var(--ss-bg-alt);
  border-right-color: var(--ss-border);
  font-family: var(--f-body);
}

/* Powrot na strone produktu. Stoi poza wzorcem .nav-section + ul, ktorego
   instrukcja-*.js uzywa do budowy zwijanych galezi - dlatego pozycja jest
   widoczna zawsze, niezaleznie od stanu drzewa. */
nav.sidebar .nav-powrot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 11px 20px;
  border-bottom: 1px solid var(--ss-border);
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ss-orange-text);
  text-decoration: none;
}
nav.sidebar .nav-powrot::before {
  content: "\2190";
  font-size: 1.15em;
  line-height: 1;
}
nav.sidebar .nav-powrot:hover,
nav.sidebar .nav-powrot:focus-visible {
  background: var(--ss-border-soft);
  color: var(--ss-orange-ink);
}

/* 13. Jeden akcent zamiast szesciu kolorow sekcji */
nav.sidebar .nav-section,
nav.sidebar .nav-section + ul,
nav.sidebar .nav-section--start,
nav.sidebar .nav-section--start + ul,
nav.sidebar .nav-section--wstep,
nav.sidebar .nav-section--wstep + ul,
nav.sidebar .nav-section--administrator,
nav.sidebar .nav-section--administrator + ul,
nav.sidebar .nav-section--kierownik,
nav.sidebar .nav-section--kierownik + ul,
nav.sidebar .nav-section--klient,
nav.sidebar .nav-section--klient + ul,
nav.sidebar .nav-section--android,
nav.sidebar .nav-section--android + ul,
nav.sidebar .nav-section--cmms,
nav.sidebar .nav-section--cmms + ul,
nav.sidebar .nav-section--magazyn,
nav.sidebar .nav-section--magazyn + ul {
  --nav-accent: var(--ss-navy);
  --nav-accent-bg: var(--ss-border-soft);
}
nav.sidebar .nav-section {
  font-family: var(--f-head);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ss-navy);
}
nav.sidebar .nav-section::before { background: var(--ss-orange); }
nav.sidebar ul li a {
  color: var(--ss-text);
  font-size: var(--fs-sm);
  padding: 9px 20px;
}
nav.sidebar ul li a:hover {
  background: var(--ss-border-soft);
  color: var(--ss-orange-text);
  border-left-color: var(--ss-orange);
}
nav.sidebar ul li a[aria-current="page"],
nav.sidebar ul li span[aria-current="page"] {
  background: rgba(255,106,19,.09);
  color: var(--ss-orange-text);
  border-left-color: var(--ss-orange);
  font-weight: 600;
}
@media (max-width: 768px) {
  nav.sidebar ul li a { min-height: var(--tap); display: flex; align-items: center; }
  nav.sidebar .nav-powrot { min-height: var(--tap); }
  nav.sidebar { border-bottom-color: var(--ss-orange); }
}

article h1, article h2, article h3, article h4 {
  font-family: var(--f-head);
  color: var(--ss-navy);
  letter-spacing: -.015em;
}
article, article p, article li { font-family: var(--f-body); }
article p, article li { font-size: var(--fs-base); line-height: 1.65; }
article p { max-width: 75ch; }
article a { color: var(--ss-blue); }
article a:hover { color: var(--ss-orange-text); }
main { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

/* Regulaminy: czerwien poza paleta marki */
.btn-pdf,
.btn-pdf:hover { background: var(--ss-orange-ink); border-color: var(--ss-orange-ink); }
/* Wyjatek 2/2 z !important: legal-pdf.css:29 ustawia kolor obrysu wprost. */
.btn-pdf:focus-visible { outline-color: var(--ss-orange-ink) !important; }

/* --- Liczby w tabelach i KPI: stale szerokosci cyfr ----- */
.cmp-table td,
.cmp-table th,
.stat-num,
.fp-stats-num,
.mp-stat-big,
.roi-promo-stats b,
[data-roi-val],
.dcx-row,
.fp-doc,
.sp-code {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   16. KONTRAST - przypadki znalezione w audycie (2026-09-05).
   Uzupelnienie sekcji 04. Sekcja 04 podmienia pomaranczowy tekst
   wedlug listy selektorow, ale czesc regul w vss.css, vss-article.css
   i home.css ma wyzsza specyficznosc i wygrywala. Kazdy selektor
   ponizej jest dobrany tak, by pokonac te wskazana przez audyt.
   Blok stoi na koncu pliku, wiec przy rownej specyficznosci
   rozstrzyga kolejnosc.
   ============================================================ */

/* --ss-orange (#ff6a13) jako TEKST na jasnym tle to 2,87:1 (na #fff0e7 2,58). */
.dcx-logo em,                   /* home.css .dcx-logo em */
.dcx-phone-top em,              /* home.css .dcx-phone-top em */
.scard .tag,                    /* vss.css .scard .tag */
.scard .product-link,           /* vss.css .product-link */
.scard .product-link .arr,
.feature-body .feature-label,   /* vss-article.css .feature-body .feature-label */
.gloss-card dt .gi,             /* vss-article.css .gloss-card dt .gi */
.form-legal a {                 /* home.css .form-legal a */
  color: var(--ss-orange-text);
}

/* Odwrotnosc sekcji 04: karta CTA ma ciemne tlo (--ss-ink), na ktorym
   --ss-orange-text daje 3,23:1, a brandowy pomaranczowy 6,48:1. */
.industry-card--cta .industry-num,
.industry-card--cta a,
.industry-card--cta .arr {
  color: var(--ss-orange);
}

/* Pasek statusow na bialym tle: zielen 3,30:1, pomaranczowy 3,50:1. */
.dcx-row .ok  { color: var(--ss-ok); }
.dcx-row .wip { color: var(--ss-orange-text); }

/* --ss-faint na --ss-bg-alt to 4,44:1 - tuz pod progiem. */
.fa-q .qn { color: var(--ss-muted); }

/* Regulaminy: reguly z bloku <style> w naglowku strony. Blok stoi przed
   tym arkuszem, wiec wystarczy rowna specyficznosc.
   Znacznik produktu mial byc bialy na pomaranczowym, ale przegrywal
   z '.product-card-header span' i wychodzil szary - 1,31:1. */
.product-card-header .product-badge {
  background: var(--ss-orange-ink);
  color: #fff;
}
.product-card-header span { color: rgba(255,255,255,.82); }
.doc-link-arrow,
.policy-card-arrow { color: var(--ss-muted); }
.doc-link:hover .doc-link-arrow,
.policy-card:hover .policy-card-arrow { color: var(--ss-orange-text); }