/* === Barevné proměnné (teplejší ladění) === */
:root{
  /* základ */
  --bg:#fff7f0;                 /* teplé pozadí */
  --text:#1a1a1a;
  --text2:#1a1a1a;
  --accent:#ff5e00;             /* hlavní akcent (teplá oranž) */
  --accent-2:#ffb866;           /* světlejší akcent pro hovery */
  --card:#faf4ee;

  /* navigace / vstupy */
  --nav-bg:rgba(255, 255, 255, 0.08);
  --nav-text:#1a1a1a;

  --input-bg:rgba(255,255,255,0.06);
  --input-text:#1a1a1a;
  --input-border:rgba(27, 27, 27, 0.35);

  /* stavy a hover */
  --hover:rgba(255,165,66,0.12); /* teplý „písek“ */
  --desc-bg:rgba(255,255,255,0.08);

  /* sklo */
  --glass-bg:rgba(196, 196, 196, 0.158);
  --glass-border:rgba(255,255,255,0.2);
  --glass-blur:12px;
  --glass-sat:125%;

  /* stavy */
  --error:#ff5a3c;   /* teplejší červená */
  --success:#2ecc71; /* OK kontrastně */


  
}

[data-theme="dark"]{
  --bg:#0f0e0d;      /* velmi tmavé s teplým nádechem */
  --text:#f3efe9;
  --text2:#36332e;
  --card:#191716;
  --accent:#ff9100;             /* hlavní akcent (teplá oranž) */
  --accent-2:#ffb866;           /* světlejší akcent pro hovery */


  --nav-bg:rgba(0,0,0,0.30);
  --nav-text:#f3efe9;

  --input-bg:rgba(255, 255, 255, 0.281);
  --input-text:#1d1c1c;
  --input-border:rgba(255,255,255,0.13);

  --hover:rgba(255, 164, 66, 0.171);
  --desc-bg:rgba(255,255,255,0.06);

  --glass-bg:rgba(0,0,0,0.28);
  --glass-border:rgba(255,255,255,0.15);
}

/* === Základ === */
*{box-sizing:border-box}
body{
  width:100%;
  min-height:100vh;
  margin:0;
  padding:0;
  color:var(--text);
  font-family:'Segoe UI', Tahoma, sans-serif;
  display:flex;
  flex-direction:column;
  justify-content:space-between;

  /* pozadí s jemným teplým overlayem */
  background:
    linear-gradient( to bottom, rgba(255,145,0,0.10), rgba(255,145,0,0.02) ),
    url("./../images/background05.png") center / cover no-repeat fixed,
    var(--bg);
}
/* tmavé téma */
[data-theme="dark"] body{
  background:
    linear-gradient(to bottom, rgba(255,145,0,0), rgba(255,145,0,0)),
    url("./../images/background04.png") center / cover no-repeat fixed,
    var(--bg);
}


/* Reusable glass utilita */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-border);
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

/* === Kontejner === */
.container{

  max-width:95%;
  margin:16px auto;
  padding:20px;
  border-radius:14px;
  position:relative;

  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-border);
  box-shadow:0 10px 30px rgba(0,0,0,1);

  transform-origin: top center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* jemný lesk */
.container::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,0));
  mix-blend-mode:overlay;
}

/* === Nadpisy === */
h1,h2{ text-align:center; margin:10px 0 14px }

/* === Navigace (glass + sticky) === */
nav{
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-radius: 14px;
  margin: 10px auto; width: min(95%, 1200px);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0,0,0,1);
}
nav::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,0));
  mix-blend-mode: overlay;
}
nav > div{ display:flex; align-items:center; gap:10px; }

/* textové odkazy (kdyby někde byly) */
nav a{
  color: var(--text);
  text-decoration: none; font-weight: 600;
  padding: 8px 10px; border-radius: 10px;
  transition: background-color .3s, color .3s, transform .15s ease;
}

/* --- Ikonová navigace --- */
.icon-nav{ display:flex; align-items:center; gap:12px; }

.icon-nav a.icon-link,
.icon-nav .icon-btn{
  font-size: 0;                 /* odpojí icon-font/inline-SVG od textového měřítka */
  line-height: 0;               /* žádné přetékání řádkem */
  display:flex; align-items:center; justify-content:center;
  width:50px; height:50px;
  padding:4px; border-radius:18px;
  background: transparent; border: none;
  outline: none;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
  will-change: transform;
}

.icon-nav img{
  width:44px;
  height:44px;
  display:block;
  border-radius: 5px;
  transition: transform .15s ease, opacity .2s ease;
}

/* Hover: lehké zvětšení, glow */
.icon-nav a.icon-link:hover,
.icon-nav .icon-btn:hover{
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Stav aktivní stránky – použij .is-active na <a> nebo aria-current="page" */
.icon-nav a.icon-link.is-active,
.icon-nav a.icon-link[aria-current="page"]{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);
  transform: scale(1.08);
}

