body {
            /*display: flex;*/
            /*margin: 0;*/
            /*font-family: Arial, sans-serif;*/
        }


/* Svetla tema */
body.light {
    font-family: Arial, sans-serif;
    background-color: #b69872;
    display: flex;
    /*flex-direction: column; !* Postavljanje elemenata u kolonu *!*/
    /*justify-content: center;*/
    /*align-items: center;*/
    height: 100vh;
    margin: 0;
    color: #333;
}

body.light h1 {
    text-align: center;
    color: #c9520d;
    margin-bottom: 20px;
}

body.light .error-messages {
    color: red;
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

body.light #map-container {
    width: 75%;
    height: 100vh;
}

body.light #sidebar {
    width: 25%;
    /*background: #f400f4;*/
    background-color: #b69872;
    padding: 10px;
    border-right: 1px solid #ccc;
    overflow-y: auto;
    box-sizing: border-box;
}


/* DASHBOARD --- LIGHT THEME ----------------------------------------------------- */
body.light .container {
    background-color: #f0e1c1; /* Svetla pozadina kontejnera (prilagođeno) */
    justify-content: center; /* Centriraj dugmad horizontalno */
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #c9520d;
    color: #000;
    width: 300px;
}

/* sadrzi za dashboard: promeni temu i odjavi se */
body.light .button-container {
    display: flex; /* Aktivira flexbox */
    flex-direction: row; /* Postavlja dugmadi u kolonu */
    gap: 15px; /* Razmak između dugmadi */
    align-items: center; /* Centriranje dugmadi po horizontali */
    justify-content: center;
}

body.light .button {
    width: 100%;
    padding: 10px;
    background-color: #c28865; /* Svetla pozadina dugmeta */
    color: #fff; /* Svetla boja teksta */
    border: 2px solid #79543d; /* Granica oko dugmeta */
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 20px;
}

body.light .button:hover {
    background-color: #c9520d; /* Tamnija boja pozadine pri hoveru */
    transform: scale(1); /* Povećanje dugmeta pri hoveru */
}


/* KORISNICI --- LIGHT THEME ----------------------------------------------------- */
/* stil forme */
body.light .korisnici-form {
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    max-width: 260px; /* Maksimalna širina forme */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Razmak između elemenata u formi */
    margin: 0 auto; /* Centriranje forme na stranici */
}

body.light .korisnici-form button {
    width: 100%;
    padding: 10px;
    background-color: #c28865; /* Tamna pozadina dugmeta */
    color: #fff; /* Bela boja teksta */
    border: 2px solid #79543d; /* Granica oko dugmeta */
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 1px;
    /*margin-top: 20px;*/
    /*gap: 20px;*/
}

body.light .korisnici-form button:hover {
    background-color: #c9520d; /* Svetla boja pozadine pri hoveru */
    transform: scale(1); /* Povećanje dugmeta pri hoveru */
}

/* Stil za input polja */
body.light .korisnici-form input {
    width: 100%;
    padding: 5px;
    margin: 1px 0;
    border-radius: 5px;
    border: 2px solid #c9520d;
    background-color: #e8ca8f;
    font-size: 16px;
    color: #333;
}

/* Fokusiranje na input polje */
body.light .korisnici-form input:focus {
    border-color: #4151bb; /* Tamnija boja granice na focus */
    border: 4px solid;
    outline: none;
}

/* Stil za placeholder tekst u input poljima */
body.light .korisnici-form input::placeholder {
    color: #3f3e3e;
}

/* Dodatno stilizovanje za dugme pri hover efektu */
body.light .korisnici-form button:active {
    transform: scale(1); /* Malo smanjivanje dugmeta pri kliku */
}


/* VEHICLE BOXES --- LIGHT THEME ----------------------------------------------------- */
body.light .vehicle-form {

    background-color: #b69872;
    display: flex;
    height: 100vh;
}

body.light #vehicle-list {
    background-color: #f0e1c1; /* Svetla pozadina kontejnera */
    border: 2px solid #c9520d;
    border-radius: 8px;
    list-style: none;
    padding: 10px;
    overflow-y: auto; /* Omogućava skrolovanje unutar liste */
    max-height: calc(70vh); /* Maksimalna visina liste da se ne preklapa sa dugmadi */
    /*max-height: calc(100vh - 250px); !* Maksimalna visina liste da se ne preklapa sa dugmadi *!*/
}

/* Stil za stavke unutar liste vozila */
body.light .vehicle-item {
    padding: 10px;
    margin: 5px 0;
    background-color: #c28865; /* Svetla pozadina */
    color: white;
    border: 2px solid #79543d;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/*!* Hover efekat za vozila *!*/
/*body.light .vehicle-item:hover {*/
/*    background-color: #c9520d; !* Tamnija boja pri hoveru *!*/
/*}*/


/* MAP --- LIGHT THEME ----------------------------------------------------- */
body.light #map {
    width: 100%;
    height: 100%;
    background-color: #fff; /* Svetla pozadina mape */
}

