/* Shared layout corrections loaded after all page styles. */

/* Header logo: circular placeholder when no logo is configured.
   When a logo exists, the image completely replaces the placeholder text. */
.brand-mark,
.top-brand .brand-mark {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.14) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  flex: 0 0 44px !important;
}

.brand-mark.logo-mark,
.top-brand .brand-mark.logo-mark {
  background: transparent !important;
  border-color: rgba(255,255,255,.22) !important;
}

.brand-mark.logo-mark img,
.top-brand .brand-mark.logo-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* Footer stays fixed and stable, matching the fixed header. */
.app-main {
  padding-bottom: 64px !important;
}

.site-footer {
  position: fixed !important;
  left: var(--sidebar-width) !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 36 !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 10px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: #ffffff !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 -4px 14px rgba(23,32,51,.06) !important;
  transform: none !important;
}

html[data-theme="dark"] .site-footer {
  background: #111827 !important;
}

@media (max-width: 1060px) {
  .site-footer {
    left: 0 !important;
  }
}

@media (max-width: 600px) {
  .brand-mark,
  .top-brand .brand-mark {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  .app-main {
    padding-bottom: 52px !important;
  }

  .site-footer {
    min-height: 44px !important;
    padding: 7px 10px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 11px !important;
  }

  .site-footer span + span {
    display: none !important;
  }
}


/* Universal mobile navigation interaction layer. */
.topbar {
  z-index: 10020 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

.topbar-left,
.top-actions,
.top-brand,
.menu-btn,
.top-icon-btn {
  pointer-events: auto !important;
}

.menu-btn {
  position: relative !important;
  z-index: 10025 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.menu-btn span {
  pointer-events: none !important;
}

.mobile-backdrop {
  z-index: 10000 !important;
}

.app-sidebar {
  z-index: 10010 !important;
  pointer-events: auto !important;
}

@media (max-width: 1380px) {
  .menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
  }

  .app-sidebar {
    transform: translateX(-108%) !important;
    transition: transform 210ms ease !important;
    visibility: hidden !important;
  }

  body.menu-open .app-sidebar {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  .mobile-backdrop {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.menu-open .mobile-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}