/* MySTS v280 — shared navigation tiles (preserving v277 colour rules).
   DESKTOP  blue | red | blue     TABLET blue | red     MOBILE blue
   Coloured accent is ONLY on the left of small navigation cards.
   Full-width page banners use blue top / red bottom.
   No runtime observers, inline border writes, or functional changes. */
:root{--sts277-blue:#1979B2;--sts277-red:#D32E49;--sts277-border:#d6e4ed}
/* Limit the shared treatment to known NAVIGATION tiles, not information cards,
   risk statuses, alerts, payroll report values or buttons embedded inside a form. */
#portalWorkspace :is(
 .p-dept-grid,.p-dept-home-grid,.sts216-grid
)>.p-dept-tile,
#portalWorkspace :is(.sts255-grid)>.sts255-tile,
#portalWorkspace :is(.sts275-grid)>.sts275-tile,
#portalWorkspace :is(.sts234-tiles)>.sts234-tile,
#portalWorkspace :is(.sts219-customers-tiles)>.sts219-customers-tile,
#portalWorkspace :is(.sts224-tile-grid)>.sts224-tile,
#portalWorkspace :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile,
#hrApp :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile{
 box-sizing:border-box!important;
 border-top:1px solid var(--sts277-border)!important;
 border-right:1px solid var(--sts277-border)!important;
 border-bottom:1px solid var(--sts277-border)!important;
 border-left:4px solid var(--sts277-blue)!important;
 border-radius:12px!important;
 background:#fff!important;
 box-shadow:0 3px 12px rgba(22,89,137,.065)!important;
 transition:box-shadow .16s ease,transform .16s ease!important
}
/* Column 2 in any three-column grid. This overrides legacy v255 column
   and v249 role-specific card colours. */
