@import url('https://fonts.googleapis.com/css2?family=TASA+Orbiter:wght@400..800&display=swap');
:root{
  --gap: 4px;
  --cell-min-height: 90px;
  --cell-radius: .375rem;

}

body{
  font-family: "TASA Orbiter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.main-c{
  min-height:100vh;
}
.login-c{
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Container kalendara */
.calendar{
  border:1px solid #e9ecef;
  border-radius:.5rem;
  padding:8px;
  background:#fff;
}

/* Jasno i eksplicitno definiramo grid sa 7 kolona */
.calendar .weekdays {
  display: grid !important; /* ako neko nadjačava display, !important privremeno osigurava primjenu */
  grid-template-columns: repeat(7, 1fr) !important; /* 7 kolona, svaka jednako široka */
  gap: var(--gap);
  margin-bottom: 6px;
  width: 100%;
  align-items: center; /* vertikalno centriranje */
  justify-items: center; /* horizontalno centriranje sadržaja ćelija */
}

/* Stil pojedinačnih ćelija headera */
.calendar .weekdays div {
  padding: 6px 6px;
  text-align: center; /* osigurava centriranje teksta */
  font-weight: 600;
  display: block; /* sprječava da neka druga pravila naprave flex ili inline-block probleme */
  width: 100%;
  margin-right: 4px;
}


/* Mreža ćelija: 7 kolona (7 dana) */
.calendar .cells{
  display: grid;
  gap: var(--gap);
}

/* Pojedinačna ćelija */
.calendar .cell{
  min-height: var(--cell-min-height);
  border-radius: var(--cell-radius);
  padding:8px;
  background:#f8f9fa;
  cursor:pointer;
  position:relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border:1px solid lightgrey;
}

/* Stil za dane koji nisu u tekućem mjesecu */
.calendar .cell.other{
  opacity:.45;
}

/* Broj dana (gore desno) */
.calendar .dateNum{
  position:absolute;
  top:6px;
  right:8px;
  font-size:.85rem;
  font-weight:600;
}

/* Badge sa brojem termina */
.calendar .badge-count{
  position:absolute;
  left:6px;
  top:8px;
  font-size:.75rem;
  z-index:2;
}

/* Kratki preview termina unutar ćelije */
.calendar .appointment{
  display:block;
  padding:4px 6px;
  margin-top:20px;
  border-radius:4px;
  font-size:.78rem;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.06);
}

.calendar .cell.selected{
  background-color:  rgba(37, 136, 212, 0.412);
}

