/*
 * recruit-shared-shell.css — RECRUIT_SHARED_UI_APPLE_X_V1 / Batch 1
 * Scope: shared shell only (admin outer white card, topbar parity, menu-button hover/focus).
 * Rules: no display / .hidden / visibility overrides; no business-card styles; loaded last.
 * Tokens: topbar 56px, padding-x 20px, title 16/600 #111111, canvas #F5F5F7,
 *         topbar #FFFFFF, border #E5E5E5, radius 8px, focus ring 2px #111111.
 */

/* 1. Admin outer white card -> flat on the #F5F5F7 canvas (admin-only :has scope, same as styles.css:7154-7176). */
body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-content-area > .workbench-view:not(.hidden),
body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-content-area > .admin-placeholder-view:not(.hidden),
body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-content-area > #recruitmentView:not(.hidden) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Extra outer padding only on the placeholder card; align with non-admin roles (22px 0 8px). */
body.admin-visual:has(#adminApp:not(.hidden) #manageUsersBtn:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-content-area > .admin-placeholder-view:not(.hidden) {
  padding: 22px 0 8px !important;
}

/* 2. Topbar parity: all five roles. Second selector matches the admin-only :has chain (styles.css:25735). */
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar.admin-topbar-slim,
body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar.admin-topbar-slim {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E5E5 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-left,
body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-left {
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-menu-icon,
body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-menu-icon {
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #111111 !important;
  box-shadow: none !important;
}
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-menu-icon svg,
body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-menu-icon svg {
  width: 18px !important;
  height: 18px !important;
}
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-title,
body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-title {
  color: #111111 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  white-space: nowrap !important;
}

/* 2b. Grid shrink: the pre-existing min column widths overflow the 56px bar at 1024 and 390 (left group shifted
 * off its 20px inset, role-dependent). Same column structure as styles.css:25060/25735; only the minimums relax.
 * No column is added/removed, no display change; tools column and account menu keep their content width. */
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar.admin-topbar-slim,
body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar.admin-topbar-slim {
  grid-template-columns: minmax(0, 1fr) minmax(200px, 288px) auto auto !important;
  gap: 14px !important;
}
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim #adminTopbarSearch.admin-topbar-search,
body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim #adminTopbarSearch.admin-topbar-search {
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 288px !important;
  min-width: 0 !important;
  margin-left: 0 !important;
}
@media (max-width: 900px) {
  body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar.admin-topbar-slim,
  body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar.admin-topbar-slim {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }
}
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-left,
body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-left {
  justify-self: start !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* 3. Shared menu buttons: black/white/gray hover + 2px #111111 focus ring. */
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-menu-icon:hover,
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-menu-icon.is-active,
body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-menu-icon:hover,
body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-topbar-menu-icon.is-active {
  background: #F5F5F7 !important;
  color: #111111 !important;
}
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-account-trigger {
  border-radius: 8px !important;
  transition: background-color .15s ease, color .15s ease !important;
}
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim #adminAccountTrigger.admin-account-trigger:hover,
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim #adminAccountTrigger.admin-account-trigger[aria-expanded="true"],
body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim #adminAccountTrigger.admin-account-trigger:hover,
body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim #adminAccountTrigger.admin-account-trigger[aria-expanded="true"] {
  border-color: #E5E5E5 !important;
  background: #F5F5F7 !important;
  color: #111111 !important;
}
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-account-trigger:focus-visible,
body.admin-visual:has(#adminApp:not(.hidden) #employeeManagementNav:not(.hidden)) #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim #adminAccountTrigger.admin-account-trigger:focus-visible,
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-account-dropdown-item:focus-visible,
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-sidebar-nav [role="button"]:focus-visible {
  outline: 2px solid #111111 !important;
  outline-offset: -2px !important;
}
body.admin-visual #adminApp.admin-shell-sidebar:not(.hidden) .admin-topbar-slim .admin-account-trigger:focus:not(:focus-visible) {
  outline: none !important;
}