/* SIMHSYCN Phase 1 — Application shell */
body.simh-app .app-shell {
  min-height: 100vh;
  background: transparent;
}

body.simh-app .topbar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 10020 !important;
  height: var(--simh-topbar-height) !important;
  padding: 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  color: #ffffff !important;
  background: rgba(11, 18, 32, .96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .075) !important;
  box-shadow: 0 8px 28px rgba(2, 6, 23, .16) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.simh-app .topbar-left,
body.simh-app .top-actions,
body.simh-app .top-brand {
  display: flex !important;
  align-items: center !important;
}

body.simh-app .topbar-left { min-width: 0; gap: 12px !important; }
body.simh-app .top-actions { gap: 10px !important; }

body.simh-app .top-brand {
  min-width: 0;
  gap: 11px !important;
  color: #ffffff !important;
}

body.simh-app .top-brand strong {
  overflow: hidden;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 780 !important;
  letter-spacing: -.018em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.simh-app .brand-mark,
body.simh-app .top-brand .brand-mark {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, var(--simh-primary), #0b5f69) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body.simh-app .brand-mark.logo-mark img,
body.simh-app .top-brand .brand-mark.logo-mark img {
  width: 100% !important;
  height: 100% !important;
  padding: 5px !important;
  border-radius: 10px !important;
  object-fit: contain !important;
}

body.simh-app .menu-btn,
body.simh-app .top-icon-btn {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 11px !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, .06) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}

body.simh-app .menu-btn:hover,
body.simh-app .top-icon-btn:hover,
body.simh-app .top-icon-btn.is-active {
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .11) !important;
  transform: translateY(-1px);
}

body.simh-app .menu-btn span {
  width: 19px !important;
  height: 2px !important;
  margin: 2.5px 0 !important;
  display: block !important;
  border-radius: 99px !important;
  background: #ffffff !important;
}

body.simh-app .top-status-pill {
  min-height: 38px !important;
  padding: 6px 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: var(--simh-radius-pill) !important;
  background: rgba(255, 255, 255, .055) !important;
}

body.simh-app .top-status-pill strong {
  color: #ffffff !important;
  font-size: 12px !important;
}

body.simh-app .top-status-pill small {
  color: rgba(226, 232, 240, .72) !important;
  font-size: 11px !important;
}

body.simh-app .account-menu {
  width: 232px !important;
  padding: 8px !important;
  border: 1px solid var(--simh-border) !important;
  border-radius: var(--simh-radius-md) !important;
  background: var(--simh-surface) !important;
  box-shadow: var(--simh-shadow-md) !important;
}

body.simh-app .account-menu strong,
body.simh-app .account-menu a {
  min-height: 40px !important;
  padding: 10px 12px !important;
  border-radius: var(--simh-radius-sm) !important;
}

body.simh-app .account-menu strong {
  color: var(--simh-text-strong) !important;
  background: var(--simh-surface-muted) !important;
}

body.simh-app .account-menu a { color: var(--simh-text) !important; }
body.simh-app .account-menu a:hover { background: var(--simh-surface-muted) !important; }
body.simh-app .account-menu .danger-link { color: var(--simh-danger) !important; }

body.simh-app .app-sidebar {
  position: fixed !important;
  top: var(--simh-topbar-height) !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 10010 !important;
  width: var(--simh-sidebar-width) !important;
  padding: 14px 10px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden auto !important;
  color: var(--simh-sidebar-text) !important;
  background: var(--simh-sidebar) !important;
  border-right: 1px solid rgba(255, 255, 255, .06) !important;
  box-shadow: 10px 0 30px rgba(2, 6, 23, .08) !important;
}

body.simh-app .sidebar-hero {
  min-height: 92px !important;
  margin: 0 2px 12px !important;
  padding: 17px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: var(--simh-radius-md) !important;
  color: #ffffff !important;
  background: var(--simh-sidebar-elevated) !important;
  box-shadow: none !important;
}

body.simh-app .sidebar-hero strong {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  letter-spacing: -.018em !important;
}

body.simh-app .sidebar-hero span {
  margin-top: 5px !important;
  color: var(--simh-sidebar-muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

body.simh-app .side-nav {
  padding: 2px 0 16px !important;
  display: grid !important;
  gap: 3px !important;
}

body.simh-app .nav-section-label {
  margin: 16px 12px 6px !important;
  color: #6f829d !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body.simh-app .side-link {
  min-height: 42px !important;
  padding: 5px 10px !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  color: var(--simh-sidebar-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 610 !important;
  letter-spacing: 0 !important;
  transition: background .14s ease, color .14s ease, border-color .14s ease !important;
}

body.simh-app .side-link:hover {
  padding-left: 10px !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, .055) !important;
}

body.simh-app .side-link.active {
  padding-left: 10px !important;
  color: #ffffff !important;
  border-color: rgba(45, 212, 191, .18) !important;
  background: rgba(15, 118, 110, .22) !important;
  box-shadow: inset 3px 0 0 #2dd4bf !important;
}

body.simh-app .side-icon {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: #9fb0c7 !important;
  background: rgba(255, 255, 255, .045) !important;
}

body.simh-app .side-link:hover .side-icon,
body.simh-app .side-link.active .side-icon {
  color: #dffff8 !important;
  background: rgba(45, 212, 191, .10) !important;
}

body.simh-app .side-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
}

body.simh-app .nav-badge {
  min-width: 21px !important;
  height: 21px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--simh-radius-pill) !important;
  color: #ffffff !important;
  background: var(--simh-danger) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

body.simh-app .app-main {
  min-height: 100vh !important;
  margin-left: var(--simh-sidebar-width) !important;
  padding-top: var(--simh-topbar-height) !important;
  padding-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
}

body.simh-app.auth-page .app-main { margin-left: 0 !important; }

body.simh-app .content-area {
  width: 100% !important;
  max-width: var(--simh-content-max) !important;
  min-height: calc(100vh - var(--simh-topbar-height) - 54px) !important;
  margin: 0 auto !important;
  padding: 24px 26px 38px !important;
  flex: 1 0 auto !important;
}

body.simh-app .page-title {
  margin: 0 0 20px !important;
  padding: 0 0 17px !important;
  border-bottom: 1px solid var(--simh-border) !important;
  background: transparent !important;
}

body.simh-app .page-title h1 {
  margin: 0 !important;
  color: var(--simh-text-strong) !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 770 !important;
  letter-spacing: -.035em !important;
}

body.simh-app .page-title p {
  max-width: 760px !important;
  margin: 6px 0 0 !important;
  color: var(--simh-muted) !important;
  font-size: 13px !important;
}

body.simh-app .site-footer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 13px 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  color: var(--simh-muted) !important;
  background: var(--simh-surface) !important;
  border-top: 1px solid var(--simh-border) !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
}

