:root {
  --white: #e0e0e0;
  --red: #e31b23;
  --dark-bg: #1e1e1e;
  --dark-border: #333;
  --dark-input-bg: #292929;
  --dark-focus-bg: #3a3a3a;
  --transition-speed: 0.3s;
}
/* css/style.css */
/* Štýly pre tabuľku */
/* Štýl pre tabuľku */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    background-color: #171717; /* Tmavé pozadie tabuľky */
    color: #ffffff; /* Svetlý text */
    border: 1px solid #171717; /* Okraje tabuľky */
    border-radius: 8px;
    overflow: hidden; /* Zaoblené rohy tabuľky */
}

/* Štýl pre hlavičku tabuľky */
table th {
    background-color: #36363d; /* Tmavší odtieň pre hlavičku */
    color: #ffffff; /* Biela farba textu */
    text-align: left;
    padding: 12px 15px;
    font-weight: bold;
    border-bottom: 2px solid #171717; /* Odtieň pre oddelenie hlavičky */
}

/* Štýl pre riadky tabuľky */
table tr {
    border-bottom: 1px solid #171717; /* Odtieň pre oddelenie riadkov */
    transition: background-color 0.3s ease;
}

/* Štýl pre bunky tabuľky */
table td {
    padding: 12px 15px;
    text-align: left;
    font-size: 14px;
}

/* Striedavé zafarbenie riadkov tabuľky */
table tr:nth-child(even) {
    background-color: #2d2d2d; /* Jemne tmavší odtieň */
}

table tr:nth-child(odd) {
    background-color: #191919; /* Pôvodné pozadie */
}

/* Efekt pri prechode myšou cez riadok */
table tr:hover {
    background-color: #2d2d2d; /* Zvýraznenie pri hover */
}

/* Tlačidlo v tabuľke */
table td button {
    padding: 8px 12px;
    background-color: #6A1B9A; /* Fialová farba tlačidla */
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 14px;
}

/* Efekt pri hover na tlačidlo */
table td button:hover {
    background-color: #4A148C; /* Tmavšia fialová pri hover */
}
/* Resetovanie štýlov */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Celkové nastavenie pozadia */
body {
    font-family: 'Poppins', sans-serif; /* Moderné písmo Poppins */
    background-color: #212121;
    color: #ffffff;
}

/* Kontejner pre celú stránku */
.container {
    display: flex;
    min-height: 100vh;
    overflow: hidden; /* Skryj horizontálne posúvanie */
}

.main-content {
    flex: 1; /* Hlavný obsah vyplní dostupný priestor */
    overflow-x: auto; /* Povolenie horizontálneho posúvania pre tabuľku */
    padding: 20px;
    color: green;
}

/* Bočný panel (menu) */
.sidebar {
    width: 250px; /* Pevná šírka bočného panela */
    flex-shrink: 0; /* Zabránime zmenšovaniu */
    background-color: #171717;
    padding: 20px;
}
.sidebar .logo-container h1 {
    font-size: 24px;
    margin-top: 10px; /* Odsadenie medzi logom a HZS PEAK */
    margin-bottom: 20px; /* Odsadenie medzi HZS PEAK a navigačným menu */
    font-weight: bold;
    color: #ffffff;
    text-align: center;
}

/* Odstránenie odrážok zo zoznamu */
/* Navigačné menu */
.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0; /* Odstránenie predvoleného odsadenia */
}

/* Štýl pre položky zoznamu */
.sidebar ul li {
    margin-bottom: 10px; /* Medzera medzi jednotlivými položkami menu */
}

/* Štýl pre tlačidlá v menu */
.sidebar ul li a {
    display: block;
    padding: 12px 20px;
    background-color: #212121;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-size: 16px;
}

/* Efekt pri prechode myšou */
.sidebar ul li a:hover {
    background-color: #333333;
}

/* Aktívna položka menu */
.sidebar ul li a.active {
    background-color: #333333;
    font-weight: bold;
}

/* Nastavenie ikon v tlačidlách */
.sidebar ul li a i {
    margin-right: 10px;
}


/* Nadpisy */
/* Nadpisy od h1 po h5 */
h1, h2, h3, h4, h5 {
    font-family: 'Poppins', sans-serif; /* Moderné písmo Poppins */
    font-weight: 600; /* Jemne tučné, ale nie príliš */
    line-height: 1.2; /* Rozstup medzi riadkami */
    color: #cccccc; /* Jemný sivý odtieň textu */
}

/* Veľkosti podľa hierarchie */
h1 {
    font-size: 1.8rem; /* Najväčší nadpis */
}
h1:hover {
    font-family: 'Poppins', sans-serif; /* Moderné písmo Poppins */
    font-weight: 600; /* Jemne tučné, ale nie príliš */
    line-height: 1.2; /* Rozstup medzi riadkami */
    color: #ffffff; /* Jemný sivý odtieň textu */
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1rem; /* Najmenší nadpis */
}

/* Extra štýly pre vizuálnu podobnosť */
h1, h2, h3, h4, h5 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Jemný tieň pre text */
    letter-spacing: -0.02em; /* Jemne zúžené medzery medzi písmenami */
}


/* Odkaz na odhlásenie */
.logout {
    color: #ffffff;
    text-decoration: none;
    position: absolute;
    top: 20px;
    right: 20px;
}

.logout:hover {
    color: #bbbbbb;
}
/* Štýl pre tlačidlo Odhlásiť sa */
.logout-button {
    display: block;
    margin-top: 20px;
    padding: 12px 20px;
    background-color: #5e2c9d;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.logout-button:hover {
    background-color: #5d09c7;
}
/* Štýly pre prihlasovaciu a registračnú stránku */
.login-container {
    background-color: #171717;
    padding: 40px;
    width: 300px;
    margin: 100px auto;
    border-radius: 8px;
    border: solid 1px #2b2b2b;
}

.login-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.login-container label {
    color: #ffffff;
}

.login-container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #212121;
    border: solid 1px #2b2b2b;
    border-radius: 4px;
    color: #ffffff;
}

.login-container button {
    width: 100%;
    padding: 10px;
    background-color: #5e2c9d;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
}

.login-container button:hover {
    background-color: #5d09c7;
}
.error {
    color: #ff4d4d;
    margin-bottom: 15px;
}

.success {
    color: #4caf50;
    margin-bottom: 15px;
}


