.personnel-view { --personnel-name-width: 166px; --personnel-month-width: 96px; padding: 20px; border: 1px solid #dbe3ef; border-radius: 8px; background: #fff; }
.personnel-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.personnel-heading h2 { margin-bottom: 6px; font-size: 22px; }
.personnel-heading p, .personnel-guide, .personnel-note { color: #526071; font-size: 13px; line-height: 1.7; }
.personnel-count { background: #eef2f7; padding: 6px 14px; border-radius: 20px; white-space: nowrap; font-weight: 700; }
.personnel-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 6px 0 16px; }
.personnel-controls label { min-width: 164px; }
.personnel-paging { display: flex; gap: 6px; }
.personnel-view button:disabled { opacity: .4; cursor: default; }
.personnel-view button:focus-visible, .personnel-scroll:focus-visible { outline: 3px solid #174ea6; outline-offset: -3px; }
.personnel-summary { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding: 14px 16px; background: #f0f5fc; border-radius: 6px; font-size: 14px; }
.personnel-summary > strong { color: #174ea6; }
.personnel-summary b { margin-left: 5px; font-size: 18px; }
.personnel-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 8px; }
.personnel-filter button { font-size: 13px; min-height: 34px; padding: 6px 12px; }
.personnel-filter > span { color: #526071; font-size: 12px; margin-left: 6px; }
.personnel-guide { margin-bottom: 10px; }
.personnel-scroll { max-height: 64vh; min-height: 140px; overflow: auto; border: 1px solid #cbd5e1; border-radius: 5px; overscroll-behavior-x: contain; }
.personnel-scroll.is-dragging { cursor: grabbing; user-select: none; }
.personnel-scroll.is-dragging button { cursor: grabbing; }
.personnel-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: calc(var(--personnel-name-width) + var(--personnel-months) * var(--personnel-month-width)); min-width: 100%; font-size: 13px; }
.personnel-table .personnel-name-col { width: var(--personnel-name-width); }
.personnel-table .personnel-month-col { width: var(--personnel-month-width); }
.personnel-table th, .personnel-table td { padding: 0; border-bottom: 1px solid #cbd5e1; }
.personnel-table thead th { position: sticky; top: 0; z-index: 3; background: #f2f5fa; border-right: 1px solid #cbd5e1; height: 58px; }
.personnel-table thead th:first-child { left: 0; z-index: 4; text-align: left; padding-left: 12px; }
.personnel-table tbody th { position: sticky; left: 0; z-index: 2; background: #fff; border-right: 1px solid #cbd5e1; text-align: left; }
.personnel-table thead button { display: block; width: 100%; border-radius: 0; min-height: 58px; background: transparent; color: #344054; padding: 5px 2px; font-size: 16px; }
.personnel-table thead button small { display: block; font-size: 10px; font-weight: 400; margin-bottom: 2px; }
.personnel-table thead .personnel-selected-month { background: #174ea6; }
.personnel-table .personnel-selected-month button { color: #fff; }
.personnel-name { display: block; width: 100%; height: 100%; padding: 10px 12px; background: transparent; color: #182230; text-align: left; border-radius: 0; overflow-wrap: anywhere; font-size: 14px; }
.personnel-name small { display: block; color: #667085; font-size: 10px; margin-top: 4px; font-weight: 400; }
.personnel-track { position: relative; min-height: 63px; }
.personnel-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--personnel-months), 1fr); }
.personnel-grid-cell { position: relative; border-right: 1px solid #e2e8f0; }
.personnel-focus-cell { background: #f4f8fe; }
.personnel-conflict-cell { background: repeating-linear-gradient(135deg, #fff8f0, #fff8f0 5px, #fff0df 5px, #fff0df 6px); }
.personnel-conflict-mark { position: absolute; top: 3px; right: 4px; font-size: 10px; color: #9a3412; }
.personnel-bar { position: absolute; min-height: 28px; height: 28px; padding: 0; border: 1px solid #71809666; border-radius: 3px; background: var(--personnel-color); color: #233348; font-size: 12px; font-weight: 500; overflow: hidden; text-align: left; white-space: nowrap; box-sizing: border-box; }
.personnel-bar span { display: block; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; }
.personnel-bar:hover { filter: brightness(.96); border-color: #174ea6; }
.personnel-bar:focus-visible { z-index: 1; }
.personnel-view .personnel-overlap-text { color: #9a3412; }
.personnel-empty { padding: 22px; color: #667085; }
.personnel-detail article { padding: 16px; margin-top: 16px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fafcff; font-size: 14px; }
.personnel-detail h3 { margin-bottom: 8px; }
.personnel-detail p { line-height: 1.7; }
.personnel-detail ul { list-style: none; padding: 0; margin: 0; }
.personnel-detail li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; padding: 8px 0; border-top: 1px solid #e2e8f0; }
.personnel-project-dot { display: inline-block; width: 12px; height: 12px; border: 1px solid #aab5c5; border-radius: 2px; }
.personnel-note { margin: 14px 0 0; font-size: 12px; }
.personnel-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.personnel-edit-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 12px 0; }
.personnel-edit-tools label { flex: 1 1 240px; max-width: 460px; }
.personnel-period { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 12px 0; }
.personnel-period label { flex: 1 1 170px; min-width: 0; }
@media (max-width: 700px) {
  .personnel-view { padding: 12px; --personnel-name-width: 122px; --personnel-month-width: 90px; }
  .personnel-controls { gap: 10px; }
  .personnel-controls label { flex: 1 1 140px; min-width: 0; }
  .personnel-paging { flex: 1 1 100%; order: 1; }
  .personnel-paging button { flex: 1; padding: 8px 5px; font-size: 12px; }
  .personnel-summary { gap: 8px 16px; padding: 12px; font-size: 12px; }
  .personnel-summary > strong { flex-basis: 100%; }
  .personnel-summary b { font-size: 16px; }
  .personnel-filter > span { flex-basis: 100%; margin: 4px 0 0; }
  .personnel-name { font-size: 12px; padding: 8px; }
  .personnel-scroll { max-height: 60vh; }
}

.personnel-input-panel { padding: 16px; border: 1px solid #b8cceb; border-radius: 6px; background: #f3f7fd; }
.personnel-input-panel h3 { margin-bottom: 6px; font-size: 16px; }
.personnel-input-panel > p, .personnel-inherit-note { color: #526071; font-size: 13px; line-height: 1.7; }
.personnel-input-person { min-width: 0; padding: 12px; margin: 12px 0 0; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }
.personnel-input-person legend { padding: 0 5px; font-weight: 700; }
.personnel-input-person .personnel-inherit-note { margin: 8px 0 0; }
.personnel-form-error { margin: 0; color: #b42318; font-size: 14px; line-height: 1.7; }
.personnel-input-panel button:disabled { opacity: .45; cursor: default; }
/* Workload and month labels share the same sticky cells and horizontal scroll. */
.personnel-table thead th{height:auto}
.personnel-table thead th:first-child{padding-left:0}
.personnel-load,.personnel-load-caption{height:64px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:3px;background:#f2f5fa;color:#233348;border-bottom:1px solid #cbd5e1;text-align:center}
.personnel-load strong{font-size:18px;line-height:1.2}
.personnel-load span{font-size:12px;font-weight:500;white-space:nowrap}
.personnel-load-caption{padding:4px 8px;text-align:left;font-size:13px}
.personnel-load-caption small{display:block;font-size:10px;font-weight:400}
.personnel-axis-name{height:58px;display:flex;align-items:center;padding-left:12px}
.personnel-load.low{background:#fee2e2}.personnel-load.light{background:#fef3c7}.personnel-load.normal{background:#bbf7d0}.personnel-load.busy{background:#fed7aa}.personnel-load.danger{background:#fecaca}