/* =========================================================
   Refined Theme Add-on
   - weiße Navbar mit klarer Absetzung
   - Navigation clean statt buttonartig
   - keine rosa Akzente, keine umrandeten Menübuttons
   ========================================================= */

:root{
  --refined-surface: #ffffff;
  --refined-surface-soft: #f8fafc;
  --refined-border: rgba(17,24,39,.08);
  --refined-border-strong: rgba(17,24,39,.12);
  --refined-shadow: 0 10px 28px rgba(17,24,39,.06), 0 1px 4px rgba(17,24,39,.04);
  --refined-text: #1f2937;
  --refined-text-strong: #111827;
  --refined-text-soft: #6b7280;
  --refined-hover: rgba(17,24,39,.045);
  --refined-accent: #e60005;
}

html,
body{
  background: #f3f4f6 !important;
}

.topbar{
  background: var(--refined-surface) !important;
  border-bottom: 1px solid var(--refined-border-strong) !important;
  box-shadow: var(--refined-shadow) !important;
}

.topbar::after{
  display: none !important;
}

.topbar-inner{
  gap: 18px !important;
}

.topbrand{
  padding: 8px 6px 8px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.topbrand:hover{
  background: transparent !important;
}

.topbrand-title,
.topbar-pagetitle{
  color: var(--refined-text-strong) !important;
}

.topbrand-sub{
  color: var(--refined-text-soft) !important;
}

.topnav{
  gap: 2px !important;
  padding: 0 !important;
}

.topnav-item,
.topbar .mod-menu > li,
.top-actions .mod-menu > li{
  position: relative;
}

.topnav-link,
.topnav-link:visited,
.topbar .mod-menu > li > a,
.top-actions .mod-menu > li > a{
  min-height: 44px;
  padding: 10px 10px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--refined-text) !important;
  -webkit-text-fill-color: var(--refined-text) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  transition: color .16s ease, background-color .16s ease;
  position: relative;
}

.topnav-link::after,
.topbar .mod-menu > li > a::after,
.top-actions .mod-menu > li > a::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  background: rgba(17,24,39,.14);
  transform: scaleX(.45);
  transform-origin: center;
  opacity: 0;
  transition: transform .16s ease, opacity .16s ease, background-color .16s ease;
}

.topnav-link:hover,
.topnav-link:focus-visible,
.topbar .mod-menu > li > a:hover,
.topbar .mod-menu > li > a:focus-visible,
.top-actions .mod-menu > li > a:hover,
.top-actions .mod-menu > li > a:focus-visible{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--refined-text-strong) !important;
  -webkit-text-fill-color: var(--refined-text-strong) !important;
  outline: none !important;
}

.topnav-link:hover::after,
.topnav-link:focus-visible::after,
.topbar .mod-menu > li > a:hover::after,
.topbar .mod-menu > li > a:focus-visible::after,
.top-actions .mod-menu > li > a:hover::after,
.top-actions .mod-menu > li > a:focus-visible::after{
  opacity: .65;
  transform: scaleX(1);
}

.topnav-item.is-active .topnav-link,
.topnav-link.active,
.topnav-item.is-active .topnav-link:visited,
.topnav-link.active:visited,
.topbar .mod-menu > li.active > a,
.topbar .mod-menu > li.current > a,
.topbar .mod-menu > li > a[aria-current="page"],
.top-actions .mod-menu > li.active > a,
.top-actions .mod-menu > li.current > a,
.top-actions .mod-menu > li > a[aria-current="page"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--refined-text-strong) !important;
  -webkit-text-fill-color: var(--refined-text-strong) !important;
}

.topnav-item.is-active .topnav-link::after,
.topnav-link.active::after,
.topbar .mod-menu > li.active > a::after,
.topbar .mod-menu > li.current > a::after,
.topbar .mod-menu > li > a[aria-current="page"]::after,
.top-actions .mod-menu > li.active > a::after,
.top-actions .mod-menu > li.current > a::after,
.top-actions .mod-menu > li > a[aria-current="page"]::after{
  opacity: 1;
  transform: scaleX(1);
  background: var(--refined-accent);
}

.topnav-caret{
  opacity: .4 !important;
}

.topnav-dropdown{
  top: calc(100% + 10px) !important;
  border: 1px solid var(--refined-border) !important;
  border-radius: 14px !important;
  background: var(--refined-surface) !important;
  box-shadow: 0 18px 44px rgba(17,24,39,.12) !important;
  padding: 8px !important;
}

.topnav-sub,
.topnav-parent,
.topnav-sub:visited,
.topnav-parent:visited{
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--refined-text) !important;
  -webkit-text-fill-color: var(--refined-text) !important;
}

.topnav-sub:hover,
.topnav-parent:hover,
.topnav-sub:focus-visible,
.topnav-parent:focus-visible{
  background: var(--refined-hover) !important;
  border: 0 !important;
  outline: none !important;
}

.topnav-sub.active,
.topnav-parent.active{
  background: rgba(230,0,5,.05) !important;
  border: 0 !important;
  box-shadow: inset 2px 0 0 var(--refined-accent) !important;
}

.icon-btn,
.profile-trigger,
.chip{
  border-radius: 10px !important;
  border: 1px solid var(--refined-border) !important;
  background: var(--refined-surface) !important;
  box-shadow: none !important;
}

.icon-btn:hover,
.profile-trigger:hover{
  background: var(--refined-surface-soft) !important;
  border-color: var(--refined-border-strong) !important;
  box-shadow: none !important;
}

.profile-trigger:focus,
.profile-menu[open] .profile-trigger{
  border-color: var(--refined-border-strong) !important;
  box-shadow: 0 0 0 3px rgba(17,24,39,.06) !important;
}

@media (max-width: 980px){
  .topnav-link,
  .topnav-link:visited,
  .topbar .mod-menu > li > a,
  .top-actions .mod-menu > li > a{
    padding: 10px 8px 12px !important;
  }

  .topnav-link::after,
  .topbar .mod-menu > li > a::after,
  .top-actions .mod-menu > li > a::after{
    left: 8px;
    right: 8px;
  }
}