/* =========================================================
   Replaced Professional Business Navbar
   Source: professional_business_full_system (2)(1)
   Navigation shell only. No business/page logic changed.
   ========================================================= */
:root{
  --replacement-sidebar-full:274px;
  --replacement-sidebar-mini:72px;
  --replacement-navy-950:#071225;
  --replacement-navy-900:#0a1933;
  --replacement-blue:#2563eb;
}

.app-shell{
  display:block!important;
  min-height:100vh!important;
  grid-template-columns:none!important;
}

.sidebar{
  position:fixed!important;
  inset:0 auto 0 0!important;
  width:var(--replacement-sidebar-full)!important;
  max-width:var(--replacement-sidebar-full)!important;
  padding:18px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:15px!important;
  color:#d6e2f2!important;
  background:
    radial-gradient(circle at 18% 4%,rgba(59,130,246,.18),transparent 24%),
    linear-gradient(180deg,var(--replacement-navy-950) 0%,var(--replacement-navy-900) 50%,#08162b 100%)!important;
  border-right:1px solid rgba(255,255,255,.07)!important;
  box-shadow:18px 0 54px rgba(2,6,23,.12)!important;
  z-index:1040!important;
  overflow:hidden!important;
  transition:width .22s ease,transform .22s ease,padding .22s ease,max-width .22s ease!important;
}

.brand-box{
  min-height:74px!important;
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  padding:10px 11px!important;
  margin:0 0 10px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.045)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 28px rgba(0,0,0,.15)!important;
  flex:0 0 auto!important;
}
.brand-box img{
  width:49px!important;
  height:49px!important;
  border-radius:999px!important;
  object-fit:cover!important;
  border:2px solid rgba(255,255,255,.88)!important;
  box-shadow:0 10px 25px rgba(0,0,0,.26)!important;
  flex:0 0 auto!important;
}
.brand-box h2{
  margin:0!important;
  color:#f8fafc!important;
  font-size:18px!important;
  font-weight:900!important;
  letter-spacing:.025em!important;
}
.brand-box p{
  margin:0!important;
  color:#7dd3fc!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.18em!important;
}