/* Klávesový fokus */
.icon-nav a.icon-link:focus,
.icon-nav a.icon-link:focus-visible,
.icon-nav .icon-btn:focus,
.icon-nav .icon-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Přístupné skrytí textu */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Respektuj reduced motion */
@media (prefers-reduced-motion: reduce){
  .icon-nav a.icon-link,
  .icon-nav .icon-btn,
  .icon-nav img,
  nav a{
    transition: none;
  }
}
/* === Responsivita === */
@media (max-width:500px){
  nav a{
    color: var(--text);
    text-decoration: none; font-weight: 600;
    padding: 0px 0px; border-radius: 10px;
    transition: background-color .3s, color .3s, transform .15s ease;
  } 
  .icon-nav a.icon-link,
  .icon-nav .icon-btn{
    font-size: 0;                 /* odpojí icon-font/inline-SVG od textového měřítka */
    line-height: 0;               /* žádné přetékání řádkem */
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px;
    padding:0px; border-radius:18px;
    margin: 0;
    background: transparent; border: none;
    outline: none;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
    will-change: transform;
  }
  
  .icon-nav img{
    width:35px;
    height:35px;
    padding: 0;
    margin: 0;
    display:block;
    border-radius: 5px;
    transition: transform .15s ease, opacity .2s ease;
  }
}












#theme-toggle{
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 40px; color: var(--text);
  margin: 0 0;
  padding: 0px 0px; border-radius: 10px;
}
#theme-toggle:hover{ 
  background: var(--hover);
  box-shadow: 0 0 20px var(var(--hover))
}
#theme-toggle img {
  width: 38px; height: 38px;
    background: transparent; /* ujistěte se, že není nastaveno background: white; */
}











/* === Formuláře === */
label{ display:block; margin-top:15px; font-weight:600 }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select, textarea{
  width:100%; padding:12px 12px;
  margin-top:6px;
  background:var(--input-bg);
  color:var(--input-text);
  border:1px solid var(--input-border);
  border-radius:10px;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder{ opacity:.8 }
input:focus, select:focus, textarea:focus{
  outline:none;
  background:color-mix(in srgb, var(--input-bg) 70%, #fff 30%);
  border-color:color-mix(in srgb, var(--accent) 60%, #fff 40%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* „skleněný“ autocomplete / dropdown */
#exercise-suggestions{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  max-height:150px; overflow-y:auto;
  position:absolute; width:calc(100% - 20px); z-index:1000;
  border-radius:10px;
  color: var(--text2);
}
#exercise-suggestions div{
  padding:10px; cursor:pointer; color:var(--text2);
}
#exercise-suggestions div:hover{ background:var(--hover) }

/* === Tlačítka (teplé hovery) === */
button, .email-button{
  margin-top:20px; padding:12px 16px;
  width:100%;
  background:var(--accent);
  border:none; color:#fff;
  font-size:16px; font-weight:700;
  border-radius:10px; cursor:pointer;
  transition:filter .2s, background-color .2s, transform .02s;
  text-decoration:none; display:inline-block; text-align:center;
}
button:hover, .email-button:hover{ background:var(--accent-2) }
button:active{ transform:translateY(1px) }




/* === Stavové zprávy === */
.error{ color:var(--error); text-align:center; margin-top:15px }
.success{ color:var(--success); text-align:center; margin-top:15px }

/* === Popis cviku === */
#exercise-description{
  margin-top:10px; padding:12px;
  background:var(--desc-bg);
  border-left:4px solid var(--accent);
  font-size:14px; color:var(--text);
  border-radius:10px;
}



/* === Seznam tréninků === */
#training-list ul{ list-style:none; padding:0; margin:0 }
#training-list li{
  padding:10px 12px; background:var(--input-bg);
  border-bottom:1px solid var(--input-border);
  cursor:pointer; transition:background-color .2s;
}
#training-list li:hover{ background:var(--hover) }


.totals-row {
  margin-top: 15px;
  font-weight: bold;
  color: var(--accent);
  text-align: center;
}







/* === Footer === */
footer{
  text-align:center; padding:15px;
  margin:20px auto 10px;
  width:min(95%,1200px);
  color:var(--nav-text);
  font-size:.95em;
  border-radius:14px;
  background:var(--nav-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
    flex-wrap: wrap;
}
footer a{ 
  color:#ffd199; 
  text-decoration:none; 
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

}
footer a:hover{ 
  text-decoration:underline 
}
footer img {
  height: 28px;
  width: 28px;
  margin: 0;
  padding: 0;
}
/* === Remember me === */
.remember-me{
  display:flex; align-items:center; gap:8px; margin-top:10px;
}
.remember-me input{ margin:0 }
.remember-me label{ margin:0 }

/* === Responsivita === */
@media (max-width:600px){
  .container{ margin:12px auto; margin-top:14px; padding:16px }
}

/* === Fallback bez blur (starší prohlížeče) === */
@supports not ((backdrop-filter: blur(1px))){
  .glass, .container, nav, footer, #exercise-suggestions{
    background-color:color-mix(in srgb, var(--bg) 70%, #ffffff 30%);
  }
}