/* Hub modern theme: colour-forward shared UI layer */

:root {
  --hub-bg: #eef4f7;
  --hub-surface: #ffffff;
  --hub-surface-muted: #f7fafb;
  --hub-ink: #142531;
  --hub-heading: #102f3d;
  --hub-muted: #61727d;
  --hub-line: #dbe6ea;
  --hub-line-strong: #bfd2d8;
  --hub-accent: #0b9ca8;
  --hub-accent-dark: #07616b;
  --hub-accent-soft: #dcf6f6;
  --hub-blue: #3d72e8;
  --hub-blue-soft: #e9efff;
  --hub-coral: #ef7564;
  --hub-coral-soft: #fff0ed;
  --hub-yellow: #f5c83d;
  --hub-yellow-soft: #fff8dc;
  --hub-success: #13896f;
  --hub-success-soft: #e3f7ef;
  --hub-danger: #bd4d59;
  --hub-danger-soft: #fff0f1;
  --hub-shadow-sm: 0 2px 5px rgba(16, 45, 61, .05), 0 12px 26px rgba(16, 45, 61, .045);
  --hub-shadow-md: 0 5px 10px rgba(16, 45, 61, .07), 0 22px 40px rgba(16, 45, 61, .08);
}

html { background: var(--hub-bg); }

body {
  background: radial-gradient(circle at 84% 1%, rgba(61, 114, 232, .095), transparent 24rem), radial-gradient(circle at 18% 100%, rgba(245, 200, 61, .12), transparent 26rem), var(--hub-bg) !important;
  color: var(--hub-ink) !important;
  font-family: "Aptos", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--hub-heading) !important; font-weight: 700 !important; letter-spacing: -.03em !important; }
p, .muted, .subbrand, .field-hint, .help-text, .form-hint { color: var(--hub-muted) !important; }
::selection { background: rgba(11, 156, 168, .22) !important; color: var(--hub-heading) !important; }

/* Authenticated frame */

.app-frame { grid-template-columns: 258px minmax(0, 1fr) !important; min-height: 100vh; background: transparent; }

.sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  gap: 14px !important;
  padding: 24px 16px 18px !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 0% 0%, rgba(80, 222, 207, .18), transparent 19rem), linear-gradient(180deg, #123e4b 0%, #0d2b3b 55%, #102534 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 10px 0 30px rgba(10, 41, 53, .12) !important;
  backdrop-filter: none !important;
}

.logo-lockup { justify-content: center !important; min-height: 58px !important; padding: 0 10px 20px !important; border-bottom: 1px solid rgba(255, 255, 255, .16) !important; }
.logo-lockup .company-logo { width: auto !important; max-width: 170px !important; max-height: 78px !important; }
.sidebar-nav-stack { gap: 12px !important; padding-right: 0 !important; }
.side-nav { gap: 4px !important; }

.nav-item,
.sidebar .side-nav .nav-item,
.sidebar .signout {
  position: relative !important;
  min-height: 42px !important;
  padding: 10px 11px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: rgba(239, 249, 250, .75) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  transition: color .16s ease, background .16s ease, transform .16s ease !important;
}