/* Štýly pre informačné správy */
.message {
    color: #4caf50;
    margin-bottom: 15px;
    text-align: center;
}
/* Štýly pre tlačidlo "Založiť incident" */
.create-button {
    display: inline-block;
    margin-bottom: 20px;
    padding: 12px 20px;
    background-color: #4caf50;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.create-button:hover {
    background-color: #45a049;
}

  /* Štýly pre tlačidlo Upraviť */
 .edit-button {
    padding: 5px 10px;
    margin-left: 10px;
    font-size: 14px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.edit-button:hover {
    background-color: #0056b3;
}

#cancelButton {
    background-color: #dc3545;
    margin-left: 10px;
}

#cancelButton:hover {
    background-color: #c82333;
}
form {
    width: 100%;
    margin-bottom: 20px;
}

form label {
    display: block;
    margin-bottom: 5px;
}

form input[type="text"],
form textarea {
    width: 100%;
    padding: 11px;
    margin-top: 0;
    background-color: #212121;
    border: 1px solid #444;
    border-radius: 4px;
    color: #ffffff;
}

    /* Štýly pre mapu */


/* Štýly pre kontajner incidentu */
.incident-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Štýly pre ľavý stĺpec s detailmi */
.incident-details {
    flex: 0 0 25%; /* Fixná šírka 25% */
    max-width: 25%;
    min-width: 200px;
    margin-right: 20px;
}

/* Štýly pre pravý stĺpec s mapou */
.incident-map {
    flex: 0 0 75%; /* Fixná šírka 75% */
    max-width: 75%;
}

/* Úprava mapy pre správne zobrazenie v novom kontejnery */
#map {
    width: 100%;
    height: 80%;
    min-height: 400px;
}
.logo-container {
    display: flex;
    justify-content: center; /* Zarovná logo horizontálne */
    align-items: center; /* Zarovná logo vertikálne */
    width: 100%; /* Celá šírka kontajnera */
    height: 100px; /* Výška kontajnera podľa potreby */
    margin-bottom: 50px;
}

.centered-logo {
    width: 50%;
    height: auto;
    transition: transform 0.3s ease; /* Hladká animácia */
}

.centered-logo:hover {
    transform: scale(1.1); /* Zväčší logo o 10% */
}

/* Štýly pre formulár form2 */
#addNehodaForm {
    display: none;
    background-color: #171717;
    padding: 20px;
    border-radius: 8px;
    border: solid 1px #2b2b2b;
    width: 100%;
}

#addNehodaForm h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: 24px;
}

#addNehodaForm label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #cccccc;
}

#addNehodaForm input[type="text"],
#addNehodaForm input[type="date"],
#addNehodaForm input[type="time"],
#addNehodaForm input[type="number"],
#addNehodaForm textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    background-color: #212121;
    border: 1px solid #444;
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
}

#addNehodaForm input[type="text"]::placeholder,
#addNehodaForm input[type="date"]::placeholder,
#addNehodaForm input[type="time"]::placeholder,
#addNehodaForm input[type="number"]::placeholder {
    color: #aaaaaa;
}

#addNehodaForm button {
    width: 100%;
    padding: 12px;
    background-color: #5e2c9d;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

#addNehodaForm button:hover {
    background-color: #5d09c7;
}

#addNehodaForm #genderFields {
    margin-top: 15px;
    padding: 10px;
    background-color: #212121;
    border: 1px solid #444;
    border-radius: 4px;
}

#addNehodaForm #genderFields label {
    margin-bottom: 10px;
    color: #bbbbbb;
}

#addNehodaForm #genderFields input {
    margin-right: 10px;
}
/* Štýly pre formulár form2 */
#editNehodaForm {
    display: none;
    background-color: #171717;
    padding: 20px;
    border-radius: 8px;
    border: solid 1px #2b2b2b;
    width: 100%;
}

#editNehodaForm h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: 24px;
}

#editNehodaForm label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #cccccc;
}

#editNehodaForm input[type="text"],
#editNehodaForm input[type="date"],
#editNehodaForm input[type="time"],
#editNehodaForm input[type="number"],
#editNehodaForm textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    background-color: #212121;
    border: 1px solid #444;
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
}

#editNehodaForm input[type="text"]::placeholder,
#editNehodaForm input[type="date"]::placeholder,
#editNehodaForm input[type="time"]::placeholder,
#editNehodaForm input[type="number"]::placeholder {
    color: #aaaaaa;
}

#editNehodaForm button {
    width: 100%;
    padding: 12px;
    background-color: #5e2c9d;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

#editNehodaForm button:hover {
    background-color: #5d09c7;
}

#editNehodaForm #genderFields {
    margin-top: 15px;
    padding: 10px;
    background-color: #212121;
    border: 1px solid #444;
    border-radius: 4px;
}

#editNehodaForm #genderFields label {
    margin-bottom: 10px;
    color: #bbbbbb;
}

#editNehodaForm #genderFields input {
    margin-right: 10px;
}


/* Logo v ľavom dolnom rohu */
.map-logo {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1000;
}

.map-logo img {
    width: 70px; /* Nastavenie šírky loga */
    height: auto; /* Zachovanie proporcií */
    padding: 0; /* Odstránenie akéhokoľvek vnútorného odsadenia */
    margin: 0; /* Odstránenie vonkajších okrajov */
    background: none; /* Odstránenie pozadia */
    border: none; /* Odstránenie okrajov */
    display: block; /* Zabezpečenie, že sa zobrazí ako blok */
}
/* Pulzujúce kruhy */
.pulse-circle {
    animation: pulse-animation 2s infinite;
}

