/* CSS Document */


*{
margin:0;
padding:0;
}

#table{
width:100%;
height:100%;
}

#title{
height:120px;
line-height:120px;
vertical-align:middle;
text-align:center;
}

#foot{
height:84px;
}

#menu{
width:256px;
vertical-align:top;
}

#logo{
height:120px;
float:left;
}

#titletext{
  
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-size:80px;
  color:#2D9702;

}

#titlecz{
  font-size:50px;
  color:#018DB9;
}


/* ZLATÝ TEXT + JEMNÝ SHIMMER */
#titleplus{
  font-size:50px;
  font-weight:700;
  line-height:1.1;

  /* základní zlatý přechod */
  background: linear-gradient(45deg,
    #8a6b1f 0%,
    #d9a600 22%,
    #ffd700 40%,
    #fff4c1 50%,
    #ffd700 60%,
    #c89600 78%,
    #8a6b1f 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  /* jemný pohyb (shimmer) */
  background-size: 200% 200%;
  animation: goldShimmer 6s ease-in-out infinite;
  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 8px 18px rgba(0,0,0,.20);
  position:relative;
}

/* TŘPYT – drobné hvězdičky přes pseudo-element */
#titleplus::after{
  content:"";
  position:absolute; inset:-4px -6px;
  pointer-events:none;

  /* rozesetá „zrna“ třpytu – několik poloprůhledných bodů */
  background:
    radial-gradient(circle at 15% 40%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 70%, rgba(255,255,255,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 30%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 55%, rgba(255,255,255,.5)  0 2px, transparent 3px),
    radial-gradient(circle at 50% 85%, rgba(255,255,255,.35) 0 2px, transparent 3px);
  mix-blend-mode: screen;
  opacity:.35;
  animation: twinkle 2.8s steps(6,end) infinite;
}

/* jemný přejíždějící lesk */
@keyframes goldShimmer{
  0%   { background-position: 0% 45%; }
  50%  { background-position: 100% 55%; }
  100% { background-position: 0% 45%; }
}

/* drobné mihotání třpytu (ne skákavé) */
@keyframes twinkle{
  0%   { transform: translateY(0px);   opacity:.28; }
  40%  { transform: translateY(-0.5px); opacity:.42; }
  70%  { transform: translateY(0.5px);  opacity:.36; }
  100% { transform: translateY(0px);   opacity:.28; }
}

/* respekt k omezení pohybu */
@media (prefers-reduced-motion: reduce){
  #titleplus, #titleplus::after { animation: none; }
}



.GRAFActual{
width:100%;
text-align:center;
}

.aktualtext{
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-size:20px;
  color:#2D9702;
}

.aktualtime{
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-size:20px;
  color:#018DB9;
}


.nadpisMenu{
text-align:center; color:#2D9702; margin:0 auto;
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-size:18px;

}


.menuLeft a{
display:block;
width:80%;
margin:0 auto;
height:33px;
line-height:33px;
vertical-align:middle;

border:solid 1px #2D9702;
border-radius:4px;
background:#D4FCFE;

color:#2D9702;
text-align:center;
text-decoration:0 none;

  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-size:15px;
}

.menuLeft a:hover{
background:#B0F9FD;
}






/* === Login Overlay === */
.overlay {
  position: fixed; inset: 0;
  display: none; /* default skryto */
  z-index: 9999;
  font-family: 'Inter', system-ui, sans-serif;
}
.overlay.is-open { display: block; }

.overlay__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(2px);
}

.overlay__dialog {
  position: relative;
  max-width: 420px;
  margin: 10vh auto 0;
  background: #0a1719;
  border: 1px solid #1D6264;
  border-radius: 14px;
  padding: 22px 18px;
  color: #E6F3F3;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 0 40px rgba(3,167,169,.08);
}

.overlay__dialog h2 {
  margin: 0 0 12px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  letter-spacing: .5px;
  color: #BAE8F8;
  text-shadow: 0 0 6px rgba(186,232,248,.25);
}

