/* Visibility helpers */
.show-desktop{display:flex}
.show-mobile{display:none}
@media (max-width:860px){
  .show-desktop{display:none!important}
  .show-mobile{display:inline-flex!important}
}

/* Header layout */
.topnav{position:sticky; top:0; z-index:1300; background:#0d47a1; color:#fff}
.nav-grid{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:56px; position:relative}
.nav-left{display:flex; align-items:center; gap:10px}
.nav-center{display:flex; align-items:center; gap:14px; justify-content:center; white-space:nowrap}
.nav-right{display:flex; align-items:center; gap:12px; justify-content:flex-end}

.burger{background:transparent;border:0;color:#fff;font-size:22px}
.brand{display:flex; align-items:center; gap:8px; font-weight:800}
.home-ico{font-size:18px}

.nav-center a{color:#eaf2ff; padding:6px 10px; border-radius:10px}
.nav-center a:hover{background:rgba(255,255,255,.10)}
.btn{cursor:pointer}
.btn-primary{background:#2563eb;color:#fff;border:0;padding:8px 12px;border-radius:10px}
.btn-outline{background:transparent;color:#eaf2ff;border:1px solid rgba(255,255,255,.6);padding:8px 12px;border-radius:10px}
.btn-outline:hover{background:rgba(255,255,255,.1)}
.btn-logout{background:#ef4444;color:#fff;border:0;padding:10px 12px;border-radius:10px}
.btn-logout:hover{filter:brightness(.95)}
.btn-danger{background:#e11d48;color:#fff;border:0;padding:10px 14px;border-radius:10px}

/* Mobile: center brand (burger|brand|bell) */
@media (max-width:860px){
  .nav-grid{grid-template-columns:auto 1fr auto}
  .brand{position:absolute; left:50%; transform:translateX(-50%)}
  .nav-center{display:none}
}

/* Bell badge */
.icon-link{position:relative; align-items:center}
.icon-link .badge{
  position:absolute; top:-7px; right:-10px; background:#ef4444; color:#fff;
  border-radius:10px; padding:0 6px; font-size:12px; line-height:18px;
}

/* Profile dropdown (desktop) */
.profile-dd{position:relative}
.profile-dd > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px}
.profile-dd > summary::-webkit-details-marker{display:none}
.profile-dd .menu{
  position:absolute; right:0; top:calc(100% + 8px);
  background:#fff; color:#0f172a; border:1px solid #e5e7eb; border-radius:12px;
  min-width:240px; padding:10px; box-shadow:0 16px 36px rgba(2,6,23,.16); display:none
}
.profile-dd[open] .menu{display:block}
.menu-item{
  display:block; text-decoration:none; color:#0f172a; font-weight:600;
  background:#f8fafc; border:1px solid #e5e7eb; padding:10px 12px; border-radius:10px; margin:6px 0;
}
.menu-item:hover{background:#eef2f7}

/* ===== Drawer (mobile) ===== */
.nav-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter:saturate(160%) blur(2px);
  z-index:1299; opacity:0; transition:.18s ease; pointer-events:none;
}
.nav-drawer{
  position:fixed; top:56px; left:-340px; bottom:0; width:320px;
  background:linear-gradient(180deg,#0d47a1 0%, #063b93 100%);
  box-shadow:16px 0 40px rgba(2,6,23,.25); z-index:1301;
  transition:right .22s ease;
  display:flex; flex-direction:column;
}
.drawer-inner{height:100%; overflow:auto; padding:16px 14px 24px}
.drawer-links{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
.drawer-links a{color:#eaf2ff; padding:8px 10px; border-radius:10px}
.drawer-links a:hover{background:rgba(255,255,255,.08)}

/* account card inside drawer */
.nav-acc{margin-top:8px; padding:12px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}
.nav-acc .user{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.nav-acc .av{width:36px;height:36px;border-radius:50%;background:#fff;color:#0d47a1;display:grid;place-items:center;font-weight:800}
.nav-acc .name{color:#fff} .nav-acc .muted{color:#cfe3ff}
.nav-quick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chip-btn{display:inline-block;color:#fff;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18)}
.chip-btn:hover{background:rgba(255,255,255,.22)}

/* Drawer open state */
body.nav-open{overflow:hidden}
body.nav-open .nav-drawer{left:0}
body.nav-open .nav-overlay{opacity:1; pointer-events:auto}