.sidebar-nav{
  display:flex!important;
  flex:1 1 auto!important;
  min-height:0!important;
  flex-direction:column!important;
  gap:4px!important;
  padding:3px 2px 8px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.sidebar-nav a{
  position:relative!important;
  min-height:43px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  padding:10px 12px!important;
  border:1px solid transparent!important;
  border-radius:13px!important;
  color:#aebdd2!important;
  font-size:12.5px!important;
  font-weight:750!important;
  letter-spacing:.005em!important;
  white-space:nowrap!important;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease!important;
}
.sidebar-nav a::before{
  content:"";
  position:absolute;
  left:-2px;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:0 5px 5px 0;
  background:linear-gradient(180deg,#60a5fa,#22d3ee);
  opacity:0;
  transform:scaleY(.35);
  transition:.18s ease;
}
.sidebar-nav a i{
  width:22px!important;
  min-width:22px!important;
  text-align:center!important;
  font-size:16px!important;
  color:#7890ae!important;
  transition:.18s ease!important;
}
.sidebar-nav a:hover{
  color:#f8fafc!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.06)!important;
  transform:translateX(2px)!important;
}
.sidebar-nav a.active{
  color:#fff!important;
  background:linear-gradient(90deg,rgba(37,99,235,.33),rgba(14,165,233,.12))!important;
  border-color:rgba(96,165,250,.21)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 9px 22px rgba(2,6,23,.18)!important;
}
.sidebar-nav a.active::before{opacity:1!important;transform:scaleY(1)!important;}
.sidebar-nav a:hover i,.sidebar-nav a.active i{color:#7dd3fc!important;}

.logout-sidebar{
  min-height:43px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  padding:10px 12px!important;
  border-radius:13px!important;
  color:#fecaca!important;
  background:rgba(239,68,68,.095)!important;
  border:1px solid rgba(248,113,113,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  font-size:12.5px!important;
  font-weight:800!important;
  flex:0 0 auto!important;
}
.logout-sidebar:hover{color:#fff!important;background:rgba(239,68,68,.18)!important;}

.sidebar-toggle-btn{
  width:34px!important;
  height:34px!important;
  min-height:34px!important;
  display:grid!important;
  place-items:center!important;
  margin:0 0 8px auto!important;
  padding:0!important;
  border-radius:12px!important;
  color:#dbeafe!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:none!important;
}
.sidebar-toggle-btn:hover{background:rgba(255,255,255,.13)!important;color:#fff!important;}
.sidebar-restore-btn{
  position:fixed!important;
  left:14px!important;
  top:16px!important;
  width:42px!important;
  height:42px!important;
  border:0!important;
  border-radius:14px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;
  box-shadow:0 13px 30px rgba(37,99,235,.28)!important;
  z-index:1050!important;
  display:none;
  place-items:center;
}

.content-area{
  margin-left:var(--replacement-sidebar-full)!important;
  width:calc(100% - var(--replacement-sidebar-full))!important;
  min-width:0!important;
  min-height:100vh!important;
  background:transparent!important;
  transition:margin-left .22s ease,width .22s ease!important;
}

.app-shell.sidebar-mini .sidebar{
  width:var(--replacement-sidebar-mini)!important;
  max-width:var(--replacement-sidebar-mini)!important;
  padding-left:10px!important;
  padding-right:10px!important;
}
.app-shell.sidebar-mini .content-area{
  margin-left:var(--replacement-sidebar-mini)!important;
  width:calc(100% - var(--replacement-sidebar-mini))!important;
}
.app-shell.sidebar-mini .brand-box{justify-content:center!important;padding:8px!important;}
.app-shell.sidebar-mini .brand-box img{width:40px!important;height:40px!important;}
.app-shell.sidebar-mini .brand-box>div,
.app-shell.sidebar-mini .sidebar-nav span,
.app-shell.sidebar-mini .logout-sidebar{display:none!important;}
.app-shell.sidebar-mini .sidebar-nav a{justify-content:center!important;padding:10px!important;gap:0!important;}
.app-shell.sidebar-mini .sidebar-nav a i{margin:0!important;}

.app-shell.sidebar-hidden .sidebar{
  transform:translateX(-110%)!important;
  width:0!important;
  max-width:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.app-shell.sidebar-hidden .content-area{margin-left:0!important;width:100%!important;}

.topbar{
  width:100%!important;
  min-height:76px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding:13px 30px!important;
  position:sticky!important;
  top:0!important;
  z-index:1030!important;
  color:#0f172a!important;
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(18px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%)!important;
  border-bottom:1px solid rgba(148,163,184,.18)!important;
  box-shadow:0 8px 34px rgba(15,23,42,.05)!important;
}
.topbar h1{margin:0!important;color:#0f172a!important;font-size:19px!important;font-weight:800!important;letter-spacing:-.025em!important;}
.topbar p{margin:2px 0 0!important;color:#64748b!important;opacity:1!important;font-weight:700!important;font-size:11px!important;}
.topbar-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;min-width:0!important;}
.circle-icon,.user-chip{
  min-height:40px!important;
  height:40px!important;
  color:#334155!important;
  background:#fff!important;
  border:1px solid #e2e8f0!important;
  box-shadow:0 7px 20px rgba(15,23,42,.055)!important;
  transition:.18s ease!important;
}
.circle-icon{width:40px!important;border-radius:999px!important;}
.user-chip{display:flex!important;align-items:center!important;gap:8px!important;padding:0 14px!important;border-radius:999px!important;font-size:12px!important;font-weight:800!important;}
.circle-icon:hover,.user-chip:hover{color:#1d4ed8!important;background:#eff6ff!important;border-color:#bfdbfe!important;transform:translateY(-1px)!important;}
.mobile-sidebar-open{color:#1d4ed8!important;background:#eff6ff!important;border-color:#bfdbfe!important;}

.sidebar-mobile-overlay{display:none;}
.mobile-sidebar-open{display:none!important;}

@media(max-width:900px){
  .topbar{padding:12px 20px!important;}
}

@media(max-width:768px){
  .app-shell{display:block!important;}
  .content-area,
  .app-shell.sidebar-mini .content-area,
  .app-shell.sidebar-hidden .content-area{
    margin-left:0!important;
    width:100%!important;
  }
  .sidebar,
  .app-shell.sidebar-mini .sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:246px!important;
    max-width:246px!important;
    padding:16px 14px!important;
    transform:translateX(-110%)!important;
  }
  .app-shell:not(.sidebar-hidden) .sidebar{transform:translateX(0)!important;}
  .app-shell.sidebar-mini .brand-box>div,
  .app-shell.sidebar-mini .sidebar-nav span,
  .app-shell.sidebar-mini .logout-sidebar{display:flex!important;}
  .app-shell.sidebar-mini .brand-box{justify-content:flex-start!important;}
  .app-shell.sidebar-mini .sidebar-nav a{justify-content:flex-start!important;gap:11px!important;}
  .mobile-sidebar-open{display:inline-grid!important;place-items:center!important;}
  .sidebar-drawer-open .sidebar-mobile-overlay{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    background:rgba(15,23,42,.45)!important;
    z-index:1035!important;
  }
  .topbar{min-height:70px!important;padding:11px 14px!important;gap:10px!important;}
  .topbar-actions{gap:7px!important;}
}

@media(max-width:520px){
  .topbar h1{font-size:16px!important;}
  .topbar p{display:none!important;}
  .user-chip span{display:none!important;}
  .user-chip{width:40px!important;padding:0!important;justify-content:center!important;}
}

@media print{
  .sidebar,.topbar,.sidebar-restore-btn,.sidebar-mobile-overlay{display:none!important;}
  .content-area,
  .app-shell.sidebar-mini .content-area,
  .app-shell.sidebar-hidden .content-area{margin-left:0!important;width:100%!important;}
}