/* ═══════════════════════════════════════════════════════════════════
   KASYG-ESU — PRO polish layer (kxp-*)
   Globální profesionální vrstva: mikro-interakce, scroll-reveal,
   loading bar, spotlight karty, donut grafy, AI indikátory.
   Additivní — žádné kolize se style.css / enhance.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Globální detaily ──────────────────────────────────────────── */
::selection { background: rgba(124,107,255,.35); color: #fff; }
html[data-kx-theme="light"] ::selection { background: rgba(99,91,255,.22); color: inherit; }

* { scrollbar-width: thin; scrollbar-color: rgba(124,107,255,.35) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124,107,255,.45), rgba(124,107,255,.2));
  border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(124,107,255,.6); background-clip: padding-box; }

/* Plynulý vstup celé stránky */
.page-content { animation: kxpPageIn .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes kxpPageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Top loading bar (nprogress styl) ──────────────────────────── */
#kxpBar {
  position: fixed; top: 0; left: 0; height: 2.5px; width: 0%;
  background: linear-gradient(90deg, #635BFF, #8B5CF6, #C9A961);
  z-index: 99999; opacity: 0; pointer-events: none;
  box-shadow: 0 0 12px rgba(124,107,255,.8), 0 0 4px rgba(124,107,255,.6);
  transition: width .25s ease, opacity .4s ease;
}
#kxpBar.run { opacity: 1; }
#kxpBar::after {
  content: ""; position: absolute; right: 0; top: -2px; width: 70px; height: 7px;
  filter: blur(4px); background: rgba(157,144,255,.9);
  transform: rotate(2deg) translateY(1px);
}

/* ── Scroll-reveal (staggered) ─────────────────────────────────── */
.kxp-reveal {
  animation: none !important; /* vypne fadeInUp/countUp ze style.css, jinak fill-mode přebije reveal */
  opacity: 0; transform: translateY(16px) scale(.985);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--kxp-d, 0ms);
}
.kxp-reveal.kxp-in { opacity: 1; transform: none; }

/* ── Ripple efekt na tlačítkách ────────────────────────────────── */
.kxp-ink-host { position: relative; overflow: hidden; }
.kxp-ink {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 70%);
  transform: translate(-50%,-50%) scale(0);
  animation: kxpInk .55s ease-out forwards;
}
@keyframes kxpInk { to { transform: translate(-50%,-50%) scale(2.6); opacity: 0; } }

.btn, .kx-btn, .btn-login {
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease,
              background .2s ease, border-color .2s ease, filter .2s ease;
}
.btn:hover, .kx-btn:hover { transform: translateY(-1px); }
.btn:active, .kx-btn:active, .btn-login:active { transform: translateY(0) scale(.97); }
.btn-primary:hover, .kx-btn.primary:hover {
  box-shadow: 0 6px 20px -6px rgba(99,91,255,.55);
  filter: brightness(1.06);
}

/* ── Spotlight karty (kurzor podsvěcuje) ───────────────────────── */
.kxp-spot { position: relative; }
.kxp-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(360px circle at var(--kxp-mx, 50%) var(--kxp-my, 50%),
              rgba(124,107,255,.10), rgba(201,169,97,.04) 45%, transparent 62%);
  will-change: opacity;
}
.kxp-spot:hover::after { opacity: 1; }
html[data-kx-theme="light"] .kxp-spot::after {
  background: radial-gradient(420px circle at var(--kxp-mx, 50%) var(--kxp-my, 50%),
              rgba(99,91,255,.07), transparent 60%);
}

/* Jemnější lift karet + zvýraznění okraje.
   contain: omezuje reflow/repaint na kartu → rychlejší layout na velkých stránkách. */
.card, .kx-stat, .stat-card {
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease;
  contain: layout style;
}
.card:hover {
  transform: translateY(-2px);
  border-color: rgba(124,107,255,.28);
  box-shadow: 0 14px 38px -14px rgba(0,0,0,.5), 0 0 0 1px rgba(124,107,255,.08);
}
.kx-stat:hover, .stat-card:hover {
  border-color: rgba(124,107,255,.3);
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(124,107,255,.08);
}

/* ── Statický gradientní rámeček (hero / klíčové widgety) ───────
   Bez animace background-position → nulové průběžné překreslování.
   Místo toho jeden jemný glow-shadow (kompozitní, levný). */