body.light .custom-marker {
    /*position: relative;*/
    /*display: flex;*/
    align-items: center;
    justify-content: center;
}

body.light .marker-icon {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 0, 0.54);
    border: 2px solid red;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 1);
}

body.light .marker-label {
    width: 40px;
    height: 20px;
    margin-top: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    background-color: rgba(255, 255, 0, 0.54);
    padding: 2px 5px;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 1);
}


/* Postavljanje kontejnera za dugmad */
body.light #button-container {
    position: absolute;
    bottom: 10px; /* Postavlja dugmad na dno */
    left: 10px; /* Postavlja dugmad na levo */
    display: flex;
    gap: 10px; /* Razmak između dugmadi */
}


body.light #btn-static,
body.light #btn-center,
body.light #btn-exit {
    background-color: #c28865;
    color: #fff; /* Bela boja teksta */
    border: 2px solid #79543d; /* Granica oko dugmeta */
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5vh;
    width: 100%;
    margin-top: 10px;
    gap: 5px; /* Razmak između dugmadi */
}

body.light #btn-static:hover,
body.light #btn-center:hover,
body.light #btn-exit:hover {
    background-color: #c9520d; /* Postavlja pozadinu na žutu kad se pređe preko dugmeta */
}

/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */
/* Tamna tema */


body.dark {
    font-family: Arial, sans-serif;
    background-color: #090400; /* Tamna pozadina */
    display: flex;
    /*flex-direction: column; !* Postavljanje elemenata u kolonu *!*/
    /*justify-content: center;*/
    /*align-items: center;*/
    height: 100vh;
    margin: 0;
    color: #fff;
}

body.dark h1 {
    text-align: center;
    color: #c9520d;
    margin-bottom: 20px;
}

body.dark .error-messages {
    color: red;
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

#map-container {
    width: 75%;
    height: 100vh;
}

body.dark #sidebar {
    width: 25%;
    background-color: #331e1e; /* Tamna pozadina dugmeta */
    padding: 10px;
    border-right: 1px solid #000;
    overflow-y: auto;
    box-sizing: border-box;
}


/* DASHBOARD --- DARK THEME ----------------------------------------------------- */
/* sadrzi za dashboard: program, korisnici i vozila */
body.dark .container {
    background-color: #331e1e; /* Svetla pozadina kontejnera (prilagođeno) */
    justify-content: center; /* Centriraj dugmad horizontalno */
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #c9520d;
    color: #000;
    width: 300px;
}

/* sadrzi za dashboard: promeni temu i odjavi se */
body.dark .button-container {
    display: flex; /* Aktivira flexbox */
    flex-direction: row; /* Postavlja dugmadi u kolonu */
    gap: 15px; /* Razmak između dugmadi */
    align-items: center; /* Centriranje dugmadi po horizontali */
    justify-content: center;
}

body.dark .button {
    width: 100%;
    padding: 10px;
    background-color: #4b2008; /* Tamna pozadina dugmeta */
    color: #fff; /* Bela boja teksta */
    border: 2px solid #79543d; /* Granica oko dugmeta */
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 20px;
    /*margin-top: 20px;*/
    /*gap: 20px;*/
}

body.dark .button:hover {
    background-color: #c9520d; /* Svetla boja pozadine pri hoveru */
    transform: scale(1); /* Povećanje dugmeta pri hoveru */
}


/* LOGIN --- DARK THEME ----------------------------------------------------- */
/* stil forme */
body.dark .login-form {
    /*background-color: #f0e1c1; !* Svetla pozadina forme *!*/
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    max-width: 260px; /* Maksimalna širina forme */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Razmak između elemenata u formi */
    margin: 0 auto; /* Centriranje forme na stranici */
}

/* Stil za input polja */
body.dark .login-form input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border-radius: 5px;
    border: 2px solid #c9520d;
    background-color: #86723f;
    font-size: 16px;
    color: #1f0101;
}

/* Fokusiranje na input polje */
body.dark .login-form input:focus {
    border-color: #d3d5e1; /* Tamnija boja granice na focus */
    border: 4px;
    /*outline: none;*/
}

