/* Admin topbar (uniform across Bootstrap + Tailwind pages) */
html, body { margin: 0; padding: 0;  overflow-x: hidden !important; }

.admin-nav{
  width:100%;
  background: linear-gradient(180deg, #071423 0%, #06101d 55%, #050d18 100%);
  color:#fff;
}

.admin-nav-inner{
  max-width: 1400px;
  margin: 0 auto;
  height: 64px;
  padding: 0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.admin-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 220px;
}

.admin-logo img{
  height: 30px;
  width:auto;
  display:block;
}

.admin-badge{
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}

.admin-menu{
  display:flex;
  align-items:center;
  gap: 10px;
}
.admin-menu-desktop{ overflow-x: visible; }
.admin-nav-item{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration:none !important;
  color: rgba(255,255,255,0.90) !important;
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  white-space: nowrap;
}

.admin-nav-item:hover{ background: rgba(255,255,255,0.06); color:#fff !important; }
.admin-nav-item.is-active{ background: rgba(255,255,255,0.10); color:#fff !important; }

.admin-nav-item.admin-logout{
  background: rgba(245,158,11,0.12);
  color: #fbbf24 !important;
}
.admin-nav-item.admin-logout:hover{
  background: rgba(245,158,11,0.20);
  color: #ffd27a !important;
}

.admin-nav-ico{ font-size: 18px; line-height: 1; }

/* Dropdowns via <details> (no JS, no Bootstrap dependency) */
.admin-dd{ position:relative; }
.admin-dd > summary{
  list-style:none;
  cursor:pointer;
}
.admin-dd > summary::-webkit-details-marker{ display:none; }

.admin-dd-toggle{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration:none !important;
  color: rgba(255,255,255,0.90) !important;
  background: transparent;
  border: 0 !important;
  box-shadow:none !important;
  outline:none !important;
  white-space: nowrap;
}
.admin-dd-toggle:hover{ background: rgba(255,255,255,0.06); color:#fff !important; }
.admin-dd-toggle.is-active{ background: rgba(255,255,255,0.10); color:#fff !important; }

.admin-dd-menu{
  display:none;
  position:absolute;
  right:0;
  top: 110%;
  min-width: 260px;
  background:#071423;
  border:1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  z-index: 3000;
}

.admin-dd[open] .admin-dd-menu{ display:block; }

.admin-dd-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  color: rgba(255,255,255,0.90) !important;
  text-decoration:none !important;
}

.admin-dd-item:hover{ background: rgba(255,255,255,0.06); color:#fff !important; }
.admin-dd-item.is-active{ background: rgba(255,255,255,0.10); color:#fff !important; }

.admin-sep{
  height:1px;
  background: rgba(255,255,255,0.10);
  margin: 6px 4px;
}

/* Mobile panel */
.admin-mobile{ display:none; }
.admin-mobile > summary{
  list-style:none;
  cursor:pointer;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color:#fff;
}
.admin-mobile > summary::-webkit-details-marker{ display:none; }
.admin-mobile-panel{
  position:absolute;
  right:14px;
  top: 64px;
  width: 320px;
  max-width: calc(100vw - 28px);
  background:#071423;
  border:1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  z-index: 3500;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.admin-mobile-panel .admin-nav-item,
.admin-mobile-panel .admin-dd-toggle{
  width:100%;
  justify-content:flex-start;
}
.admin-mobile-panel .admin-dd{ width:100%; }
.admin-mobile-panel .admin-dd > summary{ width:100%; }
.admin-mobile-panel .admin-dd-toggle{ justify-content:space-between; }
.admin-mobile-panel .admin-nav-item.admin-logout{ margin-top: 2px; }
.admin-mobile-panel .admin-dd-menu{
  position:static;
  display:block;
  border:0;
  box-shadow:none;
  padding: 0 0 6px 0;
  margin-left: 8px;
  background: transparent;
}

/*
  Breakpoint:
  - 992px je preširoko za moderne tablete i pravi "čudno" ponašanje (hamburger na tabletu).
  - Spuštamo prag tako da tableti (npr. Tab S9 Ultra) dobiju desktop meni kad ima mesta.
*/
}

/* --- Tablet/portrait safety: force hamburger up to 1280px --- */
@media (max-width: 1280px){
.admin-menu-desktop{ overflow-x: visible; }
  .admin-mobile{ display:block !important; position:relative; }
}

/* Tablet landscape / medium desktop: keep desktop menu compact and scrollable (no wrap) */
@media (min-width: 1281px) and (max-width: 1535px){
.admin-menu-desktop{ overflow-x: visible; }
  .admin-menu-desktop a,
  .admin-menu-desktop button{
    padding: 6px 10px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
}


/* =========================
   Responsive (3-mode)
   - Desktop (>=1280px): full menu
   - Tablet + Mobile (<1280px): hamburger (prevents cut/left-right scroll)
   ========================= */
@media (max-width: 1279px){
  .admin-menu-desktop{ display:none !important; }
  .admin-mobile{ display:block !important; position:relative; }
}
@media (min-width: 1280px){
  .admin-menu-desktop{ display:flex !important; }
  .admin-mobile{ display:none !important; }
}


/* HARD FIX: desktop top meni ne sme da ostavlja više otvorenih podmenija. */
@media (min-width: 1280px){
  .admin-menu-desktop details.admin-dd[open]:not(:hover):not(:focus-within) > .admin-dd-menu{
    display:none !important;
  }
  .admin-menu-desktop details.admin-dd[open]:hover > .admin-dd-menu,
  .admin-menu-desktop details.admin-dd[open]:focus-within > .admin-dd-menu{
    display:block !important;
  }
}