/* Postojeći stilovi */
body { background-color: #EEE5BA !important; }
.btn-custom { 
    background-color: #455366; 
    color: #fff; /* bela slova da budu itljivija */
    border: none; 
}
.btn-custom:hover { 
    background-color: #2e3744; /* malo tamnija nijansa na hover */
    color: #fff; 
}
.text-custom { color: #455366 !important; }
.bg-custom { background-color: #455366 !important; }
.btn-header { 
    background-color: #EEE5BA !important; 
    color: #455366 !important; /* tamnosivi tekst da bude itljiv */
    border: none; 
}
.btn-header:hover { 
    background-color: #d6cf9f !important; /* malo tamnija nijansa na hover */
    color: #455366 !important; 
}

.btn-danger-custom {
  background-color: #A41623;
  border-color: #A41623;
  color: #fff;
}

.btn-danger-custom:hover,
.btn-danger-custom:focus {
  background-color: #8f131e; /* malo tamnije za hover */
  border-color: #8f131e;
  color: #fff;
}



/* 🔥 NOVI KALENDAR STILOVI */
.calendar-table {
    font-size: 0.9rem;
}
.calendar-table .time-col { 
    min-width: 80px; 
    width: 80px; 
    background: #f8f9fa !important;
}
.calendar-table th { 
    white-space: nowrap; 
    font-size: 0.85rem; 
    font-weight: 600;
}
.calendar-table td { 
    height: 70px; 
    vertical-align: middle; 
    position: relative;
}
.activity-info { 
    line-height: 1.2; 
    max-height: 70px; 
    overflow: hidden; 
    padding: 2px;
}
.activity-info .fw-bold { 
    font-size: 0.8rem; 
    margin-bottom: 1px;
}
.activity-info div:not(.fw-bold) { 
    font-size: 0.75rem; 
    opacity: 0.9;
}

/* Boje ćelija */
.cell-free { 
    background-color: #d4edda !important; /* zelena */
    color: black !important; 
}
.cell-busy { 
    background-color: #f8d7da !important; /* crvena */
    color: black !important; 
}
.cell-mine { 
    background-color: #ffe5b4 !important; /* narandžasta */
    color: black !important; 
}



/* Responsive */
@media (max-width: 768px) {
    .calendar-table { 
        font-size: 0.75rem; 
    }
    .calendar-table th, 
    .calendar-table td { 
        padding: 0.25rem; 
        min-width: 60px; 
        height: 55px;
    }
    .calendar-table .time-col { 
        min-width: 60px; 
        width: 60px; 
    }
    .activity-info .fw-bold { font-size: 0.75rem; }
    .activity-info div:not(.fw-bold) { font-size: 0.7rem; }
}

@media (max-width: 576px) {
    .calendar-table th, 
    .calendar-table td { 
        min-width: 50px; 
        padding: 0.2rem; 
    }
    .activity-info { font-size: 0.7rem; }
}

/* Dugmad u ćelijama */
.calendar-table .btn-sm {
    font-size: 0.7rem; 
    padding: 0.2rem 0.4rem;
}

/* 🔥 ADMIN DASHBOARD - Proširena kolona Rola */
.role-select,
.table td:nth-child(4),  /* Rola kolona u Korisnici tabeli */
.table th:nth-child(4) {
    min-width: 160px !important;
    max-width: 220px !important;
}

.role-select {
    white-space: normal !important;
    word-wrap: break-word !important;
    height: auto !important;
    font-size: 0.85rem;
}

/* Tooltip za duge role */
.role-select:focus,
.role-select:hover {
    position: relative;
}

.role-select:focus::after,
.role-select:hover::after {
    content: attr(title);
    position: absolute;
    top: -5px;
    left: 100%;
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1000;
    margin-left: 5px;
}

/* Responsive za male ekrane */
@media (max-width: 768px) {
    .role-select,
    .table td:nth-child(4),
    .table th:nth-child(4) {
        min-width: 120px !important;
    }
}

/* 🔥 ADMIN DASHBOARD - SVE KOLONE IDENTIČNE (Rola, Lokacija, Status, itd.) */
.form-update-col,
.role-select,
.table td:has(.form-update-col),
.table th:nth-child(4), /* Rola */
.table th:nth-child(6), /* Nivo */
.table th:nth-child(7), /* Lokacija */
.table th:nth-child(8), /* Dodatne */
.table th:nth-child(9)  /* Status */
{
    min-width: 160px !important;
    max-width: 220px !important;
}

/* FORSIRA punu širinu UNUTAR forme */
.form-update-col * {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Dugmad puna širina + kompaktno */
.form-update-col button.btn,
.form-update-col .btn {
    width: 100% !important;
    font-size: 0.8rem !important;
    padding: 0.2rem 0.4rem !important;
    margin-top: 0.1rem !important;
    white-space: nowrap !important;
}

/* Dropdown/Polja puna širina */
.form-update-col select,
.form-update-col input {
    font-size: 0.85rem !important;
    padding: 0.25rem 0.4rem !important;
    height: auto !important;
}

/* Ukloni d-inline/w-auto preklapanja */
.form-update-col .d-inline,
.form-update-col .w-auto {
    display: block !important;
    width: 100% !important;
}

/* Responsive */
@media (max-width: 768px) {
    .form-update-col,
    .table td:has(.form-update-col) {
        min-width: 130px !important;
    }
}

/* =========================
   STICKY: 2 reda headera + leva kolona
   ========================= */

.calendar-scroll{
  max-height: 70vh;
  overflow: auto;           /* skrol i X i Y */
}

/* bolje ponašanje sticky u tabeli */
.calendar-table{
  border-collapse: separate;
  border-spacing: 0;
}

/* telo tabele neka bude "ispod" sticky elemenata */
.calendar-table tbody td{
  position: relative;
  z-index: 1;
}


/* 1) HEADER RED 1 (dani) - NAJVIŠI sloj */
.calendar-table thead tr:nth-child(1) th{
  position: sticky;
  top: 0;
  background: #f8f9fa !important;
  z-index: 100;
}

/* 2) HEADER RED 2 (sobe) - ispod dana */
.calendar-table thead tr:nth-child(2) th{
  position: sticky;
  top: 70px;                /* posle koriguj */
  background: #f8f9fa !important;
  z-index: 90;
  
  font-size: 1rem !important;      /* probaj 1rem, 1.05rem, 1.1rem */
  font-weight: 700;               /* opcionalno */
}

/* 3) Sticky LEFT: leva kolona u telu (vreme po satima) */
.calendar-table tbody th[scope="row"]{
  position: sticky;
  left: 0;
  background: #f8f9fa !important;
  z-index: 80;
  min-width: 80px;
  width: 80px;
}

/* 4) Sticky TOP+LEFT: gornji levi ćošak (Vreme + prazno ispod) */
.calendar-table thead tr:nth-child(1) th:first-child{
  position: sticky;
  top: 0;
  left: 0;
  background: #f8f9fa !important;
  z-index: 200;
  min-width: 80px;
  width: 80px;
}

.calendar-table thead tr:nth-child(2) th:first-child{
  position: sticky;
  top: 62px;
  left: 0;
  background: #f8f9fa !important;
  z-index: 190;
  min-width: 80px;
  width: 80px;
}


/* 2. red headera = imena soba */
.calendar-table thead tr:nth-child(2) th{
  font-size: 1rem !important;      /* probaj 1rem, 1.05rem, 1.1rem */
  font-weight: 700;               /* opcionalno */
}

.day-sep{
  border-right: 4px solid #455366 !important;
}

/* Vertikalni separator dana - uvek vidljiv */
.day-sep-col{
  position: relative;
}

.day-sep-col::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;          /* debljina linije */
  height: 100%;
  background: #455366; /* boja linije */
  z-index: 5;
  pointer-events: none;
}

/* 🔥 KALENDAR - Kompaktni activity-info */
.activity-info {
  line-height: 1.1 !important;  /* Kompaktno pakovanje redova */
  display: flex;
  flex-direction: column;
}
.activity-info > div {
  margin-bottom: 0.5px !important;  /* Mini razmak */
}