/* Stil za dugme */
body.dark .login-form button {
    width: 100%;
    padding: 12px;
    background-color: #c9520d; /* Svetla boja dugmeta */
    color: white;
    font-size: 16px;
    border: 2px solid #79543d;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Hover efekat za dugme */
body.dark .login-form button:hover {
    background-color: #501e04; /* Tamnija boja pozadine pri hoveru */
}

/* Stil za placeholder tekst u input poljima */
body.dark .login-form input::placeholder {
    color: #3f3e3e;
}

/* Dodatno stilizovanje za dugme pri hover efektu */
body.dark .login-form button:active {
    transform: scale(1); /* Malo smanjivanje dugmeta pri kliku */
}


/* KORISNICI --- DARK THEME ----------------------------------------------------- */
/* stil forme */
body.dark .korisnici-form {
    padding: 10px;
    border-radius: 10px;
    width: 100%;
    max-width: 260px; /* Maksimalna širina forme */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Razmak između elemenata u formi */
    /*margin: 0; !* Centriranje forme na stranici *!*/
}

body.dark .korisnici-form button {
    width: 100%;
    padding: 10px;
    background-color: #4b2008; /* Tamna pozadina dugmeta */
    color: #fff; /* Bela boja teksta */
    border: 2px solid #79543d; /* Granica oko dugmeta */
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 1px;
    /*margin-top: 20px;*/
    /*gap: 20px;*/
}

body.dark .korisnici-form button:hover {
    background-color: #c9520d; /* Svetla boja pozadine pri hoveru */
    transform: scale(1); /* Povećanje dugmeta pri hoveru */
}

/* Stil za input polja */
body.dark .korisnici-form input {
    width: 100%;
    padding: 5px;
    margin: 1px 0;
    border-radius: 5px;
    border: 2px solid #c9520d;
    background-color: #86723f;
    font-size: 16px;
    color: #333;
}

/* Fokusiranje na input polje */
body.dark .korisnici-form input:focus {
    border-color: #4151bb; /* Tamnija boja granice na focus */
    border: 4px solid;
    /*outline: none;*/
}

/* Stil za placeholder tekst u input poljima */
body.dark .korisnici-form input::placeholder {
    color: #3f3e3e;
}

/* Dodatno stilizovanje za dugme pri hover efektu */
body.dark .korisnici-form button:active {
    transform: scale(0.98); /* Malo smanjivanje dugmeta pri kliku */
}



/* VEHICLE BOXES --- DARK THEME ----------------------------------------------------- */
body.dark .vehicle-form {
    background-color: #b69872;
    display: flex;
    height: 100vh;
}

body.dark #vehicle-list {
    background-color: #4b2008; /* Svetla pozadina kontejnera */
    border: 2px solid #c9520d;
    border-radius: 8px;
    list-style: none;
    padding: 10px;
    overflow-y: auto; /* Omogućava skrolovanje unutar liste */
    max-height: calc(70vh); /* Maksimalna visina liste da se ne preklapa sa dugmadi */
    /*max-height: calc(100vh - 250px); !* Maksimalna visina liste da se ne preklapa sa dugmadi *!*/
}

/* Stil za stavke unutar liste vozila */
body.dark .vehicle-item {
    padding: 10px;
    margin: 5px 0;
    background: #4b2008; /* Svetla pozadina */
    color: #ffff;
    border: 2px solid #79543d;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Hover efekat za vozila */
body.dark .vehicle-item:hover {
    background-color: #c9520d; /* Tamnija boja pri hoveru */
}




/* MAP --- DARK THEME ----------------------------------------------------- */
#map {
    width: 100%;
    height: 100%;
}

body.dark .custom-marker {
    /*position: relative;*/
    /*display: flex;*/
    align-items: center;
    justify-content: center;
}

body.dark .marker-icon {
    width: 20px;
    height: 20px;
    background-color: #774604;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 255, 255, 1);
    display: block;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.dark .marker-label {
    width: 40px;
    height: 20px;
    margin-top: 5px;
    font-size: 14px;
    /*font-weight: bold;*/
    color: #ffffff;
    background-color: rgba(180, 72, 0, 0.41);
    padding: 2px 5px;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(255, 255, 255, 1);
}

/* Postavljanje kontejnera za dugmad */
body.dark #button-container {
    position: absolute;
    bottom: 10px; /* Postavlja dugmad na dno */
    left: 10px; /* Postavlja dugmad na levo */
    display: flex;
    gap: 10px; /* Razmak između dugmadi */
}

body.dark #btn-static,
body.dark #btn-center,
body.dark #btn-exit {
    background-color: #4b2008;
    /*color: #79543d;*/
    color: white;
    border: 2px solid #79543d; /* Granica oko dugmeta */
    border-radius: 4px;
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    height: 5vh;
    width: 100%;
    margin-top: 10px;
    gap: 5px; /* Razmak između dugmadi */
}

body.dark #btn-static:hover,
body.dark #btn-center:hover,
body.dark #btn-exit:hover {
    background-color: #751705; /* Postavlja pozadinu na žutu kad se pređe preko dugmeta */
}