.overlay__form label { display:block; margin: 10px 0 6px; color:#BAE8F8; }
.overlay__form input[type=password]{
  width:100%; padding:12px 10px;
  border-radius: 10px;
  border:1px solid #1D6264;
  background:#061316; color:#E6F3F3;
  outline:none;
}
.overlay__form input[type=password]:focus{
  border-color:#03A7A9; box-shadow:0 0 0 3px rgba(3,167,169,.2);
}

.overlay__form button{
  margin-top:14px; width:100%; padding:12px 10px;
  border:0; border-radius:10px; cursor:pointer;
  font-weight:700; background:#03A7A9; color:#062225;
}

.overlay__close{
  position:absolute; top:8px; right:10px;
  width:36px; height:36px; border-radius:10px;
  border:1px solid #1D6264; background:#0f2124; color:#BAE8F8;
  cursor:pointer; font-size:22px; line-height:34px;
}
.overlay__close:hover{ border-color:#03A7A9; }


/* Overlay – skrytý, zobrazí se přidáním .is-open */
.overlay{position:fixed;left:0;top:0;right:0;bottom:0;display:none;z-index:9999}
.overlay.is-open{display:block}
.overlay__backdrop{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.75)}
.overlay__dialog{position:relative;max-width:420px;margin:10vh auto 0;background:#0a1719;border:1px solid #1D6264;border-radius:14px;padding:22px 18px;color:#E6F3F3}




.loginbtn{

display:block;
width:80%;
margin:0 auto;
height:28px !important;
line-height:28px !important;
vertical-align:middle;

border:solid 1px #00B92D !important;
border-radius:2px  !important;
background:#018DB9 !important;

color:#FFFFFF !important;
text-align:center;
text-decoration:0 none;

  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-size:12px;
}

.loginbtn:hover{
background:#01A4DA !important;
}





.cx-footer{
  background:#0a1719;
  border-top:1px solid #1D6264;
  margin-top:40px;
  color:#E6F3F3;
  box-shadow:0 -20px 60px rgba(0,0,0,.35), inset 0 0 40px rgba(3,167,169,.05);
}
.cx-footer__wrap{
  max-width:1200px; margin:0 auto; padding:28px 16px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:26px;
}
.cx-col h4{
  font:600 14px/1 'Orbitron',sans-serif; letter-spacing:.6px; color:#BAE8F8; margin:0 0 10px;
}
.cx-brand{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.cx-logo{width:42px; height:auto; filter:drop-shadow(0 0 8px rgba(3,167,169,.2));}
.cx-brand h3{margin:0; font:800 18px/1 'Orbitron',sans-serif; color:#BAE8F8; letter-spacing:.5px;}
.cx-desc{opacity:.9; margin:6px 0 12px;}
.cx-badges{display:flex; gap:6px; flex-wrap:wrap}
.cx-badge{
  background:rgba(3,167,169,.08); border:1px solid #1D6264; color:#BAE8F8;
  padding:4px 8px; border-radius:10px; font:600 11px/1 'Inter',system-ui,sans-serif;
}

.cx-links{list-style:none; padding:0; margin:0; display:grid; gap:6px;}
.cx-links a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#E6F3F3;
  padding:6px 8px; border-radius:8px; border:1px solid transparent;
}
.cx-links a:hover{
  background:rgba(3,167,169,.08); border-color:#1D6264; color:#fff;
}

/* tlačítka z minula */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 13px/1.1 'Inter',system-ui,sans-serif; padding:7px 12px; border-radius:10px;
  border:1px solid transparent; letter-spacing:.2px; cursor:pointer; text-decoration:none;}
.btn--teal{ background:#03A7A9; color:#062225; border-color:#03979a;}
.btn--teal:hover{ background:#07b8ba; border-color:#06a7aa; box-shadow:0 0 0 3px rgba(3,167,169,.18);}
.btn--sm{ padding:6px 10px; font-size:12px; }
.cx-cta{margin-top:8px;}
.cx-note{opacity:.7; font-size:11px; margin-top:6px;}

.cx-status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;}
.cx-status .ok{background:#2D9702; box-shadow:0 0 8px #2D9702;}
.cx-status .warn{background:#D4A100; box-shadow:0 0 8px #D4A100;}

.cx-social{display:flex; gap:8px; margin-top:10px;}
.soc{width:28px;height:28px;border-radius:8px;border:1px solid #1D6264;background:#0e1e22}
.soc:hover{border-color:#03A7A9; box-shadow:0 0 0 3px rgba(3,167,169,.15)}
/* jednoduché „ikony“ přes masku (můžeš nahradit svými PNG/SVG) */
.soc.yt{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M23 7s-.2-1.6-.8-2.3c-.8-.8-1.7-.8-2.1-.9C16.8 3.5 12 3.5 12 3.5h0s-4.8 0-8.1.3c-.4 0-1.3.1-2.1.9C1.2 5.4 1 7 1 7S.8 8.7.8 10.4v1.2C.8 13.3 1 15 1 15s.2 1.6.8 2.3c.8.8 1.9.8 2.4.9C6 18.5 12 18.5 12 18.5s4.8 0 8.1-.3c.4 0 1.3-.1 2.1-.9.6-.7.8-2.3.8-2.3s.2-1.7.2-3.4v-1.2C23.2 8.7 23 7 23 7zM9.8 14.2V8.8L15 11.5l-5.2 2.7z"/></svg>') center/16px 16px no-repeat; background:#BAE8F8;}
.soc.gh{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 .5C5.7.5.8 5.4.8 11.7c0 4.9 3.2 9 7.6 10.4.6.1.8-.3.8-.6v-2c-3.1.7-3.7-1.3-3.7-1.3-.6-1.4-1.4-1.8-1.4-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.9 1.3 3.6 1 .1-.8.4-1.3.7-1.6-2.5-.3-5.1-1.3-5.1-5.9 0-1.3.5-2.4 1.2-3.3-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8.1 3.1.8.9 1.2 2 1.2 3.3 0 4.6-2.6 5.6-5.1 5.9.4.3.8 1 .8 2.2v3.2c0 .3.2.7.8.6 4.4-1.5 7.6-5.6 7.6-10.5C23.2 5.4 18.3.5 12 .5z"/></svg>') center/16px 16px no-repeat; background:#BAE8F8;}
.soc.fb{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M22 12a10 10 0 1 0-11.6 9.9v-7h-2.2V12h2.2V9.7c0-2.2 1.3-3.4 3.2-3.4.9 0 1.9.2 1.9.2v2.1H14c-1.2 0-1.6.8-1.6 1.6V12h2.7l-.4 2.9h-2.3v7A10 10 0 0 0 22 12z"/></svg>') center/16px 16px no-repeat; background:#BAE8F8;}

.cx-copy{
  border-top:1px solid #123436; padding:10px 16px; text-align:center; color:#a9cfd2; font:600 12px/1.6 'Inter',system-ui,sans-serif;
}

/* ikony pro „Rychlé volby“ – malé kruhy s piktogramem */
.i{display:inline-block; width:18px; height:18px; border-radius:50%;
   margin-right:2px; background:#0e1e22; border:1px solid #1D6264; position:relative;}
.i:after{content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px; background:#03A7A9; border-radius:2px;}
.i-water:after{border-radius:50%; width:8px; height:8px;}
.i-solar:after{clip-path: polygon(50% 0, 60% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 40% 35%);}
.i-temp:after{clip-path: polygon(40% 10%, 60% 10%, 60% 70%, 70% 70%, 50% 95%, 30% 70%, 40% 70%);}
.i-rain:after{clip-path: ellipse(40% 55% at 50% 45%);}
.i-power:after{clip-path: polygon(40% 0, 60% 0, 55% 40%, 72% 40%, 32% 100%, 45% 55%, 30% 55%);}
.i-flow:after{clip-path: polygon(0 50%, 60% 50%, 60% 35%, 100% 65%, 60% 95%, 60% 80%, 0 80%);}
.i-cpu:after{clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);}
.gold{ color:#FFD700; }
@media (max-width: 980px){ .cx-footer__wrap{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .cx-footer__wrap{ grid-template-columns: 1fr; } .cx-brand{justify-content:flex-start;} }













/* === CreeXalert – vlnící se Bézierovy křivky === */
#bgCurves {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 40% 30%, #f9fbfd 0%, #eef9f9 80%);
  opacity: 0.9;
}

/* zajistí, že menu a grafy zůstanou klikatelné */
#table, #menu, .menuLeft a, .btn, button {
  position: relative;
  z-index: 2;
}














/* výchozí vzhled tabulky */
.reveal-table {
  display: block;           /* jistota pro transform/animace */
  will-change: opacity, transform, filter;
}

/* tabulky, které ještě nechceme ukázat – NEJSOU v rozložení (krátký scroll) */
.reveal-table.hardhide {
  display: none;
}

/* tabulky připravené na animované zobrazení (už v DOM, ale neviditelné) */
.reveal-table.hidden {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(3px);
}

/* normální náběh */
.reveal-table.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity .6s ease, transform .8s ease, filter .8s ease;
}

/* pomalejší efekt pro odkládané tabulky */
.reveal-table.deferred.visible {
  transition-duration: 1.2s, 1.4s, 1.4s;
}

/* skeleton pro obrázky (pokud používáš data-src) */
.lazy-in-table{
  background: linear-gradient(90deg,#eef5f6 0,#f6fbfc 50%,#eef5f6 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.lazy-in-table.loaded { animation: none; background: none; }
@keyframes shimmer { 0%{background-position:0 0} 100%{background-position:200% 0} }