/* === Global Light/Dark varijable i override-i za SB Admin 2 === */
:root {
  --bg: #f8f9fc;
  --text: #1b1e28;
  --muted: #6c757d;
  --card: #ffffff;
  --border: #e3e6f0;
  --input-bg: #ffffff;
  --nav: #ffffff;
  --nav-text: #334155;
}

/* html.dark-mode {
  --bg: #0f1115;
  --text: #e3e6f0;
  --muted: #9aa4b2;
  --card: #161a22;
  --border: #2a3140;
  --input-bg: #0f131a;
  --nav: #0f1115;
  --nav-text: #e3e6f0;
} */

/* Osnovne površine/teksta */
body { background: var(--bg); color: var(--text); }
.text-gray-800, h1.h3, h6 { color: var(--text) !important; }
.small.text-muted, .text-muted { color: var(--muted) !important; }
#content {background: var(--bg);}

/* Kartice, sekcije */
.card { background: var(--card); color: var(--text); border-color: var(--border); }
.card-header, .card-footer { border-color: var(--border); }
.bg-light { background-color: rgba(255,255,255,0.06) !important; }
.card .card-header {background: var(--card);}

/* Modal */
.modal-content { background: var(--card); color: var(--text); }
.modal-header, .modal-footer { border-color: var(--border); }
.close { color: var(--text); opacity: .85; }
.close:hover { opacity: 1; }

/* Forme */
.form-control, .custom-select, .form-control:focus {
  background-color: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}
.form-control::placeholder { color: var(--muted); }

/* Dugmad/bedževi */
.btn-outline-secondary { color: var(--text); border-color: var(--border); }
.btn-outline-secondary:hover { background: rgba(255,255,255,0.08); }
.badge-warning { background-color: #facc15; color: #222; }
.badge-primary { background-color: #3b82f6; }
.badge-success { background-color: #22c55e; }
.border-primary { border-color: #60a5fa !important; }
.border-success { border-color: #34d399 !important; }
.border-left-warning { border-left: .25rem solid #f59e0b !important; }
.border-left-primary  { border-left: .25rem solid #3b82f6 !important; }
.border-left-success  { border-left: .25rem solid #22c55e !important; }

/* Topbar/Nav */
.navbar, .topbar, footer.bg-white { background: var(--nav) !important; color: var(--nav-text) !important; }
.navbar .nav-link, .topbar .nav-link, .navbar-brand { color: var(--nav-text) !important; }

/* Dropdown */
.dropdown-menu { background: var(--card); color: var(--text); border-color: var(--border); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover { background: rgba(255,255,255,0.06); }

/* Sidebar (ako koristiš SB Admin 2 sidebar) */
.sidebar { background-color: #0b0e13 !important; }
.sidebar .nav-item .nav-link, .sidebar .sidebar-brand { color: #cbd5e1 !important; }
.sidebar .nav-item.active .nav-link,
.sidebar .nav-link:hover { color: #fff !important; }

/* Suptilna animacija kartica u kalendaru */
#calendarGrid .card { transition: transform .05s ease, box-shadow .1s ease; }
#calendarGrid .card:hover { transform: translateY(-1px); box-shadow: 0 .25rem .5rem rgba(0,0,0,.25); }

.day-header{
  border-top: 2px solid var(--border);
  padding-top: .75rem;
  margin-top: 1.25rem;
  margin-bottom: .5rem;
  font-weight: 700;
  color: red;
  letter-spacing: .2px;
}

span.time {
  border-bottom: 2px solid red;
}

/* HEADER sa danima (pon → ned) ostaje */
.grid-7{ display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:.5rem; }

.calendar-weekdays .weekday{
  text-align:center; padding:.5rem .25rem; border-radius:.5rem; font-weight:600;
  background: rgba(125,125,125,.08);
  border:1px solid var(--border, #e3e6f0);
  color: var(--text, #1b1e28);
}
.calendar-weekdays .weekday.weekend{
  background: rgba(250, 204, 21, .18); border-color: rgba(250, 204, 21, .35); color:#7c4a00;
}

/* === KLJUČNO: mreža za dane + ćelije === */
#calendarGrid{
  /* skini .row iz HTML-a i drži samo ovaj grid */
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: .5rem;
}

/* Svaka direktna stavka u gridu je prava „ćelija“ – širi se i ne puca */
#calendarGrid > *{
  min-width: 0;         /* ne dozvoli overflow zbog dugih reči */
  width: 100%;          /* zauzmi celu kolonu */
  box-sizing: border-box;
  margin: 0 !important; /* ukloni nasleđene .mb-* iz bootstrap-a ako postoje */
  padding: 0;           /* padding radi .card, ne wrapper */
}

/* Ako direktno ubacuješ .card u #calendarGrid, ovo je dovoljno: */
#calendarGrid > .card{
  width: 100%;
}

/* Ako imaš wrapper + .card unutra, pokrij i taj slučaj: */
#calendarGrid > .calendar-cell .card{
  width: 100%;
  height: 100%;
  display: flex; flex-direction: column;
}

/* Osnovna stilizacija dana da sve ostane „u okviru“ */
#calendarGrid .card{ border:1px solid var(--border, #e3e6f0); background: var(--card, #fff); }
#calendarGrid .card .card-header{
  padding:.5rem .75rem; border-bottom:1px solid var(--border, #e3e6f0);
  background: rgba(125,125,125,.06); font-weight:600;
  display:flex; align-items:center; justify-content:space-between;
}
#calendarGrid .card .card-body{
  padding:.5rem .5rem .25rem; overflow:auto; /* da bedževi/lista ne ispadnu */
}

/* (opciono) označi vikend i u telu kalendara */
#calendarGrid .card.weekend .card-header{
  background: rgba(250,204,21,.15); border-color: rgba(250,204,21,.35);
}

.promeni-mesec .btn-outline-secondary:hover {
  color: #334155;
}

/* Tema za mobilni - override */
@media (max-width: 575.98px) {
  .vertical-clip-3 {
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;

    /* neka element ostane "pun" u grid ćeliji */
    justify-self: stretch;
    width: 100%;

    /* centriraj sadržaj */
    display: flex;
    align-items: center;      /* horizontalno (levo-desno) */
    justify-content: center;  /* opcionalno: i po drugoj osi */
  }

  .calendar-weekdays.grid-7,
  #calendarGrid {
    gap: .1rem;
  }

  #wrapper #content-wrapper .container-fluid #calendarGrid .card .card-body {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .sidebar .nav-item .nav-link {
    padding: .5rem .5rem;
  }

}

/* Tema za mobilni i tablet - override */
@media (max-width: 991.98px) {
  body {
    font-size: 0.75rem;
  }

  #wrapper #content-wrapper .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  #wrapper #content-wrapper .container-fluid .card .card-body {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  #wrapper #content-wrapper .container-fluid .card .card-header {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .w-tablet-100 {
    width: 100% !important;
  }

  .text-tablet-centar {
    text-align: center !important;
  }

  .tip-rada label {
    padding-top: 3px;
  }

  .promeni-mesec {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .dln-kalendar-wrapper h1 {
    font-size: 1.5rem;
  }

  .pretraga-wrapper select,
  .pretraga-wrapper input,
  .pretraga-wrapper button {
    margin-top: 0.5rem;
  }
}