/*-----------------------------
   VARIJABLE TEMA
------------------------------*/
:root {
    --theme-color: #116f3c;        /* osnovna boja pozadine i dugmadi */
    --theme-color-dark: #003c09;   /* tamnija boja za hover dugmadi */
    --theme-color-text: #ffffff;   /* boja teksta dugmadi */
    --theme-color-overlay: rgba(0, 0, 0, 0.1);
}

/*-----------------------------
   BODY
------------------------------*/
body {
    background-color: var(--theme-color);
    transition: background-color 0.3s;
}

/*-----------------------------
   GLOBALNA DUGMAD
------------------------------*/
button,
input[type="submit"] {
    background-color: var(--theme-color);
    color: var(--theme-color-text);
   
}

button:hover,
input[type="submit"]:hover {
    background-color: var(--theme-color-dark);
}

/*-----------------------------
   SPECIFIČNA DUGMAD
------------------------------*/
.btn-primary {
    background-color: var(--theme-color-dark);
    color: var(--theme-color-text);
}

.btn-primary:hover {
    background-color: var(--theme-color-dark);
}

/* Dugmad unutar nalog-form */
.nalog-form button,
.nalog-form input[type="submit"] {
    background-color: var(--theme-color);
    color: var(--theme-color-text);
}

.nalog-form button:hover,
.nalog-form input[type="submit"]:hover {
    background-color: var(--theme-color-dark);
}

/* Dugmad unutar form-actions */
.form-actions button {
    background-color: var(--theme-color);
    color: var(--theme-color-text);
}

.form-actions button:hover {
    background-color: var(--theme-color-dark);
}


.filter-form-full .form-actions button {
  background-color: var(--theme-color);
    color: var(--theme-color-text);
}

.filter-form-full .form-actions button:hover {
    background-color: var(--theme-color-dark);
}

h3{
color: var(--theme-color-text);    
}

.navbar {

  background-color:var(--theme-color);

}
.navbar .logo a {
  color: var(--theme-color-text);
  
}

.nav li a {
  color:var(--theme-color-text);

}

.nav li a.active,
.dropdown.active > .dropbtn {
  background-color:var(--theme-color-dark);
  color:var(--theme-color-text);
}

.nav li a:hover,
.dropdown:hover > .dropbtn {
 background-color:var(--theme-color-dark);
  color:var(--theme-color-text);
}

.dropdown:hover .dropbtn i {

  color: var(--theme-color);
}

.dropdown-menu {

  background:var(--theme-color);

}

.dropdown-menu li a {
  color:var(--theme-color-text);

}
.dropdown-menu li a:hover {
  background-color: var(--theme-color-dark);

}

.menu-toggle .bar {

  background-color: var(--theme-color-text);
  
}
.game{
    
    color:var(--theme-color-dark);
   
}
.btn-primaryPS {
  
    background: var(--theme-color);
    
}
.btn-primaryPS:hover {
    background:var(--theme-color-dark);
   
} 
.modal-contentPS{
    color:var(--theme-color-dark);
    
}
footer {
 
    
    color: var(--theme-color-text);
   
}

.liZa {background:var(--theme-color);color:var(--theme-color-text); }
.liZa:hover { background:var(--theme-color-dark); }
.modal-contentZa {color:var(--theme-color-dark);}
.pitanje-block{
color:var(--theme-color-dark);  
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: var(--theme-color-text);
    background-color: var(--theme-color);
   
}
/* Stil za klikabilne stavke u dropdown-u */
.select2-results__option--selectable {
   
    color: var(--theme-color-dark);
}



.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--theme-color-dark);; /* zelena pozadina za istaknutu stavku */
    color: var(--theme-color-text);              /* bela boja teksta */
}
.select2-container--default .select2-results__option--selected {
 color: var(--theme-color-text);
    background-color: var(--theme-color);
}


.info-box {
 background-color: var(--theme-color-overlay);
 color:  var(--theme-color-text);
}