@media screen and (max-width: 500px) {
    body.light #button-container,
    body.dark #button-container {
        flex-direction: column; /* Postavljanje dugmadi u kolonu na malim ekranima */
        align-items: stretch; /* Dugmad se šire po širini ekrana */
    }

    body.light #btn-static,
    body.light #btn-center,
    body.light #btn-exit,
    body.dark #btn-static,
    body.dark #btn-center,
    body.dark #btn-exit {
        width: 50%; /* Širina dugmadi prilagođena za mobilne telefone */
        margin: 5px; /* Centriranje dugmadi */
        height: auto; /* Visina automatski prilagođena sadržaju */
        font-size: 14px; /* Smanjenje veličine fonta za bolji prikaz */
    }

    /* Pomeranje mape ka sredini */
    body.light #map,
    body.dark #map {
        display: flex;
        justify-content: flex-end; /* Poravnanje mape u desno */
        align-items: flex-end; /* Poravnanje mape na dno */
        /*max-height: calc(50vh);*/ /* Maksimalna visina liste da se ne preklapa sa dugmadi */
        width: 90%;
        /*height: 80vh;*/
        max-height: 100%;
        padding-bottom: 40vh;
        box-sizing: border-box; /* Uključivanje padding-a u dimenzije */
    }

    body.light #vehicle-list,
    body.dark #vehicle-list {
        max-height: calc(50vh); /* Maksimalna visina liste da se ne preklapa sa dugmadi */
    }
}

@media screen and (max-height: 500px) {
    body.light #button-container,
    body.dark #button-container {
        flex-direction: row; /* Postavljanje dugmadi u kolonu na malim ekranima */
        align-items: stretch; /* Dugmad se šire po širini ekrana */
    }

    body.light #btn-static,
    body.light #btn-center,
    body.light #btn-exit,
    body.dark #btn-static,
    body.dark #btn-center,
    body.dark #btn-exit {
        width: 20%; /* Širina dugmadi prilagođena za mobilne telefone */
        margin: 5px; /* Centriranje dugmadi */
        height: auto; /* Visina automatski prilagođena sadržaju */
        font-size: 14px; /* Smanjenje veličine fonta za bolji prikaz */
    }

    /* Pomeranje mape ka sredini */
    body.light #map,
    body.dark #map {
        display: flex;
        justify-content: flex-end; /* Poravnanje mape u desno */
        align-items: flex-end; /* Poravnanje mape na dno */
        /*max-height: calc(50vh);*/ /* Maksimalna visina liste da se ne preklapa sa dugmadi */
        width: 100%;
        /*height: 80vh;*/
        max-height: 100%;
        padding-bottom: 40vh;
        /*padding-bottom: 80px; !* Prostor iznad dugmadi *!*/
        /*padding-top: 20px; !* Pomeranje mape ka sredini *!*/
        box-sizing: content-box; /* Uključivanje padding-a u dimenzije */
    }


    body.light #vehicle-list,
    body.dark #vehicle-list {
        max-height: calc(55vh); /* Maksimalna visina liste da se ne preklapa sa dugmadi */
        margin-bottom: 10px;
    }
}

/* MOBILNI (do 800 px) --- OBE TEME -------------------------------------------
 * Dodato 2026-11-15. Sadržaj ide jedan ispod drugog, tekst je čitljiv bez
 * zumiranja, mapa je manja i na kraju (podaci su važniji). Polja imaju 16 px,
 * inače iPhone sam zumira stranicu pri unosu. */
@media (max-width: 800px) {
    body.light, body.dark {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        justify-content: flex-start;
    }

    /* prijava i dashboard */
    body.light .container, body.dark .container {
        width: auto;
        max-width: none;
        margin: 24px 16px;
        padding: 18px;
        box-sizing: border-box;
    }
    body.light .button-container, body.dark .button-container {
        flex-direction: column;
        gap: 10px;
    }
    body.light .button, body.dark .button {
        display: block;
        box-sizing: border-box;
        text-align: center;
        padding: 14px;
        font-size: 16px;
        margin-bottom: 10px;
    }
    input, select, button { font-size: 16px; }

    /* mapa svih vozila: lista gore, mapa dole */
    body.light #sidebar, body.dark #sidebar {
        width: 100%;
        border-right: none;
        max-height: none;
        padding: 12px 14px;
    }
    body.light .vehicle-item, body.dark .vehicle-item {
        padding: 14px;
        font-size: 16px;
    }
    body.light #button-container, body.dark #button-container {
        position: static;
        flex-wrap: wrap;
        margin-top: 10px;
    }
    body.light #button-container button, body.dark #button-container button {
        flex: 1;
        padding: 12px 8px;
        font-size: 15px;
    }
    #map-container, body.light #map-container, body.dark #map-container {
        width: 100%;
        height: 50vh;
    }
}