/* CORE shell presentation. Existing nav, permission checks and JS hooks retained. */
.hc-platform .hc-platform-shell{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100dvh;overflow:visible;max-width:100%}
.hc-platform .hc-platform-shell>.main{display:flex;flex-direction:column;min-width:0;overflow:visible;background:var(--hc-canvas)}
.hc-platform .hc-platform-shell>.sidebar{background:var(--hc-nav);color:var(--hc-nav-text);border-right:1px solid #39344e;padding:24px 14px 14px;position:sticky;top:0;height:100dvh;overflow-y:auto;overscroll-behavior:contain;--text-0:#f2f0ff;--text-1:#dbd9eb;--text-2:#b3afcc;--text-3:#b3afcc;--bg-1:#17152b;--bg-2:#242039;--bg-3:#312b53;--bg-4:#312b53;--border:#39344e;--border-2:#49415f;--brand:#afa9ec;--accent:#afa9ec;--hc-focus:#afa9ec}
.hc-platform .sidebar-brand{border-bottom:1px solid #39344e;grid-template-areas:"logo toggle" "portal portal";grid-template-columns:minmax(0,1fr) auto;padding:0 4px 20px;margin-bottom:18px;gap:8px}
.hc-platform .sidebar .sidebar-logo-img.is-light,.hc-platform .sidebar .sidebar-mark-img.is-light{display:none}
.hc-platform .sidebar .sidebar-logo-img.is-dark{display:block;width:158px;height:auto}
.hc-platform .sidebar .sidebar-mark-img{display:none}
.hc-platform .sidebar-portal{font:600 13px/1.5 var(--hc-font);letter-spacing:.1em;color:#b3afcc}
.hc-platform .sidebar .nav{display:flex;flex-direction:column;gap:3px}
.hc-platform .sidebar :is(.nav-link,.nav-pillar,.nav-label,.nav-pillar-label){font-family:var(--hc-font)}
.hc-platform .sidebar .nav a{min-height:44px;padding:10px 12px;gap:10px;border:0;border-radius:6px;color:#dbd9eb;font-size:13px;text-decoration:none;background:transparent}
.hc-platform .sidebar .nav a:hover{background:#242039;color:#fff}
.hc-platform .sidebar .nav a.active{background:#312b53;color:#f2f0ff;box-shadow:inset 3px 0 #afa9ec;font-weight:600}
.hc-platform .sidebar .nav a.active .icon{color:inherit}
.hc-platform .sidebar .nav-pillar{color:#b3afcc;font-size:13px;letter-spacing:.09em;padding-top:20px}
.hc-platform .sidebar .nav-badge{background:#393257;color:#e1dcff;border:0}
.hc-platform .sidebar .nav-group::before{background:#39344e}
.hc-platform .sidebar :is(.sidebar-toggle,.sf-btn){background:transparent;color:#dbd9eb;border-color:#39344e;min-height:36px;min-width:36px}
.hc-platform .sidebar-foot{border-color:#39344e}
.hc-platform .sidebar-brand{border-top:2px solid var(--hc-tenant-brand,transparent);padding-top:8px}
.hc-platform .hc-platform-shell.sidebar-collapsed{grid-template-columns:64px minmax(0,1fr)}
.hc-platform .hc-platform-shell.sidebar-collapsed>.sidebar{width:64px;padding:20px 8px}
.hc-platform #app-shell.sidebar-collapsed .sidebar-logo-img,.hc-platform #app-shell.sidebar-collapsed .sidebar-mark-img.is-light{display:none}
.hc-platform #app-shell.sidebar-collapsed .sidebar-mark-img.is-dark{display:block}
/* Collapsed rail: pillar section headers (Overview/People/Programs/Operations/
   Settings/HRS Console) have no icon of their own, only a text label + chevron,
   so they must fully hide in icon-only mode — individual .nav-link items keep
   their own <svg class="icon"> and stay visible. core/legacy/v23-sidebar.css
   already carries this same rule (html.sidebar-collapsed .nav-pillar{display:
   none}), but this file's own un-scoped ".hc-platform .sidebar .nav-pillar{
   display:flex}" below has higher specificity and was winning the cascade,
   leaving an empty highlighted button in the rail with no visible content.
   Matching that specificity here (rather than patching the legacy file, which
   is slated for removal) fixes it at the canonical layer. */
.hc-platform .hc-platform-shell.sidebar-collapsed .sidebar .nav-pillar{display:none}
.hc-platform .hc-platform-shell.sidebar-collapsed .sidebar .nav-pillar-content{max-height:none;opacity:1;pointer-events:auto}
.hc-platform .hc-platform-shell .topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;height:76px;min-height:76px;padding:0 32px;gap:16px;background:var(--hc-surface);border-bottom:1px solid var(--hc-border);backdrop-filter:none}
.hc-platform .topbar-crumbs{font:400 14px/1.4 var(--hc-font);min-width:0}
.hc-platform .topbar-crumb{color:var(--hc-secondary)}
.hc-platform .topbar-crumb.is-current{color:var(--hc-text);font-weight:500}
.hc-platform .topbar-crumb-sep{color:var(--hc-secondary)}
.hc-platform .topbar :is(.topbar-search-hint,.mobile-menu-trigger,#user-menu-trigger){min-height:44px;color:var(--hc-text);border-color:var(--hc-border);border-radius:var(--hc-radius-sm)}
.hc-platform .topbar .hrs-viewas-name{min-width:0;overflow-wrap:anywhere}
.hc-platform .topbar .hrs-viewas-meta{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap}
.hc-platform .topbar .chip{background:var(--hc-selected);color:var(--hc-selected-text);border-color:var(--hc-border);border-radius:5px;font-size:13px}
.hc-platform .hc-platform-shell .hc-platform-page{max-width:1440px;width:100%;padding:32px 36px 48px;margin:0 auto;min-width:0}
.hc-platform .hc-platform-page .studio-surface{margin:0;padding:0;background:transparent}
.hc-platform .hrs-page-inner{padding:0}
.hc-platform .hrs-footer{background:var(--hc-canvas);border-color:var(--hc-border)}
.hc-platform .hrs-footer-inner{max-width:1440px;padding:16px 36px;font:400 13px/1.5 var(--hc-font);color:var(--hc-secondary)}
.hc-platform .hrs-footer-nav a{color:var(--hc-secondary)}
.hc-platform .hrs-banner-main{min-width:0}
.hc-platform :focus-visible{outline:3px solid var(--hc-focus);outline-offset:3px;box-shadow:none}
.hc-platform .hrs-skip-link{position:fixed;top:-100px;left:16px;z-index:1000;padding:12px 16px;background:var(--hc-surface);color:var(--hc-action)}
.hc-platform .hrs-skip-link:focus{top:12px;transform:none}
@media(max-width:1100px) and (min-width:901px){.hc-platform .hc-platform-shell{grid-template-columns:210px minmax(0,1fr)}.hc-platform .hc-platform-shell .hc-platform-page{padding:28px 24px}}
@media(max-width:900px){
 .hc-platform .hc-platform-shell,.hc-platform .hc-platform-shell.sidebar-collapsed{display:block}
 .hc-platform .hc-platform-shell>.sidebar,.hc-platform .hc-platform-shell.sidebar-collapsed>.sidebar{position:fixed;inset:0 auto 0 0;z-index:70;width:min(320px,85vw);transform:translateX(-102%);height:100dvh;padding:24px 16px}
 .hc-platform .hc-platform-shell>.sidebar.is-open{transform:translateX(0)}
 .hc-platform .hc-platform-shell .topbar{min-height:64px;height:auto;padding:10px 16px;gap:10px}
 .hc-platform .topbar .mobile-menu-trigger{display:inline-flex;align-items:center;justify-content:center;min-width:44px}
 .hc-platform .hc-platform-shell .hc-platform-page{padding:24px 16px 90px}
 .hc-platform .mobile-overlay.is-open{position:fixed;inset:0;display:block;background:#15122588;z-index:65}
 .hc-platform .hrs-footer-inner{padding:16px}
 .hc-platform .hrs-bottombar{background:var(--hc-surface);border-top:1px solid var(--hc-border);color:var(--hc-secondary)}
 .hc-platform .hrs-bottombar a.active{background:var(--hc-selected);color:var(--hc-selected-text)}
}

/* Learner links do not use the admin nav-link hook. Both share this contract. */
.hc-platform .sidebar .nav a{display:flex;align-items:center;font-family:var(--hc-font)}
.hc-platform .sidebar .nav a .icon{width:18px;height:18px;flex-shrink:0;color:inherit}
.hc-platform .sidebar .nav a span{color:inherit}
@media(max-width:900px){
 .hc-platform #app-shell.sidebar-collapsed .sidebar-brand{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo toggle" "portal portal";justify-items:stretch}
 .hc-platform #app-shell.sidebar-collapsed .sidebar .nav a{justify-content:flex-start;padding:10px 12px}
 .hc-platform #app-shell.sidebar-collapsed .sidebar .nav a>span,.hc-platform #app-shell.sidebar-collapsed .sidebar-portal{display:block;opacity:1;width:auto}
 .hc-platform #app-shell.sidebar-collapsed .sidebar .nav-pillar{display:flex}
 .hc-platform #app-shell.sidebar-collapsed .sidebar .nav-pillar-subhead{display:block}
 .hc-platform #app-shell.sidebar-collapsed .sidebar-logo-img.is-dark{display:block}
 .hc-platform #app-shell.sidebar-collapsed .sidebar-mark-img.is-dark{display:none}
}

/* Keep grouped navigation readable and remove collapsed children from keyboard flow. */
.hc-platform .sidebar .nav-pillar{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:14px 12px;background:transparent;border:0;border-radius:6px;color:#b3afcc;text-align:left}
.hc-platform .sidebar .nav-pillar:hover,.hc-platform .sidebar .nav-pillar[aria-expanded=true]{background:#242039;color:#f2f0ff}
.hc-platform .sidebar .nav-pillar[aria-expanded=false]+.nav-pillar-content{display:none}
.hc-platform .sidebar .nav-pillar[aria-expanded=true]+.nav-pillar-content{display:flex;max-height:none;opacity:1;pointer-events:auto}
.hc-platform .sidebar .nav a :is(span,small,i,svg){color:inherit}
@media(max-width:640px){
 .hc-platform .topbar-crumbs .topbar-crumb:not(.is-current),.hc-platform .topbar-crumb-sep{display:none}
 .hc-platform .topbar-crumbs{flex:1;overflow:hidden}
 .hc-platform .topbar-crumb.is-current{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* Audited client view includes a name, countdown and Exit. Give those
    controls their own row instead of widening every page on a phone. */
 .hc-platform .hc-platform-shell .topbar{flex-wrap:wrap}
 .hc-platform .topbar .topbar-actions{flex:1 1 100%;min-width:0;width:100%;flex-wrap:wrap;justify-content:flex-end}
 .hc-platform .topbar .hrs-viewas{display:flex;justify-content:flex-end;flex:1 1 100%;order:10;min-width:0;max-width:100%}
 .hc-platform .topbar .hrs-viewas form{max-width:100%}
 .hc-platform .topbar .hrs-viewas form button{max-width:100%;white-space:normal;text-align:left;overflow-wrap:anywhere}
 .hc-platform .topbar #hrs-viewas-pop{max-width:calc(100vw - 32px)}
}

/* ── One page frame for every client admin page ───────────────────────────
   The shell above (.hc-platform-page) is the single source of page width
   and spacing: 1440px max, 32px top, 36px sides (28/24px at <=1100px,
   24/16px at <=900px), centred. Admin pages used to wrap their content in
   their own container on top of that, each with its own max-width (880px
   to 1600px), auto-centring and side/top padding. Some repeated the full
   32px 36px padding, which doubled the inset. These rules make those
   wrappers fill the shell frame instead, so every page lines up on the
   same edges.

   Scoped to the admin portal (body[data-portal="admin"]); MSP and learner
   pages have their own list in the next block. Bottom padding is left alone on purpose: some
   pages rely on it to keep content clear of fixed bottom action bars.
   To let a page keep its own width, remove its class from this list. */
.hc-platform[data-portal="admin"] .hc-platform-shell .hc-platform-page :is(
  .adaptive-review, .ai-edit-page, .ak-wrap, .ap-page, .ap-wrap, .arena-admin,
  .bi-page, .bs-setup, .bs-wrap, .cancel-flow, .cmp, .cp-page, .da,
  .ec-workspace, .ed-container, .ed-inner, .ee-workspace, .gdpr-page,
  .gdw-page, .gw-page, .hrp, .hrpd, .hrs-gd-inner, .hrs-la, .hrs-page-inner,
  .hrs-pay, .hrs-people-inner, .hrs-pg-inner, .hrs-pm, .hrs-ps-shell,
  .hrs-settings-shell, .hrs-sub, .ld-page, .le-wrap, .nl-report, .nl-reports,
  .nlh, .nlwiz, .nlwiz-page, .np, .page, .pai-root, .pl, .pl-wrap, .pr-page,
  .prov-wrap, .ps-page, .pt-editor, .pw-page, .pw-wizard, .reinforce-activity,
  .rep-page, .rp-modern, .sai, .sak, .sc2, .scorm-import, .sre-trigger-page,
  .stpl-wrap, .studio-home, .sw-wrap, .ts-wrap, .v27-auth, .xb
),
.hc-platform[data-portal="admin"] .hc-platform-shell .hc-platform-page .hrs-billing > .shell{
  width:auto;
  max-width:none;
  margin-top:0;
  margin-left:0;
  margin-right:0;
  padding-top:0;
  padding-left:0;
  padding-right:0;
}

/* ── Same page frame for MSP and learner pages ────────────────────────────
   The MSP and learner pages wrapped their content in their own container
   (560px to 1440px wide, centred, with their own top/side padding) inside
   the shell frame, so their edges didn't line up with the admin pages.
   These rules make those wrappers fill the shell frame the same way the
   admin block above does. Bottom padding is left alone, as above.
   Not covered: pages that render outside the shell (login, password reset,
   public reports, certificates view, resources hub, the arena player and
   lesson/quiz players). To let a page keep its own width, remove its class. */
.hc-platform[data-portal="msp"] .hc-platform-shell .hc-platform-page :is(
  .hrs-msp-audit, .hrs-msp-billing, .hrs-msp-clients, .hrs-msp-reporting,
  .hrs-mpc, .hrs-pay, .hrs-pm, .hrs-pricing, .hrs-page-inner
),
.hc-platform[data-portal="learner"] .hc-platform-shell .hc-platform-page :is(
  .crx, .export-page, .gdpr-self, .hrs-lc, .hrs-leaderboard, .hrs-page-inner,
  .hrs-page-narrow, .hrs-policy-reader, .hrs-twofa, .ld-page, .ld-shell,
  .lifecycle-page, .lp-page, .lp-shell, .lpx, .mn, [data-hrs-module]
),
.hc-platform[data-portal="learner"] .hc-platform-shell .hc-platform-page #learner-training,
.hc-platform[data-portal="learner"] .hc-platform-shell .hc-platform-page #learner-overview,
.hc-platform[data-portal="learner"] .hc-platform-shell .hc-platform-page #learner-overview .ld-shell{
  width:auto;
  max-width:none;
  margin-top:0;
  margin-left:0;
  margin-right:0;
  padding-top:0;
  padding-left:0;
  padding-right:0;
}