/* ---------- Topbar (shared across all pages — see public/js/topbar.js) ---------- */
.topbar{
  background:linear-gradient(135deg,#0F172A,#182338 60%,#0F172A);
  color:#fff; padding:12px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  position:sticky; top:0; z-index:60; box-shadow:0 2px 14px rgba(0,0,0,.18);
}
.brand-side{display:flex; align-items:center; gap:14px;}
.logo-badge{background:#fff; border-radius:10px; padding:6px 12px; display:flex; align-items:center; box-shadow:0 2px 8px rgba(0,0,0,.25);}
.logo-badge img{display:block; height:32px; width:auto;}
.brand-title h1{font-size:20px; margin:0; letter-spacing:.05em;}

.topnav{display:flex; gap:6px; flex-wrap:wrap; min-width:0;}
.topnav a{
  color:#94A3B8; text-decoration:none; font-size:13px; font-weight:600; padding:8px 14px;
  border-radius:8px; transition:.15s; white-space:nowrap;
}
.topnav a:hover{color:#fff; background:rgba(255,255,255,.08);}
.topnav a.active{color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); box-shadow:0 3px 10px rgba(245,165,36,.35);}

/* Trailing links that no longer fit on one line collapse into this dropdown
   instead of wrapping the whole bar onto a second line — see Topbar.fitNav. */
.topnav-more{position:relative; display:none; align-items:center; flex-shrink:0;}
.topnav-more-btn{
  display:flex; align-items:center; gap:5px; color:#94A3B8; background:none; border:none; cursor:pointer;
  font-size:13px; font-weight:600; padding:8px 14px; border-radius:8px; transition:.15s; font-family:inherit; white-space:nowrap;
}
.topnav-more-btn:hover{color:#fff; background:rgba(255,255,255,.08);}
.topnav-more.open .topnav-more-btn{color:#fff; background:rgba(255,255,255,.08);}
.topnav-more-panel{
  display:none; flex-direction:column; gap:2px; position:absolute; top:calc(100% + 8px); right:0;
  background:#151F32; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:6px; min-width:190px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:70;
}
.topnav-more.open .topnav-more-panel{display:flex;}
.topnav-more-panel a{
  color:#94A3B8; text-decoration:none; font-size:13px; font-weight:600; padding:9px 12px; border-radius:7px;
  transition:.15s; white-space:nowrap;
}
.topnav-more-panel a:hover{color:#fff; background:rgba(255,255,255,.08);}
.topnav-more-panel a.active{color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-dark));}

.top-right{display:flex; align-items:center; gap:10px; font-size:13px;}
.top-right .who{color:#CBD5E1; font-size:12.5px;}
.top-right .who b{color:#fff; font-weight:600;}
.change-pw-link{
  color:#94a3b8; text-decoration:none; font-size:12.5px; font-weight:600;
  border:1px solid #334155; padding:7px 13px; border-radius:8px; transition:.15s; white-space:nowrap;
}
.change-pw-link:hover{color:#fff; border-color:#64748B; background:#1E293B;}
button.logout{
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.14);
  padding:7px 15px; border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:600; transition:.15s;
}
button.logout:hover{background:rgba(255,255,255,.16);}

@media (max-width:720px){
  .topbar{padding:10px 14px;}
  .topnav{order:3; width:100%; overflow-x:auto; flex-wrap:nowrap;}
}