html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}


/* Přepínač Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px; /* Změna: 100px -> 60px */
    height: 34px; /* Změna: 50px -> 34px */
    margin: 10px 0; /* Vertikální mezera */
}

    /* Skrytý checkbox */
    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* Styl pro pozadí přepínače (zasuňovátko) */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc; /* Vypnuto - šedé */
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px; /* Změna: 50px -> 34px */
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px; /* Změna: 40px -> 26px */
        width: 26px; /* Změna: 40px -> 26px */
        left: 4px; /* Změna: 5px -> 4px */
        bottom: 4px; /* Změna: 5px -> 4px */
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50%; /* Kulatý tvar */
    }

/* Když je checkbox zaškrtnutý (zapnuto) */
.toggle-switch input:checked + .slider {
    background-color: #28a745; /* Zapnuto - zelené */
}

    /* Posunutí kulatého přepínače doprava, když je zapnuto */
    .toggle-switch input:checked + .slider:before {
        -webkit-transform: translateX(26px); /* Změna: 50px -> 26px */
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

/* Text v přepínači */
.toggle-switch-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: white;
    font-size: 0.8rem; /* Změna: zmenšení písma */
    user-select: none; /* Zabrání označování textu */
}

    .toggle-switch-text.off {
        left: 8px; /* Pozice textu "VYP" když je vypnuto */
    }

    .toggle-switch-text.on {
        right: 12px; /* Pozice textu "ZAP" když je zapnuto */
        opacity: 0; /* Výchozí skryté */
    }

/* Animace textu */
.toggle-switch input:checked ~ .toggle-switch-text.off {
    opacity: 0;
}

.toggle-switch input:checked ~ .toggle-switch-text.on {
    opacity: 1;
}




/* Nový slider */
/* Styly pro vylepšený posuvník "Hold & Slide to Confirm" */
.slider-container {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.slider-track {
    width: 100%;
    height: 100%;
    background-color: #f8f9fa; /* Velmi světle šedé pozadí */
    border-radius: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.slider-handle {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 35px; /* Změna */
    height: 35px; /* Změna */
    background-color: #6c757d; /* Šedá - neaktivní */
    border-radius: 50%;
    cursor: pointer; /* ZMĚNA: Toto je teď hlavní kurzor */
    z-index: 3;
    transition: background-color 0.3s ease;
}

.slider-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: rgba(13, 110, 253, 0.5); /* Průhledná modrá pro animaci */
    border-radius: 30px;
    z-index: 1;
    /* Transition se bude nastavovat dynamicky v JS */
}

/* NOVÝ STYL: Barva dráhy, když je posuvník aktivní (modrý) */
.slider-track.is-active {
    background-color: #e7f1ff; /* Světle modrá barva pozadí */
}

.slider-handle.is-active {
    background-color: #0d6efd; /* Sytě modrá barva držáku */
}

.slider-handle.is-activating + .slider-progress {
    width: 100%; /* Spustí animaci načítání */
}

.slider-handle.is-active {
    background-color: #0d6efd; /* Modrá - aktivní */
    cursor: grab;
}

.slider-handle:active {
    cursor: grabbing;
}

.slider-text {
    color: #adb5bd; /* Změna: Velmi světle šedý text */
    font-weight: normal; /* Změna: Normální tloušťka (ne tučné) */
    font-style: italic; /* Změna: Kurzíva */
    z-index: 2;
}

.slider-track.is-confirmed {
    background-color: #198754; /* Zelená - potvrzeno */
    transition: background-color 0.3s ease;
}

.slider-track.is-confirmed .slider-text {
    color: white;
}

/* NOVÉ PRAVIDLO: Zbarví kolečko na zeleno, když je dráha potvrzená */
.slider-track.is-confirmed .slider-handle {
    background-color: #198754; /* Stejná "success" zelená jako pozadí */
}

/* NOVÉ PRAVIDLO: Skryje modrou animační vrstvu, když je dráha potvrzená */
.slider-track.is-confirmed .slider-progress {
    width: 0 !important; /* Okamžitě stáhne šířku na nulu */
}

/* Definice animace s názvem "blink" */
@keyframes blink {
    0% {
        opacity: 1; /* Začátek: plně viditelná */
    }

    50% {
        opacity: 0.3; /* V polovině: téměř průhledná */
    }

    100% {
        opacity: 1; /* Konec: opět plně viditelná */
    }
}

/* zobrazenní limitu okamžitého nabíjení v přehledu */ 

.marker-line {
    position: absolute;
    width: 3px; /* Změna: Tloušťka čárky */
    height: 12px; /* Změna: Délka čárky (cca velikost fontu) */
    z-index: 5;
    border-radius: 2px;

}

/* NOVÁ TŘÍDA POUZE PRO AKTIVNÍ BLIKÁNÍ */
.blinking-marker {
    animation-name: blink;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.marker-label {
    position: absolute;
    top: -18px; /* Změna: Posunuto výše kvůli delší čárce */
    margin-left: 10px;
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
}

/* Třída pro pozici vpravo (výchozí) */
.label-position-right {
    margin-left: 10px;
}

/* Třída pro pozici vlevo (pro vysoká procenta) */
.label-position-left {
    transform: translateX(-100%);
    margin-left: -10px;
}

/* zobrazenní stavu nabíjení */
/* Definice animace pro "tekoucí" pruhy */
@keyframes charge-flow {
    0% {
        background-position: 1rem 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* Třída, která se dynamicky přidá progress baru, když se auto nabíjí */
.charging-animation {
    /* Vytvoříme šikmé pruhy pomocí gradientu */
    background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, transparent 75%, transparent );
    background-size: 1rem 1rem; /* Velikost vzoru pruhů */
    /* Aplikujeme naši animaci */
    animation: charge-flow 1s linear infinite;
}