.soft-textarea {  
    border: 2px solid #e6e6e6;  
    background: #fffdf7;
}

.soft-textarea:focus {
    border-color: var(--theme-color-overlay);;  /* Keka-Teka žuta */
   
    background: var(--theme-color-overlay);;
}

.status-legend-btn {
  background-color:var(--theme-color-dark)  ;
  color:var(--theme-color-text);

}
.legend-item {
color:var(--theme-color-dark);
}
.rezultati {
color:var(--theme-color-dark); 
}
.upustvo-kviz {
   
   color:  var(--theme-color-text);
    background-color:var(--theme-color-overlay);  ;
}
.upustvo-kviz h2 {
     color:  var(--theme-color-text);
}
.upustvo-kviz h3 {
   color:  var(--theme-color-text);
}

.upustvo-kviz hr {
    
    border-top: 2px solid var(--theme-color-dark); /* plava linija */
   
}
.uputstvo-broj {
  background:var(--theme-color-dark);
  color:var(--theme-color-text);
 
}
.footer-col ul li a {
   
    color:var(--theme-color-text);
   
}

.footer-col ul li a:hover {
   color: #cccccc;
}
.footer-col a {
   color:var(--theme-color-text);
   
}
.footer-col a:hover {
   color:var(--theme-color-text);
}
.loginText{
 color:var(--theme-color-dark);
}

.more-btn {
   
    background:var(--theme-color-dark);
    color: var(--theme-color-text);;
   
}

.more-btn:hover {
    background:  var(--theme-color);
   
}

.card h3 {
   color:var(--theme-color-dark)  
}

.card h3:hover {
    color:var(--theme-color);
   
}

.modal-content {
   color:var(--theme-color-dark)  
}

.colorBox{
color:var(--theme-color-dark)  
}
.drugari{
  color:var(--theme-color-dark)  ;
}
.puzzle-letter {
 color:var(--theme-color-dark);
    border-bottom: 2px solid var(--theme-color-dark)  ;  /* crta */
   
}
.puzzle-letter-opis {
   color:var(--theme-color-dark);
}
.piece.revealed {
 color:var(--theme-color-dark);
}
#imeMask{
color:var(--theme-color-dark);  
}
#opisMask{
color:var(--theme-color-dark);  
}


 

    #puzzleGame{
    border:3px solid var(--theme-color-dark);
    }

    .piecePuzzleGame{
    border:1px solid var(--theme-color-dark);
    }

    #previewPuzzleGame{   
    border:2px solid var(--theme-color-dark);
    } 

#modal {
 color: var(--theme-color-dark);  
}
#modal.show {
    display: flex;
    opacity: 1;
}
#modalContent {
     color: var(--theme-color-dark); 
}
#closeModal {
    color: var(--theme-color-dark); 
}
table {
  color: var(--theme-color-dark); 
   border: 2px solid var(--theme-color-dark); 
}
table tr {
color: var(--theme-color-dark); 
 border: 1px solid var(--theme-color-dark); 
}

 #letters, #dropzone {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 20px;
        flex-wrap: wrap;
        color: var(--theme-color-dark); 
    }
     

     #message {
        color: var(--theme-color-dark);
         background-color:var(--theme-color-text);
    }

        .slider-value {
   
    color:var(--theme-color-dark);
}

 .containerMA {
   
    color:var(--theme-color-dark);
 }

 .word.selected{
    background:var(--theme-color-dark);
}

 .block{ 
   
    border:2px solid;
    border-color:var(--theme-color-dark);
    background:#fff;
    color:black;
    }

    .block.pool{ 
    background:var(--theme-color-dark);
    color:var(--theme-color-text);
    }
    .block.correct{ 
    background:var(--theme-color);
    color:var(--theme-color-text);
    font-weight:bold;
    }
    .block.selected{ 
    border-color:red;
    }

/* ================================== */
/* RESPONSIVE - mobilni meni */
/* ================================== */
@media screen and (max-width: 768px) {


  .nav {
    
    background-color:var(--theme-color);
   
  }



}