#portalWorkspace :is(.p-dept-grid,.p-dept-home-grid,.sts216-grid)>.p-dept-tile:nth-child(3n+2),
#portalWorkspace :is(.sts255-grid)>.sts255-tile:nth-child(3n+2),
#portalWorkspace :is(.sts275-grid)>.sts275-tile:nth-child(3n+2),
#portalWorkspace :is(.sts234-tiles)>.sts234-tile:nth-child(3n+2),
#portalWorkspace :is(.sts224-tile-grid)>.sts224-tile:nth-child(3n+2),
#portalWorkspace :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile:nth-child(3n+2),
#hrApp :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile:nth-child(3n+2){
 border-left-color:var(--sts277-red)!important
}
/* These instructor two-column panels have two navigation choices; blue / red. */
#portalWorkspace .sts219-customers-tiles>.sts219-customers-tile:nth-child(even){
 border-left-color:var(--sts277-red)!important
}
/* On narrower screens actual column count is two; keep blue / red per column. */
@media (min-width:651px) and (max-width:1050px){
 #portalWorkspace :is(.p-dept-grid,.p-dept-home-grid,.sts216-grid)>.p-dept-tile:nth-child(n),
 #portalWorkspace :is(.sts255-grid)>.sts255-tile:nth-child(n),
 #portalWorkspace :is(.sts275-grid)>.sts275-tile:nth-child(n),
 #portalWorkspace :is(.sts234-tiles)>.sts234-tile:nth-child(n),
 #portalWorkspace :is(.sts224-tile-grid)>.sts224-tile:nth-child(n),
 #portalWorkspace :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile:nth-child(n),
 #hrApp :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile:nth-child(n){
  border-left-color:var(--sts277-blue)!important
 }
 #portalWorkspace :is(.p-dept-grid,.p-dept-home-grid,.sts216-grid)>.p-dept-tile:nth-child(2n),
 #portalWorkspace :is(.sts255-grid)>.sts255-tile:nth-child(2n),
 #portalWorkspace :is(.sts275-grid)>.sts275-tile:nth-child(2n),
 #portalWorkspace :is(.sts234-tiles)>.sts234-tile:nth-child(2n),
 #portalWorkspace :is(.sts224-tile-grid)>.sts224-tile:nth-child(2n),
 #portalWorkspace :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile:nth-child(2n),
 #hrApp :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile:nth-child(2n){
  border-left-color:var(--sts277-red)!important
 }
}
/* On phone widths, cards stack in one column, which is always STS blue. */
@media (max-width:650px){
 #portalWorkspace :is(.p-dept-grid,.p-dept-home-grid,.sts216-grid)>.p-dept-tile:nth-child(n),
 #portalWorkspace :is(.sts255-grid)>.sts255-tile:nth-child(n),
 #portalWorkspace :is(.sts275-grid)>.sts275-tile:nth-child(n),
 #portalWorkspace :is(.sts234-tiles)>.sts234-tile:nth-child(n),
 #portalWorkspace :is(.sts219-customers-tiles)>.sts219-customers-tile:nth-child(n),
 #portalWorkspace :is(.sts224-tile-grid)>.sts224-tile:nth-child(n),
 #portalWorkspace :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile:nth-child(n),
 #hrApp :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile:nth-child(n){
  border-left-color:var(--sts277-blue)!important
 }
}
/* Top-level section banners only, not compact information cards. */
#portalWorkspace #pContent :is(
 .p-dept-intro,.sts255-header,.sts275-intro,.sts273-heading,.sts246-heading,
 .p-glance-intro
){
 box-sizing:border-box;background:#fff;
 border-top:4px solid var(--sts277-blue)!important;
 border-bottom:4px solid var(--sts277-red)!important;
 border-left:1px solid var(--sts277-border)!important;
 border-right:1px solid var(--sts277-border)!important;
 border-radius:12px;padding:15px 18px;
 box-shadow:0 3px 12px rgba(22,89,137,.045)
}
#portalWorkspace #stsHubShell>.sts234-focus,
#portalWorkspace #pContent .v45-hero.sts235-org-hero{
 border-top:4px solid var(--sts277-blue)!important;
 border-bottom:4px solid var(--sts277-red)!important;
 border-left:1px solid var(--sts277-border)!important;
 border-right:1px solid var(--sts277-border)!important
}
@media(prefers-reduced-motion:reduce){
 #portalWorkspace :is(.p-dept-tile,.sts255-tile,.sts275-tile,.sts234-tile),
 #hrApp .v67-hr-tile{transition:none!important}
}

/* v280 — approved compact charcoal navigation tiles across Customer, Instructor,
   Administrator and Director. This is CSS only: never alter application state,
   transactional cards, alerts, workflow permissions, or finance markers.
   Three equal columns on desktop; two on tablets; one on phones. */
