/* MySTS 2.0 V252 — Instructor-only final visual refinement.
   Scope: presentation, not navigation, records, forms, workflow or permissions.
   Brand colours are STS blue / red. V249 HR column accents are preserved. */
#portalWorkspace.sts240-instructor,
#hrApp.sts240-instructor-hr {
  --sts252-blue:#1979b2;
  --sts252-blue-strong:#126796;
  --sts252-red:#d22e49;
  --sts252-ink:#174d70;
  --sts252-muted:#617d8f;
  --sts252-line:#d7e5ef;
  --sts252-surface:#fff;
  --sts252-shadow:0 4px 15px rgba(29,77,113,.075);
  --sts252-shadow-hover:0 8px 22px rgba(29,77,113,.12);
  --sts252-radius:12px;
}

/* Shared spacing rhythm; keep the existing page structure and responsive grid. */
#portalWorkspace.sts240-instructor .p-main #pContent {
  box-sizing:border-box;
  padding-left:clamp(13px,1.6vw,24px)!important;
  padding-right:clamp(13px,1.6vw,24px)!important;
}
#portalWorkspace.sts240-instructor .p-main #stsHubShell {
  box-sizing:border-box;
  margin-left:clamp(0px,.4vw,6px);
  margin-right:clamp(0px,.4vw,6px);
}
#portalWorkspace.sts240-instructor #pContent :is(.sts246-heading,.sts218-head,.sts245-customer-header) {
  margin-bottom:16px!important;
}
#portalWorkspace.sts240-instructor #pContent :is(.sts246-heading h1,.sts218-head h1,.sts245-customer-header h2) {
  color:var(--sts252-ink)!important;
  font-size:clamp(21px,2vw,25px)!important;
  font-weight:800!important;
  letter-spacing:-.02em;
  line-height:1.2;
}
#portalWorkspace.sts240-instructor #pContent :is(.sts246-heading p,.sts218-head p,.sts245-customer-header p) {
  color:var(--sts252-muted)!important;
  line-height:1.55!important;
}

/* Uniform outer card language — a quiet, crisp frame rather than more banners. */
#portalWorkspace.sts240-instructor #pContent :is(.sts246-card,.v42-card,.sts225-task,.sts225-metric,.sts246-metrics > div),
#portalWorkspace.sts240-instructor #pContent details.sts218-job,
#portalWorkspace.sts240-instructor #stsHubShell .sts234-tile {
  background-color:var(--sts252-surface)!important;
  border-radius:var(--sts252-radius)!important;
  box-shadow:var(--sts252-shadow);
}
#portalWorkspace.sts240-instructor #pContent :is(.sts246-card,.v42-card,.sts225-task,.sts225-metric,.sts246-metrics > div),
#portalWorkspace.sts240-instructor #pContent details.sts218-job {
  border-color:var(--sts252-line);
}
#portalWorkspace.sts240-instructor #pContent .sts246-card {
  padding:clamp(15px,1.4vw,20px)!important;
  margin-bottom:16px!important;
}
#portalWorkspace.sts240-instructor #pContent .sts246-twocol {
  gap:16px!important;
}
#portalWorkspace.sts240-instructor #pContent .sts246-metrics {
  gap:14px!important;
  margin-bottom:16px!important;
}
#portalWorkspace.sts240-instructor #pContent .sts246-section-head {
  margin-bottom:15px!important;
}
#portalWorkspace.sts240-instructor #pContent .sts246-card h2 {
  font-size:17px!important;
  letter-spacing:-.01em;
  color:var(--sts252-ink)!important;
}
#portalWorkspace.sts240-instructor #pContent .sts246-card .sts246-note {
  color:var(--sts252-muted)!important;
  line-height:1.55;
}

