/* 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;
  }
}

/* Stage 5: compact grouped Cloud Based navigation. */
.side-nav-group{margin:2px 0 4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.035)}
.side-nav-group.is-active{background:rgba(255,255,255,.07)}
.side-nav-group-title{display:flex;align-items:center;gap:10px;min-height:36px;padding:7px 9px;color:rgba(255,255,255,.82);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.side-nav-group-title .side-icon{width:19px;height:19px;display:grid;place-items:center}
.side-nav-group-title .side-icon svg{width:18px;height:18px}
.side-link.side-sub-link{min-height:34px;margin:1px 0 1px 30px;padding:7px 10px 7px 13px;border-left:2px solid rgba(255,255,255,.13);border-radius:0 9px 9px 0;font-size:13px}
.side-link.side-sub-link.active{border-left-color:#5eead4}
@media(max-width:760px){.side-nav-group-title{min-height:38px}.side-link.side-sub-link{min-height:38px;margin-left:26px}}

/* Stage 5.1 compact nested sidebar */
.side-nav-tree{margin:2px 0;border-radius:11px;overflow:hidden}
.side-nav-tree.is-active{background:rgba(255,255,255,.045)}
.side-nav-tree-toggle{width:100%;min-height:40px;display:flex;align-items:center;gap:10px;padding:8px 11px;border:0;border-radius:10px;background:transparent;color:rgba(255,255,255,.88);font:inherit;font-size:13px;font-weight:800;text-align:left;cursor:pointer;transition:background .18s ease,color .18s ease}
.side-nav-tree-toggle:hover,.side-nav-tree.is-open>.side-nav-tree-toggle{background:rgba(255,255,255,.09);color:#fff}
.side-nav-tree-toggle>.side-icon{width:20px;height:20px;display:grid;place-items:center;flex:0 0 20px}
.side-nav-tree-toggle>.side-icon svg{width:18px;height:18px}
.side-nav-tree-toggle>span:nth-last-child(2){min-width:0;flex:1}
.side-nav-chevron{width:8px;height:8px;flex:0 0 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease;margin-right:3px;opacity:.75}
.side-nav-tree.is-open>.side-nav-tree-toggle>.side-nav-chevron{transform:rotate(225deg);margin-top:5px}
.side-nav-tree-panel{display:none;padding:2px 4px 5px}
.side-nav-tree.is-open>.side-nav-tree-panel{display:block}
.side-link.side-tree-link{min-height:34px;margin:1px 0 1px 30px;padding:7px 10px 7px 12px;border-left:2px solid rgba(255,255,255,.13);border-radius:0 9px 9px 0;font-size:12.5px}
.side-link.side-tree-link.active{border-left-color:#5eead4;background:rgba(94,234,212,.12)}
.side-nav-tree-nested{margin-left:25px;border-radius:9px}
.side-nav-tree-nested>.side-nav-tree-toggle{min-height:34px;padding:6px 9px;font-size:12.5px;font-weight:800}
.side-nav-tree-nested>.side-nav-tree-panel{padding-left:0}
.side-nav-tree-category{margin-left:18px}
.side-nav-tree-category>.side-nav-tree-toggle{min-height:32px;font-size:12px;color:rgba(255,255,255,.76)}
.side-link.side-tree-leaf{margin-left:16px;font-size:12px;min-height:31px;padding-top:6px;padding-bottom:6px}
.side-nav-tree .side-nav-tree .side-nav-chevron{width:7px;height:7px;flex-basis:7px;border-width:1.5px}
@media(max-width:760px){
  .side-nav-tree-toggle{min-height:42px;font-size:13.5px}
  .side-nav-tree-nested>.side-nav-tree-toggle{min-height:39px}
  .side-nav-tree-category>.side-nav-tree-toggle{min-height:37px}
  .side-link.side-tree-link{min-height:39px;font-size:13px}
  .side-link.side-tree-leaf{min-height:37px}
}