.kxp-border-glow { position: relative; }
.kxp-border-glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg,
              rgba(124,107,255,.5), rgba(201,169,97,.3) 50%, rgba(124,107,255,.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ── Gradientní text (nadpisy, hero čísla) — statický ──────────── */
.kxp-grad-text {
  background: linear-gradient(110deg, #fff 18%, #b9aeff 52%, #e0c888 82%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Status dot s pulzujícími kruhy ────────────────────────────── */
.kxp-status { position: relative; display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; background: var(--kx-ok, #22c55e); vertical-align: middle; }
.kxp-status::before, .kxp-status::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; opacity: .55; animation: kxpPing 2.2s cubic-bezier(0,0,.2,1) infinite;
}
.kxp-status::after { animation-delay: 1.1s; }
.kxp-status.warn { background: var(--kx-warn, #f59e0b); }
.kxp-status.danger { background: var(--kx-danger, #ef4444); }
.kxp-status.off { background: #6b7280; }
.kxp-status.off::before, .kxp-status.off::after { animation: none; opacity: 0; }
@keyframes kxpPing { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.6); opacity: 0; } }

/* ── Donut chart (SVG, animovaný) ──────────────────────────────── */
.kxp-donut { position: relative; display: inline-grid; place-items: center; }
.kxp-donut svg { transform: rotate(-90deg); display: block; }
.kxp-donut .track { stroke: rgba(255,255,255,.07); }
html[data-kx-theme="light"] .kxp-donut .track { stroke: rgba(0,0,0,.07); }
.kxp-donut .arc {
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1);
  filter: drop-shadow(0 0 6px rgba(124,107,255,.35));
}
.kxp-donut .kxp-donut-label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: 18px;
}
.kxp-donut .kxp-donut-label small { display: block; font-size: 10px; font-weight: 500;
  color: var(--kx-text-muted, #8b94a4); text-align: center; margin-top: 2px; }

/* ── AI indikátory ─────────────────────────────────────────────── */
/* Badge „AI pracuje" — tři poskakující tečky */
.kxp-ai-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: #b9aeff; background: rgba(124,107,255,.12);
  border: 1px solid rgba(124,107,255,.25);
}
.kxp-ai-badge .d { width: 4px; height: 4px; border-radius: 50%; background: currentColor;
  animation: kxpDot 1.2s ease-in-out infinite; }
.kxp-ai-badge .d:nth-child(2) { animation-delay: .15s; }
.kxp-ai-badge .d:nth-child(3) { animation-delay: .3s; }
@keyframes kxpDot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Skenovací linka přes dokument/kartu (AI extrakce běží) */
.kxp-ai-scan { position: relative; overflow: hidden; }
.kxp-ai-scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 34%; top: -34%;
  background: linear-gradient(180deg, transparent, rgba(124,107,255,.12) 45%,
              rgba(124,107,255,.30) 50%, rgba(124,107,255,.12) 55%, transparent);
  animation: kxpScan 2.4s cubic-bezier(.45,0,.55,1) infinite;
  pointer-events: none;
}
@keyframes kxpScan { to { top: 134%; } }

/* ── Velké seznamy — content-visibility (lehká virtualizace) ────
   Řádky mimo viewport se nevykreslují → dramaticky rychlejší první
   render a scroll na archivu/dokumentech. Auto-aplikuje pro.js na
   tabulky s 60+ řádky (třída kxp-cv). contain-intrinsic-height drží
   scrollbar stabilní (odhad výšky řádku). */
.kxp-cv > tbody > tr {
  content-visibility: auto;
  contain-intrinsic-height: auto 48px;
}
.kxp-cv-block {
  content-visibility: auto;
  contain-intrinsic-height: auto 220px;
}

/* ── Tabulky — profi hover ─────────────────────────────────────── */
.card table tbody tr, .kx-table tbody tr { transition: background .18s ease, box-shadow .18s ease; }
.card table tbody tr:hover, .kx-table tbody tr:hover {
  background: rgba(124,107,255,.06) !important;
  box-shadow: inset 2.5px 0 0 var(--kx-accent, #7c6bff);
}

/* ── Topbar — stín po scrollu ──────────────────────────────────── */
.main-topbar { transition: box-shadow .3s ease, border-color .3s ease; }
.main-topbar.kxp-scrolled {
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.65);
  border-bottom-color: rgba(124,107,255,.18);
}

/* ── Sidebar — plynulé podtržení aktivní položky ───────────────── */
.sidebar a.nav-item { position: relative; transition: all .22s cubic-bezier(.22,1,.36,1); }
.sidebar a.nav-item:hover { transform: translateX(3px); }
.sidebar a.nav-item:hover svg { opacity: 1; transform: scale(1.08); }
.sidebar a.nav-item svg { transition: opacity .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1); }

/* ── Stavové pilulky (sjednocený slovník stavů) ───────────────── */
.kxp-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 500; white-space: nowrap; flex-shrink: 0;
  line-height: 1.5;
}
.kxp-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.kxp-pill-ok     { background: rgba(61,203,143,.14); color: #4FE0A4; }
.kxp-pill-info   { background: rgba(110,98,255,.16); color: #A9B0FF; }
.kxp-pill-warn   { background: rgba(232,182,90,.16); color: #E8B65A; }
.kxp-pill-danger { background: rgba(226,90,90,.16);  color: #F08A8A; }
.kxp-pill-muted  { background: rgba(255,255,255,.07); color: #9AA3B8; }
/* „zpracovává se" → pulzující tečka */
.kxp-pill-warn::before, .kxp-pill-info::before { animation: kxpPillPulse 1.6s ease-in-out infinite; }
.kxp-pill-ok::before, .kxp-pill-muted::before, .kxp-pill-danger::before { animation: none; }
@keyframes kxpPillPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* živá změna stavu (z my-live.js) — krátké zvýraznění */
.kxp-pill.kxp-flash { animation: kxpPillFlash 1.3s ease; }
@keyframes kxpPillFlash {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(110,98,255,.5); }
  30% { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(110,98,255,.25); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(110,98,255,0); }
}

/* ── Klikací řádek dokladu ────────────────────────────────────── */
.kxp-doc-row { transition: background .15s ease, padding-left .15s ease; border-radius: 8px; }
.kxp-doc-row:hover { background: rgba(110,98,255,.06); padding-left: 12px !important; }
.kxp-doc-row:last-child { border-bottom: none !important; }

/* ── Rychlá akce (dlaždice) ───────────────────────────────────── */
.kxp-quick { transition: transform .18s cubic-bezier(.22,1,.36,1), border-color .2s ease; }
.kxp-quick:hover { transform: translateY(-2px); border-color: rgba(110,98,255,.3) !important; }
.kxp-quick-ic {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: rgba(110,98,255,.12); color: #A9B0FF;
  display: flex; align-items: center; justify-content: center;
}

/* ── Časová osa stavu dokladu ─────────────────────────────────── */
.kxp-timeline { display: flex; align-items: flex-start; }
.kxp-tl-step {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  position: relative; text-align: center;
}
.kxp-tl-step:not(:first-child)::before {
  content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px;
  background: #1C2230;
}
.kxp-tl-done:not(:first-child)::before,
.kxp-tl-active:not(:first-child)::before { background: #3DCB8F; }
.kxp-tl-dot {
  position: relative; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1C2230; color: #6B7488; border: 2px solid #1C2230; z-index: 1;
}
.kxp-tl-done .kxp-tl-dot { background: #3DCB8F; border-color: #3DCB8F; color: #06150E; }
.kxp-tl-active .kxp-tl-dot {
  background: #6E62FF; border-color: #6E62FF; color: #fff;
  box-shadow: 0 0 0 4px rgba(110,98,255,.18);
}
.kxp-tl-active .kxp-tl-dot::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid #6E62FF; animation: kxpTlPing 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes kxpTlPing { 0% { transform: scale(1); opacity: .7; } 80%,100% { transform: scale(2); opacity: 0; } }
.kxp-tl-label { font-size: 11px; margin-top: 7px; color: #6B7488; }
.kxp-tl-done .kxp-tl-label { color: #9AA3B8; }
.kxp-tl-active .kxp-tl-label { color: #A9B0FF; font-weight: 500; }

/* ── Detail dokladu — responsivní dvousloupec ─────────────────── */
.kxp-detail-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 14px;
}
@media (max-width: 880px) { .kxp-detail-grid { grid-template-columns: 1fr; } }

/* ── Rozbalovací sekce (vytěžená data) ────────────────────────── */
.kxp-details summary {
  cursor: pointer; font-size: 12px; color: #A9B0FF; list-style: none;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; user-select: none;
}
.kxp-details summary::-webkit-details-marker { display: none; }
.kxp-details summary::before {
  content: "▸"; transition: transform .18s ease; display: inline-block; font-size: 10px;
}
.kxp-details[open] summary::before { transform: rotate(90deg); }

/* ── Empty state ───────────────────────────────────────────────── */
.kxp-empty {
  display: grid; place-items: center; gap: 10px; text-align: center;
  padding: 48px 24px; color: var(--kx-text-muted, #8b94a4);
}
.kxp-empty svg { width: 44px; height: 44px; opacity: .35; }
.kxp-empty .t { font-weight: 600; font-size: 14px; color: var(--kx-text, #e7eaf0); }
.kxp-empty .s { font-size: 12.5px; max-width: 360px; }

/* ── Login — aurora pozadí + glass karta ───────────────────────── */
.kxp-aurora { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.kxp-aurora i {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  will-change: transform; /* vlastní kompozitní vrstva → blur se necachuje znovu */
  animation: kxpFloat 18s ease-in-out infinite alternate;
}
.kxp-aurora i:nth-child(1) { width: 480px; height: 480px; left: -8%; top: -12%;
  background: radial-gradient(circle, rgba(99,91,255,.40), transparent 70%); }
.kxp-aurora i:nth-child(2) { width: 420px; height: 420px; right: -6%; top: 28%;
  background: radial-gradient(circle, rgba(201,169,97,.22), transparent 70%);
  animation-delay: -5s; animation-duration: 20s; }
.kxp-aurora i:nth-child(3) { width: 380px; height: 380px; left: 32%; bottom: -16%;
  background: radial-gradient(circle, rgba(139,92,246,.30), transparent 70%);
  animation-delay: -10s; animation-duration: 24s; }
@keyframes kxpFloat {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(48px,-36px) scale(1.12); }
}

.login-split { position: relative; z-index: 1; }
.login-hero h1, .login-hero p, .login-hero-stats { animation: kxpPageIn .7s cubic-bezier(.22,1,.36,1) both; }
.login-hero p { animation-delay: .12s; }
.login-hero-stats { animation-delay: .24s; }
.login-form-side h2, .login-form-side .subtitle, .login-form-side form, .login-badges {
  animation: kxpPageIn .7s cubic-bezier(.22,1,.36,1) both; }
.login-form-side .subtitle { animation-delay: .08s; }
.login-form-side form { animation-delay: .16s; }
.login-badges { animation-delay: .3s; }

.login-form-side input[type="text"], .login-form-side input[type="password"] {
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
.login-form-side input[type="text"]:focus, .login-form-side input[type="password"]:focus {
  box-shadow: 0 0 0 3px rgba(99,91,255,.22), 0 4px 18px -6px rgba(99,91,255,.35);
}

/* ── Light theme korekce ───────────────────────────────────────── */
html[data-kx-theme="light"] .card:hover {
  box-shadow: 0 14px 34px -16px rgba(30,34,48,.25), 0 0 0 1px rgba(99,91,255,.10);
}
html[data-kx-theme="light"] .card table tbody tr:hover,
html[data-kx-theme="light"] .kx-table tbody tr:hover {
  background: rgba(99,91,255,.05) !important;
}

/* ── Reduced motion — vše vypnout ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page-content, .kxp-reveal, .kxp-ink, .kxp-border-glow::before,
  .kxp-grad-text, .kxp-status::before, .kxp-status::after,
  .kxp-ai-badge .d, .kxp-ai-scan::after, .kxp-aurora i,
  .login-hero h1, .login-hero p, .login-hero-stats,
  .login-form-side h2, .login-form-side .subtitle, .login-form-side form, .login-badges {
    animation: none !important; transition: none !important;
  }
  .kxp-reveal { opacity: 1 !important; transform: none !important; }
  .card:hover, .kx-stat:hover, .stat-card:hover, .btn:hover, .kx-btn:hover,
  .sidebar a.nav-item:hover { transform: none !important; }
}