/* The existing STS red task/arrangement accents remain in place. */
#portalWorkspace.sts240-instructor #pContent .sts246-mytasks {
  border-top-color:var(--sts252-red)!important;
}
#portalWorkspace.sts240-instructor #pContent .sts246-arrange {
  border-left-color:var(--sts252-red)!important;
}
#portalWorkspace.sts240-instructor #pContent .sts225-summary {
  gap:13px!important;
  margin:4px 0 16px!important;
}
#portalWorkspace.sts240-instructor #pContent .sts225-task {
  padding:clamp(13px,1.2vw,17px)!important;
}
#portalWorkspace.sts240-instructor #pContent details.sts218-job {
  overflow:hidden;
}
#portalWorkspace.sts240-instructor #pContent details.sts218-job[open] {
  border-left-color:var(--sts252-red)!important;
  box-shadow:var(--sts252-shadow-hover);
}

/* Buttons: one height, consistent corners, prominent blue/red primary actions. */
#portalWorkspace.sts240-instructor #pContent :is(.sts246-button,.sts225-button,.sts218-job-buttons button,.sts218-print button,.sts245-customer-tab),
#portalWorkspace.sts240-instructor #stsHubShell :is(.sts234-back,.sts234-tile),
#hrApp.sts240-instructor-hr :is(.v67-hr-tile,.sts241-back) {
  border-radius:10px!important;
  font-family:inherit!important;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
#portalWorkspace.sts240-instructor #pContent :is(.sts246-button,.sts225-button,.sts218-job-buttons button,.sts218-print button) {
  min-height:38px;
  font-weight:750!important;
  letter-spacing:.01em;
}
#portalWorkspace.sts240-instructor #pContent :is(.sts246-button.primary,.sts225-button.primary,.sts218-job-buttons button.primary) {
  background:var(--sts252-blue)!important;
  border-color:var(--sts252-blue)!important;
  border-left:4px solid var(--sts252-red)!important;
  color:#fff!important;
}
#portalWorkspace.sts240-instructor #pContent :is(.sts246-button.primary,.sts225-button.primary,.sts218-job-buttons button.primary):not(:disabled):hover {
  background:var(--sts252-blue-strong)!important;
  border-color:var(--sts252-blue-strong)!important;
  border-left-color:var(--sts252-red)!important;
}
#portalWorkspace.sts240-instructor #pContent :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea):focus-visible,
#portalWorkspace.sts240-instructor :is(button,summary):focus-visible,
#hrApp.sts240-instructor-hr :is(button,input,select,textarea):focus-visible {
  outline:2px solid var(--sts252-blue)!important;
  outline-offset:2px!important;
}
/* A selected filter remains visually selected; do not force colours on statuses. */
#portalWorkspace.sts240-instructor #pContent .sts245-customer-tab[aria-pressed="true"] {
  border-color:var(--sts252-blue)!important;
  box-shadow:inset 0 -3px 0 var(--sts252-red),var(--sts252-shadow)!important;
}

/* More generous tile spacing and calmer background in Training Hub. */
#portalWorkspace.sts240-instructor #stsHubShell .sts234-hub-tiles {
  gap:16px!important;
  margin-top:14px!important;
}
#portalWorkspace.sts240-instructor #stsHubShell .sts234-tile {
  border:1px solid var(--sts252-line)!important;
  padding:clamp(16px,1.5vw,22px)!important;
  min-height:165px;
}
#portalWorkspace.sts240-instructor #stsHubShell .sts234-tile-icon {
  background:#e7f3fa;
  border-radius:11px;
  color:var(--sts252-blue-strong);
}
#portalWorkspace.sts240-instructor #stsHubShell .sts234-tile-title {
  color:var(--sts252-ink);
  letter-spacing:-.01em;
}

/* People & HR keeps the alternating red/blue/red card columns from V249. */
#hrApp.sts240-instructor-hr .v67-hr-tiles.sts240-hr-tiles {
  gap:16px!important;
}
#hrApp.sts240-instructor-hr .v67-hr-tiles.sts240-hr-tiles > .v67-hr-tile,
#hrApp.sts240-instructor-hr .sts241-work-grid > .v67-hr-tile {
  background:#fff!important;
  border-radius:var(--sts252-radius)!important;
  box-shadow:var(--sts252-shadow);
  padding:clamp(16px,1.5vw,22px)!important;
  min-height:164px;
}
#hrApp.sts240-instructor-hr .v67-hr-tile strong {
  color:var(--sts252-ink);
  letter-spacing:-.01em;
}
#hrApp.sts240-instructor-hr .v67-hr-tile small {
  color:var(--sts252-muted);
  line-height:1.55;
}
#hrApp.sts240-instructor-hr .sts241-work-head {
  gap:16px;
  margin-bottom:16px;
}

