/* Shared navigation palette, applied on every workspace page.
   The :is() branch retains enough specificity to replace the earlier
   data-center-only sidebar treatment without touching page content. */
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) {
  --sidebar-blue-bg: #f0f5fe;
  --sidebar-blue-selected: #dae6fd;
  --sidebar-blue-hover: #e5edfc;
  --sidebar-blue-text: #25354e;
  --sidebar-blue-muted: #71809a;
  --sidebar-blue-accent: #0b5fcb;
}

#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-sidebar {
  color: var(--sidebar-blue-text);
  background: var(--sidebar-blue-bg);
  border-right: 1px solid #dbe5f4;
  box-shadow: inset -1px 0 rgba(48, 78, 127, .03);
  scrollbar-color: #b7c9e4 transparent;
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-brand {
  border-bottom-color: #dce5f2;
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-brand strong,
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-role-card strong {
  color: #1d2b42;
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-brand small,
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-role-card small,
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav > small {
  color: var(--sidebar-blue-muted);
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-role-card {
  color: var(--sidebar-blue-text);
  background: rgba(255, 255, 255, .72);
  border-color: #e1e9f6;
  box-shadow: 0 3px 12px rgba(31, 72, 139, .035);
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav button,
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav-group summary,
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-logout {
  color: var(--sidebar-blue-text);
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav button:hover,
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav-group summary:hover,
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-logout:hover {
  color: var(--sidebar-blue-accent);
  background: var(--sidebar-blue-hover);
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav button.active,
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav button.active:hover {
  color: var(--sidebar-blue-accent);
  background: var(--sidebar-blue-selected);
  box-shadow: none;
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav button.active span,
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav button.active b {
  color: var(--sidebar-blue-accent);
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav-group:has(button.active) summary {
  color: var(--sidebar-blue-text);
  background: transparent;
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav-group:has(button.active) summary:hover {
  color: var(--sidebar-blue-accent);
  background: var(--sidebar-blue-hover);
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav-submenu button span::before {
  background: #9cabc2;
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav-submenu button.active span::before {
  background: var(--sidebar-blue-accent);
  box-shadow: 0 0 0 3px rgba(11, 95, 203, .12);
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav-bottom {
  border-top-color: #dce5f2;
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-logout {
  border-color: #d1dded;
}
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav button:focus-visible,
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav-group summary:focus-visible,
#workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-logout:focus-visible {
  outline: 2px solid var(--sidebar-blue-accent);
  outline-offset: 2px;
}

@media (prefers-contrast: more) {
  #workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-sidebar { border-right-color: #5274a4; }
  #workspaceShell:is(#workspaceShell, :has(#employeeDataCenterPanel:not([hidden]))) .unified-nav button.active { border: 1px solid var(--sidebar-blue-accent); }
}

.workspace-icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#workspaceShell .unified-nav-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#workspaceShell .unified-nav-submenu button { grid-template-columns: 18px minmax(0, 1fr) auto; padding-left: 10px; }
#workspaceShell .unified-nav-submenu .unified-nav-icon { width: 15px; height: 15px; }
#workspaceShell .unified-nav button:active, #workspaceShell .unified-nav-group summary:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { #workspaceShell .unified-nav button:active, #workspaceShell .unified-nav-group summary:active { transform: none; } }

/* One workspace language across employee and admin pages. */
:root {
  --bg: #f3f6fb;
  --surface-soft: #f7f9fd;
  --line: #dfe7f2;
  --text: #17283f;
  --muted: #66768d;
  --primary: #0b68d6;
  --primary-soft: #eaf3ff;
  --shadow: 0 10px 26px rgba(24, 52, 92, .055);
}
#workspaceShell .topbar,
#workspaceShell .admin-topbar {
  border-bottom-color: var(--line);
}
#workspaceShell .topbar h1,
#workspaceShell .admin-topbar h1 {
  color: #132742;
  letter-spacing: -.025em;
}
#workspaceShell .eyebrow { color: #3976d6; }
#workspaceShell .unified-nav > small { text-transform: none; letter-spacing: .07em; }
#workspaceShell .unified-nav button,
#workspaceShell .unified-nav-group summary { transition: background-color 140ms ease, color 140ms ease, transform 140ms cubic-bezier(.23,1,.32,1); }
#workspaceShell .unified-nav button.active,
#workspaceShell .unified-nav-submenu button.active { font-weight: 700; }
#workspaceShell .unified-sidebar .unified-nav-icon { stroke-width: 1.8; }
#workspaceShell .unified-workspace-content :is(button, select, input, textarea):focus-visible {
  outline: 2px solid #0b68d6;
  outline-offset: 2px;
}
#workspaceShell .unified-workspace-content button:not(:disabled):active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) {
  #workspaceShell .unified-nav button,
  #workspaceShell .unified-nav-group summary { transition: none; }
  #workspaceShell .unified-workspace-content button:not(:disabled):active { transform: none; }
}

@media (max-width: 900px) {
  #workspaceShell .unified-sidebar {
    position: relative;
    inset: auto;
    width: 100%;
    max-height: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    overflow: visible;
    padding: 11px 15px;
    border-right: 0;
    border-bottom: 1px solid #dbe5f4;
  }
  #workspaceShell .unified-brand { padding: 0; border: 0; }
  #workspaceShell .unified-role-card { margin: 0 0 0 auto; padding: 5px 9px; }
  #workspaceShell .unified-nav { width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0; overflow: visible; }
  #workspaceShell .unified-nav > small { display: none; }
  #workspaceShell .unified-nav button { display: inline-flex; flex: 0 0 auto; width: auto; height: 38px; padding: 0 10px; }
  #workspaceShell .unified-nav-group { position: relative; flex: 0 0 auto; }
  #workspaceShell .unified-nav-group summary { height: 38px; display: flex; gap: 8px; padding: 0 10px; }
  #workspaceShell .unified-nav-submenu { position: absolute; z-index: 22; top: 100%; left: 0; min-width: 170px; display: grid; padding: 7px; border: 1px solid #dce6f3; border-radius: 10px; background: #fff; box-shadow: 0 14px 30px rgba(23, 55, 105, .14); }
  #workspaceShell .unified-nav-submenu button { width: 100%; justify-content: flex-start; }
  #workspaceShell .unified-nav-bottom { width: auto; margin: 0; padding: 0; border: 0; }
  #workspaceShell .unified-logout { width: auto; margin: 0 0 0 auto; padding: 0 10px; white-space: nowrap; }
  #workspaceShell .unified-workspace-content { width: 100%; margin-left: 0; }
  #workspaceShell .main,
  #workspaceShell .admin-main { min-width: 0; padding-left: 16px; padding-right: 16px; }
  #workspaceShell .topbar,
  #workspaceShell .admin-topbar { min-height: 76px; height: auto; }
}
@media (max-width: 620px) {
  #workspaceShell .unified-sidebar { gap: 7px; }
  #workspaceShell .unified-brand .brand-mark { width: 30px; height: 30px; }
  #workspaceShell .unified-brand small,
  #workspaceShell .unified-role-card small { display: none; }
  #workspaceShell .unified-nav button b,
  #workspaceShell .unified-nav-group summary b { white-space: nowrap; }
  #workspaceShell .main,
  #workspaceShell .admin-main { padding-left: 10px; padding-right: 10px; }
  #workspaceShell .topbar,
  #workspaceShell .admin-topbar { gap: 10px; padding: 10px 0; }
}

.login-button:hover,
.sso-login-button:hover { background: #075bbd; }
@media (max-width: 900px) {
  .login-screen { grid-template-columns: minmax(0, 1fr); }
  .login-visual { min-height: 240px; padding: 100px 28px 25px; }
  .login-copy h2 { margin: 14px 0 8px; font-size: clamp(31px, 7vw, 48px); }
  .login-copy > p { margin-bottom: 0; }
  .login-visual .feature-row,
  .login-art { display: none; }
  .login-form-wrap { padding: 36px 20px 54px; }
  .login-brand { left: 28px; top: 22px; }
}