/* Hover i fokus */
.calendar .cell:hover{
  transform: translateY(-2px);
  transition: transform .12s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Ako želite vizualno označiti danas (JS može dodati klasu .today) */
.calendar .cell.today{
  box-shadow: inset 0 0 0 3px rgba(212, 37, 61, 0.607);
}
.calendar .cell.today:hover{
  box-shadow: inset 0 0 0 8px rgba(212, 37, 61, 0.607);
  transition: 0.25s ease-in;
}

.cell.weekend {
  background-color: #8f8f8f2f !important; /* svijetlo siva */
  color: #000000; /* crna boja teksta */
}

.calendar .cell.weekend.selected{
  background-color:  rgba(37, 136, 212, 0.412)!important;
}

.weekdays div:nth-child(6),
.weekdays div:nth-child(7) {
  color: #ff0000; /* naslovi Sub i Ned također sivkasti */
}

/* Mobile prilagodbe */
@media (max-width: 768px){
  :root { --cell-min-height: 70px; --gap:4px; }
  .calendar .weekdays div{ font-size:.82rem; padding:6px 2px; }
  .calendar .dateNum{ font-size:.80rem; top:4px; right:6px; }
  .calendar .appointment{ font-size:.72rem; margin-top:18px; padding:3px 5px; }
}
/*-------------------------------Hamburger Side Meni --------------------------------- */
header {
  position: relative;
  display: flex;
  top: 0;
  height: auto;
  justify-content: space-between;
  align-items: center;
  background-color: #222222;
  padding: 10px;
  margin-bottom: 20px;
  color: white;
}

.hamburger {
     /* Omogućava precizno pozicioniranje */
  top: 10px;            /* Udaljenost od vrha */
  left: 20px;           /* Udaljenost od lijeve ivice */
  font-size: 30px;
  cursor: pointer;
  color: rgb(255, 255, 255);
  z-index: 1100;        /* Iznad side-menu */
}

.side-menu {
  position: fixed;
  top: 0;
  right: -100%;
  height: 100vh;
  width: 300px;
  background-color: #222222;
  box-shadow: 2px 0 5px rgba(0,0,0,0.3);
  transition: right 0.4s ease-in-out;
  z-index: 1200;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1900px) {
      .hamburger { display: none; }
      .side-menu{
        right:0%;
        left:0%;
        box-shadow: none;
        align-items: center;
        width: 250px;
      }
      .close-btn{
        display: none;
      }

      .calendar{
        max-width: 1460px;;
      }
    }

.header-profile-left{
width: 50%;
}
.header-profile-right{
  width: 50%;
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
  align-items: center;
}

.side-menu.active {
  right: 0;
}

.hamburger:hover{
    color:slategray;
    transform: translateX(2px);
}


.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

@media (max-width: 576px) {
      .show{
        display: none;
      }
    }

.logo {
  font-size: 30px;
  font-weight: 700;
  color: black;
  text-decoration: none;
}

.close-btn {
  font-size: 50px;
  cursor: pointer;
  color: rgb(255, 255, 255);
}

.close-btn:hover{
    color:slategray;
    transform: translateY(-2px);
}

.navlist {
  display: flex;
  flex-direction: column;
}

.navlist a {
  color: rgb(255, 255, 255);
  margin-bottom: 25px;
  font-size: 18px;
  font-weight: 600;
  transition: color 0.3s ease;
  text-decoration: none;
}

.navlist a:hover {
  color: rgb(169, 169, 169);
  transform: translateY(-1px);

}

/* Kartica */
.card.login-card {
  width: 100%;
  max-width: 420px;               /* desktop širina */
  margin: 0 auto;
  border-radius: 0.5rem;
  padding: 0;
  overflow: hidden;
}

/* Card-body padding i spacing */
.card.login-card .card-body {
  padding: 1.25rem;
}

/* Responsivna slika/logo */
.login-logo {
  max-width: 140px;
  width: 40%;
  height: auto;
  margin: 0 auto 12px;
  display: block;
}

/* Veći inputi i touch-friendly dugme */
.form-control {
  height: 44px;                   /* visina za lakše tipkanje na touch */
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
}

.form-floating .form-control {
  height: auto;                   /* Bootstrap floating input-ima najbolje radi sa auto */
  padding: 1rem 0.75rem 0.25rem 0.75rem;
}

/* override i sigurnosne postavke za suggestions */
#contactSuggestions, #contactSuggestionsFloating {
  display: block;            /* koristimo skriptu da skrivamo/prikažemo, pa force display block nije štetan */
  position: absolute;
  z-index: 3000 !important;  /* iznad bootstrap modala (bootstrap modal z-index ~1055) */
  max-height: 260px;
  overflow-y: auto;
  min-width: 220px;
  box-sizing: border-box;
  border-radius: .375rem;
  background: #fff;
}

/* list-group item stil (osigurati da izgleda kao dropdown) */
#contactSuggestions, #contactSuggestionsFloating {
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 4px 0;
}

/* pojedinačni item */
#contactSuggestions .list-group-item,
#contactSuggestionsFloating .list-group-item {
  cursor: pointer;
  padding: .5rem .75rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  white-space: nowrap;
}

/* hover/active */
#contactSuggestions .list-group-item:hover,
#contactSuggestions .list-group-item.active,
#contactSuggestionsFloating .list-group-item:hover,
#contactSuggestionsFloating .list-group-item.active {
  background-color: #e9f2ff;
}

/* sprečimo da se dropdown "clipa" unutar modala (ako je ipak unutra) */
.modal .list-group { overflow: visible !important; }





/* Error poruka (pristupačnije) */
.alert[role="alert"] {
  margin-top: 0.5rem;
}

/* Fokus stanja za pristupačnost (keyboard) */
.form-control:focus, .btn:focus {
  outline: 3px solid rgba(0,123,255,0.18);
  outline-offset: 2px;
  box-shadow: none;
}

/* Mobile adjustments */
@media (max-width: 576px) {
  .card.login-card {
    max-width: 100%;
    border-radius: 0.375rem;
  }
  .login-logo { max-width: 120px; width: 48%; }
  .form-floating .form-control { padding: 0.9rem 0.6rem 0.25rem 0.6rem; font-size: .98rem; }
  .card.login-card .card-body { padding: 1rem; }
}

.dropdown-center .dropdown-menu {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Ako koristiš tamnu pozadinu - kontrast */
body { background: #f7f9fb; color: #111; }

.footer{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #222222;
  color: white;
  bottom: 0;
}

#noResults { display:none; }
@media (max-width: 576px) {
      .table-responsive { font-size: .95rem; }
    }
.done-row {
      background-color: #f1f1f1;
      opacity: 0.95;
    }
.nowrap {
      white-space: nowrap;
    }