.nav-item::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 4px; background: transparent; }
.nav-item:hover, .nav-item.active, .sidebar .signout:hover, .sidebar .signout.active { transform: translateX(2px) !important; border: 0 !important; background: linear-gradient(90deg, rgba(75, 220, 205, .28), rgba(61, 114, 232, .18)) !important; color: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 8px 18px rgba(4, 26, 37, .15) !important; }
.nav-item.active::before { background: #68e0d0 !important; }

.nav-icon, .sidebar .side-nav .nav-icon, .sidebar .signout .nav-icon { position: relative !important; width: 21px !important; height: 21px !important; border-radius: 7px !important; background: rgba(255, 255, 255, .1) !important; color: rgba(224, 251, 248, .78) !important; font-size: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; }
.nav-icon::before, .nav-icon::after { content: ""; position: absolute; box-sizing: border-box; }
.nav-icon::before { left: 5px; top: 5px; width: 11px; height: 11px; border: 1.4px solid currentColor; border-radius: 3px; }
.nav-icon::after { left: 8px; top: 8px; width: 5px; height: 1.5px; background: currentColor; box-shadow: 0 3px 0 currentColor; border-radius: 2px; }
.nav-item[data-nav-slug="home"] .nav-icon::before { left: 5px; top: 8px; width: 11px; height: 8px; border-radius: 2px; }
.nav-item[data-nav-slug="home"] .nav-icon::after { left: 6px; top: 4px; width: 8px; height: 8px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; background: transparent; box-shadow: none; transform: rotate(45deg); border-radius: 2px 0 0 0; }
.nav-item[data-nav-slug="profile"] .nav-icon::before { left: 7px; top: 4px; width: 7px; height: 7px; border-radius: 50%; }
.nav-item[data-nav-slug="profile"] .nav-icon::after { left: 5px; top: 12px; width: 11px; height: 5px; border: 1.4px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; box-shadow: none; }
.nav-item[data-nav-slug="tools"] .nav-icon::before { left: 4px; top: 8px; width: 13px; height: 6px; border: 1.4px solid currentColor; border-radius: 4px; transform: rotate(-38deg); }
.nav-item[data-nav-slug="tools"] .nav-icon::after { left: 10px; top: 3px; width: 3px; height: 14px; background: currentColor; border-radius: 2px; box-shadow: none; transform: rotate(42deg); }
.nav-item[data-nav-slug="news"] .nav-icon::before { left: 4px; top: 4px; width: 13px; height: 13px; border: 1.4px solid currentColor; border-radius: 2px; }
.nav-item[data-nav-slug="news"] .nav-icon::after { left: 7px; top: 8px; width: 7px; height: 1.5px; background: currentColor; box-shadow: 0 3px 0 currentColor; }
.nav-item[data-nav-slug="learning"] .nav-icon::before { left: 4px; top: 7px; width: 13px; height: 8px; border: 1.4px solid currentColor; border-radius: 2px; transform: skewY(-18deg); }
.nav-item[data-nav-slug="learning"] .nav-icon::after { left: 10px; top: 4px; width: 1.5px; height: 12px; background: currentColor; box-shadow: none; }
.nav-item[data-nav-slug="manager-dashboard"] .nav-icon::before, .nav-item[data-nav-slug="hr-dashboard"] .nav-icon::before, .nav-item[data-nav-slug="payroll-dashboard"] .nav-icon::before, .nav-item[data-nav-slug="admin-centre"] .nav-icon::before { left: 4px; top: 4px; width: 5px; height: 5px; border: 1.4px solid currentColor; border-radius: 2px; box-shadow: 7px 0 0 -1px rgba(224, 251, 248, .78), 0 7px 0 -1px rgba(224, 251, 248, .78), 7px 7px 0 -1px rgba(224, 251, 248, .78); }
.nav-item[data-nav-slug="manager-dashboard"] .nav-icon::after, .nav-item[data-nav-slug="hr-dashboard"] .nav-icon::after, .nav-item[data-nav-slug="payroll-dashboard"] .nav-icon::after, .nav-item[data-nav-slug="admin-centre"] .nav-icon::after { display: none; }
.nav-item[data-nav-slug="signout"] .nav-icon::before { left: 5px; top: 5px; width: 10px; height: 11px; border: 1.4px solid currentColor; border-right: 0; border-radius: 3px 0 0 3px; }
.nav-item[data-nav-slug="signout"] .nav-icon::after { left: 9px; top: 9px; width: 7px; height: 1.5px; background: currentColor; box-shadow: 3px -3px 0 -0.1px currentColor, 3px 3px 0 -0.1px currentColor; transform: none; }
.nav-item:hover .nav-icon, .nav-item.active .nav-icon, .sidebar .signout:hover .nav-icon { background: rgba(104, 224, 208, .28) !important; color: #ffffff !important; }
.nav-item:hover .nav-icon::before, .nav-item.active .nav-icon::before, .sidebar .signout:hover .nav-icon::before { border-color: #ffffff !important; }

.side-nav-secondary { margin-top: auto !important; padding-top: 16px !important; border-top: 1px solid rgba(255, 255, 255, .14) !important; }
.sidebar-user { gap: 10px !important; margin-top: 14px !important; padding: 11px 10px !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 11px !important; background: rgba(255, 255, 255, .08) !important; box-shadow: none !important; }
.sidebar-user-avatar { width: 37px !important; height: 37px !important; border-radius: 10px !important; background: linear-gradient(135deg, #75e5d3, #3d72e8) !important; color: #0d2b3b !important; font-size: 13px !important; font-weight: 800 !important; }
.sidebar-user-copy strong { color: #ffffff !important; font-size: 13px !important; }
.sidebar-user-copy small { color: rgba(239, 249, 250, .68) !important; font-size: 11px !important; }
.signout { margin-top: -4px !important; }

/* Content chrome */

.portal-main { min-width: 0; background: transparent; }
.content-topbar { position: sticky !important; top: 0 !important; z-index: 8 !important; min-height: 84px; padding: 22px 40px 16px !important; background: linear-gradient(90deg, rgba(235, 248, 249, .95), rgba(255, 250, 234, .9)) !important; border-bottom: 1px solid rgba(219, 230, 234, .9) !important; backdrop-filter: blur(14px) !important; }
.content-topbar h1 { margin: 0 !important; color: var(--hub-heading) !important; font-size: clamp(23px, 2vw, 30px) !important; font-weight: 760 !important; letter-spacing: -.045em !important; }
.shell { max-width: 1380px !important; padding: 24px 40px 48px !important; }
.eyebrow { color: var(--hub-accent-dark) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .09em !important; text-transform: uppercase !important; }

/* Surfaces */

.card, .portal-panel, .profile-panel, .content-manager-card, .content-manager-list, .content-manager-create { position: relative !important; overflow: hidden !important; background: linear-gradient(145deg, #ffffff 0%, #fbfdff 100%) !important; border: 1px solid var(--hub-line) !important; border-radius: 14px !important; box-shadow: var(--hub-shadow-sm) !important; }
.card::before, .portal-panel::before, .profile-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--hub-accent), #68e0d0 48%, var(--hub-yellow)) !important; }
.card, .portal-panel, .profile-panel { padding: 22px !important; transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease !important; }
.card:hover, .portal-panel:hover, .profile-panel:hover { transform: translateY(-2px) !important; border-color: #b9d2d8 !important; box-shadow: var(--hub-shadow-md) !important; }
.card h1, .card h2, .card h3, .portal-panel h2, .profile-panel h2 { color: var(--hub-heading) !important; font-weight: 700 !important; }
.grid { gap: 16px !important; }
.stat { color: var(--hub-heading) !important; font-size: 34px !important; font-weight: 760 !important; letter-spacing: -.05em; }

/* Controls */

label { color: #344e5a !important; font-size: 12px !important; font-weight: 750 !important; letter-spacing: .01em; }
input, textarea, select { border: 1px solid var(--hub-line-strong) !important; border-radius: 9px !important; background: #ffffff !important; color: var(--hub-ink) !important; box-shadow: none !important; }
input:focus, textarea:focus, select:focus { border-color: var(--hub-accent) !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(11, 156, 168, .14) !important; }
button, .primary, .btn, .dashboard-action, .hrp-tab { border-radius: 9px !important; box-shadow: none !important; font-weight: 700 !important; transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important; }
button, .primary { background: linear-gradient(135deg, #123e4b, #0d2b3b) !important; }
button:hover, .primary:hover, .btn:hover, .dashboard-action:hover, .hrp-tab:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 17px rgba(16, 45, 61, .14) !important; }
.primary.red, button.primary.red { background: linear-gradient(135deg, #0b9ca8, #07616b) !important; box-shadow: 0 8px 16px rgba(11, 156, 168, .2) !important; }
.primary.red:hover, button.primary.red:hover { background: linear-gradient(135deg, #0eafba, #08717c) !important; }
.btn { border: 1px solid var(--hub-line-strong) !important; background: #ffffff !important; color: var(--hub-heading) !important; padding: 9px 13px !important; }
.btn:hover { border-color: #8bced1 !important; background: var(--hub-accent-soft) !important; color: var(--hub-accent-dark) !important; }
.btn.danger { border-color: #efbdb7 !important; background: var(--hub-coral-soft) !important; color: #b34d43 !important; }
.actions { gap: 9px !important; margin-top: 16px !important; }

.notice { border-radius: 10px !important; border: 1px solid var(--hub-line) !important; background: #ffffff !important; color: var(--hub-ink) !important; box-shadow: none !important; }
.notice.success { border-color: #b5e2d0 !important; background: var(--hub-success-soft) !important; color: #126b59 !important; }
.notice.info { border-color: #a9dfe2 !important; background: var(--hub-accent-soft) !important; color: var(--hub-accent-dark) !important; }
.notice.error, .notice.danger { border-color: #efc0c4 !important; background: var(--hub-danger-soft) !important; color: var(--hub-danger) !important; }
.badge { border-radius: 999px !important; padding: 4px 9px !important; background: #edf2f4 !important; color: #53646d !important; font-size: 11px !important; font-weight: 800 !important; }
.badge.red { background: var(--hub-coral-soft) !important; color: #b34d43 !important; }
.badge.green { background: var(--hub-success-soft) !important; color: #126b59 !important; }
.badge.dark { background: var(--hub-blue-soft) !important; color: #365ab1 !important; }

/* Tables and dense management screens */

.table { border: 1px solid var(--hub-line) !important; border-radius: 11px !important; background: #ffffff !important; box-shadow: none !important; }
.table th, .table td { border-color: var(--hub-line) !important; }
.table th { background: linear-gradient(90deg, #eef8f8, #f5f7ff) !important; color: #536a74 !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase; }
.table tr:hover td { background: #fbfeff !important; }
summary { color: var(--hub-heading) !important; }

/* Standalone landing surface */

body.landing-page { display: grid !important; place-items: center !important; min-height: 100vh !important; padding: 32px 18px !important; }
body.landing-page > main { width: min(760px, 100%) !important; display: grid !important; justify-items: center !important; gap: 18px !important; padding: 34px 30px !important; text-align: center !important; border: 1px solid var(--hub-line) !important; border-radius: 16px !important; background: linear-gradient(145deg, #ffffff, #fbfdff) !important; box-shadow: var(--hub-shadow-md) !important; }
body.landing-page .logo { width: min(420px, 82vw) !important; max-height: 210px !important; height: auto !important; object-fit: contain !important; filter: none !important; }
body.landing-page .status { border: 1px solid #a9dfe2 !important; border-radius: 999px !important; background: var(--hub-accent-soft) !important; color: var(--hub-accent-dark) !important; }
body.landing-page .status::before { background: #c8102e !important; box-shadow: 18px 0 0 #ffd100, 36px 0 0 #2c8ca8 !important; }
body.landing-page h1 { color: var(--hub-heading) !important; font-size: clamp(34px, 5vw, 56px) !important; font-weight: 760 !important; }
body.landing-page a { color: var(--hub-accent-dark) !important; }

/* Login */

body.login-page { background: radial-gradient(circle at 14% 10%, rgba(104, 224, 208, .18), transparent 23rem), radial-gradient(circle at 92% 90%, rgba(61, 114, 232, .12), transparent 25rem), var(--hub-bg) !important; }
.identity-login-page { padding: 42px 18px !important; }
.identity-login-shell { width: min(960px, 100%) !important; gap: 24px !important; }
.identity-brand { gap: 10px !important; }
.identity-brand img { width: 148px !important; }
.identity-brand h1 { color: var(--hub-heading) !important; font-size: clamp(29px, 4vw, 40px) !important; font-weight: 760 !important; }
.identity-card { border: 1px solid var(--hub-line) !important; border-radius: 14px !important; background: linear-gradient(145deg, #ffffff, #fbfdff) !important; box-shadow: var(--hub-shadow-sm) !important; padding: 26px !important; }
.identity-card h2 { color: var(--hub-heading) !important; font-size: 21px !important; }
.microsoft-card { min-height: 68px !important; border: 1px solid var(--hub-line) !important; border-radius: 10px !important; background: var(--hub-surface-muted) !important; box-shadow: none !important; }
.microsoft-card:hover { border-color: #8bced1 !important; background: var(--hub-accent-soft) !important; }
.identity-note { border: 1px solid #eadb9d !important; border-radius: 10px !important; background: var(--hub-yellow-soft) !important; color: #775400 !important; }

@media (max-width: 900px) {
  .app-frame { display: block !important; }
  .sidebar { position: relative !important; height: auto !important; min-height: 0 !important; padding: 14px 16px !important; overflow: visible !important; }
  .logo-lockup { justify-content: center !important; min-height: 48px !important; padding: 0 0 12px !important; }
  .logo-lockup .company-logo { max-height: 52px !important; }
  .sidebar-nav-stack { overflow: visible !important; }
  .side-nav, .side-nav-secondary { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; }
  .side-nav-secondary { margin-top: 8px !important; padding-top: 10px !important; }
  .sidebar-user { margin-top: 10px !important; }
  .signout { margin-top: 4px !important; }
  .content-topbar { min-height: 68px !important; padding: 17px 22px 13px !important; }
  .shell { padding: 18px 22px 34px !important; }
}

@media (max-width: 640px) {
  .side-nav, .side-nav-secondary { grid-template-columns: 1fr !important; }
  .content-topbar { align-items: flex-start !important; }
  .shell { padding-right: 16px !important; padding-left: 16px !important; }
  .card, .portal-panel, .profile-panel { padding: 18px !important; }
  .identity-card { padding: 20px !important; }
}

/* Shared hero system: one branded surface and readable light type everywhere. */
.home-command-copy,
.news-page-hero,
.documents-command-hero,
.my-training-banner,
.wellbeing-hero {
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 209, 0, .24), transparent 27%),
    radial-gradient(circle at 12% 88%, rgba(104, 224, 208, .2), transparent 30%),
    linear-gradient(135deg, #102533 0%, #123c4a 54%, #087683 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 24px 58px rgba(16, 37, 51, .18) !important;
}

.home-command-copy h1,
.home-command-copy h2,
.news-page-hero h1,
.news-page-hero h2,
.documents-command-copy h1,
.documents-command-copy h2,
.my-training-banner h1,
.my-training-banner h2,
.wellbeing-hero h1,
.wellbeing-hero h2 {
  color: #ffffff !important;
  font-family: "Aptos", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 760 !important;
  letter-spacing: -.045em !important;
}

.home-command-copy h2,
.news-page-hero h2,
.documents-command-copy h2,
.my-training-banner h2,
.wellbeing-hero h1 {
  font-size: clamp(30px, 4vw, 46px) !important;
  line-height: 1.02 !important;
}

.home-command-copy p,
.home-command-copy label,
.news-page-hero p:not(.eyebrow),
.documents-command-copy p:not(.eyebrow),
.my-training-banner p,
.wellbeing-hero .wellbeing-lead {
  color: rgba(255, 255, 255, .82) !important;
}

.home-command-copy .eyebrow,
.news-page-hero .eyebrow,
.documents-command-copy .eyebrow,
.my-training-banner .eyebrow,
.wellbeing-hero .eyebrow,
.wellbeing-links-title {
  color: #ffd100 !important;
}

.documents-command-hero,
.wellbeing-hero {
  padding: 22px !important;
}

.documents-command-meta .badge,
.news-page-summary span {
  border-color: rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .12) !important;
  color: rgba(255, 255, 255, .84) !important;
}

.documents-command-meta .badge strong,
.news-page-summary strong {
  color: #ffffff !important;
}

@media (max-width: 640px) {
  .documents-command-hero,
  .wellbeing-hero { padding: 18px !important; }
}

/* Extend the same hero system to every dashboard and admin surface. */
.company-hero,
.email-admin-hero,
.complaints-hero,
.continuum-hero,
.documents-admin-hero,
.news-admin-hero,
.rpm-hero,
.training-hero,
.users-hero,
.handbook-detail-hero,
.profile-hero,
.myhub-hero-copy,
.news-article-hero {
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 209, 0, .24), transparent 27%),
    radial-gradient(circle at 12% 88%, rgba(104, 224, 208, .2), transparent 30%),
    linear-gradient(135deg, #102533 0%, #123c4a 54%, #087683 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 24px 58px rgba(16, 37, 51, .18) !important;
}

.company-hero h1,
.company-hero h2,
.email-admin-hero h1,
.email-admin-hero h2,
.complaints-hero h1,
.complaints-hero h2,
.continuum-hero h1,
.continuum-hero h2,
.documents-admin-hero h1,
.documents-admin-hero h2,
.news-admin-hero h1,
.news-admin-hero h2,
.rpm-hero h1,
.rpm-hero h2,
.training-hero h1,
.training-hero h2,
.users-hero h1,
.users-hero h2,
.handbook-detail-hero h1,
.handbook-detail-hero h2,
.profile-hero h1,
.profile-hero h2,
.myhub-hero-copy h1,
.myhub-hero-copy h2,
.news-article-hero h1,
.news-article-hero h2,
.news-article-hero h3 {
  color: #ffffff !important;
  font-family: "Aptos", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 760 !important;
  letter-spacing: -.045em !important;
}

.company-hero h1,
.email-admin-hero h2,
.complaints-hero h2,
.continuum-hero h2,
.documents-admin-hero h2,
.news-admin-hero h2,
.rpm-hero h2,
.training-hero h1,
.users-hero h1,
.handbook-detail-hero h2,
.profile-hero h2,
.myhub-hero-copy h2,
.news-article-hero h3 {
  font-size: clamp(30px, 4vw, 46px) !important;
  line-height: 1.02 !important;
}

.company-hero p:not(.eyebrow),
.email-admin-hero p,
.complaints-hero p,
.continuum-hero p,
.documents-admin-hero p,
.news-admin-hero p,
.rpm-hero p,
.training-hero p,
.users-hero p,
.handbook-detail-hero p,
.profile-hero p,
.myhub-hero-copy p:not(.eyebrow),
.news-article-hero small {
  color: rgba(255, 255, 255, .82) !important;
}

.company-hero .eyebrow,
.email-admin-hero .eyebrow,
.complaints-hero .eyebrow,
.continuum-hero .eyebrow,
.documents-admin-hero .eyebrow,
.news-admin-hero .eyebrow,
.rpm-hero .eyebrow,
.training-hero .eyebrow,
.users-hero .eyebrow,
.handbook-detail-hero .eyebrow,
.profile-hero .eyebrow,
.myhub-hero-copy .eyebrow,
.news-article-hero .eyebrow {
  color: #ffd100 !important;
}

.company-hero,
.email-admin-hero,
.documents-admin-hero,
.news-admin-hero,
.rpm-hero,
.training-hero,
.handbook-detail-hero,
.profile-hero,
.news-article-hero {
  padding: 22px !important;
}

.company-hero .btn,
.email-admin-hero .btn,
.complaints-hero-actions a,
.continuum-hero .btn,
.documents-admin-hero .btn,
.news-admin-hero .btn,
.rpm-hero .btn,
.training-hero .btn,
.users-hero .btn,
.handbook-detail-hero .btn,
.news-article-hero .btn {
  border-color: rgba(255, 255, 255, .24) !important;
  background: rgba(255, 255, 255, .12) !important;
  color: #ffffff !important;
}

.company-hero .btn:hover,
.email-admin-hero .btn:hover,
.complaints-hero-actions a:hover,
.continuum-hero .btn:hover,
.documents-admin-hero .btn:hover,
.news-admin-hero .btn:hover,
.rpm-hero .btn:hover,
.training-hero .btn:hover,
.users-hero .btn:hover,
.handbook-detail-hero .btn:hover,
.news-article-hero .btn:hover {
  border-color: rgba(255, 255, 255, .44) !important;
  background: rgba(255, 255, 255, .2) !important;
  color: #ffffff !important;
}

.continuum-summary-chip,
.news-admin-hero .badge,
.documents-admin-hero .badge,
.email-admin-hero .badge,
.training-hero .badge,
.users-hero .badge {
  border-color: rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .12) !important;
  color: rgba(255, 255, 255, .84) !important;
}

.continuum-summary-chip strong,
.continuum-summary-chip span,
.news-admin-hero .badge strong,
.documents-admin-hero .badge strong,
.email-admin-hero .badge strong,
.training-hero .badge strong,
.users-hero .badge strong {
  color: #ffffff !important;
}

.myhub-hero-copy {
  min-height: 206px !important;
  padding: 22px 26px !important;
}

.profile-hero .avatar {
  background: linear-gradient(135deg, #68e0d0, #3d72e8) !important;
  color: #102533 !important;
  box-shadow: 0 14px 30px rgba(4, 26, 37, .24) !important;
}

@media (max-width: 640px) {
  .company-hero,
  .email-admin-hero,
  .documents-admin-hero,
  .news-admin-hero,
  .rpm-hero,
  .training-hero,
  .handbook-detail-hero,
  .profile-hero,
  .news-article-hero { padding: 18px !important; }

  .myhub-hero-copy { padding: 18px !important; }
}

/* Exact approved preview hero treatment. */
.home-command-copy,
.news-page-hero,
.documents-command-hero,
.my-training-banner,
.wellbeing-hero,
.company-hero,
.email-admin-hero,
.complaints-hero,
.continuum-hero,
.documents-admin-hero,
.news-admin-hero,
.rpm-hero,
.training-hero,
.users-hero,
.handbook-detail-hero,
.profile-hero,
.myhub-hero-copy,
.news-article-hero {
  position: relative !important;
  padding: 30px 32px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 86% 8%, rgba(104, 224, 208, .36), transparent 16rem),
    linear-gradient(120deg, #123e4b 0%, #096b78 56%, #3d72e8 100%) !important;
  box-shadow: 0 12px 28px rgba(16, 45, 61, .14) !important;
  color: #ffffff !important;
}

.home-command-copy::after,
.news-page-hero::after,
.documents-command-hero::after,
.my-training-banner::after,
.wellbeing-hero::after,
.company-hero::after,
.email-admin-hero::after,
.complaints-hero::after,
.continuum-hero::after,
.documents-admin-hero::after,
.news-admin-hero::after,
.rpm-hero::after,
.training-hero::after,
.users-hero::after,
.handbook-detail-hero::after,
.profile-hero::after,
.myhub-hero-copy::after,
.news-article-hero::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  right: -90px !important;
  bottom: -130px !important;
  width: 260px !important;
  height: 260px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, .06), 0 0 0 56px rgba(255, 255, 255, .04) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

.home-command-copy > *,
.news-page-hero > *,
.documents-command-hero > *,
.my-training-banner > *,
.wellbeing-hero > *,
.company-hero > *,
.email-admin-hero > *,
.complaints-hero > *,
.continuum-hero > *,
.documents-admin-hero > *,
.news-admin-hero > *,
.rpm-hero > *,
.training-hero > *,
.users-hero > *,
.handbook-detail-hero > *,
.profile-hero > *,
.myhub-hero-copy > *,
.news-article-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

.home-command-copy h1,
.home-command-copy h2,
.news-page-hero h1,
.news-page-hero h2,
.documents-command-copy h1,
.documents-command-copy h2,
.my-training-banner h1,
.my-training-banner h2,
.wellbeing-hero h1,
.wellbeing-hero h2,
.company-hero h1,
.company-hero h2,
.email-admin-hero h1,
.email-admin-hero h2,
.complaints-hero h1,
.complaints-hero h2,
.continuum-hero h1,
.continuum-hero h2,
.documents-admin-hero h1,
.documents-admin-hero h2,
.news-admin-hero h1,
.news-admin-hero h2,
.rpm-hero h1,
.rpm-hero h2,
.training-hero h1,
.training-hero h2,
.users-hero h1,
.users-hero h2,
.handbook-detail-hero h1,
.handbook-detail-hero h2,
.profile-hero h1,
.profile-hero h2,
.myhub-hero-copy h1,
.myhub-hero-copy h2,
.news-article-hero h1,
.news-article-hero h2,
.news-article-hero h3 {
  color: #ffffff !important;
  font-family: "Aptos", "Segoe UI", system-ui, sans-serif !important;
  font-size: 27px !important;
  font-weight: 760 !important;
  line-height: 1.15 !important;
  letter-spacing: -.045em !important;
}

.home-command-copy h2,
.news-page-hero h2,
.documents-command-copy h2,
.my-training-banner h2,
.wellbeing-hero h1,
.company-hero h1,
.email-admin-hero h2,
.complaints-hero h2,
.continuum-hero h2,
.documents-admin-hero h2,
.news-admin-hero h2,
.rpm-hero h2,
.training-hero h1,
.users-hero h1,
.handbook-detail-hero h2,
.profile-hero h2,
.myhub-hero-copy h2,
.news-article-hero h3 {
  margin: 0 0 7px !important;
}

.home-command-copy p,
.home-command-copy label,
.news-page-hero p,
.documents-command-copy p,
.my-training-banner p,
.wellbeing-hero .wellbeing-lead,
.company-hero p,
.email-admin-hero p,
.complaints-hero p,
.continuum-hero p,
.documents-admin-hero p,
.news-admin-hero p,
.rpm-hero p,
.training-hero p,
.users-hero p,
.handbook-detail-hero p,
.profile-hero p,
.myhub-hero-copy p,
.news-article-hero small {
  color: rgba(255, 255, 255, .78) !important;
}

.home-command-copy .eyebrow,
.news-page-hero .eyebrow,
.documents-command-copy .eyebrow,
.my-training-banner .eyebrow,
.wellbeing-hero .eyebrow,
.company-hero .eyebrow,
.email-admin-hero .eyebrow,
.complaints-hero .eyebrow,
.continuum-hero .eyebrow,
.documents-admin-hero .eyebrow,
.news-admin-hero .eyebrow,
.rpm-hero .eyebrow,
.training-hero .eyebrow,
.users-hero .eyebrow,
.handbook-detail-hero .eyebrow,
.profile-hero .eyebrow,
.myhub-hero-copy .eyebrow,
.news-article-hero .eyebrow {
  color: #a8fff1 !important;
}

.home-command-copy .btn,
.news-page-hero .btn,
.documents-command-hero .btn,
.my-training-banner .btn,
.wellbeing-hero .btn,
.company-hero .btn,
.email-admin-hero .btn,
.complaints-hero-actions a,
.continuum-hero .btn,
.documents-admin-hero .btn,
.news-admin-hero .btn,
.rpm-hero .btn,
.training-hero .btn,
.users-hero .btn,
.handbook-detail-hero .btn,
.news-article-hero .btn {
  border-color: rgba(255, 255, 255, .45) !important;
  background: rgba(255, 255, 255, .12) !important;
  color: #ffffff !important;
  white-space: nowrap;
}

.home-command-copy .btn:hover,
.news-page-hero .btn:hover,
.documents-command-hero .btn:hover,
.my-training-banner .btn:hover,
.wellbeing-hero .btn:hover,
.company-hero .btn:hover,
.email-admin-hero .btn:hover,
.complaints-hero-actions a:hover,
.continuum-hero .btn:hover,
.documents-admin-hero .btn:hover,
.news-admin-hero .btn:hover,
.rpm-hero .btn:hover,
.training-hero .btn:hover,
.users-hero .btn:hover,
.handbook-detail-hero .btn:hover,
.news-article-hero .btn:hover {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, .22) !important;
  color: #ffffff !important;
}

/* The live home search needs to remain visible beyond its hero surface. */
.home-command-copy { overflow: visible !important; }

@media (max-width: 900px) {
  .home-command-copy,
  .news-page-hero,
  .documents-command-hero,
  .my-training-banner,
  .wellbeing-hero,
  .company-hero,
  .email-admin-hero,
  .complaints-hero,
  .continuum-hero,
  .documents-admin-hero,
  .news-admin-hero,
  .rpm-hero,
  .training-hero,
  .users-hero,
  .handbook-detail-hero,
  .profile-hero,
  .myhub-hero-copy,
  .news-article-hero { padding: 24px !important; }
}

@media (max-width: 540px) {
  .home-command-copy,
  .news-page-hero,
  .documents-command-hero,
  .my-training-banner,
  .wellbeing-hero,
  .company-hero,
  .email-admin-hero,
  .complaints-hero,
  .continuum-hero,
  .documents-admin-hero,
  .news-admin-hero,
  .rpm-hero,
  .training-hero,
  .users-hero,
  .handbook-detail-hero,
  .profile-hero,
  .myhub-hero-copy,
  .news-article-hero { padding: 20px !important; }
}

/* Dashboard-specific headers that must use the same approved preview hero. */
.manager-greeting,
#hr-dashboard .hrp-top {
  position: relative !important;
  padding: 30px 32px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 86% 8%, rgba(104, 224, 208, .36), transparent 16rem),
    linear-gradient(120deg, #123e4b 0%, #096b78 56%, #3d72e8 100%) !important;
  box-shadow: 0 12px 28px rgba(16, 45, 61, .14) !important;
  color: #ffffff !important;
}

.manager-greeting::before,
.manager-greeting::after,
#hr-dashboard .hrp-top::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.manager-greeting::before,
#hr-dashboard .hrp-top::after {
  right: -90px !important;
  bottom: -130px !important;
  width: 260px !important;
  height: 260px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, .06), 0 0 0 56px rgba(255, 255, 255, .04) !important;
}

.manager-greeting::after { display: none !important; }

.manager-greeting > *,
#hr-dashboard .hrp-top > * {
  position: relative !important;
  z-index: 1 !important;
}

.manager-greeting .manager-greeting-copy h1,
#hr-dashboard .hrp-top h2 {
  margin: 0 0 7px !important;
  color: #ffffff !important;
  font-family: "Aptos", "Segoe UI", system-ui, sans-serif !important;
  font-size: 27px !important;
  font-weight: 760 !important;
  line-height: 1.15 !important;
  letter-spacing: -.045em !important;
}

.manager-greeting .manager-greeting-copy p,
#hr-dashboard .hrp-top p:not(.eyebrow) {
  max-width: 58ch !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, .78) !important;
}

.manager-greeting .manager-scope-controls,
#hr-dashboard .hrp-top .hrp-filter {
  position: relative !important;
  z-index: 1 !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .12) !important;
}

.manager-greeting .manager-scope-field label,
#hr-dashboard .hrp-top .hrp-field label,
#hr-dashboard .hrp-top .eyebrow {
  color: #a8fff1 !important;
}

.manager-greeting .manager-scope-field select,
#hr-dashboard .hrp-top .hrp-field select {
  background: #ffffff !important;
  color: #102533 !important;
}

.manager-greeting .btn,
#hr-dashboard .hrp-top .btn,
#hr-dashboard .hrp-top .primary {
  border-color: rgba(255, 255, 255, .45) !important;
  background: rgba(255, 255, 255, .12) !important;
  color: #ffffff !important;
}

#admin-centre.manager-dashboard-panel,
#manager-dashboard.manager-dashboard-panel,
#hr-dashboard.hrp-hub,
.training-hub,
.complaints-dashboard-panel {
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#admin-centre.manager-dashboard-panel::before,
#manager-dashboard.manager-dashboard-panel::before,
#hr-dashboard.hrp-hub::before,
.training-hub::before,
.complaints-dashboard-panel::before {
  display: none !important;
}

#admin-centre .manager-stat-grid,
#manager-dashboard .manager-stat-grid,
#hr-dashboard .hrp-stat-grid {
  gap: 16px !important;
  padding: 16px 0 !important;
  background: transparent !important;
}

#admin-centre .manager-stat,
#manager-dashboard .manager-stat,
#hr-dashboard .hrp-stat {
  border: 1px solid var(--hub-line) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: var(--hub-shadow-sm) !important;
}

#admin-centre .manager-stat strong,
#manager-dashboard .manager-stat strong,
#hr-dashboard .hrp-stat strong {
  color: var(--hub-heading) !important;
  font-family: "Aptos", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 760 !important;
}

.training-hub .training-hero,
.complaints-dashboard-panel .complaints-hero {
  margin: 0 0 16px !important;
}

@media (max-width: 900px) {
  .manager-greeting,
  #hr-dashboard .hrp-top { padding: 24px !important; }
}

@media (max-width: 540px) {
  .manager-greeting,
  #hr-dashboard .hrp-top { padding: 20px !important; }
}