/* Shared navigation and workspace chrome. */
:root { --app-topbar-height: 64px; }
html:has(#systemView:not(.hidden)) { scrollbar-gutter: auto; }
body.sidebar-drawer-open { overflow: hidden; }

#systemView .main-content,
body.sidebar-collapsed #systemView .main-content {
  width: 100%; min-width: 0; margin-left: 0;
}

#systemView .topbar {
  position: relative; z-index: 1100;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--app-topbar-height); min-height: var(--app-topbar-height);
  padding: 0 20px; gap: 16px;
  border-bottom: 1px solid #e9e9ed; background: #fff;
}
#systemView .topbar-left { flex: 1; min-width: 0; gap: 12px; align-items: center; }
#systemView .topbar-title { min-width: 0; }
#pageTitle {
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 16px; line-height: 1.5; font-weight: 700; color: #262a32;
}
#systemView .topbar-actions { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; }
#systemView .topbar-frame-actions { align-items: center; }

#systemView .shell-icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px;
  padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: #59616e; cursor: pointer;
}
#systemView svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
#systemView .shell-icon-button:hover,
#systemView .profile-toggle:hover { background: #f3f4f6; color: #20242b; }
#systemView button:focus-visible { outline: 2px solid #d84720; outline-offset: 2px; }

#sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 1200;
  width: min(304px, calc(100vw - 48px)); height: 100vh; height: 100dvh;
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 0; box-shadow: 12px 0 40px #17203220;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .22s ease, visibility .22s;
}
#sidebar.open { transform: translateX(0); visibility: visible; transition: transform .22s ease, visibility 0s; }
#sidebar .sidebar-header {
  position: sticky; top: 0; z-index: 2;
  min-height: var(--app-topbar-height); padding: 10px 12px; gap: 10px;
  background: #fff; color: #262a32; border-bottom: 1px solid #ededf0;
}
#sidebar .sidebar-logo {
  display: grid; flex: 0 0 36px; width: 36px; height: 36px;
  border: 0; border-radius: 10px; background: #df4229; color: #fff;
  font-size: 16px; letter-spacing: -.5px;
}
#sidebar .sidebar-brand { flex: 1; min-width: 0; }
#sidebar .sidebar-brand h1 { font-size: 13px; line-height: 1.5; white-space: nowrap; }
#sidebar .sidebar-brand p { font-size: 10px; color: #858b95; line-height: 1.5; }
#sidebar .sidebar-close-button { margin: 0 0 0 auto; }
#sidebar .sidebar-user { margin: 12px; padding: 12px; border: 1px solid #eceef1; background: #f8f9fb; border-radius: 12px; }
#sidebar .menu-list { padding: 0 12px 28px; }
#sidebar .menu-dropdown:not(.open) > .menu-dropdown-menu { display: none; }
#sidebar .menu-dropdown.open > .menu-dropdown-menu { max-height: none !important; overflow: visible; }
#sidebar .dynamic-menu-group-children { position: static; width: 100%; }
#sidebar .dynamic-menu-group.open > .dynamic-menu-combo-header .dynamic-menu-group-arrow { transform: rotate(180deg); }
#sidebarBackdrop {
  position: fixed; inset: 0; z-index: 1190;
  width: 100%; height: 100%; padding: 0; border: 0;
  background: #18233466; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility .22s;
}
body.sidebar-drawer-open #sidebarBackdrop { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .22s ease, visibility 0s; }

#systemView .profile-control { position: relative; }
#systemView .profile-toggle {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  height: 44px; padding: 4px; border: 0; border-radius: 24px;
  background: transparent; color: #68717f;
}
#systemView .profile-toggle > svg { width: 16px; height: 16px; }
#systemView .profile-avatar {
  display: grid; place-items: center; overflow: hidden; flex: 0 0 34px;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff0e9; color: #ad3d25; font-size: 12px; font-weight: 700;
  box-shadow: inset 0 0 0 1px #f5d4c6;
}
#systemView .profile-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
#profileMenu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(320px, calc(100vw - 24px)); padding: 8px 14px 14px;
  border: 1px solid #e7e9ed; border-radius: 16px;
  background: #fff; box-shadow: 0 16px 48px #202d4826;
}
#profileMenu .profile-menu-heading { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: #737b87; }
#profileMenu .profile-identity { display: flex; align-items: center; gap: 12px; padding: 8px 0 18px; }
#profileMenu .profile-avatar { width: 44px; height: 44px; flex-basis: 44px; font-size: 15px; }
#profileMenu .profile-details { display: grid; min-width: 0; gap: 3px; }
#profileMenu .profile-details strong { font-size: 14px; font-weight: 700; color: #242933; overflow-wrap: anywhere; }
#profileMenu .profile-details span { display: block; max-width: none; font-size: 12px; color: #737b87; overflow-wrap: anywhere; white-space: normal; }
#profileMenu #logoutButton {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px;
  border: 0; background: #fff1ee; color: #bf382c; font-size: 13px; font-weight: 600;
}
#profileMenu #logoutButton:hover { background: #ffe4dc; }
#profileBackdrop { position: fixed; inset: 0; z-index: 1090; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; }

/* Full-height embedded pages, with all actions in the shared header. */
body:has(#dynamicWebPage:not(.hidden), #recruitPlanPage:not(.hidden), #applicantsPage:not(.hidden), #workflowSheetPage:not(.hidden)) #topbarFrameActions { display: flex !important; }
body:has(#dynamicWebPage:not(.hidden), #recruitPlanPage:not(.hidden), #applicantsPage:not(.hidden), #workflowSheetPage:not(.hidden)) #pageContent { padding: 0; }
#dynamicWebPage .dynamic-web-toolbar,
#manualPage > .page-heading,
:is(#recruitPlanPage, #applicantsPage, #workflowSheetPage) > :is(.page-heading, .sheet-page-toolbar, .sheet-bottom-spacer) { display: none !important; }
:is(#dynamicWebPage, #recruitPlanPage, #applicantsPage, #workflowSheetPage) {
  height: calc(100vh - var(--app-topbar-height));
  height: calc(100dvh - var(--app-topbar-height)); min-height: 0;
}
#dynamicWebFrameHost,
:is(#recruitPlanPage, #applicantsPage, #workflowSheetPage) > .embedded-sheet-container {
  width: 100%; height: 100%; min-height: 0; margin: 0;
  border: 0; border-radius: 0; box-shadow: none;
}
#dynamicWebFrameHost .dynamic-web-cache-frame { height: 100%; min-height: 0; border-radius: 0; }

@media (max-width: 900px) {
  :root { --app-topbar-height: 56px; }
  #systemView .topbar { padding: 0 10px; gap: 8px; }
  #systemView .topbar-left { gap: 6px; }
  #systemView .topbar-actions { gap: 4px; }
  #pageTitle { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #sidebar, #sidebar.open, #sidebarBackdrop { transition: none; }
}