/* =========================================================================
   Klariti web — sdílené vylepšení nad Elementor exportem:
   1) centrování hlavičky, 2) Apple theme toggle (shodný s CRM/Service Deskem),
   3) tmavý motiv, 4) polish přidaných sekcí (SD formulář, admin rozcestník).
   Pozn.: gradient hero záměrně zůstává i v dark mode.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) CENTROVÁNÍ HLAVIČKY
   Export měl v inline stylu zapečenou pevnou šířku (width:1033px; position:fixed),
   proto seděla vlevo. Přebijeme na plnou šířku + vycentrovaný boxovaný obsah.
   ------------------------------------------------------------------------- */
header.elementor-location-header > .elementor-element.elementor-sticky,
header.elementor-location-header > .e-con.e-parent {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Vnitřní boxovaný kontejner drží symetrickou max-šířku a je vystředěný. */
header.elementor-location-header .e-con-inner {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* -------------------------------------------------------------------------
   2) APPLE THEME TOGGLE (vzhled shodný s Klariti CRM / Service Desk)
   ------------------------------------------------------------------------- */
.kw-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 4px;
  flex: none;
}
.kw-theme-toggle svg { width: 15px; height: 15px; opacity: .55; flex: none; transition: opacity .15s, color .15s; }
html:not(.dark-theme) .kw-theme-toggle .kw-sun  { color: #E0A52E; opacity: 1; }
html.dark-theme        .kw-theme-toggle .kw-moon { color: #FFCC00; opacity: 1; }
.kw-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.kw-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.kw-slider {
  position: relative; width: 36px; height: 18px; background-color: #c7ccd6;
  border-radius: 20px; transition: background-color .2s cubic-bezier(.4,0,.2,1);
}
.kw-slider::before {
  content: ""; position: absolute; height: 14px; width: 14px; left: 2px; bottom: 2px;
  background: #fff; border-radius: 50%;
  transition: transform .2s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 2px 4px rgba(0,0,0,.15), 0 0 1px rgba(0,0,0,.1);
}
.kw-switch input:checked + .kw-slider { background-color: #429CD6; }
.kw-switch input:checked + .kw-slider::before { transform: translateX(18px); }
.kw-switch input:focus-visible + .kw-slider { outline: 3px solid rgba(66,156,214,.4); outline-offset: 2px; }
/* V průhledné/gradientové hlavičce (světlý režim) je track lehce světlejší pro kontrast. */
.my-nav .kw-slider { background-color: rgba(20,30,45,.22); }
html.dark-theme .my-nav .kw-slider { background-color: rgba(255,255,255,.28); }
html.dark-theme .my-nav .kw-switch input:checked + .kw-slider { background-color: #5AACE2; }

/* -------------------------------------------------------------------------
   3) TMAVÝ MOTIV
   Obsah webu je transparentní s tmavým textem na bílém pozadí stránky,
   takže stačí ztmavit pozadí a zesvětlit text. Hero (gradient/globus) zůstává.
   ------------------------------------------------------------------------- */
:root { --kw-dark-bg: #0f1319; --kw-dark-surface: #171c25; --kw-dark-surface-2: #1e2530;
        --kw-dark-line: rgba(255,255,255,.10); --kw-dark-text: #e7ecf2; --kw-dark-muted: #aab4c0; }

html.dark-theme,
html.dark-theme body { background: var(--kw-dark-bg) !important; }

/* KLÍČOVÉ: Elementor bere barvy textu z globálních proměnných
   (--e-global-color-primary/text = #231F20). Přebitím proměnných se korektně
   přebarví VŠECHNY nadpisy i texty na všech stránkách naráz — bez boje se
   specificitou a bez záplavy !important. */
html.dark-theme {
  --e-global-color-primary:   #e7ecf2;
  --e-global-color-text:      #d7dee7;
  --e-global-color-secondary: #b9a9ff;   /* fialová Klariti zesvětlená pro kontrast */
  --e-global-color-accent:    #8fa6ff;
}

/* Obsahové kořeny: hlavní stránka je `wp-page`, ale podstránky (metody ®365,
   detaily poradenských služeb, kontakt, GDPR) jsou `wp-post` a karty v carouselu
   `loop-item`. Musí být pokryté všechny, jinak zůstane tmavý text na tmavém. */
html.dark-theme :is([data-elementor-type="wp-page"],
                    [data-elementor-type="wp-post"],
                    [data-elementor-type="loop-item"]) { background: transparent; }

/* Text: sjednoceně světlý pro čitelnost (barevné akcenty ustupují kontrastu). */
html.dark-theme :is([data-elementor-type="wp-page"],
                    [data-elementor-type="wp-post"],
                    [data-elementor-type="loop-item"])
  :is(h1,h2,h3,h4,h5,h6,p,li,span,strong,em,blockquote,td,th,
      .elementor-heading-title,.elementor-icon-list-text,.elementor-widget-text-editor) {
  color: var(--kw-dark-text) !important;
}
html.dark-theme :is([data-elementor-type="wp-page"],
                    [data-elementor-type="wp-post"],
                    [data-elementor-type="loop-item"]) a:not(.elementor-button) { color: #8fc4ea !important; }
html.dark-theme :is([data-elementor-type="wp-page"],
                    [data-elementor-type="wp-post"],
                    [data-elementor-type="loop-item"]) a:not(.elementor-button):hover { color: #b9dbf3 !important; }

/* Kontejnery obsahu, které mají v light režimu bílé/světlé pozadí (karty na
   podstránkách). Necháváme je jako „povrch", ne jako bílé fleky. */
html.dark-theme :is([data-elementor-type="wp-post"],
                    [data-elementor-type="wp-page"]) .e-con[data-settings*="background"] {
  background-color: var(--kw-dark-surface) !important;
}

/* HERO zůstává světlý text (gradient/globus) — přebít případný override zpět na bílou. */
html.dark-theme .elementor-element-298601e :is(h1,h2,h3,p,span,strong) { color: #ffffff !important; }

/* Hlavička: v dark režimu tmavé sklo místo světlého. */
html.dark-theme .my-nav { background-color: rgba(15,19,25,.82) !important; backdrop-filter: saturate(160%) blur(12px); }
/* Logo je tmavé (klariti.png) → v dark režimu zesvětlit na bílé, ať je čitelné. */
html.dark-theme header.elementor-location-header img[src*="klariti.png"] { filter: brightness(0) invert(1); }
html.dark-theme header.elementor-location-header .e-n-menu-title-text,
html.dark-theme header.elementor-location-header .elementor-item,
html.dark-theme header.elementor-location-header a { color: var(--kw-dark-text) !important; }
html.dark-theme header.elementor-location-header .elementor-icon { color: var(--kw-dark-text) !important; }

/* Rozbalovací mega-menu / mobilní menu panely bývají bílé → ztmavit.
   POZOR: scope musí zůstat uvnitř hlavičky. Dřívější globální varianta
   (.e-con.e-child[data-settings*="background"]) ztmavovala i kontejnery
   podstránek, zatímco jejich text zůstal tmavý → nečitelné. */
html.dark-theme header.elementor-location-header .e-n-menu-dropdown-icon,
html.dark-theme header.elementor-location-header .e-con.e-child[data-settings*="background"],
html.dark-theme header.elementor-location-header .elementor-nav-menu--dropdown,
html.dark-theme header.elementor-location-header .e-n-menu-content > .e-con {
  background-color: var(--kw-dark-surface) !important;
}

/* Metody ®365 — ikony jsou tmavá/brandová kresba; na tmavém by mizely.
   Dáme jim jemnou světlou destičku, ať zůstanou čitelné (kompromis). */
html.dark-theme .elementor-widget-image img[src*="metoda-"],
html.dark-theme img[src*="octagon"] {
  background: rgba(255,255,255,.92); border-radius: 12px; padding: 8px;
}

/* Odlišné světlé „karty"/oddělovače v obsahu (kdyby nějaké byly) */
html.dark-theme div[data-elementor-type="wp-page"] .elementor-divider-separator { border-color: var(--kw-dark-line) !important; }

/* -------------------------------------------------------------------------
   4) POLISH — přidané sekce Service Desk / Admin (.kw-*)
   Světlý i tmavý režim; konzistentní rozestupy, stavy, čitelnost.
   ------------------------------------------------------------------------- */
/* Admin: přihlašovací karta na střed */
.kw-authbox { margin-left: auto !important; margin-right: auto !important; }

/* --- Rozcestník interních aplikací: 4 karty ---------------------------- */
.kw-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 8px; }
@media (max-width: 1100px) { .kw-grid4 { grid-template-columns: repeat(2, 1fr); } }  /* 2x2 */
@media (max-width: 640px)  { .kw-grid4 { grid-template-columns: 1fr; } }             /* 1 sloupec */

/* Karta „ve vývoji" — tlumená a záměrně NEproklikatelná. */
.kw-portal--soon {
  position: relative; cursor: default; opacity: .62;
  background: #f7f9fc !important; border-style: dashed !important;
  box-shadow: none !important;
}
.kw-portal--soon:hover { transform: none !important; border-color: #e7edf3 !important; box-shadow: none !important; }
.kw-portal--soon .ic { background: #eef1f5 !important; color: #8a94a2 !important; }
.kw-portal--soon h3 { color: #6b7686 !important; }
.kw-devbadge {
  position: absolute; top: 14px; right: 14px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #8a6d1f; background: #fdf3d6; border: 1px solid #f0dfa8;
  padding: 4px 10px; border-radius: 999px;
}
.go--muted { color: #8a94a2 !important; font-weight: 600; }

html.dark-theme .kw-portal--soon {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.12) !important;
}
html.dark-theme .kw-portal--soon .ic { background: rgba(255,255,255,.06) !important; color: #8a94a2 !important; }
html.dark-theme .kw-portal--soon h3 { color: #9aa5b3 !important; }
html.dark-theme .kw-devbadge { color: #ffd77a; background: rgba(255,204,0,.12); border-color: rgba(255,204,0,.32); }
html.dark-theme .go--muted { color: #8a94a2 !important; }

/* --- Shell portálových stránek ----------------------------------------
   Stejné jako inline styly starších fragmentů (service-desk/admin/konfigurátor),
   ty si je definují samy v <body> a mají tedy přednost — tohle je pro nové
   stránky, aby se styl netriploval. */
.kw-page { font-family: "Helvetica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #2b2f38; }
.kw-page .kw-wrap { max-width: 1140px; margin: 0 auto; }
.kw-page .kw-hero { background: linear-gradient(120deg,#ff4d7e 0%,#a24bd6 45%,#429CD6 100%); color: #fff; padding: 120px 20px 72px; }
.kw-page .kw-hero h1 { font-size: clamp(2rem,4.5vw,3rem); font-weight: 700; margin: 0 0 14px; letter-spacing: -.01em; color: #fff; }
.kw-page .kw-hero p { font-size: 1.12rem; max-width: 72ch; margin: 0 0 6px; opacity: .96; color: #fff; }
.kw-page .kw-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 700; opacity: .9; margin: 0 0 14px; }
.kw-page .kw-body { padding: 56px 20px 80px; background: #f6f8fb; }
.kw-page .kw-card { background: #fff; border: 1px solid #e7edf3; border-radius: 16px; box-shadow: 0 12px 40px rgba(24,42,68,.06); }
.kw-page .kw-pad { padding: 32px; }
.kw-page a.kw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 1rem;
  color: #fff; background: linear-gradient(120deg,#a24bd6,#429CD6); text-decoration: none; transition: .18s;
}
.kw-page a.kw-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(66,156,214,.28); color: #fff; }

/* --- Obsahové stránky služeb (.kw-doc) --------------------------------- */
/* Sdílené pro Finanční řízení / Personální řízení / Realizace dashboardů.
   Vizuál drží styl klariti.cz (gradient hero, bílé karty, brand modrá). */
.kw-doc .kw-claim {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 700; letter-spacing: -.01em;
  line-height: 1.35; margin: 0 0 10px; color: #1D75AF;
}
.kw-doc .kw-lead { font-size: 1.08rem; color: #4a5563; max-width: 72ch; margin: 0 0 8px; }
.kw-doc .kw-sec { margin-top: 46px; }
.kw-doc .kw-sec:first-of-type { margin-top: 0; }
.kw-doc h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.01em; margin: 0 0 12px; }
.kw-doc h3 { font-size: 1.12rem; margin: 0 0 8px; }

/* Pásmo s výrazným claimem */
.kw-band {
  background: linear-gradient(120deg, #a24bd6, #429CD6); color: #fff;
  border-radius: 18px; padding: 30px 34px; margin: 34px 0;
}
.kw-band h2, .kw-band p { color: #fff !important; }
.kw-band p { margin: 8px 0 0; opacity: .95; }

/* Mřížka bloků přínosů */
.kw-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kw-blocks.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .kw-blocks, .kw-blocks.two { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kw-blocks, .kw-blocks.two { grid-template-columns: 1fr; } }
.kw-block {
  background: #fff; border: 1px solid #e7edf3; border-radius: 14px; padding: 22px 24px;
  box-shadow: 0 10px 34px rgba(24,42,68,.05); transition: .18s;
}
.kw-block:hover { border-color: #429CD6; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(66,156,214,.14); }
.kw-block h3 { color: #1D75AF; }
.kw-block p { margin: 0; color: #4a5563; font-size: .95rem; }

/* Odrážkové seznamy s brandovou fajfkou */
.kw-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.kw-list.cols2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 780px) { .kw-list.cols2 { grid-template-columns: 1fr; } }
.kw-list li { display: flex; gap: 12px; align-items: flex-start; color: #3d4a57; font-size: .97rem; }
.kw-list li::before {
  content: ""; flex: 0 0 20px; height: 20px; margin-top: 2px; border-radius: 6px;
  background: #eaf4fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D75AF' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.kw-list li b { color: #16222e; }

/* Výčet služeb jako štítky */
.kw-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.kw-tag {
  font-weight: 600; font-size: .92rem; color: #1D75AF; background: #eaf4fb;
  border: 1px solid #cfe6f6; border-radius: 999px; padding: 9px 16px;
}

/* Řetěz propojených systémů */
.kw-chain { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 0; }
.kw-chain span {
  font-weight: 600; font-size: .9rem; color: #16222e; background: #fff;
  border: 1px solid #e2e9f0; border-radius: 8px; padding: 8px 13px;
}
.kw-neg { display: grid; gap: 6px; margin: 16px 0 0; color: #6b7686; font-size: .95rem; }

html.dark-theme .kw-doc .kw-claim { color: #8fc4ea; }
html.dark-theme .kw-doc .kw-lead,
html.dark-theme .kw-block p,
html.dark-theme .kw-list li,
html.dark-theme .kw-neg { color: var(--kw-dark-muted) !important; }
html.dark-theme .kw-block {
  background: var(--kw-dark-surface) !important; border-color: var(--kw-dark-line) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.35) !important;
}
html.dark-theme .kw-block h3 { color: #8fc4ea !important; }
html.dark-theme .kw-list li b { color: var(--kw-dark-text) !important; }
html.dark-theme .kw-tag { background: rgba(90,172,226,.14); border-color: rgba(90,172,226,.3); color: #a9d6f4; }
html.dark-theme .kw-chain span {
  background: var(--kw-dark-surface-2); border-color: var(--kw-dark-line); color: var(--kw-dark-text);
}

/* --- Konfigurátor produktů: tmavý režim -------------------------------- */
html.dark-theme button.kf-opt {
  background-color: var(--kw-dark-surface-2) !important;
  border-color: var(--kw-dark-line) !important;
  color: var(--kw-dark-text) !important;
}
html.dark-theme button.kf-opt:hover { border-color: #5AACE2 !important; }
html.dark-theme button.kf-opt.sel {
  background-color: rgba(90,172,226,.16) !important; border-color: #5AACE2 !important;
}
html.dark-theme .kf-opt span.d { color: var(--kw-dark-muted) !important; }
html.dark-theme .kf-opt .tick { border-color: rgba(255,255,255,.25); }
html.dark-theme .kf-step { background: rgba(255,255,255,.06); color: var(--kw-dark-muted); }
html.dark-theme .kf-step.done { background: rgba(90,172,226,.16); color: #8fc4ea; border-color: rgba(90,172,226,.3); }
html.dark-theme .kf-hint,
html.dark-theme .kf-rec p { color: var(--kw-dark-muted) !important; }
html.dark-theme .kf-rec {
  background: var(--kw-dark-surface-2) !important; border-color: var(--kw-dark-line) !important;
}
html.dark-theme .kf-rec h4 { color: var(--kw-dark-text) !important; }
html.dark-theme .kf-rec a.more { color: #8fc4ea !important; }
html.dark-theme .kf-chip {
  background: rgba(90,172,226,.14); border-color: rgba(90,172,226,.3); color: #a9d6f4;
}
html.dark-theme .kf-fit { background: rgba(94,199,90,.16); border-color: rgba(94,199,90,.34); color: #7fd88f; }
html.dark-theme .kf-fit.mid { background: rgba(255,204,0,.12); border-color: rgba(255,204,0,.32); color: #ffd77a; }
html.dark-theme .kf-cta { border-top-color: var(--kw-dark-line) !important; }
html.dark-theme button.kw-btn--ghost {
  background-color: transparent !important; color: var(--kw-dark-muted) !important;
  border-color: var(--kw-dark-line) !important;
}
html.dark-theme button.kw-btn--ghost:hover { background-color: rgba(255,255,255,.06) !important; color: var(--kw-dark-text) !important; }

/* Tmavý režim pro SD/admin */
html.dark-theme .kw-body { background: var(--kw-dark-bg) !important; }
html.dark-theme .kw-page { color: var(--kw-dark-text); }
html.dark-theme .kw-card,
html.dark-theme .kw-aside,
html.dark-theme .kw-portal {
  background: var(--kw-dark-surface) !important;
  border-color: var(--kw-dark-line) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.35) !important;
}
html.dark-theme .kw-page :is(h1,h2,h3,label,li) { color: var(--kw-dark-text) !important; }
html.dark-theme .kw-page p,
html.dark-theme .kw-aside ul,
html.dark-theme .kw-note { color: var(--kw-dark-muted) !important; }
html.dark-theme .kw-field input,
html.dark-theme .kw-field select,
html.dark-theme .kw-field textarea {
  background: var(--kw-dark-surface-2) !important;
  border-color: var(--kw-dark-line) !important;
  color: var(--kw-dark-text) !important;
}
html.dark-theme .kw-field input::placeholder,
html.dark-theme .kw-field textarea::placeholder { color: #7d8794 !important; }
html.dark-theme .kw-portal .ic { background: rgba(90,172,226,.16) !important; color: #8fc4ea !important; }
html.dark-theme .kw-portal .go { color: #8fc4ea !important; }
html.dark-theme .kw-eyebrow-d { color: #8fc4ea !important; }
html.dark-theme .kw-badge { background: var(--kw-dark-surface-2) !important; border-color: var(--kw-dark-line) !important; color: var(--kw-dark-text) !important; }
html.dark-theme .kw-ticket { background: rgba(90,172,226,.14) !important; color: #a9d6f4 !important; }
html.dark-theme .kw-check { background: rgba(94,199,90,.16) !important; }

/* Jemný polish stavů tlačítek napříč (platí i light) */
.kw-btn:active { transform: translateY(0); filter: brightness(.98); }

@media (prefers-reduced-motion: reduce) {
  .kw-slider, .kw-slider::before { transition: none !important; }
}