/* Animácia pulzovania */
@keyframes pulse-animation {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.3;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
/* Celkový dizajn sekcie nastavení */
.settings-section {
    padding: 20px;
    background-color: #171717; /* Tmavé pozadie */
    border-radius: 8px;
    margin: 20px auto;
    max-width: 100%; /* Šírka formulára */
    color: #d1d1e0; /* Svetlá farba textu */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Tieň pre lepšiu viditeľnosť */
}

/* Nadpis */
.settings-title {
    font-size: 28px;
    color: #ffffff;
    margin-bottom: 20px;
    text-align: left;
}

/* Formulár v dvoch stĺpcoch */
.settings-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.form-column {
    flex: 1 1 calc(50% - 20px); /* Stĺpce sú rovnomerne rozložené */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Medzera medzi jednotlivými položkami */
}

/* Skupina polí */
.form-group {
    display: flex;
    flex-direction: column;
}

/* Štýl popisiek */
.settings-form label {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 5px;
}

/* Štýl vstupov */
.settings-form input {
    padding: 10px;
    font-size: 14px;
    color: #ffffff;
    background-color: #2a2a40;
    border: 1px solid #444466;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s, background-color 0.3s;
}

.settings-form input:focus {
    border-color: #5b5bff; /* Svetlomodrá pri zameraní */
    background-color: #3a3a5a; /* Svetlejšie pole pri zameraní */
}

/* Tlačidlo */
.settings-save-button {
    padding: 12px 20px;
    font-size: 16px;
    color: #ffffff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.settings-save-button:hover {
    background-color: #0056b3;
}

/* Link späť */
.settings-back-link {
    display: inline-block;
    margin-top: 15px;
    font-size: 14px;
    color: #5b5bff;
    text-decoration: none;
}

.settings-back-link:hover {
    color: #4a4ae6;
}

/* Rámček pre náhľad fotografie */
.photo-preview {
    width: 150px;
    height: 150px;
    border: 2px solid #444466;
    border-radius: 8px;
    overflow: hidden; /* Skryje prečnievajúce časti obrázku */
    margin-bottom: 10px; /* Medzera medzi obrázkom a input fieldom */
    display: flex;
    justify-content: center; /* Zarovná obrázok horizontálne */
    align-items: center; /* Zarovná obrázok vertikálne */
    background-color: #2a2a40; /* Pozadie pre prázdny rámček */
}

/* Obrázok v náhľade */
/* Rámček pre náhľad fotografie */
.photo-preview {
    width: 150px;
    height: 150px;
    border: 2px solid #444466;
    border-radius: 8px;
    overflow: hidden; /* Skryje prečnievajúce časti obrázku */
    margin-bottom: 10px; /* Medzera medzi obrázkom a input fieldom */
    display: flex;
    justify-content: center; /* Zarovná obrázok horizontálne */
    align-items: center; /* Zarovná obrázok vertikálne */
    background-color: #2a2a40; /* Pozadie pre prázdny rámček */
}

/* Obrázok v náhľade */
.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zachová proporcie a vyplní rámček */
}
#toggleFormButton {
    background-color: #28a745; /* Zelená farba */
    color: white; /* Farba textu */
    border: none; /* Odstránenie orámovania */
    padding: 10px 20px; /* Vnútorné odsadenie */
    font-size: 16px; /* Veľkosť písma */
    border-radius: 5px; /* Zaoblené rohy */
    cursor: pointer; /* Ukazovateľ ruky na hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Efekty na hover */
}

#toggleFormButton:hover {
    background-color: #218838; /* Tmavšia zelená pri hover */
    transform: scale(1.05); /* Mierne zväčšenie */
}

#toggleFormButton:active {
    background-color: #1e7e34; /* Ešte tmavšia zelená pri kliku */
    transform: scale(0.95); /* Mierne zmenšenie pri kliku */
}
/* Štýl pre lištu */
.button-bar {
    position: relative;
    display: flex;
    justify-content: flex-start; /* Zarovnanie tlačidiel doľava */
    gap: 10px; /* Medzera medzi tlačidlami */
    background-color: #1c1c1c; /* Pozadie lišty */
    padding: 10px; /* Vnútorné odsadenie */
    border-radius: 5px; /* Zaoblené rohy */
    margin-bottom: 20px; /* Odsadenie od obsahu pod lištou */
}

.btn {
    padding: 10px 15px;
    background-color: #6a1b9a;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    display: inline;
}


.btn .badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: red;
            color: white;
            border-radius: 50%;
            padding: 5px 10px;
            font-size: 12px;
}

.danger {
            background-color: #9a1c37;
            color: #fbfbfb;
}