/* Empty states: styled like intentional product UI, without inventing records. */
#portalWorkspace.sts240-instructor #pContent :is(.sts225-empty,.sts246-empty,.sts218-empty,.v42-empty,.sts252-empty-state),
#hrApp.sts240-instructor-hr #content :is(.v62-empty,.sts252-empty-state) {
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:24px 18px!important;
  margin:12px 0!important;
  min-height:106px;
  border:1px dashed #cbdfe9;
  border-radius:var(--sts252-radius);
  background:#f7fbfe;
  text-align:center;
  color:var(--sts252-muted)!important;
  font-size:13px!important;
  line-height:1.6!important;
}
#portalWorkspace.sts240-instructor #pContent :is(.sts225-empty,.sts246-empty,.sts218-empty,.v42-empty,.sts252-empty-state)::before,
#hrApp.sts240-instructor-hr #content :is(.v62-empty,.sts252-empty-state)::before {
  content:"▤";
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:11px;
  background:#e6f2f9;
  color:var(--sts252-blue);
  font-size:20px;
  line-height:1;
}
#portalWorkspace.sts240-instructor #pContent .sts252-empty-state[data-sts252-hint]::after,
#hrApp.sts240-instructor-hr #content .sts252-empty-state[data-sts252-hint]::after {
  content:attr(data-sts252-hint);
  font-size:11px;
  color:#6e8798;
}

/* Light hover feedback only on genuine click targets, not ordinary information cards. */
@media (hover:hover) {
  #portalWorkspace.sts240-instructor #pContent details.sts218-job:hover,
  #portalWorkspace.sts240-instructor #pContent .sts225-metric:hover,
  #portalWorkspace.sts240-instructor #pContent .sts245-customer-tab:hover,
  #portalWorkspace.sts240-instructor #stsHubShell .sts234-tile:hover,
  #hrApp.sts240-instructor-hr .v67-hr-tiles > .v67-hr-tile:hover,
  #hrApp.sts240-instructor-hr .sts241-work-grid > .v67-hr-tile:hover {
    box-shadow:var(--sts252-shadow-hover)!important;
    border-color:#a5cde1!important;
    transform:translateY(-1px);
  }
  #portalWorkspace.sts240-instructor #pContent :is(.sts246-button,.sts225-button,.sts218-job-buttons button):not(:disabled):hover {
    box-shadow:0 3px 10px rgba(26,108,158,.13);
  }
}
/* Respect reduced-motion users and touch devices. */
@media (prefers-reduced-motion:reduce) {
  #portalWorkspace.sts240-instructor #pContent *,
  #portalWorkspace.sts240-instructor #stsHubShell *,
  #hrApp.sts240-instructor-hr * {
    transition:none!important;
    animation-duration:.01ms!important;
  }
}
@media(max-width:900px) {
  #portalWorkspace.sts240-instructor #pContent .sts246-twocol {gap:12px!important}
  #hrApp.sts240-instructor-hr .v67-hr-tiles.sts240-hr-tiles {gap:12px!important}
}
@media(max-width:620px) {
  #portalWorkspace.sts240-instructor #pContent {padding-inline:12px!important}
  #portalWorkspace.sts240-instructor #pContent .sts246-card {padding:14px!important}
  #portalWorkspace.sts240-instructor #pContent .sts246-metrics {gap:8px!important}
  #portalWorkspace.sts240-instructor #stsHubShell .sts234-tile {min-height:130px}
  #hrApp.sts240-instructor-hr .v67-hr-tiles.sts240-hr-tiles > .v67-hr-tile {min-height:122px}
}