/*
 * BMC V54 — header-only visual refresh
 * Scope: .topbar and its direct header children only.
 * No page, card, hero, footer, content, or feature styles are changed here.
 */

.topbar{
  position:sticky;
  top:0;
  z-index:80;
  padding:6px 0;
  background:linear-gradient(180deg,rgba(4,5,8,.92),rgba(4,5,8,.62));
  border-bottom:0!important;
  box-shadow:none!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.topbar .topbar-inner{
  height:66px!important;
  min-height:66px!important;
  padding:7px 10px 7px 12px;
  gap:12px;
  border:1px solid rgba(240,23,59,.48);
  border-radius:24px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.055),transparent 22%),
    linear-gradient(180deg,rgba(17,19,25,.96),rgba(7,8,12,.96));
  box-shadow:
    0 14px 34px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(112,5,22,.18);
  overflow:visible;
}

.topbar .brand{
  flex:0 1 282px;
  min-width:220px;
  max-width:282px;
  gap:10px;
  padding:2px 5px 2px 2px;
}

.topbar .brand img{
  width:48px;
  height:48px;
  min-width:48px;
  padding:2px;
  border-radius:15px;
  object-fit:cover;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 0 0 2px rgba(240,23,59,.11),0 7px 18px rgba(0,0,0,.28);
}