/* Štýl pre tlačidlá */
.button-bar .btn {
    padding: 10px 20px;
    background-color: #6A1B9A; /* Fialová farba tlačidiel */
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
 .date-warning {
            color: red;
            font-weight: bold;
}

/* Hover efekt pre tlačidlá */
.button-bar .btn:hover {
    background-color: #4A148C; /* Tmavšia fialová pri hover */
}

/* Aktívne tlačidlo */
.button-bar .btn.active {
    background-color: #333333; /* Tmavá farba pre aktívne tlačidlo */
    font-weight: bold;
}
/* Skrytie podmenu v predvolenom stave */
.sidebar ul.submenu {
    display: none;
    list-style: none;
    padding-left: 20px; /* Odsadenie podkategórií */
    margin-top: 10px;
}

/* Zobrazenie podmenu pri aktívnej položke */
.sidebar li.menu-dropdown.open > ul.submenu {
    display: block;
}

/* Štýly hlavnej kategórie */
.sidebar li.menu-dropdown > a {
    cursor: pointer;
}

/* Štýly podkategórií */
.sidebar ul.submenu li a {
    font-weight: normal;
    color: #ddd; /* Farba podkategórií */
    text-decoration: none;
}

/* Zvýraznenie aktívnej položky */
.sidebar ul li a.active {
    color: #fff;
    font-weight: bold;
}

/* Štýl pre form-group */
.form-group select {
    width: 100%; /* Plná šírka */
    padding: 12px 15px; /* Pohodlné vnútorné odsadenie */
    border: 1px solid #444; /* Jemné tmavé orámovanie */
    border-radius: 5px; /* Zaoblené rohy */
    font-size: 14px; /* Rovnaká veľkosť písma ako u inputov */
    color: #e0e0e0; /* Svetlá farba textu */
    background-color: #292929; /* Tmavé pozadie */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); /* Jemný vnútorný tieň */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* Prechody pri focus */
    appearance: none; /* Skrytie natívnych šípok */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cpolygon fill='%23e0e0e0' points='70,100 25,40 115,40'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px 12px; /* Prispôsobenie veľkosti šípky */
}

.form-group select:focus {
    border-color: #0078d4; /* Modré orámovanie pri zameraní */
    background-color: #3a3a3a; /* Svetlejšie pozadie pri zameraní */
    color: #ffffff; /* Svetlá farba textu */
    box-shadow: 0 0 5px rgba(0, 120, 212, 0.5); /* Modrý vonkajší tieň */
    outline: none; /* Odstránenie natívneho obrysu */
}

.form-group select:hover {
    background-color: #333333; /* Jemne svetlejšie pozadie pri hover */
    border-color: #555555; /* Jemne svetlejšie orámovanie pri hover */
}


/* Štítky */
.form-group label {
    display: block;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    margin-bottom: 5px;
}

/* Vstupné polia */
.form-group input[type="text"],
.form-group input[type="date"] {
    width: 100%; /* Plná šírka */
    padding: 12px 15px; /* Pohodlné vnútorné odsadenie */
    border: 1px solid #444; /* Jemné tmavé orámovanie */
    border-radius: 5px; /* Zaoblené rohy */
    font-size: 14px; /* Veľkosť textu */
    color: #e0e0e0; /* Svetlé písmo */
    background-color: #292929; /* Tmavé pozadie */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); /* Jemný vnútorný tieň */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* Prechody */
}

.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus {
    border-color: #0078d4; /* Modré orámovanie pri zameraní */
    background-color: #3a3a3a; /* Svetlejšie pozadie pri zameraní */
    color: #ffffff; /* Svetlé písmo pri zameraní */
    box-shadow: 0 0 5px rgba(0, 120, 212, 0.5); /* Svetlý modrý tieň */
    outline: none; /* Odstránenie natívneho obrysu */
}

.form-group input[type="text"]:hover,
.form-group input[type="date"]:hover {
    background-color: #333333; /* Jemne svetlejšie pozadie pri hover */
    border-color: #555555; /* Jemne svetlejšie orámovanie pri hover */
}


.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus {
    border-color: #0078d4;
    box-shadow: 0 0 5px rgba(0, 120, 212, 0.5);
}

.add-button {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff; /* Biela farba textu */
    background-color: #28a745; /* Zelená farba tlačidla */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.add-button:hover {
    background-color: #218838; /* Tmavšia zelená pri hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.add-button:active {
    background-color: #1e7e34; /* Ešte tmavšia zelená pri kliknutí */
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
}

.custom-form {
padding: 25px;
border-radius: 12px;
margin: 0 auto;
}
.form-columns {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.form-column {
    flex: 1;
}
:root {
  /*
    One-stop magic hue shift
    We're using oklch(), so these might not be the hue values you are familiar with
  See: https://oklch.com/
  */
  --hue: 310; /* change me (0-360) */
  --hue-adjust: 135; /* and me */

  --hue-2: calc(var(--hue) + var(--hue-adjust));

  --page-background: oklch(10% 0.0666 var(--hue));
}

.tlacidlo {
    --button-background: oklch(20% 0.0666 120); /* Zelené pozadie */
    --text-base: oklch(45% 0.175 120); /* Svetlozelená */
    --text-hover: oklch(95% 0.145 140); /* Jemne žiarivá zelená pri hover */

    --shadow-start: oklch(95% 0.145 140); /* Svetlejší zelený odtieň */
    --shadow-end: oklch(60% 0.29 120); /* Tmavší zelený odtieň */

    --shadow-inner: 60% 0.29 120; /* Zelený vnútorný tieň */

    all: unset;

    /* Text */
    color: var(--text-base);
    font: 700 1.125rem/1.2 Raleway, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;

    /* Button sizing */
    padding: 0.85em;
    max-width: 100%;
    width: 100px;

    /* Button styling */
    background-color: var(--button-background);
    background-clip: padding-box;
    border: 5px solid var(--text-base);
    border-radius: 15px;
    cursor: pointer;

    /* Effects */
    position: relative;
    transition: 0.25s ease-out;

    /* Alignment for right side */
    margin-right: 10px; /* Odsadenie od pravého okraja */
    margin-top: 10px; /* Voliteľné odsadenie zhora */

    /* Set up pseudo elements */
    &::before,
    &::after {
        content: "";
        border-radius: inherit;
        transition: inherit;
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    /* Gradient shadow */
    &::before {
        /* Position */
        inset: -0.2em;
        z-index: -1;

        /* Effect */
        background: linear-gradient(var(--shadow-start), var(--shadow-end));
        filter: blur(1.2em) saturate(1.2);

        /* Animation */
        transform-origin: bottom;
        transform: scaleY(0.5);
        opacity: 0;
    }

    /* Semi-transparent blended box-shadow brightens up the border */
    &::after {
        /* Effect */
        box-shadow: inset 0 0 0 1px #fff, /* inner pixel */
            0 0 0 4px hsla(0deg, 0%, 100%, 0.5), /* lightened border */
            1px 1px 0 4px #fff; /* outer pixel */
        mix-blend-mode: overlay;

        /* Animation */
        opacity: 0;
    }

    &:hover,
    &:focus {
        color: var(--text-hover);

        /* Lighten border */
        border-color: transparent;

        /* Inner shadow */
        box-shadow:
            inset 0 1.4em 0 oklch(var(--shadow-inner) / 0.1), /* gloss */
            inset 0 0 1.4em oklch(var(--shadow-inner) / 0.32), /* inner glow */
            0 1px 1px oklch(var(--shadow-inner) / 0.32); /* bottom line */

        /* Show effects */
        &::before,
        &::after {
            transform: none;
            opacity: 1;
        }
    }
}


select {
  width: 100%; /* Plná šírka */
  padding: 12px 15px; /* Pohodlné vnútorné odsadenie */
  border: 1px solid #444; /* Jemné tmavé orámovanie */
  border-radius: 5px; /* Zaoblené rohy */
  font-size: 14px; /* Veľkosť textu */
  color: #e0e0e0; /* Svetlé písmo */
  background-color: #292929; /* Tmavé pozadie */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); /* Jemný vnútorný tieň */
  appearance: none; /* Skrytie natívneho štýlu */
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* Prechody */
}

select:focus {
  border-color: #0078d4; /* Modré orámovanie pri zameraní */
  background-color: #3a3a3a; /* Svetlejšie pozadie pri zameraní */
  color: #ffffff; /* Svetlejšie písmo pri zameraní */
  box-shadow: 0 0 5px rgba(0, 120, 212, 0.5); /* Svetlý modrý tieň */
  outline: none; /* Odstránenie natívneho obrysu */
}

select:hover {
  background-color: #333333; /* Jemne svetlejšie pozadie pri hover */
  border-color: #555555; /* Jemne svetlejšie orámovanie */
}

.tlacidlo-cervene {
    --button-background: oklch(20% 0.0666 10); /* Červené pozadie */
    --text-base: oklch(45% 0.175 10); /* Svetlejšia červená */
    --text-hover: oklch(95% 0.145 20); /* Jemne oranžová pri hover */

    --shadow-start: oklch(95% 0.145 20); /* Svetlejší červený odtieň */
    --shadow-end: oklch(60% 0.29 10); /* Tmavší červený odtieň */

    --shadow-inner: 60% 0.29 10; /* Červený vnútorný tieň */

    all: unset;

    /* Text */
    color: var(--text-base);
    font: 700 1.125rem/1.2 Raleway, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;

    /* Button sizing */
    padding: 0.85em;
    max-width: 100%;
    width: 25px;

    /* Button styling */
    background-color: var(--button-background);
    background-clip: padding-box;
    border: 5px solid var(--text-base);
    border-radius: 15px;
    cursor: pointer;

    /* Effects */
    position: relative;
    transition: 0.25s ease-out;

    /* Set up pseudo elements */
    &::before,
    &::after {
        content: "";
        border-radius: inherit;
        transition: inherit;
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    /* Gradient shadow */
    &::before {
        /* Position */
        inset: -0.2em;
        z-index: -1;

        /* Effect */
        background: linear-gradient(var(--shadow-start), var(--shadow-end));
        filter: blur(1.2em) saturate(1.2);

        /* Animation */
        transform-origin: bottom;
        transform: scaleY(0.5);
        opacity: 0;
    }

    /* Semi-transparent blended box-shadow brightens up the border */
    &::after {
        /* Effect */
        box-shadow: inset 0 0 0 1px #fff, /* inner pixel */
            0 0 0 4px hsla(0deg, 0%, 100%, 0.5), /* lightened border */
            1px 1px 0 4px #fff; /* outer pixel */
        mix-blend-mode: overlay;

        /* Animation */
        opacity: 0;
    }

    &:hover,
    &:focus {
        color: var(--text-hover);

        /* Lighten border */
        border-color: transparent;

        /* Inner shadow */
        box-shadow:
            inset 0 1.4em 0 oklch(var(--shadow-inner) / 0.1), /* gloss */
            inset 0 0 1.4em oklch(var(--shadow-inner) / 0.32), /* inner glow */
            0 1px 1px oklch(var(--shadow-inner) / 0.32); /* bottom line */

        /* Show effects */
        &::before,
        &::after {
            transform: none;
            opacity: 1;
        }
    }
}

.autocomplete-suggestions {
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
    background: #fff;
    position: absolute;
    z-index: 1000;
    width: calc(100% - 20px); /* Prispôsobí šírke inputu */
}
.suggestion-item {
    padding: 8px;
    cursor: pointer;
}
.suggestion-item:hover {
    background-color: #f0f0f0;
}
.notification {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
input[type="date"][readonly][id$="_do"] {
  background-color: #292929; /* Tmavé pozadie */
  color: #e0e0e0; /* Svetlé písmo */
  border: 1px solid #444; /* Jemné tmavé orámovanie */
  border-radius: 5px; /* Zaoblené rohy */
  padding: 10px; /* Vnútorné odsadenie */
  cursor: not-allowed; /* Zakázaný prístup */
  box-shadow: none; /* Odstránenie tieňov */
  pointer-events: none; /* Zakázanie interakcií */
  font-size: 14px; /* Veľkosť textu */
  font-family: 'Poppins', sans-serif; /* Moderné písmo */
  transition: background-color 0.3s ease, color 0.3s ease; /* Hladký prechod */
}

input[type="date"][readonly][id$="_do"]:hover {
  background-color: #333; /* Jemne tmavší odtieň pri hover */
  color: #c0c0c0; /* Jemne svetlejšie písmo */
}

.panel-bar {
    display: block; /* Flexbox pre zarovnanie položiek */
    background-color: #1c1c1c; /* Tmavé pozadie */
    padding: 15px; /* Vnútorné odsadenie */
    border-radius: 8px; /* Zaoblené rohy */
    margin-bottom: 10px; /* Odstup od ďalšieho obsahu */
}

.panel-bar .btn {
    padding: 10px 20px; /* Veľkosť tlačidla */
    background-color: #6A1B9A; /* Fialová farba */
    color: #ffffff; /* Biela farba textu */
    border: none; /* Bez okrajov */
    border-radius: 5px; /* Zaoblené rohy */
    font-size: 14px; /* Veľkosť textu */
    font-weight: bold; /* Tučný text */
    cursor: pointer; /* Ukazovateľ ruky */
    transition: background-color 0.3s ease; /* Plynulý efekt pri hover */
}

.panel-bar .btn:hover {
    background-color: #4A148C; /* Tmavšia fialová pri hover */
}

.panel-bar .btn:active {
    background-color: #3A0C6C; /* Ešte tmavšia fialová pri kliknutí */
}

/* Ak chcete mať oddelené tlačidlá (voliteľné) */
.panel-bar .btn + .btn {
    margin-left: 10px; /* Odstup medzi tlačidlami */
}
.panel-bar-grid {
    display: grid; /* Použitie grid layoutu */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Dynamické stĺpce */
    gap: 20px; /* Medzera medzi kockami */
    background-color: #1c1c1c; /* Tmavé pozadie panela */
    padding: 20px; /* Vnútorné odsadenie */
    border-radius: 8px; /* Zaoblené rohy */
    margin-bottom: 10px;
}

.panel-bar-item {
    display: flex;
    flex-direction: column; /* Ikona nad textom */
    justify-content: center; /* Vertikálne zarovnanie */
    align-items: center; /* Horizontálne zarovnanie */
    background-color: #2c2c2c; /* Tmavší odtieň pre kocky */
    padding: 20px;
    border-radius: 10px; /* Zaoblené rohy kocky */
    text-align: center; /* Zarovnanie textu na stred */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animácie */
    cursor: pointer; /* Ruka pri hover */
}

.panel-bar-item:hover {
    transform: translateY(-5px); /* Pohyb nahor pri hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Zvýraznený tieň pri hover */
}

.panel-bar-item svg {
    width: 50px; /* Šírka SVG */
    height: 50px; /* Výška SVG */
    fill: #ffffff; /* Farba SVG */
    margin-bottom: 10px; /* Medzera medzi ikonou a textom */
}

.panel-bar-item h3 {
    color: #ffffff; /* Biela farba textu */
    font-size: 16px; /* Veľkosť textu */
    font-weight: bold;
    margin: 0; /* Bez dodatočných medzier */
}
.panel-bar-item-mini {
    display: flex;

    justify-content: center; /* Vertikálne zarovnanie */
    align-items: center; /* Horizontálne zarovnanie */
    background-color: #2c2c2c; /* Tmavší odtieň pre kocky */
    padding: 20px;
    border-radius: 10px; /* Zaoblené rohy kocky */
    text-align: center; /* Zarovnanie textu na stred */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animácie */
    cursor: pointer; /* Ruka pri hover */
}

.panel-bar-item-mini:hover {
    transform: translateY(-5px); /* Pohyb nahor pri hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Zvýraznený tieň pri hover */
}
/* Tlačidlá v stĺpci Akcie */
.btn-operacne {
    display: inline-flex; /* Flexbox pre ikonu */
    align-items: center; /* Vertikálne zarovnanie */
    justify-content: center; /* Horizontálne zarovnanie */
    padding: 5px; /* Menší padding */
    width: 32px; /* Fixná šírka */
    height: 32px; /* Fixná výška */
    background-color: #007bff; /* Modré pozadie */
    color: white; /* Biela farba ikony */
    border: none; /* Bez okraja */
    border-radius: 50%; /* Okrúhle tlačidlá */
    font-size: 14px; /* Veľkosť ikony */
    cursor: pointer; /* Pointer na hover */
    margin-right: 5px; /* Medzera medzi tlačidlami */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Jemný tieň */
    transition: background-color 0.3s, transform 0.2s; /* Animácie */
}

.btn-operacne:hover {
    background-color: #0056b3; /* Tmavšia modrá na hover */
    transform: scale(1.1); /* Mierne zväčšenie na hover */
}

.btn-operacne:active {
    background-color: #003d80; /* Ešte tmavšia modrá pri kliknutí */
    transform: scale(1); /* Návrat na pôvodnú veľkosť */
}

.btn-operacne i {
    pointer-events: none; /* Zamedzenie interakciám s ikonou */
}

  .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 300px;
            border-radius: 10px;
}

table tr.pending-row {
    background-color: #c6bd07 !important;
}

table tr.approved-row {
    background-color: #2c861e !important;
}

table tr.rejected-row {
    background-color: #aa2a2a !important;
}

.btn-ziadosti {
    padding: 10px 15px;
    background-color: #6a1b9a;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    display: inline-block; /* Umožní tlačidlám byť vedľa seba */
    margin-right: 10px; /* Medzera medzi tlačidlami */
    text-align: center; /* Zarovnanie textu na stred */
}

.btn-ziadosti:last-child {
    margin-right: 0; /* Odstráni pravú medzeru pri poslednom tlačidle */
}
.laviny-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap; /* Flexibilné zalamovanie na menších obrazovkách */
}

.lavina-box {
    flex: 1 1 calc(50% - 20px); /* Boxy budú zaberat polovicu šírky pri väčších obrazovkách */
    background-color: #2c2c2c;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
}

.lavina-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lavina-icon svg {
    flex-shrink: 0; /* Zabezpečí, že ikona sa nezmenší */
}

.lavina-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lavina-text h4 {
    font-size: 18px;
    color: #cccccc;
    margin-bottom: 10px;
}

.lavina-text p {
    margin: 5px 0;
    font-size: 14px;
}

.stupen-1 circle {
    fill: #00ff00; /* Zelená pre stupeň 1 */
}

.stupen-2 circle {
    fill: #ffff00; /* Žltá pre stupeň 2 */
}

.stupen-3 circle {
    fill: #ffcc00; /* Oranžová pre stupeň 3 */
}

.stupen-4 circle {
    fill: #ff9900; /* Svetločervená pre stupeň 4 */
}

.stupen-5 circle {
    fill: #ff0000; /* Červená pre stupeň 5 */
}
  .condition-text {
        font-size: 20px;
        font-weight: bold;
        margin: 5px 0;
    }
    .dobré {
        color: #28a745; /* Zelená */
    }
    .obmedzené {
        color: #ffc107; /* Žltá */
    }
    .zlé {
        color: #dc3545; /* Červená */
    }
    .komentar {
    background-color: #2c2c2c;
    border: 3px solid #343434;
    border-radius: 10px;
    color: #f2f2f2;
    padding: 15px;
    }
    .komentar h3 {
    color: #ffc107;
    margin-bottom: 5px;
    }
.panel-bar .btn-ext {
    padding: 10px 20px; /* Veľkosť tlačidla */
    background-color: #2b2b2b; /* Fialová farba */
    color: #ffffff; /* Biela farba textu */
    border: none; /* Bez okrajov */
    border-radius: 5px; /* Zaoblené rohy */
    font-size: 14px; /* Veľkosť textu */
    font-weight: bold; /* Tučný text */
    cursor: pointer; /* Ukazovateľ ruky */
    transition: background-color 0.3s ease; /* Plynulý efekt pri hover */
}

.panel-bar .btn-ext:hover {
    background-color: #30223e; /* Tmavšia fialová pri hover */
}

.panel-bar .btn-ext:active {
    background-color: #60368a; /* Ešte tmavšia fialová pri kliknutí */
}

/* Ak chcete mať oddelené tlačidlá (voliteľné) */
.panel-bar .btn-ext + .btn-ext {
    padding: 10px; /* Odstup medzi tlačidlami */
    margin: 2px;
}
/* Štýly pre filter-bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.filter-input,
.filter-select {
  padding: 12px 15px;
  font-size: 14px;
  border: 1px solid var(--dark-border);
  border-radius: 5px;
  background-color: var(--dark-input-bg);
  color: var(--white);
  transition: background-color var(--transition-speed), border-color var(--transition-speed);
  width: 250px;
}

.filter-input:focus,
.filter-select:focus {
  background-color: var(--dark-focus-bg);
  border-color: var(--red);
  outline: none;
}

.clear-button {
  padding: 12px 15px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  background-color: var(--red);
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--transition-speed);
}

.clear-button:hover {
  background-color: #c61b20;
}

.clear-button:active {
  background-color: #a5151a;
}

.filter-input::placeholder {
  color: var(--white);
  opacity: 0.7;
}

.filter-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cpolygon fill='%23e0e0e0' points='70,100 25,40 115,40'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 12px;
}

/* Responsive layout for filters */
@media (max-width: 600px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-input,
  .filter-select {
    width: 100%;
  }

  .clear-button {
    width: 100%;
  }
}

.cas {
   display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #4f5166;
    color: white;
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.cas:hover {
    background-color: #2d2e3a; /* Tmavšia fialová pri hover */
}

.add-udalost {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #bb2124;
    color: white;
    font-weight: 600;
    border: 3px solid #931c23;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-udalost:hover {
    background-color: #c94d50; /* Tmavšia fialová pri hover */
}

.add-podudalost {
   display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #f2c50c;
    color: #000000;
   font-weight: 600;
    border: 3px solid #0273b2;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-podudalost:hover {
    background-color: #f9de6b; /* Tmavšia fialová pri hover */
}

.add-ziadatel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #0090f2;
    color: #ffffff;
   font-weight: 600;
    border: 3px solid #0273b2;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-ziadatel:hover {
    background-color: #35a3ed; /* Tmavšia fialová pri hover */
}

.add-zachranovana-osoba {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #e5e5e5;
    color: #b72323;
   font-weight: 600;
    border: 3px solid #b7b4b4;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-zachranovana-osoba:hover {
    background-color: #f9f9f9; /* Tmavšia fialová pri hover */
}

.add-vyjazd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #e5e5e5;
    color: #8baf45;
    font-weight: 600;
    border: none;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-vyjazd:hover {
    background-color: #98b266; /* Tmavšia fialová pri hover */
}

.add-prichod {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #bb0ee5;
    color: #b72323;
     font-weight: 600;
    border: none;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-prichod:hover {
    background-color: #c35edb; /* Tmavšia fialová pri hover */
}

.add-ukoncenie {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #41ad27;
    color: #b72323;
    font-weight: 600;
    border: none;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-ukoncenie:hover {
    background-color: #68ad57; /* Tmavšia fialová pri hover */
}

.add-ate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #ffffff;
    color: #fe090f;
    font-weight: 600;
    border: none;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-ate:hover {
    background-color: #f2f2f2; /* Tmavšia fialová pri hover */
}

.add-112 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #ffffff;
    color: #fe090f;
    font-weight: 600;
    border: none;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-112:hover {
    background-color: #f2f2f2; /* Tmavšia fialová pri hover */
}

.add-topr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #232323;
    color: #fe090f;
    font-weight: 600;
    border: 2px solid #515151;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-topr:hover {
    background-color: #515151; /* Tmavšia fialová pri hover */
}

.add-policia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #74a369;
    color: #fe090f;
    font-weight: 600;
    border: none;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-policia:hover {
    background-color: #62a352; /* Tmavšia fialová pri hover */
}
.add-sos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #ffffff;
    color: #fe090f;
    font-weight: 600;
    border: none;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-sos:hover {
    background-color: #f2f2f2; /* Tmavšia fialová pri hover */
}

.add-diagnoza {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #ffffff;
    color: #fe090f;
    font-weight: 600;
    border: 3px solid #b7b4b4;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-diagnoza:hover {
    background-color: #dd5854; /* Tmavšia fialová pri hover */
}

.add-letka {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #717f58;
    color: #fe090f;
    font-weight: 600;
    border: 1px solid #f2f2f2;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-letka:hover {
    background-color: #4b5934; /* Tmavšia fialová pri hover */
}

.add-pocet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #bf2828;
    color: #fe090f;
    font-weight: 600;
    border: 1px solid #f2f2f2;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-pocet:hover {
    background-color: #8c1c1c; /* Tmavšia fialová pri hover */
}

.add-zraneni {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #ffffff;
    color: #fe090f;
    font-weight: 600;
    border: 1px solid #2e97c6;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-zraneni:hover {
    background-color: #2e97c6; /* Tmavšia fialová pri hover */
}

.add-mrtvy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #000000;
    color: #fe090f;
    font-weight: 600;
    border: 3px solid #141414;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-mrtvy:hover {
    background-color: #212121; /* Tmavšia fialová pri hover */
}

.add-155 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px; /* Nastavenie pevnej šírky tlačidla */
    height: 70px; /* Nastavenie pevnej výšky tlačidla */
    background-color: #ffffff;
    color: #fe090f;
    font-weight: 600;
    border: 3px solid #141414;
    border-radius: 10px; /* Zaoblené rohy */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    margin: 5px; /* Medzera medzi tlačidlami */
    transition: background-color 0.3s ease;
}
.add-155:hover {
    background-color: #dddddd; /* Tmavšia fialová pri hover */
}



.sluzobny-zaznam-buttons {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
}

.sluzobny-zaznam-buttons td {
    vertical-align: top;
    padding: 10px;
    text-align: left; /* Zarovnanie obsahu na stred */
}

.sluzobny-zaznam-buttons h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.button-priebeh-zaznamu {
    width: 50px;
    height: 50px;
    background-color: #171717;
    border: 1px solid #232323;
    color: #444;
}
.button-priebeh-zaznamu:hover {
    color: #ffffff;
}
#popup-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

#popup-content {
  background: white;
  width: 75%;
  height: 75%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

#popup-close {
  position: absolute;
  top: 10px;
  right: 25px;
  background: #000000;
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

/* Tlačidlo na zatvorenie popupu */
.close-container-custom {
  position: relative;
  margin: auto;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.close-container-custom .leftright,
.close-container-custom .rightleft {
  height: 4px;
  width: 50px;
  position: absolute;
  margin-top: 24px;
  background-color: var(--softorange, #F4A259); /* Predvolená farba alebo fallback */
  border-radius: 2px;
  transform: rotate(45deg);
  transition: all 0.3s ease-in;
}

.close-container-custom .rightleft {
  transform: rotate(-45deg);
}

.close-container-custom label {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s ease-in;
  opacity: 0;
}

.close-container-custom .close {
  margin: 60px 0 0 5px;
  position: absolute;
}

.close-container-custom:hover .leftright {
  transform: rotate(-45deg);
  background-color: var(--tomatored, #F25C66);
}

.close-container-custom:hover .rightleft {
  transform: rotate(45deg);
  background-color: var(--tomatored, #F25C66);
}

.close-container-custom:hover label {
  opacity: 1;
}
   .glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
  .btnx {
    width: 130px;
    height: 35px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    margin-top: 10px;
    text-transform: uppercase;
}

.btnx:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.btnx:active {
    color: #000
}

.btnx:active:after {
    background: transparent;
}

.btnx:hover:before {
    opacity: 1;
}

.btnx:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes btnx {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
.button-15 {
  background-image: linear-gradient(#A742EC, #7700C9);
  border: 1px solid #7700C9;
  border-radius: 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  direction: ltr;
  display: block;
  font-family: "SF Pro Text","SF Pro Icons","AOS Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.47059;
  min-width: 30px;
  overflow: visible;
  padding: 4px 15px;
  text-align: center;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  margin-top: 10px;
}

.button-15:disabled {
  cursor: default;
  opacity: .3;
}

.button-15:hover {
  background-image: linear-gradient(#BD51EE, #9314CD);
  border-color: #9314CD;
  text-decoration: none;
}

.button-15:active {
  background-image: linear-gradient(#BD51EE, #9314CD);
  border-color: #9314CD;
  outline: none;
}

.button-15:focus {
  box-shadow: rgba(131, 192, 253, 0.5) 0 0 0 3px;
  outline: none;
}
@media (max-width: 768px) {
  /* Celkové nastavenie pre menšie obrazovky */
  body {
    font-size: 14px; /* Zmenšené písmo */
  }

  .container {
    flex-direction: column; /* Vertikálne usporiadanie */
  }

  .sidebar {
    width: 100%; /* Sidebar cez celú šírku */
    padding: 10px;
  }

  .main-content {
    padding: 10px;
  }

  /* Tabuľky na malých obrazovkách */
  table {
    font-size: 14px; /* Zmenšená veľkosť písma */
  }

  table th,
  table td {
    padding: 8px; /* Zmenšené odsadenie */
  }

  table tr:nth-child(even),
  table tr:nth-child(odd) {
    background-color: #1e1e1e; /* Jednotné pozadie pre zlepšenie prehľadnosti */
  }

  /* Formuláre */
  .login-container,
  #addNehodaForm,
  #editNehodaForm {
    width: 90%; /* Prispôsobenie šírky */
    margin: 20px auto;
  }

  /* Bočné menu */
  .sidebar ul li a {
    font-size: 14px; /* Menšie písmo */
    padding: 10px; /* Zmenšené odsadenie */
  }

  /* Tlačidlá */
  button,
  .btn,
  .add-button {
    padding: 8px 12px; /* Menšie tlačidlá */
    font-size: 14px;
  }

  .tlacidlo {
    width: 80px; /* Užšie tlačidlo */
    height: 40px; /* Menšia výška */
  }

  /* Karty a boxy */
  .panel-bar,
  .lavina-box,
  .settings-section {
    padding: 15px; /* Zmenšené odsadenie */
  }

  .panel-bar-grid {
    grid-template-columns: 1fr; /* Jednostĺpcové zobrazenie */
  }

  .panel-bar-item,
  .lavina-box {
    flex: 1 1 100%; /* Plná šírka */
    margin-bottom: 15px; /* Väčšie medzery medzi boxmi */
  }

  /* Text */
  h1,
  h2,
  h3 {
    font-size: 1.2rem; /* Zmenšené nadpisy */
  }

  /* Pop-up */
  #popup-content {
    width: 90%;
    height: auto; /* Automatická výška */
    padding: 20px;
  }

  /* Lišty a filter */
  .filter-bar {
    flex-direction: column; /* Vertikálne usporiadanie */
    gap: 10px;
  }

  .filter-input,
  .filter-select,
  .clear-button {
    width: 100%; /* Plná šírka */
  }

  /* Štýly pre tlačidlá */
  .add-udalost,
  .add-podudalost,
  .add-ziadatel,
  .add-zachranovana-osoba,
  .add-vyjazd,
  .add-prichod,
  .add-ukoncenie {
    width: 60px; /* Menšie tlačidlá */
    height: 60px;
  }
}

/* Vlastný Leaflet control pre prepínanie vrstiev */
.leaflet-control.layer-toggle-control {
  background-color: rgba(255, 255, 255, 1.2);
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Ikonky */
.layer-toggle-icon {
  width: 40px;
  height: 40px;
  cursor: pointer;
  opacity: 0.4;
  transition: all 0.2s ease;
  border-radius: 4px;
}

/* Po kliknutí */
.layer-toggle-icon.active {
  opacity: 1;
}
/* ====== Tlačiarne HZS (scoped) ====== */
.content.tlaciarne {
  padding: 16px 20px;
}

.tlaciarne h1 {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.2;
}

.tlaciarne h2, .tlaciarne h3 {
  margin: 18px 0 8px;
  line-height: 1.2;
}

/* Filter lišta */
.tlaciarne .filter {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}
.tlaciarne .filter label {
  color: #74c365; /* decent zelená ako u teba */
  font-weight: 700;
}
.tlaciarne .filter input[type="text"],
.tlaciarne .filter select {
  background: #202225;
  border: 1px solid #2f3238;
  border-radius: 8px;
  color: #ddd;
  padding: 10px 12px;
  min-width: 220px;
  outline: none;
}
.tlaciarne .filter input[type="text"]:focus,
.tlaciarne .filter select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,.2);
}
.tlaciarne .filter .edit-btn {
  padding: 10px 14px;
  border-radius: 10px;
}

/* Tabuľky */
.tlaciarne .table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #1d1f23;
  border: 1px solid #2a2d33;
  border-radius: 12px;
  overflow: hidden;
}
.tlaciarne .table thead th {
  background: #2b2e35;
  color: #e6e6e6;
  text-align: left;
  font-weight: 800;
  padding: 12px 14px;
  border-bottom: 1px solid #2a2d33;
  white-space: nowrap;
}
.tlaciarne .table tbody td {
  padding: 10px 14px;
  color: #d6d6d6;
  border-bottom: 1px solid #24272d;
}
.tlaciarne .table tbody tr:last-child td { border-bottom: none; }
.tlaciarne .table tbody tr:hover td { background: #23262c; }

/* “Žiadne …” riadok */
.tlaciarne .table tbody td[colspan] {
  text-align: center;
  color: #9aa0a6;
  padding: 16px 12px;
}

/* details/summary tlačidlá (+ Pridať …) */
.tlaciarne details {
  margin: 8px 0 10px;
}
.tlaciarne summary.edit-btn {
  display: inline-block;
  background: transparent;
  border: 1px dashed #3a3f47;
  color: #74c365;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}
.tlaciarne details[open] summary.edit-btn {
  border-style: solid;
}

/* Form gridy vo vnútri details */
.tlaciarne details form {
  background: #181a1e;
  border: 1px solid #2a2d33;
  border-radius: 12px;
  padding: 12px;
}
.tlaciarne details form input,
.tlaciarne details form select {
  background: #202225;
  border: 1px solid #2f3238;
  border-radius: 8px;
  color: #ddd;
  padding: 8px 10px;
  width: 100%;
}
.tlaciarne details form input:focus,
.tlaciarne details form select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,.2);
}
.tlaciarne details form .edit-btn {
  padding: 10px 14px;
  border-radius: 10px;
}

/* Menšie úpravy tlačidiel v akciách tabuľky */
.tlaciarne td form .edit-btn {
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 8px;
}
.tlaciarne td form select {
  min-width: 140px;
}

/* Sekčné horizontálne deliace čiary peknejšie */
.tlaciarne hr {
  border: none;
  height: 1px;
  background: #2a2d33;
  margin: 18px 0;
}