:root{
 --sts280-tile-bg:#39434d;
 --sts280-tile-hover:#45515c;
 --sts280-tile-title:#ffffff;
 --sts280-tile-secondary:#dce5eb;
 --sts280-tile-border:#545f69;
}
/* Exact known navigation grids only, never generic dashboard or data cards. */
#portalWorkspace :is(.p-dept-grid,.p-dept-home-grid,.sts216-grid,.sts255-grid,.sts275-grid,.sts234-tiles,.sts219-customers-tiles,.sts224-tile-grid,.v67-hr-tiles,.sts241-work-grid),
#hrApp :is(.v67-hr-tiles,.sts241-work-grid){
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 align-items:stretch!important;
 gap:12px!important;
}
/* The single shared surface for navigation / action-entry tiles. */
#portalWorkspace :is(.p-dept-grid,.p-dept-home-grid,.sts216-grid)>.p-dept-tile,
#portalWorkspace .sts255-grid>.sts255-tile,
#portalWorkspace .sts275-grid>.sts275-tile,
#portalWorkspace .sts234-tiles>.sts234-tile,
#portalWorkspace .sts219-customers-tiles>.sts219-customers-tile,
#portalWorkspace .sts224-tile-grid>.sts224-tile,
#portalWorkspace :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile,
#hrApp :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile,
#hrApp .sts240-hr-tiles>.sts240-extra-tile,
#portalWorkspace.sts240-instructor #stsHubShell .sts234-tiles>.sts234-tile{
 box-sizing:border-box!important;
 min-width:0!important;
 min-height:102px!important;
 height:auto!important;
 margin:0!important;
 padding:13px 15px!important;
 gap:7px!important;
 border-radius:11px!important;
 border-top:1px solid var(--sts280-tile-border)!important;
 border-right:1px solid var(--sts280-tile-border)!important;
 border-bottom:1px solid var(--sts280-tile-border)!important;
 border-left-width:4px!important;
 border-left-style:solid!important;
 background:var(--sts280-tile-bg)!important;
 color:var(--sts280-tile-title)!important;
 box-shadow:0 3px 10px rgba(17,30,39,.16)!important;
 transform:none!important;
 line-height:1.35!important;
}
/* Preserve STS blue/red/blue column accent from v277. */
#hrApp .sts240-hr-tiles>.sts240-extra-tile{border-left-color:var(--sts277-blue)!important}
#hrApp .sts240-hr-tiles>.sts240-extra-tile:nth-child(3n+2){border-left-color:var(--sts277-red)!important}
/* Compact finance tiles without hiding counts, statuses or account information. */
#portalWorkspace #pContent .sts255-grid>.sts255-tile{min-height:102px!important;padding:13px 15px!important;gap:6px!important}
#portalWorkspace #pContent .sts255-icon{
 width:32px!important;height:32px!important;border-radius:8px!important;
 background:rgba(255,255,255,.10)!important;color:#eef5fa!important
}
#portalWorkspace #pContent .sts255-icon svg{width:19px!important;height:19px!important}
#portalWorkspace #pContent .sts255-top{color:var(--sts280-tile-secondary)!important}
#portalWorkspace #pContent .sts255-tile>strong{font-size:14px!important;line-height:1.3!important;color:white!important}
#portalWorkspace #pContent .sts255-desc{font-size:11px!important;line-height:1.4!important;color:var(--sts280-tile-secondary)!important}
/* Compact hub tiles and instructor HR tiles; no change to the action handlers. */
#portalWorkspace .sts234-tile-icon{
 width:33px!important;height:33px!important;font-size:20px!important;
 border-radius:8px!important;background:rgba(255,255,255,.10)!important;color:#f1f6fa!important
}
#portalWorkspace .sts234-tile-title{font-size:14px!important;line-height:1.3!important;color:white!important}
#portalWorkspace .sts234-tile-desc{font-size:11px!important;line-height:1.4!important;color:var(--sts280-tile-secondary)!important}
#hrApp :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile .v67-tile-icon,
#portalWorkspace :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile .v67-tile-icon{
 font-size:22px!important;color:#f2f6f9!important
}
#hrApp.sts240-instructor-hr :is(.v67-hr-tiles,.sts241-work-grid)>.v67-hr-tile,
#hrApp.sts240-instructor-hr .sts240-hr-tiles>.sts240-extra-tile{
 padding:13px 15px!important;min-height:102px!important;gap:7px!important;
 background:var(--sts280-tile-bg)!important;
}
#hrApp.sts240-instructor-hr .v67-hr-tile strong,
#hrApp .sts240-extra-tile strong{color:white!important;font-size:14px!important}
#hrApp.sts240-instructor-hr .v67-hr-tile small,
#hrApp .sts240-extra-tile small{color:var(--sts280-tile-secondary)!important;font-size:11px!important;line-height:1.4!important}
/* All remaining supported title/summary patterns use identical hierarchy. */
#portalWorkspace :is(.p-dept-tile,.sts275-tile,.sts219-customers-tile,.sts224-tile) :is(.p-dept-copy,.sts275-copy) strong,
#portalWorkspace :is(.p-dept-tile,.sts275-tile,.sts219-customers-tile,.sts224-tile)>strong,
#portalWorkspace .sts275-copy strong{
 color:var(--sts280-tile-title)!important;font-size:14px!important;line-height:1.3!important;
}
#portalWorkspace :is(.p-dept-tile,.sts275-tile,.sts219-customers-tile,.sts224-tile) :is(.p-dept-copy,.sts275-copy) small,
#portalWorkspace :is(.p-dept-tile,.sts275-tile,.sts219-customers-tile,.sts224-tile)>small,
#portalWorkspace .sts275-copy small{
 color:var(--sts280-tile-secondary)!important;font-size:11px!important;line-height:1.4!important;
}
#portalWorkspace :is(.p-dept-icon,.sts275-icon,.p-arrow,.sts234-tile-chevron){
 color:#edf4f8!important;
}
#portalWorkspace :is(.p-dept-icon,.sts275-icon){font-size:22px!important}
#portalWorkspace .sts234-tile-chevron{font-size:16px!important}
/* Predictable hover and keyboard focus: no motion (particularly in Finance). */
#portalWorkspace :is(.p-dept-tile,.sts255-tile,.sts275-tile,.sts234-tile,.sts219-customers-tile,.sts224-tile,.v67-hr-tile):is(:hover,:focus-visible),
#hrApp :is(.v67-hr-tile,.sts240-extra-tile):is(:hover,:focus-visible){
 background:var(--sts280-tile-hover)!important;
 transform:none!important;
 box-shadow:0 5px 13px rgba(17,30,39,.20)!important
}
#portalWorkspace :is(.p-dept-tile,.sts255-tile,.sts275-tile,.sts234-tile,.sts219-customers-tile,.sts224-tile,.v67-hr-tile):focus-visible,
#hrApp :is(.v67-hr-tile,.sts240-extra-tile):focus-visible{
 outline:3px solid var(--sts277-blue)!important;outline-offset:2px!important;
}
@media(max-width:1050px){
 #portalWorkspace :is(.p-dept-grid,.p-dept-home-grid,.sts216-grid,.sts255-grid,.sts275-grid,.sts234-tiles,.sts219-customers-tiles,.sts224-tile-grid,.v67-hr-tiles,.sts241-work-grid),
 #hrApp :is(.v67-hr-tiles,.sts241-work-grid){
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
 }
 #hrApp .sts240-hr-tiles>.sts240-extra-tile:nth-child(n){border-left-color:var(--sts277-blue)!important}
 #hrApp .sts240-hr-tiles>.sts240-extra-tile:nth-child(2n){border-left-color:var(--sts277-red)!important}
}
@media(max-width:650px){
 #portalWorkspace :is(.p-dept-grid,.p-dept-home-grid,.sts216-grid,.sts255-grid,.sts275-grid,.sts234-tiles,.sts219-customers-tiles,.sts224-tile-grid,.v67-hr-tiles,.sts241-work-grid),
 #hrApp :is(.v67-hr-tiles,.sts241-work-grid){
  grid-template-columns:minmax(0,1fr)!important;gap:10px!important;
 }
 #hrApp .sts240-hr-tiles>.sts240-extra-tile:nth-child(n){border-left-color:var(--sts277-blue)!important}
}

/* v326: Light-mode Training & Operations ICON contrast only; existing tiles unchanged. */
#portalWorkspace[data-sts-theme="light"] :is(.sts216-grid,.p-dept-grid)>.p-dept-tile .p-dept-icon{
 background:#176fa9!important;color:#fff!important;border:1px solid #56a5dc!important;
 font-weight:800!important;text-shadow:none!important;
}
#portalWorkspace[data-sts-theme="light"] :is(.sts216-grid,.p-dept-grid)>.p-dept-tile:nth-child(3n+2) .p-dept-icon{
 background:#c82d4e!important;border-color:#ec7587!important;color:#fff!important;
}