.topbar .brand span{min-width:0}
.topbar .brand b{
  display:block;
  overflow:hidden;
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1.16;
  letter-spacing:.28px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.topbar .brand small{
  display:block;
  overflow:hidden;
  margin-top:4px;
  color:rgba(255,255,255,.56);
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.topbar .nav{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:5px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.topbar .nav a{
  position:relative;
  display:inline-flex;
  min-height:40px;
  align-items:center;
  justify-content:center;
  padding:0 9px;
  border:1px solid transparent;
  border-radius:13px;
  color:rgba(245,247,251,.77);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.18px;
  line-height:1;
  white-space:nowrap;
  transition:color .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.topbar .nav a::after{display:none!important}
.topbar .nav a:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.topbar .nav a.active{
  color:#fff;
  background:linear-gradient(135deg,#f31c40,#a90b24);
  border-color:rgba(255,84,111,.72);
  box-shadow:0 8px 20px rgba(239,23,55,.26),inset 0 1px 0 rgba(255,255,255,.18);
}

.topbar .header-actions{
  flex:0 0 auto;
  gap:7px;
  margin-left:1px;
}

.topbar .header-login-btn,
.topbar .header-register-btn{
  min-height:40px;
  height:40px;
  padding:0 14px;
  border-radius:14px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.2px;
  white-space:nowrap;
}
.topbar .header-login-btn{
  color:#fff!important;
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.topbar .header-login-btn:hover{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(240,23,59,.4)!important;
}
.topbar .header-register-btn{
  border-color:rgba(255,70,99,.72)!important;
  background:linear-gradient(135deg,#f31c40,#a90b24)!important;
  box-shadow:0 8px 20px rgba(239,23,55,.24),inset 0 1px 0 rgba(255,255,255,.16)!important;
}

.topbar .icon-btn.mobile-menu{
  display:none;
  flex:0 0 42px;
  width:42px;
  height:42px;
  min-width:42px;
  padding:0;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:#f41d41;
  font-size:22px;
  font-weight:500;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.topbar .notification-bell{
  width:40px;
  height:40px;
  min-width:40px;
  border-color:rgba(255,255,255,.13);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.topbar .notification-bell b{border-color:#090a0e}

.topbar .account-chip{
  min-height:40px;
  max-width:176px;
  padding:4px 11px 4px 4px;
  border-color:rgba(255,255,255,.13);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.topbar .account-chip img{
  width:32px;
  height:32px;
  min-width:32px;
  border:1px solid rgba(255,255,255,.16);
}
.topbar .account-chip span{
  overflow:hidden;
  max-width:112px;
  color:#fff;
  font-size:11px;
  font-weight:850;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.topbar a:focus-visible,
.topbar button:focus-visible{
  outline:2px solid rgba(255,81,109,.95);
  outline-offset:2px;
}

/* Compact desktop: preserve every existing item without header overflow. */
@media (max-width:1320px) and (min-width:1101px){
  .topbar .topbar-inner{gap:8px;padding-left:9px;padding-right:9px}
  .topbar .brand{flex-basis:210px;min-width:190px;max-width:210px;gap:8px}
  .topbar .brand img{width:44px;height:44px;min-width:44px;border-radius:13px}
  .topbar .brand small{display:none}
  .topbar .brand b{font-size:11.5px}
  .topbar .nav a{padding:0 6px;font-size:9.5px}
  .topbar .header-login-btn,.topbar .header-register-btn{padding:0 11px;font-size:10px}
}

/* Existing drawer/navigation behavior remains unchanged; only the header presentation changes. */
@media (max-width:1100px){
  .topbar{padding:6px 0}
  .topbar .topbar-inner{
    height:64px!important;
    min-height:64px!important;
    padding:7px 9px;
    gap:9px;
    border-radius:23px;
  }
  .topbar .icon-btn.mobile-menu{display:inline-flex!important}
  .topbar .nav{display:none!important}
  .topbar .brand{
    flex:1 1 auto;
    min-width:0;
    max-width:none;
  }
  .topbar .brand b{font-size:12px}
  .topbar .brand small{font-size:8px}
}

@media (max-width:720px){
  .topbar{
    padding-top:max(5px,env(safe-area-inset-top));
    padding-bottom:5px;
    background:linear-gradient(180deg,rgba(4,5,8,.95),rgba(4,5,8,.72));
  }
  .topbar .topbar-inner{
    width:calc(100% - 16px);
    height:60px!important;
    min-height:60px!important;
    padding:6px 7px;
    gap:7px;
    border-radius:22px;
  }
  .topbar .icon-btn.mobile-menu{
    flex-basis:40px;
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:13px;
    font-size:21px;
  }
  .topbar .brand{
    gap:8px;
    max-width:none!important;
    padding:0;
  }
  .topbar .brand img{
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:13px;
  }
  .topbar .brand b{
    max-width:clamp(78px,27vw,142px);
    font-size:11px!important;
    letter-spacing:.12px;
  }
  .topbar .brand b::after{content:none!important}
  .topbar .brand small{display:none!important}
  .topbar .header-actions{gap:5px}
  .topbar .header-login-btn,
  .topbar .header-register-btn{
    min-height:38px;
    height:38px;
    padding:0 10px;
    border-radius:13px;
    font-size:10.5px;
  }
  .topbar .notification-bell{
    width:38px;
    height:38px;
    min-width:38px;
  }
  .topbar .account-chip{
    width:38px;
    min-width:38px;
    min-height:38px;
    max-width:38px;
    padding:3px;
    justify-content:center;
  }
  .topbar .account-chip img{width:30px;height:30px;min-width:30px}
  .topbar .account-chip span{display:none!important}
}

@media (max-width:460px){
  .topbar .topbar-inner{width:calc(100% - 12px);gap:5px;padding-left:6px;padding-right:6px}
  .topbar .brand{gap:6px}
  .topbar .brand img{width:38px;height:38px;min-width:38px;border-radius:12px}
  .topbar .brand b{max-width:82px;font-size:10px!important}
  .topbar .header-login-btn,.topbar .header-register-btn{padding:0 8px;font-size:9.5px}
}

@media (max-width:380px){
  .topbar .topbar-inner{height:58px!important;min-height:58px!important;border-radius:20px}
  .topbar .icon-btn.mobile-menu{width:38px;height:38px;min-width:38px;flex-basis:38px}
  .topbar .brand img{width:36px;height:36px;min-width:36px}
  .topbar .brand b{max-width:62px;font-size:9px!important}
  .topbar .header-login-btn,.topbar .header-register-btn{height:36px;min-height:36px;padding:0 7px;font-size:9px;border-radius:12px}
  .topbar .notification-bell,.topbar .account-chip{width:36px;height:36px;min-width:36px;max-width:36px;min-height:36px}
  .topbar .account-chip img{width:28px;height:28px;min-width:28px}
}

/* Light theme: same structure, original BMC red accents. */
html[data-theme="light"] .topbar,
body[data-theme="light"] .topbar,
[data-theme="light"] .topbar{
  background:linear-gradient(180deg,rgba(239,242,247,.96),rgba(239,242,247,.72));
}
html[data-theme="light"] .topbar .topbar-inner,
body[data-theme="light"] .topbar .topbar-inner,
[data-theme="light"] .topbar .topbar-inner{
  border-color:rgba(169,11,31,.34);
  background:
    linear-gradient(110deg,rgba(255,255,255,.8),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,247,251,.97));
  box-shadow:0 12px 30px rgba(24,31,43,.13),inset 0 1px 0 #fff,0 0 0 1px rgba(169,11,31,.06);
}
html[data-theme="light"] .topbar .brand b,
body[data-theme="light"] .topbar .brand b,
[data-theme="light"] .topbar .brand b{color:#151b27}
html[data-theme="light"] .topbar .brand small,
body[data-theme="light"] .topbar .brand small,
[data-theme="light"] .topbar .brand small{color:rgba(21,27,39,.58)}
html[data-theme="light"] .topbar .brand img,
body[data-theme="light"] .topbar .brand img,
[data-theme="light"] .topbar .brand img{background:#fff;border-color:rgba(21,27,39,.12);box-shadow:0 0 0 2px rgba(169,11,31,.07),0 6px 16px rgba(21,27,39,.12)}
html[data-theme="light"] .topbar .nav,
body[data-theme="light"] .topbar .nav,
[data-theme="light"] .topbar .nav{background:rgba(25,32,45,.035);border-color:rgba(25,32,45,.08)}
html[data-theme="light"] .topbar .nav a,
body[data-theme="light"] .topbar .nav a,
[data-theme="light"] .topbar .nav a{color:rgba(21,27,39,.75)}
html[data-theme="light"] .topbar .nav a:hover,
body[data-theme="light"] .topbar .nav a:hover,
[data-theme="light"] .topbar .nav a:hover{color:#151b27;background:#fff;border-color:rgba(21,27,39,.09)}
html[data-theme="light"] .topbar .nav a.active,
body[data-theme="light"] .topbar .nav a.active,
[data-theme="light"] .topbar .nav a.active{color:#fff}
html[data-theme="light"] .topbar .icon-btn.mobile-menu,
body[data-theme="light"] .topbar .icon-btn.mobile-menu,
[data-theme="light"] .topbar .icon-btn.mobile-menu,
html[data-theme="light"] .topbar .notification-bell,
body[data-theme="light"] .topbar .notification-bell,
[data-theme="light"] .topbar .notification-bell,
html[data-theme="light"] .topbar .account-chip,
body[data-theme="light"] .topbar .account-chip,
[data-theme="light"] .topbar .account-chip{background:#fff;border-color:rgba(21,27,39,.11);color:#151b27;box-shadow:0 5px 14px rgba(21,27,39,.07)}
html[data-theme="light"] .topbar .account-chip span,
body[data-theme="light"] .topbar .account-chip span,
[data-theme="light"] .topbar .account-chip span{color:#151b27}
html[data-theme="light"] .topbar .header-login-btn,
body[data-theme="light"] .topbar .header-login-btn,
[data-theme="light"] .topbar .header-login-btn{color:#151b27!important;background:#fff!important;border-color:rgba(21,27,39,.11)!important}
html[data-theme="light"] .topbar .notification-bell b,
body[data-theme="light"] .topbar .notification-bell b,
[data-theme="light"] .topbar .notification-bell b{border-color:#f6f8fb}

@media (prefers-reduced-motion:reduce){
  .topbar .nav a,
  .topbar .header-login-btn,
  .topbar .header-register-btn,
  .topbar .icon-btn.mobile-menu{transition:none!important}
}

/* =============================================================
   v55 correction — normal document flow + live theme colors
   This block is intentionally scoped to .topbar only.
   ============================================================= */

/* The header must scroll with the page; it is not sticky or fixed. */
.topbar{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  inset:auto!important;
  z-index:80;
  --bmc-header-primary:var(--bmc-admin-primary,var(--red,#ef1737));
  --bmc-header-accent:var(--bmc-admin-accent,#2d8cff);
  --bmc-header-surface:var(--bmc-admin-surface,#111319);
  background:transparent!important;
}

/* Dark/system-dark header follows Admin > Theme Colors. */
html:not([data-theme="light"]) .topbar .topbar-inner,
html[data-theme="dark"] .topbar .topbar-inner,
body:not([data-theme="light"]) .topbar .topbar-inner{
  border-color:var(--bmc-header-primary)!important;
  border-color:color-mix(in srgb,var(--bmc-header-primary) 48%,transparent)!important;
  background:var(--bmc-header-surface)!important;
  background:
    linear-gradient(110deg,rgba(255,255,255,.055),transparent 22%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--bmc-header-surface) 94%,#fff 6%),
      color-mix(in srgb,var(--bmc-header-surface) 82%,#000 18%))!important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px color-mix(in srgb,var(--bmc-header-primary) 18%,transparent)!important;
}

.topbar .brand img{
  box-shadow:
    0 0 0 2px color-mix(in srgb,var(--bmc-header-primary) 13%,transparent),
    0 7px 18px rgba(0,0,0,.28)!important;
}

.topbar .nav a.active,
.topbar .header-register-btn{
  background:var(--bmc-header-primary)!important;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--bmc-header-primary) 94%,#fff 6%),
    color-mix(in srgb,var(--bmc-header-primary) 68%,#000 32%))!important;
  border-color:var(--bmc-header-primary)!important;
  border-color:color-mix(in srgb,var(--bmc-header-primary) 72%,#fff 28%)!important;
  box-shadow:
    0 8px 20px color-mix(in srgb,var(--bmc-header-primary) 28%,transparent),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.topbar .icon-btn.mobile-menu{
  color:var(--bmc-header-primary)!important;
}

.topbar .header-login-btn:hover{
  border-color:var(--bmc-header-primary)!important;
  border-color:color-mix(in srgb,var(--bmc-header-primary) 42%,transparent)!important;
}

.topbar a:focus-visible,
.topbar button:focus-visible{
  outline-color:var(--bmc-header-primary)!important;
}

/* Support both the site's data-theme switch and legacy light classes. */
html[data-theme="light"] .topbar .topbar-inner,
html.light .topbar .topbar-inner,
body.light .topbar .topbar-inner,
.theme-light .topbar .topbar-inner{
  border-color:var(--bmc-header-primary)!important;
  border-color:color-mix(in srgb,var(--bmc-header-primary) 34%,transparent)!important;
  background:
    linear-gradient(110deg,rgba(255,255,255,.82),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.99),rgba(245,247,251,.97))!important;
  box-shadow:
    0 12px 30px rgba(24,31,43,.13),
    inset 0 1px 0 #fff,
    0 0 0 1px color-mix(in srgb,var(--bmc-header-primary) 7%,transparent)!important;
}

html[data-theme="light"] .topbar .brand b,
html.light .topbar .brand b,
body.light .topbar .brand b,
.theme-light .topbar .brand b{color:#151b27!important}

html[data-theme="light"] .topbar .brand small,
html.light .topbar .brand small,
body.light .topbar .brand small,
.theme-light .topbar .brand small{color:rgba(21,27,39,.58)!important}

html[data-theme="light"] .topbar .nav,
html.light .topbar .nav,
body.light .topbar .nav,
.theme-light .topbar .nav{
  background:rgba(25,32,45,.035)!important;
  border-color:rgba(25,32,45,.08)!important;
}

html[data-theme="light"] .topbar .nav a,
html.light .topbar .nav a,
body.light .topbar .nav a,
.theme-light .topbar .nav a{color:rgba(21,27,39,.75)!important}

html[data-theme="light"] .topbar .nav a:hover,
html.light .topbar .nav a:hover,
body.light .topbar .nav a:hover,
.theme-light .topbar .nav a:hover{
  color:#151b27!important;
  background:#fff!important;
  border-color:rgba(21,27,39,.09)!important;
}

html[data-theme="light"] .topbar .nav a.active,
html.light .topbar .nav a.active,
body.light .topbar .nav a.active,
.theme-light .topbar .nav a.active{color:#fff!important}

html[data-theme="light"] .topbar .icon-btn.mobile-menu,
html[data-theme="light"] .topbar .notification-bell,
html[data-theme="light"] .topbar .account-chip,
html.light .topbar .icon-btn.mobile-menu,
html.light .topbar .notification-bell,
html.light .topbar .account-chip,
body.light .topbar .icon-btn.mobile-menu,
body.light .topbar .notification-bell,
body.light .topbar .account-chip,
.theme-light .topbar .icon-btn.mobile-menu,
.theme-light .topbar .notification-bell,
.theme-light .topbar .account-chip{
  background:#fff!important;
  border-color:rgba(21,27,39,.11)!important;
  color:#151b27!important;
  box-shadow:0 5px 14px rgba(21,27,39,.07)!important;
}

html[data-theme="light"] .topbar .icon-btn.mobile-menu,
html.light .topbar .icon-btn.mobile-menu,
body.light .topbar .icon-btn.mobile-menu,
.theme-light .topbar .icon-btn.mobile-menu{
  color:var(--bmc-header-primary)!important;
}

html[data-theme="light"] .topbar .account-chip span,
html.light .topbar .account-chip span,
body.light .topbar .account-chip span,
.theme-light .topbar .account-chip span{color:#151b27!important}

html[data-theme="light"] .topbar .header-login-btn,
html.light .topbar .header-login-btn,
body.light .topbar .header-login-btn,
.theme-light .topbar .header-login-btn{
  color:#151b27!important;
  background:#fff!important;
  border-color:rgba(21,27,39,.11)!important;
}

/* Prevent an old global sticky rule from being re-applied at mobile sizes. */
@media (max-width:1100px){
  .topbar{position:relative!important;top:auto!important;inset:auto!important}
}