body.simh-app .mobile-backdrop {
  position: fixed !important;
  inset: var(--simh-topbar-height) 0 0 0 !important;
  z-index: 10000 !important;
  display: none;
  background: rgba(2, 6, 23, .52) !important;
  backdrop-filter: blur(2px);
}


/* --------------------------------------------------------------------------
   SIMHSYCN Phase 2 — Global structure refinement
   -------------------------------------------------------------------------- */
body.simh-app .topbar {
  background:
    linear-gradient(112deg, var(--simh-topbar-start) 0%, #16556b 52%, var(--simh-topbar-end) 100%) !important;
  border-bottom-color: rgba(255, 255, 255, .14) !important;
  box-shadow: 0 10px 34px rgba(15, 50, 72, .18) !important;
}

body.simh-app .topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, .82), rgba(125, 211, 252, .82), transparent);
}

body.simh-app .app-sidebar {
  background:
    linear-gradient(180deg, #173f59 0%, var(--simh-sidebar) 50%, #102d43 100%) !important;
  border-right-color: rgba(148, 210, 220, .14) !important;
  box-shadow: 12px 0 34px rgba(23, 50, 77, .10) !important;
}

body.simh-app .sidebar-hero {
  background:
    linear-gradient(145deg, rgba(35, 102, 119, .92), rgba(25, 73, 101, .94)) !important;
  border-color: rgba(167, 243, 235, .14) !important;
}

body.simh-app .side-link.active {
  border-color: rgba(94, 234, 212, .22) !important;
  background: linear-gradient(90deg, rgba(45, 212, 191, .19), rgba(56, 189, 248, .09)) !important;
  box-shadow: inset 3px 0 0 #5eead4 !important;
}

body.simh-app .side-link:hover {
  background: rgba(224, 242, 254, .075) !important;
}

body.simh-app .nav-section-label {
  color: #a9c5d5 !important;
}

body.simh-app .content-area {
  padding: 26px 30px 42px !important;
}

body.simh-app .page-title {
  position: relative !important;
  min-height: 86px !important;
  margin: 0 0 22px !important;
  padding: 18px 24px 18px 27px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(125, 160, 187, .20) !important;
  border-radius: var(--simh-radius-lg) !important;
  background:
    linear-gradient(110deg, rgba(255,255,255,.98), rgba(237,248,250,.94)),
    var(--simh-surface) !important;
  box-shadow: 0 12px 34px rgba(35, 78, 105, .07) !important;
}

body.simh-app .page-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  bottom: 17px;
  width: 4px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, #14b8a6, #38bdf8);
}

body.simh-app .page-title::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: min(28vw, 310px);
  height: 2px;
  background: linear-gradient(90deg, transparent, #14b8a6, #38bdf8);
  opacity: .72;
}

body.simh-app .page-context {
  margin-bottom: 5px !important;
  color: var(--simh-primary) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

body.simh-app .page-title h1 {
  color: var(--simh-heading) !important;
  font-weight: 780 !important;
}

body.simh-app .page-title p {
  color: var(--simh-muted) !important;
}

body.simh-app .site-footer {
  color: #70869a !important;
  background: rgba(255, 255, 255, .88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.simh-app .top-status-pill strong {
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

body.simh-app .top-status-pill small {
  color: rgba(240, 253, 250, .76) !important;
}


/* --------------------------------------------------------------------------
   Phase 2 desktop correction — prevent margin + 100% width overflow
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) {
  body.simh-app:not(.auth-page) .app-main {
    width: calc(100% - var(--simh-sidebar-width)) !important;
    max-width: calc(100% - var(--simh-sidebar-width)) !important;
    margin-left: var(--simh-sidebar-width) !important;
  }

  body.simh-app:not(.auth-page) .content-area {
    width: 100% !important;
    max-width: var(--simh-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 1100px) {
  body.simh-app:not(.auth-page) .app-main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

body.simh-app .update-alert-dot{width:9px!important;height:9px!important;border-radius:50%!important;flex:0 0 9px!important;margin-left:-2px!important;margin-right:-2px!important;background:#3b82f6!important;box-shadow:0 0 0 4px rgba(59,130,246,.14)!important}body.simh-app .update-alert-dot.recommended{background:#f59e0b!important;box-shadow:0 0 0 4px rgba(245,158,11,.16)!important}body.simh-app .update-alert-dot.mandatory{background:#ef4444!important;box-shadow:0 0 0 4px rgba(239,68,68,.18)!important}