/* Quiet, task-focused controls for course administrators. */
.staff-panel { display: grid; gap: 18px; max-width: 1040px; margin: 0 auto; color: #173b55; }
.staff-panel-intro { padding: 23px 27px; border-left: 4px solid #168ca5; border-radius: 0 10px 10px 0; background: #fff; }
.staff-eyebrow { color: #087d9d; font-size: 11px; font-weight: 850; letter-spacing: .09em; }
.staff-panel-intro h1 { margin: 8px 0 7px; color: #102c48; font-size: clamp(27px, 3vw, 36px); line-height: 1.17; letter-spacing: -.035em; }
.staff-panel-intro p { max-width: 720px; margin: 0; color: #567286; font-size: 14px; line-height: 1.6; }
.staff-card { padding: 22px 24px; border: 1px solid #d1e2eb; border-radius: 11px; background: #fff; }
.staff-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.staff-card-heading h2 { margin: 0; color: #173b55; font-size: 20px; line-height: 1.3; letter-spacing: -.02em; }
.staff-card-heading > span { color: #628196; font-size: 12px; font-weight: 800; }
.staff-create-form, .staff-row-form { display: grid; grid-template-columns: minmax(200px, 1.6fr) minmax(155px, .75fr) minmax(155px, .75fr) auto; align-items: end; gap: 11px; }
.staff-create-form label, .staff-row-form label, .staff-teacher-create label, .staff-asset-card label { display: grid; gap: 6px; min-width: 0; color: #395d73; font-size: 12px; font-weight: 750; }
.staff-create-form label span { color: #a54f43; }
.staff-create-form input, .staff-row-form input, .staff-teacher-create input, .staff-asset-card input[type="file"] { box-sizing: border-box; width: 100%; min-width: 0; min-height: 41px; padding: 9px 11px; border: 1px solid #bbd0dc; border-radius: 7px; color: #193e57; background: #fff; font: inherit; font-size: 13px; font-weight: 450; }
.staff-create-form input:focus, .staff-row-form input:focus, .staff-teacher-create input:focus, .staff-asset-card input[type="file"]:focus { outline: 3px solid #bce9ef; border-color: #1687a4; }
.staff-button { display: inline-flex; align-items: center; justify-content: center; min-height: 41px; padding: 8px 13px; border: 1px solid #0d6d8c; border-radius: 7px; color: #fff; background: #0c7395; font: inherit; font-size: 12px; font-weight: 780; line-height: 1.2; text-align: center; cursor: pointer; }
.staff-button:hover { background: #075b77; }
.staff-button:focus-visible { outline: 3px solid #87d4e4; outline-offset: 2px; }
.staff-button:disabled { opacity: .55; cursor: wait; }
.staff-button-secondary { color: #135e7e; background: #f2f9fb; border-color: #aed0de; }
.staff-button-secondary:hover { background: #e4f3f7; }
.staff-button-quiet { color: #38637a; background: #fff; border-color: #c1d5e0; }
.staff-button-quiet:hover { color: #123e59; background: #f4f9fb; }
.staff-message:not([hidden]) { margin: 0; padding: 12px 15px; border: 1px solid #bee0e6; border-radius: 8px; color: #225d74; background: #eaf7f9; font-size: 13px; line-height: 1.5; }
.staff-message.is-error:not([hidden]), .staff-error { border-color: #e7c3b9; color: #925044; background: #fff4f1; }
.staff-loading, .staff-empty, .staff-error { margin: 0; padding: 18px; border: 1px solid #dce8ed; border-radius: 8px; color: #60798a; font-size: 13px; line-height: 1.55; }
.staff-offerings-list { display: grid; gap: 10px; }
.staff-offering { padding: 15px 17px; border: 1px solid #dae7ec; border-radius: 8px; }
.staff-offering.is-inactive { background: #f8fafb; }
.staff-offering-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.staff-offering-head strong, .staff-offering-head small { display: block; }
.staff-offering-head strong { color: #153e59; font-size: 14px; line-height: 1.4; }
.staff-offering-head small { margin-top: 4px; color: #688295; font-size: 12px; }
.staff-status { flex: none; padding: 5px 9px; border-radius: 5px; color: #728390; background: #e9eff2; font-size: 11px; font-weight: 790; }
.staff-status.is-active { color: #236b62; background: #e4f4ee; }
.staff-row-actions { display: flex; align-items: end; gap: 6px; white-space: nowrap; }
.staff-row-actions .staff-button { min-height: 41px; }
.staff-teacher-create { display: flex; align-items: end; gap: 10px; }
.staff-teacher-create label { flex: 1; }
.staff-teachers-list { display: grid; }
.staff-teacher-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #e6edf1; }
.staff-teacher-row:first-child { border-top: 0; }
.staff-teacher-row span { min-width: 0; color: #20475f; font-size: 13px; overflow-wrap: anywhere; }
.staff-asset-card { max-width: 1040px; margin: 15px auto; }
.staff-asset-current { margin: 0 0 17px; color: #5d7688; font-size: 13px; line-height: 1.5; }
.staff-asset-current a { color: #0b7196; font-weight: 750; overflow-wrap: anywhere; }
.staff-asset-current small { color: #7890a0; }
.staff-asset-card input[type="file"] { padding: 7px 9px; cursor: pointer; }
.staff-asset-card input[type="file"]::file-selector-button { margin-right: 12px; padding: 7px 10px; border: 1px solid #b4d3df; border-radius: 5px; color: #205f7a; background: #f1f9fb; font: inherit; font-weight: 750; cursor: pointer; }
.staff-asset-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.staff-asset-actions span { color: #6c8594; font-size: 12px; }

@media (max-width: 960px) {
  .staff-create-form, .staff-row-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-create-form label:first-child, .staff-row-form label:first-child { grid-column: 1 / -1; }
  .staff-row-actions { align-self: end; }
}

@media (max-width: 610px) {
  .staff-panel { gap: 13px; }
  .staff-panel-intro { padding: 19px 20px; }
  .staff-card { padding: 18px 16px; }
  .staff-create-form, .staff-row-form { grid-template-columns: 1fr; }
  .staff-create-form label:first-child, .staff-row-form label:first-child { grid-column: auto; }
  .staff-create-form > .staff-button { width: 100%; }
  .staff-offering-head { display: grid; gap: 8px; }
  .staff-status { justify-self: start; }
  .staff-row-actions { flex-wrap: wrap; white-space: normal; }
  .staff-teacher-create, .staff-teacher-row, .staff-asset-actions { align-items: stretch; flex-direction: column; }
  .staff-teacher-create .staff-button, .staff-asset-actions .staff-button { width: 100%; }
}