/* =============================================
   SYLEX FOS DASHBOARD — Redesign 2.0
   Dark header + Light knowledge base
   ============================================= */

:root {
  /* Header / dark zone */
  --hdr-bg:        #0d1225;
  --hdr-border:    rgba(var(--dz-fg-rgb),0.08);
  --hdr-text:      #c8d8f0;
  --hdr-dim:       rgba(var(--dz-fg-rgb),0.45);

  /* Page / light zone */
  --page-bg:       #f1f4f9;
  --card-bg:       #ffffff;
  --sidebar-bg:    #ffffff;

  /* Brand colors */
  --accent:        #0891b2;   /* cyan-600 */
  --accent-light:  #e0f2fe;
  --accent2:       #1d4ed8;   /* blue-700 */
  --accent2-light: #dbeafe;
  --purple:        #7c3aed;
  --purple-light:  #ede9fe;

  /* Text */
  --text:          #1e293b;
  --text-dim:      #64748b;
  --text-xdim:     #94a3b8;
  --text-bright:   #0f172a;

  /* „Dark zone" tokeny (výrobné stránky, kalendár, admin…) — flipnú sa vo svetlých motívoch.
     V predvolenom (tmavom) motíve majú pôvodné hodnoty, takže vzhľad ostáva nezmenený. */
  --dz-fg-rgb:     255,255,255;   /* podklad overlayov/okrajov na tmavej: rgba(var(--dz-fg-rgb),α) */
  --dz-text:       #f0f9ff;       /* jasný text na tmavej */
  --dz-text2:      #cbd5e1;       /* svetlý text na tmavej */
  --dz-surface2:   #141a2e;       /* tmavá plocha (sticky hlavičky tabuliek) */
  --dz-cyan:   #67e8f9; --dz-amber: #fcd34d; --dz-green: #4ade80;
  --dz-purple: #c4b5fd; --dz-blue:  #93c5fd; --dz-red:   #fca5a5;

  /* UI */
  --border:        #e2e8f0;
  --border-focus:  #0891b2;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:     0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);

  /* Status */
  --success:       #10b981;
  --warning:       #f59e0b;
  --danger:        #ef4444;

  /* Layout */
  --header-h:      58px;
  --sidebar-w:     260px;
  --radius:        8px;
  --radius-lg:     12px;
  --transition:    0.18s ease;

  --font: 'Inter', system-ui, sans-serif;
  --font-title: 'Rajdhani', 'Inter', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.5;
}

/* ==============================
   HEADER
   ============================== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  /* +safe-area: v PWA (standalone) na iPhone s notchom prekrýva stavový riadok
     obsah hlavičky; padding ho posunie pod notch, pozadie vyplní aj oblasť notchu.
     Na zariadeniach bez výrezu je env() = 0, takže sa nič nemení. */
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-border);
  backdrop-filter: blur(12px);
}
.header-inner {
  max-width: 100%; height: 100%;
  display: flex; align-items: center; gap: 0;
  padding: 0 20px;
}

/* Logo */
.logo {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; flex-shrink: 0; margin-right: 20px;
  text-decoration: none;
}
.logo-img { height: 26px; width: auto; display: block; flex-shrink: 0; }
.logo-wordmark {
  font-family: var(--font-title); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.06em;
  color: var(--dz-text); white-space: nowrap;
}
.logo-divider { width: 1px; height: 18px; background: rgba(var(--dz-fg-rgb),0.2); }
.logo-sub-text {
  font-size: 0.63rem; letter-spacing: 0.22em;
  color: var(--accent); font-weight: 700; text-transform: uppercase;
  white-space: nowrap;
}

/* Quick links in header */
.header-quicklinks {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.ql-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-decoration: none;
  border: 1px solid; cursor: pointer;
  transition: all var(--transition); white-space: nowrap;
  color: inherit;
}
.ql-chip.ql-cyan  { color: var(--dz-cyan); border-color: rgba(103,232,249,0.3); background: rgba(103,232,249,0.08); }
.ql-chip.ql-blue  { color: var(--dz-blue); border-color: rgba(147,197,253,0.3); background: rgba(147,197,253,0.08); }
.ql-chip.ql-purple{ color: var(--dz-purple); border-color: rgba(196,181,253,0.3); background: rgba(196,181,253,0.08); }
.ql-chip.ql-cyan:hover  { background: rgba(103,232,249,0.18); border-color: rgba(103,232,249,0.5); }
.ql-chip.ql-blue:hover  { background: rgba(147,197,253,0.18); border-color: rgba(147,197,253,0.5); }
.ql-chip.ql-purple:hover{ background: rgba(196,181,253,0.18); border-color: rgba(196,181,253,0.5); }
.ql-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
  animation: pulseDot 2.5s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:0.4} }
.ql-cred-btn {
  background: none; border: none; cursor: pointer;
  font-size: 0.75rem; padding: 0 0 0 4px;
  opacity: 0.7; transition: opacity var(--transition);
}
.ql-cred-btn:hover { opacity: 1; }

/* SharePoint chips — same weight as ERP chips, green accent */
.ql-chip.ql-sp { color: var(--dz-green); border-color: rgba(134,239,172,0.3); background: rgba(134,239,172,0.08); }
.ql-chip.ql-sp:hover { background: rgba(134,239,172,0.18); border-color: rgba(134,239,172,0.5); }
/* Separator between chip groups */
.ql-sep {
  width: 1px; height: 16px;
  background: rgba(var(--dz-fg-rgb),0.12);
  flex-shrink: 0; margin: 0 3px;
}

/* PEAKLOGGER popover */
.pl-popover {
  position: fixed; top: calc(var(--header-h) + 8px); z-index: 300;
  background: #1e293b; border: 1px solid rgba(196,181,253,0.3);
  border-radius: var(--radius-lg);
  padding: 16px; min-width: 240px;
  box-shadow: var(--shadow-lg);
}
.pl-popover-title {
  font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--dz-purple); font-weight: 600;
  text-transform: uppercase; margin-bottom: 10px;
}
.pl-popover-actions { display: flex; gap: 8px; margin-top: 10px; }
.cred-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cred-label {
  font-size: 0.68rem; letter-spacing: 0.1em;
  color: #94a3b8; text-transform: uppercase;
  font-weight: 600; width: 38px; flex-shrink: 0;
}
.cred-value {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem; color: var(--dz-text2);
  letter-spacing: 0.04em;
}
.cred-toggle {
  padding: 4px 10px; font-size: 0.72rem;
  background: rgba(124,58,237,0.15); color: var(--dz-purple);
  border: 1px solid rgba(124,58,237,0.3); border-radius: 6px;
  cursor: pointer; font-family: var(--font);
  transition: all var(--transition);
}
.cred-toggle:hover { background: rgba(124,58,237,0.25); }

/* Hamburger — mobilné otvorenie navigácie (skrytý na desktope) */
.mobile-nav-btn {
  display: none; width: 40px; height: 40px; flex-shrink: 0; margin-right: 8px;
  align-items: center; justify-content: center;
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: 9px; color: #c8d8f0; cursor: pointer; touch-action: manipulation;
}
.mobile-nav-btn:hover { background: rgba(var(--dz-fg-rgb),0.14); color: #fff; }
.mobile-nav-btn:focus-visible { outline: 2px solid var(--dz-cyan); outline-offset: 2px; }

.mobile-nav-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 490; opacity: 0; transition: opacity .22s ease;
}
.mobile-nav-backdrop.show { display: block; opacity: 1; }

.asb-close { display: none; }

/* Nav — kompaktný, label sa objaví pri hover / active */
.nav { display: flex; gap: 1px; margin-left: auto; flex-shrink: 0; }
.nav-link {
  display: flex; align-items: center; gap: 0;
  padding: 5px 9px; border-radius: var(--radius);
  font-size: 0.83rem; font-weight: 500;
  color: var(--hdr-dim); cursor: pointer;
  border: 1px solid transparent;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  text-decoration: none; white-space: nowrap; overflow: hidden;
}
.nav-link:hover { color: #fff; background: rgba(var(--dz-fg-rgb),0.07); }
.nav-link.active { color: #fff; background: rgba(var(--dz-fg-rgb),0.1); border-color: rgba(var(--dz-fg-rgb),0.1); }

/* Label — skrytý, animovane sa odkryje pri hover / active */
.nav-lbl {
  max-width: 0; overflow: hidden; white-space: nowrap;
  opacity: 0; margin-left: 0;
  font-size: 0.83rem; font-weight: 500;
  transition: max-width 0.22s ease, opacity 0.18s ease, margin-left 0.22s ease;
  pointer-events: none;
}
.nav-link:hover .nav-lbl,
.nav-link.active .nav-lbl {
  max-width: 90px;   /* stačí na "Kalendár", "Postupy" atď. */
  opacity: 1;
  margin-left: 6px;
}

/* Status indicator */
.header-right { display: flex; align-items: center; gap: 6px; margin-left: 16px; flex-shrink: 0; }
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 8px var(--success);
  animation: pulseDot 2s ease-in-out infinite;
}
.status-text { font-size: 0.65rem; letter-spacing: 0.15em; color: var(--success); font-weight: 600; }

/* ==============================
   PAGES
   ============================== */
.page { display: none; padding-top: calc(var(--header-h) + env(safe-area-inset-top)); min-height: 100vh; min-height: 100dvh; }
.page.active { display: block; }
.wiki-page.active { display: flex; flex-direction: column; }

/* ==============================
   HOME PAGE
   ============================== */
#page-home {
  background: var(--hdr-bg);
  position: relative; overflow: hidden;
}

/* Grid background (only on home) */
.bg-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,212,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.bg-grid::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(8,145,178,0.12) 0%, transparent 70%);
}
.particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.particle {
  position: absolute; width: 2px; height: 2px;
  background: rgba(0,212,255,0.6); border-radius: 50%;
  animation: floatP linear infinite; opacity: 0;
}
@keyframes floatP {
  0%   { transform: translateY(100vh); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-5vh) translateX(var(--drift,0px)); opacity: 0; }
}

.home-inner {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  padding: 36px 28px 52px;
}

/* Hero */
.hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; margin-bottom: 36px;
}
.hero-content { flex: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px; border-radius: 20px; margin-bottom: 16px;
  border: 1px solid rgba(8,145,178,0.5);
  background: rgba(8,145,178,0.1);
  font-size: 0.65rem; letter-spacing: 0.22em;
  color: var(--dz-cyan); font-weight: 600;
}
.hero-title {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1; letter-spacing: 0.04em; color: var(--dz-text2);
  margin-bottom: 14px; white-space: nowrap;
}
.hero-title .accent { color: var(--dz-cyan); }
.hero-desc { font-size: 0.92rem; color: #94a3b8; max-width: 400px; line-height: 1.65; }

.hero-visual {
  position: relative; width: 180px; height: 180px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pulse-ring {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 1px solid rgba(8,145,178,0.3);
  animation: expandRing 3.5s ease-out infinite;
}
.delay1 { animation-delay: 1.2s; }
.delay2 { animation-delay: 2.4s; }
@keyframes expandRing { 0%{transform:scale(.5);opacity:.8} 100%{transform:scale(1.9);opacity:0} }

/* ── Widget grid ── */
.home-widgets {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.hw-card {
  background: rgba(var(--dz-fg-rgb),0.07);
  border: 1px solid rgba(var(--dz-fg-rgb),0.12);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit;
  cursor: pointer;
  transition: all var(--transition);
  backdrop-filter: blur(6px);
}
.hw-card:hover {
  background: rgba(var(--dz-fg-rgb),0.12);
  border-color: rgba(var(--dz-fg-rgb),0.22);
  transform: translateY(-2px);
}

.hw-card-label {
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em; color: rgba(var(--dz-fg-rgb),0.4);
  text-transform: uppercase;
}
.hw-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
}
.hw-card-link {
  font-size: 0.72rem; color: rgba(var(--dz-fg-rgb),0.4);
  transition: color var(--transition);
}
.hw-card:hover .hw-card-link { color: var(--dz-cyan); }

/* Thermometer card */
.hw-thermo { border-color: rgba(103,232,249,0.2); }
.hw-thermo:hover { border-color: rgba(103,232,249,0.4); }
.hw-thermo-body { display: flex; flex-direction: column; gap: 8px; }
.hw-reading {
  display: flex; align-items: center; gap: 7px;
}
.hw-reading svg { flex-shrink: 0; }
.hw-reading-num {
  font-family: var(--font-title); font-size: 2.1rem;
  font-weight: 700; color: var(--dz-text); line-height: 1;
}
.hw-reading-unit { font-size: 0.82rem; font-weight: 600; margin-bottom: 1px; }
.hw-reading--temp svg          { color: var(--dz-cyan); }
.hw-reading--temp .hw-reading-unit { color: var(--dz-cyan); }
.hw-reading--hum  svg          { color: #818cf8; }
.hw-reading--hum  .hw-reading-unit { color: #818cf8; }
.thermo-status {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em;
  padding: 2px 8px; border-radius: 10px;
}
.thermo-online  { background: rgba(16,185,129,0.2); color: var(--dz-green); }
.thermo-offline { background: rgba(100,116,139,0.2); color: #94a3b8; }

/* ── Sensor Chart ── */
.home-sensor-chart {
  background: rgba(var(--dz-fg-rgb),0.06);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
  backdrop-filter: blur(6px);
}
.hsc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 10px; flex-wrap: wrap;
}
.hsc-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em; color: rgba(var(--dz-fg-rgb),0.35);
  text-transform: uppercase;
}
.hsc-controls { display: flex; align-items: center; gap: 8px; }
.hsc-range-btns { display: flex; gap: 3px; }
.hsc-range-btn {
  padding: 4px 10px; border-radius: 6px;
  font-size: 0.7rem; font-weight: 600; font-family: var(--font);
  background: rgba(var(--dz-fg-rgb),0.06);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  color: rgba(var(--dz-fg-rgb),0.4);
  cursor: pointer; transition: all var(--transition);
}
.hsc-range-btn:hover  { background: rgba(var(--dz-fg-rgb),0.11); color: rgba(var(--dz-fg-rgb),0.75); }
.hsc-range-btn.active { background: rgba(8,145,178,0.18); border-color: rgba(8,145,178,0.4); color: var(--dz-cyan); }
.hsc-zoom-reset {
  padding: 4px 10px; border-radius: 6px; font-size: 0.9rem;
  background: rgba(var(--dz-fg-rgb),0.06);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  color: rgba(var(--dz-fg-rgb),0.4);
  cursor: pointer; transition: all var(--transition);
}
.hsc-zoom-reset:hover { background: rgba(var(--dz-fg-rgb),0.11); color: rgba(var(--dz-fg-rgb),0.75); }
.hsc-canvas-wrap { position: relative; height: 230px; }
.hsc-canvas-wrap canvas { width: 100% !important; }
.hsc-no-data {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.25);
  pointer-events: none;
}
.hsc-footer {
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px; flex-wrap: wrap;
}
.hsc-legend { display: flex; gap: 14px; }
.hsc-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.7rem; color: rgba(var(--dz-fg-rgb),0.38);
}
.hsc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hsc-dot-temp { background: #22d3ee; box-shadow: 0 0 5px rgba(34,211,238,0.5); }
.hsc-dot-hum  { background: #818cf8; box-shadow: 0 0 5px rgba(129,140,248,0.5); }
.hsc-last-update { font-size: 0.68rem; color: rgba(var(--dz-fg-rgb),0.25); margin-left: auto; }
.hsc-hint { font-size: 0.65rem; color: rgba(var(--dz-fg-rgb),0.2); }

/* KB stats card */
.hw-kb { cursor: pointer; }
.hw-kb-body {
  display: flex; gap: 28px; align-items: center;
}
.hw-kb-stat { display: flex; flex-direction: column; gap: 2px; }
.hw-kb-num {
  font-family: var(--font-title); font-size: 2rem;
  font-weight: 700; color: var(--dz-text); line-height: 1;
}
.hw-kb-dim { font-size: 0.72rem; color: rgba(var(--dz-fg-rgb),0.4); }

/* Home KB header row */
.home-kb-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.home-kb-hdr-left { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.home-kb-hdr-title {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; color: rgba(var(--dz-fg-rgb),0.45);
  text-transform: uppercase;
}
.home-kb-hdr-stats { font-size: 0.8rem; color: rgba(var(--dz-fg-rgb),0.35); }
.home-kb-hdr-stats span {
  font-family: var(--font-title); font-size: 1rem;
  font-weight: 700; color: var(--dz-text);
}

/* Home KB section */
.home-kb-section {
  background: rgba(var(--dz-fg-rgb),0.06);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  backdrop-filter: blur(8px);
}
.home-kb-search-wrap {
  display: flex; gap: 12px; margin-bottom: 14px;
}
.home-search-box {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: rgba(var(--dz-fg-rgb),0.08);
  border: 1px solid rgba(var(--dz-fg-rgb),0.15);
  border-radius: var(--radius); height: 40px;
  transition: border-color var(--transition);
}
.home-search-box:focus-within { border-color: rgba(8,145,178,0.6); }
.home-search-box svg { color: #64748b; flex-shrink: 0; }
.home-search-box input {
  flex: 1; border: none; background: transparent;
  color: var(--dz-text); font-family: var(--font); font-size: 0.88rem;
  outline: none;
}
.home-search-box input::placeholder { color: #475569; }

.home-kb-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.home-kb-preview-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--radius);
  background: rgba(var(--dz-fg-rgb),0.07);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  cursor: pointer; transition: all var(--transition);
  font-size: 0.8rem; color: var(--dz-text2);
}
.home-kb-preview-item:hover { background: rgba(var(--dz-fg-rgb),0.14); color: var(--dz-text); }

/* SharePoint section */
.home-section-label {
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em; color: rgba(var(--dz-fg-rgb),0.35);
  text-transform: uppercase;
  margin: 20px 0 10px;
}
.home-sp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.sp-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: rgba(var(--dz-fg-rgb),0.06);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  cursor: pointer;
  transition: all var(--transition);
  backdrop-filter: blur(6px);
}
.sp-card:hover {
  background: rgba(var(--dz-fg-rgb),0.11);
  border-color: rgba(var(--dz-fg-rgb),0.2);
  transform: translateY(-2px);
}
.sp-card-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
}
.sp-intranet .sp-card-icon { background: rgba(8,145,178,0.15); color: var(--dz-cyan); }
.sp-phone   .sp-card-icon { background: rgba(29,78,216,0.15); color: var(--dz-blue); }
.sp-fos     .sp-card-icon { background: rgba(124,58,237,0.15); color: var(--dz-purple); }
.sp-intranet:hover { border-color: rgba(103,232,249,0.3); }
.sp-phone:hover    { border-color: rgba(147,197,253,0.3); }
.sp-fos:hover      { border-color: rgba(196,181,253,0.3); }

.sp-card-body { flex: 1; min-width: 0; }
.sp-card-title {
  font-size: 0.85rem; font-weight: 600;
  color: var(--dz-text2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sp-card-desc {
  font-size: 0.72rem; color: rgba(var(--dz-fg-rgb),0.38);
  margin-top: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sp-card-arrow {
  font-size: 1rem; color: rgba(var(--dz-fg-rgb),0.3);
  flex-shrink: 0; transition: color var(--transition);
}
.sp-card:hover .sp-card-arrow { color: rgba(var(--dz-fg-rgb),0.7); }

@media (max-width: 640px) {
  .home-sp-grid { grid-template-columns: 1fr; }
}

/* ── Floating thermometer corner widget ── */
.thermo-corner {
  position: fixed; bottom: 20px; right: 20px; z-index: 150;
  background: rgba(13,18,37,0.92);
  border: 1px solid rgba(103,232,249,0.18);
  border-radius: var(--radius-lg);
  padding: 10px 12px 8px;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  transition: border-color var(--transition);
}
.thermo-corner:hover { border-color: rgba(103,232,249,0.36); }
.thermo-corner-link { text-decoration: none; display: flex; flex-direction: column; gap: 5px; }
.thermo-corner-row {
  display: flex; align-items: center; gap: 5px;
}
.thermo-corner-row svg { flex-shrink: 0; }
.thermo-corner-row > span:not(.tc-unit) {
  font-family: var(--font-title); font-size: 1.15rem;
  font-weight: 700; color: var(--dz-text); line-height: 1;
}
.tc-unit { font-size: 0.68rem; color: rgba(var(--dz-fg-rgb),0.38); }
.thermo-corner-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 7px; padding-top: 6px;
  border-top: 1px solid rgba(var(--dz-fg-rgb),0.08); gap: 8px;
}
.tc-chart-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(var(--dz-fg-rgb),0.3); padding: 2px 4px;
  border-radius: 4px; transition: all var(--transition);
}
.tc-chart-btn:hover { color: var(--dz-cyan); background: rgba(103,232,249,0.1); }

/* ── Sensors page ── */
.sensors-page { background: var(--hdr-bg); }
.sensors-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 36px 28px 52px;
  position: relative; z-index: 1;
}
.sensors-hdr {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 20px; margin-bottom: 28px; flex-wrap: wrap;
}
.sensors-title {
  font-family: var(--font-title); font-size: 1.6rem;
  font-weight: 700; color: var(--dz-text2);
  letter-spacing: 0.04em; margin-bottom: 4px;
}
.sensors-sub { font-size: 0.8rem; color: rgba(var(--dz-fg-rgb),0.32); }
.sensors-live {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-bottom: 20px;
}
@media (max-width: 480px) { .sensors-live { grid-template-columns: 1fr; } }

/* ===== FBG PEAK PAGE ===== */
.fbg-page { background: var(--hdr-bg); }
.fbg-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 36px 28px 52px;
}
.fbg-page-hdr { margin-bottom: 22px; }
.fbg-page-title {
  font-family: var(--font-title); font-size: 1.6rem;
  font-weight: 700; color: var(--dz-text2);
  letter-spacing: 0.04em; margin-bottom: 4px;
}
.fbg-page-sub { font-size: 0.8rem; color: rgba(var(--dz-fg-rgb),0.32); }
.fbg-frame-card {
  border: 1px solid var(--hdr-border);
  border-radius: var(--radius-lg);
  background: #0a0f20;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.fbg-frame {
  display: block; width: 100%; height: 460px;
  border: 0; background: transparent;
}
.fbg-note {
  margin-top: 18px; max-width: 760px;
  font-size: 0.85rem; line-height: 1.6;
  color: rgba(var(--dz-fg-rgb),0.5);
}
@media (max-width: 600px) {
  .fbg-inner { padding: 24px 16px 40px; }
  .fbg-frame { height: 380px; }
}
.slv-card {
  background: rgba(var(--dz-fg-rgb),0.06);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius-lg); padding: 20px 22px;
  backdrop-filter: blur(6px);
}
.slv-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em;
  color: rgba(var(--dz-fg-rgb),0.32); text-transform: uppercase;
  margin-bottom: 12px;
}
.slv-reading { display: flex; align-items: center; gap: 10px; }
.slv-val {
  font-family: var(--font-title); font-size: 3.2rem;
  font-weight: 700; color: var(--dz-text); line-height: 1;
}
.slv-unit {
  font-size: 1.1rem; color: rgba(var(--dz-fg-rgb),0.38);
  font-weight: 500; margin-bottom: 4px;
}

/* ==============================
   WIKI LAYOUT (dark zone)
   ============================== */
.wiki-page { background: var(--hdr-bg); }
.wiki-layout {
  display: flex; flex: 1;
  min-height: calc(100vh - var(--header-h));
}

/* ---- SIDEBAR ---- */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: rgba(var(--dz-fg-rgb),0.03);
  border-right: 1px solid rgba(var(--dz-fg-rgb),0.1);
  display: flex; flex-direction: column;
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(var(--dz-fg-rgb),0.15); border-radius: 2px; }

.sidebar-top {
  padding: 12px 12px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.sidebar-search {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; height: 34px;
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.12);
  border-radius: var(--radius); color: rgba(var(--dz-fg-rgb),0.4);
  transition: border-color var(--transition);
}
.sidebar-search:focus-within { border-color: rgba(8,145,178,0.7); }
.sidebar-search input {
  flex: 1; border: none; background: transparent;
  font-family: var(--font); font-size: 0.82rem;
  color: var(--dz-text); outline: none;
}
.sidebar-search input::placeholder { color: rgba(var(--dz-fg-rgb),0.35); }

.sidebar-new-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 7px; border-radius: var(--radius);
  background: var(--accent); color: white;
  border: none; cursor: pointer; font-family: var(--font);
  font-size: 0.8rem; font-weight: 600;
  transition: background var(--transition);
}
.sidebar-new-btn:hover { background: #0e7490; }

.sidebar-nav { padding: 8px 8px 0; }
.sidebar-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius);
  font-size: 0.83rem; font-weight: 500; color: rgba(var(--dz-fg-rgb),0.55);
  cursor: pointer; transition: all var(--transition);
}
.sidebar-nav-item:hover { background: rgba(var(--dz-fg-rgb),0.06); color: var(--dz-text); }
.sidebar-nav-item.active { background: rgba(8,145,178,0.18); color: #67e8f9; }

.sidebar-section-label {
  padding: 12px 18px 4px;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; color: rgba(var(--dz-fg-rgb),0.35);
  text-transform: uppercase;
}

.sidebar-categories, .sidebar-products { padding: 0 8px 8px; }

.category-group { margin-bottom: 4px; }
.category-label {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius);
  font-size: 0.8rem; font-weight: 600; color: rgba(var(--dz-fg-rgb),0.55);
  cursor: pointer; transition: all var(--transition);
}
.category-label:hover { background: rgba(var(--dz-fg-rgb),0.06); color: var(--dz-text); }
.cat-count {
  margin-left: auto; font-size: 0.68rem;
  background: rgba(var(--dz-fg-rgb),0.08); color: rgba(var(--dz-fg-rgb),0.5);
  padding: 1px 6px; border-radius: 10px;
}

.product-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 22px; border-radius: var(--radius);
  cursor: pointer; transition: all var(--transition);
  font-size: 0.8rem;
}
.product-item:hover { background: rgba(var(--dz-fg-rgb),0.06); }
.product-item.active { background: rgba(8,145,178,0.18); }

.product-item-name { color: var(--dz-text); font-weight: 500; line-height: 1.3; }
.product-item-model { font-size: 0.7rem; color: rgba(var(--dz-fg-rgb),0.4); }
.product-item-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-active       { background: var(--dz-green); }
.dot-development  { background: var(--dz-amber); }
.dot-discontinued { background: rgba(var(--dz-fg-rgb),0.35); }
.empty-state { padding: 12px 10px; font-size: 0.78rem; color: rgba(var(--dz-fg-rgb),0.4); }

/* ---- WIKI MAIN ---- */
.wiki-main {
  flex: 1; overflow-y: auto;
  background: var(--hdr-bg);
  padding: 28px 32px;
  min-width: 0;
}

/* ---- KB HOME ---- */
.wiki-home { max-width: 860px; }

.wh-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.wh-search-wrap {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 0 14px; height: 42px;
  background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.wh-search-wrap:focus-within {
  border-color: rgba(8,145,178,0.7);
  box-shadow: 0 0 0 3px rgba(8,145,178,0.16);
}
.wh-search-wrap svg { color: rgba(var(--dz-fg-rgb),0.4); flex-shrink: 0; }
.wh-search-wrap input {
  flex: 1; border: none; background: transparent;
  font-family: var(--font); font-size: 0.9rem;
  color: var(--dz-text); outline: none;
}
.wh-search-wrap input::placeholder { color: rgba(var(--dz-fg-rgb),0.35); }

.wh-section { margin-bottom: 32px; }
.wh-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.wh-section-head h2 {
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(var(--dz-fg-rgb),0.5);
}
.btn-link {
  background: none; border: none;
  color: var(--accent); font-family: var(--font);
  font-size: 0.8rem; font-weight: 500;
  cursor: pointer; padding: 0;
  transition: color var(--transition);
}
.btn-link:hover { color: #22d3ee; }

/* Category tiles grid */
.wh-cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.wh-cat-card {
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  cursor: pointer; transition: all var(--transition);
  display: flex; flex-direction: column; gap: 6px;
}
.wh-cat-card:hover {
  background: rgba(var(--dz-fg-rgb),0.08);
  border-color: rgba(8,145,178,0.5);
  transform: translateY(-2px);
}
.wh-cat-icon-wrap { font-size: 1.8rem; line-height: 1; }
.wh-cat-name { font-size: 0.88rem; font-weight: 600; color: var(--dz-text); }
.wh-cat-count { font-size: 0.75rem; color: rgba(var(--dz-fg-rgb),0.4); }
.wh-cat-add { border-style: dashed; box-shadow: none; }
.wh-cat-add:hover { background: rgba(var(--dz-fg-rgb),0.08); }
.wh-empty {
  padding: 32px 20px; text-align: center;
  font-size: 0.88rem; color: rgba(var(--dz-fg-rgb),0.55);
  background: rgba(var(--dz-fg-rgb),0.04); border-radius: var(--radius-lg);
  border: 1px dashed rgba(var(--dz-fg-rgb),0.15);
}
.wh-empty-actions { margin-top: 12px; }

/* Articles list */
.wh-articles-list { display: flex; flex-direction: column; gap: 8px; }
.wh-article-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius);
  cursor: pointer; transition: all var(--transition);
}
.wh-article-card:hover {
  background: rgba(var(--dz-fg-rgb),0.08);
  border-color: rgba(8,145,178,0.5);
  transform: translateX(2px);
}
.wh-article-cat-icon { font-size: 1.4rem; flex-shrink: 0; }
.wh-article-body { flex: 1; min-width: 0; }
.wh-article-title { font-size: 0.9rem; font-weight: 600; color: var(--dz-text); }
.wh-article-desc { font-size: 0.78rem; color: rgba(var(--dz-fg-rgb),0.5); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-article-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.wh-article-badge {
  display: inline-block; padding: 1px 8px; border-radius: 4px;
  font-size: 0.68rem; font-weight: 600;
  background: rgba(8,145,178,0.18); color: #67e8f9;
}
.wh-article-date { font-size: 0.72rem; color: rgba(var(--dz-fg-rgb),0.4); }
.wh-article-arrow { font-size: 1.2rem; color: rgba(var(--dz-fg-rgb),0.4); flex-shrink: 0; }

/* ---- CATEGORY VIEW ---- */
.category-view { max-width: 860px; }
.cv-breadcrumb { margin-bottom: 20px; }
.cv-bc-link {
  font-size: 0.82rem; color: var(--accent); cursor: pointer;
  transition: color var(--transition);
}
.cv-bc-link:hover { color: #22d3ee; }
.cv-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px;
}
.cv-icon { font-size: 2.2rem; }
.cv-title { font-size: 1.5rem; font-weight: 700; color: var(--dz-text); }
.cv-count { font-size: 0.8rem; color: rgba(var(--dz-fg-rgb),0.5); }

/* ---- PRODUCT DETAIL ---- */
.product-detail { max-width: 860px; }
.pd-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.pd-bc-link { font-size: 0.82rem; color: var(--accent); cursor: pointer; transition: color var(--transition); }
.pd-bc-link:hover { color: #22d3ee; }
.pd-bc-cat {
  font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.5); cursor: pointer;
  transition: color var(--transition);
}
.pd-bc-cat:not(:empty)::before { content: '/'; margin-right: 8px; color: rgba(var(--dz-fg-rgb),0.35); }
.pd-bc-cat:hover { color: var(--accent); }

.pd-header {
  display: flex; align-items: flex-start; gap: 16px;
  padding-bottom: 20px; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1);
  margin-bottom: 20px;
}
.pd-header-left { flex: 1; min-width: 0; }
.pd-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pd-cat-badge {
  padding: 2px 10px; border-radius: 20px;
  font-size: 0.7rem; font-weight: 600;
  background: rgba(8,145,178,0.18); color: #67e8f9;
  border: 1px solid rgba(8,145,178,0.3);
}
.pd-status-badge {
  padding: 2px 10px; border-radius: 20px;
  font-size: 0.7rem; font-weight: 600;
}
.status-active       { color: var(--dz-green); background: rgba(110,231,183,0.14); }
.status-development  { color: var(--dz-amber); background: rgba(252,211,77,0.14); }
.status-discontinued { color: #94a3b8; background: rgba(148,163,184,0.14); }

.pd-title {
  font-size: 1.65rem; font-weight: 700;
  color: var(--dz-text); line-height: 1.25; margin-bottom: 6px;
}
.pd-desc { font-size: 0.88rem; color: rgba(var(--dz-fg-rgb),0.55); line-height: 1.5; }
.pd-actions { display: flex; gap: 8px; flex-shrink: 0; padding-top: 4px; }

.pd-info-row {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 20px;
  background: rgba(var(--dz-fg-rgb),0.05); border-radius: var(--radius);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
}
.pd-info-item { font-size: 0.78rem; color: rgba(var(--dz-fg-rgb),0.55); }
.pd-info-item strong { color: var(--dz-text); }
.pd-info-item a { color: var(--accent); text-decoration: none; }
.pd-info-item a:hover { text-decoration: underline; }

/* Rich content */
.pd-content {
  font-size: 0.9rem; line-height: 1.75; color: var(--dz-text2);
  border: none !important; padding: 0 !important;
}
.pd-content h1, .pd-content h2, .pd-content h3 {
  color: var(--dz-text); margin: 20px 0 10px; font-weight: 700;
}
.pd-content h2 { font-size: 1.1rem; padding-bottom: 6px; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1); }
.pd-content h3 { font-size: 1rem; }
.pd-content p { margin-bottom: 10px; }
.pd-content ul, .pd-content ol { padding-left: 20px; margin-bottom: 10px; }
.pd-content li { margin-bottom: 4px; }
.pd-content a { color: var(--accent); text-decoration: none; }
.pd-content a:hover { text-decoration: underline; }
.pd-content strong { color: var(--dz-text); font-weight: 600; }
.pd-content code {
  background: rgba(var(--dz-fg-rgb),0.1); border: 1px solid rgba(var(--dz-fg-rgb),0.14);
  border-radius: 4px; padding: 1px 6px;
  font-size: 0.85em; color: #fcd34d;
  font-family: 'Courier New', monospace;
}
.pd-content pre {
  background: rgba(var(--dz-fg-rgb),0.08); border-radius: var(--radius);
  padding: 14px 16px; overflow-x: auto; margin: 12px 0;
  color: var(--dz-text2);
}
.pd-content pre code { background: none; border: none; padding: 0; color: inherit; }
.pd-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 14px; color: rgba(var(--dz-fg-rgb),0.55); margin: 12px 0;
}
.pd-content table {
  width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.87rem;
}
.pd-content th, .pd-content td {
  padding: 8px 12px; text-align: left;
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
}
.pd-content th { background: rgba(var(--dz-fg-rgb),0.06); font-weight: 600; color: var(--dz-text); }
.pd-content tr:hover td { background: rgba(var(--dz-fg-rgb),0.04); }

/* Product images */
.pd-images {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px;
}
.pd-image-card {
  border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: var(--radius);
  overflow: hidden; background: rgba(var(--dz-fg-rgb),0.05);
  max-width: 280px;
  transition: all var(--transition);
}
.pd-image-card:hover { border-color: rgba(var(--dz-fg-rgb),0.2); }
.pd-image-card img { width: 100%; display: block; max-height: 180px; object-fit: cover; }
.pd-image-caption { padding: 7px 10px; font-size: 0.72rem; color: rgba(var(--dz-fg-rgb),0.5); }

/* Product attachments (súbory) */
.pd-attachments {
  display: flex; flex-direction: column; gap: 6px; margin-top: 24px;
}
.pd-attachments-h {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(var(--dz-fg-rgb),0.4); margin-bottom: 2px;
}
.pd-att-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius); text-decoration: none;
  transition: all var(--transition);
}
.pd-att-card:hover { background: rgba(var(--dz-fg-rgb),0.08); border-color: rgba(8,145,178,0.4); }
.pd-att-icon { color: #67e8f9; flex-shrink: 0; }
.pd-att-body { flex: 1; min-width: 0; }
.pd-att-name { font-size: 0.84rem; font-weight: 500; color: var(--dz-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-att-size { font-size: 0.7rem; color: rgba(var(--dz-fg-rgb),0.4); }
.pd-att-dl { color: rgba(var(--dz-fg-rgb),0.4); flex-shrink: 0; }

/* ==============================
   BUTTONS
   ============================== */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius);
  background: var(--accent); color: white;
  border: 1px solid transparent; font-family: var(--font);
  font-size: 0.83rem; font-weight: 600; cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn-primary:hover { background: #0e7490; box-shadow: 0 2px 8px rgba(8,145,178,0.3); }

.btn-secondary {
  padding: 8px 18px; border-radius: var(--radius);
  background: var(--card-bg); color: var(--text-dim);
  border: 1px solid var(--border); font-family: var(--font);
  font-size: 0.83rem; cursor: pointer; transition: all var(--transition);
}
.btn-secondary:hover { border-color: var(--dz-text2); color: var(--text); }

.btn-edit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius);
  background: var(--accent-light); color: var(--accent);
  border: 1px solid rgba(8,145,178,0.2); font-family: var(--font);
  font-size: 0.8rem; font-weight: 500; cursor: pointer;
  transition: all var(--transition);
}
.btn-edit:hover { background: #bae6fd; }

.btn-delete {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius);
  background: #fef2f2; color: var(--danger);
  border: 1px solid rgba(239,68,68,0.2); font-family: var(--font);
  font-size: 0.8rem; font-weight: 500; cursor: pointer;
  transition: all var(--transition);
}
.btn-delete:hover { background: #fee2e2; }

.btn-sm {
  padding: 5px 12px; border-radius: var(--radius);
  background: var(--accent-light); color: var(--accent);
  border: 1px solid rgba(8,145,178,0.2); font-family: var(--font);
  font-size: 0.76rem; font-weight: 500; cursor: pointer;
  transition: all var(--transition); text-decoration: none;
  display: inline-flex; align-items: center;
}
.btn-sm:hover { background: #bae6fd; }

/* ==============================
   MODAL
   ============================== */
.modal { position: fixed; inset: 0; z-index: 400; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,0.5);
  backdrop-filter: blur(4px);
}
.modal-box {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 94%; max-width: 780px; max-height: 90vh;
  background: var(--card-bg); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-sm { max-width: 420px; }
.modal-md { max-width: 780px; max-height: 92vh; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: var(--page-bg);
}
.modal-header h2 { font-size: 1rem; font-weight: 700; color: var(--text-bright); }
.modal-close {
  background: none; border: none; color: var(--text-xdim);
  font-size: 1rem; cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius); transition: all var(--transition);
}
.modal-close:hover { background: #fee2e2; color: var(--danger); }

.modal-body {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.modal-footer {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--page-bg);
}

/* ==============================
   FORM
   ============================== */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-group label {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--text-dim);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="color"],
.form-group select {
  padding: 8px 11px; border-radius: var(--radius);
  background: var(--card-bg); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font); font-size: 0.87rem;
  outline: none; transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%; min-width: 0; box-sizing: border-box;
}
.form-group select[multiple] { min-width: 0; }
.form-group input:focus, .form-group select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(8,145,178,0.1);
}
.form-group input::placeholder { color: var(--text-xdim); }
.form-group input[type="color"] { padding: 3px 6px; height: 36px; cursor: pointer; }
.form-group select { cursor: pointer; }

.input-with-btn { display: flex; gap: 8px; }
.input-with-btn select { flex: 1; }

.status-select { display: flex; gap: 16px; flex-wrap: wrap; padding: 4px 0; }
.status-opt { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text); cursor: pointer; }
.status-opt input { accent-color: var(--accent); }

/* Quill (dark — jediná inštancia je #quillEditor v tmavom #productModal) */
.quill-container {
  border: 1px solid rgba(var(--dz-fg-rgb),0.14) !important;
  border-radius: var(--radius) !important; overflow: hidden;
}
.ql-toolbar.ql-snow {
  border: none !important; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1) !important;
  background: rgba(var(--dz-fg-rgb),0.06);
}
.ql-container.ql-snow { border: none !important; min-height: 180px; }
.ql-editor { color: var(--dz-text2); font-family: var(--font); font-size: 0.88rem; min-height: 180px; }
.ql-editor.ql-blank::before { color: rgba(var(--dz-fg-rgb),0.35) !important; font-style: italic; }
.ql-toolbar.ql-snow .ql-stroke { stroke: rgba(var(--dz-fg-rgb),0.55); }
.ql-toolbar.ql-snow .ql-fill, .ql-toolbar.ql-snow .ql-stroke.ql-fill { fill: rgba(var(--dz-fg-rgb),0.55); }
.ql-toolbar.ql-snow .ql-picker { color: rgba(var(--dz-fg-rgb),0.55); }
.ql-toolbar.ql-snow .ql-picker-options { background: #1e2d4d; border-color: rgba(var(--dz-fg-rgb),0.14); }
.ql-toolbar.ql-snow .ql-picker-item { color: rgba(var(--dz-fg-rgb),0.7); }
.ql-toolbar.ql-snow button:hover .ql-stroke, .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--accent); }
.ql-toolbar.ql-snow button:hover .ql-fill, .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--accent); }

/* Nahrávanie súborov — obrázky aj prílohy (drag & drop), dark (jediné použitie: #productModal) */
.image-upload-zone, .file-upload-zone {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border: 1px dashed rgba(var(--dz-fg-rgb),0.18);
  border-radius: var(--radius); cursor: pointer;
  font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.45);
  background: rgba(var(--dz-fg-rgb),0.05); transition: all var(--transition);
}
.image-upload-zone:hover, .file-upload-zone:hover { border-color: rgba(8,145,178,0.7); color: var(--accent); background: rgba(8,145,178,0.1); }
.image-preview-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.image-preview-item {
  position: relative; width: 80px; height: 65px;
  border: 1px solid rgba(var(--dz-fg-rgb),0.14); border-radius: var(--radius); overflow: hidden;
}
.image-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.image-preview-remove {
  position: absolute; top: 2px; right: 2px;
  background: rgba(239,68,68,0.85); color: white;
  border: none; border-radius: 50%; width: 16px; height: 16px;
  font-size: 0.6rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.image-preview-annotate {
  position: absolute; top: 2px; left: 2px;
  background: rgba(8,145,178,0.9); color: white;
  border: none; border-radius: 50%; width: 16px; height: 16px;
  font-size: 0.6rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.image-preview-annotate:hover { background: var(--accent); }

/* Prílohy (súbory) — náhľad zoznamu v #productModal, dark */
.file-preview-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.file-preview-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.12);
  border-radius: var(--radius);
}
.file-preview-icon { color: #67e8f9; flex-shrink: 0; }
.file-preview-name { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--dz-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-preview-size { font-size: 0.7rem; color: rgba(var(--dz-fg-rgb),0.4); flex-shrink: 0; }
.file-preview-remove {
  background: rgba(239,68,68,0.85); color: white;
  border: none; border-radius: 50%; width: 18px; height: 18px;
  font-size: 0.65rem; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

/* ==============================
   UTILITIES
   ============================== */
.hidden { display: none !important; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Sensor device open button (dark page variant) ── */
.btn-sensor-device {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius);
  background: rgba(var(--dz-fg-rgb),0.08);
  color: rgba(var(--dz-fg-rgb),0.75);
  border: 1px solid rgba(var(--dz-fg-rgb),0.18);
  font-family: var(--font); font-size: 0.83rem;
  font-weight: 500; cursor: pointer; text-decoration: none;
  transition: all var(--transition); white-space: nowrap;
}
.btn-sensor-device:hover {
  background: rgba(var(--dz-fg-rgb),0.14);
  border-color: rgba(var(--dz-fg-rgb),0.32);
  color: #fff;
}

/* ── Home KB News section ── */
.hkb-news-section { margin-top: 18px; }
.hkb-news-hdr {
  display: flex; align-items: center;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.08);
}
.hkb-news-title {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(var(--dz-fg-rgb),0.3);
}
.hkb-news-list { display: flex; flex-direction: column; gap: 6px; }
.hkb-card {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.08);
  border-radius: var(--radius);
  cursor: pointer; transition: all var(--transition);
}
.hkb-card:hover {
  background: rgba(var(--dz-fg-rgb),0.1);
  border-color: rgba(var(--dz-fg-rgb),0.16);
  transform: translateX(2px);
}
.hkb-card-icon { font-size: 1.15rem; flex-shrink: 0; }
.hkb-card-body { flex: 1; min-width: 0; }
.hkb-card-title {
  font-size: 0.85rem; font-weight: 600;
  color: var(--dz-text2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hkb-card-meta { font-size: 0.7rem; color: rgba(var(--dz-fg-rgb),0.3); margin-top: 2px; }
.hkb-card-arrow { color: rgba(var(--dz-fg-rgb),0.2); font-size: 1rem; flex-shrink: 0; }

/* ==============================
   ADMIN PAGE
   ============================== */
.admin-page { background: var(--hdr-bg); }
.admin-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 36px 28px 52px;
}

/* Admin header */
.admin-hdr {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 20px; margin-bottom: 24px; flex-wrap: wrap;
}
.admin-title {
  font-family: var(--font-title); font-size: 1.6rem;
  font-weight: 700; color: var(--dz-text2);
  letter-spacing: 0.04em; margin-bottom: 4px;
}
.admin-sub { font-size: 0.8rem; color: rgba(var(--dz-fg-rgb),0.32); }

/* Tabs */
.admin-tabs {
  display: flex; gap: 3px; flex-wrap: wrap;
  background: rgba(var(--dz-fg-rgb),0.04);
  border: 1px solid rgba(var(--dz-fg-rgb),0.08);
  border-radius: var(--radius-lg);
  padding: 5px;
  margin-bottom: 22px;
}
.admin-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--radius);
  font-size: 0.8rem; font-weight: 500;
  color: rgba(var(--dz-fg-rgb),0.45);
  background: none; border: 1px solid transparent;
  cursor: pointer; font-family: var(--font);
  transition: all var(--transition); white-space: nowrap;
}
.admin-tab:hover { color: rgba(var(--dz-fg-rgb),0.75); background: rgba(var(--dz-fg-rgb),0.05); }
.admin-tab.active {
  color: var(--dz-text);
  background: rgba(var(--dz-fg-rgb),0.1);
  border-color: rgba(var(--dz-fg-rgb),0.12);
}

/* Panels */
.admin-panel { display: none; }
.admin-panel.active { display: block; }

/* Section */
.admin-section {
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.admin-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; gap: 12px; flex-wrap: wrap;
}
.admin-section-title {
  font-size: 0.95rem; font-weight: 700; color: var(--dz-text);
}
.admin-section-desc {
  font-size: 0.78rem; color: rgba(var(--dz-fg-rgb),0.35);
  margin-bottom: 18px;
}
.admin-section-actions { display: flex; gap: 8px; align-items: center; }

/* Config grid (sensor settings) */
.admin-cfg-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.admin-cfg-row {
  display: grid; grid-template-columns: 200px 1fr auto;
  align-items: center; gap: 12px;
}
@media (max-width: 600px) { .admin-cfg-row { grid-template-columns: 1fr; } }
.admin-cfg-label {
  font-size: 0.78rem; font-weight: 600; color: rgba(var(--dz-fg-rgb),0.55);
}
.admin-cfg-input {
  padding: 8px 11px; border-radius: var(--radius);
  background: rgba(var(--dz-fg-rgb),0.08);
  border: 1px solid rgba(var(--dz-fg-rgb),0.14);
  color: var(--dz-text); font-family: var(--font); font-size: 0.87rem;
  outline: none; transition: border-color var(--transition), box-shadow var(--transition);
}
.admin-cfg-input:focus {
  border-color: rgba(8,145,178,0.6);
  box-shadow: 0 0 0 3px rgba(8,145,178,0.12);
}
.admin-cfg-input::placeholder { color: rgba(var(--dz-fg-rgb),0.22); }
.admin-cfg-hint { font-size: 0.7rem; color: rgba(var(--dz-fg-rgb),0.22); white-space: nowrap; }

/* Sensor stats */
.admin-sensor-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 600px) { .admin-sensor-stats { grid-template-columns: 1fr; } }
.admin-stat-card {
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.08);
  border-radius: var(--radius); padding: 14px 16px;
}
.admin-stat-label {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(var(--dz-fg-rgb),0.3); margin-bottom: 6px;
}
.admin-stat-val {
  font-family: var(--font-title); font-size: 1.15rem;
  font-weight: 700; color: var(--dz-text);
}

/* Links list */
.admin-links-list { display: flex; flex-direction: column; gap: 8px; }
.admin-link-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.08);
  border-radius: var(--radius);
  transition: background var(--transition);
}
.admin-link-item:hover { background: rgba(var(--dz-fg-rgb),0.08); }
.admin-link-handle {
  color: rgba(var(--dz-fg-rgb),0.2); cursor: grab;
  font-size: 1rem; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.admin-link-chip { pointer-events: none; flex-shrink: 0; }
.admin-link-info { flex: 1; min-width: 0; }
.admin-link-label {
  font-size: 0.85rem; font-weight: 600; color: var(--dz-text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-link-url {
  font-size: 0.7rem; color: rgba(var(--dz-fg-rgb),0.28);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-link-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.admin-link-inactive { opacity: 0.45; }

.admin-icon-btn {
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  color: rgba(var(--dz-fg-rgb),0.45); border-radius: 6px;
  padding: 5px 8px; cursor: pointer; font-size: 0.78rem;
  transition: all var(--transition); font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
}
.admin-icon-btn:hover { background: rgba(var(--dz-fg-rgb),0.12); color: var(--dz-text); }
.admin-icon-btn.danger:hover { background: rgba(239,68,68,0.15); color: var(--dz-red); border-color: rgba(239,68,68,0.3); }

/* Danger small button */
.btn-danger-sm {
  padding: 7px 14px; border-radius: var(--radius);
  background: rgba(239,68,68,0.1); color: var(--dz-red);
  border: 1px solid rgba(239,68,68,0.25); font-family: var(--font);
  font-size: 0.78rem; font-weight: 500; cursor: pointer;
  transition: all var(--transition);
}
.btn-danger-sm:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4); }

/* Admin loading placeholder */
.admin-loading {
  padding: 24px; text-align: center;
  font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.25);
}

/* Coming soon panels */
.admin-coming-soon {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px;
  padding: 60px 24px;
  background: rgba(var(--dz-fg-rgb),0.04);
  border: 1px solid rgba(var(--dz-fg-rgb),0.08);
  border-radius: var(--radius-lg);
  text-align: center;
}
.acs-icon { font-size: 2.4rem; }
.acs-title { font-size: 1rem; font-weight: 700; color: rgba(var(--dz-fg-rgb),0.55); }
.acs-desc { font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.25); max-width: 400px; line-height: 1.6; }

/* Checkbox label */
.checkbox-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.65);
  cursor: pointer;
}
.checkbox-label input { accent-color: var(--accent); cursor: pointer; }

/* Link modal inputs (dark) */
#linkModal .modal-box { background: #131c35; border-color: rgba(var(--dz-fg-rgb),0.1); }
#linkModal .modal-header { background: rgba(var(--dz-fg-rgb),0.04); border-color: rgba(var(--dz-fg-rgb),0.08); }
#linkModal .modal-header h2 { color: var(--dz-text); }
#linkModal .modal-footer { background: rgba(var(--dz-fg-rgb),0.04); border-color: rgba(var(--dz-fg-rgb),0.08); }
#linkModal .modal-close { color: rgba(var(--dz-fg-rgb),0.4); }
#linkModal .modal-close:hover { background: rgba(239,68,68,0.15); color: var(--dz-red); }
#linkModal .form-group label { color: rgba(var(--dz-fg-rgb),0.55); }
#linkModal .form-group input[type="text"],
#linkModal .form-group select { background: rgba(var(--dz-fg-rgb),0.08); border-color: rgba(var(--dz-fg-rgb),0.14); color: var(--dz-text); }
#linkModal .form-group input[type="text"]::placeholder { color: rgba(var(--dz-fg-rgb),0.22); }
#linkModal .form-group input:focus,
#linkModal .form-group select:focus { border-color: rgba(8,145,178,0.6); }
#linkModal .form-group select option { background: #1e2d4d; }
#linkModal .btn-secondary { background: rgba(var(--dz-fg-rgb),0.07); color: rgba(var(--dz-fg-rgb),0.55); border-color: rgba(var(--dz-fg-rgb),0.14); }
#linkModal .btn-secondary:hover { background: rgba(var(--dz-fg-rgb),0.12); color: var(--dz-text); }

/* ==============================
   GUIDED TOUR
   ============================== */

/* ── Tour overlay — len blokuje kliknutia; vizuálnu tmu robí box-shadow na .tour-hl ── */
.tour-overlay {
  position: fixed; inset: 0;
  z-index: 9800;
  pointer-events: all;
  background: transparent;   /* tmu robí box-shadow na .tour-hl (zaoblená diera, bez švu) */
}
.tour-overlay.tour-no-el {   /* žiadny prvok → celé tmavé */
  background: rgba(5, 8, 22, 0.82);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.tour-overlay.hidden { display: none; }

/* ── Spotlight: zaoblená "diera v tme" + výrazný pulzujúci rámik ─────────────── */
.tour-hl {
  position: fixed;
  background: transparent;
  border-radius: 14px;
  z-index: 9802;
  pointer-events: none;
  box-shadow:
    0 0 0 9999px rgba(5, 8, 22, 0.82),       /* stmavenie zvyšku stránky */
    0 0 0 2px    rgba(0, 212, 255, 0.95),    /* ostrý cyan rámik */
    0 0 0 7px    rgba(0, 212, 255, 0.22),    /* jemná aura */
    0 0 34px 10px rgba(0, 212, 255, 0.6);    /* žiara */
  transition: top    0.3s cubic-bezier(.4,0,.2,1),
              left   0.3s cubic-bezier(.4,0,.2,1),
              width  0.3s cubic-bezier(.4,0,.2,1),
              height 0.3s cubic-bezier(.4,0,.2,1),
              opacity 0.18s;
}
.tour-hl.hidden { opacity: 0; pointer-events: none; }
.tour-hl::after {
  content: ''; position: absolute; inset: -5px;
  border: 2px solid rgba(0, 212, 255, 0.7);
  border-radius: 18px; pointer-events: none;
  animation: tourPulse 1.7s ease-in-out infinite;
}
@keyframes tourPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 0;    transform: scale(1.05); }
}

/* ── Popover card ──────────────────────────────────────────────────────────── */
.tour-popover {
  position: fixed;
  z-index: 9803;
  min-width: 288px;
  max-width: 360px;
  background: #0c1328;
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 16px;
  padding: 20px 22px 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(0, 212, 255, 0.07);
  transition: top .28s cubic-bezier(.4,0,.2,1), left .28s cubic-bezier(.4,0,.2,1);
}
/* Decorative top-accent line */
.tour-popover::before {
  content: '';
  position: absolute; top: 0; left: 20px; right: 20px;
  height: 2px; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.6), transparent);
}

.tour-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none;
  color: rgba(var(--dz-fg-rgb),0.35); cursor: pointer;
  font-size: 0.95rem; padding: 5px 7px; border-radius: 6px;
  transition: all .15s; line-height: 1;
}
.tour-close:hover { color: #fff; background: rgba(var(--dz-fg-rgb),0.1); }

/* Progress strip */
.tour-meta {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.tour-step-num {
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dz-cyan); flex-shrink: 0;
}
.tour-prog-track {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(var(--dz-fg-rgb),0.1);
  overflow: hidden;
}
.tour-prog-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #0891b2, #00d4ff);
  transition: width .3s ease;
}

.tour-title {
  font-size: 1.02rem; font-weight: 700; color: var(--dz-text);
  margin: 0 0 9px; line-height: 1.35;
}
.tour-desc {
  font-size: 0.82rem; color: rgba(200, 216, 240, 0.78);
  line-height: 1.65; margin-bottom: 16px;
}
.tour-desc strong { color: var(--dz-cyan); font-weight: 600; }
.tour-desc em     { color: var(--dz-purple); font-style: normal; }
.tour-desc kbd {
  background: rgba(var(--dz-fg-rgb),0.1); border: 1px solid rgba(var(--dz-fg-rgb),0.2);
  border-radius: 4px; padding: 1px 5px; font-size: 0.73rem;
  font-family: 'Courier New', monospace;
}
.tour-desc ul { padding-left: 16px; margin: 6px 0; }
.tour-desc li { margin-bottom: 3px; }

/* Footer buttons */
.tour-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tour-btn {
  padding: 7px 18px; border-radius: 9px; border: none;
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
  transition: all .15s; font-family: inherit; white-space: nowrap;
}
.tour-btn-prev {
  background: rgba(var(--dz-fg-rgb),0.07); color: rgba(var(--dz-fg-rgb),0.5);
  border: 1px solid rgba(var(--dz-fg-rgb),0.12);
}
.tour-btn-prev:hover  { background: rgba(var(--dz-fg-rgb),0.12); color: #fff; }
.tour-btn-prev:disabled,
.tour-btn-prev.hidden { visibility: hidden; }

.tour-btn-next {
  background: rgba(0, 212, 255, 0.14); color: var(--dz-cyan);
  border: 1px solid rgba(0, 212, 255, 0.35);
  margin-left: auto;
}
.tour-btn-next:hover  { background: rgba(0, 212, 255, 0.25); border-color: rgba(0,212,255,.6); }
.tour-btn-next.done   { background: rgba(74,222,128,0.14); color: var(--dz-green); border-color: rgba(74,222,128,0.35); }
.tour-btn-next.done:hover { background: rgba(74,222,128,0.26); }

/* ── Floating "Pomoc ?" FAB ─────────────────────────────────────────────────── */
.tour-fab {
  position: fixed; bottom: 22px; left: 22px; z-index: 500;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 100px;
  background: rgba(0, 212, 255, 0.10);
  border: 1px solid rgba(0, 212, 255, 0.28);
  color: var(--dz-cyan); cursor: pointer;
  font-size: 0.78rem; font-weight: 600;
  font-family: inherit; letter-spacing: 0.02em;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: all .22s;
}
.tour-fab:hover {
  background: rgba(0, 212, 255, 0.20);
  border-color: rgba(0, 212, 255, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 212, 255, 0.14);
}
.tour-fab svg { flex-shrink: 0; }

/* =============================================
   FOS AI ASISTENT (vizuálny chat widget)
   ============================================= */
.hdr-sensor-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #64748b; }
.hdr-sensor-dot.on { background: #34d399; box-shadow: 0 0 5px #34d399; }
.hdr-sensor-dot.off { background: #94a3b8; }

.bot-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 600;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #00d4ff 0%, #6366f1 100%);
  border: none; color: #06121f; cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,150,220,0.45), 0 0 0 0 rgba(0,212,255,0.5);
  transition: transform .22s, box-shadow .22s;
  animation: botPulse 3.2s ease-in-out infinite;
}
.bot-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 34px rgba(0,180,255,0.55); }
.bot-fab svg { color: #06121f; }
.bot-fab-dot {
  position: absolute; top: 6px; right: 6px; width: 11px; height: 11px;
  background: #34d399; border: 2px solid #06121f; border-radius: 50%;
}
@keyframes botPulse {
  0%,100% { box-shadow: 0 8px 26px rgba(0,150,220,0.45), 0 0 0 0 rgba(0,212,255,0.45); }
  50%     { box-shadow: 0 8px 26px rgba(0,150,220,0.45), 0 0 0 12px rgba(0,212,255,0); }
}

.bot-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 601;
  width: 374px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
  background: rgba(11,16,33,0.97);
  border: 1px solid rgba(103,232,249,0.22);
  border-radius: 18px; overflow: hidden;
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  transform-origin: bottom right;
  animation: botPop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes botPop { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }

.bot-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; gap: 10px;
  background: linear-gradient(135deg, rgba(0,212,255,0.14), rgba(99,102,241,0.14));
  border-bottom: 1px solid rgba(103,232,249,0.16);
}
.bot-head-id { display: flex; align-items: center; gap: 10px; }
.bot-avatar {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
  background: linear-gradient(140deg, #00d4ff, #6366f1);
  box-shadow: 0 4px 14px rgba(0,150,220,0.4);
}
.bot-name { font-family: var(--font-title); font-weight: 700; font-size: 0.95rem; color: var(--dz-text); line-height: 1.1; }
.bot-status { font-size: 0.68rem; color: rgba(var(--dz-fg-rgb),0.5); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.bot-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 6px #34d399; }
.bot-close {
  background: rgba(var(--dz-fg-rgb),0.07); border: none; color: rgba(var(--dz-fg-rgb),0.6);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
  transition: all var(--transition);
}
.bot-close:hover { background: rgba(var(--dz-fg-rgb),0.16); color: #fff; }

.bot-msgs {
  flex: 1; overflow-y: auto; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 11px;
  scrollbar-width: thin; scrollbar-color: rgba(103,232,249,0.3) transparent;
}
.bot-msgs::-webkit-scrollbar { width: 6px; }
.bot-msgs::-webkit-scrollbar-thumb { background: rgba(103,232,249,0.25); border-radius: 3px; }

.bot-msg { display: flex; gap: 8px; max-width: 90%; animation: botMsgIn .25s ease; }
@keyframes botMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bot-msg-av {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
  background: linear-gradient(140deg, #00d4ff, #6366f1);
}
.bot-bubble {
  padding: 9px 12px; border-radius: 13px; font-size: 0.83rem; line-height: 1.5;
  color: var(--dz-text);
}
.bot-msg.bot { align-self: flex-start; }
.bot-msg.bot .bot-bubble {
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.08);
  border-top-left-radius: 4px;
}
.bot-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.bot-msg.user .bot-bubble {
  background: linear-gradient(135deg, rgba(0,212,255,0.18), rgba(99,102,241,0.2));
  border: 1px solid rgba(0,212,255,0.28); border-top-right-radius: 4px; color: var(--dz-text);
}
.bot-bubble b, .bot-bubble strong { color: var(--dz-cyan); font-weight: 600; }
.bot-bubble ul { margin: 6px 0 2px; padding-left: 16px; }
.bot-bubble li { margin: 3px 0; }
.bot-bubble code { background: rgba(0,0,0,0.35); padding: 1px 6px; border-radius: 5px; font-size: 0.78rem; color: #a5f3fc; }
.bot-action {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  padding: 5px 11px; border-radius: 100px; cursor: pointer;
  background: rgba(0,212,255,0.12); border: 1px solid rgba(0,212,255,0.32);
  color: var(--dz-cyan); font-size: 0.76rem; font-weight: 600; font-family: inherit;
  transition: all var(--transition);
}
.bot-action:hover { background: rgba(0,212,255,0.22); transform: translateY(-1px); }

.bot-typing { display: flex; gap: 4px; padding: 11px 13px; }
.bot-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(103,232,249,0.7);
  animation: botBlink 1.2s infinite both;
}
.bot-typing span:nth-child(2) { animation-delay: .2s; }
.bot-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes botBlink { 0%,80%,100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

.bot-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.bot-chip {
  padding: 6px 11px; border-radius: 100px; cursor: pointer;
  background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.12);
  color: rgba(var(--dz-fg-rgb),0.78); font-size: 0.74rem; font-family: inherit;
  transition: all var(--transition);
}
.bot-chip:hover { background: rgba(0,212,255,0.14); border-color: rgba(0,212,255,0.4); color: var(--dz-cyan); }

.bot-input {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px;
  border-top: 1px solid rgba(var(--dz-fg-rgb),0.08); background: rgba(0,0,0,0.18);
}
.bot-input input {
  flex: 1; background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.12);
  border-radius: 100px; padding: 9px 14px; color: var(--dz-text); font-size: 0.82rem; font-family: inherit;
  outline: none; transition: border-color var(--transition);
}
.bot-input input:focus { border-color: rgba(0,212,255,0.5); }
.bot-input input::placeholder { color: rgba(var(--dz-fg-rgb),0.35); }
.bot-send {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #00d4ff, #6366f1); color: #06121f;
  transition: transform var(--transition);
}
.bot-send:hover { transform: scale(1.08); }

@media (max-width: 768px) {
  .bot-fab { right: 16px; bottom: 16px; }
  .bot-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: 70vh; max-height: 70vh; }
}

/* Overlay (9800) prekryje a zašedí celú stránku vrátane hlavičky;
   clip-path vyreže dieru len na zvýraznenom komponente. Žiadne dvíhanie z-indexu. */

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width: 768px) {
  .hero { flex-direction: column; }
  .hero-visual { display: none; }
  .sidebar { width: 220px; }
  .wiki-main { padding: 16px; }
  .wh-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .header-quicklinks { display: none; }
}

/* =============================================
   CALENDAR (kancelária)
   ============================================= */
.calendar-page { background: var(--hdr-bg); }
.calendar-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 36px 28px 52px;
}

.cal-hdr {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 20px; margin-bottom: 22px; flex-wrap: wrap;
}
.cal-title {
  font-family: var(--font-title); font-size: 1.6rem;
  font-weight: 700; color: var(--dz-text2);
  letter-spacing: 0.04em; margin-bottom: 4px;
}
.cal-sub { font-size: 0.8rem; color: rgba(var(--dz-fg-rgb),0.32); }

/* ── Akčné tlačidlá v hlavičke kalendára — jednotné ikony (SVG), veľkosť a zoskupenie ── */
.cal-hdr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-act { height: 38px; padding: 0 15px; border-radius: 9px; font-size: 0.83rem; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; gap: 7px; }
.cal-act svg { width: 16px; height: 16px; flex-shrink: 0; }
.cal-act-icon { width: 38px; padding: 0; justify-content: center; }   /* iba ikona (Tlač) */
.cal-act-sep { width: 1px; height: 22px; background: rgba(var(--dz-fg-rgb),0.18); margin: 0 3px; align-self: center; }
.cal-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Na tmavej hlavičke kalendára majú sekundárne tlačidlá jemný priehľadný vzhľad (nie stark biely) */
.calendar-page:not(.cal-light) .cal-hdr .btn-secondary {
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.14); color: var(--dz-text2);
}
.calendar-page:not(.cal-light) .cal-hdr .btn-secondary:hover {
  background: rgba(var(--dz-fg-rgb),0.12); border-color: rgba(var(--dz-fg-rgb),0.24); color: #fff;
}
@media (max-width: 640px) { .cal-hdr-actions { width: 100%; } }

/* Toolbar (month nav) */
.cal-toolbar {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  position: sticky; top: var(--header-h); z-index: 40;
  background: var(--hdr-bg); padding: 10px 0; margin-bottom: 6px;
  border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.06);
}
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; line-height: 1;
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius);
  color: var(--dz-text2); cursor: pointer;
  transition: all var(--transition);
}
.cal-nav-btn:hover { background: rgba(var(--dz-fg-rgb),0.1); color: #fff; }
.cal-today-btn {
  padding: 7px 16px; border-radius: var(--radius);
  font-size: 0.8rem; font-weight: 500; font-family: var(--font);
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  color: var(--dz-text2); cursor: pointer;
  transition: all var(--transition);
}
.cal-today-btn:hover { background: rgba(var(--dz-fg-rgb),0.1); color: #fff; }
.cal-month-label {
  font-family: var(--font-title); font-size: 1.15rem;
  font-weight: 600; color: var(--dz-text); letter-spacing: 0.02em;
}

/* Grid */
.cal-grid-wrap {
  background: rgba(var(--dz-fg-rgb),0.04);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius-lg);
  overflow: visible;
}
.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1);
  position: sticky; top: var(--cal-sticky-top, 116px); z-index: 30;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.cal-weekdays > div {
  padding: 10px 8px; text-align: center;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(var(--dz-fg-rgb),0.45);
}
.cal-weekdays .cal-weekend { color: rgba(248,113,113,0.55); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(150px, 1fr);
}
.cal-cell {
  border-right: 1px solid rgba(var(--dz-fg-rgb),0.06);
  border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.06);
  padding: 5px 6px 8px;
  min-height: 150px;
  cursor: pointer;
  transition: background var(--transition);
  overflow: visible;
  display: flex; flex-direction: column;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: rgba(var(--dz-fg-rgb),0.04); }
.cal-cell-out { background: rgba(0,0,0,0.12); }
.cal-cell-out .cal-cell-num { color: rgba(var(--dz-fg-rgb),0.22); }
.cal-cell-weekend { background: rgba(var(--dz-fg-rgb),0.015); }
.cal-cell-num {
  font-size: 0.86rem; font-weight: 600;
  color: rgba(var(--dz-fg-rgb),0.7);
  margin-bottom: 5px; text-align: left;
  width: 27px; height: 27px; line-height: 27px; text-align: center;
  border-radius: 50%; flex-shrink: 0;
}
.cal-cell-num[data-open-day]:hover { background: rgba(var(--dz-fg-rgb),0.1); color: #fff; }
.cal-cell-today .cal-cell-num {
  background: var(--accent); color: #fff;
}
.cal-cell-events { display: flex; flex-direction: column; gap: 3px; min-height: 0; }

/* Udalosti — Outlook štýl: celodenné = plný pruh, časové = bodka + čas + názov */
.cal-ev {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: 0.8rem; line-height: 1.3;
  padding: 3px 7px; border-radius: 5px;
  color: var(--dz-text);
  cursor: pointer;
  transition: background var(--transition), filter var(--transition);
}
.cal-ev-timed { background: transparent; }
.cal-ev-timed:hover { background: rgba(var(--dz-fg-rgb),0.07); }
.cal-ev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ev-color); flex-shrink: 0; margin-top: 4px; }
.cal-ev-time { font-weight: 700; color: var(--dz-text2); flex-shrink: 0; white-space: nowrap; }
.cal-ev-txt { overflow: hidden; overflow-wrap: anywhere; white-space: normal; }
.cal-ev-allday {
  background: var(--ev-color); color: var(--ev-text, #fff); font-weight: 600;
}
.cal-ev-allday:hover { filter: brightness(1.08); }

@media (max-width: 720px) {
  .calendar-inner { padding: 22px 12px 40px; }
  .cal-grid { grid-auto-rows: minmax(96px, 1fr); }
  .cal-cell { min-height: 96px; padding: 4px; }
  .cal-ev { font-size: 0.68rem; padding: 2px 5px; gap: 4px; }
  .cal-cell-num { width: 22px; height: 22px; line-height: 22px; font-size: 0.76rem; }
  .cal-weekdays > div { font-size: 0.62rem; padding: 7px 2px; }
}

/* =============================================
   FORM INPUTS — rozšírenie (date/time/number/textarea)
   ============================================= */
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="number"],
.form-group textarea {
  padding: 8px 11px; border-radius: var(--radius);
  background: var(--card-bg); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font); font-size: 0.87rem;
  outline: none; transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group textarea { resize: vertical; min-height: 44px; line-height: 1.45; }
.form-group textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(8,145,178,0.1);
}
.form-hint { font-weight: 400; color: var(--text-xdim); font-size: 0.7rem; }

/* =============================================
   HEADER — "Súbory" dropdown (serverové priečinky + šablóny)
   ============================================= */
.ql-chip.ql-files {
  color: var(--dz-amber); border-color: rgba(252,211,77,0.3); background: rgba(252,211,77,0.08);
}
.ql-chip.ql-files:hover { background: rgba(252,211,77,0.18); border-color: rgba(252,211,77,0.5); }
.ql-files-icon { font-size: 0.8rem; }
.ql-files-caret { font-size: 0.6rem; opacity: 0.7; }

.files-popover {
  position: fixed; top: calc(var(--header-h) + 8px); z-index: 300;
  background: #1e293b; border: 1px solid rgba(252,211,77,0.25);
  border-radius: var(--radius-lg);
  padding: 12px; min-width: 300px; max-width: 420px;
  max-height: 70vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.files-section { margin-bottom: 12px; }
.files-section:last-child { margin-bottom: 0; }
.files-section-title {
  font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--dz-text2); font-weight: 600;
  text-transform: uppercase; margin-bottom: 6px;
  padding-bottom: 5px; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.08);
}
.files-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.files-row-link {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  padding: 6px 8px; border-radius: 6px; text-decoration: none;
  transition: background var(--transition);
}
.files-row-link:hover { background: rgba(var(--dz-fg-rgb),0.06); }
.files-row-label { font-size: 0.82rem; color: var(--dz-text2); font-weight: 500; }
.files-row-path {
  font-size: 0.7rem; color: #94a3b8;
  font-family: 'Courier New', monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.files-row-btn {
  flex-shrink: 0; width: 28px; height: 28px;
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: 6px; color: var(--dz-text2); cursor: pointer;
  font-size: 0.85rem; transition: all var(--transition);
}
.files-row-btn:hover { background: rgba(var(--dz-fg-rgb),0.12); color: #fff; }
.files-empty { font-size: 0.8rem; color: #94a3b8; padding: 8px; }

/* =============================================
   PROCEDURES (pracovné postupy)
   ============================================= */
.procedures-page { background: var(--hdr-bg); }
.proc-inner {
  max-width: 1000px; margin: 0 auto;
  padding: 36px 28px 52px;
}
.proc-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 18px; flex-wrap: wrap;
}
.proc-title {
  font-family: var(--font-title); font-size: 1.6rem;
  font-weight: 700; color: var(--dz-text2);
  letter-spacing: 0.04em; margin-bottom: 4px;
}
.proc-sub { font-size: 0.8rem; color: rgba(var(--dz-fg-rgb),0.32); }

.proc-toolbar { display: flex; gap: 10px; margin-bottom: 18px; align-items: center; flex-wrap: wrap; }
.proc-toolbar .proc-search-wrap { margin-bottom: 0; flex: 1; min-width: 220px; }
.proc-filter {
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius);
  padding: 9px 12px; color: var(--dz-text2); font-family: var(--font); font-size: 0.85rem;
  outline: none; cursor: pointer;
}
.proc-filter option { background: #1e293b; color: var(--dz-text2); }
.proc-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius);
  padding: 8px 12px; margin-bottom: 18px;
}
.proc-search-wrap svg { color: rgba(var(--dz-fg-rgb),0.4); flex-shrink: 0; }
.proc-search-wrap input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--dz-text2); font-family: var(--font); font-size: 0.85rem;
}
.proc-search-wrap input::placeholder { color: rgba(var(--dz-fg-rgb),0.35); }

.proc-list { display: flex; flex-direction: column; gap: 10px; }

/* Tabuľkový prehľad postupov */
.proc-table-wrap {
  overflow-x: auto;
  background: rgba(var(--dz-fg-rgb),0.04);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius-lg);
}
.proc-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.proc-table thead th {
  position: sticky; top: 0;
  text-align: left; padding: 11px 14px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(var(--dz-fg-rgb),0.55);
  background: rgba(var(--dz-fg-rgb),0.06);
  border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.12);
  white-space: nowrap;
}
.proc-table th.proc-th { cursor: pointer; user-select: none; transition: color var(--transition); }
.proc-table th.proc-th:hover { color: var(--dz-text2); }
.proc-table th.proc-th.active { color: var(--accent); }
.proc-table th.num, .proc-table td.proc-td-num { text-align: center; }
.proc-table th.proc-th-actions { text-align: right; }
.proc-table tbody td {
  padding: 10px 14px; color: var(--dz-text2);
  border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.06);
  vertical-align: middle;
}
.proc-table tbody tr:last-child td { border-bottom: none; }
.proc-tr { cursor: pointer; transition: background var(--transition); }
.proc-tr:hover td { background: rgba(var(--dz-fg-rgb),0.05); }
.proc-td-title { font-weight: 600; color: var(--dz-text); }
.proc-td-date, .proc-td-rev { white-space: nowrap; color: rgba(var(--dz-fg-rgb),0.7); }
.proc-td-actions { white-space: nowrap; }
.proc-td-actions .proc-actions-row { display: flex; gap: 6px; justify-content: flex-end; }
.proc-td-actions .admin-icon-btn { flex: 0 0 auto; }
.proc-table .pdv-rev-flag { font-size: 0.66rem; padding: 1px 6px; }

.proc-card {
  display: flex; align-items: center; gap: 14px;
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  transition: all var(--transition);
}
.proc-card:hover { background: rgba(var(--dz-fg-rgb),0.08); border-color: rgba(var(--dz-fg-rgb),0.16); }
.proc-card-main { flex: 1; min-width: 0; cursor: pointer; }
.proc-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
.proc-card-title { font-size: 0.98rem; font-weight: 600; color: var(--dz-text); }
.proc-card-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.74rem; color: rgba(var(--dz-fg-rgb),0.5); }

.proc-status-badge {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 10px;
}
.proc-status-active   { color: var(--dz-green); background: rgba(110,231,183,0.12); }
.proc-status-draft    { color: var(--dz-amber); background: rgba(252,211,77,0.12); }
.proc-status-archived { color: #94a3b8; background: rgba(148,163,184,0.12); }

.proc-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.btn-word {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--radius);
  font-size: 0.76rem; font-weight: 600; font-family: var(--font);
  color: var(--dz-blue); background: rgba(37,99,235,0.15);
  border: 1px solid rgba(147,197,253,0.3); cursor: pointer;
  transition: all var(--transition);
}
.btn-word:hover { background: rgba(37,99,235,0.28); color: #dbeafe; }

.proc-empty {
  text-align: center; padding: 40px 20px;
  font-size: 0.9rem; color: rgba(var(--dz-fg-rgb),0.45);
  background: rgba(var(--dz-fg-rgb),0.03);
  border: 1px dashed rgba(var(--dz-fg-rgb),0.12);
  border-radius: var(--radius-lg);
}
.proc-empty-actions { margin-top: 14px; }

/* Procedure modal — dynamic rows */
.proc-rows-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.proc-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.proc-row { display: flex; align-items: flex-start; gap: 6px; }
.proc-row input[type="text"], .proc-row-multi input {
  flex: 1; min-width: 0;
  padding: 7px 10px; border-radius: var(--radius);
  background: var(--card-bg); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font); font-size: 0.84rem; outline: none;
}
.proc-row input[type="text"]:focus, .proc-row-multi input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(8,145,178,0.1); }

/* Sekčné rozdeľovače vo formulári postupu */
.proc-form-section {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent); margin: 24px 0 4px;
  padding-bottom: 6px; border-bottom: 2px solid var(--accent-light);
}

/* ── Segmenty editora (kategórie) ── */
.proc-edit-split .proc-edit-body { background: transparent; box-shadow: none; padding: 0 6px 40px 0; gap: 16px; }
.proc-seg {
  background: #fff; border: 1px solid #dfe4ec; border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15,18,40,0.06); overflow: hidden;
  transition: opacity var(--transition), box-shadow var(--transition);
}
.proc-seg:hover { box-shadow: 0 4px 16px rgba(15,18,40,0.10); }
.proc-seg-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 8px;
  background: linear-gradient(180deg, #fbfcfe, #f1f4f9);
  border-bottom: 1px solid #e6eaf1;
}
.proc-seg-toggle {
  flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0;
  background: none; border: 0; cursor: pointer; font-family: var(--font);
  padding: 11px 6px; text-align: left;
}
.proc-seg-ico {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px;
  background: #1a1a2e; color: #fff; font-weight: 800; font-size: 0.9rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.proc-seg-title { font-weight: 700; font-size: 0.98rem; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-seg-caret-btn { background: none; border: 0; cursor: pointer; color: #94a3b8; padding: 8px; border-radius: 6px; }
.proc-seg-caret-btn:hover { background: rgba(0,0,0,0.05); color: #475569; }
.proc-seg-caret { display: inline-block; transition: transform 0.2s; font-size: 0.85rem; }
.proc-seg.collapsed .proc-seg-caret { transform: rotate(-90deg); }
.proc-seg.collapsed .proc-seg-hd { border-bottom: 0; }
.proc-seg-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.proc-seg.collapsed .proc-seg-body { display: none; }

/* Editovateľné hlavičky/stĺpce štruktúrovaných tabuliek */
.pt-head { display: flex; align-items: stretch; gap: 6px; margin-bottom: 6px; }
.pt-col { display: flex; align-items: center; min-width: 0; gap: 2px; }
.pt-collabel {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: var(--radius) 0 0 var(--radius);
  background: #eef2f7; border: 1px solid var(--border); border-right: 0;
  color: #1e293b; font-family: var(--font); font-size: 0.78rem; font-weight: 700; outline: none;
}
.pt-collabel:focus { background: #fff; border-color: var(--border-focus); }
.pt-coldel {
  width: 22px; align-self: stretch; flex-shrink: 0; cursor: pointer;
  background: #eef2f7; border: 1px solid var(--border); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0;
  color: #94a3b8; font-size: 0.85rem;
}
.pt-coldel:hover { background: #fee2e2; color: #ef4444; }
.pt-coladd {
  flex-shrink: 0; width: 32px; cursor: pointer; border-radius: var(--radius);
  background: var(--accent-light); border: 1px dashed var(--border-focus); color: var(--accent); font-weight: 700;
}
.pt-coladd:hover { background: var(--accent); color: #fff; }
.pt-rows { display: flex; flex-direction: column; gap: 6px; }

/* Prázdny zoznam položiek — náznak namiesto „prázdnej" karty */
.pt-rows:empty::after,
.proc-rows:empty::after {
  content: 'Zatiaľ žiadne položky — pridajte tlačidlom „+ Pridať".';
  display: block; padding: 10px 12px; border: 1px dashed #d6dce6; border-radius: 8px;
  color: #94a3b8; font-size: 0.82rem; background: #fafbfd;
}

/* Prepínač zahrnutia kategórie (zelený = zahrnuté) */
.proc-seg-switch { flex-shrink: 0; display: inline-flex; align-items: center; cursor: pointer; padding: 4px; }
.proc-seg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.proc-seg-switch-track {
  width: 40px; height: 22px; border-radius: 11px; background: #cbd5e1;
  position: relative; transition: background 0.2s;
}
.proc-seg-switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.proc-seg-switch input:checked + .proc-seg-switch-track { background: #6aa80e; }
.proc-seg-switch input:checked + .proc-seg-switch-track::after { transform: translateX(18px); }

/* Vypnutá kategória */
.proc-seg.disabled { opacity: 0.6; background: #f7f8fa; }
.proc-seg.disabled .proc-seg-ico { background: #9aa3b2; }
.proc-seg.disabled .proc-seg-body { display: none; }
.proc-seg.disabled .proc-seg-title::after { content: ' · vynechané'; color: #94a3b8; font-weight: 500; font-size: 0.8rem; }

/* Viacstĺpcové riadky tabuliek — na úzkom paneli sa zalomia namiesto stláčania */
.proc-row-multi { flex-wrap: wrap; }
.proc-row-multi input { min-width: 130px; }


.proc-step-subsection {
  width: 100%; padding: 7px 10px; border-radius: var(--radius);
  background: var(--accent-light); border: 1px dashed var(--border-focus);
  color: var(--text); font-family: var(--font); font-size: 0.84rem; font-weight: 600; outline: none;
  margin-bottom: 6px;
}
.proc-row-step { align-items: stretch; }
.proc-step-handle { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.proc-step-fields { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.proc-row-move {
  width: 22px; height: 18px; line-height: 1;
  background: var(--page-bg); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text-dim); cursor: pointer; font-size: 0.7rem;
}
.proc-row-move:hover { background: var(--accent-light); color: var(--accent); }
.proc-row-del {
  width: 30px; height: 32px; flex-shrink: 0;
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: var(--radius); color: #ef4444; cursor: pointer; font-size: 0.85rem;
  transition: all var(--transition);
}
.proc-row-del:hover { background: #fee2e2; }

@media (max-width: 560px) {
  .proc-inner { padding: 22px 14px 40px; }
  .proc-card { flex-direction: column; align-items: stretch; }
  .proc-card-actions { justify-content: flex-end; }
}

/* App version indicator (header) */
.app-version {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(var(--dz-fg-rgb),0.35);
  padding: 2px 7px; border-radius: 10px;
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.08);
  cursor: default; white-space: nowrap;
}

/* =============================================
   HEADER — kategorizované rozbalovacie menu
   ============================================= */
.ql-chip.ql-menu { cursor: pointer; }
.ql-menu-files      { color: var(--dz-amber); border-color: rgba(252,211,77,0.3);  background: rgba(252,211,77,0.08); }
.ql-menu-files:hover{ background: rgba(252,211,77,0.18); border-color: rgba(252,211,77,0.5); }
.ql-menu-custom      { color: var(--dz-purple); border-color: rgba(196,181,253,0.3); background: rgba(196,181,253,0.08); }
.ql-menu-custom:hover{ background: rgba(196,181,253,0.18); border-color: rgba(196,181,253,0.5); }
.ql-menu-jedlo      { color: #fdba74; border-color: rgba(253,186,116,0.3); background: rgba(253,186,116,0.08); }
.ql-menu-jedlo:hover{ background: rgba(253,186,116,0.18); border-color: rgba(253,186,116,0.5); }
.ql-menu-erp        { color: var(--dz-cyan); border-color: rgba(103,232,249,0.3); background: rgba(103,232,249,0.08); }
.ql-menu-erp:hover  { background: rgba(103,232,249,0.18); border-color: rgba(103,232,249,0.5); }
.ql-menu-sharepoint      { color: var(--dz-green); border-color: rgba(134,239,172,0.3); background: rgba(134,239,172,0.08); }
.ql-menu-sharepoint:hover{ background: rgba(134,239,172,0.18); border-color: rgba(134,239,172,0.5); }
.ql-menu-other      { color: var(--dz-blue); border-color: rgba(147,197,253,0.3); background: rgba(147,197,253,0.08); }
.ql-menu-other:hover{ background: rgba(147,197,253,0.18); border-color: rgba(147,197,253,0.5); }

/* Inline prístupy (credential) v rozbalovacom menu */
.menu-cred {
  margin: 2px 4px 6px; padding: 8px 10px;
  background: rgba(196,181,253,0.08);
  border: 1px solid rgba(196,181,253,0.2);
  border-radius: 8px;
}
.menu-cred-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.menu-cred-row:last-child { margin-bottom: 0; }
.menu-cred-label {
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #94a3b8; font-weight: 600; width: 42px; flex-shrink: 0;
}
.menu-cred-val {
  flex: 1; min-width: 0; font-family: 'Courier New', monospace;
  font-size: 0.8rem; color: var(--dz-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =============================================
   NOVINKY (oznámenia na úvode)
   ============================================= */
.home-news-section {
  background: linear-gradient(135deg, rgba(250,204,21,0.16), rgba(245,158,11,0.10));
  border: 1px solid rgba(250,204,21,0.45);
  border-left: 4px solid #facc15;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 18px;
  box-shadow: 0 0 24px rgba(250,204,21,0.12);
  backdrop-filter: blur(8px);
}
.home-news-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.home-news-hdr-left { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.home-news-title {
  font-family: var(--font-title); font-size: 1.2rem; font-weight: 700;
  color: var(--dz-amber); letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(250,204,21,0.3);
}
.home-news-sub { font-size: 0.78rem; color: rgba(253,230,138,0.6); }

.home-news-list { display: flex; flex-direction: column; gap: 8px; }
.news-empty {
  font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.35);
  padding: 14px; text-align: center;
  border: 1px dashed rgba(var(--dz-fg-rgb),0.12); border-radius: var(--radius);
}
.news-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius);
  background: rgba(var(--dz-fg-rgb),0.04);
  border: 1px solid rgba(var(--dz-fg-rgb),0.08);
  border-left: 3px solid rgba(var(--dz-fg-rgb),0.2);
  transition: background var(--transition);
}
.news-card:hover { background: rgba(var(--dz-fg-rgb),0.07); }
.news-info      { border-left-color: #60a5fa; }
.news-important { border-left-color: var(--dz-red); }
.news-success   { border-left-color: var(--dz-green); }
.news-warning   { border-left-color: var(--dz-amber); }
.news-pinned    { background: rgba(252,211,77,0.06); }
.news-card-icon { font-size: 1.05rem; line-height: 1.4; flex-shrink: 0; }
.news-card-body { flex: 1; min-width: 0; }
.news-card-title {
  font-size: 0.92rem; font-weight: 600; color: var(--dz-text);
  display: flex; align-items: center; gap: 5px;
}
.news-pin { font-size: 0.75rem; }
.news-card-text {
  font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.6);
  margin-top: 3px; line-height: 1.45; white-space: pre-wrap;
}
.news-card-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.7rem; color: rgba(var(--dz-fg-rgb),0.4); margin-top: 6px;
}
.news-type-badge {
  padding: 1px 7px; border-radius: 8px;
  background: rgba(var(--dz-fg-rgb),0.08); color: rgba(var(--dz-fg-rgb),0.55);
  font-weight: 600; letter-spacing: 0.03em;
}
.news-card-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* =============================================
   PROCEDURES — rich operácie, ikony, náhľad
   ============================================= */
.proc-steps { display: flex; flex-direction: column; gap: 14px; }

.proc-step-card {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.proc-step-card-hdr {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.proc-step-badge {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-light);
  padding: 3px 10px; border-radius: 10px;
}
.proc-step-card-tools { display: flex; gap: 4px; }

.proc-step-editor { background: #fff; border-radius: var(--radius); }
.proc-step-editor .ql-container { min-height: 90px; font-size: 0.9rem; }
.proc-step-editor .ql-toolbar { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.proc-step-card .proc-step-note {
  width: 100%; margin-top: 8px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font); font-size: 0.83rem; color: var(--text); outline: none;
}

.proc-step-section { margin-top: 10px; }
.proc-mini-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 6px;
}
.proc-step-img { margin-bottom: 6px; }
.proc-thumb { position: relative; display: inline-block; }
.proc-thumb img { max-height: 120px; max-width: 100%; border-radius: var(--radius); border: 1px solid var(--border); display: block; }
.proc-thumb-del {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--danger); color: #fff; border: 2px solid #fff;
  cursor: pointer; font-size: 0.7rem; line-height: 1;
}
.proc-thumb-empty { font-size: 0.78rem; color: var(--text-xdim); }

/* Výber ikon (upozornenia / pomôcky) */
.proc-icon-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.proc-icon-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 20px;
  background: #fff; border: 1px solid var(--border);
  cursor: pointer; font-family: var(--font); font-size: 0.76rem; color: var(--text-dim);
  transition: all var(--transition);
}
.proc-icon-btn:hover { border-color: var(--accent); color: var(--text); }
.proc-icon-btn.active {
  background: var(--accent-light); border-color: var(--accent); color: var(--accent); font-weight: 600;
}
.proc-icon-btn .pi-emoji { font-size: 0.95rem; }

/* ── Detail / náhľad (moderný „papier" pre PDF) ── */
.proc-detail { --pp-navy:#1a1a2e; --pp-navy2:#2a2a4a; --pp-lime:#97bf0d; --pp-ink:#2b2f3a; --pp-soft:#f5f7fa; --pp-zebra:#f7faf0; --pp-secbar:#f4f8eb; }
/* Dizajnové témy postupu (prepínateľné pre každý postup) */
.pp-theme-sylex    { --pp-navy:#1a1a2e; --pp-navy2:#2a2a4a; --pp-lime:#97bf0d; --pp-ink:#2b2f3a; --pp-soft:#f5f7fa; --pp-zebra:#f7faf0; --pp-secbar:#f4f8eb; }
.pp-theme-ocean    { --pp-navy:#0e3a5f; --pp-navy2:#1b5e8c; --pp-lime:#d89b2c; --pp-ink:#2b3440; --pp-soft:#f1f6fb; --pp-zebra:#f1f6fb; --pp-secbar:#e8f1fa; }
.pp-theme-graphite { --pp-navy:#24292e; --pp-navy2:#3a4148; --pp-lime:#5b6470; --pp-ink:#333333; --pp-soft:#f5f6f7; --pp-zebra:#f5f6f7; --pp-secbar:#eef0f2; }
.pp-theme-teal     { --pp-navy:#0e4d49; --pp-navy2:#0f766e; --pp-lime:#f59e0b; --pp-ink:#24323a; --pp-soft:#effaf7; --pp-zebra:#effaf7; --pp-secbar:#e4f5f1; }

/* ===== OCEÁN — klasická, centrovaná, serif titul, kruhové čísla ===== */
.pp-theme-ocean .pdv-head { background: #fff; color: var(--pp-navy); text-align: center; border-bottom: 3px double var(--pp-navy); padding: 32px 44px 22px; }
.pp-theme-ocean .pdv-head::after { display: none; }
.pp-theme-ocean .pdv-eyebrow { color: var(--pp-lime); letter-spacing: 0.3em; }
.pp-theme-ocean .pdv-title { color: var(--pp-navy); font-family: Georgia, 'Times New Roman', serif; }
.pp-theme-ocean .pdv-meta { justify-content: center; }
.pp-theme-ocean .pdv-meta span { background: var(--pp-secbar); color: var(--pp-navy); border-color: rgba(0,0,0,0.08); }
.pp-theme-ocean .pdv-meta .proc-status-badge { background: var(--pp-navy); color: #fff; }
.pp-theme-ocean .pdv-section h3 { justify-content: center; text-align: center; border-bottom: 2px solid var(--pp-lime); font-family: Georgia, serif; color: var(--pp-navy); }
.pp-theme-ocean .pdv-section h3::before { display: none; }
.pp-theme-ocean .pdv-secno { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pp-navy); color: #fff; font-size: 0.72rem; margin-right: 4px; }
.pp-theme-ocean .pdv-step-num { border-radius: 50%; }
.pp-theme-ocean .pdv-dtable th { text-align: center; }

/* ===== GRAFIT — minimal, ploché, monochróm, vlasové linky ===== */
.pp-theme-graphite .pdv-head { background: #fff; color: #111; border-bottom: 1px solid #111; padding: 26px 44px 16px; }
.pp-theme-graphite .pdv-head::after { display: none; }
.pp-theme-graphite .pdv-eyebrow { color: #999; letter-spacing: 0.34em; }
.pp-theme-graphite .pdv-title { color: #111; font-weight: 800; }
.pp-theme-graphite .pdv-meta span { background: transparent; border: 1px solid #dcdcdc; color: #555; }
.pp-theme-graphite .pdv-meta .proc-status-badge { background: #111; color: #fff; }
.pp-theme-graphite .pdv-section h3 { border-bottom: 1px solid #e4e4e4; color: #111; letter-spacing: 0.1em; }
.pp-theme-graphite .pdv-section h3::before { display: none; }
.pp-theme-graphite .pdv-secno { color: #111; margin-right: 8px; }
.pp-theme-graphite .pdv-step { background: transparent; border: 0; border-bottom: 1px solid #ececec; border-radius: 0; box-shadow: none; padding: 14px 2px; }
.pp-theme-graphite .pdv-step-num { background: #111; border-radius: 4px; }
.pp-theme-graphite .pdv-table-wrap { box-shadow: none; border-radius: 0; }
.pp-theme-graphite .pdv-dtable th { background: #24292e; }
.pp-theme-graphite .pdv-dtable th, .pp-theme-graphite .pdv-dtable td { border-left: 0; border-right: 0; }
.pp-theme-graphite .pdv-dtable tr:nth-child(even) td { background: #fafafa; }
.pp-theme-graphite .pdv-substep { background: transparent; border-left: 0; border-bottom: 2px solid #111; border-radius: 0; padding: 4px 0; }
.pp-theme-graphite .pdv-checklist li { background: transparent; border-left: 0; padding-left: 30px; }

/* ===== MODERNÁ — výrazné farebné pruhy nadpisov, kruhové čísla ===== */
.pp-theme-teal .pdv-section h3 { background: var(--pp-navy); color: #fff; padding: 9px 14px; border-radius: 8px; border-bottom: 0; }
.pp-theme-teal .pdv-section h3::before { background: var(--pp-lime); width: 8px; height: 22px; }
.pp-theme-teal .pdv-secno { color: var(--pp-lime); }
.pp-theme-teal .pdv-step { border-left-width: 5px; border-radius: 14px; }
.pp-theme-teal .pdv-step-num { border-radius: 50%; background: var(--pp-lime); color: var(--pp-navy); }
.pp-theme-teal .pdv-dtable th { background: var(--pp-navy2); }
.pp-theme-teal .pdv-substep { background: linear-gradient(90deg, var(--pp-secbar), #fff); border-radius: 8px; }

.pdv-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.pdv-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.pdv-card {
  background: #fff; color: var(--pp-ink);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(15,18,40,0.18);
  max-width: 860px; margin: 0 auto;
  font-size: 14px; line-height: 1.6;
}

/* Hlavička — navy pruh s limetkovým akcentom */
.pdv-head {
  background: linear-gradient(135deg, var(--pp-navy) 0%, var(--pp-navy2) 100%);
  color: #fff; padding: 38px 44px 30px; position: relative;
  border-bottom: 5px solid var(--pp-lime); text-align: left;
}
.pdv-head::after {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(151,191,13,0.22), transparent 70%);
}
.pdv-eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.22em; color: var(--pp-lime); position: relative; }
.pdv-title { font-family: var(--font-title); font-size: 2rem; font-weight: 800; color: #fff; margin: 8px 0 14px; line-height: 1.15; position: relative; }
.pdv-meta { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px; position: relative; }
.pdv-meta span {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(var(--dz-fg-rgb),0.12); color: #e9ecf5;
  padding: 5px 11px; border-radius: 20px; font-size: 0.76rem; font-weight: 600;
  border: 1px solid rgba(var(--dz-fg-rgb),0.12);
}
.pdv-meta .proc-status-badge { background: var(--pp-lime); color: var(--pp-navy); border: none; }

/* Telo */
.pdv-head ~ * { margin-left: 44px; margin-right: 44px; }
.pdv-head + * { margin-top: 28px; }
.pdv-card > *:last-child { margin-bottom: 36px; }

.pdv-section { margin-bottom: 26px; }
.pdv-section h3 {
  display: flex; align-items: center; gap: 11px;
  font-size: 1rem; font-weight: 800; color: var(--pp-navy);
  text-transform: uppercase; letter-spacing: 0.03em;
  border: 0; padding: 0 0 8px; margin: 0 0 14px;
  border-bottom: 2px solid #eef1f5;
}
.pdv-section h3::before {
  content: ''; flex-shrink: 0; width: 6px; height: 20px;
  background: var(--pp-lime); border-radius: 3px;
}
.pdv-secno { color: var(--pp-lime); font-weight: 800; }
.pdv-purpose { font-size: 0.95rem; line-height: 1.7; color: #3a3f4c; }
.pdv-tools, .pdv-risks, .pdv-atts { margin: 0; padding-left: 22px; font-size: 0.92rem; line-height: 1.8; color: #3a3f4c; }
.pdv-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pdv-checklist li {
  position: relative; padding: 8px 12px 8px 38px; font-size: 0.92rem; color: #3a3f4c;
  background: var(--pp-soft); border-radius: 8px; border-left: 3px solid var(--pp-lime);
}
.pdv-checklist li::before {
  content: "✓"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--pp-lime); font-weight: 900;
}

/* Dátové tabuľky */
.pdv-table-wrap { overflow-x: auto; margin: 6px 0; border-radius: 10px; box-shadow: 0 0 0 1px #e7ebf0; }
.pdv-dtable { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.pdv-dtable th, .pdv-dtable td { text-align: left; padding: 9px 12px; vertical-align: top; color: #3a3f4c; }
.pdv-dtable th { background: var(--pp-navy); font-weight: 700; color: #fff; white-space: nowrap; letter-spacing: 0.02em; }
.pdv-dtable th:first-child { border-top-left-radius: 10px; }
.pdv-dtable th:last-child { border-top-right-radius: 10px; }
.pdv-dtable tbody tr { border-top: 1px solid #eceff3; }
.pdv-dtable tr:nth-child(even) td { background: var(--pp-zebra); }
.pdv-substep {
  font-size: 1.02rem; font-weight: 800; color: var(--pp-navy);
  margin: 22px 0 12px; padding: 7px 14px; border-radius: 8px;
  background: linear-gradient(90deg, var(--pp-secbar), transparent);
  border-left: 4px solid var(--pp-lime);
}
.pdv-att-url { font-family: 'Courier New', monospace; font-size: 0.82rem; color: var(--text-dim); }

/* Platnosť */
.pdv-validity { width: 100%; border-collapse: collapse; font-size: 0.9rem; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px #e7ebf0; }
.pdv-validity th, .pdv-validity td { text-align: left; padding: 10px 14px; vertical-align: top; border-top: 1px solid #eceff3; }
.pdv-validity th { width: 32%; font-weight: 700; color: var(--pp-navy); background: var(--pp-secbar); }
.pdv-validity td { color: #3a3f4c; }
.pdv-muted { color: #9aa1ad; }
.pdv-rev-flag { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.pdv-rev-ok   { background: #dcfce7; color: #166534; }
.pdv-rev-soon { background: #fef3c7; color: #92400e; }
.pdv-rev-over { background: #fee2e2; color: #991b1b; }

/* Operácie */
.pdv-steps { display: flex; flex-direction: column; gap: 16px; }
.pdv-step {
  display: flex; gap: 16px; padding: 16px 18px;
  background: #fff; border: 1px solid #eceff3; border-radius: 12px;
  border-left: 4px solid var(--pp-lime);
  box-shadow: 0 2px 8px rgba(15,18,40,0.04);
}
.pdv-step-num {
  flex-shrink: 0; min-width: 34px; height: 28px; padding: 0 11px;
  background: var(--pp-navy); color: #fff; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem; white-space: nowrap;
}
.pdv-step-body { flex: 1; min-width: 0; }
.pdv-step-text { padding: 0 !important; font-size: 0.94rem; color: var(--pp-ink); }
.pdv-step-text img { max-width: 100%; border-radius: 8px; }
.pdv-step-note {
  font-size: 0.86rem; color: #5a6472; margin-top: 8px;
  padding: 7px 12px; background: var(--pp-soft); border-radius: 8px;
}
.pdv-step-img { margin-top: 12px; }
.pdv-step-img img { max-width: 100%; max-height: 340px; border-radius: 10px; border: 1px solid #e7ebf0; }
.pdv-fig figcaption { font-size: 0.78rem; color: #9aa1ad; font-style: italic; margin-top: 4px; }

/* Upozornenia / OOPP — väčšie piktogramy */
/* Upozornenia / OOPP — kompaktné „pill" štítky s výrazným piktogramom */
.pdv-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.pdv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px 2px 2px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; line-height: 1.15;
}
.pdv-warn { background: #fdecea; color: #b3341f; border: 1px solid #f3c4bd; }
.pdv-ppe  { background: #eaf4ee; color: #1f6f3d; border: 1px solid #bfe2cb; }
.pdv-picto { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; background: #fff; border-radius: 6px; padding: 1px; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }

/* Prepojenie náhľad → editor: zvýraznená karta operácie */
.proc-step-card.card-focus { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(8,145,178,0.15); }

@media (max-width: 560px) {
  .pdv-head { padding: 26px 20px 22px; }
  .pdv-head ~ * { margin-left: 18px; margin-right: 18px; }
  .pdv-title { font-size: 1.4rem; }
}

/* =============================================
   HODINY / DÁTUM / MENINY (úvod)
   ============================================= */
.dt-widget {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius-lg);
  padding: 14px 22px; margin-bottom: 18px;
  backdrop-filter: blur(8px);
}
.dt-clock {
  font-family: var(--font-title); font-size: 2.1rem; font-weight: 700;
  color: #fff; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(0,212,255,0.35);
}
.dt-info { display: flex; flex-direction: column; gap: 3px; }
.dt-date { font-size: 0.95rem; color: var(--dz-text2); font-weight: 600; text-transform: capitalize; }
.dt-meniny { font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.5); }
.dt-meniny strong { color: var(--dz-cyan); font-weight: 600; }

@media (max-width: 560px) {
  .dt-widget { gap: 12px; padding: 12px 16px; }
  .dt-clock { font-size: 1.6rem; }
}

/* =============================================
   PROCEDURES — plnostránkový editor
   ============================================= */
.proc-edit { max-width: 900px; margin: 0 auto; }
.proc-edit-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  position: sticky; top: var(--header-h); z-index: 20;
  background: rgba(13,18,37,0.92); backdrop-filter: blur(8px);
  padding: 12px 0; margin-bottom: 14px;
  border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1);
}
.proc-edit-title {
  flex: 1; text-align: center;
  font-family: var(--font-title); font-size: 1.15rem; font-weight: 700;
  color: var(--dz-text); letter-spacing: 0.02em; min-width: 140px;
}
.proc-edit-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.proc-edit-body {
  background: #fff; border-radius: var(--radius-lg);
  padding: 24px 26px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 16px;
}
.proc-edit-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 16px; padding-bottom: 8px;
}

/* Split: vľavo formulár, vpravo živý A4 náhľad — synchronizovaný scroll */
.proc-edit-split { display: flex; gap: 22px; align-items: stretch; }
.proc-edit-split .proc-edit-body { flex: 1 1 0; min-width: 0; }
.proc-edit-preview {
  flex: 1 1 0; min-width: 0;
  overflow: auto; border-radius: 14px;
  background: linear-gradient(180deg, #4b5566, #3a4151);
  padding: 16px; box-shadow: inset 0 0 0 1px rgba(var(--dz-fg-rgb),0.06);
}
.proc-preview-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(var(--dz-fg-rgb),0.6); text-align: center; margin-bottom: 12px;
}
.ppl-cat { color: #b6e05a; letter-spacing: 0.04em; }

/* Výrazné ČERVENÉ zvýraznenie aktívneho objektu v náhľade (klik v editore) */
.pdv-hl { outline: 3px solid #e11d48; outline-offset: 5px; border-radius: 8px; box-shadow: 0 0 0 6px rgba(225,29,72,0.20); animation: pdvHlIn 0.45s ease; }
.pdv-section.pdv-hl { background: rgba(225,29,72,0.07); }
@keyframes pdvHlIn { 0% { box-shadow: 0 0 0 0 rgba(225,29,72,0.5); } 100% { box-shadow: 0 0 0 6px rgba(225,29,72,0.20); } }
.ppl-cat { color: #fb7185 !important; }
/* riadok tabuľky — outline na <tr> nefunguje, použijeme pozadie + ľavý pruh */
tr.pdv-hl { outline: none; box-shadow: none; }
.pdv-dtable tr.pdv-hl td { background: rgba(225,29,72,0.14) !important; }
.pdv-dtable tr.pdv-hl td:first-child { box-shadow: inset 4px 0 0 0 #e11d48; }

/* Priame úpravy v náhľade (len živý náhľad) */
#procLivePreview .pdv-editable { cursor: text; border-radius: 5px; transition: background .15s, box-shadow .15s; }
#procLivePreview .pdv-editable:hover { background: rgba(151,191,13,0.10); box-shadow: inset 0 0 0 1px rgba(151,191,13,0.45); }
#procLivePreview .pdv-editable:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px #97bf0d; }

/* Úchyt na presúvanie operácií */
.pdv-drag { display: none; }
#procLivePreview .pdv-step { position: relative; }
#procLivePreview .pdv-drag { display: inline-flex; align-items: flex-start; justify-content: center; width: 22px; flex-shrink: 0; cursor: grab; color: #b6c2cf; font-size: 1.15rem; padding-top: 2px; user-select: none; }
#procLivePreview .pdv-drag:active { cursor: grabbing; }
#procLivePreview .pdv-drag:hover { color: #1a1a2e; }
#procLivePreview .pdv-step.pdv-dragging { opacity: .5; }
#procLivePreview .pdv-step.pdv-drop-before { box-shadow: 0 -3px 0 #97bf0d; }
#procLivePreview .pdv-step.pdv-drop-after { box-shadow: 0 3px 0 #97bf0d; }

/* Obrázok operácie — zmena pozície (klik) a veľkosti (roh) */
.pdv-resize { display: none; }
#procLivePreview .pdv-fig { position: relative; }
#procLivePreview .pdv-img-edit { cursor: pointer; outline: 1px dashed transparent; outline-offset: 2px; transition: outline-color .15s; }
#procLivePreview .pdv-img-edit:hover { outline-color: #97bf0d; }
#procLivePreview .pdv-resize { display: block; position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px; background: #97bf0d; border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.pp-a4-frame { display: flex; justify-content: center; }
/* A4 papier (210×297 mm @ ~96dpi = 794×1123 px), zmenšuje sa cez zoom v JS */
.pp-a4 {
  width: 794px; min-height: 1123px;
  margin: 0; box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  border-radius: 0; max-width: none;
}
.pp-a4.pdv-card { border-radius: 0; }

/* Na širokých obrazovkách: formulár rastie prirodzene, náhľad je sticky a scrolluje synchrónne */
@media (min-width: 1081px) {
  .proc-edit-split { align-items: flex-start; }
  .proc-edit-preview {
    position: sticky; top: calc(var(--header-h) + 70px);
    height: calc(100vh - var(--header-h) - 92px);
  }
}
@media (max-width: 1080px) {
  .proc-edit-preview { display: none; }
}
@media (max-width: 560px) {
  .proc-edit-bar { top: 0; }
  .proc-edit-title { order: -1; flex-basis: 100%; }
  .proc-edit-body { padding: 16px 14px; }
}

/* =============================================
   TipTap editor (operácie postupov)
   ============================================= */
.tt-wrap {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; overflow: hidden;
}
.tt-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 6px 8px; border-bottom: 1px solid var(--border);
  background: #f8fafc; position: sticky; top: 0; z-index: 2;
}
.tt-btn {
  min-width: 28px; height: 28px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--text-dim);
  cursor: pointer; font-family: var(--font); transition: all var(--transition);
}
.tt-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.tt-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

.tt-area { max-height: 360px; overflow-y: auto; }
.tt-area .ProseMirror {
  min-height: 110px; padding: 12px 14px; outline: none;
  font-size: 0.92rem; line-height: 1.55; color: var(--text);
}
.tt-area .ProseMirror:focus { outline: none; }
.tt-area .ProseMirror > * + * { margin-top: 0.5em; }
.tt-area .ProseMirror h1 { font-size: 1.4rem; font-weight: 700; }
.tt-area .ProseMirror h2 { font-size: 1.2rem; font-weight: 700; }
.tt-area .ProseMirror h3 { font-size: 1.05rem; font-weight: 700; }
.tt-area .ProseMirror ul,
.tt-area .ProseMirror ol { padding-left: 1.4em; }
.tt-area .ProseMirror blockquote { border-left: 3px solid var(--border); padding-left: 12px; color: var(--text-dim); }
.tt-area .ProseMirror pre {
  background: #0f172a; color: var(--dz-text2); padding: 10px 12px; border-radius: 6px;
  font-family: 'Courier New', monospace; font-size: 0.82rem; overflow-x: auto;
}
.tt-area .ProseMirror code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
.tt-area .ProseMirror img { max-width: 100%; height: auto; border-radius: 6px; }
.tt-area .ProseMirror a { color: var(--accent); text-decoration: underline; }
.tt-area .ProseMirror table { border-collapse: collapse; width: 100%; margin: 6px 0; table-layout: fixed; overflow: hidden; }
.tt-area .ProseMirror th,
.tt-area .ProseMirror td { border: 1px solid var(--border); padding: 5px 8px; position: relative; vertical-align: top; }
.tt-area .ProseMirror th { background: #f1f5f9; font-weight: 600; }
.tt-area .ProseMirror .selectedCell::after {
  content: ''; position: absolute; inset: 0; background: rgba(8,145,178,0.16); pointer-events: none;
}
.tt-area .ProseMirror .column-resize-handle {
  position: absolute; right: -2px; top: 0; bottom: -2px; width: 4px;
  background: var(--accent); cursor: col-resize; pointer-events: none;
}
/* placeholder */
.tt-area .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder); color: var(--text-xdim);
  float: left; height: 0; pointer-events: none;
}
.tt-fallback {
  width: 100%; padding: 10px 12px; border: none; outline: none;
  font-family: var(--font); font-size: 0.9rem; resize: vertical; min-height: 90px;
}

/* =============================================
   Procedures — kolaps sekcie, obrázok pozícia, plná šírka
   ============================================= */
.proc-collapsible.hidden { display: none; }
.proc-collapse-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 2px 0;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-dim); font-family: var(--font);
}
.proc-collapse-btn:hover { color: var(--accent); }
.proc-collapse-caret { display: inline-block; width: 12px; color: var(--accent); }
.proc-collapse-count { color: var(--accent); font-weight: 700; }

.proc-img-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.proc-img-pos {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font); font-size: 0.8rem; background: #fff; cursor: pointer;
}
.proc-img-caption {
  flex: 1; min-width: 160px; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); font-family: var(--font); font-size: 0.82rem; outline: none;
}

/* Editor postupu na celú šírku počas editácie (split: formulár + A4 náhľad) */
.proc-inner:has(#procEditView:not(.hidden)) { max-width: 1560px; }
.proc-edit { max-width: 1540px; }
.proc-edit-body { max-width: none; }

/* Inline obrázky v editore a náhľade — zarovnanie */
.tt-area .ProseMirror img.sx-img-left,
.pdv-step-text img[data-align="left"]  { float: left;  margin: 4px 14px 8px 0; max-width: 48%; }
.tt-area .ProseMirror img.sx-img-right,
.pdv-step-text img[data-align="right"] { float: right; margin: 4px 0 8px 14px; max-width: 48%; }
.tt-area .ProseMirror img.sx-img-center,
.pdv-step-text img[data-align="center"]{ display: block; margin: 8px auto; }

/* Náhľad — figúra s pozíciou (text vľavo/vpravo) */
.pdv-fig { margin: 8px 0; }
.pdv-fig img { max-width: 100%; border: 1px solid var(--border); border-radius: 8px; display: block; }
.pdv-fig figcaption { font-size: 0.78rem; color: #64748b; font-style: italic; margin-top: 4px; text-align: center; }
.pdv-fig-right { float: right; width: 42%; margin: 0 0 10px 16px; }
.pdv-fig-left  { float: left;  width: 42%; margin: 0 16px 10px 0; }
.pdv-step-body::after { content: ''; display: block; clear: both; }
.pdv-step-text::after { content: ''; display: block; clear: both; }

/* =============================================
   Editor postupu — väčšie okno + nové ovládače
   ============================================= */
.proc-inner:has(#procEditView:not(.hidden)) { max-width: 1500px; }
.proc-edit { max-width: 1460px; }
.tt-area { max-height: 520px; }
.tt-area .ProseMirror { min-height: 160px; }

/* Duplikovať operáciu */
.proc-row-dup {
  width: 22px; height: 18px; line-height: 1;
  background: var(--page-bg); border: 1px solid var(--border);
  border-radius: 4px; color: var(--accent); cursor: pointer; font-size: 0.72rem;
}
.proc-row-dup:hover { background: var(--accent-light); }

/* TipTap — ovládač farby a fontu */
.tt-color {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 6px;
  background: #fff; cursor: pointer; font-weight: 700; font-size: 0.82rem; color: var(--text);
}
.tt-color span { pointer-events: none; }
.tt-color input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; border: none; padding: 0;
}
.tt-font {
  height: 28px; border: 1px solid var(--border); border-radius: 6px;
  background: #fff; font-family: var(--font); font-size: 0.76rem; color: var(--text-dim);
  cursor: pointer; padding: 0 4px; max-width: 130px;
}

/* =============================================
   Náhľad postupu — obsah operácie (bez Quill min-height)
   ============================================= */
.pdv-step-text { line-height: 1.55; }
.pdv-step-text p { margin: 4px 0; }
.pdv-step-text h1, .pdv-step-text h2, .pdv-step-text h3 { font-weight: 700; margin: 8px 0 4px; line-height: 1.3; color: #0f172a; }
.pdv-step-text h1 { font-size: 1.25rem; }
.pdv-step-text h2 { font-size: 1.1rem; }
.pdv-step-text h3 { font-size: 1rem; }
.pdv-step-text ul, .pdv-step-text ol { padding-left: 1.4em; margin: 4px 0; }
.pdv-step-text li { margin: 2px 0; }
.pdv-step-text a { color: var(--accent); text-decoration: underline; }
.pdv-step-text blockquote { border-left: 3px solid var(--border); padding-left: 12px; color: var(--text-dim); margin: 6px 0; }
.pdv-step-text pre { background: #0f172a; color: var(--dz-text2); padding: 10px 12px; border-radius: 6px; overflow-x: auto; font-size: 0.82rem; }
.pdv-step-text code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
.pdv-step-text table { border-collapse: collapse; width: 100%; margin: 6px 0; }
.pdv-step-text th, .pdv-step-text td { border: 1px solid var(--border); padding: 4px 8px; }
.pdv-step-text th { background: #f1f5f9; }

/* =============================================
   Hlavička — vyhľadávanie / rýchle pridanie / notifikácie
   ============================================= */
.hdr-icon-btn {
  position: relative; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: 8px; color: #c8d8f0; cursor: pointer;
  transition: all var(--transition);
}
.hdr-icon-btn:hover { background: rgba(var(--dz-fg-rgb),0.14); color: #fff; }
.hdr-sep-v { width: 1px; height: 20px; background: rgba(var(--dz-fg-rgb),0.12); margin: 0 4px; }
.hdr-badge {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: #ef4444; color: #fff;
  font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center;
  border: 2px solid var(--hdr-bg);
}

.hdr-popover {
  position: fixed; z-index: 320;
  background: #1e293b; border: 1px solid rgba(var(--dz-fg-rgb),0.12);
  border-radius: var(--radius-lg); padding: 6px; min-width: 200px;
  box-shadow: var(--shadow-lg);
}
.hdr-popover-wide { min-width: 300px; max-width: 360px; max-height: 70vh; overflow-y: auto; }
.hdr-popover > button {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: none; background: none; cursor: pointer;
  color: var(--dz-text2); font-family: var(--font); font-size: 0.85rem; border-radius: 8px;
  transition: background var(--transition);
}
.hdr-popover > button:hover { background: rgba(var(--dz-fg-rgb),0.08); }
.hdr-popover-title {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #94a3b8; font-weight: 600; padding: 8px 12px 6px;
}
.notif-group { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; font-weight: 700; padding: 8px 12px 4px; }
.notif-item {
  display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 6px;
  border-radius: 8px; color: var(--dz-text2); font-size: 0.82rem;
}
.notif-item:hover { background: rgba(var(--dz-fg-rgb),0.07); }
.notif-item-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 6px; cursor: pointer; }
.notif-item-body span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-dismiss {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: none;
  background: rgba(var(--dz-fg-rgb),0.08); color: rgba(var(--dz-fg-rgb),0.5);
  cursor: pointer; font-size: 0.68rem; transition: background var(--transition), color var(--transition);
}
.notif-dismiss:hover { background: rgba(239,68,68,0.2); color: #ef4444; }
.notif-panel-hdr { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 0; }
.notif-panel-hdr .hdr-popover-title { padding: 0 0 6px; }
.notif-markall {
  font-size: 0.66rem; font-weight: 600; color: var(--accent);
  background: none; border: none; cursor: pointer; padding: 2px 4px; white-space: nowrap;
}
.notif-markall:hover { text-decoration: underline; }

/* Command palette */
.cmd-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(8,12,25,0.6); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.cmd-box {
  width: min(640px, 92vw); background: #0f172a;
  border: 1px solid rgba(var(--dz-fg-rgb),0.12); border-radius: 14px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.cmd-input-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1); color: #94a3b8; }
.cmd-input-wrap input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--dz-text); font-family: var(--font); font-size: 1rem;
}
.cmd-esc { font-size: 0.62rem; color: #64748b; border: 1px solid rgba(var(--dz-fg-rgb),0.15); border-radius: 5px; padding: 2px 6px; }
.cmd-results { max-height: 56vh; overflow-y: auto; padding: 6px; }
.cmd-hint { padding: 24px; text-align: center; color: #64748b; font-size: 0.85rem; }
.cmd-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.cmd-item:hover { background: rgba(var(--dz-fg-rgb),0.07); }
.cmd-item-icon { font-size: 1rem; flex-shrink: 0; }
.cmd-item-label { flex: 1; min-width: 0; color: var(--dz-text2); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-item-sub { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; background: rgba(var(--dz-fg-rgb),0.06); padding: 2px 8px; border-radius: 8px; }

@media (max-width: 720px) { .hdr-sep-v, .status-text { display: none; } }

/* =============================================
   VÝVOJ — Projekty (kanban) / Testy / Kalibrácie / Prototypy
   ============================================= */
.dev-page { background: var(--hdr-bg); }
.dev-inner { max-width: 1400px; margin: 0 auto; padding: 36px 28px 52px; }
.dev-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.dev-list { display: flex; flex-direction: column; gap: 10px; }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 10px; align-items: start; overflow-x: auto; }
.kanban-col { background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: var(--radius-lg); min-height: 80px; }
.kanban-col-hdr { padding: 10px 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dz-text2); border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.08); display: flex; justify-content: space-between; align-items: center; }
.kanban-count { background: rgba(var(--dz-fg-rgb),0.1); color: var(--dz-text2); border-radius: 10px; padding: 1px 8px; font-size: 0.7rem; }
.kanban-col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.kanban-card { background: #1e293b; border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-left: 3px solid var(--prio, #3b82f6); border-radius: 8px; padding: 10px; cursor: grab; transition: box-shadow .16s, transform .12s, opacity .12s; }
.kanban-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.28); }
.kanban-card:active { cursor: grabbing; }
.kanban-grip { display: inline-block; margin-right: 6px; color: #64748b; cursor: grab; font-size: 0.9rem; vertical-align: middle; letter-spacing: -2px; }
.kanban-dragging { opacity: 0.45; transform: rotate(1.5deg) scale(0.98); }
.kanban-col-drop { background: rgba(0,212,255,0.07); border-color: rgba(0,212,255,0.5); box-shadow: inset 0 0 0 2px rgba(0,212,255,0.45); }
.kanban-col-drop .kanban-col-body { min-height: 48px; }
.kanban-card-top { cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.kanban-card-title { font-size: 0.86rem; font-weight: 600; color: var(--dz-text); }
.kanban-card-code { font-size: 0.68rem; color: #94a3b8; }
.kanban-card-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.7rem; color: #94a3b8; margin-top: 6px; }
.kanban-prio { color: var(--prio, #3b82f6); font-weight: 600; }
.kanban-overdue { color: var(--dz-red); font-weight: 600; }
.kanban-card-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 4px; }
.kanban-card-actions button { width: 26px; height: 24px; background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 6px; color: var(--dz-text2); cursor: pointer; font-size: 0.8rem; }
.kanban-card-actions button:hover { background: rgba(var(--dz-fg-rgb),0.14); color: #fff; }

/* Projekty — prepínač zobrazenia/workflow (kanban/zoznam/gantt) */
.pj-seg { display: inline-flex; border: 1px solid rgba(var(--dz-fg-rgb),0.14); border-radius: 9px; overflow: hidden; }
.pj-seg button { background: transparent; color: #94a3b8; border: none; padding: 7px 12px; font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: var(--font); white-space: nowrap; }
.pj-seg button + button { border-left: 1px solid rgba(var(--dz-fg-rgb),0.12); }
.pj-seg button.active { background: var(--accent); color: #fff; }
.pj-seg button:not(.active):hover { background: rgba(var(--dz-fg-rgb),0.06); color: var(--dz-text2); }
/* deliverables progress na kanban karte */
.pj-card-deliv { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 0.66rem; color: #94a3b8; }
.pj-card-deliv-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(var(--dz-fg-rgb),0.1); overflow: hidden; }
.pj-card-deliv-bar > div { height: 100%; background: linear-gradient(90deg,#10b981,#34d399); border-radius: 3px; transition: width .4s; }
/* deliverables checklist v modáli */
.pj-deliv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 6px; }
.pj-deliv label { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: #d7e2f2; cursor: pointer; }
.pj-deliv input { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.pj-deliv-count { font-size: 0.74rem; font-weight: 600; color: #10b981; margin-left: 6px; }
.dev-empty { padding: 30px; text-align: center; color: #94a3b8; font-size: 0.9rem; }
@media (max-width: 700px) { .pj-deliv { grid-template-columns: 1fr; } }

/* Chevron procesný tok (breadcrumb) — predaj/vývoj */
.pj-track { margin-top: 12px; }
.pj-track-hd { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--dz-text2); cursor: pointer; margin-bottom: 6px; }
.pj-track-hd input { width: 16px; height: 16px; accent-color: var(--accent); }
.pj-flow { display: flex; flex-wrap: wrap; align-items: center; }
.pj-flow-off { color: #94a3b8; font-size: 0.8rem; font-style: italic; }
.pj-chev { position: relative; border: none; font-family: var(--font); font-size: 0.74rem; font-weight: 600; line-height: 1; white-space: nowrap; flex-shrink: 0; padding: 8px 15px 8px 25px; margin-left: -13px; color: #8da2c0; background: #283449; cursor: pointer; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%); transition: filter .14s, background .14s, transform .14s; }
.pj-chev:first-child { margin-left: 0; padding-left: 15px; border-radius: 6px 0 0 6px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); }
.pj-chev:last-child { border-radius: 0 6px 6px 0; }
.pj-chev.done { background: #2f9e3f; color: #fff; }
.pj-chev:hover { filter: brightness(1.3) saturate(1.25) drop-shadow(0 0 7px rgba(120,200,255,0.55)); transform: translateY(-3px) scale(1.06); color: #fff; z-index: 5; }
/* aktuálny (posledný dosiahnutý) stav vo workflow — červený neón okolo šípky */
.pj-chev.cur { z-index: 3; animation: pjCurGlow 1.6s ease-in-out infinite; }
@keyframes pjCurGlow { 0%,100% { filter: drop-shadow(0 0 3px #ff174a) drop-shadow(0 0 6px rgba(255,23,74,0.7)); } 50% { filter: drop-shadow(0 0 5px #ff174a) drop-shadow(0 0 12px rgba(255,23,74,0.95)); } }
.pj-chev.cur:hover { animation: none; filter: drop-shadow(0 0 6px #ff174a) drop-shadow(0 0 16px rgba(255,23,74,1)) brightness(1.2); transform: translateY(-3px) scale(1.06); z-index: 6; }
/* farebné odlíšenie procesov: predaj = modrá, vývoj = zelená */
.pj-chev-sales.done { background: #2563eb; }
.pj-chev-dev.done { background: #2f9e3f; }
/* štandardné výstupy = tyrkysová */
.pj-chev-deliv.done { background: #0d9488; }
.pj-deliv-flow { flex-wrap: wrap; gap: 4px 0; }
.pj-deliv-cell { display: flex; align-items: center; gap: 10px; }
/* v zozname: výstupy v jednom riadku (bez zalamovania) */
.pj-deliv-cell .pj-deliv-flow { flex-wrap: nowrap; max-width: none; }
.pj-chev-sm { font-size: 0.66rem; padding: 5px 10px 5px 18px; margin-left: -11px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.pj-chev-sm:first-child { padding-left: 10px; margin-left: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
/* zoznam: kompaktné chevrony v jednom riadku (prepínateľné kliknutím) */
.pj-flow-sm { gap: 0; flex-wrap: nowrap; }
/* spojený cyklus — jeden riadok s vodorovným scrollom (žiadne zalamovanie) */
.pj-track-chain { background: rgba(var(--dz-fg-rgb),0.03); border: 1px solid rgba(var(--dz-fg-rgb),0.08); border-radius: 10px; padding: 10px 12px; }
.pj-flow-chain { gap: 0; padding: 4px 0; flex-wrap: nowrap; overflow-x: auto; }
.pj-chain-lbl { flex-shrink: 0; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 6px; }
.pj-chain-lbl-sales { color: var(--dz-blue); }
.pj-chain-lbl-dev { color: var(--dz-green); }
.pj-chain-arrow { flex-shrink: 0; color: var(--dz-text2); font-weight: 700; font-size: 1.1rem; margin: 0 10px; }
/* farebné oddelenie tratí ľavým pruhom */
.pj-track-sales { border-left: 3px solid #2563eb; padding-left: 11px; }
.pj-track-dev { border-left: 3px solid #2f9e3f; padding-left: 11px; }
/* výstupy v zozname — zaškrtávacie chipsy priamo v hlavnom zobrazení */
.pj-out-checks { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: center; min-width: 280px; max-width: 360px; }
.pj-outc { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; color: #94a3b8; cursor: pointer; white-space: nowrap; }
.pj-outc input { width: 13px; height: 13px; accent-color: #10b981; margin: 0; cursor: pointer; flex-shrink: 0; }
.pj-outc.on { color: var(--dz-green); }
.pj-out-lbl { font-size: 0.74rem; font-variant-numeric: tabular-nums; color: #94a3b8; white-space: nowrap; font-weight: 700; }
.pj-out-lbl.done { color: var(--dz-green); }
.pj-list-wrap { overflow-x: auto; }
.pj-list-wrap td:first-child, .pj-list-wrap th:first-child { min-width: 175px; }
.pj-list-wrap .prod-t-num { white-space: nowrap; }
.pj-proc-stack { display: flex; flex-direction: column; gap: 9px; padding: 4px 0; }
.pj-proc-line { display: flex; align-items: center; gap: 10px; }
.pj-proc-tag { flex-shrink: 0; width: 58px; text-align: right; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.pj-proc-tag-sales { color: #60a5fa; }
.pj-proc-tag-dev { color: var(--dz-green); }
.pj-proc-tag-deliv { color: #2dd4bf; }
.pj-col-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Admin — editor workflow/výstupov */
.pjcfg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; }
.pjcfg-col { background: rgba(var(--dz-fg-rgb),0.03); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 12px; padding: 14px 16px; }
.pjcfg-col h3 { font-size: 0.95rem; font-weight: 700; color: var(--dz-text); margin: 0 0 10px; }
.pjcfg-col-sales { border-top: 3px solid #2563eb; }
.pjcfg-col-dev { border-top: 3px solid #2f9e3f; }
.pjcfg-col-deliv { border-top: 3px solid #0d9488; }
.pjcfg-lbl { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; margin: 12px 0 5px; }
.pjcfg-row { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.pjcfg-num { color: #64748b; font-size: 0.78rem; width: 18px; flex-shrink: 0; }
.pjcfg-row input { flex: 1; min-width: 0; background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.14); border-radius: 7px; color: var(--dz-text2); padding: 6px 9px; font-size: 0.84rem; }
.pjcfg-row input:focus { outline: none; border-color: var(--accent); }
.pjcfg-row .pjcfg-short { flex: 0 0 32%; }
.pjcfg-col > input { width: 100%; background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.14); border-radius: 7px; color: var(--dz-text2); padding: 7px 10px; font-size: 0.86rem; }
.pjcfg-add { margin-top: 8px; }
@media (max-width: 860px) { .pjcfg-grid { grid-template-columns: 1fr; } }
.pj-col-filter { font-family: var(--font); font-size: 0.72rem; font-weight: 600; color: var(--dz-text2); background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.15); border-radius: 7px; padding: 4px 7px; cursor: pointer; max-width: 100%; width: 100%; text-transform: none; }
.pj-col-filter:focus { outline: none; border-color: var(--accent); }
/* filtračný riadok nad stĺpcami zoznamu projektov */
.pj-filter-row th { padding: 7px 10px !important; background: rgba(var(--dz-fg-rgb),0.015); border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1); vertical-align: top; }
.pj-fcell {
  display: flex; flex-direction: column; gap: 5px; max-width: 230px;
  background: rgba(var(--dz-fg-rgb),0.03); border: 1px solid rgba(var(--dz-fg-rgb),0.08);
  border-radius: 8px; padding: 6px;
}
.pj-fcell .pj-col-filter { cursor: pointer; }
.pj-fcell-row { display: flex; align-items: center; gap: 6px; }
.pj-fcell-tag { flex-shrink: 0; width: 15px; text-align: center; font-size: 0.72rem; line-height: 1; }
.pj-filter-row th:last-child { display: flex; align-items: center; gap: 6px; }
.pj-filter-clear { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(var(--dz-fg-rgb),0.15); background: rgba(var(--dz-fg-rgb),0.06); color: var(--dz-red); cursor: pointer; font-size: 0.8rem; }
.pj-filter-clear:hover { background: rgba(239,68,68,0.18); }
.pj-filter-badge { font-size: 0.62rem; font-weight: 700; color: var(--dz-cyan); background: rgba(103,232,249,0.12); border: 1px solid rgba(103,232,249,0.3); border-radius: 100px; padding: 1px 7px; margin-left: 4px; text-transform: none; letter-spacing: 0; }
.pj-par-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; font-size: 0.68rem; font-weight: 600; color: var(--c, #94a3b8); background: color-mix(in srgb, var(--c, #64748b) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c, #64748b) 38%, transparent); border-radius: 100px; padding: 2px 9px; white-space: nowrap; }

/* Detail projektu — samostatná stránka */
.project-page { background: var(--hdr-bg); }
.pjp-inner { max-width: 1180px; margin: 0 auto; padding: 28px 24px 56px; }
.pjp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pjp-top-actions { display: flex; gap: 8px; }
.pjp-head { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pjp-title-input { flex: 1; min-width: 240px; font-family: var(--font-title); font-size: 1.5rem; font-weight: 800; color: var(--dz-text); background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.12); border-radius: 10px; padding: 10px 14px; }
.pjp-code-input { width: 200px; font-size: 0.9rem; color: var(--dz-text2); background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.12); border-radius: 10px; padding: 10px 14px; }
.pjp-title-input:focus, .pjp-code-input:focus { outline: none; border-color: var(--accent); }
.pjp-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.pjp-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pjp-aside { display: flex; flex-direction: column; gap: 16px; }
.pjp-card { background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 14px; padding: 16px 18px; }
.pjp-card-hd { display: flex; align-items: center; gap: 10px; font-family: var(--font-title); font-size: 1rem; font-weight: 700; color: var(--dz-text); margin-bottom: 12px; }
.pjp-card-hd .btn-sm { margin-left: auto; }
.pjp-card-hint { font-family: var(--font); font-size: 0.72rem; font-weight: 400; color: #94a3b8; }
.pjp-textarea { width: 100%; background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.12); border-radius: 9px; color: var(--dz-text2); padding: 9px 12px; font-family: var(--font); font-size: 0.88rem; resize: vertical; }
.pjp-textarea:focus { outline: none; border-color: var(--accent); }
.pjp-link-row { display: flex; gap: 8px; margin-bottom: 7px; }
.pjp-link-row input { flex: 1; min-width: 0; background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.12); border-radius: 8px; color: var(--dz-text2); padding: 7px 10px; font-size: 0.84rem; }
.pjp-link-row input:first-child { flex: 0 0 34%; }
.pjp-empty { color: #94a3b8; font-size: 0.84rem; }
.pjp-overdue { color: var(--dz-red); font-weight: 600; font-size: 0.82rem; margin: -4px 0 10px; }
.pjp-rel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid rgba(var(--dz-fg-rgb),0.08); border-radius: 8px; margin-bottom: 6px; cursor: pointer; color: var(--dz-text2); font-size: 0.85rem; }
.pjp-rel-row:hover { background: rgba(var(--dz-fg-rgb),0.05); }
.pjp-aside .form-group label { color: var(--dz-text2); }
@media (max-width: 880px) { .pjp-grid { grid-template-columns: 1fr; } }

/* Stav projektu — odznak */
.pj-status-badge { display: inline-block; margin-top: 4px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--c, #94a3b8); background: color-mix(in srgb, var(--c, #64748b) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c, #64748b) 45%, transparent); border-radius: 100px; padding: 2px 9px; white-space: nowrap; }
.pjp-status-badge { align-self: center; margin-top: 0; font-size: 0.74rem; padding: 5px 13px; }

/* Komentáre / záznamy zmien k procesom */
.pjp-com-card { border-left: 3px solid #64748b; }
.pjp-com-sales { border-left-color: #2563eb; }
.pjp-com-dev { border-left-color: #2f9e3f; }
.pjp-com-deliv { border-left-color: #0d9488; }
.pjc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pjc-item { background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.08); border-radius: 9px; padding: 8px 11px; }
.pjc-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
.pjc-author { font-size: 0.78rem; font-weight: 700; color: var(--dz-text2); }
.pjc-at { font-size: 0.7rem; color: #8595ad; }
.pjc-del { margin-left: auto; background: none; border: none; color: #64748b; cursor: pointer; font-size: 0.78rem; padding: 0 3px; }
.pjc-del:hover { color: var(--dz-red); }
.pjc-text { font-size: 0.86rem; color: var(--dz-text2); white-space: pre-wrap; word-break: break-word; }
.pjc-add { display: flex; gap: 8px; }
.pjc-add input { flex: 1; min-width: 0; background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.14); border-radius: 8px; color: var(--dz-text2); padding: 8px 11px; font-size: 0.86rem; }
.pjc-add input:focus { outline: none; border-color: var(--accent); }

/* Kalibračný odznak */
.cal-badge { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 9px; border-radius: 10px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }

/* Merania — checkbox */
.ms-pass { display: flex; align-items: center; gap: 3px; font-size: 0.8rem; color: var(--text-dim); }
.proto-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); flex-shrink: 0; }

@media (max-width: 900px) { .kanban { grid-template-columns: repeat(5, 220px); } }

/* =============================================
   LOGIN
   ============================================= */
.login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(1200px 600px at 50% -10%, #16203f, #0b1020);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* Kým nie je používateľ prihlásený, skry plávajúce prvky (Pomoc, chatbot, senzor) */
body.logged-out .tour-fab,
body.logged-out .bot-fab,
body.logged-out .bot-panel,
body.logged-out .thermo-corner { display: none !important; }
.login-box {
  width: min(360px, 92vw); background: rgba(var(--dz-fg-rgb),0.05);
  border: 1px solid rgba(var(--dz-fg-rgb),0.12); border-radius: 16px;
  padding: 32px 28px; box-shadow: var(--shadow-lg); text-align: center;
}
.login-logo-img { display: block; height: 52px; width: auto; margin: 0 auto 16px; }
.login-logo { font-family: var(--font-title); font-size: 1.6rem; font-weight: 700; color: var(--dz-text); letter-spacing: 0.04em; }
.login-logo span { color: var(--dz-cyan); }
.login-sub { font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.5); margin: 6px 0 22px; }
.login-box form { display: flex; flex-direction: column; gap: 10px; }
.login-box input {
  padding: 11px 14px; border-radius: 10px;
  background: rgba(var(--dz-fg-rgb),0.07); border: 1px solid rgba(var(--dz-fg-rgb),0.14);
  color: var(--dz-text); font-family: var(--font); font-size: 0.92rem; outline: none;
}
.login-box input:focus { border-color: var(--dz-cyan); }
.login-box input::placeholder { color: rgba(var(--dz-fg-rgb),0.4); }
.login-btn { margin-top: 6px; justify-content: center; padding: 11px; font-size: 0.92rem; }
.login-error { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.4); color: var(--dz-red); font-size: 0.8rem; padding: 8px 10px; border-radius: 8px; }

/* Používateľ v hlavičke */
.hdr-user { display: flex; align-items: center; gap: 6px; margin-left: 4px; }
.hdr-user-name { font-size: 0.74rem; color: #c8d8f0; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .hdr-user-name { display: none; } }

/* =============================================
   ÚLOHY
   ============================================= */
.tasks-page { background: var(--hdr-bg); }
.tasks-inner { max-width: 820px; margin: 0 auto; padding: 36px 28px 52px; }
.tasks-filters { display: flex; gap: 6px; margin-bottom: 16px; }
.tasks-filter {
  padding: 7px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; font-family: var(--font);
  background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.1); color: rgba(var(--dz-fg-rgb),0.55); cursor: pointer;
}
.tasks-filter.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Tlačidlá s ikonou (Zoskupiť / Zbaliť / Rozbaliť) — SVG + text zarovnané */
.tasks-filter-ico { display: inline-flex; align-items: center; gap: 6px; }
.tasks-filter-ico svg { width: 15px; height: 15px; flex-shrink: 0; }
.tasks-view-ico { display: inline-flex; align-items: center; gap: 6px; }
.tasks-view-ico svg { width: 15px; height: 15px; flex-shrink: 0; }
.tasks-list { display: flex; flex-direction: column; gap: 8px; }
.task-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-left: 3px solid var(--prio, #3b82f6); border-radius: var(--radius);
}
.task-row.task-overdue { border-left-color: #ef4444; }
.task-check {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; cursor: pointer;
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.25);
  color: var(--dz-green); font-weight: 700; font-size: 0.85rem;
}
.task-done .task-check { background: #10b981; border-color: #10b981; color: #fff; }
.tasks-collapse-btns { display: flex; gap: 6px; }
.task-collapse-btn {
  width: 20px; height: 24px; flex-shrink: 0; padding: 0; margin-top: 0; border: none; cursor: pointer;
  background: transparent; color: rgba(var(--dz-fg-rgb),0.5); font-size: 0.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; border-radius: 5px;
}
.task-collapse-btn:hover { background: rgba(var(--dz-fg-rgb),0.1); color: var(--dz-text); }
.task-collapse-off { visibility: hidden; }
/* Zbalený riadok: skryť detaily, ponechať názov, chipy a základné meta */
.task-row.task-collapsed .task-prog,
.task-row.task-collapsed .task-note,
.task-row.task-collapsed .task-desc,
.task-row.task-collapsed .task-sub-inline { display: none; }
.task-body { flex: 1; min-width: 0; cursor: pointer; }
.task-title { font-size: 1rem; font-weight: 600; color: var(--dz-text); transition: margin-left var(--transition); }
.task-tree-indent { color: rgba(var(--dz-fg-rgb),0.45); font-weight: 400; margin-right: 4px; }
.task-done .task-title { text-decoration: line-through; color: rgba(var(--dz-fg-rgb),0.55); }
.task-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.72); margin-top: 4px; }
.task-prio { color: var(--prio, #3b82f6); font-weight: 600; }
.task-od { color: var(--dz-red); font-weight: 600; }
.task-desc { font-size: 0.86rem; color: rgba(var(--dz-fg-rgb),0.72); }

/* =============================================
   Úvod — Novinky + Kalendár vedľa seba; medzery
   ============================================= */
.home-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; margin-bottom: 18px; align-items: start; }
.home-row .home-news-section { margin-bottom: 0; }
.home-kb-section { margin-bottom: 18px; }   /* medzera medzi WIKI a Postupmi */

.home-cal-widget {
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: var(--radius-lg); padding: 16px 18px; backdrop-filter: blur(8px);
}
.home-cal-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.home-cal-title { font-family: var(--font-title); font-size: 1.05rem; font-weight: 700; color: var(--dz-text); }
.home-cal-list { display: flex; flex-direction: column; gap: 8px; }
.home-cal-empty { font-size: 0.8rem; color: rgba(var(--dz-fg-rgb),0.35); padding: 8px 0; }
.home-cal-item { display: flex; gap: 10px; align-items: center; padding: 7px; border-radius: var(--radius); cursor: pointer; border-left: 3px solid var(--ev, #00d4ff); background: rgba(var(--dz-fg-rgb),0.03); transition: background var(--transition); }
.home-cal-item:hover { background: rgba(var(--dz-fg-rgb),0.08); }
.home-cal-today { background: rgba(0,212,255,0.1); }
.home-cal-date { display: flex; flex-direction: column; align-items: center; min-width: 36px; }
.hc-day { font-size: 1.05rem; font-weight: 700; color: var(--dz-text); line-height: 1; }
.hc-mon { font-size: 0.6rem; text-transform: uppercase; color: rgba(var(--dz-fg-rgb),0.45); letter-spacing: 0.05em; }
.home-cal-body { flex: 1; min-width: 0; }
.home-cal-evtitle { font-size: 0.84rem; font-weight: 600; color: var(--dz-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-cal-evmeta { font-size: 0.7rem; color: rgba(var(--dz-fg-rgb),0.45); }
@media (max-width: 760px) { .home-row { grid-template-columns: 1fr; } }

/* Úvod — pravý stĺpec (kalendár + úlohy) */
.home-side { display: flex; flex-direction: column; gap: 18px; }
.home-task-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px; border-radius: var(--radius); border-left: 3px solid var(--ev, #3b82f6); background: rgba(var(--dz-fg-rgb),0.03); }
.home-task-item:hover { background: rgba(var(--dz-fg-rgb),0.07); }
.home-task-check { width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; cursor: pointer; background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.25); color: var(--dz-green); font-weight: 700; font-size: 0.8rem; margin-top: 1px; }
.home-task-check:hover { background: #10b981; border-color: #10b981; color: #fff; }
.home-task-body { flex: 1; min-width: 0; cursor: pointer; }
.home-task-title { font-size: 0.84rem; font-weight: 600; color: var(--dz-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-task-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.home-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.7rem; color: rgba(var(--dz-fg-rgb),0.5); margin-top: 4px; }
.home-task-prio { font-weight: 700; }
.home-task-added { color: rgba(var(--dz-fg-rgb),0.4); }
.home-task-sep { opacity: 0.3; }
.home-task-prog { margin-top: 6px; }
.home-task-prog .task-prog-track { height: 6px; }
.home-task-prog .task-prog-val { font-size: 0.66rem; }
.home-task-note { font-size: 0.7rem; color: rgba(var(--dz-fg-rgb),0.55); margin-top: 5px; background: rgba(var(--dz-fg-rgb),0.04); border-radius: 5px; padding: 4px 7px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-task-count { display: inline-block; min-width: 18px; padding: 0 6px; font-size: 0.68rem; font-weight: 700; text-align: center; background: rgba(99,102,241,0.25); color: var(--dz-purple); border-radius: 100px; vertical-align: middle; }

/* =============================================
   Drag & drop — zvýraznenie
   ============================================= */
.drag-over { outline: 2px dashed var(--accent) !important; outline-offset: 2px; background: rgba(8,145,178,0.12) !important; }
.image-upload-zone.drag-over, .file-upload-zone.drag-over, .proc-step-img.drag-over { border-color: var(--accent); }

/* =============================================
   CRM
   ============================================= */
.crm-page { background: var(--hdr-bg); }
.crm-layout { display: grid; grid-template-columns: 300px 1fr; min-height: calc(100vh - var(--header-h)); }
.crm-sidebar { border-right: 1px solid rgba(var(--dz-fg-rgb),0.08); padding: 16px; display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.12); }
.crm-side-top { display: flex; gap: 8px; align-items: center; }
.crm-side-label { font-size: 0.66rem; letter-spacing: 0.1em; color: rgba(var(--dz-fg-rgb),0.4); font-weight: 700; margin-top: 6px; }
.crm-inbox-item { padding: 9px 12px; border-radius: var(--radius); background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.1); color: var(--dz-text2); cursor: pointer; font-size: 0.84rem; }
.crm-inbox-item:hover, .crm-inbox-item.active { background: rgba(0,212,255,0.12); color: #fff; }
.crm-inbox-item.drag-over { outline: 2px dashed var(--accent); }
.crm-contact-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.crm-contact { padding: 9px 11px; border-radius: var(--radius); cursor: pointer; border: 1px solid transparent; }
.crm-contact:hover { background: rgba(var(--dz-fg-rgb),0.05); }
.crm-contact.active { background: rgba(0,212,255,0.12); border-color: rgba(0,212,255,0.3); }
.crm-contact-name { font-size: 0.88rem; font-weight: 600; color: var(--dz-text); }
.crm-contact-sub { font-size: 0.72rem; color: rgba(var(--dz-fg-rgb),0.5); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.crm-empty-sm { font-size: 0.8rem; color: rgba(var(--dz-fg-rgb),0.35); padding: 10px; }

.crm-main { padding: 24px 28px; overflow-y: auto; }
.crm-empty { color: rgba(var(--dz-fg-rgb),0.4); font-size: 0.9rem; padding: 40px; text-align: center; }
.crm-detail-hdr { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.crm-detail-name { font-family: var(--font-title); font-size: 1.4rem; font-weight: 700; color: var(--dz-text2); }
.crm-detail-meta { font-size: 0.84rem; color: rgba(var(--dz-fg-rgb),0.55); margin-top: 4px; }
.crm-detail-note { font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.45); margin-top: 6px; font-style: italic; }

.crm-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px; border: 2px dashed rgba(var(--dz-fg-rgb),0.2); border-radius: var(--radius-lg);
  color: rgba(var(--dz-fg-rgb),0.55); text-align: center; margin-bottom: 16px; background: rgba(var(--dz-fg-rgb),0.03);
}
.crm-dropzone svg { color: var(--accent); }
.crm-dropzone .btn-sm { margin: 0; }

.crm-email-list { display: flex; flex-direction: column; gap: 8px; }
.crm-email { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: var(--radius); }
.crm-email-main { flex: 1; min-width: 0; cursor: pointer; }
.crm-email-subj { font-size: 0.9rem; font-weight: 600; color: var(--dz-text); }
.crm-email-meta { font-size: 0.72rem; color: rgba(var(--dz-fg-rgb),0.45); margin-top: 2px; }
.crm-email-snippet { font-size: 0.78rem; color: rgba(var(--dz-fg-rgb),0.5); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-email-actions { display: flex; gap: 4px; flex-shrink: 0; }

@media (max-width: 760px) { .crm-layout { grid-template-columns: 1fr; } .crm-sidebar { border-right: none; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.08); } }

/* =============================================
   Hero — animovaný FBG peak (wavelength shift)
   ============================================= */
.fbg-hero-svg .fbg-peak { animation: fbgShift 4.5s ease-in-out infinite; }
@keyframes fbgShift { 0%,100% { transform: translateX(-9px); } 50% { transform: translateX(9px); } }
.fbg-hero-svg .fbg-dot { animation: fbgDot 1.7s ease-in-out infinite; transform-origin: center; }
@keyframes fbgDot { 0%,100% { r: 3.3; opacity: 1; } 50% { r: 4.8; opacity: 0.7; } }
.fbg-hero-svg .fbg-glow { opacity: 0.22; animation: fbgGlow 1.7s ease-in-out infinite; }
@keyframes fbgGlow { 0%,100% { opacity: 0.18; } 50% { opacity: 0.42; } }
@media (prefers-reduced-motion: reduce) { .fbg-hero-svg .fbg-peak, .fbg-hero-svg .fbg-dot, .fbg-hero-svg .fbg-glow { animation: none; } }

/* =============================================
   Mobil — hamburger + výsuvná navigácia (drawer)
   Nahrádza pôvodnú vodorovnú posuvnú lištu: 20+ položiek
   navigácie sa na malej obrazovke neposúva vodorovne (zlé UX,
   skryté položky), ale otvára sa cez appSidebar ako drawer.
   ============================================= */
@media (max-width: 900px) {
  .header-inner { padding: 0 10px; }
  .mobile-nav-btn { display: inline-flex; }
  .logo { margin-right: auto; min-width: 0; }
  .logo-wordmark { overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
  .logo-divider, .logo-sub-text { display: none; }
  .nav { display: none; }
  .header-right { flex-shrink: 0; gap: 2px; margin-left: 4px; }
  .app-version { display: none; }
  .hdr-icon-btn { width: 40px; height: 40px; }
  /* Senzory (thermo-corner widget je stále dostupný), odhlásenie a meno
     používateľa sú na mobile duplicitné — rovnaké akcie sú v drawer menu
     (pätička appSidebar). Skryté, aby sa hlavičkové ikony nevytláčali mimo
     viditeľnú obrazovku (a stali sa neklikateľné). */
  #hdrSensorBtn, .hdr-logout-btn, .hdr-sep-v, .hdr-user { display: none !important; }

  /* appSidebar sa na mobile správa vždy ako drawer, nezávisle od
     zvoleného desktop layoutu (header / sidebar) */
  .app-sidebar {
    display: flex !important; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(84vw, 300px); z-index: 500;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,0.35);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.mobile-nav-open .app-sidebar { transform: translateX(0); }
  body.layout-sidebar .page { padding-left: 0; }
  .asb-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; background: none; border: none; border-radius: 8px; color: inherit; opacity: 0.65; cursor: pointer; touch-action: manipulation; }
  .asb-close:hover { opacity: 1; background: rgba(var(--dz-fg-rgb),0.1); }
  .asb-link { min-height: 44px; }
  .tour-fab { left: 16px !important; }
  /* Kým je drawer otvorený, plávajúce FAB tlačidlá (Pomoc, chatbot) neprekážajú */
  body.mobile-nav-open .tour-fab,
  body.mobile-nav-open .bot-fab { display: none; }
}
@media (max-width: 360px) {
  .logo-wordmark { display: none; }
}

/* Zamknutie scrollu stránky pri otvorenom drawer — `overflow:hidden` na body
   samo o sebe na iOS Safari NEFUNGUJE spoľahlivo (stránka pod drawerom sa aj
   tak dá "gumovo" odscrollovať/nabounce-núť, čo posúva position:fixed prvky
   a spôsobuje, že sa na položky menu nedá trafiť/kliknúť). Namiesto toho sa
   telo stránky prepne na position:fixed s uloženým scrollY (viď JS
   openMobileNav/closeMobileNav) — spoľahlivý cross-browser spôsob zamknutia. */
body.mobile-nav-open {
  position: fixed; left: 0; right: 0; width: 100%; overflow: hidden;
}

/* =============================================
   Vlastníci produktov — tabuľka
   ============================================= */
.owners-table-wrap { overflow-x: auto; background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: var(--radius-lg); }
.owners-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; min-width: 720px; }
.owners-table th { text-align: left; padding: 11px 14px; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--dz-fg-rgb),0.5); border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.12); white-space: nowrap; }
.owners-table td { padding: 11px 14px; color: var(--dz-text2); border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.06); vertical-align: top; }
.owners-table tr:hover td { background: rgba(var(--dz-fg-rgb),0.03); }
.owner-expired td { opacity: 0.5; }
.owner-note { color: rgba(var(--dz-fg-rgb),0.55); max-width: 240px; }
.owner-actions { white-space: nowrap; text-align: right; }
.owners-empty { text-align: center; color: rgba(var(--dz-fg-rgb),0.4); padding: 24px; }

/* FBG strain karta */
.fbg-card-title { font-size:0.9rem; font-weight:600; color: var(--dz-text); margin-bottom:8px; }
.fbg-frame-tall { min-height: 640px; }
.fbg-frame-card { margin-bottom: 16px; }
.fbg-card-title { padding: 12px 14px 0; }
.fbg-frame-tall { height: 680px; }
.fbg-frame-xtall { min-height: 1480px; height: 1480px; }

/* =============================================
   MANAŽMENT dashboard
   ============================================= */
.mgmt-page { background: var(--hdr-bg); }
.mgmt-inner { max-width: 1200px; margin: 0 auto; padding: 36px 28px 52px; }
.mgmt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.mgmt-stat { background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: var(--radius-lg); padding: 16px; border-left: 3px solid #3b82f6; }
.mgmt-stat.st-red { border-left-color: #ef4444; } .mgmt-stat.st-green { border-left-color: #10b981; }
.mgmt-stat.st-cyan { border-left-color: var(--dz-cyan); } .mgmt-stat.st-blue { border-left-color: #3b82f6; }
.mgmt-stat-val { font-family: var(--font-title); font-size: 1.9rem; font-weight: 700; color: var(--dz-text2); line-height: 1; }
.mgmt-stat-lbl { font-size: 0.78rem; color: rgba(var(--dz-fg-rgb),0.55); margin-top: 5px; }
.mgmt-stat-sub { font-size: 0.68rem; color: rgba(var(--dz-fg-rgb),0.4); margin-top: 2px; }
.mgmt-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 18px; }
.mgmt-card { background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: var(--radius-lg); padding: 18px 20px; }
.mgmt-card-title { font-size: 0.95rem; font-weight: 700; color: var(--dz-text); margin: 0 0 12px; }
.mgmt-users { display: flex; flex-direction: column; gap: 8px; }
.mgmt-user { padding: 10px 12px; background: rgba(var(--dz-fg-rgb),0.04); border-radius: var(--radius); border-left: 3px solid var(--accent); }
.mgmt-user-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mgmt-user-name { font-weight: 600; color: var(--dz-text); font-size: 0.9rem; }
.mgmt-user-counts { font-size: 0.74rem; color: rgba(var(--dz-fg-rgb),0.55); }
.mgmt-user-proj { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mgmt-proj-chip { font-size: 0.68rem; background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.25); color: var(--dz-cyan); padding: 2px 8px; border-radius: 8px; }
.mgmt-bar-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.06); font-size: 0.84rem; color: var(--dz-text2); }
.mgmt-bar-val { font-weight: 700; color: var(--dz-cyan); }
.mgmt-empty { font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.4); padding: 8px 0; }

/* ── Dovolenky ── */
.mgmt-vacations { display: flex; flex-direction: column; gap: 7px; }
.mgmt-vac-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  background: rgba(var(--dz-fg-rgb),0.03);
  border: 1px solid rgba(var(--dz-fg-rgb),0.07);
  transition: border-color 0.15s;
}
.mgmt-vac-row:hover { border-color: rgba(var(--dz-fg-rgb),0.13); }
.mgmt-vac-row.vac-active {
  background: rgba(251,191,36,0.07);
  border-color: rgba(251,191,36,0.3);
}
.mgmt-vac-icon { font-size: 1.15rem; flex-shrink: 0; }
.mgmt-vac-info { flex: 1; min-width: 0; }
.mgmt-vac-person { font-size: 0.88rem; font-weight: 600; color: var(--dz-text); display: block; }
.mgmt-vac-title { font-size: 0.72rem; color: rgba(var(--dz-fg-rgb),0.45); display: block; margin-top: 1px; }
.mgmt-vac-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mgmt-vac-dates { font-size: 0.75rem; color: rgba(var(--dz-fg-rgb),0.5); font-variant-numeric: tabular-nums; }
.vac-badge-now {
  padding: 2px 8px; border-radius: 10px;
  background: rgba(251,191,36,0.2); color: var(--dz-amber);
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mgmt-q-hdr { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mgmt-q-note { font-size: 0.74rem; color: rgba(var(--dz-fg-rgb),0.45); }
.mgmt-q-form { display: flex; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.mgmt-q-form input { flex: 1; min-width: 220px; padding: 10px 12px; border-radius: var(--radius); background: rgba(var(--dz-fg-rgb),0.07); border: 1px solid rgba(var(--dz-fg-rgb),0.14); color: var(--dz-text); outline: none; }
.mgmt-q-list { display: flex; flex-direction: column; gap: 8px; }
.mgmt-q { padding: 12px 14px; background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.08); border-radius: var(--radius); }
.mgmt-q.answered { border-left: 3px solid #10b981; }
.mgmt-q-text { font-size: 0.88rem; color: var(--dz-text); }
.mgmt-q-answer { font-size: 0.84rem; color: var(--dz-green); margin-top: 6px; padding-left: 8px; border-left: 2px solid rgba(110,231,183,0.4); }
.mgmt-q-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mgmt-q-date { font-size: 0.68rem; color: rgba(var(--dz-fg-rgb),0.4); }
.mgmt-q-actions { display: flex; gap: 6px; align-items: center; }
@media (max-width: 760px) { .mgmt-grid { grid-template-columns: 1fr; } }

/* =============================================
   DATASHEETY — editor + náhľad (papier) + tlač PDF
   ============================================= */
.ds-editor { background:#fff; border:1px solid var(--border); border-radius:var(--radius); }
.ds-paper { background:#fff; color:#1e293b; border-radius:var(--radius-lg); padding:34px 40px; box-shadow:var(--shadow-lg); max-width:860px; margin:0 auto; }
.dsv-head { text-align:center; border-bottom:3px solid var(--accent); padding-bottom:14px; margin-bottom:18px; }
.dsv-eyebrow { font-size:0.72rem; font-weight:700; letter-spacing:0.2em; color:var(--accent); }
.dsv-title { font-family:var(--font-title); font-size:1.9rem; font-weight:700; color:#0f172a; margin:4px 0; }
.dsv-tag { font-size:0.95rem; color:#64748b; font-style:italic; }
.dsv-meta { width:100%; border-collapse:collapse; margin-bottom:18px; font-size:0.86rem; }
.dsv-meta th { text-align:left; width:160px; color:#475569; padding:4px 8px; background:#f1f5f9; border:1px solid #e2e8f0; }
.dsv-meta td { padding:4px 8px; border:1px solid #e2e8f0; color:#1e293b; }
.dsv-section { margin-bottom:18px; }
.dsv-section h3 { font-size:0.95rem; color:var(--accent); text-transform:uppercase; letter-spacing:0.04em; border-bottom:1px solid #e2e8f0; padding-bottom:5px; margin:0 0 10px; }
.dsv-rich { font-size:0.9rem; line-height:1.6; color:#334155; }
.dsv-rich img { max-width:100%; }
.dsv-section ul { margin:0; padding-left:20px; font-size:0.9rem; line-height:1.7; color:#334155; }
.dsv-specs { width:100%; border-collapse:collapse; font-size:0.86rem; }
.dsv-specs th { background:#f1f5f9; text-align:left; padding:7px 10px; border:1px solid #e2e8f0; color:#334155; }
.dsv-specs td { padding:7px 10px; border:1px solid #e2e8f0; color:#1e293b; }
.dsv-images { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.dsv-images figure { margin:0; text-align:center; max-width:48%; }
.dsv-images img { max-width:100%; border:1px solid #e2e8f0; border-radius:6px; }
.dsv-images figcaption { font-size:0.76rem; color:#64748b; font-style:italic; margin-top:4px; }

/* Tlač do PDF — len datasheet papier */
@media print {
  body.printing-ds { background:#fff !important; }
  body.printing-ds > *:not(#page-dev) { display:none !important; }
  body.printing-ds #page-dev .admin-hdr, body.printing-ds #page-dev .admin-tabs,
  body.printing-ds #dsListView, body.printing-ds .pdv-toolbar { display:none !important; }
  body.printing-ds #page-dev, body.printing-ds .dev-inner, body.printing-ds #devTab-datasheets, body.printing-ds #dsDetail { display:block !important; }
  body.printing-ds .ds-paper { box-shadow:none; max-width:100%; padding:0; }
}

/* =============================================
   FBG nástroje (kalkulačka / koeficienty / WDM)
   ============================================= */
.fbg-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fbg-calc label { display: block; font-size: 0.78rem; color: rgba(var(--dz-fg-rgb),0.6); margin-bottom: 8px; }
.fbg-calc input, .fbg-calc select { width: 100%; margin-top: 3px; padding: 8px 10px; border-radius: var(--radius); background: rgba(var(--dz-fg-rgb),0.07); border: 1px solid rgba(var(--dz-fg-rgb),0.15); color: var(--dz-text); outline: none; }
.fbg-calc-row { display: flex; gap: 10px; }
.fbg-calc-row label { flex: 1; }
.fbg-calc-out { display: flex; gap: 10px; margin: 10px 0 4px; }
.fbg-calc-out .ro { flex: 1; background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.25); border-radius: 8px; padding: 8px 12px; }
.fbg-calc-out .v { font-size: 1.3rem; font-weight: 700; color: var(--dz-cyan); font-variant-numeric: tabular-nums; }
.fbg-calc-out .k { font-size: 0.66rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }
.wdm-warn { margin-top: 10px; font-size: 0.84rem; padding: 8px 12px; border-radius: 8px; }
.wdm-warn.wdm-ok { background: rgba(16,185,129,0.12); color: var(--dz-green); }
.wdm-warn.wdm-bad { background: rgba(239,68,68,0.14); color: var(--dz-red); }
@media (max-width: 760px) { .fbg-tools-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   ALTERNATÍVNY SIDEBAR (Admin → Vzhľad) + témy
   ============================================================================= */
:root { --appsb-w: 264px; }
.app-sidebar { display: none; background: #0d1430; color: #c7d2e8; }

/* Zapnutý sidebar layout */
body.layout-sidebar .nav { display: none; }
/* .nav (margin-left:auto) je skrytý → header-right treba zarovnať doprava sám */
body.layout-sidebar .header-right { margin-left: auto; }
/* Desktopové rozloženie sidebaru — LEN nad mobilným breakpointom (>900px).
   Bez min-width by pevný `.app-sidebar` a najmä `padding-left` na `.page`
   (rovnaká špecificita ako mobilný reset, ale neskôr v súbore → vyhral by)
   presakovali aj na mobil a odtláčali obsah o 264px mimo obrazovku. */
@media (min-width: 901px) {
  body.layout-sidebar .app-sidebar {
    display: flex; flex-direction: column;
    position: fixed; top: var(--header-h); left: 0; bottom: 0;
    width: var(--appsb-w); z-index: 190;
    border-right: 1px solid rgba(var(--dz-fg-rgb),0.06);
    transition: width .22s ease;
  }
  body.layout-sidebar .page { padding-left: var(--appsb-w); transition: padding-left .22s ease; }
  /* „Pomoc" (tour-fab) je vľavo dole — v sidebar layoute by prekrývala pätičku
     sidebaru (meno/avatar), preto ju posunieme napravo od sidebaru */
  body.layout-sidebar .tour-fab { left: calc(var(--appsb-w) + 16px); }
}
body.layout-sidebar .thermo-corner,
body.layout-sidebar .bot-fab,
body.layout-sidebar .bot-panel { /* ostávajú vpravo dole */ }

.asb-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 16px 14px; cursor: pointer;
  border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.06);
}
.asb-logo {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #00d4ff, #6366f1); color: #06121f;
}
.asb-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.asb-brand-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.asb-brand-name { font-family: var(--font-title); font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.asb-brand-sub { font-size: 0.62rem; letter-spacing: 0.18em; opacity: 0.5; }

.asb-nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
.asb-nav::-webkit-scrollbar { width: 5px; }
.asb-nav::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.3); border-radius: 3px; }
.asb-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font-size: 0.88rem; font-weight: 500; white-space: nowrap;
  transition: background .16s, color .16s; position: relative;
  touch-action: manipulation;
}
.asb-ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; }
.asb-lbl { overflow: hidden; text-overflow: ellipsis; }
/* Kategórie v sidebari — nadpis + oddeľovacia čiara */
.asb-group {
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  line-height: 1.5; padding: 16px 12px 7px; margin-top: 4px;
  border-top: 1px solid rgba(var(--dz-fg-rgb),0.12);
  color: rgba(var(--dz-fg-rgb),0.6);
}
body.sbt-light .asb-group, body.sbt-minimal .asb-group { color: #64748b; border-top-color: #e5e7eb; }
body.sbt-gradient .asb-group, body.sbt-aurora .asb-group, body.sbt-sunset .asb-group { color: rgba(var(--dz-fg-rgb),0.82); border-top-color: rgba(var(--dz-fg-rgb),0.22); }
body.sbt-icon .asb-group { font-size: 0; padding: 10px 0 0; margin: 4px 14px 0; }

.asb-foot { padding: 12px; border-top: 1px solid rgba(var(--dz-fg-rgb),0.06); }
.asb-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; }
.asb-avatar {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem;
  background: linear-gradient(140deg, #00d4ff, #6366f1); color: #06121f;
}
.asb-user-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.asb-user-name { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asb-user-mail { font-size: 0.68rem; opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asb-logout {
  background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px;
  color: inherit; opacity: 0.55; flex-shrink: 0; transition: opacity .16s, background .16s;
}
.asb-logout:hover { opacity: 1; background: rgba(128,128,128,0.15); }

/* ── Téma: DARK (predvolená) ── */
body.sbt-dark .app-sidebar { background: #0d1430; color: #c7d2e8; }
body.sbt-dark .asb-link { color: #aeb9d4; }
body.sbt-dark .asb-link:hover { background: rgba(var(--dz-fg-rgb),0.06); color: #fff; }
body.sbt-dark .asb-link.active { background: linear-gradient(135deg, rgba(0,212,255,0.18), rgba(99,102,241,0.22)); color: #fff; }
body.sbt-dark .asb-link.active::before { content:''; position:absolute; left:-10px; top:8px; bottom:8px; width:3px; border-radius:3px; background:#00d4ff; }

/* ── Téma: LIGHT ── */
body.sbt-light .app-sidebar { background: #ffffff; color: #1f2937; border-right: 1px solid #e5e7eb; }
body.sbt-light .asb-brand { border-bottom-color: #eef1f5; }
body.sbt-light .asb-brand-sub { opacity: 0.45; }
body.sbt-light .asb-link { color: #475569; }
body.sbt-light .asb-link:hover { background: #f1f5f9; color: #0f172a; }
body.sbt-light .asb-link.active { background: #eef4ff; color: #4f46e5; font-weight: 600; }
body.sbt-light .asb-foot { border-top-color: #eef1f5; }
body.sbt-light .asb-user-mail { opacity: 0.5; }

/* ── Téma: MINIMAL ── */
body.sbt-minimal .app-sidebar { background: #fbfcfe; color: #334155; border-right: 1px solid #f0f2f6; }
body.sbt-minimal .asb-brand { border-bottom-color: #f3f5f9; }
body.sbt-minimal .asb-link { color: #64748b; font-weight: 500; }
body.sbt-minimal .asb-link:hover { background: #f4f6fa; color: #1e293b; }
body.sbt-minimal .asb-link.active { background: transparent; color: #10b981; font-weight: 600; }
body.sbt-minimal .asb-link.active .asb-ico { color: #10b981; }
body.sbt-minimal .asb-foot { border-top-color: #f3f5f9; }

/* ── Téma: ICON ONLY (úzky) ── */
body.sbt-icon { --appsb-w: 76px; }
body.sbt-icon .app-sidebar { background: #0d1430; color: #c7d2e8; align-items: center; }
body.sbt-icon .asb-lbl, body.sbt-icon .asb-brand-txt, body.sbt-icon .asb-user-info { display: none; }
body.sbt-icon .asb-brand { justify-content: center; padding: 16px 0 14px; }
body.sbt-icon .asb-nav { padding: 12px 0; align-items: center; }
body.sbt-icon .asb-link { justify-content: center; padding: 11px; width: 48px; height: 48px; gap: 0; }
body.sbt-icon .asb-link:hover { background: rgba(var(--dz-fg-rgb),0.07); color: #fff; }
body.sbt-icon .asb-link.active { background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(99,102,241,0.26)); color: #fff; }
body.sbt-icon .asb-foot { display: flex; justify-content: center; }
body.sbt-icon .asb-user { padding: 4px; }
body.sbt-icon .asb-logout { display: none; }

/* ── Téma: GRADIENT ── */
body.sbt-gradient .app-sidebar { background: linear-gradient(170deg, #6d4ed6 0%, #7c5fe6 45%, #8b6ef0 100%); color: #ece9fb; border-right: none; }
body.sbt-gradient .asb-brand { border-bottom-color: rgba(var(--dz-fg-rgb),0.16); }
body.sbt-gradient .asb-logo { background: rgba(var(--dz-fg-rgb),0.92); color: #6d4ed6; }
body.sbt-gradient .asb-link { color: #e4def8; }
body.sbt-gradient .asb-link:hover { background: rgba(var(--dz-fg-rgb),0.14); color: #fff; }
body.sbt-gradient .asb-link.active { background: rgba(var(--dz-fg-rgb),0.2); color: #fff; font-weight: 600; }
body.sbt-gradient .asb-foot { border-top-color: rgba(var(--dz-fg-rgb),0.16); }
body.sbt-gradient .asb-user-mail { opacity: 0.7; }

/* ── Téma: AURORA (glassmorphism — matné sklo + farebná žiara) ── */
body.sbt-aurora .app-sidebar {
  background:
    radial-gradient(150px 190px at 16% 5%, rgba(0,212,255,0.24), transparent 70%),
    radial-gradient(190px 230px at 90% 24%, rgba(139,110,240,0.28), transparent 70%),
    radial-gradient(210px 230px at 24% 97%, rgba(16,185,129,0.18), transparent 72%),
    linear-gradient(180deg, rgba(13,20,48,0.90), rgba(18,15,42,0.92));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  color: #d9e0f3; border-right: 1px solid rgba(var(--dz-fg-rgb),0.10);
}
body.sbt-aurora .asb-brand { border-bottom-color: rgba(var(--dz-fg-rgb),0.12); }
body.sbt-aurora .asb-link { color: #b9c4e0; }
body.sbt-aurora .asb-link:hover { background: rgba(var(--dz-fg-rgb),0.08); color: #fff; }
body.sbt-aurora .asb-link.active {
  background: rgba(var(--dz-fg-rgb),0.12); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--dz-fg-rgb),0.16), 0 4px 14px rgba(0,180,255,0.18);
}
body.sbt-aurora .asb-foot { border-top-color: rgba(var(--dz-fg-rgb),0.12); }
body.sbt-aurora .asb-user-mail { opacity: 0.6; }

/* ── Téma: SUNSET (teplý gradient — západ slnka) ── */
body.sbt-sunset .app-sidebar { background: linear-gradient(170deg, #f0506e 0%, #f5734f 50%, #f9a13c 100%); color: #fff4ec; border-right: none; }
body.sbt-sunset .asb-brand { border-bottom-color: rgba(var(--dz-fg-rgb),0.20); }
body.sbt-sunset .asb-logo { background: rgba(var(--dz-fg-rgb),0.94); color: #f0506e; }
body.sbt-sunset .asb-avatar { background: rgba(var(--dz-fg-rgb),0.94); color: #f0506e; }
body.sbt-sunset .asb-link { color: #ffe6db; }
body.sbt-sunset .asb-link:hover { background: rgba(var(--dz-fg-rgb),0.16); color: #fff; }
body.sbt-sunset .asb-link.active { background: rgba(var(--dz-fg-rgb),0.24); color: #fff; font-weight: 600; }
body.sbt-sunset .asb-foot { border-top-color: rgba(var(--dz-fg-rgb),0.20); }
body.sbt-sunset .asb-user-mail { opacity: 0.75; }

/* Pozn.: mobilné správanie appSidebar (drawer, hamburger) je zjednotené
   vyššie v bloku "Mobil — hamburger + výsuvná navigácia (drawer)"
   pre oba layouty (header aj sidebar). */

/* =============================================================================
   ADMIN → VZHĽAD: výber layoutu + témy
   ============================================================================= */
.appr-saved { font-size: 0.78rem; color: #10b981; opacity: 0; transition: opacity .2s; }
.appr-saved.show { opacity: 1; }
.appr-layouts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; max-width: 560px; }
.appr-layout {
  background: var(--card-bg, rgba(var(--dz-fg-rgb),0.03)); border: 2px solid rgba(var(--dz-fg-rgb),0.08);
  border-radius: 14px; padding: 14px; cursor: pointer; text-align: left;
  font-family: inherit; color: inherit; transition: border-color .18s, transform .18s;
}
.appr-layout:hover { transform: translateY(-2px); border-color: rgba(0,212,255,0.4); }
.appr-layout.active { border-color: var(--dz-cyan); box-shadow: 0 0 0 3px rgba(0,212,255,0.15); }
.appr-prev { height: 92px; border-radius: 9px; overflow: hidden; background: #0d1430; border: 1px solid rgba(var(--dz-fg-rgb),0.08); margin-bottom: 10px; }
.appr-prev-header { display: flex; flex-direction: column; }
.apl-topbar { height: 22px; background: #131b3d; display: flex; align-items: center; gap: 5px; padding: 0 8px; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.06); }
.apl-dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(140deg,#00d4ff,#6366f1); }
.apl-nav { width: 22px; height: 6px; border-radius: 3px; background: rgba(var(--dz-fg-rgb),0.22); }
.apl-body { flex: 1; padding: 9px; display: flex; flex-direction: column; gap: 6px; }
.apl-body span { height: 12px; border-radius: 4px; background: rgba(var(--dz-fg-rgb),0.08); }
.apl-body span:first-child { width: 70%; }
.appr-prev-sidebar { display: flex; }
.apl-side { width: 38px; background: #131b3d; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 7px; border-right: 1px solid rgba(var(--dz-fg-rgb),0.06); }
.apl-side span { width: 18px; height: 6px; border-radius: 3px; background: rgba(var(--dz-fg-rgb),0.22); }
.apl-side span:first-child { background: linear-gradient(140deg,#00d4ff,#6366f1); height: 8px; }
.apl-main { flex: 1; padding: 9px; display: flex; flex-direction: column; gap: 6px; }
.apl-main span { height: 12px; border-radius: 4px; background: rgba(var(--dz-fg-rgb),0.08); }
.apl-main span:first-child { width: 60%; }
.appr-layout-name { font-weight: 700; font-size: 0.92rem; }
.appr-layout-sub { font-size: 0.74rem; opacity: 0.6; margin-top: 2px; }

#apprThemeSection.dim { opacity: 0.45; pointer-events: none; }
.appr-themes { display: flex; flex-wrap: wrap; gap: 12px; }
.appr-theme {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--card-bg, rgba(var(--dz-fg-rgb),0.03)); border: 2px solid rgba(var(--dz-fg-rgb),0.08);
  border-radius: 13px; padding: 12px 14px; cursor: pointer; font-family: inherit; color: inherit;
  transition: border-color .18s, transform .18s; min-width: 92px;
}
.appr-theme:hover { transform: translateY(-2px); border-color: rgba(0,212,255,0.4); }
.appr-theme.active { border-color: var(--dz-cyan); box-shadow: 0 0 0 3px rgba(0,212,255,0.15); }
.apt-swatch { width: 56px; height: 64px; border-radius: 9px; padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; border: 1px solid rgba(0,0,0,0.15); }
.apt-swatch i { height: 7px; border-radius: 3px; background: rgba(var(--dz-fg-rgb),0.25); }
.apt-swatch i:first-child { background: rgba(var(--dz-fg-rgb),0.6); }
.apt-dark { background: #0d1430; }
.apt-light { background: #ffffff; } .apt-light i { background: #cbd5e1; } .apt-light i:first-child { background: #4f46e5; }
.apt-minimal { background: #fbfcfe; } .apt-minimal i { background: #e2e8f0; } .apt-minimal i:first-child { background: #10b981; }
.apt-icon { background: #0d1430; align-items: center; } .apt-icon i { width: 18px; height: 18px; border-radius: 5px; }
.apt-gradient { background: linear-gradient(170deg,#6d4ed6,#8b6ef0); } .apt-gradient i { background: rgba(var(--dz-fg-rgb),0.35); } .apt-gradient i:first-child { background: rgba(var(--dz-fg-rgb),0.85); }
.apt-aurora { background: radial-gradient(60% 50% at 80% 20%, rgba(139,110,240,0.7), transparent 70%), radial-gradient(50% 50% at 15% 10%, rgba(0,212,255,0.55), transparent 70%), linear-gradient(170deg,#0d1430,#1b1340); } .apt-aurora i { background: rgba(var(--dz-fg-rgb),0.32); } .apt-aurora i:first-child { background: rgba(120,220,255,0.9); }
.apt-sunset { background: linear-gradient(170deg,#f0506e,#f5734f 55%,#f9a13c); } .apt-sunset i { background: rgba(var(--dz-fg-rgb),0.42); } .apt-sunset i:first-child { background: rgba(var(--dz-fg-rgb),0.92); }
.apt-name { font-size: 0.78rem; font-weight: 600; }

/* =============================================================================
   MANAŽMENT — R&D & VÝROBNÉ ANALYTIKY (vizuálne)
   ============================================================================= */
.mgmt-analytics-hdr { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 12px; flex-wrap: wrap; }
.mgmt-section-h { font-family: var(--font-title); font-size: 1.22rem; font-weight: 700; color: var(--dz-text); }
.mgmt-section-note { font-size: 0.78rem; color: #94a3b8; }
.mgmt-analytics { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.an-card {
  background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.08);
  border-radius: 14px; padding: 16px 16px 14px; display: flex; flex-direction: column; color: var(--dz-text2);
}
.an-card-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.an-title { font-weight: 700; font-size: 0.95rem; color: var(--dz-text); }
.an-badge { font-size: 0.68rem; padding: 3px 9px; border-radius: 100px; font-weight: 600; }
.an-badge.ok { background: rgba(16,185,129,0.15); color: var(--dz-green); }
.an-badge.warn { background: rgba(245,158,11,0.16); color: var(--dz-amber); }
.an-badge.bad { background: rgba(239,68,68,0.15); color: var(--dz-red); }
.an-badge.info { background: rgba(0,212,255,0.13); color: var(--dz-cyan); }

/* kapacitné riadky */
.an-cap-row { margin-bottom: 11px; }
.an-cap-top { display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 5px; }
.an-cap-name { font-weight: 600; color: var(--dz-text); }
.an-cap-pct { opacity: 0.8; font-variant-numeric: tabular-nums; }
.an-cap-track { height: 8px; border-radius: 5px; background: rgba(var(--dz-fg-rgb),0.07); overflow: hidden; }
.an-cap-fill { height: 100%; border-radius: 5px; transition: width .5s ease; }
.an-cap-fill.lo { background: linear-gradient(90deg,#10b981,#34d399); }
.an-cap-fill.mid { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.an-cap-fill.hi { background: linear-gradient(90deg,#ef4444,#f87171); }
.an-cap-sub { font-size: 0.68rem; opacity: 0.5; margin-top: 3px; }

/* donut + center */
.an-donut-wrap { display: flex; align-items: center; gap: 16px; }
.an-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.an-leg-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.an-leg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.an-leg-val { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dz-text); }

/* gauge */
.an-gauge-wrap { display: flex; align-items: center; gap: 16px; }
.an-gauge-meta { display: flex; flex-direction: column; gap: 4px; }
.an-gauge-big { font-family: var(--font-title); font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--dz-text2); }
.an-gauge-lbl { font-size: 0.74rem; opacity: 0.6; }

/* bars (velocity / kapacita po týždňoch) */
.an-bars { display: flex; align-items: flex-end; gap: 7px; height: 110px; padding-top: 6px; }
.an-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.an-bar-stack { width: 100%; max-width: 26px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; flex: 1; }
.an-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; transition: height .5s ease; }
.an-bar.plan { background: rgba(99,102,241,0.55); }
.an-bar.real { background: linear-gradient(180deg,#00d4ff,#6366f1); }
.an-bar-x { font-size: 0.64rem; opacity: 0.5; }
.an-bars-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 0.72rem; opacity: 0.7; }
.an-bars-legend span { display: flex; align-items: center; gap: 6px; }
.an-bars-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* funnel */
.an-funnel { display: flex; flex-direction: column; gap: 6px; }
.an-fn-row { display: flex; align-items: center; gap: 10px; }
.an-fn-bar { height: 26px; border-radius: 6px; display: flex; align-items: center; padding: 0 9px; color: #06121f; font-weight: 700; font-size: 0.78rem; min-width: 34px; transition: width .5s ease; }
.an-fn-lbl { font-size: 0.8rem; min-width: 92px; }

/* stacked horizontal bar */
.an-stackbar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; background: rgba(var(--dz-fg-rgb),0.06); }
.an-stackbar-seg { height: 100%; transition: width .5s ease; }
.an-stack-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; font-size: 0.76rem; }
.an-stack-legend .an-leg-row { font-size: 0.76rem; }

.an-foot-note { font-size: 0.68rem; opacity: 0.45; margin-top: auto; padding-top: 10px; }

/* =============================================================================
   NÁVODY (Guides) — editor layout, revízie, detail
   ============================================================================= */
.guide-edit-layout { display: flex; gap: 18px; align-items: flex-start; }
.guide-edit-main { flex: 1; min-width: 0; }
.guide-content-editor { min-height: 320px; }

.guide-rev-chip {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 100px;
  font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(99,102,241,0.16); color: var(--dz-purple); border: 1px solid rgba(99,102,241,0.3);
}

.guide-rev-panel {
  width: 270px; flex-shrink: 0; position: sticky; top: calc(var(--header-h) + 12px);
  background: var(--card-bg, rgba(var(--dz-fg-rgb),0.03)); border: 1px solid rgba(var(--dz-fg-rgb),0.08);
  border-radius: 14px; padding: 14px; max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto;
}
.guide-rev-hdr { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 0.92rem; }
.guide-rev-note { font-size: 0.72rem; opacity: 0.55; margin: 7px 0 12px; line-height: 1.45; }
.guide-rev-list { display: flex; flex-direction: column; gap: 9px; }
.guide-rev-empty { font-size: 0.78rem; opacity: 0.5; padding: 8px 2px; }
.guide-rev-item {
  border: 1px solid rgba(var(--dz-fg-rgb),0.08); border-radius: 11px; padding: 10px 11px;
  background: rgba(var(--dz-fg-rgb),0.02); transition: border-color .16s;
}
.guide-rev-item.current { border-color: rgba(99,102,241,0.5); background: rgba(99,102,241,0.08); }
.guide-rev-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guide-rev-tag { font-weight: 700; font-size: 0.82rem; color: var(--dz-purple); font-variant-numeric: tabular-nums; }
.guide-rev-date { font-size: 0.7rem; opacity: 0.55; }
.guide-rev-msg { font-size: 0.78rem; margin-top: 5px; line-height: 1.4; }
.guide-rev-auth { font-size: 0.68rem; opacity: 0.5; margin-top: 4px; }
.guide-rev-actions { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.btn-xs {
  font-family: inherit; cursor: pointer; font-size: 0.7rem; padding: 4px 8px; border-radius: 7px;
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.12); color: inherit;
  transition: background .16s, border-color .16s;
}
.btn-xs:hover { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.4); }

.guide-detail-summary { font-size: 0.92rem; opacity: 0.75; font-style: italic; margin-top: 6px; }
.guide-detail-content { margin-top: 14px; line-height: 1.65; }
.guide-detail-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
.guide-detail-content h1, .guide-detail-content h2, .guide-detail-content h3 { margin: 14px 0 6px; }
.guide-detail-content ul, .guide-detail-content ol { padding-left: 22px; margin: 6px 0; }
.guide-detail-content table { border-collapse: collapse; margin: 8px 0; }
.guide-detail-content td, .guide-detail-content th { border: 1px solid rgba(128,128,128,0.4); padding: 5px 9px; }

.guide-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(16,185,129,0.95); color: #06121f; font-weight: 600; font-size: 0.84rem;
  padding: 10px 18px; border-radius: 100px; box-shadow: 0 8px 26px rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; z-index: 9000;
}
.guide-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .guide-edit-layout { flex-direction: column; }
  .guide-rev-panel { width: 100%; position: static; max-height: none; }
}

/* =============================================================================
   ADMIN → VZHĽAD: akcent, hustota, zaoblenie, animácie
   ============================================================================= */
.appr-accents { display: flex; flex-wrap: wrap; gap: 10px; }
.appr-accent {
  display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; color: inherit;
  background: var(--card-bg, rgba(var(--dz-fg-rgb),0.03)); border: 2px solid rgba(var(--dz-fg-rgb),0.08);
  border-radius: 11px; padding: 9px 14px 9px 11px; font-size: 0.82rem; font-weight: 600;
  transition: border-color .18s, transform .18s;
}
.appr-accent:hover { transform: translateY(-2px); border-color: rgba(0,212,255,0.4); }
.appr-accent.active { border-color: var(--dz-cyan); box-shadow: 0 0 0 3px rgba(0,212,255,0.15); }
.apa-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(var(--dz-fg-rgb),0.15) inset; }

.appr-opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.appr-opt-group { display: flex; flex-direction: column; gap: 8px; }
.appr-opt-label { font-weight: 700; font-size: 0.85rem; }
.appr-opts { display: inline-flex; gap: 0; border: 1px solid rgba(var(--dz-fg-rgb),0.12); border-radius: 10px; overflow: hidden; width: fit-content; }
.appr-opt {
  cursor: pointer; font-family: inherit; color: inherit; background: transparent; border: none;
  padding: 8px 14px; font-size: 0.8rem; font-weight: 600; transition: background .16s, color .16s;
  border-right: 1px solid rgba(var(--dz-fg-rgb),0.1);
}
.appr-opt:last-child { border-right: none; }
.appr-opt:hover { background: rgba(var(--dz-fg-rgb),0.06); }
.appr-opt.active { background: #00d4ff; color: #06121f; }
.appr-opt-hint { font-size: 0.72rem; opacity: 0.55; line-height: 1.45; max-width: 320px; }

/* === Efekt: KOMPAKTNÁ HUSTOTA === */
body.ui-compact { font-size: 13px; --header-h: 52px; }
body.ui-compact .admin-section { padding: 14px; }
body.ui-compact .mgmt-card, body.ui-compact .an-card, body.ui-compact .guide-rev-panel { padding: 12px; }
body.ui-compact .kanban-card { padding: 7px; }
body.ui-compact .proc-card { padding: 10px 12px; }
body.ui-compact .mgmt-stat { padding: 12px; }
body.ui-compact .nav-link { padding: 6px 9px; }

/* === Efekt: REDUKOVAŤ POHYB === */
body.ui-reduce-motion *, body.ui-reduce-motion *::before, body.ui-reduce-motion *::after {
  transition: none !important; animation: none !important; scroll-behavior: auto !important;
}

/* =============================================================================
   DIALÓG OTVORENIA PRIEČINKA (file server)
   ============================================================================= */
.folder-dlg-hint { font-size: 0.86rem; color: var(--text-dim, #64748b); line-height: 1.5; margin-bottom: 12px; }
.folder-dlg-path {
  width: 100%; font-family: 'Consolas', 'Menlo', monospace; font-size: 0.86rem;
  padding: 10px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 8px);
  background: var(--page-bg, #f1f4f9); color: var(--text-bright, #0f172a);
  margin-bottom: 14px; user-select: all;
}
.folder-dlg-steps { margin: 0 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.folder-dlg-steps li { font-size: 0.85rem; color: var(--text, #1e293b); line-height: 1.5; }
.folder-dlg-steps kbd {
  display: inline-block; font-family: inherit; font-size: 0.74rem; font-weight: 600;
  padding: 1px 7px; border-radius: 5px; background: #1e293b; color: var(--dz-text2);
  border: 1px solid rgba(var(--dz-fg-rgb),0.15); box-shadow: 0 1px 0 rgba(0,0,0,0.25); margin: 0 1px;
}

/* =============================================================================
   ÚLOHY — toolbar, prepínač zobrazenia, kanban, progress, chips
   ============================================================================= */
/* Zmrazená (sticky) hlavička stránky — nadpis, tlačidlo „Nová úloha" a filtre
   ostávajú viditeľné aj pri scrollovaní nadol, hneď pod hlavičkou appky. */
.tasks-sticky-hdr {
  position: sticky; top: var(--header-h); z-index: 60;
  background: var(--hdr-bg);
  padding-top: 36px; margin: -36px -28px 0; padding-left: 28px; padding-right: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.08);
}
.tasks-sticky-hdr .proc-hdr { margin-bottom: 14px; }
.tasks-sticky-hdr .tasks-toolbar { margin-bottom: 0; }

/* Plávajúce tlačidlo „Nová úloha" — vždy viditeľné vpravo dole, aj mimo hlavičky */
.tasks-fab {
  position: fixed; right: 22px; bottom: 90px; z-index: 480;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent2) 100%);
  border: none; color: #fff; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 8px 24px rgba(8,145,178,0.4);
  transition: transform .2s, box-shadow .2s;
}
.tasks-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 30px rgba(8,145,178,0.5); }

.tasks-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tasks-toolbar .tasks-filters { margin-bottom: 0; }
.tasks-viewtoggle { display: inline-flex; border: 1px solid rgba(var(--dz-fg-rgb),0.12); border-radius: 20px; overflow: hidden; }
.tasks-view {
  padding: 7px 14px; font-size: 0.78rem; font-weight: 600; font-family: var(--font);
  background: transparent; border: none; color: rgba(var(--dz-fg-rgb),0.55); cursor: pointer; transition: background .16s, color .16s;
}
.tasks-view:hover { background: rgba(var(--dz-fg-rgb),0.06); color: #fff; }
.tasks-view.active { background: var(--accent); color: #fff; }

.tasks-inner.tasks-wide { max-width: 1640px; }
#tasksKanban.kanban { grid-template-columns: repeat(6, minmax(200px, 1fr)); }
#tasksKanban .kanban-col-body { min-height: 60px; }
@media (max-width: 1300px) { #tasksKanban.kanban { grid-template-columns: repeat(6, 220px); } }

.tk-tag-filter {
  padding: 7px 12px; font-size: 0.78rem; font-weight: 600; font-family: var(--font);
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.14); border-radius: 100px; color: rgba(var(--dz-fg-rgb),0.75); cursor: pointer;
}

/* progres celého zoznamu úloh */
.tasks-progress { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.tasks-progress-track { flex: 1; height: 8px; border-radius: 5px; background: rgba(var(--dz-fg-rgb),0.1); overflow: hidden; max-width: 320px; }
.tasks-progress-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg,#10b981,#34d399); transition: width .4s ease; }
.tasks-progress-txt { font-size: 0.76rem; font-weight: 700; color: rgba(var(--dz-fg-rgb),0.65); font-variant-numeric: tabular-nums; }

.task-row.task-cancelled, .task-kanban-card.task-cancelled { opacity: 0.55; text-decoration: line-through; }

/* rýchly prehľad úloh — zmeškané / dnes / zajtra */
.tk-preview-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 18px 0 16px; }
.tk-preview-col {
  background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: 12px; padding: 12px 14px;
}
.tk-preview-col.tk-preview-missed {
  background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3);
}
.tk-preview-hdr {
  display: flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700;
  color: rgba(var(--dz-fg-rgb),0.85); margin-bottom: 8px;
}
.tk-preview-hdr svg { flex-shrink: 0; opacity: 0.85; }
.tk-preview-missed .tk-preview-hdr { color: #fca5a5; }
.tk-preview-missed .tk-preview-hdr svg { color: #f87171; opacity: 1; }
.tk-preview-count {
  background: rgba(var(--dz-fg-rgb),0.12); border-radius: 100px; padding: 1px 8px;
  font-size: 0.7rem; color: rgba(var(--dz-fg-rgb),0.7);
}
.tk-preview-missed .tk-preview-count { background: rgba(239,68,68,0.22); color: #fecaca; }
.tk-preview-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 5px; border-radius: 8px;
  cursor: pointer; font-size: 0.86rem; color: rgba(var(--dz-fg-rgb),0.9);
}
.tk-preview-item:hover { background: rgba(var(--dz-fg-rgb),0.08); }
.tk-preview-prio { width: 6px; height: 6px; border-radius: 50%; background: var(--prio); flex-shrink: 0; }
.tk-preview-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tk-preview-assignee { font-size: 0.74rem; color: rgba(var(--dz-fg-rgb),0.68); flex-shrink: 0; }
.tk-preview-due { font-size: 0.74rem; color: #f87171; font-weight: 600; flex-shrink: 0; white-space: nowrap; }
.tk-preview-empty { font-size: 0.8rem; color: rgba(var(--dz-fg-rgb),0.6); padding: 4px; }
.tk-postpone-btn {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 4px 9px; border-radius: 100px; font-size: 0.68rem; font-weight: 700;
  background: rgba(239,68,68,0.14); border: 1px solid rgba(239,68,68,0.4); color: #fca5a5;
  cursor: pointer; transition: background .16s, color .16s; font-family: inherit;
}
.tk-postpone-btn:hover { background: rgba(239,68,68,0.28); color: #fff; }
.tk-postpone-btn svg { flex-shrink: 0; }
@media (max-width: 720px) { .tk-preview-wrap { grid-template-columns: 1fr; } }

/* Grid (tabuľkový) pohľad úloh */
/* Horizontálny scroll len na užších obrazovkách — overflow-x:auto by na
   širokej obrazovke zbytočne urobil z elementu nový scroll kontajner a
   rozbil by position:sticky hlavičky tabuľky voči stránke (viď nižšie). */
.tasks-grid-wrap { border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: var(--radius-lg); }
@media (max-width: 900px) { .tasks-grid-wrap { overflow-x: auto; } }
.task-grid { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.task-grid thead { position: sticky; top: 0; z-index: 15; }
.task-grid thead th {
  text-align: left; padding: 10px 12px; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: rgba(var(--dz-fg-rgb),0.68); background-color: var(--hdr-bg); background-image: linear-gradient(rgba(var(--dz-fg-rgb),0.06), rgba(var(--dz-fg-rgb),0.06));
  border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.12);
  cursor: pointer; white-space: nowrap; user-select: none;
}
.task-grid thead th:hover { color: var(--dz-text); }
.task-grid thead th.task-grid-sorted { color: var(--accent); }
.task-grid-arrow { font-size: 0.62rem; }
.task-grid tbody tr { cursor: pointer; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.07); transition: background var(--transition); }
.task-grid tbody tr:hover { background: rgba(var(--dz-fg-rgb),0.05); }
.task-grid tbody td { padding: 9px 12px; color: rgba(var(--dz-fg-rgb),0.88); vertical-align: middle; }
.task-grid th[data-key="title"], .task-grid td.task-grid-title { min-width: 320px; }
.task-grid th[data-key="due"], .task-grid tbody tr td:nth-child(6) { white-space: nowrap; }
.task-grid-title { font-weight: 600; color: var(--dz-text); }
.task-grid-row.task-grid-done .task-grid-title { text-decoration: line-through; color: rgba(var(--dz-fg-rgb),0.45); }
.task-grid-row.task-grid-cancelled { opacity: 0.55; text-decoration: line-through; }
/* farba riadku podľa priority (prebije ju len po termíne — pozri .task-grid-overdue nižšie) */
.task-grid-row.task-grid-prio-critical { background: rgba(185,28,28,0.12); }
.task-grid-row.task-grid-prio-high { background: rgba(239,68,68,0.07); }
.task-grid-row.task-grid-prio-normal { background: transparent; }
.task-grid-row.task-grid-prio-low { background: rgba(100,116,139,0.05); }
.task-grid-row.task-grid-overdue { background: rgba(239,68,68,0.16); }
.task-grid-status { padding: 3px 10px; border-radius: 100px; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.task-grid-status-todo { background: rgba(100,116,139,0.16); color: #94a3b8; }
.task-grid-status-inprogress { background: rgba(59,130,246,0.16); color: #60a5fa; }
.task-grid-status-blocked { background: rgba(239,68,68,0.16); color: #f87171; }
.task-grid-status-review { background: rgba(234,179,8,0.16); color: #eab308; }
.task-grid-status-done { background: rgba(16,185,129,0.16); color: #34d399; }
.task-grid-status-cancelled { background: rgba(var(--dz-fg-rgb),0.1); color: rgba(var(--dz-fg-rgb),0.45); }
.task-grid .task-prog { margin-top: 0; min-width: 110px; }
.task-grid-lastupd { min-width: 240px; max-width: 330px; }
.task-grid-lastupd-text { color: rgba(var(--dz-fg-rgb),0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-grid-lastupd-meta { font-size: 0.72rem; color: rgba(var(--dz-fg-rgb),0.62); margin-top: 2px; }
/* Vlastný hover tooltip s celým textom poslednej aktualizácie (namiesto natívneho title, s krátkym oneskorením a zalomením) */
.task-grid-lastupd[data-tooltip] { position: relative; cursor: help; }
.task-grid-lastupd[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; right: 0; left: auto; top: 100%; margin-top: 6px; z-index: 60;
  width: max-content; max-width: 320px; white-space: pre-wrap; word-break: break-word;
  background: #0f172a; color: #e2e8f0; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; padding: 8px 11px; font-size: 0.76rem; font-weight: 400; line-height: 1.45;
  box-shadow: var(--shadow-lg); pointer-events: none;
}
.task-grid thead .task-grid-filterrow th { background-color: var(--hdr-bg); background-image: linear-gradient(rgba(var(--dz-fg-rgb),0.03), rgba(var(--dz-fg-rgb),0.03)); padding: 6px 8px; cursor: default; }
.task-grid thead .task-grid-filterrow th:hover { color: inherit; }
.task-grid-filtercell input, .task-grid-filtercell select {
  width: 100%; box-sizing: border-box; padding: 5px 8px; font-size: 0.74rem; font-family: var(--font);
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.15); border-radius: 6px; color: var(--dz-text);
}
.task-grid-group td { padding: 8px 12px; font-weight: 700; font-size: 0.85rem; color: rgba(var(--dz-fg-rgb),0.92); cursor: pointer; user-select: none; }
.task-grid-group:hover td { background: rgba(var(--dz-fg-rgb),0.05); }
.task-grid-group-cust td { background: rgba(var(--accent-rgb,59,130,246),0.1); border-top: 1px solid rgba(var(--dz-fg-rgb),0.1); }
.task-grid-group-proj td { padding-left: 30px; background: rgba(var(--dz-fg-rgb),0.03); font-size: 0.8rem; }
.task-grid-group-arrow { display: inline-block; width: 14px; font-weight: 400; color: rgba(var(--dz-fg-rgb),0.6); }
.task-grid-group-count { margin-left: 8px; font-weight: 600; color: rgba(var(--dz-fg-rgb),0.62); font-variant-numeric: tabular-nums; }

/* karta úlohy v kanbane */
.task-kanban-card .kanban-card-actions button { width: 24px; height: 22px; background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.12); border-radius: 6px; color: var(--dz-red); cursor: pointer; font-size: 0.78rem; }
.task-kanban-card .kanban-card-actions button:hover { background: rgba(239,68,68,0.2); }
.task-kanban-card.task-overdue { border-left-color: #ef4444; }

/* grip na presúvanie */
.task-grip { color: #475569; cursor: grab; font-size: 0.95rem; letter-spacing: -2px; padding-top: 2px; flex-shrink: 0; }
.task-row { cursor: default; }
.task-row.kanban-dragging { opacity: 0.45; }

/* chips projekt / zákazník */
.task-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.task-chip { font-size: 0.7rem; font-weight: 600; padding: 2px 9px; border-radius: 100px; white-space: nowrap; }
.task-chip-pj { background: rgba(99,102,241,0.16); color: var(--dz-purple); border: 1px solid rgba(99,102,241,0.3); }
.task-chip-cust { background: rgba(6,182,212,0.14); color: var(--dz-cyan); border: 1px solid rgba(6,182,212,0.3); }
.task-chip-parent { background: rgba(var(--dz-fg-rgb),0.08); color: rgba(var(--dz-fg-rgb),0.7); border: 1px solid rgba(var(--dz-fg-rgb),0.16); }
.task-chip-tag { background: rgba(234,179,8,0.14); color: #d97706; border: 1px solid rgba(234,179,8,0.3); }
.task-chip-readonly { background: rgba(251,191,36,0.14); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.task-chip-assignee { background: rgba(16,185,129,0.14); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }

.task-depbadge { color: #ef4444; font-weight: 700; }

/* progres bar */
.task-prog { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.task-prog-track { flex: 1; height: 7px; border-radius: 5px; background: rgba(var(--dz-fg-rgb),0.1); overflow: hidden; }
.task-prog-fill { height: 100%; border-radius: 5px; transition: width .4s ease; }
.task-prog-fill.pf-lo { background: linear-gradient(90deg,#38bdf8,#3b82f6); }
.task-prog-fill.pf-mid { background: linear-gradient(90deg,#6366f1,#22d3ee); }
.task-prog-fill.pf-done { background: linear-gradient(90deg,#10b981,#34d399); }
.task-prog-val { font-size: 0.7rem; font-weight: 700; color: rgba(var(--dz-fg-rgb),0.7); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }

/* poznámka + dátum pridania */
.task-note { font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.78); margin-top: 6px; background: rgba(var(--dz-fg-rgb),0.06); border-radius: 6px; padding: 5px 9px; line-height: 1.45; }
.task-created { color: rgba(var(--dz-fg-rgb),0.4); }

/* range input v modáli */
#tkProgress { width: 100%; accent-color: var(--accent); }

/* =============================================================================
   VYŤAŽENIE TECHNOLÓGIÍ — Equipment Utilization / Gantt timeline
   ============================================================================= */
.util-page { background: var(--hdr-bg); }
.util-inner { max-width: 1280px; margin: 0 auto; padding: 28px 24px 52px; }

.util-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(8,145,178,0.16), rgba(37,99,235,0.12)); border: 1px solid rgba(103,232,249,0.18);
  border-radius: 16px; padding: 22px 26px; }
.util-title { font-family: var(--font-title); font-size: 1.7rem; font-weight: 800; color: var(--dz-text); }
.util-sub { color: var(--dz-text2); font-size: 0.9rem; margin-top: 4px; }
.util-hero-img { height: 104px; width: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35)); flex-shrink: 0; }

.util-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.util-nav { display: flex; align-items: center; gap: 8px; }
.util-range-label { color: var(--dz-text2); font-weight: 600; font-size: 0.9rem; margin-left: 6px; }
.util-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.util-select { background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.14); color: var(--dz-text2); border-radius: 8px; padding: 8px 10px; font-family: var(--font); font-size: 0.82rem; }

/* súhrn vyťaženia */
.util-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }
.util-stat { background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color .16s, transform .16s, background .16s; }
.util-stat:hover { border-color: rgba(103,232,249,0.4); transform: translateY(-2px); }
.util-stat.active { border-color: var(--dz-cyan); background: rgba(103,232,249,0.1); box-shadow: 0 0 0 2px rgba(103,232,249,0.25); }
.util-filter-chip { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; padding: 5px 12px; border-radius: 100px; cursor: pointer; font-family: var(--font); font-size: 0.78rem; font-weight: 600; background: rgba(103,232,249,0.16); border: 1px solid rgba(103,232,249,0.4); color: var(--dz-cyan); }
.util-filter-chip:hover { background: rgba(103,232,249,0.28); }
.util-filter-chip .ufc-x { font-weight: 700; opacity: 0.8; }
.ug-eq { cursor: pointer; }
.ug-eq:hover { background: #1a2444; }
.util-stat-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.util-stat-img { width: 34px; height: 34px; flex-shrink: 0; }
.util-stat-name { font-weight: 700; color: var(--dz-text); font-size: 0.88rem; }
.util-stat-code { font-size: 0.7rem; color: #94a3b8; }
.util-stat-bar { height: 8px; border-radius: 5px; background: rgba(var(--dz-fg-rgb),0.1); overflow: hidden; }
.util-stat-fill { height: 100%; border-radius: 5px; transition: width .4s ease; }
.util-stat-fill.us-lo { background: linear-gradient(90deg,#22d3ee,#3b82f6); }
.util-stat-fill.us-mid { background: linear-gradient(90deg,#6366f1,#8b5cf6); }
.util-stat-fill.us-hi { background: linear-gradient(90deg,#f59e0b,#ef4444); }
.util-stat-meta { display: flex; justify-content: space-between; font-size: 0.72rem; color: #94a3b8; margin-top: 7px; }
.util-stat-meta strong { color: var(--dz-text2); }

/* Gantt */
.util-gantt-wrap { overflow-x: auto; overflow-y: hidden; border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 12px; background: rgba(var(--dz-fg-rgb),0.02); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(103,232,249,0.4) transparent; }
.util-gantt-wrap::-webkit-scrollbar { height: 10px; }
.util-gantt-wrap::-webkit-scrollbar-thumb { background: rgba(103,232,249,0.35); border-radius: 5px; }
.util-gantt-wrap::-webkit-scrollbar-thumb:hover { background: rgba(103,232,249,0.55); }
.util-gantt { position: relative; min-width: 720px; }
.ug-head { display: flex; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.12); position: sticky; top: 0; background: #11182f; z-index: 2; }
.ug-corner { width: 180px; flex-shrink: 0; padding: 10px 12px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; border-right: 1px solid rgba(var(--dz-fg-rgb),0.1); position: sticky; left: 0; z-index: 6; background: #11182f; }
.ug-days { position: relative; flex: 1; height: 40px; }
.ug-day { position: absolute; top: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid rgba(var(--dz-fg-rgb),0.07); }
.ug-day-wd { font-size: 0.66rem; color: #94a3b8; text-transform: uppercase; }
.ug-day-d { font-size: 0.74rem; color: var(--dz-text2); font-weight: 600; }
.ug-day.ug-weekend { background: rgba(var(--dz-fg-rgb),0.03); }

.ug-row { display: flex; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.07); }
.ug-eq { width: 180px; flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-right: 1px solid rgba(var(--dz-fg-rgb),0.1); position: sticky; left: 0; z-index: 5; background: #131a33; }
.ug-eq-img { width: 30px; height: 30px; flex-shrink: 0; }
.ug-eq-txt { display: flex; flex-direction: column; min-width: 0; }
.ug-eq-name { font-size: 0.8rem; font-weight: 600; color: var(--dz-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ug-eq-code { font-size: 0.66rem; color: #94a3b8; }
.ug-track { position: relative; flex: 1; cursor: copy; }
.ug-cell { position: absolute; top: 0; height: 100%; border-left: 1px solid rgba(var(--dz-fg-rgb),0.06); }
.ug-cell.ug-weekend { background: rgba(var(--dz-fg-rgb),0.025); }
.ug-bar { position: absolute; height: 24px; border-radius: 5px; overflow: hidden; cursor: pointer; display: flex; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: filter .14s, transform .14s; }
.ug-bar:hover { filter: brightness(1.12); transform: translateY(-1px); z-index: 3; }
.ug-bar-lbl { font-size: 0.7rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 7px; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.ug-st-cancelled { opacity: 0.45; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.25) 0 6px, transparent 6px 12px) !important; }
.ug-now { position: absolute; top: 40px; bottom: 0; width: 2px; background: #f43f5e; z-index: 4; pointer-events: none; box-shadow: 0 0 8px rgba(244,63,94,0.6); }
.ug-now::before { content: ''; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #f43f5e; }

.util-legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 12px; font-size: 0.76rem; color: #94a3b8; }
.ulg-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; margin-right: 5px; }
.util-legend-hint { margin-left: auto; font-style: italic; opacity: 0.7; }

.util-dur-hint { font-size: 0.8rem; color: var(--dz-cyan); margin-top: 4px; min-height: 18px; }
.util-dur-hint.warn { color: var(--dz-red); }
.util-color { width: 100%; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; }

/* equipment manager */
.equip-mgr-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.equip-mgr-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; }
.equip-color { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.equip-mgr-name { flex: 1; font-size: 0.86rem; font-weight: 600; }
.equip-mgr-code { font-size: 0.72rem; color: var(--text-dim); font-weight: 400; }
.equip-mgr-form { border-top: 1px solid var(--border); padding-top: 14px; }
.equip-mgr-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

@media (max-width: 768px) {
  .util-hero-img { height: 72px; }
  .ug-corner, .ug-eq { width: 120px; }
  .util-legend-hint { display: none; }
}

/* =============================================================================
   PLÁNOVANIE VÝROBY (Production Planning)
   ============================================================================= */
.prod-page { background: var(--hdr-bg); }
.prod-inner { max-width: 1280px; margin: 0 auto; padding: 28px 24px 52px; }
.prod-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.prod-title { font-family: var(--font-title); font-size: 1.7rem; font-weight: 800; color: var(--dz-text); }
.prod-sub { color: var(--dz-text2); font-size: 0.9rem; margin-top: 4px; }
.prod-hdr-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Rámčeky sekcií — vizuálne oddelenie blokov (výrobná rodina stránok) */
.prod-section { background: rgba(var(--dz-fg-rgb),0.025); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; }
.prod-section-hd { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 14px; }
/* zarovnanie prvého/posledného prvku v karte, aby nevznikali dvojité medzery */
.prod-section > .mfg-section-hdr:first-child { margin-top: 0; }
.prod-section > .pwf-layout { margin-top: 0; }
.prod-section > *:last-child { margin-bottom: 0; }
.prod-kpis-section .powners-kpis { margin: 0; }
/* tabuľka vlastníkov v ráme sekcie — bez dvojitého orámovania */
.prod-section .powners-table-wrap { border: none; background: transparent; }

/* KPI */
.prod-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.prod-kpis-section .prod-kpis { margin-bottom: 0; }
.prod-kpis-section .prod-kpi { background: rgba(var(--dz-fg-rgb),0.06); }
.prod-list-section .prod-toolbar { margin-bottom: 14px; }
.prod-list-section > div:last-child { margin-bottom: 0; }
.prod-kpi { background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-left: 3px solid #3b82f6; border-radius: 12px; padding: 14px 16px; position: relative; }
.prod-kpi-click { cursor: pointer; transition: background .12s ease, transform .12s ease; }
.prod-kpi-click:hover { background: rgba(var(--dz-fg-rgb),0.08); transform: translateY(-2px); }
.prod-kpi-more { position: absolute; top: 10px; right: 12px; font-size: 0.64rem; color: #94a3b8; opacity: 0; transition: opacity .12s ease; }
.prod-kpi-click:hover .prod-kpi-more { opacity: 1; }
/* KPI detail modal — tmavý motív so svetlým textom (prod-table je stavaná pre tmavé pozadie) */
#prodKpiModal .modal-box { background: #131c35; border-color: rgba(var(--dz-fg-rgb),0.1); }
#prodKpiModal .modal-header { background: rgba(var(--dz-fg-rgb),0.04); border-color: rgba(var(--dz-fg-rgb),0.1); }
#prodKpiModal .modal-header h2 { color: var(--dz-text); }
#prodKpiModal .modal-close { color: var(--dz-text2); }
#prodKpiModal .modal-close:hover { background: rgba(239,68,68,0.2); color: var(--dz-red); }
#prodKpiModal .proc-empty { color: #94a3b8; }
.prod-kpi-modal-body { max-height: 66vh; overflow: auto; }
.prod-kpi-modal-body .prod-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.prod-kpi-modal-body .prod-table th { text-align: left; padding: 10px 12px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; background: rgba(var(--dz-fg-rgb),0.03); border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1); white-space: nowrap; position: sticky; top: 0; }
.prod-kpi-modal-body .prod-table td { padding: 9px 12px; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.06); color: var(--dz-text2); }
.prod-kpi-modal-body .prod-table .prod-t-num { font-weight: 700; color: var(--dz-text); display: block; }
.prod-kpi-modal-body .prod-table .prod-t-qty { font-size: 0.68rem; color: #94a3b8; }
.prod-kpi-modal-body .prod-table td.task-od { color: var(--dz-red); font-weight: 700; }
.prod-kpi-modal-body .prod-table tbody tr { cursor: pointer; }
.prod-kpi-modal-body .prod-table tbody tr:hover td { background: rgba(var(--dz-fg-rgb),0.06); }
.prod-kpi-val { font-family: var(--font-title); font-size: 1.7rem; font-weight: 800; color: var(--dz-text); line-height: 1; }
.prod-kpi-lbl { font-size: 0.78rem; color: var(--dz-text2); margin-top: 6px; }
.prod-kpi-sub { font-size: 0.68rem; color: #94a3b8; margin-top: 3px; }
.prod-kpi.pk-blue { border-left-color: #3b82f6; } .prod-kpi.pk-cyan { border-left-color: #06b6d4; }
.prod-kpi.pk-red { border-left-color: #ef4444; } .prod-kpi.pk-red .prod-kpi-val { color: var(--dz-red); }
.prod-kpi.pk-green { border-left-color: #10b981; }
.prod-kpi.pk-amber { border-left-color: #f59e0b; } .prod-kpi.pk-amber .prod-kpi-val { color: var(--dz-amber); }

/* Panel meškajúcich zákaziek */
.prod-late-panel { margin-bottom: 18px; }
.prod-late-ok { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.25); color: var(--dz-green); border-radius: 12px; padding: 12px 16px; font-size: 0.86rem; font-weight: 600; }
.prod-late-hd { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 800; color: var(--dz-red); margin-bottom: 8px; }
.prod-late-toggle { cursor: pointer; user-select: none; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; transition: background .12s ease; }
.prod-late-toggle:hover { background: rgba(239,68,68,0.14); }
.prod-late-chev { display: inline-block; transition: transform .15s ease; color: var(--dz-red); }
.prod-late-toggle.is-open .prod-late-chev { transform: rotate(90deg); }
.prod-late-body { display: flex; flex-direction: column; gap: 7px; }
.prod-late-count { background: #ef4444; color: #fff; border-radius: 100px; padding: 1px 9px; font-size: 0.78rem; }
.prod-late-hint { font-size: 0.7rem; font-weight: 400; color: #94a3b8; margin-left: auto; }
.prod-late-row { display: grid; grid-template-columns: 1fr 150px minmax(180px, 260px); gap: 12px; align-items: center; background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.22); border-radius: 10px; padding: 9px 13px; margin-bottom: 7px; }
.prod-late-main { cursor: pointer; min-width: 0; }
.prod-late-prod { font-size: 0.88rem; font-weight: 600; color: var(--dz-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-late-meta { font-size: 0.72rem; color: #94a3b8; margin-top: 2px; }
.prod-late-when { text-align: right; }
.prod-late-days { display: block; font-size: 0.82rem; font-weight: 800; color: var(--dz-red); }
.prod-late-date { font-size: 0.68rem; color: #94a3b8; }
.prod-late-reason { background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.16); border-radius: 8px; color: var(--dz-text2); padding: 7px 10px; font-size: 0.82rem; }
.prod-late-reason:focus { outline: none; border-color: var(--accent); }
@media (max-width: 760px) { .prod-late-row { grid-template-columns: 1fr; gap: 6px; } .prod-late-when { text-align: left; } }

/* Termín expedície — odznak dni do expedície */
.prod-ship-badge { font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: 100px; white-space: nowrap; }
.prod-ship-badge.ship-late { background: rgba(239,68,68,0.18); color: var(--dz-red); border: 1px solid rgba(239,68,68,0.4); }
.prod-ship-badge.ship-urgent { background: rgba(245,158,11,0.18); color: var(--dz-amber); border: 1px solid rgba(245,158,11,0.4); }
.prod-ship-badge.ship-soon { background: rgba(234,179,8,0.12); color: var(--dz-amber); }
.prod-ship-badge.ship-ok { background: rgba(16,185,129,0.12); color: var(--dz-green); }
.prod-ship-badge.ship-shipped { background: rgba(59,130,246,0.15); color: var(--dz-blue); }
.prod-row-late td { background: rgba(239,68,68,0.05); }
.prod-row-late:hover td { background: rgba(239,68,68,0.1); }
.prod-reason-tag { display: inline-block; margin-left: 8px; font-size: 0.68rem; color: var(--dz-amber); background: rgba(245,158,11,0.12); border-radius: 6px; padding: 1px 7px; }
.prod-calib-tag { display: inline-block; margin-left: 8px; font-size: 0.68rem; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.prod-calib-tag.bad { color: var(--dz-amber); background: rgba(245,158,11,0.14); border: 1px solid rgba(245,158,11,0.35); }
.prod-calib-tag.ok { color: var(--dz-green); background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); }

/* Kalibračné listy — tabuľka expedovaných objednávok */
.prod-calib-panel { margin-bottom: 18px; background: rgba(var(--dz-fg-rgb),0.025); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 16px; padding: 16px 18px; }
.prod-calib-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.95rem; font-weight: 800; color: var(--dz-blue); margin-bottom: 8px; }
.prod-calib-toggle { display: inline-flex; gap: 4px; margin-left: auto; }
/* Štatistiky ku kalibračným listom — fungujú ako filtre podľa stavu */
.prod-calib-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.pc-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.14); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: background .12s, border-color .12s; }
.pc-stat:hover { background: rgba(var(--dz-fg-rgb),0.1); }
.pc-stat-num { font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--dz-text); }
.pc-stat-lbl { font-size: 0.74rem; font-weight: 600; color: var(--dz-text2); }
.pc-stat.active { background: rgba(59,130,246,0.16); border-color: rgba(59,130,246,0.5); }
.pc-stat.bad .pc-stat-num { color: var(--dz-amber); }
.pc-stat.bad.active { background: rgba(245,158,11,0.16); border-color: rgba(245,158,11,0.5); }
.pc-stat.ok .pc-stat-num { color: var(--dz-green); }
.pc-stat.ok.active { background: rgba(16,185,129,0.16); border-color: rgba(16,185,129,0.5); }
/* Denná navigácia kalibračných listov */
.prod-calib-daybar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.prod-calib-daylbl { font-size: 0.86rem; font-weight: 700; color: var(--dz-text); text-transform: capitalize; margin-left: 4px; }
.prod-calib-daybar .prod-calib-toggle { margin-left: auto; }
.prod-calib-daybar .cal-nav-btn[disabled] { opacity: 0.4; cursor: default; }
@media (max-width: 640px) { .prod-calib-stats { grid-template-columns: 1fr; } }
.pc-filter { background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.14); color: var(--dz-text2); border-radius: 8px; padding: 5px 11px; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.pc-filter:hover { background: rgba(var(--dz-fg-rgb),0.1); }
.pc-filter.active { background: rgba(59,130,246,0.2); border-color: rgba(59,130,246,0.5); color: #bfdbfe; }
.prod-calib-tablewrap { overflow-x: auto; border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 12px; }
.prod-calib-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.prod-calib-table th { text-align: left; padding: 10px 12px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; background: rgba(var(--dz-fg-rgb),0.03); border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1); white-space: nowrap; }
.prod-calib-table td { padding: 9px 12px; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.05); color: var(--dz-text2); vertical-align: middle; }
.prod-calib-table tbody tr:last-child td { border-bottom: none; }
.prod-calib-tr.is-pending { background: rgba(245,158,11,0.06); }
.prod-calib-tr.is-pending:hover { background: rgba(245,158,11,0.1); }
.prod-calib-tr.is-sent { background: rgba(16,185,129,0.04); }
.prod-calib-tr.is-sent:hover { background: rgba(16,185,129,0.08); }
.prod-calib-table .pc-open { cursor: pointer; }
.prod-calib-table .prod-t-num { font-weight: 700; color: var(--dz-text); display: block; }
.prod-calib-table .prod-t-qty { font-size: 0.68rem; color: #94a3b8; }
.prod-calib-status { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 100px; white-space: nowrap; }
.prod-calib-status.bad { background: rgba(245,158,11,0.18); color: var(--dz-amber); border: 1px solid rgba(245,158,11,0.4); }
.prod-calib-status.ok { background: rgba(16,185,129,0.16); color: var(--dz-green); border: 1px solid rgba(16,185,129,0.4); }
.pc-sentdate { display: block; font-size: 0.66rem; color: #94a3b8; margin-top: 2px; }
.pc-empty { text-align: center; color: var(--dz-green); padding: 18px; font-weight: 600; }
.prod-calib-sel { background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.16); border-radius: 8px; color: var(--dz-text2); padding: 6px 8px; font-size: 0.78rem; max-width: 140px; }
.prod-calib-sel:focus { outline: none; border-color: var(--accent); }
.prod-calib-btn { border: none; border-radius: 8px; padding: 7px 11px; font-size: 0.76rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.prod-calib-btn.pending { background: rgba(245,158,11,0.16); color: var(--dz-amber); border: 1px solid rgba(245,158,11,0.4); }
.prod-calib-btn.pending:hover { background: rgba(245,158,11,0.28); }
.prod-calib-btn.sent { background: rgba(var(--dz-fg-rgb),0.06); color: var(--dz-text2); border: 1px solid rgba(var(--dz-fg-rgb),0.16); }
.prod-calib-btn.sent:hover { background: rgba(var(--dz-fg-rgb),0.12); }

/* Kalibračné listy v modáli */
.po-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--dz-text2); cursor: pointer; }
.po-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.po-calib-fields { background: rgba(59,130,246,0.05); border: 1px solid rgba(59,130,246,0.18); border-radius: 10px; padding: 12px; margin-top: 4px; }

/* Kalendár expedície */
.prod-cal-summary { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.prod-cal-sum-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--dz-text2); }
.prod-cal-sum-item i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.prod-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.prod-cal-dow { text-align: center; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; font-weight: 700; padding-bottom: 2px; }
.prod-cal-cell { min-height: 92px; background: rgba(var(--dz-fg-rgb),0.025); border: 1px solid rgba(var(--dz-fg-rgb),0.08); border-radius: 8px; padding: 5px 6px; display: flex; flex-direction: column; }
.prod-cal-cell.empty { background: transparent; border: none; }
.prod-cal-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.prod-cal-cell.has { background: rgba(var(--dz-fg-rgb),0.04); }
.prod-cal-daynum { display: flex; align-items: center; justify-content: space-between; font-size: 0.74rem; font-weight: 700; color: var(--dz-text2); margin-bottom: 3px; }
.prod-cal-daycount { background: rgba(var(--dz-fg-rgb),0.12); color: var(--dz-text2); border-radius: 100px; padding: 0 6px; font-size: 0.62rem; }
.prod-cal-chips { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.prod-cal-chip { font-size: 0.66rem; line-height: 1.25; padding: 2px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-cal-chip.shipped { background: rgba(59,130,246,0.2); color: #bfdbfe; border-left: 2px solid #3b82f6; }
.prod-cal-chip.plan { background: rgba(245,158,11,0.16); color: var(--dz-amber); border-left: 2px solid #f59e0b; }
.prod-cal-chip.calib-bad { box-shadow: inset 0 0 0 1px rgba(239,68,68,0.55); }
.prod-cal-chip:hover { filter: brightness(1.25); }
@media (max-width: 760px) { .prod-cal-cell { min-height: 70px; } .prod-cal-chip { font-size: 0.6rem; } }

.prod-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }

/* Kanban (6 stĺpcov) */
.prod-kanban.kanban { grid-template-columns: repeat(6, minmax(220px, 1fr)); }
.prod-card-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.prod-chip { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 100px; white-space: nowrap; }
.prod-chip-line { background: rgba(var(--dz-fg-rgb),0.06); color: var(--dz-text2); border: 1px solid rgba(var(--dz-fg-rgb),0.12); }
.prod-card .task-prog { margin: 7px 0; }

/* Zoznam */
.prod-list { background: rgba(var(--dz-fg-rgb),0.03); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 12px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.prod-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.prod-table th { text-align: left; padding: 11px 12px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1); background: rgba(var(--dz-fg-rgb),0.02); }
.prod-table td { padding: 10px 12px; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.06); color: var(--dz-text2); vertical-align: middle; }
.prod-table tbody tr { cursor: pointer; transition: background .14s; }
.prod-table tbody tr:hover { background: rgba(var(--dz-fg-rgb),0.04); }
.prod-t-num { font-weight: 700; color: var(--dz-text); display: block; }
.prod-t-prio { font-size: 0.68rem; font-weight: 600; }
.prod-t-qty { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.prod-t-bar { height: 5px; border-radius: 3px; background: rgba(var(--dz-fg-rgb),0.1); overflow: hidden; margin-top: 3px; width: 90px; }
.prod-t-bar > div { height: 100%; background: linear-gradient(90deg,#06b6d4,#3b82f6); border-radius: 3px; }
.prod-stage-badge { font-size: 0.68rem; font-weight: 600; padding: 3px 9px; border-radius: 100px; white-space: nowrap; }

/* vnorený zoznam — objednávka (skupina) a jej pod-objednávky */
.prod-grp-row td { background: rgba(99,102,241,0.07); border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1); }
.prod-grp-row:hover td { background: rgba(99,102,241,0.13); }
.prod-grp-chev { display: inline-block; margin-right: 8px; color: var(--dz-purple); font-size: 0.8rem; transition: transform .15s; }
.prod-grp-row.is-open .prod-grp-chev { transform: rotate(90deg); }
.prod-grp-row .prod-t-num { display: inline; }
.prod-grp-row .prod-t-qty { display: block; margin-top: 2px; padding-left: 20px; }
.prod-grp-sum { font-size: 0.78rem; color: var(--dz-purple); }
.prod-child-row td { background: rgba(6,182,212,0.06); border-bottom: 1px solid rgba(6,182,212,0.1); }
.prod-child-row:hover td { background: rgba(6,182,212,0.13); }
.prod-child-cell { position: relative; }
.prod-child-cell::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: rgba(6,182,212,0.45); }
.prod-child-cell .prod-t-num { padding-left: 30px; color: #a5f3fc; }

/* vyťaženie liniek */
.prod-lines-card { margin-top: 20px; background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 14px; padding: 16px 18px; }
.prod-lines-title { font-size: 1rem; font-weight: 700; color: var(--dz-text); margin-bottom: 12px; }
.prod-lines { display: flex; flex-direction: column; gap: 10px; }
.prod-line-row { display: flex; align-items: center; gap: 12px; }
.prod-line-name { width: 200px; flex-shrink: 0; font-size: 0.82rem; color: var(--dz-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-line-bar { flex: 1; height: 9px; border-radius: 5px; background: rgba(var(--dz-fg-rgb),0.08); overflow: hidden; }
.prod-line-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg,#06b6d4,#6366f1); transition: width .5s ease; }
.prod-line-meta { font-size: 0.72rem; color: #94a3b8; width: 170px; flex-shrink: 0; text-align: right; }

#poProgress { width: 100%; accent-color: var(--accent); }

@media (max-width: 1100px) { .prod-kanban.kanban { grid-template-columns: repeat(6, 220px); } }
@media (max-width: 768px) { .prod-line-name { width: 110px; } .prod-line-meta { width: 110px; } }

/* =============================================================================
   PLÁNOVANIE VÝROBY — Gantt + AI panel
   ============================================================================= */
.pg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pg-ai { margin-bottom: 16px; }
/* horný horizontálny scrollbar Ganttu (synchronizovaný s plátnom) */
.pg-topscroll { overflow-x: auto; overflow-y: hidden; height: 15px; border-radius: 8px 8px 0 0; background: rgba(var(--dz-fg-rgb),0.02); scrollbar-width: thin; scrollbar-color: rgba(103,232,249,0.4) transparent; }
.pg-topscroll::-webkit-scrollbar { height: 11px; }
.pg-topscroll::-webkit-scrollbar-thumb { background: rgba(103,232,249,0.4); border-radius: 6px; }
.pg-topscroll::-webkit-scrollbar-thumb:hover { background: rgba(103,232,249,0.6); }
.pg-topscroll > div { height: 1px; }
.pg-ai-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; }
@media (max-width: 900px) { .pg-ai-grid { grid-template-columns: 1fr; } }
.pg-ai-card { background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(6,182,212,0.08)); border: 1px solid rgba(103,232,249,0.22); border-radius: 14px; padding: 16px 18px; }
.pg-ai-head { font-weight: 700; font-size: 0.95rem; color: var(--dz-text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.pg-ai-badge { font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; background: rgba(139,92,246,0.28); color: var(--dz-purple); text-transform: uppercase; letter-spacing: 0.05em; }
.pg-score-wrap { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.pg-score { font-family: var(--font-title); font-size: 2.6rem; font-weight: 800; line-height: 1; }
.pg-score span { font-size: 1rem; opacity: 0.55; font-weight: 600; }
.pg-score-lbl { font-weight: 700; font-size: 0.9rem; }
.pg-findings { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pg-findings li { font-size: 0.8rem; padding-left: 22px; position: relative; color: var(--dz-text2); line-height: 1.4; }
.pg-findings li::before { position: absolute; left: 0; top: 0; }
.pgf-ok::before { content: '✅'; } .pgf-bad::before { content: '⛔'; } .pgf-warn::before { content: '⚠️'; } .pgf-info::before { content: 'ℹ️'; }
.pg-sugg { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pg-sugg li { font-size: 0.82rem; color: var(--dz-text2); line-height: 1.45; padding: 8px 11px; background: rgba(var(--dz-fg-rgb),0.04); border-radius: 8px; border-left: 3px solid #8b5cf6; }
.pg-opt-btn { width: 100%; }
.pg-opt-note { margin-top: 10px; }
.pg-opt-prog { height: 6px; border-radius: 4px; background: rgba(var(--dz-fg-rgb),0.1); overflow: hidden; }
.pg-opt-prog > div { height: 100%; width: 0; background: linear-gradient(90deg,#8b5cf6,#06b6d4); border-radius: 4px; animation: pgprog 1s ease forwards; }
@keyframes pgprog { to { width: 100%; } }
.pg-opt-result { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 10px; padding: 12px 14px; }
.pg-opt-arrow { font-family: var(--font-title); font-size: 1.3rem; font-weight: 800; color: var(--dz-text); }
.pg-opt-arrow span { opacity: 0.5; margin: 0 4px; } .pg-opt-arrow b { color: var(--dz-green); }
.pg-opt-result p { font-size: 0.76rem; color: var(--dz-text2); margin-top: 6px; line-height: 1.5; }
.pg-bar-late { outline: 2px solid #f43f5e; outline-offset: -2px; }

/* =============================================================================
   PLÁNOVANIE VÝROBY — prepracovaný Gantt (profesionálny plánovač)
   ============================================================================= */
/* pruhy s menom zákazníka + progres + priorita */
#prodGanttChart .ug-bar { height: 28px; border-radius: 6px; padding-right: 4px; }
.pg-bar .ug-bar-lbl { font-size: 0.72rem; font-weight: 600; padding: 0 8px; }
.pg-bar-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,0.32); }
.pg-bar-prog i { display: block; height: 100%; background: rgba(var(--dz-fg-rgb),0.92); border-radius: 0 2px 0 0; }
.pg-bar-late { outline: 2px solid #f43f5e; outline-offset: -2px; }

/* vyťaženie pri pracovisku */
.ug-eq-load { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ug-eq-loadbar { flex: 1; height: 5px; border-radius: 3px; background: rgba(var(--dz-fg-rgb),0.12); overflow: hidden; min-width: 40px; }
.ug-eq-loadbar i { display: block; height: 100%; border-radius: 3px; }
.ug-eq-loadbar i.pgl-lo { background: #22d3ee; } .ug-eq-loadbar i.pgl-mid { background: #f59e0b; } .ug-eq-loadbar i.pgl-hi { background: #ef4444; }
.ug-eq-loadval { font-size: 0.64rem; color: #94a3b8; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* legenda fáz */
.pg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; padding: 10px 14px; background: rgba(var(--dz-fg-rgb),0.03); border: 1px solid rgba(var(--dz-fg-rgb),0.08); border-radius: 10px; font-size: 0.74rem; color: var(--dz-text2); }
.pg-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.pg-leg-item i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pg-leg-note { margin-left: auto; color: #94a3b8; font-style: italic; }

/* kompaktnejší AI panel + scrollovateľné návrhy */
.pg-ai-card { padding: 14px 16px; }
.pg-score { font-size: 2.2rem; }
.pg-sugg { max-height: 168px; overflow-y: auto; margin-bottom: 12px; scrollbar-width: thin; }
.pg-sugg li { font-size: 0.78rem; padding: 7px 10px; }
.pg-sugg-more { background: transparent !important; border-left: none !important; color: #94a3b8 !important; font-style: italic; padding-left: 2px !important; }
.pg-findings li { font-size: 0.78rem; }

/* =============================================================================
   RIADENIE VÝROBY (MES / dielenská vrstva)
   ============================================================================= */
.mfg-page { background: var(--hdr-bg); }
.mfg-inner { max-width: 1280px; margin: 0 auto; padding: 28px 24px 52px; }

.mfg-section-hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 0 12px; }
.mfg-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.mfg-leg { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--dz-text2); }

/* stavové bodky */
.wc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.wc-running     { background: #10b981; box-shadow: 0 0 7px #10b981; animation: pulseDot 2s ease-in-out infinite; }
.wc-setup       { background: #8b5cf6; }
.wc-idle        { background: #94a3b8; }
.wc-maintenance { background: #f59e0b; }
.wc-down        { background: #ef4444; box-shadow: 0 0 7px #ef4444; }

/* dielenská tabuľa */
.mfg-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.wc-card {
  background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-top: 3px solid #94a3b8; border-radius: 13px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; transition: border-color .16s, transform .16s;
}
.wc-card:hover { transform: translateY(-2px); }
.wc-status-running     { border-top-color: #10b981; }
.wc-status-setup       { border-top-color: #8b5cf6; }
.wc-status-idle        { border-top-color: #94a3b8; }
.wc-status-maintenance { border-top-color: #f59e0b; }
.wc-status-down        { border-top-color: #ef4444; }
.wc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wc-name-wrap { display: flex; flex-direction: column; min-width: 0; }
.wc-name { font-weight: 700; font-size: 0.95rem; color: var(--dz-text); }
.wc-meta { font-size: 0.7rem; color: #94a3b8; margin-top: 2px; }
.wc-edit { background: none; border: none; color: #64748b; cursor: pointer; font-size: 0.9rem; padding: 2px 4px; border-radius: 6px; transition: color .14s, background .14s; }
.wc-edit:hover { color: var(--dz-text2); background: rgba(var(--dz-fg-rgb),0.08); }
.wc-status-row { display: flex; align-items: center; gap: 8px; }
.wc-status-sel { flex: 1; background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.14); color: var(--dz-text2); border-radius: 7px; padding: 5px 8px; font-family: var(--font); font-size: 0.78rem; cursor: pointer; }
.wc-since { font-size: 0.66rem; color: #64748b; white-space: nowrap; }
.wc-body { display: flex; flex-direction: column; gap: 4px; }
.wc-line { display: flex; justify-content: space-between; gap: 8px; font-size: 0.78rem; color: var(--dz-text2); }
.wc-line b { color: var(--dz-text2); font-weight: 600; }

/* spodný grid */
.mfg-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; margin-top: 22px; }
.mfg-card { background: rgba(var(--dz-fg-rgb),0.03); border: 1px solid rgba(var(--dz-fg-rgb),0.09); border-radius: 14px; padding: 16px; }
.mfg-card-hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mfg-card-hdr .prod-lines-title { margin-bottom: 0; }

/* tabuľka výkazov */
.mfg-table td { font-size: 0.8rem; }
.mfg-shift { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(99,102,241,0.18); color: var(--dz-purple); font-weight: 700; font-size: 0.74rem; }
.mfg-sub { font-size: 0.68rem; color: #94a3b8; margin-top: 2px; }
.mfg-nok { color: var(--dz-red); }
.mfg-oee-cell { display: flex; align-items: center; gap: 8px; }
.mfg-oee-badge { font-weight: 700; font-size: 0.78rem; padding: 2px 8px; border-radius: 100px; }
.mfg-apq { font-size: 0.66rem; color: #64748b; font-variant-numeric: tabular-nums; }
.mfg-row-edit { color: #475569; text-align: center; }
.mfg-table tbody tr:hover .mfg-row-edit { color: var(--dz-text2); }
.oee-good { color: var(--dz-green); } .mfg-oee-badge.oee-good { background: rgba(16,185,129,0.16); }
.oee-mid  { color: var(--dz-amber); } .mfg-oee-badge.oee-mid  { background: rgba(245,158,11,0.16); }
.oee-low  { color: var(--dz-red); } .mfg-oee-badge.oee-low  { background: rgba(239,68,68,0.16); }

/* prestoje + OEE pracovísk */
.mfg-dt-row, .mfg-wco-row { margin-bottom: 11px; }
.mfg-dt-top, .mfg-wco-top { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--dz-text2); margin-bottom: 5px; }
.mfg-dt-top b, .mfg-wco-top b { color: var(--dz-text); font-variant-numeric: tabular-nums; }
.mfg-dt-track { height: 7px; border-radius: 5px; background: rgba(var(--dz-fg-rgb),0.07); overflow: hidden; }
.mfg-dt-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #f59e0b, #ef4444); }
.mfg-wco-fill { height: 100%; border-radius: 5px; background: #10b981; }
.mfg-wco-fill.oee-mid { background: #f59e0b; } .mfg-wco-fill.oee-low { background: #ef4444; }
.mfg-empty-sm { font-size: 0.8rem; color: #64748b; padding: 8px 0; }

/* OEE náhľad v modale výkazu */
.mfg-oee-preview { margin: 4px 0 8px; }
.mfg-prev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mfg-prev-cell { background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 9px; padding: 8px; text-align: center; }
.mfg-prev-cell span { display: block; font-size: 0.64rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.mfg-prev-cell b { font-size: 1.05rem; color: var(--dz-text2); font-family: var(--font-title); }
.mfg-prev-oee { border-color: rgba(16,185,129,0.4); }
.mfg-prev-oee.oee-mid { border-color: rgba(245,158,11,0.4); } .mfg-prev-oee.oee-low { border-color: rgba(239,68,68,0.4); }

@media (max-width: 900px) { .mfg-grid { grid-template-columns: 1fr; } }

/* ── Normované operácie / technologické postupy ── */
.modal-lg { max-width: 900px; }
.mfg-rt-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
.mfg-rt-list { display: flex; flex-direction: column; gap: 8px; }
.rt-item { text-align: left; background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-left: 3px solid transparent; border-radius: 11px; padding: 11px 13px; cursor: pointer; font-family: inherit; color: var(--dz-text2); display: flex; flex-direction: column; gap: 3px; transition: border-color .14s, background .14s; }
.rt-item:hover { background: rgba(var(--dz-fg-rgb),0.07); }
.rt-item.active { border-left-color: var(--dz-cyan); background: rgba(0,212,255,0.08); }
.rt-item-name { font-weight: 700; font-size: 0.88rem; color: var(--dz-text); }
.rt-item-meta { font-size: 0.72rem; color: #94a3b8; }

.mfg-rt-detail { background: rgba(var(--dz-fg-rgb),0.03); border: 1px solid rgba(var(--dz-fg-rgb),0.09); border-radius: 14px; padding: 16px; min-width: 0; }
.rt-detail-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rt-detail-title { font-family: var(--font-title); font-size: 1.15rem; font-weight: 700; color: var(--dz-text); }
.rt-detail-sub { font-size: 0.78rem; color: #94a3b8; margin-top: 2px; }

.rt-ops-table-wrap { overflow-x: auto; border-radius: 10px; }
.rt-ops-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.rt-ops-table th { text-align: left; padding: 8px 10px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #94a3b8; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rt-ops-table td { padding: 7px 10px; border-bottom: 1px solid rgba(0,0,0,0.06); vertical-align: middle; }
.rt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-strong { font-weight: 700; }
.rt-code { font-family: 'Courier New', monospace; font-size: 0.76rem; white-space: nowrap; }
/* Detail na tmavej mfg stránke */
.rt-view th { border-bottom-color: rgba(var(--dz-fg-rgb),0.12); }
.rt-view td { color: var(--dz-text2); border-bottom-color: rgba(var(--dz-fg-rgb),0.06); }
.rt-view tbody tr:nth-child(even) td { background: rgba(var(--dz-fg-rgb),0.02); }
.rt-view .rt-code { color: var(--dz-blue); }
.rt-view .rt-strong { color: var(--dz-text); }
.rt-mach { color: var(--dz-amber); white-space: nowrap; }
.rt-opnote { color: #94a3b8; font-size: 0.76rem; }
.rt-ops-foot { margin-top: 10px; font-size: 0.85rem; color: var(--dz-text2); }
.rt-ops-foot strong { color: var(--dz-text); }

.rt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.rt-sub-card { background: rgba(var(--dz-fg-rgb),0.03); border: 1px solid rgba(var(--dz-fg-rgb),0.08); border-radius: 12px; padding: 13px; }
.rt-sub-h { font-size: 0.85rem; font-weight: 700; color: var(--dz-text); margin-bottom: 11px; }
.rt-line-row { margin-bottom: 10px; }
.rt-line-top { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--dz-text2); margin-bottom: 4px; gap: 8px; }
.rt-line-top b { color: var(--dz-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-line-track { height: 7px; border-radius: 5px; background: rgba(var(--dz-fg-rgb),0.07); overflow: hidden; }
.rt-line-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg,#00d4ff,#6366f1); }
.rt-line-sub { font-size: 0.68rem; color: #64748b; margin-top: 3px; }

.rt-calc-input { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.rt-calc-input label { font-size: 0.72rem; color: #94a3b8; }
.rt-calc-input input { width: 140px; background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.14); color: var(--dz-text2); border-radius: 7px; padding: 7px 9px; font-family: var(--font); }
.rt-calc-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.rt-calc-table th { text-align: left; font-size: 0.66rem; text-transform: uppercase; color: #94a3b8; padding: 5px 8px; }
.rt-calc-table td { padding: 5px 8px; color: var(--dz-text2); border-top: 1px solid rgba(var(--dz-fg-rgb),0.06); }
.rt-calc-table tfoot td { font-weight: 700; color: var(--dz-text); border-top: 1px solid rgba(var(--dz-fg-rgb),0.15); }

/* Editor operácií v modale (svetlé pozadie) */
.rt-ops-hdr { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; }
.rt-ops-title { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.rt-in { width: 100%; min-width: 56px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; font-family: var(--font); font-size: 0.8rem; color: var(--text); background: #fff; outline: none; }
.rt-in:focus { border-color: var(--border-focus); }
.rt-in-xs { min-width: 38px; width: 46px; }
.rt-in-sm { min-width: 88px; }
.rt-in-num { width: 64px; min-width: 54px; text-align: right; }
#rtModal .rt-ops-table th { color: var(--text-dim); border-bottom-color: var(--border); }
#rtModal .rt-ops-table td { border-bottom-color: var(--border); padding: 5px 6px; }
#rtModal .rt-strong { color: var(--text-bright); }
@media (max-width: 1000px) { .mfg-rt-layout { grid-template-columns: 1fr; } .rt-grid { grid-template-columns: 1fr; } }

/* ==============================
   WORKFLOW VÝROBY PRODUKTU (pwf) — tmavá stránka
   ============================== */
.pwf-page { background: var(--hdr-bg); }
.pwf-inner { max-width: 1240px; margin: 0 auto; padding: 22px 26px 40px; }
.pwf-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; margin-top: 18px; }
@media (max-width: 900px) { .pwf-layout { grid-template-columns: 1fr; } }

/* Zoznam produktov (vľavo) */
.pwf-list { display: flex; flex-direction: column; gap: 8px; }
.pwf-item { text-align: left; background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-left: 3px solid transparent; border-radius: 11px; padding: 11px 13px; cursor: pointer; font-family: inherit; color: var(--dz-text2); display: flex; flex-direction: column; gap: 5px; transition: border-color .14s, background .14s; }
.pwf-item:hover { background: rgba(var(--dz-fg-rgb),0.07); }
.pwf-item.active { border-left-color: var(--dz-cyan); background: rgba(0,212,255,0.08); }
.pwf-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pwf-item-code { font-weight: 700; font-size: 0.9rem; color: var(--dz-text); }
.pwf-item-pct { font-size: 0.72rem; font-weight: 700; color: #38bdf8; font-variant-numeric: tabular-nums; }
.pwf-item-name { font-size: 0.75rem; color: #94a3b8; }
.pwf-item-bar { height: 5px; border-radius: 4px; background: rgba(var(--dz-fg-rgb),0.08); overflow: hidden; }
.pwf-item-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg,#00d4ff,#22c55e); transition: width .2s; }
.pwf-item-meta { font-size: 0.7rem; color: #64748b; }

/* Detail workflow (vpravo) */
.pwf-detail { background: rgba(var(--dz-fg-rgb),0.03); border: 1px solid rgba(var(--dz-fg-rgb),0.09); border-radius: 14px; padding: 18px; min-width: 0; }
.pwf-detail-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pwf-detail-title { font-family: var(--font-title); font-size: 1.2rem; font-weight: 700; color: var(--dz-text); }
.pwf-detail-sub { font-size: 0.78rem; color: #94a3b8; margin-top: 2px; }
.pwf-detail-bar { height: 7px; border-radius: 5px; background: rgba(var(--dz-fg-rgb),0.07); overflow: hidden; margin-bottom: 18px; }
.pwf-detail-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg,#00d4ff,#22c55e); transition: width .2s; }
.pwf-detail-note { margin-top: 16px; font-size: 0.82rem; color: var(--dz-text2); background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.08); border-radius: 10px; padding: 10px 12px; }

/* Kroky ako vertikálny stepper */
.pwf-steps { display: flex; flex-direction: column; }
.pwf-step { display: flex; gap: 14px; }
.pwf-step-rail { display: flex; flex-direction: column; align-items: center; }
.pwf-step-dot { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(var(--dz-fg-rgb),0.18); background: rgba(var(--dz-fg-rgb),0.06); color: var(--dz-text2); font-size: 0.82rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.pwf-step-dot:hover { transform: scale(1.08); }
.pwf-step-line { flex: 1; width: 2px; min-height: 22px; background: rgba(var(--dz-fg-rgb),0.14); margin: 3px 0; }
.pwf-step-body { flex: 1; padding-bottom: 18px; min-width: 0; }
.pwf-step-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pwf-step-name { font-size: 0.95rem; font-weight: 600; color: var(--dz-text); }
.pwf-step-badge { font-size: 0.68rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.pwf-step-sub { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.pwf-step-station { font-size: 0.75rem; color: #94a3b8; }
.pwf-step-note { font-size: 0.75rem; color: #7c8aa3; }

/* Stavy krokov — farby dotu, čiary a badge */
.pwf-step.pwf-st-pending .pwf-step-dot { border-color: rgba(var(--dz-fg-rgb),0.2); background: rgba(var(--dz-fg-rgb),0.06); color: #94a3b8; }
.pwf-step.pwf-st-active .pwf-step-dot { border-color: #f59e0b; background: rgba(245,158,11,0.18); color: var(--dz-amber); box-shadow: 0 0 0 4px rgba(245,158,11,0.12); }
.pwf-step.pwf-st-done .pwf-step-dot { border-color: #22c55e; background: rgba(34,197,94,0.22); color: var(--dz-green); }
.pwf-step.pwf-st-done .pwf-step-line { background: rgba(34,197,94,0.4); }
.pwf-step-badge.pwf-st-pending { color: var(--dz-text2); background: rgba(var(--dz-fg-rgb),0.08); border-color: rgba(var(--dz-fg-rgb),0.14); }
.pwf-step-badge.pwf-st-active { color: var(--dz-amber); background: rgba(245,158,11,0.16); border-color: rgba(245,158,11,0.4); }
.pwf-step-badge.pwf-st-done { color: var(--dz-green); background: rgba(34,197,94,0.16); border-color: rgba(34,197,94,0.4); }

/* Modal — editor krokov (svetlé pozadie .modal-box) */
.pwf-steps-hdr { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 6px; }
.pwf-steps-hdr label { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.pwf-steps-hint { font-size: 0.72rem; color: var(--text-dim); }
.pwf-steps-editor { overflow-x: auto; }
.pwf-steps-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.pwf-steps-table th { text-align: left; padding: 6px 8px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); border-bottom: 1px solid var(--border); white-space: nowrap; }
.pwf-steps-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pwf-step-idx { text-align: center; color: var(--text-dim); font-weight: 700; font-variant-numeric: tabular-nums; }
.pwf-in { width: 100%; min-width: 90px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-family: var(--font); font-size: 0.82rem; color: var(--text); background: #fff; outline: none; }
.pwf-in:focus { border-color: var(--border-focus); }
.pwf-step-ops { white-space: nowrap; text-align: right; }
.pwf-mini { width: 24px; height: 24px; border: 1px solid var(--border); background: #fff; border-radius: 6px; color: var(--text-dim); cursor: pointer; font-size: 0.8rem; line-height: 1; }
.pwf-mini:hover:not(:disabled) { background: var(--page-bg); color: var(--text); }
.pwf-mini:disabled { opacity: 0.35; cursor: default; }

/* ── Rozvrh výroby — operačný Gantt (pracoviská × operácie) ── */
.mfg-gantt-tools { display: flex; align-items: center; gap: 6px; }
.mfg-gantt-info { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 10px; }
.mfg-gi { font-size: 0.78rem; color: #94a3b8; }
.mfg-gi b { color: var(--dz-text); font-variant-numeric: tabular-nums; }
.mfg-gi-bn b { color: var(--dz-amber); }

.mfg-gantt .ug-corner, .mfg-gantt .ug-eq { width: 190px; }
.mfg-gantt-row { height: 34px; }
.mfg-lane { gap: 9px; }
.mfg-lane-bar { width: 7px; height: 24px; border-radius: 3px; background: rgba(var(--dz-fg-rgb),0.08); flex-shrink: 0; display: flex; align-items: flex-end; overflow: hidden; }
.mfg-lane-fill { width: 100%; background: linear-gradient(180deg,#00d4ff,#6366f1); border-radius: 3px; }
.mfg-lane-ext { font-size: 0.58rem; color: #64748b; border: 1px solid rgba(var(--dz-fg-rgb),0.15); border-radius: 4px; padding: 0 3px; }

.mfg-opbar { border-left: none; }
.mfg-opbar-seq { font-size: 0.6rem; font-weight: 700; background: rgba(0,0,0,0.32); color: #fff; border-radius: 3px; padding: 0 3px; margin: 0 2px 0 4px; flex-shrink: 0; line-height: 1.4; }
.mfg-opbar-mach::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(0,0,0,0.24) 0 5px, transparent 5px 10px); pointer-events: none; }
.mfg-opbar-dim { opacity: 0.26; }

.mfg-gantt-legend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.mfg-leg-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 100px; padding: 4px 11px; font-size: 0.74rem; color: var(--dz-text2); cursor: pointer; font-family: inherit; transition: border-color .14s, background .14s; }
.mfg-leg-chip:hover { background: rgba(var(--dz-fg-rgb),0.08); }
.mfg-leg-chip.active { border-color: var(--dz-cyan); background: rgba(0,212,255,0.1); color: var(--dz-text); }
.mfg-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.mfg-leg-prod { color: #64748b; }

.mfg-gantt-unsched { margin-top: 8px; }
.mfg-gantt-warn { font-size: 0.78rem; color: var(--dz-amber); background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25); border-radius: 9px; padding: 8px 12px; }

.mfg-gantt-flow { background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.mfg-flow-hdr { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--dz-text); margin-bottom: 10px; flex-wrap: wrap; }
.mfg-flow-tot { margin-left: auto; font-size: 0.76rem; color: #94a3b8; }
.mfg-flow-chain { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; }
.mfg-flow-step { display: flex; flex-direction: column; gap: 2px; background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 9px; padding: 7px 10px; min-width: 110px; }
.mfg-flow-step.mach { border-color: rgba(252,211,77,0.35); background: rgba(252,211,77,0.06); }
.mfg-flow-line { font-size: 0.66rem; color: var(--dz-cyan); text-transform: uppercase; letter-spacing: 0.03em; }
.mfg-flow-op { font-size: 0.78rem; color: var(--dz-text); }
.mfg-flow-dur { font-size: 0.68rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.mfg-flow-arr { align-self: center; color: #475569; font-size: 1rem; }

@media (max-width: 720px) { .mfg-gantt .ug-corner, .mfg-gantt .ug-eq { width: 130px; } }

/* ── Procesný Gantt: os Y = operácie, os X = čas (nadväznosť) ── */
.mfg-gantt-process .ug-corner, .mfg-gantt-process .ug-eq { width: 220px; }
.mfg-prow { height: 32px; }
.mfg-plabel { gap: 9px; }
.mfg-pseq { width: 22px; height: 22px; border-radius: 6px; background: rgba(99,102,241,0.22); color: var(--dz-purple); font-weight: 700; font-size: 0.74rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mfg-plabel .ug-eq-name { font-size: 0.78rem; }
.mfg-pline { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.mfg-pbar { box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
/* spojnica nadväznosti — operácia začína tam, kde predošlá skončila (finish-to-start) */
.mfg-plink { position: absolute; top: -14px; height: 18px; width: 0; border-left: 2px dashed rgba(var(--dz-fg-rgb),0.45); z-index: 1; pointer-events: none; }
.mfg-plink::after { content: '▾'; position: absolute; bottom: -7px; left: -5px; font-size: 9px; color: rgba(var(--dz-fg-rgb),0.55); }
@media (max-width: 720px) { .mfg-gantt-process .ug-corner, .mfg-gantt-process .ug-eq { width: 150px; } }

/* ── Zoznam expedovaných zákaziek a objednávok ── */
.mfg-ship-tools { display: flex; align-items: center; gap: 12px; }
.mfg-ship-count { font-size: 0.78rem; color: #94a3b8; white-space: nowrap; }
.mfg-shipped { margin-top: 4px; }
.mfg-ship-table { width: 100%; }
.mfg-ship-table td { font-size: 0.82rem; }

/* ── Changelog (časová os zmien) ── */
.changelog-page { background: var(--hdr-bg); }
.changelog-inner { max-width: 880px; margin: 0 auto; padding: 28px 24px 60px; }
#clCurrentVer { color: var(--dz-cyan); font-weight: 700; }
.changelog-list { margin-top: 8px; }
.cl-entry { display: flex; gap: 14px; }
.cl-side { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 16px; }
.cl-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; box-shadow: 0 0 0 4px rgba(var(--dz-fg-rgb),0.04); }
.cl-line { flex: 1; width: 2px; background: rgba(var(--dz-fg-rgb),0.1); margin: 4px 0; }
.cl-body { flex: 1; min-width: 0; padding-bottom: 22px; }
.cl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cl-ver { font-family: var(--font-title); font-size: 1.15rem; font-weight: 800; color: var(--dz-text); }
.cl-tag { font-size: 0.68rem; font-weight: 700; padding: 2px 9px; border-radius: 100px; }
.cl-now { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dz-green); background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.35); padding: 2px 8px; border-radius: 100px; }
.cl-date { font-size: 0.76rem; color: #94a3b8; margin-left: auto; }
.cl-items { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 0; }
.cl-items li { position: relative; padding-left: 18px; font-size: 0.86rem; color: var(--dz-text2); line-height: 1.5; }
.cl-items li::before { content: '▸'; position: absolute; left: 2px; top: 0; color: var(--dz-cyan); }
.cl-items li strong { color: var(--dz-text); font-weight: 700; }
.cl-items li code { background: rgba(var(--dz-fg-rgb),0.1); border: 1px solid rgba(var(--dz-fg-rgb),0.14); border-radius: 4px; padding: 1px 5px; font-size: 0.82em; color: var(--dz-cyan); }
.cl-entry.cl-latest .cl-body { background: rgba(0,212,255,0.05); border: 1px solid rgba(0,212,255,0.18); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
@media (max-width: 600px) { .cl-date { margin-left: 0; } }

/* =============================================================================
   PODÚLOHY (checklist) + PREDAJ ANALYTIKA
   ============================================================================= */
/* Odznak počtu podúloh na kartách úloh */
.task-subbadge { background: rgba(99,102,241,0.2); color: var(--dz-purple); padding: 1px 8px; border-radius: 100px; font-weight: 600; }
.task-subbadge.all { background: rgba(16,185,129,0.18); color: var(--dz-green); }

/* Inline checklist v zozname úloh (tmavé pozadie) */
.task-sub-inline { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed rgba(var(--dz-fg-rgb),0.08); }
.task-sub-il { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: rgba(var(--dz-fg-rgb),0.72); cursor: pointer; padding: 2px 0; }
.task-sub-il input { accent-color: var(--dz-cyan); cursor: pointer; width: 14px; height: 14px; flex-shrink: 0; }
.task-sub-il.done span { text-decoration: line-through; color: rgba(var(--dz-fg-rgb),0.4); }

/* Editor podúloh v modale (svetlé pozadie) */
.tk-sub-count { font-weight: 500; color: var(--text-dim); font-size: 0.78rem; }
.tk-prog-hint { font-size: 0.68rem; color: var(--text-dim); margin-top: 4px; }
.tk-sub-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.tk-scroll-list { max-height: 128px; overflow-y: auto; }
.tk-scroll-list::-webkit-scrollbar { width: 4px; }
.tk-scroll-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.tk-scroll-list-lg { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.tk-scroll-list-lg::-webkit-scrollbar { width: 4px; }
.tk-scroll-list-lg::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.tk-upd-item { background: var(--page-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; }
.tk-upd-meta { font-size: 0.68rem; color: var(--text-dim); margin-bottom: 3px; }
.tk-upd-meta strong { color: var(--text); }
.tk-upd-text { font-size: 0.82rem; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.tk-sub-empty { font-size: 0.78rem; color: var(--text-xdim); padding: 4px 0; }
.tk-sub-item { display: flex; align-items: center; gap: 8px; }
.tk-sub-item.done .tk-sub-title { text-decoration: line-through; color: var(--text-xdim); }
.tk-sub-check { width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; border: 1.5px solid var(--border); background: #fff; color: #fff; cursor: pointer; font-size: 0.78rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .14s, border-color .14s; }
.tk-sub-item.done .tk-sub-check { background: var(--success); border-color: var(--success); }
.tk-sub-title { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-family: var(--font); font-size: 0.84rem; color: var(--text); background: #fff; outline: none; }
.tk-sub-title:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(8,145,178,0.1); }
.tk-sub-del { background: none; border: none; color: var(--text-xdim); cursor: pointer; padding: 4px 7px; border-radius: 6px; flex-shrink: 0; font-size: 0.85rem; }
.tk-sub-del:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
.tk-sub-add { display: flex; gap: 8px; }
.tk-sub-add input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; font-family: var(--font); font-size: 0.84rem; color: var(--text); background: #fff; outline: none; }
.tk-sub-add input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(8,145,178,0.1); }

/* ============================================================
   TASK MODAL — tmavá téma + logicky zoskupené sekcie
   ============================================================ */
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-row-3 { grid-template-columns: 1fr; } }

#taskModal .modal-box { background: #131c35; border-color: rgba(var(--dz-fg-rgb),0.1); }
#taskModal .modal-header { background: rgba(var(--dz-fg-rgb),0.04); border-color: rgba(var(--dz-fg-rgb),0.08); }
#taskModal .modal-header h2 { color: var(--dz-text); }
#taskModal .modal-close { color: rgba(var(--dz-fg-rgb),0.5); }
#taskModal .modal-close:hover { background: rgba(239,68,68,0.15); color: #f87171; }
#taskModal .modal-footer { background: rgba(var(--dz-fg-rgb),0.04); border-color: rgba(var(--dz-fg-rgb),0.08); }

#taskModal .form-group label { color: rgba(var(--dz-fg-rgb),0.55); }
#taskModal .form-group input[type="text"],
#taskModal .form-group input[type="date"],
#taskModal .form-group select,
#taskModal .form-group textarea,
#taskModal .tk-sub-add input,
#taskModal .tk-sub-title {
  background: rgba(var(--dz-fg-rgb),0.08); border-color: rgba(var(--dz-fg-rgb),0.14); color: var(--dz-text);
}
#taskModal .form-group input::placeholder,
#taskModal .tk-sub-add input::placeholder { color: rgba(var(--dz-fg-rgb),0.28); }
#taskModal .form-group select option { background: #1e2d4d; color: var(--dz-text); }
#taskModal .form-group input:focus, #taskModal .form-group select:focus,
#taskModal .tk-sub-add input:focus, #taskModal .tk-sub-title:focus {
  border-color: rgba(8,145,178,0.7); box-shadow: 0 0 0 3px rgba(8,145,178,0.16);
}
#taskModal .tk-prog-hint { color: rgba(var(--dz-fg-rgb),0.4); }
#taskModal .tk-sub-count { color: rgba(var(--dz-fg-rgb),0.45); }
#taskModal .tk-sub-empty { color: rgba(var(--dz-fg-rgb),0.35); }
#taskModal .tk-sub-check { background: rgba(var(--dz-fg-rgb),0.08); border-color: rgba(var(--dz-fg-rgb),0.2); }
#taskModal .tk-sub-del { color: rgba(var(--dz-fg-rgb),0.4); }
#taskModal .tk-upd-item { background: rgba(var(--dz-fg-rgb),0.05); border-color: rgba(var(--dz-fg-rgb),0.1); }
#taskModal .tk-upd-meta { color: rgba(var(--dz-fg-rgb),0.4); }
#taskModal .tk-upd-meta strong { color: var(--dz-text); }
#taskModal .tk-upd-text { color: rgba(var(--dz-fg-rgb),0.85); }

/* Stav / Priorita — klikacie chipy namiesto <select>, priama zmena hodnoty
   jedným klikom (dark zone — #taskModal má tmavé pozadie #131c35). */
.tk-chip-group { display: flex; flex-wrap: wrap; gap: 7px; }
.tk-chip {
  padding: 7px 14px; border-radius: 100px; font-size: 0.82rem; font-weight: 600;
  font-family: var(--font); cursor: pointer; touch-action: manipulation;
  background: rgba(var(--dz-fg-rgb),0.06); border: 1.5px solid rgba(var(--dz-fg-rgb),0.14);
  color: rgba(var(--dz-fg-rgb),0.6); transition: all .15s ease;
}
.tk-chip:hover { background: rgba(var(--dz-fg-rgb),0.12); color: var(--dz-text2); }
.tk-chip:focus-visible { outline: 2px solid var(--dz-cyan); outline-offset: 2px; }
.tk-chip.active { color: #fff; border-color: transparent; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
/* Stav — rovnaké farby ako badge v Grid pohľade (.task-grid-status-*) */
.tk-chip-todo.active       { background: #64748b; }
.tk-chip-inprogress.active { background: #3b82f6; }
.tk-chip-blocked.active    { background: #ef4444; }
.tk-chip-review.active     { background: #eab308; color: #131c35; }
.tk-chip-done.active       { background: #10b981; }
.tk-chip-cancelled.active  { background: rgba(var(--dz-fg-rgb),0.3); }
/* Priorita — rovnaké farby ako TK_PRIO */
.tk-chip-prio-low.active      { background: #64748b; }
.tk-chip-prio-normal.active   { background: #3b82f6; }
.tk-chip-prio-high.active     { background: #ef4444; }
.tk-chip-prio-critical.active { background: #b91c1c; }

/* Sekčné nadpisy — vizuálne oddelenie logických skupín polí */
.tk-sec-lbl {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(var(--dz-fg-rgb),0.4); margin: 16px 0 -3px; padding-top: 14px;
  border-top: 1px solid rgba(var(--dz-fg-rgb),0.08); display: flex; align-items: center; gap: 6px;
}
.tk-sec-lbl-first { margin-top: 0; padding-top: 0; border-top: none; }
.tk-field-hint-inline { font-weight: 500; text-transform: none; letter-spacing: 0; color: rgba(var(--dz-fg-rgb),0.32); font-size: 0.72rem; }
.tk-title-input { font-size: 1rem; font-weight: 600; }

/* Banner pri prezeraní úlohy, kde je používateľ len zadávateľ (vidí, needituje) */
.tk-readonly-banner {
  display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600;
  color: #fbbf24; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3);
  border-radius: var(--radius); padding: 9px 12px;
}
#taskModal.tk-readonly .modal-body input,
#taskModal.tk-readonly .modal-body select,
#taskModal.tk-readonly .modal-body textarea,
#taskModal.tk-readonly .modal-body button { pointer-events: none; opacity: 0.55; }

/* WIKI FOS — modaly (Nový/Upraviť záznam, Nová kategória), dark — zladené so stránkou WIKI */
#productModal .modal-box, #categoryModal .modal-box { background: #131c35; border-color: rgba(var(--dz-fg-rgb),0.1); }
#productModal .modal-header, #categoryModal .modal-header { background: rgba(var(--dz-fg-rgb),0.04); border-color: rgba(var(--dz-fg-rgb),0.08); }
#productModal .modal-header h2, #categoryModal .modal-header h2 { color: var(--dz-text); }
#productModal .modal-close, #categoryModal .modal-close { color: rgba(var(--dz-fg-rgb),0.5); }
#productModal .modal-close:hover, #categoryModal .modal-close:hover { background: rgba(239,68,68,0.15); color: #f87171; }
#productModal .modal-footer, #categoryModal .modal-footer { background: rgba(var(--dz-fg-rgb),0.04); border-color: rgba(var(--dz-fg-rgb),0.08); }

#productModal .form-group label, #categoryModal .form-group label { color: rgba(var(--dz-fg-rgb),0.55); }
#productModal .form-group input[type="text"],
#productModal .form-group input[type="color"],
#productModal .form-group select,
#categoryModal .form-group input[type="text"],
#categoryModal .form-group input[type="color"] {
  background: rgba(var(--dz-fg-rgb),0.08); border-color: rgba(var(--dz-fg-rgb),0.14); color: var(--dz-text);
}
#productModal .form-group input::placeholder, #categoryModal .form-group input::placeholder { color: rgba(var(--dz-fg-rgb),0.28); }
#productModal .form-group select option { background: #1e2d4d; color: var(--dz-text); }
#productModal .form-group input:focus, #productModal .form-group select:focus,
#categoryModal .form-group input:focus {
  border-color: rgba(8,145,178,0.7); box-shadow: 0 0 0 3px rgba(8,145,178,0.16);
}
#productModal .status-opt { color: rgba(var(--dz-fg-rgb),0.7); }
#productModal .input-with-btn .btn-sm { flex-shrink: 0; }

/* Predaj — nástroje v hlavičke sekcie + stĺpec zisku */
.mgmt-sales-tools { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.an-bar.profit { background: #10b981; }
.an-empty { font-size: 0.85rem; color: #94a3b8; padding: 10px; text-align: center; }

/* =============================================================================
   UI/UX POLISH — prístupnosť & jemné vylepšenia (WCAG-friendly)
   ============================================================================= */
/* Viditeľný focus ring LEN pri navigácii klávesnicou (myš ho neukáže) */
:focus-visible {
  outline: 2px solid var(--ui-accent, var(--border-focus, #0891b2));
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
.nav-link:focus-visible,
.asb-link:focus-visible,
.ql-chip:focus-visible,
.hdr-icon-btn:focus-visible { outline-offset: 3px; }

/* Konzistentné zvýraznenie vybraného textu */
::selection { background: rgba(8,145,178,0.22); }

/* Jemné, tenké skrolovacie lišty v celej aplikácii (dedí sa do kontajnerov) */
html { scrollbar-width: thin; scrollbar-color: rgba(120,130,150,0.45) transparent; }

/* Rešpektuj systémové nastavenie „obmedziť pohyb" (vestibulárna citlivosť) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   UX POLISH v1 — Toasty, štýlovaný confirm, sticky/sortable tabuľky, breadcrumbs
   ============================================================================= */
/* Toasty */
.toast-wrap { position: fixed; top: calc(var(--header-h) + 12px); right: 16px; z-index: 4000; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  background: #131c33; color: var(--dz-text); border: 1px solid rgba(var(--dz-fg-rgb),0.12);
  border-left: 3px solid #3b82f6; border-radius: 11px; padding: 12px 12px 12px 13px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.45); font-size: 0.85rem; line-height: 1.4;
  animation: toastIn .24s cubic-bezier(.2,.9,.3,1.2);
}
.toast-out { animation: toastOut .2s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px); } }
.toast-ico { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; margin-top: 1px; }
.toast-msg { flex: 1; white-space: pre-line; min-width: 0; }
.toast-x { background: none; border: none; color: rgba(var(--dz-fg-rgb),0.4); cursor: pointer; font-size: 0.8rem; padding: 0 2px; flex-shrink: 0; transition: color .15s; }
.toast-x:hover { color: #fff; }
.toast-success { border-left-color: #10b981; } .toast-success .toast-ico { background: rgba(16,185,129,0.2); color: var(--dz-green); }
.toast-error   { border-left-color: #ef4444; } .toast-error .toast-ico   { background: rgba(239,68,68,0.2); color: var(--dz-red); }
.toast-warn    { border-left-color: #f59e0b; } .toast-warn .toast-ico    { background: rgba(245,158,11,0.2); color: var(--dz-amber); }
.toast-info    { border-left-color: var(--dz-cyan); } .toast-info .toast-ico    { background: rgba(0,212,255,0.18); color: var(--dz-cyan); }

/* Štýlovaný confirm */
.modal-confirm { max-width: 420px; }
.confirm-body { display: flex; gap: 14px; padding: 22px 22px 16px; align-items: flex-start; }
.confirm-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; background: rgba(8,145,178,0.12); color: var(--accent); }
.confirm-ico.danger { background: rgba(239,68,68,0.12); color: var(--danger); }
.confirm-msg { font-size: 0.92rem; color: var(--text); line-height: 1.5; margin: 4px 0 0; white-space: pre-line; }
.btn-danger-solid { background: var(--danger); color: #fff; border: none; padding: 9px 18px; border-radius: var(--radius); font-family: var(--font); font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: filter .15s; }
.btn-danger-solid:hover { filter: brightness(1.08); }

/* Sticky + sortovateľné hlavičky tabuliek */
.prod-table thead th, .rt-ops-table.rt-view thead th, .mfg-table thead th { position: sticky; top: 0; z-index: 1; background: #131c33; }
table.sortable th[data-sortable] { cursor: pointer; user-select: none; white-space: nowrap; }
table.sortable th[data-sortable]:hover { color: var(--dz-text2); }
table.sortable th[data-sortable]::after { content: '⇅'; opacity: 0.3; margin-left: 5px; font-size: 0.8em; }
table.sortable th.sort-asc::after { content: '↑'; opacity: 0.9; }
table.sortable th.sort-desc::after { content: '↓'; opacity: 0.9; }

/* WIKI breadcrumbs */
.wiki-crumbs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 0.82rem; color: rgba(var(--dz-fg-rgb),0.5); margin-bottom: 14px; }
.wiki-crumbs a { color: var(--accent); text-decoration: none; cursor: pointer; }
.wiki-crumbs a:hover { text-decoration: underline; }
.wiki-crumbs .crumb-sep { opacity: 0.4; }
.wiki-crumbs .crumb-cur { color: var(--dz-text); font-weight: 600; }

/* Zoskupenie úloh podľa projektu + zákazníka */
.task-group { margin-bottom: 18px; }
.task-group-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px 8px; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1); margin-bottom: 9px; }
.task-group-name { font-weight: 700; font-size: 0.9rem; color: var(--dz-text); }
.task-group-count { font-size: 0.72rem; color: #94a3b8; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.task-group-body { display: flex; flex-direction: column; gap: 8px; }
.task-grip-off { opacity: 0.22; cursor: default; }
#taskGroupBtn.hidden { display: none; }

/* Externé (Outlook) udalosti v kalendári + správa ICS feedov */
.cal-ev-ext { font-style: normal; }
.cal-ev-allday.cal-ev-ext { box-shadow: inset 0 0 0 1.5px rgba(var(--dz-fg-rgb),0.45); }
.cal-ev-timed.cal-ev-ext .cal-ev-dot { box-shadow: 0 0 0 2px rgba(var(--dz-fg-rgb),0.3); }
.cal-more { font-weight: 600; }
.ics-help { background: var(--accent-light, #e0f2fe); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 0.82rem; color: var(--text); margin-bottom: 14px; }
.ics-help ol { margin: 6px 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ics-help em { color: var(--accent2); font-style: normal; font-weight: 600; }
.ics-note { margin-top: 8px; color: var(--text-dim); font-size: 0.78rem; }
.ics-test { font-size: 0.8rem; margin: 6px 0 2px; min-height: 18px; }
.ics-test.ok { color: var(--success); } .ics-test.err { color: var(--danger); }
.ics-feed-list { margin-top: 10px; }
.ics-feed-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 6px; }
.ics-empty { font-size: 0.8rem; color: var(--text-xdim); }
.ics-feed { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
.ics-feed-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.ics-feed-label { flex: 1; font-size: 0.85rem; color: var(--text); word-break: break-word; }
.ics-feed-del { background: none; border: none; color: var(--text-xdim); cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 0.85rem; }
.ics-feed-del:hover { color: var(--danger); background: rgba(239,68,68,0.1); }

/* =============================================================================
   KALENDÁR — pohľady Týždeň/Deň (časová mriežka), filter, zoom, rozbalenie
   ============================================================================= */
.cal-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Zdroje kalendára — farebné prepínacie chipy (klik = zobraziť/skryť, dvojklik = iba tento) */
.cal-src-bar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 12px; }
.cal-src-bar:empty { display: none; }
.cal-src-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.14);
  border-radius: 100px; padding: 5px 12px; font-size: 0.78rem; font-weight: 600;
  color: var(--dz-text2); cursor: pointer; user-select: none;
  transition: background .12s ease, opacity .12s ease, border-color .12s ease;
}
.cal-src-chip:hover { background: rgba(var(--dz-fg-rgb),0.09); border-color: rgba(var(--dz-fg-rgb),0.26); }
.cal-src-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--src-c, #7c3aed); box-shadow: 0 0 6px var(--src-c, #7c3aed); flex: none; }
.cal-src-n { font-size: 0.68rem; font-weight: 700; color: #94a3b8; background: rgba(var(--dz-fg-rgb),0.08); border-radius: 100px; padding: 0 7px; }
.cal-src-chip.off { opacity: 0.42; border-style: dashed; }
.cal-src-chip.off .cal-src-dot { background: #475569; box-shadow: none; }
.cal-src-chip.off .cal-src-n, .cal-src-chip.off:hover { text-decoration: none; }
.cal-src-all { border-color: rgba(0,212,255,0.5); color: var(--dz-cyan); }
.cal-src-add { border-style: dashed; color: #94a3b8; }
.cal-src-add:hover { color: var(--dz-cyan); border-color: rgba(0,212,255,0.5); }

/* Počet zdrojov pri zlúčenej udalosti (rovnaká udalosť vo viacerých kalendároch) */
.cal-ev-nsrc { font-size: 0.62rem; font-weight: 800; color: var(--dz-purple); background: rgba(99,102,241,0.18); border-radius: 100px; padding: 0 5px; margin-left: 4px; flex: none; }
.cal-ev-allday .cal-ev-nsrc, .cal-span .cal-ev-nsrc { background: rgba(var(--dz-fg-rgb),0.22); color: #fff; }
.cal-zoom { display: flex; gap: 3px; }
.cal-zoom.hidden { display: none; }
.cal-zoom .cal-nav-btn { width: 30px; height: 30px; font-size: 1.05rem; }
.cal-cell-num[data-open-day] { cursor: pointer; }
.cal-cell-num[data-open-day]:hover { color: var(--dz-cyan); }
.cal-more { font-size: 0.64rem; color: #94a3b8; cursor: pointer; padding: 1px 4px; border-radius: 4px; }
.cal-more:hover { color: var(--dz-cyan); background: rgba(var(--dz-fg-rgb),0.05); }

/* Časová mriežka (týždeň / deň) */
.ctg { --gutter: 62px; }
/* padding-right = šírka skrolovacej lišty tela (--sbw), aby stĺpce hlavičky a
   riadku „celý deň" boli zarovnané so stĺpcami mriežky (inak ich scrollbar rozhodí) */
.ctg-head, .ctg-allday { display: grid; grid-template-columns: var(--gutter) repeat(var(--ctg-days), minmax(0,1fr)); padding-right: var(--sbw, 0px); }
.ctg-head { border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1); position: sticky; top: var(--cal-sticky-top, 116px); z-index: 30; background: var(--dz-surface2); }
.ctg-dayhdr { padding: 10px 6px; text-align: center; font-size: 0.92rem; color: var(--dz-text2); border-left: 1px solid rgba(var(--dz-fg-rgb),0.07); cursor: pointer; white-space: nowrap; }
.ctg-dayhdr:hover { background: rgba(var(--dz-fg-rgb),0.04); }
.ctg-dayhdr.ctg-today { color: var(--dz-cyan); }
.ctg-dayhdr.ctg-we { background: rgba(var(--dz-fg-rgb),0.02); }
.ctg-dow { font-weight: 700; } .ctg-dnum { color: #94a3b8; font-size: 0.8rem; }
.ctg-allday { border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.12); min-height: 26px; max-height: 110px; overflow-y: auto; }
.ctg-allday-lbl { font-size: 0.6rem; color: #64748b; padding: 5px 5px 0; text-align: right; }
.ctg-allday-cell { border-left: 1px solid rgba(var(--dz-fg-rgb),0.07); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-height: 30px; }
/* Celodenné/viacdňové udalosti ako SPOJENÉ pruhy cez dni (ako v mesačnom pohľade) */
.ctg-allday { grid-template-columns: var(--gutter) 1fr; }   /* roh + spoločné telo dní */
.ctg-allday-body { position: relative; display: grid; grid-template-columns: repeat(var(--ctg-days), minmax(0,1fr)); }
.ctg-allday-body .ctg-allday-cell { padding-top: calc(var(--ad-lanes, 0) * 24px + 5px); }
.ctg-allday-spans { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ctg-allday-spans .cal-span { height: 20px; pointer-events: auto; }
.ctg-allday-cell.ctg-we { background: rgba(var(--dz-fg-rgb),0.02); }
.ctg-body { display: flex; max-height: 60vh; overflow-y: auto; position: relative; scrollbar-width: thin; padding-top: 9px; }
.ctg-gutter { width: var(--gutter); flex-shrink: 0; }
/* Žiadna čiara v stĺpci s časmi — inak prechádza cez text (preškrtnutie). Mriežku kreslia stĺpce dní (.ctg-line). */
.ctg-hour { position: relative; }
.ctg-hour span { position: absolute; top: -8px; right: 8px; font-size: 0.72rem; color: #94a3b8; }
.ctg-cols { flex: 1; display: grid; grid-template-columns: repeat(var(--ctg-days), minmax(0,1fr)); }
.ctg-daycol { position: relative; border-left: 1px solid rgba(var(--dz-fg-rgb),0.08); }
.ctg-daycol.ctg-we { background: rgba(var(--dz-fg-rgb),0.015); }
.ctg-daycol.ctg-today { background: rgba(0,212,255,0.035); }
.ctg-line { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(var(--dz-fg-rgb),0.05); pointer-events: none; z-index: 0; }
/* Blok udalosti: výška podľa trvania (min-height), ale obsah sa neoreže —
   pri dlhom názve sa blok natiahne. Zalomenie po SLOVÁCH (nie po písmenách). */
/* display:block (nie flex z .cal-ev) — čas, popis a vlastník idú POD SEBA */
.ctg-ev { display: block; position: absolute; height: auto; overflow: hidden; font-size: 0.8rem; line-height: 1.28; padding: 4px 20px 5px 7px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); z-index: 2; border-radius: 6px; }
/* Hover: udalosť sa rozšíri a zobrazí celý čas + názov (aj pri prekrytí viacerých udalostí) */
.ctg-ev:hover { z-index: 6; overflow: visible; width: auto !important; min-width: 150px; max-width: 280px; box-shadow: 0 4px 14px rgba(0,0,0,0.45); }
/* pod seba: čas · popis · meno. Čas sa nezalamuje, dlhý názov → tri bodky (max 2 riadky) */
.ctg-ev-time { display: block; font-weight: 700; color: var(--ev-color); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.ctg-ev-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: normal; overflow-wrap: anywhere; hyphens: none; }
.ctg-ev-owner { display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* pri prejdení myšou sa skratky (tri bodky) zrušia a text sa zobrazí celý */
.ctg-ev:hover .ctg-ev-title { -webkit-line-clamp: unset; overflow: visible; }
.ctg-ev:hover .ctg-ev-time, .ctg-ev:hover .ctg-ev-owner { overflow: visible; }

/* =============================================================================
   NAPLÁNOVAŤ STRETNUTIE + Pozvánka — DARK ZONE (tmavý modal #131c35)
   ============================================================================= */
.meet-hint { font-size: 0.88rem; color: rgba(var(--dz-fg-rgb),0.6); margin: 0 0 18px; line-height: 1.55; }
.meet-people-lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(var(--dz-fg-rgb),0.42); margin-bottom: 10px; }
.meet-people { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.meet-person { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1.5px solid rgba(var(--dz-fg-rgb),0.14); border-radius: 11px; cursor: pointer; font-size: 0.88rem; font-weight: 500; color: var(--dz-text2); background: rgba(var(--dz-fg-rgb),0.05); transition: border-color .14s, background .14s, color .14s; }
.meet-person:hover { border-color: rgba(var(--dz-fg-rgb),0.3); background: rgba(var(--dz-fg-rgb),0.09); color: var(--dz-text); }
.meet-person:has(.meet-cb:checked) { border-color: var(--accent); background: rgba(var(--dz-fg-rgb),0.1); color: var(--dz-text); box-shadow: inset 0 0 0 1px var(--accent); }
.meet-cb { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.meet-person-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(var(--dz-fg-rgb),0.06); }
.meet-empty { font-size: 0.85rem; color: rgba(var(--dz-fg-rgb),0.5); padding: 8px 0 16px; }
.meet-opts { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; margin-bottom: 8px; align-items: end; }
@media (max-width: 480px) { .meet-opts { grid-template-columns: 1fr; } }
.meet-worktime-row { display: flex; align-items: center; gap: 8px; }
.meet-worktime-row input { flex: 1; min-width: 0; }
.meet-dash { color: rgba(var(--dz-fg-rgb),0.5); font-weight: 600; flex-shrink: 0; }
.meet-results { margin-top: 18px; }

/* Pozvánka e-mailom v modáli udalosti (dark) */
.ev-invite-group { border-top: 1px solid rgba(var(--dz-fg-rgb),0.1); padding-top: 16px; margin-top: 4px; }
.ev-invite-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 0.8rem; color: rgba(var(--dz-fg-rgb),0.6); line-height: 1.45; cursor: pointer; }
.ev-invite-check input { margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.ev-invite-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.ev-invite-picker-lbl { font-size: 0.74rem; color: rgba(var(--dz-fg-rgb),0.42); font-weight: 600; margin-right: 2px; }
.ev-invite-picker-empty { font-size: 0.74rem; color: rgba(var(--dz-fg-rgb),0.4); }
.ev-pick-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 100px; border: 1px solid rgba(var(--dz-fg-rgb),0.16); background: rgba(var(--dz-fg-rgb),0.05); color: var(--dz-text2); font-size: 0.78rem; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all .13s; }
.ev-pick-chip::before { content: '+'; font-weight: 700; opacity: 0.55; }
.ev-pick-chip:hover { border-color: var(--accent); color: var(--dz-text); background: rgba(var(--dz-fg-rgb),0.1); }
.ev-pick-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ev-pick-chip.on::before { content: '✓'; opacity: 1; }
.ics-feed-email { display: block; font-size: 0.72rem; color: var(--text-xdim); font-weight: 400; margin-top: 1px; }

.meet-loading { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: rgba(var(--dz-fg-rgb),0.6); padding: 16px 4px; }
.meet-spinner { width: 16px; height: 16px; border: 2px solid rgba(var(--dz-fg-rgb),0.18); border-top-color: var(--accent); border-radius: 50%; animation: meet-spin .7s linear infinite; flex-shrink: 0; }
@keyframes meet-spin { to { transform: rotate(360deg); } }
.meet-msg { font-size: 0.86rem; padding: 11px 13px; border-radius: 9px; margin-bottom: 14px; line-height: 1.5; }
.meet-msg.ok { background: rgba(16,185,129,0.14); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.32); }
.meet-msg.ok strong { color: #a7f3d0; }
.meet-msg.err { background: rgba(239,68,68,0.14); color: #fca5a5; border: 1px solid rgba(239,68,68,0.32); }
.meet-msg.warn { background: rgba(234,179,8,0.14); color: #fcd34d; border: 1px solid rgba(234,179,8,0.34); }

/* Termíny zoskupené po dňoch — každý deň je karta s hover efektom na celý objekt */
.meet-days { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.meet-days::-webkit-scrollbar { width: 6px; }
.meet-days::-webkit-scrollbar-thumb { background: rgba(var(--dz-fg-rgb),0.16); border-radius: 3px; }
.meet-day {
  border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 13px; padding: 13px 15px; background: rgba(var(--dz-fg-rgb),0.04);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.meet-day:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35), 0 0 0 1px var(--accent);
  transform: translateY(-2px);
  background: rgba(var(--dz-fg-rgb),0.07);
}
.meet-day-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.meet-day-name { font-size: 0.92rem; font-weight: 700; color: var(--dz-text); }
.meet-day-badge { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--accent); border-radius: 100px; padding: 2px 9px; }
.meet-day-count { margin-left: auto; font-size: 0.74rem; color: rgba(var(--dz-fg-rgb),0.42); font-weight: 600; }
.meet-day-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.meet-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 8px 13px; border-radius: 10px;
  border: 1px solid rgba(var(--dz-fg-rgb),0.14); background: rgba(var(--dz-fg-rgb),0.06); color: var(--dz-text);
  font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font);
  cursor: pointer; transition: background .14s, border-color .14s, color .14s, transform .1s;
}
.meet-chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.meet-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.meet-chip-sep { opacity: 0.5; }
.meet-chip:hover .meet-chip-sep { opacity: 0.85; }
.meet-chip-best { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* ── Tmavý modal: rám, hlavička, formuláre, tlačidlá (Stretnutie + Udalosť) ── */
#meetingModal .modal-box, #eventModal .modal-box { background: #131c35; border-color: rgba(var(--dz-fg-rgb),0.1); }
#meetingModal .modal-box { max-width: 880px; }
#eventModal .modal-box { max-width: 660px; }
#meetingModal .modal-header, #eventModal .modal-header,
#meetingModal .modal-footer, #eventModal .modal-footer { background: rgba(var(--dz-fg-rgb),0.04); border-color: rgba(var(--dz-fg-rgb),0.08); }
#meetingModal .modal-header h2, #eventModal .modal-header h2 { color: var(--dz-text); display: inline-flex; align-items: center; gap: 9px; }
#meetingModal .modal-header h2 svg, #eventModal .modal-header h2 svg { color: var(--accent); }
#meetingModal .modal-close, #eventModal .modal-close { color: rgba(var(--dz-fg-rgb),0.5); }
#meetingModal .modal-close:hover, #eventModal .modal-close:hover { background: rgba(239,68,68,0.15); color: #f87171; }
#meetingModal .modal-body::-webkit-scrollbar-thumb, #eventModal .modal-body::-webkit-scrollbar-thumb { background: rgba(var(--dz-fg-rgb),0.16); }

#eventModal .form-group label, #meetingModal .form-group label { color: rgba(var(--dz-fg-rgb),0.55); font-weight: 600; }
#eventModal .form-group input[type="text"], #eventModal .form-group input[type="date"],
#eventModal .form-group input[type="time"], #eventModal .form-group input[type="email"],
#eventModal .form-group select, #eventModal .form-group textarea, #eventModal #evInvite,
#meetingModal .form-group select, #meetingModal .form-group input[type="time"] {
  background: rgba(var(--dz-fg-rgb),0.08); border: 1px solid rgba(var(--dz-fg-rgb),0.14); color: var(--dz-text); color-scheme: dark;
}
#eventModal .form-group input::placeholder, #eventModal #evInvite::placeholder { color: rgba(var(--dz-fg-rgb),0.3); }
#eventModal .form-group select option, #meetingModal .form-group select option { background: #1e2d4d; color: var(--dz-text); }
#eventModal .form-group input:focus, #eventModal .form-group select:focus, #eventModal .form-group textarea:focus, #eventModal #evInvite:focus,
#meetingModal .form-group select:focus, #meetingModal .form-group input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--dz-fg-rgb),0.12); outline: none;
}
#eventModal .checkbox-label { color: var(--dz-text2); }
#eventModal input[type="color"] { background: rgba(var(--dz-fg-rgb),0.08); border-color: rgba(var(--dz-fg-rgb),0.14); }
/* Tlačidlá v pätičke tmavého modálu */
#meetingModal .btn-secondary, #eventModal .btn-secondary {
  background: rgba(var(--dz-fg-rgb),0.07); color: rgba(var(--dz-fg-rgb),0.6); border-color: rgba(var(--dz-fg-rgb),0.16);
}
#meetingModal .btn-secondary:hover, #eventModal .btn-secondary:hover { background: rgba(var(--dz-fg-rgb),0.13); color: var(--dz-text); border-color: rgba(var(--dz-fg-rgb),0.26); }
#eventModal .btn-delete { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.32); }
#eventModal .btn-delete:hover { background: rgba(239,68,68,0.25); }

/* =============================================================================
   BACKBONE EDITOR — optická topológia (interrogátor · splitter · káble · senzory)
   ============================================================================= */
.bb-inner { max-width: 1400px; margin: 0 auto; padding: 22px 22px 40px; }
.bb-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bb-topbar-left, .bb-topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-title { font-family: var(--font-title); font-size: 1.35rem; font-weight: 800; color: var(--text-bright); }
.bb-topbar #bbSelect { max-width: 220px; }
.bb-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding: 8px 10px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; }
.bb-tool-label { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.bb-add { font-family: var(--font); font-size: 0.8rem; font-weight: 600; padding: 6px 12px; border-radius: 7px; border: 1px solid; cursor: pointer; color: #fff; }
.bb-add-interr { background: #2f6b22; border-color: #275a1c; color: #fff; }
.bb-add-box { background: #6aa017; border-color: #5a8c12; color: #fff; }
.bb-add-sensor { background: #fff; color: #2f6b22; border-color: #8DC63F; }
.bb-add:hover { filter: brightness(1.06); }
.bb-hint { font-size: 0.74rem; color: var(--text-xdim); margin-left: auto; }

.bb-editor { display: flex; gap: 14px; align-items: flex-start; }
.bb-canvas-wrap { flex: 1; min-width: 0; background: #0d1420; background-image: radial-gradient(rgba(141,198,63,0.06) 1px, transparent 1px); background-size: 24px 24px; border: 1px solid #1c2738; border-radius: 12px; overflow: auto; max-height: 72vh; box-shadow: var(--shadow-sm); position: relative; }
.bb-svg { display: block; }
.bb-empty-txt { fill: #64748b; font-size: 15px; font-family: var(--font); }

/* uzly — realistické zariadenia */
.bb-node { cursor: grab; }
.bb-node:active { cursor: grabbing; }
.bb-node text { pointer-events: none; }
.bb-dev-body { stroke: rgba(0,0,0,0.45); stroke-width: 1; transition: filter .12s; }
.bb-dev-face { fill: url(#bbFace); pointer-events: none; }
.bb-dev-accent { fill: #8DC63F; }
.bb-lcd { fill: #06140a; stroke: #1f4020; stroke-width: 1; }
.bb-led { fill: #3a4150; }
.bb-led.on { fill: #8DC63F; animation: bbLed 1.6s ease-in-out infinite; }
@keyframes bbLed { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.bb-fc { fill: #0c1118; stroke: #8DC63F; stroke-width: 1; }
.bb-fc-i { fill: #8DC63F; }
.bb-fan { stroke: rgba(var(--dz-fg-rgb),0.55); stroke-width: 1.3; }
.bb-box-lid { fill: rgba(var(--dz-fg-rgb),0.05); stroke: rgba(0,0,0,0.35); stroke-width: 1; }
.bb-screw { fill: rgba(var(--dz-fg-rgb),0.28); }
.bb-gland { fill: #0c1118; stroke: rgba(var(--dz-fg-rgb),0.18); stroke-width: 1; }
.bb-sensor-body { stroke: #8DC63F; stroke-width: 1.5; }
.bb-grating { stroke: #8DC63F; stroke-width: 1.3; }
.bb-tip { stroke: #5a8c12; stroke-width: 1; }
.bb-node:hover .bb-dev-body, .bb-node:hover .bb-sensor-body { filter: brightness(1.12); }
.bb-sel-ring { fill: none; stroke: #38bdf8; stroke-width: 2.5; }
.bb-node.conn .bb-sel-ring { stroke: #f59e0b; stroke-dasharray: 6 4; }

/* káble */
.bb-link { fill: none; stroke: #355a2b; stroke-width: 2.5; pointer-events: none; }
.bb-link.sel { stroke: #38bdf8; stroke-width: 3.5; }
.bb-link-hit { fill: none; stroke: transparent; stroke-width: 16; stroke-linecap: round; cursor: grab; }
.bb-link-hit:hover + .bb-link { stroke: #8DC63F; stroke-width: 3.5; }
.bb-dragging .bb-link-hit { cursor: grabbing; }
.bb-link-lbl { fill: #cbd5e1; font-family: var(--font); font-size: 13px; }
/* úchyty trasy kábla (waypoints) */
.bb-wp { fill: #38bdf8; stroke: #0d1117; stroke-width: 1.6; cursor: grab; }
.bb-wp:hover { fill: #7dd3fc; r: 7.5; }
.bb-handles { pointer-events: all; }
.bb-route-hint { font-size: 0.7rem; color: var(--text-dim); line-height: 1.4; margin-bottom: 6px; }
.bb-flows { display: none; pointer-events: none; }
.bb-anim .bb-flows { display: block; }
.bb-flow { fill: none; stroke: rgba(141,198,63,0.45); stroke-width: 2; stroke-dasharray: 1 11; stroke-linecap: round; animation: bbFlow 1s linear infinite; }
@keyframes bbFlow { to { stroke-dashoffset: -12; } }
/* odrazený (reflektovaný) signál späť do interrogátora */
.bb-flow-rx { stroke: rgba(127,208,255,0.40); stroke-dashoffset: 6; animation: bbFlowRx 1s linear infinite; }
@keyframes bbFlowRx { to { stroke-dashoffset: 18; } }
.bb-photon { fill: #c6ff8e; filter: url(#bbGlow); }
.bb-photon-rx { fill: #7fd0ff; }
.bb-dragging .bb-flow, .bb-dragging .bb-photon { animation: none; }

/* S-line zariadenia — zelené telo, čierny panel (podľa katalógu Sylex) */
.bb-sl-body { stroke: #4e7d24; stroke-width: 1; }
.bb-sl-panel { fill: #16181b; stroke: #000; stroke-width: 1; }
.bb-sl-gear { fill: none; stroke: #d6ebbb; stroke-width: 1.6; }
.bb-sl-gear-h { fill: #d6ebbb; }
.bb-sl-port { fill: #eef2f4; stroke: #707f86; stroke-width: 0.8; }
.bb-sl-inport { fill: #b9c5cd; stroke: #5a666d; stroke-width: 0.7; }
.bb-sl-disp { fill: #0a0c0d; stroke: #2c3b18; stroke-width: 1; }
.bb-sl-pwr { fill: #1d1f22; stroke: #3a4150; stroke-width: 1; }
.bb-sl-pwr-i { stroke: #8DC63F; stroke-width: 1.4; stroke-linecap: round; }
.bb-sl-io { fill: #2a2d31; stroke: #565b62; stroke-width: 0.8; }
.bb-node:hover .bb-sl-body { filter: brightness(1.08); }

/* súhrnná štatistika + merané veličiny v paneli */
.bb-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.bb-stat { background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.bb-stat b { display: block; font-size: 1.15rem; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.bb-stat span { font-size: 0.64rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.bb-mtags { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-mtag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--text); background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.2); border-left-width: 3px; border-radius: 6px; padding: 3px 8px; }
.bb-mtag i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* panel */
.bb-panel { width: 270px; flex-shrink: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; align-self: stretch; }
.bb-panel-hd { font-family: var(--font-title); font-weight: 700; font-size: 1rem; color: var(--text-bright); margin-bottom: 10px; }
.bb-panel-stat { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 10px; }
.bb-panel-empty { font-size: 0.82rem; color: var(--text-xdim); margin-top: 6px; }
.bb-panel-btn { width: 100%; margin-top: 8px; }
@media (max-width: 900px) { .bb-editor { flex-direction: column; } .bb-panel { width: 100%; } }

/* =============================================================================
   KALENDÁR — TMAVÝ MOTÍV + viacdňové spanning pruhy
   ============================================================================= */
.calendar-page { background: var(--hdr-bg); }
.calendar-page .cal-title { color: var(--dz-text2); }
.calendar-page .cal-sub { color: rgba(var(--dz-fg-rgb),0.4); }
.calendar-page .cal-month-label { color: var(--dz-text); }
.calendar-page .cal-nav-btn, .calendar-page .cal-today-btn,
.calendar-page .cal-zoom .cal-nav-btn { background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.1); color: var(--dz-text2); }
.calendar-page .cal-nav-btn:hover, .calendar-page .cal-today-btn:hover { background: rgba(var(--dz-fg-rgb),0.1); color: #fff; }
.calendar-page #calPerson, .calendar-page .util-select { background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.14); color: var(--dz-text2); }

.calendar-page .cal-grid-wrap { background: rgba(var(--dz-fg-rgb),0.03); border: 1px solid rgba(var(--dz-fg-rgb),0.1); }
.calendar-page .cal-weekdays { background: var(--dz-surface2); border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1); }
.calendar-page .cal-weekdays > div { color: rgba(var(--dz-fg-rgb),0.45); }
.calendar-page .cal-weekdays .cal-weekend { color: rgba(248,113,113,0.6); }
.calendar-page .cal-cell { border-right: 1px solid rgba(var(--dz-fg-rgb),0.06); border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.06); }
.calendar-page .cal-cell:hover { background: rgba(var(--dz-fg-rgb),0.04); }
.calendar-page .cal-cell-out { background: rgba(0,0,0,0.18); }
.calendar-page .cal-cell-out .cal-cell-num { color: rgba(var(--dz-fg-rgb),0.25); }
.calendar-page .cal-cell-weekend { background: rgba(var(--dz-fg-rgb),0.015); }
.calendar-page .cal-cell-num { color: rgba(var(--dz-fg-rgb),0.7); }
.calendar-page .cal-cell-num[data-open-day]:hover { background: rgba(var(--dz-fg-rgb),0.12); color: #fff; }
.calendar-page .cal-cell-today .cal-cell-num { background: var(--accent); color: #fff; }
.calendar-page .cal-ev { color: var(--dz-text); }
.calendar-page .cal-ev-timed:hover { background: rgba(var(--dz-fg-rgb),0.08); }
.calendar-page .cal-ev-time { color: var(--dz-text2); }
.calendar-page .cal-ev-allday { color: var(--ev-text, #fff); }
.calendar-page .cal-more { color: #94a3b8; }
.calendar-page .cal-more:hover { color: var(--dz-cyan); background: rgba(var(--dz-fg-rgb),0.06); }
.calendar-page .cal-ev-allday.cal-ev-ext { box-shadow: inset 0 0 0 1.5px rgba(var(--dz-fg-rgb),0.4); }
.calendar-page .cal-ev-timed.cal-ev-ext .cal-ev-dot { box-shadow: 0 0 0 2px rgba(var(--dz-fg-rgb),0.3); }

/* Týždne + viacdňové spanning pruhy (theme-agnostic) */
.cal-grid-weeks { display: flex; flex-direction: column; }
.cal-week { position: relative; }
.cal-week:last-child .cal-cell { border-bottom: none; }
.cal-week-cells { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-week-spans { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; }
.cal-span {
  position: absolute; height: 20px; display: flex; align-items: center;
  padding: 0 8px; border-radius: 5px; font-size: 0.76rem; font-weight: 600;
  color: var(--ev-text, #fff); background: var(--ev-color); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: pointer; pointer-events: auto;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3); text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.cal-span:hover { filter: brightness(1.1); }
.cal-span.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-span.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Časová mriežka — tmavý motív */
.calendar-page .ctg-head { border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.12); }
.calendar-page .ctg-dayhdr { color: var(--dz-text2); border-left: 1px solid rgba(var(--dz-fg-rgb),0.07); }
.calendar-page .ctg-dayhdr:hover { background: rgba(var(--dz-fg-rgb),0.05); }
.calendar-page .ctg-dayhdr.ctg-today { color: var(--dz-cyan); }
.calendar-page .ctg-dayhdr.ctg-we { background: rgba(var(--dz-fg-rgb),0.02); }
.calendar-page .ctg-dnum { color: #94a3b8; }
.calendar-page .ctg-allday { border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.12); }
.calendar-page .ctg-allday-lbl { color: #64748b; }
.calendar-page .ctg-allday-cell { border-left: 1px solid rgba(var(--dz-fg-rgb),0.07); }
.calendar-page .ctg-allday-cell.ctg-we { background: rgba(var(--dz-fg-rgb),0.02); }
.calendar-page .ctg-hour span { color: #64748b; }
.calendar-page .ctg-daycol { border-left: 1px solid rgba(var(--dz-fg-rgb),0.08); }
.calendar-page .ctg-daycol.ctg-we { background: rgba(var(--dz-fg-rgb),0.015); }
.calendar-page .ctg-line { border-top: 1px solid rgba(var(--dz-fg-rgb),0.05); }
.calendar-page .ctg-ev { background: var(--ev-color); color: var(--ev-text, #fff); }
.calendar-page .ctg-ev .ctg-ev-time { color: var(--ev-text, #fff); opacity: 0.82; }

/* priezvisko vlastníka (zdroja) — zvýraznené červenou */
.cal-ev-main { flex: 1; min-width: 0; }
/* Mesačný pohľad — časovaná udalosť: čas (od–do), názov a vlastník POD SEBOU */
.cal-ev-timed .cal-ev-main { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.cal-ev-timed .cal-ev-time { display: block; }
.cal-ev-timed .cal-ev-txt { display: block; }
.cal-ev-timed .cal-ev-owner { display: block; }
/* Meno kalendára (vlastník) v udalostiach — v tmavom režime výrazná červená.
   Na farebných pozadiach (pruhy, časová mriežka) tmavý halo pre čitateľnosť. */
.cal-ev-owner { color: #ff5c5c; font-weight: 800; }
.cal-ev-allday { display: block; }
.cal-ev-allday .cal-ev-owner, .cal-span .cal-ev-owner { color: #ff5c5c; font-weight: 800; }
.cal-ev-merged .cal-ev-owner { color: #ff5c5c; font-weight: 800; }
.ctg-ev-owner { color: #ff5c5c; font-weight: 800; }
/* Tmavý režim: meno vlastníka na farebných pozadiach udalostí je červené na tmavom
   čipe, aby bolo čitateľné pri ľubovoľnej farbe udalosti (ružová, fialová, zelená…). */
.calendar-page:not(.cal-light) .ctg-ev-owner,
.calendar-page:not(.cal-light) .cal-ev-allday .cal-ev-owner,
.calendar-page:not(.cal-light) .cal-span .cal-ev-owner,
.calendar-page:not(.cal-light) .cal-ev-allday.cal-ev-merged .cal-ev-owner {
  color: #ff8a8a; background: rgba(12,16,26,0.72); border-radius: 4px; padding: 0 5px;
}
.calendar-page:not(.cal-light) .ctg-ev-owner { display: inline-block; max-width: 100%; }

.cal-search { display: flex; align-items: center; gap: 6px; background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.14); border-radius: 8px; padding: 6px 10px; color: #94a3b8; }
.cal-search input { border: none; outline: none; background: none; font-family: var(--font); font-size: 0.82rem; color: var(--dz-text2); width: 150px; }
.cal-search input::placeholder { color: #94a3b8; }
.cal-jump { background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.14); color: var(--dz-text2); border-radius: 8px; padding: 6px 9px; font-family: var(--font); font-size: 0.8rem; color-scheme: dark; cursor: pointer; }
@media (max-width: 720px) { .cal-search input { width: 110px; } }

/* Zvýraznenie dnešného dňa — celý rámček */
.calendar-page .cal-cell-today { background: rgba(0,212,255,0.1); box-shadow: inset 0 0 0 2px var(--accent); position: relative; z-index: 1; }
.calendar-page .ctg-daycol.ctg-today { background: rgba(0,212,255,0.06); --frame-shadow: inset 0 0 0 2px var(--accent); }
/* Rámček dňa (dnešný / sviatok) kreslíme cez ::after NAD udalosťami, nech ho neprekrývajú */
.calendar-page .ctg-daycol.ctg-today::after,
.calendar-page .ctg-daycol.ctg-hol::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6; box-shadow: var(--frame-shadow); }
.calendar-page .ctg-dayhdr.ctg-today { background: rgba(0,212,255,0.1); box-shadow: inset 0 -2px 0 var(--accent); font-weight: 700; }

/* Štátne sviatky */
.cal-holiday { font-size: 0.72rem; font-weight: 700; color: var(--dz-red); padding: 2px 6px; border-radius: 5px; background: rgba(239,68,68,0.16); white-space: normal; overflow-wrap: anywhere; }
.calendar-page .ctg-dayhdr.ctg-hol .ctg-dow { color: var(--dz-red); }

/* Kalendár — číslo týždňa, konflikty, drag&drop, prac. hodiny, tlač */
.cal-wk { position: absolute; top: 6px; right: 6px; font-size: 0.6rem; font-weight: 700; color: rgba(var(--dz-fg-rgb),0.3); background: rgba(var(--dz-fg-rgb),0.05); border-radius: 5px; padding: 1px 5px; pointer-events: none; }
.cal-cell { position: relative; }
.cal-bh-btn.active { background: rgba(0,212,255,0.15); color: var(--dz-cyan); border-color: rgba(0,212,255,0.4); }
.cal-cell-dragover { background: rgba(0,212,255,0.12) !important; box-shadow: inset 0 0 0 2px var(--accent); }
.cal-dragging { opacity: 0.4; }
.cal-ev[draggable="true"], .cal-span[draggable="true"] { cursor: grab; }
.ctg-ev-conflict { box-shadow: inset 0 0 0 2px #f59e0b, 0 1px 3px rgba(0,0,0,0.3); }
.ctg-conf { position: absolute; top: 3px; right: 4px; margin: 0; font-size: 0.72rem; line-height: 1; }

/* =============================================================================
   KALENDÁR — SVETLÉ MOTÍVY (☀️ Svetlý ako RON, 🔷 Modrý) — prepínač v toolbari
   Spoločné pravidlá cez .cal-light + premenné definované v konkrétnom motíve
   ============================================================================= */
.calendar-page.cal-theme-light {
  --clbg: #f8fafc;        /* pozadie stránky */
  --clsurf: #ffffff;      /* povrch mriežky/buniek */
  --clhead: #ffffff;      /* hlavičky (dni, ctg-head) */
  --clline: #e5e7eb;      /* mriežka / okraje */
  --cltx: #1f2937;        /* hlavný text */
  --cltx2: #6b7280;       /* tlmený text */
  --clacc: #d97706;       /* akcent (RON jantárová) */
}
.calendar-page.cal-theme-soft {
  --clbg: #eaf1fa;
  --clsurf: #ffffff;
  --clhead: #dce9f9;
  --clline: #c9d9ee;
  --cltx: #1e3a5f;
  --cltx2: #64748b;
  --clacc: #2563eb;
}
.calendar-page.cal-light { background: var(--clbg); }
.calendar-page.cal-light .cal-title { color: var(--cltx); }
.calendar-page.cal-light .cal-sub { color: var(--cltx2); }
.calendar-page.cal-light .cal-month-label { color: var(--cltx); }
.calendar-page.cal-light .cal-toolbar { background: var(--clbg); border-bottom-color: var(--clline); }
.calendar-page.cal-light .cal-nav-btn, .calendar-page.cal-light .cal-today-btn,
.calendar-page.cal-light .cal-zoom .cal-nav-btn { background: var(--clsurf); border-color: var(--dz-text2); color: #374151; }
.calendar-page.cal-light .cal-nav-btn:hover, .calendar-page.cal-light .cal-today-btn:hover { background: #f3f4f6; color: #111827; }
.calendar-page.cal-light .util-select { background: var(--clsurf); border-color: var(--dz-text2); color: #374151; }
.calendar-page.cal-light .cal-search { background: var(--clsurf); border-color: var(--dz-text2); color: var(--cltx2); }
.calendar-page.cal-light .cal-search input { color: var(--cltx); }
.calendar-page.cal-light .cal-search input::placeholder { color: #9ca3af; }
.calendar-page.cal-light .cal-jump { background: var(--clsurf); border-color: var(--dz-text2); color: var(--cltx); color-scheme: light; }
.calendar-page.cal-light .cal-bh-btn.active { background: rgba(37,99,235,0.1); color: var(--clacc); border-color: var(--clacc); }
/* chipy zdrojov */
.calendar-page.cal-light .cal-src-chip { background: var(--clsurf); border-color: var(--dz-text2); color: #374151; }
.calendar-page.cal-light .cal-src-chip:hover { background: #f3f4f6; border-color: #9ca3af; }
.calendar-page.cal-light .cal-src-n { background: #f3f4f6; color: var(--cltx2); }
.calendar-page.cal-light .cal-src-all { border-color: var(--clacc); color: var(--clacc); }
.calendar-page.cal-light .cal-src-add { color: var(--cltx2); }
/* mesačná mriežka */
.calendar-page.cal-light .cal-grid-wrap { background: var(--clsurf); border-color: var(--clline); }
.calendar-page.cal-light .cal-weekdays { background: var(--clhead); border-bottom: 1px solid var(--clline); }
.calendar-page.cal-light .cal-weekdays > div { color: var(--cltx2); }
.calendar-page.cal-light .cal-weekdays .cal-weekend { color: #dc2626; }
.calendar-page.cal-light .cal-cell { border-right: 1px solid var(--clline); border-bottom: 1px solid var(--clline); }
.calendar-page.cal-light .cal-cell:hover { background: #f9fafb; }
.calendar-page.cal-light .cal-cell-out { background: #f3f4f6; }
.calendar-page.cal-light .cal-cell-out .cal-cell-num { color: #b8bfc9; }
.calendar-page.cal-light .cal-cell-weekend { background: #fafbfc; }
.calendar-page.cal-light .cal-cell-num { color: #374151; }
.calendar-page.cal-light .cal-cell-num[data-open-day]:hover { background: #e5e7eb; color: #111827; }
.calendar-page.cal-light .cal-cell-today { background: color-mix(in srgb, var(--clacc) 7%, var(--clsurf)); box-shadow: inset 0 0 0 2px var(--clacc); }
.calendar-page.cal-light .cal-cell-today .cal-cell-num { background: var(--clacc); color: #fff; }
.calendar-page.cal-light .cal-wk { color: #9ca3af; background: #f3f4f6; }
/* udalosti v mesiaci */
.calendar-page.cal-light .cal-ev { color: var(--cltx); }
.calendar-page.cal-light .cal-ev-timed:hover { background: #f3f4f6; }
.calendar-page.cal-light .cal-ev-time { color: #4b5563; }
.calendar-page.cal-light .cal-ev-owner { color: #dc2626; }
.calendar-page.cal-light .cal-ev-allday { color: var(--ev-text, #fff); }
.calendar-page.cal-light .cal-ev-allday .cal-ev-owner, .calendar-page.cal-light .cal-span .cal-ev-owner { color: var(--dz-red); }
.calendar-page.cal-light .cal-more { color: var(--cltx2); }
.calendar-page.cal-light .cal-more:hover { color: var(--clacc); background: #f3f4f6; }
.calendar-page.cal-light .cal-holiday { background: rgba(220,38,38,0.08); color: #b91c1c; }
.calendar-page.cal-light .cal-cell-dragover { background: color-mix(in srgb, var(--clacc) 12%, var(--clsurf)) !important; box-shadow: inset 0 0 0 2px var(--clacc); }
/* časová mriežka (týždeň / deň) — RON štýl: bloky podfarbené farbou zdroja */
.calendar-page.cal-light .ctg-head { background: var(--clhead); border-bottom: 1px solid var(--clline); }
.calendar-page.cal-light .ctg-dayhdr { color: #374151; border-left: 1px solid var(--clline); }
.calendar-page.cal-light .ctg-dayhdr:hover { background: #f3f4f6; }
.calendar-page.cal-light .ctg-dnum { color: var(--cltx2); }
.calendar-page.cal-light .ctg-dayhdr.ctg-today { color: var(--clacc); background: color-mix(in srgb, var(--clacc) 8%, var(--clhead)); box-shadow: inset 0 -2px 0 var(--clacc); }
.calendar-page.cal-light .ctg-dayhdr.ctg-we { background: #fafbfc; }
.calendar-page.cal-light .ctg-dayhdr.ctg-hol .ctg-dow { color: #dc2626; }

/* ── Sviatky — celý deň zvýraznený žltým rámčekom ────────────────────────────── */
/* Mesačný pohľad: celá bunka */
.calendar-page .cal-cell-holiday { background: rgba(234,179,8,0.12); box-shadow: inset 0 0 0 2px #eab308; position: relative; z-index: 1; }
.calendar-page.cal-light .cal-cell-holiday { background: rgba(234,179,8,0.13); box-shadow: inset 0 0 0 2px #ca8a04; }
/* Týždeň/deň: žltý rámček okolo celého stĺpca dňa (hlavička + „celý deň" + mriežka) */
.calendar-page .ctg-dayhdr.ctg-hol { background: rgba(234,179,8,0.15); box-shadow: inset 2px 0 0 0 #eab308, inset -2px 0 0 0 #eab308, inset 0 2px 0 0 #eab308; }
.calendar-page .ctg-allday-cell.ctg-hol { background: rgba(234,179,8,0.10); box-shadow: inset 2px 0 0 0 #eab308, inset -2px 0 0 0 #eab308; }
.calendar-page .ctg-daycol.ctg-hol { background: rgba(234,179,8,0.07); --frame-shadow: inset 2px 0 0 0 #eab308, inset -2px 0 0 0 #eab308, inset 0 -2px 0 0 #eab308; }
.calendar-page.cal-light .ctg-dayhdr.ctg-hol { background: rgba(234,179,8,0.20); box-shadow: inset 2px 0 0 0 #ca8a04, inset -2px 0 0 0 #ca8a04, inset 0 2px 0 0 #ca8a04; }
.calendar-page.cal-light .ctg-allday-cell.ctg-hol { background: rgba(234,179,8,0.14); box-shadow: inset 2px 0 0 0 #ca8a04, inset -2px 0 0 0 #ca8a04; }
.calendar-page.cal-light .ctg-daycol.ctg-hol { background: rgba(234,179,8,0.09); --frame-shadow: inset 2px 0 0 0 #ca8a04, inset -2px 0 0 0 #ca8a04, inset 0 -2px 0 0 #ca8a04; }

.calendar-page.cal-light .ctg-allday { border-bottom: 1px solid var(--clline); background: var(--clsurf); }
.calendar-page.cal-light .ctg-allday-lbl { color: #9ca3af; }
.calendar-page.cal-light .ctg-allday-cell { border-left: 1px solid var(--clline); }
.calendar-page.cal-light .ctg-allday-cell.ctg-we { background: #fafbfc; }
.calendar-page.cal-light .ctg-body { background: var(--clsurf); }
.calendar-page.cal-light .ctg-hour span { color: #9ca3af; }
.calendar-page.cal-light .ctg-daycol { border-left: 1px solid var(--clline); }
.calendar-page.cal-light .ctg-daycol.ctg-we { background: #fafbfc; }
.calendar-page.cal-light .ctg-daycol.ctg-today { background: color-mix(in srgb, var(--clacc) 5%, var(--clsurf)); --frame-shadow: inset 0 0 0 2px var(--clacc); }
.calendar-page.cal-light .ctg-line { border-top: 1px solid #f1f5f9; }
.calendar-page.cal-light .ctg-ev {
  background: color-mix(in srgb, var(--ev-color) 14%, #ffffff);
  border: 1px solid var(--ev-color); border-radius: 6px;
  color: var(--cltx); text-shadow: none;
}
.calendar-page.cal-light .ctg-ev .ctg-ev-time { color: #374151; }
.calendar-page.cal-light .ctg-ev .ctg-ev-owner { color: #dc2626; }
/* prepínač Mesiac/Týždeň/Deň + hodinová os — čitateľné na svetlom pozadí */
.calendar-page.cal-light .tasks-viewtoggle { border-color: #c7d2e0; background: var(--clsurf); }
.calendar-page.cal-light .tasks-view { color: #475569; }
.calendar-page.cal-light .tasks-view:hover { background: #f1f5f9; color: #111827; }
.calendar-page.cal-light .tasks-view.active { background: var(--clacc); color: #fff; }
.calendar-page.cal-light .ctg-hour span { color: #64748b; font-weight: 600; }

@media print {
  body * { visibility: hidden !important; }
  #page-calendar, #page-calendar * { visibility: visible !important; }
  #page-calendar { position: absolute; left: 0; top: 0; right: 0; background: #fff !important; padding: 0; }
  .cal-hdr > div:last-child, .cal-toolbar-right, .cal-nav, #calLegend, .cal-src-bar { display: none !important; }
  .calendar-page, .cal-grid-wrap, .cal-cell, .cal-weekdays { background: #fff !important; }
  .cal-title, .cal-month-label, .cal-cell-num, .cal-ev, .cal-ev-time, .cal-ev-owner, .cal-weekdays > div { color: #111 !important; }
  .cal-ev-allday, .cal-span, .ctg-ev { color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cal-cell { border-color: #ccc !important; }
}

/* Combobox (select) — tmavé rozbaľovacie menu so svetlým textom (čitateľné options) */
select option, select optgroup { background-color: #131c33; color: var(--dz-text2); }
.util-select, .cal-jump, select.util-select { color-scheme: dark; }

/* Backbone — Sylex štýl: korálky (konektory/ochrany) na kábli */
.bb-bead { cursor: pointer; }
.bb-bead rect { fill: #161b22; stroke: #8DC63F; stroke-width: 1; }
.bb-bead:hover rect { fill: #243018; }
.bb-bead-lbl { font-family: var(--font); font-size: 8.5px; font-weight: 700; fill: #a8d977; }
.bb-inline-edit { position: absolute; z-index: 20; font-family: var(--font); font-size: 13px; font-weight: 600; padding: 3px 6px; border: 2px solid #38bdf8; border-radius: 5px; background: #0c1118; color: var(--dz-text2); box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.bb-parts { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.bb-part-chip { display: inline-flex; align-items: center; gap: 5px; background: #1c1c1c; color: #fff; font-size: 0.72rem; font-weight: 600; padding: 3px 4px 3px 8px; border-radius: 5px; }
.bb-part-chip button { background: none; border: none; color: rgba(var(--dz-fg-rgb),0.6); cursor: pointer; font-size: 0.75rem; padding: 0 2px; }
.bb-part-chip button:hover { color: var(--dz-red); }
.bb-part-add { display: flex; gap: 6px; }
.bb-part-add select { flex: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   FOTKY Z VÝROBY — galéria (tmavá stránka ako ostatné moduly)
   ══════════════════════════════════════════════════════════════════════════ */
.photos-page, .github-page, .remote-page, .fileserver-page { background: var(--hdr-bg); }
/* Tmavé stránky — pomocné texty musia mať explicitnú svetlú farbu */
.photos-page .hint, .github-page .hint, .remote-page .hint, .fileserver-page .hint { color: var(--dz-text2); font-size: 0.8rem; }
.remote-page .hint code { background: rgba(var(--dz-fg-rgb),0.08); color: var(--dz-text2); border-radius: 4px; padding: 1px 5px; }

.ph-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ph-chip {
  --chip-c: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.14);
  color: var(--dz-text2); font-size: 0.82rem; font-weight: 600;
  transition: all .15s ease;
}
.ph-chip:hover { border-color: var(--chip-c); }
.ph-chip.active { background: var(--chip-c); border-color: var(--chip-c); color: #fff; }
.ph-chip-n { font-size: 0.72rem; opacity: 0.7; font-weight: 700; }
.ph-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.ph-tag {
  background: none; border: 1px dashed rgba(var(--dz-fg-rgb),0.22); border-radius: 6px;
  padding: 2px 8px; font-size: 0.75rem; color: #93a5c0; cursor: pointer;
}
.ph-tag:hover { color: var(--dz-cyan); border-color: var(--dz-cyan); }
.ph-tag.active { background: rgba(34,211,238,0.14); border: 1px solid #22d3ee; color: var(--dz-cyan); font-weight: 600; }
.ph-tag span { opacity: 0.6; }

.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.ph-card {
  position: relative;
  background: #151b30; border: 1px solid rgba(var(--dz-fg-rgb),0.09); border-radius: 12px;
  overflow: hidden; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ph-card:hover { transform: translateY(-2px); border-color: rgba(var(--dz-fg-rgb),0.22); box-shadow: 0 8px 22px rgba(0,0,0,0.35); }
/* Režim označovania */
.ph-card.ph-selectable { cursor: pointer; }
.ph-card.ph-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ph-check { position: absolute; top: 7px; left: 7px; z-index: 3; background: rgba(10,15,32,0.72); border-radius: 6px; padding: 4px; display: flex; cursor: pointer; }
.ph-check input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.ph-card.ph-selected .ph-check { background: var(--accent); }

/* Panel hromadných operácií */
.ph-bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: rgba(8,145,178,0.1); border: 1px solid rgba(8,145,178,0.32); border-radius: 10px; padding: 9px 13px; margin-bottom: 12px; }
.ph-bulk-count { font-size: 0.84rem; color: var(--dz-text2); }
.ph-bulk-count b { color: #38bdf8; font-size: 1rem; }
.ph-bulk-spacer { flex: 1; }
.ph-bulk-badge, .ph-bulk-badge:empty { display: inline-block; }
.ph-bulk-badge { font-size: 0.78rem; font-weight: 600; color: #38bdf8; background: rgba(8,145,178,0.18); border-radius: 100px; padding: 1px 10px; margin-left: 6px; }
.ph-thumb { aspect-ratio: 4/3; background: #0a0f20; overflow: hidden; }
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.ph-card:hover .ph-thumb img { transform: scale(1.04); }
.ph-card-body { padding: 9px 11px 11px; }
.ph-card-title { font-weight: 600; font-size: 0.86rem; color: var(--dz-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-card-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ph-badge {
  --chip-c: var(--accent);
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--chip-c) 22%, transparent);
  color: color-mix(in srgb, var(--chip-c) 55%, #fff);
  border: 1px solid color-mix(in srgb, var(--chip-c) 45%, transparent);
}
.ph-mini-tag { font-size: 0.7rem; color: #a7b7cf; background: rgba(var(--dz-fg-rgb),0.08); border-radius: 5px; padding: 1px 6px; }
.ph-card-sub { margin-top: 5px; font-size: 0.72rem; color: var(--dz-text2); }

/* Drop zóna a výber súborov v modáli */
.ph-drop {
  border: 2px dashed var(--border); border-radius: 12px; padding: 22px 14px;
  text-align: center; color: var(--text-dim); cursor: pointer; transition: all .15s ease;
}
.ph-drop:hover, .ph-drop.drag { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.ph-drop-ico { font-size: 1.6rem; margin-bottom: 4px; }
.ph-pick-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ph-pick {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--page-bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 8px; font-size: 0.76rem; color: var(--text);
}
.ph-pick em { font-style: normal; color: var(--text-xdim); font-size: 0.7rem; }
.ph-pick button { background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 0; }
.ph-pick button:hover { color: #dc2626; }

/* Kategórie — správa */
.ph-cat-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ph-cat-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); }
.ph-cat-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.ph-cat-name { font-weight: 600; font-size: 0.86rem; flex: 1; color: var(--text); }
.ph-cat-n { font-size: 0.74rem; color: var(--text-xdim); }
.ph-cat-add { display: grid; grid-template-columns: 52px 1fr 42px auto; gap: 6px; align-items: center; }
.ph-cat-add input[type="color"] { height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }

/* Lightbox — tmavé pozadie ⇒ explicitné svetlé texty */
.ph-lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(6, 10, 26, 0.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ph-lightbox.hidden { display: none; }
.ph-lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; padding: 46px 70px 8px; }
.ph-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.ph-lb-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  background: rgba(var(--dz-fg-rgb),0.1); border: none; color: var(--dz-text2); font-size: 1.1rem;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
}
.ph-lb-close:hover { background: rgba(var(--dz-fg-rgb),0.22); }
.ph-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: rgba(var(--dz-fg-rgb),0.08); border: none; color: var(--dz-text2); font-size: 1.9rem;
  width: 46px; height: 66px; border-radius: 10px; cursor: pointer; line-height: 1;
}
.ph-lb-nav:hover { background: rgba(var(--dz-fg-rgb),0.2); }
.ph-lb-prev { left: 12px; }
.ph-lb-next { right: 12px; }
.ph-lb-panel {
  width: min(880px, calc(100% - 24px)); margin: 0 0 14px;
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: 12px; padding: 12px 16px; color: var(--dz-text2);
}
.ph-lb-title { font-weight: 700; font-size: 1rem; color: #f2f6fc; }
.ph-lb-info { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ph-lb-panel .ph-badge { background: rgba(var(--dz-fg-rgb),0.1); border-color: rgba(var(--dz-fg-rgb),0.2); color: var(--dz-text2); }
.ph-lb-panel .ph-mini-tag { background: rgba(var(--dz-fg-rgb),0.1); color: #b9c8dd; }
.ph-lb-sub { margin-top: 6px; font-size: 0.78rem; color: #93a5c0; }
.ph-lb-count { float: right; color: var(--dz-text2); }
.ph-lb-note { margin-top: 7px; font-size: 0.84rem; color: var(--dz-text2); }
.ph-lb-net { margin-top: 7px; font-size: 0.78rem; color: #9fb2cd; cursor: pointer; }
.ph-lb-net code { color: #bfe3ff; background: rgba(var(--dz-fg-rgb),0.08); padding: 2px 7px; border-radius: 5px; word-break: break-all; }
.ph-lb-net:hover code { background: rgba(var(--dz-fg-rgb),0.16); }
.ph-lb-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; align-items: center; }
.ph-lb-actions .btn-sm { background: rgba(var(--dz-fg-rgb),0.1); border: 1px solid rgba(var(--dz-fg-rgb),0.16); color: var(--dz-text2); }
.ph-lb-actions .btn-sm:hover { background: rgba(var(--dz-fg-rgb),0.22); }
.ph-lb-actions .btn-sm.danger { border-color: rgba(252,165,165,0.4); color: var(--dz-red); }
.ph-lb-actions .btn-sm.danger:hover { background: rgba(220,38,38,0.25); }
.ph-conv { display: inline-flex; gap: 5px; align-items: center; }
.ph-conv select {
  background: rgba(var(--dz-fg-rgb),0.1); border: 1px solid rgba(var(--dz-fg-rgb),0.16);
  color: var(--dz-text2); border-radius: 7px; padding: 4px 7px; font-size: 0.78rem;
}
.ph-conv select option { color: #1e293b; }

/* ══════════════════════════════════════════════════════════════════════════
   GITHUB — projekty a odkazy
   ══════════════════════════════════════════════════════════════════════════ */
.gh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.gh-card {
  background: #151b30; border: 1px solid rgba(var(--dz-fg-rgb),0.09); border-radius: 12px;
  padding: 13px 15px; cursor: pointer; touch-action: manipulation;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.gh-card:hover {
  transform: translateY(-2px);
  border-color: rgba(103,232,249,0.45);
  background: #182036;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28), 0 0 0 1px rgba(103,232,249,0.08);
}
.gh-card:active { transform: translateY(0); }
.gh-card:focus-visible { outline: 2px solid var(--dz-cyan); outline-offset: 2px; }
.gh-card-head { display: flex; align-items: center; gap: 8px; color: var(--dz-text2); }
.gh-name { font-weight: 700; font-size: 0.95rem; color: #7cc0ff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.gh-name:hover { text-decoration: underline; }
span.gh-name { color: var(--dz-text2); }
.gh-lock { font-size: 0.8rem; }
.gh-status { margin-left: auto; font-size: 0.68rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.gh-st-active   { background: rgba(34,197,94,0.16); color: var(--dz-green); }
.gh-st-archived { background: rgba(148,163,184,0.16); color: #a8b7c9; }
.gh-st-planned  { background: rgba(245,158,11,0.16); color: var(--dz-amber); }
.gh-desc { margin-top: 7px; font-size: 0.83rem; color: #9fb2cd; }
.gh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 9px; font-size: 0.76rem; color: var(--dz-text2); }
.gh-lang { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--dz-text2); }
.gh-lang-dot { width: 10px; height: 10px; border-radius: 50%; }
.gh-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.gh-link {
  font-size: 0.75rem; color: var(--dz-cyan); text-decoration: none;
  background: rgba(34,211,238,0.12); border-radius: 6px; padding: 2px 9px;
}
.gh-link:hover { text-decoration: underline; }
.gh-link-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 6px; }
.chk-line { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; cursor: pointer; }

/* ══════════════════════════════════════════════════════════════════════════
   VZDIALENÉ PRIPOJENIE — RustDesk
   ══════════════════════════════════════════════════════════════════════════ */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rc-card {
  background: #151b30; border: 1px solid rgba(var(--dz-fg-rgb),0.09); border-radius: 12px;
  padding: 13px 15px; cursor: pointer; touch-action: manipulation;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.rc-card:hover {
  transform: translateY(-2px);
  border-color: rgba(103,232,249,0.45);
  background: #182036;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28), 0 0 0 1px rgba(103,232,249,0.08);
}
.rc-card:active { transform: translateY(0); }
.rc-card:focus-visible { outline: 2px solid var(--dz-cyan); outline-offset: 2px; }
.rc-card-head { display: flex; align-items: center; gap: 8px; }
.rc-os { font-size: 1.05rem; }
.rc-name { font-weight: 700; font-size: 0.95rem; color: var(--dz-text2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-id-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; }
.rc-idc {
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.14); border-radius: 7px;
  padding: 4px 10px; color: #e6f1ff;
}
.rc-connect { text-decoration: none; margin-left: auto; }
.rc-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; font-size: 0.78rem; color: var(--dz-text2); }
.rc-meta code { background: rgba(var(--dz-fg-rgb),0.08); border-radius: 4px; padding: 1px 5px; color: var(--dz-text2); }
.rc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.rc-note { margin-top: 8px; font-size: 0.78rem; color: var(--dz-text2); }

/* ══════════════════════════════════════════════════════════════════════════
   EDITOR OBRÁZKOV — anotácie pre postupy
   ══════════════════════════════════════════════════════════════════════════ */
.ann-modal {
  position: fixed; inset: 0; z-index: 1200;
  background: #0a0f1e; display: flex; flex-direction: column;
}
.ann-modal.hidden { display: none !important; }
.ann-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: #0d1225; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.1);
  flex-shrink: 0;
}
.ann-title { font-weight: 700; color: var(--dz-text2); font-size: 0.98rem; }
.ann-title .ann-sub { font-weight: 400; color: var(--dz-text2); font-size: 0.78rem; margin-left: 8px; }
.ann-top-actions { display: flex; align-items: center; gap: 8px; }
.ann-x {
  background: rgba(var(--dz-fg-rgb),0.1); border: none; color: var(--dz-text2); font-size: 1rem;
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
}
.ann-x:hover { background: rgba(var(--dz-fg-rgb),0.22); }

.ann-body { flex: 1; min-height: 0; display: flex; }
.ann-tools {
  flex-shrink: 0; width: 58px; background: #0d1225; border-right: 1px solid rgba(var(--dz-fg-rgb),0.1);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0;
}
.ann-tool {
  width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
  background: rgba(var(--dz-fg-rgb),0.05); border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  color: var(--dz-text2); font-size: 1.15rem; display: flex; align-items: center; justify-content: center;
  transition: all .13s ease;
}
.ann-tool:hover { background: rgba(var(--dz-fg-rgb),0.14); }
.ann-tool.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ann-tsep { width: 30px; height: 1px; background: rgba(var(--dz-fg-rgb),0.14); margin: 4px 0; }

.ann-stage-wrap {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: 18px; overflow: hidden;
  background-color: #0a0f1e;
  background-image:
    linear-gradient(45deg, #12182b 25%, transparent 25%, transparent 75%, #12182b 75%),
    linear-gradient(45deg, #12182b 25%, transparent 25%, transparent 75%, #12182b 75%);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
}
#annSvg {
  max-width: 100%; max-height: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5); border-radius: 4px;
  touch-action: none; cursor: crosshair;
}
#annSvg [data-idx] { cursor: pointer; }

.ann-panel {
  flex-shrink: 0; width: 232px; background: #0d1225; border-left: 1px solid rgba(var(--dz-fg-rgb),0.1);
  padding: 16px 14px; overflow-y: auto; color: var(--dz-text2);
}
.ann-p-sec { margin-bottom: 16px; }
.ann-p-lbl { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dz-text2); margin-bottom: 7px; font-weight: 600; }
.ann-p-lbl b { color: var(--dz-cyan); }
.ann-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ann-sw { width: 100%; aspect-ratio: 1; border-radius: 7px; cursor: pointer; border: 2px solid rgba(var(--dz-fg-rgb),0.18); }
.ann-sw.active { border-color: var(--dz-cyan); box-shadow: 0 0 0 2px rgba(34,211,238,0.4); }
.ann-panel input[type="range"] { width: 100%; accent-color: var(--accent); }
.ann-panel textarea {
  width: 100%; background: rgba(var(--dz-fg-rgb),0.06); border: 1px solid rgba(var(--dz-fg-rgb),0.14);
  border-radius: 8px; color: var(--dz-text2); padding: 8px; font-family: var(--font); font-size: 0.85rem; resize: vertical;
}
.ann-del { width: 100%; background: rgba(239,68,68,0.16); color: var(--dz-red); border: 1px solid rgba(239,68,68,0.35); margin-bottom: 12px; }
.ann-del:hover { background: rgba(239,68,68,0.28); }
.ann-p-hint { font-size: 0.74rem; color: var(--dz-text2); line-height: 1.5; border-top: 1px solid rgba(var(--dz-fg-rgb),0.1); padding-top: 12px; }

@media (max-width: 720px) {
  .ann-panel { width: 170px; }
  .ann-tools { width: 50px; }
  .ann-tool { width: 38px; height: 38px; font-size: 1rem; }
  .ann-title .ann-sub { display: none; }
}

/* Výber obrázka — galéria Fotiek v modáli */
.pk-box { max-width: 880px; width: 92vw; }
.pk-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.pk-upload { cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pk-chip {
  padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
  font-size: 0.8rem; font-weight: 600;
}
.pk-chip:hover { border-color: var(--accent); }
.pk-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
  max-height: 52vh; overflow-y: auto; padding: 2px;
}
.pk-tile {
  border: 1px solid var(--border); border-radius: 9px; overflow: hidden; cursor: pointer;
  background: #0d1225; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pk-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.pk-tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.pk-tile-cap { padding: 5px 7px; font-size: 0.72rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-empty { grid-column: 1/-1; text-align: center; color: var(--text-dim); padding: 30px 16px; font-size: 0.88rem; }

/* ==============================
   HLASOVÝ DIKTÁT (Speech-to-text SK)
   ============================== */
.dict-panel { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dict-panel.hidden { display: none; }
.dict-backdrop { position: absolute; inset: 0; background: rgba(6,10,22,0.62); backdrop-filter: blur(2px); }
.dict-box { position: relative; width: 100%; max-width: 560px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.45); display: flex; flex-direction: column; max-height: 88vh; overflow: hidden; }
.dict-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.dict-head h2 { font-family: var(--font-title); font-size: 1.12rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.dict-lang { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; background: rgba(0,212,255,0.14); color: #0284c7; border: 1px solid rgba(0,212,255,0.35); padding: 2px 7px; border-radius: 999px; }
.dict-body { padding: 16px 18px; overflow-y: auto; }
.dict-foot { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--border); background: var(--page-bg); }

.dict-target { font-size: 0.8rem; color: var(--text-dim); background: var(--page-bg); border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; margin-bottom: 12px; }
.dict-target strong { color: var(--text); }
.dict-target.dict-target-none { color: #b45309; background: #fff7ed; border-color: #fed7aa; }

.dict-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dict-rec { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text); font-family: var(--font); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.dict-rec:hover { border-color: var(--border-focus); }
.dict-rec-ico { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; flex-shrink: 0; }
.dict-rec.recording { background: #fef2f2; border-color: rgba(239,68,68,0.5); color: #b91c1c; }
.dict-rec.recording .dict-rec-ico { animation: dictPulse 1s ease-in-out infinite; }
@keyframes dictPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.55; } }

.dict-status { font-size: 0.8rem; color: var(--text-dim); }
.dict-status-rec { color: #dc2626; font-weight: 600; }
.dict-status-ok { color: #16a34a; }
.dict-status-warn { color: #b45309; }
.dict-status-error { color: #dc2626; }

.dict-lbl { display: block; font-size: 0.76rem; font-weight: 600; color: var(--text-dim); margin-bottom: 5px; }
.dict-text { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-family: var(--font); font-size: 0.92rem; line-height: 1.5; color: var(--text); background: #fff; outline: none; resize: vertical; }
.dict-text:focus { border-color: var(--border-focus); }
.dict-interim { min-height: 18px; font-size: 0.82rem; color: #94a3b8; font-style: italic; margin-top: 5px; }

.dict-audio { margin-top: 10px; }
.dict-audio-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--page-bg); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.dict-player { height: 34px; max-width: 100%; flex: 1; min-width: 180px; }

@media (max-width: 560px) { .dict-foot { flex-wrap: wrap; } .dict-foot > div[style] { display: none; } }

/* Mikrofónové tlačidlo priamo pri texte operácie — animované, aby si ho každý všimol */
.proc-step-dictrow { margin: 7px 0 2px; }
.proc-step-mic {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(0,212,255,0.55);
  background: linear-gradient(180deg, #ecfeff, #e0f2fe);
  color: #0369a1; font-family: var(--font); font-size: 0.78rem; font-weight: 700;
  cursor: pointer; position: relative;
  animation: micAttention 2.2s ease-in-out infinite;
  transition: transform .12s, background .15s;
}
.proc-step-mic:hover { background: linear-gradient(180deg, #cffafe, #bae6fd); transform: translateY(-1px); }
.proc-step-mic:active { transform: translateY(0); }
.proc-step-mic-ico { font-size: 0.95rem; line-height: 1; animation: micWiggle 2.2s ease-in-out infinite; }
.proc-step-mic-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.6); animation: micDot 1.3s ease-in-out infinite;
}
@keyframes micAttention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,212,255,0.5); }
  50%      { box-shadow: 0 0 0 7px rgba(0,212,255,0); }
}
@keyframes micDot {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  50%      { transform: scale(1.35); box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}
@keyframes micWiggle {
  0%, 92%, 100% { transform: rotate(0); }
  94% { transform: rotate(-12deg); }
  96% { transform: rotate(12deg); }
  98% { transform: rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .proc-step-mic, .proc-step-mic-ico, .proc-step-mic-dot { animation: none; }
}

/* ==============================
   ADMIN → MODULY (skrývanie modulov z navigácie)
   ============================== */
.nav-hidden { display: none !important; }

.modules-count { font-size: 0.76rem; color: rgba(var(--dz-fg-rgb),0.5); }
.modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
/* Vypnutá funkcia (Pomoc/AI Asistent) — skryť plávajúce tlačidlo */
.feature-off { display: none !important; }
/* Karty funkcií s popisom — povoliť zalomenie a viacriadkový label */
#featuresGrid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
#featuresGrid .mod-item { align-items: flex-start; }
#featuresGrid .mod-label { white-space: normal; overflow: visible; }
#featuresGrid .mod-ico { margin-top: 1px; }
#featuresGrid .mod-switch { margin-top: 2px; }
.feat-desc { display: block; font-size: 0.72rem; font-weight: 400; color: rgba(var(--dz-fg-rgb),0.5); margin-top: 3px; line-height: 1.35; }
#featuresGrid .mod-item.mod-off .mod-label { text-decoration: none; }
#featuresGrid .mod-item.mod-off .feat-desc { color: rgba(148,163,184,0.55); }
.mod-item {
  display: flex; align-items: center; gap: 11px;
  background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.1);
  border-radius: 11px; padding: 11px 13px; cursor: pointer;
  transition: border-color .14s, background .14s, opacity .14s;
}
.mod-item:hover { background: rgba(var(--dz-fg-rgb),0.07); border-color: rgba(0,212,255,0.35); }
.mod-item.mod-off { opacity: 0.52; }
.mod-ico { font-size: 1.15rem; line-height: 1; flex-shrink: 0; width: 22px; text-align: center; }
.mod-label { flex: 1; font-size: 0.86rem; font-weight: 600; color: var(--dz-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-item.mod-off .mod-label { color: #94a3b8; text-decoration: line-through; text-decoration-color: rgba(148,163,184,0.5); }

/* Prepínač */
.mod-switch { flex-shrink: 0; position: relative; display: inline-flex; align-items: center; }
.mod-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mod-track { width: 38px; height: 21px; border-radius: 999px; background: rgba(var(--dz-fg-rgb),0.18); position: relative; transition: background .16s; }
.mod-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .16s; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.mod-switch input:checked + .mod-track { background: linear-gradient(90deg,#00d4ff,#22c55e); }
.mod-switch input:checked + .mod-track::after { transform: translateX(17px); }

/* ==============================
   VLASTNÍCI PRODUKTOV (powners) — tmavá stránka + editovateľná tabuľka
   ============================== */
.powners-page { background: var(--hdr-bg); }
.powners-inner { max-width: 1400px; margin: 0 auto; padding: 22px 26px 40px; }

.powners-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 14px; }
.powners-kpi { background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: 12px; padding: 10px 16px; min-width: 104px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; font-family: inherit; text-align: left; position: relative; transition: transform .12s, border-color .14s, background .14s, box-shadow .14s; }
.powners-kpi:hover { transform: translateY(-2px); background: rgba(var(--dz-fg-rgb),0.07); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
.powners-kpi.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 4px 14px rgba(8,145,178,0.18); }
.powners-kpi.active::after { content: '✓ filter'; position: absolute; top: 7px; right: 9px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; color: var(--accent); text-transform: uppercase; }
.powners-kpi.pk-done.active { border-color: var(--dz-green); box-shadow: inset 0 0 0 1px var(--dz-green), 0 4px 14px rgba(21,128,61,0.16); }
.powners-kpi.pk-done.active::after { color: var(--dz-green); }
.powners-kpi.pk-wip.active { border-color: var(--dz-amber); box-shadow: inset 0 0 0 1px var(--dz-amber); }
.powners-kpi.pk-wip.active::after { color: var(--dz-amber); }
.powners-kpi.pk-nok.active { border-color: var(--dz-red); box-shadow: inset 0 0 0 1px var(--dz-red); }
.powners-kpi.pk-nok.active::after { color: var(--dz-red); }
.powners-kpi.pk-warn.active { border-color: #fb923c; box-shadow: inset 0 0 0 1px #fb923c; }
.powners-kpi.pk-warn.active::after { color: #fb923c; }
.powners-kpi .pk-num { font-size: 1.5rem; font-weight: 800; color: var(--dz-text); line-height: 1; font-variant-numeric: tabular-nums; }
.powners-kpi .pk-lbl { font-size: 0.72rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.03em; }
.powners-kpi.pk-done .pk-num { color: var(--dz-green); }
.powners-kpi.pk-wip .pk-num { color: var(--dz-amber); }
.powners-kpi.pk-nok .pk-num { color: var(--dz-red); }
.powners-kpi.pk-warn .pk-num { color: #fb923c; }

.powners-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.powners-count { font-size: 0.78rem; color: #94a3b8; margin-left: auto; }

.powners-table-wrap { overflow-x: auto; border: 1px solid rgba(var(--dz-fg-rgb),0.09); border-radius: 12px; background: rgba(var(--dz-fg-rgb),0.02); }
.powners-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 1000px; }
.powners-table th { text-align: left; padding: 9px 11px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #94a3b8; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.12); white-space: nowrap; position: sticky; top: 0; background: var(--dz-surface2); z-index: 1; }
.powners-table td { padding: 8px 11px; border-bottom: 1px solid rgba(var(--dz-fg-rgb),0.06); color: var(--dz-text2); vertical-align: top; }
.powners-table tbody tr { cursor: pointer; transition: background .12s; }
.powners-table tbody tr:hover td { background: rgba(0,212,255,0.06); }
.pwo-nr { color: #64748b; font-variant-numeric: tabular-nums; }
.pwo-prod { font-weight: 700; color: var(--dz-text); white-space: nowrap; }
.pwo-desc { min-width: 200px; color: var(--dz-text2); }
.pwo-dim { color: #94a3b8; }
.pwo-todo { max-width: 220px; color: var(--dz-red); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwo-hist-col { white-space: nowrap; }
.pwo-hist-dot { font-size: 0.72rem; color: var(--dz-cyan); }
.powners-empty { text-align: center; color: #94a3b8; padding: 30px 16px; }

/* Stavové odznaky */
.pwo-badge { display: inline-block; font-size: 0.68rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; letter-spacing: 0.03em; white-space: nowrap; }
.pwo-st-nok { color: var(--dz-red); background: rgba(239,68,68,0.22); }
.pwo-st-wip { color: var(--dz-amber); background: rgba(245,158,11,0.22); }
.pwo-st-done { color: var(--dz-green); background: rgba(34,197,94,0.22); }
.pwo-st-other { color: var(--dz-text2); background: rgba(var(--dz-fg-rgb),0.1); }

/* História zmien v modáli (svetlé pozadie modalu) */
.pwo-history { margin-top: 16px; }
.pwo-hist-hdr { font-size: 0.82rem; font-weight: 700; color: var(--text); margin-bottom: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.pwo-hist-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.pwo-hist-item { background: var(--page-bg); border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; }
.pwo-hist-meta { font-size: 0.76rem; color: var(--text-dim); }
.pwo-hist-meta strong { color: var(--text); }
.pwo-hist-changes { margin: 5px 0 0; padding-left: 16px; font-size: 0.78rem; color: var(--text); }
.pwo-hist-changes li { margin: 2px 0; }
.pwo-hc-field { font-weight: 600; }
.pwo-hc-from { color: #b91c1c; text-decoration: line-through; }
.pwo-hc-to { color: #15803d; font-weight: 600; }

/* =============================================================================
   SVETLÉ MOTÍVY NA CELÝ WEB (Admin → Vzhľad → Web téma)
   Fungujú cez „dark zone" tokeny — flipnú podklad/okraje/text celej appky.
   ============================================================================= */
body.theme-light {
  --dz-fg-rgb: 30,41,59;
  --hdr-bg: #e9eef7;
  --hdr-border: rgba(30,41,59,0.12);
  --hdr-text: #1e293b;
  --hdr-dim: #55637a;
  --dz-text: #0f172a;
  --dz-text2: #334155;
  --page-bg: #f4f7fc;
  --card-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --border: #dbe3ee;
  --dz-surface2: #e4ebf5;
  --dz-cyan:#0e7490; --dz-amber:#b45309; --dz-green:#15803d; --dz-purple:#6d28d9; --dz-blue:#1d4ed8; --dz-red:#dc2626;
  color-scheme: light;
}
body.theme-warm {
  --dz-fg-rgb: 64,50,32;
  --hdr-bg: #f0e7d7;
  --hdr-border: rgba(64,50,32,0.14);
  --hdr-text: #3a2e1c;
  --hdr-dim: #6d5c42;
  --dz-text: #2a2015;
  --dz-text2: #574733;
  --page-bg: #ece2d0;
  --card-bg: #fbf6ec;
  --sidebar-bg: #fbf6ec;
  --border: #e3d6bf;
  --dz-surface2: #ece0cc;
  --dz-cyan:#0e7490; --dz-amber:#a16207; --dz-green:#15803d; --dz-purple:#6d28d9; --dz-blue:#1d4ed8; --dz-red:#b91c1c;
  --accent: #b45309; --accent-light: #fdecd8; --accent2: #9a3412; --border-focus: #b45309;
  color-scheme: light;
}

/* Opravy natvrdo bielych textov na tmavých plochách (v hlavičke), aby boli čitateľné */
body.theme-light .nav-link:hover, body.theme-light .nav-link.active,
body.theme-warm .nav-link:hover,  body.theme-warm .nav-link.active { color: var(--hdr-text); }
body.theme-light .header, body.theme-warm .header { backdrop-filter: none; }
/* jemný tieň kariet vo svetlom (na tmavej bol priesvitný okraj) */
body.theme-light .prod-kpis .prod-kpi, body.theme-warm .prod-kpis .prod-kpi,
body.theme-light .powners-kpi, body.theme-warm .powners-kpi { box-shadow: var(--shadow-sm); }

/* Admin → výber web témy */
.appr-webthemes { display: flex; flex-wrap: wrap; gap: 12px; }
.appr-web { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; background: rgba(var(--dz-fg-rgb),0.04); border: 1px solid rgba(var(--dz-fg-rgb),0.12); border-left: 3px solid transparent; border-radius: 12px; padding: 11px 14px; cursor: pointer; font-family: inherit; min-width: 150px; transition: border-color .14s, background .14s; }
.appr-web:hover { background: rgba(var(--dz-fg-rgb),0.07); }
.appr-web.active { border-left-color: var(--accent); background: rgba(8,145,178,0.1); }
.apw-prev { display: flex; width: 100%; height: 34px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(var(--dz-fg-rgb),0.15); margin-bottom: 5px; }
.apw-prev i { flex: 1; }
.apw-dark i:first-child { background: #0d1225; } .apw-dark i:last-child { background: var(--dz-surface2); }
.apw-light i:first-child { background: #e9eef7; } .apw-light i:last-child { background: #ffffff; }
.apw-warm i:first-child { background: #f0e7d7; } .apw-warm i:last-child { background: #fbf6ec; }
.apw-name { font-size: 0.86rem; font-weight: 700; color: var(--dz-text); }
.apw-sub { font-size: 0.7rem; color: #94a3b8; }

body.theme-light .prod-sub, body.theme-warm .prod-sub { color: #64748b; }

/* ==============================
   ANOTÁCIE OBRÁZKA OPERÁCIE (bubliny so šípkami)
   ============================== */
.pdv-fig-img { position: relative; display: block; line-height: 0; container-type: inline-size; }
.pdv-fig-img > img { display: block; width: 100%; height: auto; }
.pdv-annots { position: absolute; inset: 0; pointer-events: none; }
.pdv-annot-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pdv-annot {
  position: absolute; transform: translate(-50%, -50%);
  /* veľkosť sa škáluje so šírkou obrázka (cqw = 1 % šírky); rozmery v em → škálujú s písmom */
  font-size: calc(var(--afs, 4) * 1cqw);
  width: max-content; max-width: 72cqw;
  padding: 0.28em 0.6em; border-style: solid; border-width: 0.14em; border-color: #e11d48; border-radius: 0.5em;
  background: #fff; box-shadow: 0 0.14em 0.4em rgba(0,0,0,0.25);
  line-height: 1.22; font-weight: 600; text-align: center; white-space: pre-wrap; overflow-wrap: break-word;
}
.pdv-annot-txt { display: block; }
/* Edit režim v modáli */
.pdv-annots-edit { pointer-events: none; }
.pdv-annots-edit .pdv-annot { pointer-events: auto; cursor: move; user-select: none; }
.pdv-annots-edit .pdv-annot.sel { outline: 2px dashed #00d4ff; outline-offset: 2px; }
.pdv-annot-tip {
  position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; border: 3px solid #00d4ff; box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  cursor: crosshair; pointer-events: auto; z-index: 3;
}

/* Modal editora */
.annot-box { max-width: 1000px; width: 96vw; }
.annot-body { display: flex; gap: 16px; padding: 16px 18px; align-items: flex-start; }
@media (max-width: 720px) { .annot-body { flex-direction: column; } }
.annot-stage-wrap { flex: 1; min-width: 0; }
.annot-stage { position: relative; display: inline-block; max-width: 100%; background: #0b1020; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); container-type: inline-size; }
.annot-img { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; }
.annot-hint { font-size: 0.74rem; color: var(--text-dim); margin-top: 8px; }
.annot-side { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 720px) { .annot-side { width: 100%; } }
.annot-ctl { display: flex; flex-direction: column; gap: 8px; }
.annot-empty { font-size: 0.8rem; color: var(--text-dim); padding: 10px 0; }
.annot-lbl { font-size: 0.76rem; font-weight: 600; color: var(--text-dim); }
.annot-lbl b { color: var(--text); }
.annot-in { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-family: var(--font); font-size: 0.85rem; color: var(--text); background: #fff; resize: vertical; }
.annot-range { width: 100%; }
.annot-colors { display: flex; flex-direction: column; gap: 6px; }
.annot-colors label { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--text); }
.annot-colors input[type=color] { width: 44px; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; padding: 0; }
.annot-chk { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--text); cursor: pointer; }
.annot-delbtn { width: 100%; margin-top: 4px; justify-content: center; }

/* ==============================
   KALENDÁR — moderný loading
   ============================== */
.cal-wrap-rel { position: relative; }
.cal-loader {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(13,18,37,0.55); backdrop-filter: blur(3px); border-radius: 14px;
  animation: calLoaderIn .18s ease;
}
.calendar-page.cal-light .cal-loader { background: rgba(244,247,252,0.62); }
@keyframes calLoaderIn { from { opacity: 0; } to { opacity: 1; } }
.cal-spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(0,212,255,0.18); border-top-color: var(--accent);
  animation: calSpin 0.8s linear infinite;
}
@keyframes calSpin { to { transform: rotate(360deg); } }
.cal-loader-txt { font-size: 0.86rem; font-weight: 600; color: #cbd5e1; letter-spacing: 0.02em; }
.calendar-page.cal-light .cal-loader-txt { color: #334155; }

/* Jemný indikátor načítania napojených ICS kalendárov */
.cal-feed-loading {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 0.76rem; font-weight: 600; color: #7dd3fc;
  background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.28);
  border-radius: 999px; padding: 4px 12px;
}
.cal-feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: calFeedPulse 1s ease-in-out infinite; }
@keyframes calFeedPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } }

/* ═══════════════ FILE SERVER — zdieľanie súborov pre zákazníkov ═══════════════ */
.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.fs-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 11px;
  box-shadow: var(--shadow-sm); transition: box-shadow .18s, transform .18s;
}
.fs-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.fs-card-off { opacity: .72; }
.fs-card-title { display: flex; align-items: center; gap: 10px; }
.fs-card-title h3 { margin: 0; font-size: 1rem; color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.fs-badge { flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; }
.fs-badge-on  { background: #e8f4d4; color: #4d6607; }
.fs-badge-off { background: #fee2e2; color: #b91c1c; }
.fs-note { margin: 5px 0 0; font-size: .8rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-link-row { display: flex; gap: 6px; }
.fs-link-row input {
  flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--page-bg); color: var(--accent2); font-size: .78rem; font-family: 'Consolas', monospace; cursor: copy;
}
.fs-btn-sm { padding: 6px 10px !important; font-size: .78rem !important; display: inline-flex; align-items: center; gap: 5px; }
.fs-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .76rem; color: var(--text-dim); }
.fs-files { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.fs-file { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--page-bg); }
.fs-file-name { flex: 1; min-width: 0; font-size: .8rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-file-meta { flex: none; font-size: .72rem; color: var(--text-xdim); }
.fs-file-del { flex: none; border: none; background: none; color: var(--text-xdim); cursor: pointer; font-size: .8rem; padding: 2px 5px; border-radius: 5px; }
.fs-file-del:hover { color: #dc2626; background: #fee2e2; }
.fs-nofiles { font-size: .78rem; color: var(--text-xdim); font-style: italic; padding: 4px 2px; }
.fs-drop {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 12px; border: 1.5px dashed var(--border); border-radius: 10px;
  color: var(--text-dim); font-size: .78rem; cursor: pointer; text-align: center;
  transition: border-color .16s, background .16s, color .16s;
}
.fs-drop:hover, .fs-drop.drag { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.fs-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.fs-actions .btn-delete { margin-left: auto; }
.fs-empty { grid-column: 1 / -1; text-align: center; color: var(--text-dim); padding: 46px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fs-empty svg { opacity: .5; }
/* Modal s prístupmi */
.fs-cred-row { display: flex; gap: 6px; align-items: flex-start; }
.fs-cred-row input, .fs-cred-row textarea {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--page-bg); color: var(--text); font-size: .82rem; font-family: 'Consolas', monospace; resize: vertical;
}
.fs-cred-pass { font-size: 1.02rem !important; font-weight: 700; letter-spacing: .1em; color: #4d6607 !important; background: #f3f9e4 !important; border-color: #cfe39a !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   GPN — Golden PN (ticket systém požiadaviek)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Tmavá stránka (rovnaká rodina ako Výroba / Workflow / Vlastníci) */
.gpn-page { background: var(--hdr-bg); }
.gpn-inner { padding: 22px 26px 60px; max-width: 1320px; margin: 0 auto; }

/* Dashboard KPI karty */
.gpn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.gpn-kpi {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: var(--radius-lg);
  background: rgba(var(--dz-fg-rgb),0.04); cursor: pointer; transition: transform .12s, border-color .14s, background .14s, box-shadow .14s; text-align: left;
}
.gpn-kpi:hover { transform: translateY(-2px); background: rgba(var(--dz-fg-rgb),0.07); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
.gpn-kpi.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 4px 14px rgba(8,145,178,0.18); }
.gpn-kpi-ico { font-size: 1.1rem; }
.gpn-kpi-n { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--dz-text); font-family: var(--font-title); font-variant-numeric: tabular-nums; }
.gpn-kpi-lbl { font-size: .78rem; color: #94a3b8; }

/* Filtre */
.gpn-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.gpn-filter {
  padding: 7px 10px; border: 1px solid rgba(var(--dz-fg-rgb),0.14); border-radius: var(--radius);
  background: rgba(var(--dz-fg-rgb),0.05); color: var(--dz-text2); font-size: .8rem; max-width: 170px;
  color-scheme: dark;
}
.gpn-filter:focus { outline: none; border-color: var(--accent); }
.gpn-filter option { background: var(--dz-surface2); color: var(--dz-text2); }

/* Zoznam ticketov */
.gpn-list { display: flex; flex-direction: column; gap: 10px; }
.gpn-card {
  display: flex; justify-content: space-between; gap: 16px; align-items: stretch;
  padding: 13px 16px; border: 1px solid rgba(var(--dz-fg-rgb),0.1); border-radius: var(--radius-lg);
  background: rgba(var(--dz-fg-rgb),0.03); cursor: pointer; transition: transform .12s, border-color .14s, background .14s, box-shadow .14s;
}
.gpn-card:hover { border-color: var(--accent); background: rgba(0,212,255,0.06); box-shadow: 0 6px 16px rgba(0,0,0,0.2); transform: translateY(-1px); }
.gpn-card-l { min-width: 0; flex: 1; }
.gpn-card-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 5px; }
.gpn-num { font-weight: 800; font-family: 'Consolas', monospace; font-size: .84rem; color: var(--dz-cyan); }
.gpn-type-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; font-weight: 700; }
.gpn-card-title { font-weight: 700; color: var(--dz-text); font-size: .96rem; margin-bottom: 4px; }
.gpn-card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .78rem; color: #94a3b8; }
.gpn-unassigned { color: var(--dz-amber); }
.gpn-card-r { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; min-width: 92px; }
.gpn-mini-bar { width: 92px; height: 6px; border-radius: 3px; background: rgba(var(--dz-fg-rgb),0.12); overflow: hidden; }
.gpn-mini-fill { height: 100%; background: linear-gradient(90deg, var(--dz-cyan), var(--dz-green)); border-radius: 3px; }
.gpn-mini-lbl { font-size: .7rem; color: #64748b; }
.gpn-card-date { font-size: .72rem; color: #64748b; }

/* Badge (stav / priorita) */
.gpn-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .7rem; font-weight: 700; line-height: 1.5; }
.gpn-st-new    { background: #e0e7ff; color: #3730a3; }
.gpn-st-rev    { background: #cffafe; color: #155e75; }
.gpn-st-prog   { background: #dbeafe; color: #1e40af; }
.gpn-st-wait   { background: #fef3c7; color: #92400e; }
.gpn-st-appr   { background: #ede9fe; color: #5b21b6; }
.gpn-st-ok     { background: #d1fae5; color: #065f46; }
.gpn-st-done   { background: #dcfce7; color: #166534; }
.gpn-st-closed { background: #e2e8f0; color: #475569; }
.gpn-pr-low    { background: #f1f5f9; color: #64748b; }
.gpn-pr-normal { background: #e0f2fe; color: #075985; }
.gpn-pr-high   { background: #ffedd5; color: #9a3412; }
.gpn-pr-urgent { background: #fee2e2; color: #991b1b; }

/* Termín tag */
.gpn-dl-tag { font-size: .74rem; }
.gpn-dl-late { color: var(--danger); font-weight: 700; }
.gpn-dl-soon { color: var(--warning); font-weight: 600; }
.gpn-dl-ok { color: var(--success); }

/* Formulár */
.gpn-modal-box { max-width: 820px; }
.gpn-form-body { max-height: 72vh; overflow-y: auto; }
.gpn-form-sec {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800;
  color: var(--accent2); margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.gpn-form-sec:first-child { margin-top: 0; }
.gpn-sec-with-btn { display: flex; justify-content: space-between; align-items: center; }
.gpn-form-hint { font-size: .78rem; color: var(--text-dim); margin-top: 12px; padding: 9px 12px; background: var(--accent-light); border-radius: var(--radius); }
.gpn-subtable-wrap { overflow-x: auto; }
.gpn-subtable { width: 100%; border-collapse: collapse; font-size: .82rem; }
.gpn-subtable th { text-align: left; font-size: .72rem; color: var(--text-dim); font-weight: 600; padding: 4px 6px; }
.gpn-subtable td { padding: 2px 4px; }
.gpn-in { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--page-bg); color: var(--text); font-size: .82rem; }
.gpn-in:focus { outline: none; border-color: var(--border-focus); }

/* Detail ticketu */
.gpn-detail-box { max-width: 1080px; }
.gpn-detail-header h2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gpn-detail-body { max-height: 78vh; overflow-y: auto; }

/* Workflow lišta */
.gpn-wf { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 6px 2px 16px; }
.gpn-wf-step { display: flex; align-items: center; gap: 6px; opacity: .5; }
.gpn-wf-step .gpn-wf-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--text-xdim); flex: none; }
.gpn-wf-lbl { font-size: .72rem; color: var(--text-dim); white-space: nowrap; }
.gpn-wf-step.passed { opacity: 1; }
.gpn-wf-step.passed .gpn-wf-dot { background: var(--success); }
.gpn-wf-step.active { opacity: 1; }
.gpn-wf-step.active .gpn-wf-dot { background: var(--accent2); box-shadow: 0 0 0 4px var(--accent2-light); }
.gpn-wf-step.active .gpn-wf-lbl { font-weight: 800; color: var(--text-bright); }
.gpn-wf-sep { flex: 1; min-width: 10px; height: 2px; background: var(--border); }
.gpn-wait-banner { background: #fef3c7; color: #92400e; padding: 8px 12px; border-radius: var(--radius); font-size: .82rem; font-weight: 600; margin-bottom: 14px; }

.gpn-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; }
.gpn-detail-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.gpn-detail-side { display: flex; flex-direction: column; gap: 14px; }
.gpn-sec { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; background: var(--card-bg); }
.gpn-sec-hd { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: var(--accent2); margin-bottom: 9px; display: flex; justify-content: space-between; align-items: center; }
.gpn-kvs { display: flex; flex-direction: column; gap: 5px; }
.gpn-kv { display: flex; gap: 10px; font-size: .84rem; }
.gpn-k { color: var(--text-dim); min-width: 140px; flex: none; }
.gpn-v { color: var(--text-bright); font-weight: 600; }
.gpn-desc { margin-top: 10px; font-size: .86rem; color: var(--text); line-height: 1.5; padding: 8px 10px; background: var(--page-bg); border-radius: var(--radius); }
.gpn-none { color: var(--text-xdim); font-size: .82rem; font-style: italic; }

.gpn-vtable { width: 100%; border-collapse: collapse; font-size: .82rem; }
.gpn-vtable th { text-align: left; font-size: .72rem; color: var(--text-dim); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.gpn-vtable td { padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--text); }

/* Checklist */
.gpn-check-pct { font-size: .74rem; font-weight: 700; color: var(--text-dim); }
.gpn-detail-bar { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.gpn-detail-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--success)); }
.gpn-checks { display: flex; flex-direction: column; gap: 3px; }
.gpn-check { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: .84rem; }
.gpn-check:hover { background: var(--page-bg); }
.gpn-check input { width: 16px; height: 16px; cursor: pointer; }
.gpn-check.done .gpn-check-lbl { color: var(--success); text-decoration: line-through; }
.gpn-check-by { margin-left: auto; font-size: .68rem; color: var(--text-xdim); }

/* Bočný panel */
.gpn-full-btn { width: 100%; margin-bottom: 8px; }
.gpn-side-lbl { display: block; font-size: .72rem; color: var(--text-dim); margin: 6px 0 3px; }
.gpn-side-sel { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); color: var(--text); font-size: .82rem; }
.gpn-side-info { font-size: .78rem; color: var(--text-dim); margin-top: 7px; }
.gpn-side-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Prílohy + drag&drop */
.gpn-drop { border: 2px dashed var(--border); border-radius: var(--radius); padding: 14px; text-align: center; font-size: .82rem; color: var(--text-dim); transition: var(--transition); }
.gpn-drop.over { border-color: var(--accent); background: var(--accent-light); }
.gpn-drop-btn { color: var(--accent2); font-weight: 700; cursor: pointer; text-decoration: underline; }
.gpn-att-cat { margin-left: 8px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: .78rem; background: var(--card-bg); color: var(--text); }
.gpn-atts { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.gpn-att { display: flex; align-items: center; gap: 8px; font-size: .82rem; padding: 5px 8px; background: var(--page-bg); border-radius: 6px; }
.gpn-att-link { color: var(--accent2); text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpn-att-link:hover { text-decoration: underline; }
.gpn-att-size { font-size: .7rem; color: var(--text-xdim); }

/* Komentáre */
.gpn-comment-new { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.gpn-comment-new textarea { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--page-bg); color: var(--text); font-size: .84rem; resize: vertical; font-family: inherit; }
.gpn-comments { display: flex; flex-direction: column; gap: 8px; }
.gpn-comment { padding: 8px 10px; background: var(--page-bg); border-radius: var(--radius); }
.gpn-comment-hd { display: flex; justify-content: space-between; font-size: .74rem; color: var(--text-dim); margin-bottom: 3px; }
.gpn-comment-tx { font-size: .85rem; color: var(--text); line-height: 1.45; white-space: pre-wrap; }

/* História */
.gpn-hists { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.gpn-hist { display: flex; gap: 8px; }
.gpn-hist-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex: none; }
.gpn-hist-tx { font-size: .82rem; color: var(--text); }
.gpn-hist-meta { font-size: .7rem; color: var(--text-xdim); }

@media (max-width: 900px) {
  .gpn-detail-grid { grid-template-columns: 1fr; }
  .gpn-card { flex-direction: column; }
  .gpn-card-r { align-items: flex-start; flex-direction: row; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPRÁVA POUŽÍVATEĽOV — modal, generátor hesla, overenie e-mailu
   ═══════════════════════════════════════════════════════════════════════════ */
.us-modal { max-width: 560px; }
.us-body { gap: 10px; }
.us-sec-lbl {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800;
  color: var(--accent2); margin: 6px 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.us-sec-lbl:first-child { margin-top: 0; }
.us-field-hint { font-size: .72rem; color: var(--text-xdim); margin-top: 3px; }

/* Overovací badge (v zozname aj v modáli) */
.us-verify-badge { display: inline-block; font-size: .66rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; letter-spacing: .02em; vertical-align: middle; }
.us-vb-ok   { color: #15803d; background: #dcfce7; }
.us-vb-wait { color: #b45309; background: #fef3c7; }

/* Heslo — riadok s tlačidlami */
.us-pass-row { display: flex; gap: 6px; align-items: stretch; }
.us-pass-row input {
  flex: 1; padding: 8px 11px; border-radius: var(--radius);
  background: var(--card-bg); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font); font-size: .87rem; outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.us-pass-row input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(8,145,178,0.1); }
.us-pass-btn {
  flex: none; width: 38px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--page-bg); color: var(--text-dim); cursor: pointer; font-size: .95rem;
  transition: all var(--transition);
}
.us-pass-btn:hover { background: var(--accent-light); color: var(--accent2); border-color: var(--accent); }
.us-pass-btn.active { background: var(--accent-light); color: var(--accent2); border-color: var(--accent); }

/* Ukazovateľ sily hesla */
.us-strength { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.us-strength-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; }
.us-strength-fill { height: 100%; width: 0; border-radius: 4px; transition: width .2s, background .2s; }
.us-strength-fill.us-s0 { background: #ef4444; }
.us-strength-fill.us-s1 { background: #f97316; }
.us-strength-fill.us-s2 { background: #eab308; }
.us-strength-fill.us-s3 { background: #84cc16; }
.us-strength-fill.us-s4 { background: #16a34a; }
.us-strength-lbl { font-size: .72rem; font-weight: 700; color: var(--text-dim); min-width: 78px; text-align: right; }

/* Možnosti generátora */
.us-genopts { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.us-mini-lbl { font-size: .74rem; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.us-genlen { width: 56px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text); font-size: .8rem; }
.us-chk { font-size: .74rem; color: var(--text-dim); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.us-copied { font-size: .72rem; font-weight: 700; color: var(--success); margin-left: auto; }

/* Prepínače v nastaveniach */
.us-toggles { justify-content: center; gap: 8px; }
.us-toggles .checkbox-label { font-size: .84rem; }

/* Odznaky rolí používateľov */
.us-role-chip { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.us-role-admin  { background: #ede9fe; color: #5b21b6; }
.us-role-obchod { background: #dbeafe; color: #1e40af; }
.us-role-kvalita{ background: #dcfce7; color: #166534; }
.us-role-tech   { background: #ffedd5; color: #9a3412; }
.us-role-user   { background: #e2e8f0; color: #475569; }

/* Diagnostika e-mailu (Admin → Používatelia) */
.mail-status { margin: 6px 0 12px; }
.mail-status-head { font-size: .86rem; font-weight: 700; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; background: var(--page-bg); }
.mail-status-head.mail-ok { color: #15803d; background: #dcfce7; }
.mail-status-head.mail-bad { color: #b45309; background: #fef3c7; }
/* Pozn.: .admin-section je tmavá karta (dark zone) — text tu musí používať
   dz-* tokeny / rgba(dz-fg-rgb), nie var(--text)/(--text-dim) (tie sú pre
   svetlé plochy typu WIKI a na tmavom podklade boli takmer neviditeľné). */
.mail-kv { display: flex; gap: 12px; font-size: .82rem; padding: 3px 2px; }
.mail-k { min-width: 160px; color: rgba(var(--dz-fg-rgb),0.5); font-family: 'Consolas', monospace; }
.mail-v { color: var(--dz-text2); font-family: 'Consolas', monospace; }
.mail-v.mail-ok { color: #4ade80; font-weight: 700; }
.mail-v.mail-bad { color: #fca5a5; }
.mail-v em { color: rgba(var(--dz-fg-rgb),0.4); font-style: italic; }
.mail-hint { font-size: .78rem; color: var(--dz-text2); margin-top: 8px; padding: 7px 10px; background: rgba(103,232,249,0.1); border: 1px solid rgba(103,232,249,0.2); border-radius: 8px; }
.mail-hint code { color: var(--dz-cyan); }
.mail-test-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.mail-test-input {
  flex: 1; min-width: 200px; max-width: 320px; padding: 8px 11px; border-radius: var(--radius);
  background: rgba(var(--dz-fg-rgb),0.08); border: 1px solid rgba(var(--dz-fg-rgb),0.14);
  color: var(--dz-text); font-size: .85rem; font-family: var(--font); outline: none;
}
.mail-test-input::placeholder { color: rgba(var(--dz-fg-rgb),0.3); }
.mail-test-input:focus { border-color: rgba(8,145,178,0.6); box-shadow: 0 0 0 3px rgba(8,145,178,0.12); }
.mail-test-result { margin-top: 8px; font-size: .84rem; min-height: 20px; }
.mail-test-result .mail-ok { color: #4ade80; }
.mail-test-result .mail-bad { color: #fca5a5; font-weight: 600; }


/* =============================================
   MOBIL — responzívne základy (Fáza 1 + 2)
   Dotykové ovládanie, bottom-sheet modaly, spodný
   tab bar, kanban so scroll-snap, filter draweru.
   POZOR: každé pravidlo pre mobil MUSÍ ostať vnútri
   svojho @media bloku (viď regresia 2.50.0)!
   ============================================= */

/* --- Filter v draweri (asb-search) — dark zone štýl --- */
.asb-search {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 12px 0; padding: 0 10px;
  background: rgba(var(--dz-fg-rgb),0.08);
  border: 1px solid rgba(var(--dz-fg-rgb),0.14);
  border-radius: 9px; color: rgba(var(--dz-fg-rgb),0.45);
}
.asb-search:focus-within { border-color: rgba(8,145,178,0.7); }
.asb-search svg { flex-shrink: 0; }
.asb-search input {
  flex: 1; min-width: 0; padding: 9px 0; background: none; border: none; outline: none;
  color: var(--dz-text); font-family: inherit; font-size: 0.85rem;
}
.asb-search input::placeholder { color: rgba(var(--dz-fg-rgb),0.35); }
/* Svetlé témy sidebaru — tmavý text na svetlom podklade (kontrast!) */
body.sbt-light .asb-search, body.sbt-minimal .asb-search { background: #f1f5f9; border-color: #e2e8f0; color: #94a3b8; }
body.sbt-light .asb-search input, body.sbt-minimal .asb-search input { color: #1f2937; }
body.sbt-light .asb-search input::placeholder, body.sbt-minimal .asb-search input::placeholder { color: #94a3b8; }
/* V icon-only sidebar layoute na desktope filter nedáva zmysel */
body.sbt-icon .asb-search { display: none; }
.asb-filtered-out { display: none !important; }

/* --- Spodný tab bar — na desktope skrytý --- */
.tabbar { display: none; }

@media (max-width: 900px) {
  /* iOS Safari: input s písmom < 16px spôsobí automatický zoom pri fokuse —
     najčastejší dôvod „rozbitého" mobilného UX. !important je tu zámerné,
     aby prebilo všetky špecifické veľkosti inputov v appke. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select, textarea { font-size: 16px !important; }

  /* Dotykové ciele — minimálne rozmery pre prst */
  .btn-primary, .btn-secondary { min-height: 44px; }
  .btn-sm, .btn-edit, .btn-delete, .btn-danger-sm { min-height: 38px; min-width: 38px; }
  .modal-close { min-width: 42px; min-height: 42px; }
  button, a { -webkit-tap-highlight-color: transparent; }

  /* Plynulý dotykový scroll pre vodorovné kontajnery */
  .proc-table-wrap, .owners-table-wrap, .powners-table-wrap, .prod-calib-tablewrap,
  .pj-list-wrap, .rt-ops-table-wrap, .gpn-subtable-wrap, .tasks-grid-wrap,
  .pdv-table-wrap, .kanban { -webkit-overflow-scrolling: touch; }

  /* Quicklink dlaždice v hlavičke — na mobile niet miesta (menu je v draweri) */
  .header-quicklinks { display: none; }

  /* Spodný tab bar */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 350;
    display: flex; align-items: stretch; gap: 2px;
    background: #0d1430; border-top: 1px solid rgba(var(--dz-fg-rgb),0.12);
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  }
  body.logged-out .tabbar { display: none !important; }
  body.mobile-nav-open .tabbar { display: none; }
  .tabbar-item {
    flex: 1; min-width: 0; min-height: 52px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em;
    color: rgba(var(--dz-fg-rgb),0.55); touch-action: manipulation;
  }
  .tabbar-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar-item.active { color: #67e8f9; background: rgba(8,145,178,0.16); }
  .tabbar-item:active { background: rgba(var(--dz-fg-rgb),0.08); }

  /* Otvorený modal musí prekryť plávajúce FAB tlačidlá (bot-fab má z-index 600) */
  .modal { z-index: 700; }

  /* Obsah stránky nesmie končiť pod tab barom; FAB tlačidlá vyzdvihnúť nad neho */
  .page { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .bot-fab { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .tour-fab { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .bot-panel { max-height: calc(100dvh - 160px); }
}

@media (max-width: 640px) {
  /* --- Modaly ako bottom-sheet: celá šírka, prilepené dole, sticky pätička --- */
  .modal-box {
    top: auto; bottom: 0; left: 0; right: 0;
    transform: none;
    width: 100%; max-width: none;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 18px 18px 0 0;
    border-left: none; border-right: none; border-bottom: none;
  }
  .modal-header { padding: 14px 16px; }
  .modal-body { padding: 16px 14px; }
  .modal-footer { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .modal-footer .btn-primary, .modal-footer .btn-secondary {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
  }

  /* --- Kanban: stĺpce ~4/5 obrazovky so scroll-snap („docvaknutie") --- */
  .kanban, #tasksKanban.kanban, .prod-kanban.kanban {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 320px);
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
  }
  .kanban > * { scroll-snap-align: start; }
}