/* Personal only: preserve shared catalog and attendance layouts. */
#staff-content:has(.personnel-layout) {
  --staff-surface: #fff;
  --staff-soft: #f3f5f7;
  --staff-text: #17191c;
  --staff-muted: #59616c;
  --staff-border: #dce0e5;
  --staff-accent-soft: #fff1e8;
  color: var(--staff-text);
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] #staff-content:has(.personnel-layout) {
  --staff-surface: #1b1d21;
  --staff-soft: #25282e;
  --staff-text: #f4f5f7;
  --staff-muted: #b8c0cc;
  --staff-border: #454b55;
  --staff-accent-soft: #34271f;
  color-scheme: dark;
}
#staff-content .personnel-heading { align-items: flex-start; gap: 24px; margin: 12px 0 24px; }
#staff-content .personnel-heading h2 { font-size: 36px; text-transform: none; margin: 0 0 8px; }
#staff-content .personnel-heading .eyebrow { font-size: 12px; letter-spacing: 0; color: var(--staff-muted); margin-bottom: 8px; }
#staff-content .personnel-heading .lead { font-size: 13px; line-height: 1.65; max-width: 65ch; color: var(--staff-muted); margin: 0; }
#staff-content .personnel-heading-actions { flex-shrink: 0; gap: 12px; }
#staff-content .personnel-layout { grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: 24px; }
#staff-content .personnel-layout .admin-panel,
#staff-content .personnel-payment-total { background: var(--staff-surface); color: var(--staff-text); border-color: var(--staff-border); border-radius: 8px; padding: 24px; }
#staff-content .personnel-payment-total { border-left: 5px solid var(--orange); margin-bottom: 24px; }
#staff-content .personnel-payment-total strong { color: var(--staff-text); font-size: 42px; }
#staff-content .personnel-payment-total small { color: var(--staff-muted); text-transform: none; letter-spacing: 0; font-size: 13px; }
#staff-content .personnel-payment-total p,
#staff-content .personnel-payment-total > span { color: var(--staff-muted); line-height: 1.6; font-size: 13px; }
#staff-content .personnel-retired-total { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; padding:20px 24px; border:1px solid var(--staff-border); border-radius:8px; background:var(--staff-surface); color:var(--staff-text); }
#staff-content .personnel-retired-total h3 { font:600 15px/1.5 Inter,Arial,sans-serif; margin:0 0 8px; }
#staff-content .personnel-retired-total strong { font-size:24px; }
#staff-content .personnel-retired-total p,#staff-content .personnel-retired-total small { font-size:12px; line-height:1.65; color:var(--staff-muted); }
#staff-content .personnel-retired-total p { margin:8px 0 4px; }
#staff-content .personnel-retired-total button { flex-shrink:0; min-height:44px; }
#staff-content .personnel-payment-breakdown { margin-bottom:24px; padding:24px; background:var(--staff-surface); border-color:var(--staff-border); border-radius:8px; color:var(--staff-text); }
#staff-content .personnel-payment-breakdown h3 { font:700 17px/1.5 Inter,Arial,sans-serif; margin:0 0 4px; }
#staff-content .personnel-payment-breakdown > p { font-size:12px; color:var(--staff-muted); margin:0 0 16px; }
#staff-content .personnel-payment-breakdown dl { margin:0; max-width:820px; }
#staff-content .personnel-payment-breakdown dl > div { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:10px 0; font-size:13px; }
#staff-content .personnel-payment-breakdown dd { margin:0; flex-shrink:0; font-weight:600; font-variant-numeric:tabular-nums; }
#staff-content .personnel-breakdown-base { border-top:1px solid var(--staff-border); }
#staff-content .personnel-breakdown-total { border-top:2px solid var(--staff-border); margin-top:4px; font-weight:700; }
#staff-content .personnel-breakdown-total dd { font-size:19px; }
#staff-content .personnel-payment-breakdown ul { margin:16px 0 0; padding-left:18px; font-size:12px; line-height:1.7; color:var(--staff-muted); }
#staff-content .personnel-trash-panel { margin-bottom:24px; border-radius:8px; border-color:var(--staff-border); background:var(--staff-surface); color:var(--staff-text); }
#staff-content .personnel-trash-panel h3 { font:700 22px/1.3 Inter,Arial,sans-serif; }
#staff-content .personnel-trash-panel p,#staff-content .personnel-trash-row small { font-size:12px; line-height:1.6; color:var(--staff-muted); }
#staff-content .personnel-trash-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 0; border-top:1px solid var(--staff-border); }
#staff-content .personnel-trash-row > div { display:grid; gap:6px; }
#staff-content .personnel-employment-actions .personnel-delete-button { color:#aa3028; }
html[data-theme="dark"] #staff-content .personnel-employment-actions .personnel-delete-button { color:#ffaaa1; }
@media(max-width:760px) { #staff-content .personnel-retired-total { align-items:flex-start; flex-direction:column; padding:18px; gap:12px; } }
#staff-content .personnel-people { top: 100px; padding: 18px; }
#staff-content .personnel-panel-heading { flex-wrap: wrap; align-items: flex-start; }
#staff-content .personnel-panel-heading h3,
#staff-content .personnel-detail h3 { text-transform: none; font-size: 25px; }
#staff-content .personnel-detail > section:first-child > .personnel-panel-heading h3 { font-size: 32px; }
#staff-content .personnel-panel-heading .lead { margin: 5px 0 0; color: var(--staff-muted); font-size: 12px; overflow-wrap: anywhere; }
#staff-content .personnel-people-list { gap: 8px; }
#staff-content .personnel-person { position: relative; background: var(--staff-surface); border: 1px solid var(--staff-border); border-radius: 5px; padding: 14px 14px 14px 18px; color: var(--staff-text); gap: 6px; }
#staff-content .personnel-person strong { font-size: 15px; overflow-wrap: anywhere; }
#staff-content .personnel-person small { color: var(--staff-muted); font-size: 12px; line-height: 1.5; }
#staff-content .personnel-person.active { border-color: var(--orange); box-shadow: inset 4px 0 var(--orange); background: var(--staff-accent-soft); }
#staff-content .personnel-person em { justify-self: start; border-radius: 4px; padding: 4px 7px; background: var(--staff-soft); color: var(--staff-text); font-size: 11px; font-weight: 700; }
#staff-content .personnel-person.paid { background: #edf8f0; border-color: #78ae89; color: #174a2b; }
#staff-content .personnel-person.paid small { color: #386247; }
#staff-content .personnel-person.paid em { background: #d2ecd9; color: #174a2b; }
#staff-content .personnel-person.paid.active { box-shadow: inset 4px 0 #19633b; border-color: #19633b; }
#staff-content .personnel-person.departed { background: var(--staff-soft); }
html[data-theme="dark"] #staff-content .personnel-person.paid { background: #193526; color: #d3f4de; border-color: #579a6e; }
html[data-theme="dark"] #staff-content .personnel-person.paid small { color: #b3d9c0; }
html[data-theme="dark"] #staff-content .personnel-person.paid em { color: #d3f4de; background: #28513a; }
#staff-content .personnel-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--staff-border); border-radius: 6px; overflow: hidden; }
#staff-content .personnel-summary > div { padding: 16px; border: 0; background: var(--staff-soft); gap: 8px; }
#staff-content .personnel-summary > .personnel-month-balance { background: var(--staff-accent-soft); }
#staff-content .personnel-summary small { color: var(--staff-muted); font-size: 12px; line-height: 1.5; }
#staff-content .personnel-summary strong { color: var(--staff-text); font-size: 22px; overflow-wrap: anywhere; }
#staff-content .personnel-proration { color: var(--staff-text); background: var(--staff-accent-soft); border-radius: 4px; line-height: 1.7; }
#staff-content .personnel-accrual { margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--staff-border); }
#staff-content .personnel-accrual h3 { font-family: Inter, Arial, sans-serif; font-size: 16px; font-weight: 700; }
#staff-content .personnel-accrual p { font-size: 13px; line-height: 1.65; color: var(--staff-muted); }
#staff-content .personnel-accrual-total { font-size: 30px; color: var(--staff-text); margin-right: 6px; }
#staff-content .personnel-accrual progress { display: block; width: 100%; height: 8px; margin: 14px 0; accent-color: var(--orange); border: 0; border-radius: 4px; overflow: hidden; background: var(--staff-soft); }
#staff-content .personnel-accrual progress::-webkit-progress-bar { background: var(--staff-soft); }
#staff-content .personnel-accrual progress::-webkit-progress-value { background: var(--orange); }
#staff-content .personnel-accrual details { border-color: var(--staff-border); margin-top: 16px; }
#staff-content .personnel-accrual summary { color: var(--staff-text); font-size: 12px; padding: 12px 0; }
#staff-content .personnel-accrual summary::after { content: '+'; }
#staff-content .personnel-accrual details[open] summary::after { content: '−'; }
#staff-content .personnel-accrual small { display: block; font-size: 12px; line-height: 1.7; color: var(--staff-muted); max-width: 75ch; }
#staff-content .personnel-note,
#staff-content .personnel-pay-action small { color: var(--staff-muted); font-size: 12px; line-height: 1.65; }
#staff-content .personnel-pay-action { border-top: 1px solid var(--staff-border); padding-top: 20px; }
#staff-content .personnel-form { gap: 18px; }
#staff-content .personnel-form label,
#staff-content .personnel-heading label { font-size: 12px; color: var(--staff-text); }
#staff-content .personnel-form input,
#staff-content .personnel-form select,
#staff-content #personnel-month { min-height: 44px; border: 1px solid var(--staff-border); border-radius: 4px; background: var(--staff-surface); color: var(--staff-text); padding: 10px; }
#staff-content .personnel-form .personnel-wide small { display: block; margin-top: 10px; color: var(--staff-muted); line-height: 1.6; }
#staff-content .personnel-layout .secondary-action,
#staff-content .personnel-heading-actions .secondary-action { background: var(--staff-surface); color: var(--staff-text); border: 1px solid var(--staff-border); border-radius: 4px; min-height: 40px; }
#staff-content .personnel-layout .orange-button { min-height: 44px; border-radius: 4px; color: #17191c; }
#staff-content .personnel-movement { padding: 18px 0; border-color: var(--staff-border); }
#staff-content .personnel-movement strong { font-size: 14px; }
#staff-content .personnel-movement small { font-size: 12px; color: var(--staff-muted); line-height: 1.6; overflow-wrap: anywhere; }
#staff-content .personnel-movement p { font-size: 13px; overflow-wrap: anywhere; }
#staff-content .personnel-actions { flex-wrap: wrap; }
#staff-content .personnel-layout :is(button,input,select,summary):focus-visible,
#staff-content .personnel-heading :is(button,input):focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
@media(max-width: 1100px) {
  #staff-content .personnel-heading { flex-wrap: wrap; }
  #staff-content .personnel-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #staff-content .personnel-movement { grid-template-columns: minmax(0,1fr) auto; }
  #staff-content .personnel-actions { grid-column: 1/-1; }
}
@media(max-width: 760px) {
  #staff-content .personnel-layout { grid-template-columns: 1fr; gap: 18px; }
  #staff-content .personnel-people { position: static; }
  #staff-content .personnel-people-list { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 320px; overflow-y: auto; padding: 4px; }
  #staff-content .personnel-layout .admin-panel,
  #staff-content .personnel-payment-total { padding: 18px; }
  #staff-content .personnel-detail { gap: 18px; }
  #staff-content .personnel-heading-actions { flex-shrink: 1; }
}
@media(max-width: 420px) {
  #staff-content .personnel-people-list { grid-template-columns: 1fr; }
  #staff-content .personnel-summary strong { font-size: 19px; }
  #staff-content .personnel-summary > div { padding: 12px; }
  #staff-content .personnel-pay-action button { width: 100%; }
}