.roster-planner {overflow:hidden}
.eyebrow {display:block;margin-bottom:7px;color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.13em}
.roster-controls {display:flex;align-items:end;flex-wrap:wrap;gap:14px;margin:20px 0}
.roster-controls label {min-width:170px;flex:1}
.roster-controls .roster-segment {flex:none;align-self:end}
.roster-segment {display:flex;padding:4px;background:#edf4f6;border:1px solid #d5e5e8;border-radius:12px;gap:3px}
.roster-segment button {border:0;background:transparent;color:#416170;padding:11px 22px;border-radius:8px;font-weight:700;min-height:44px}
.roster-segment button.selected {background:var(--primary);color:white;box-shadow:0 3px 10px #0f766e24}
.roster-step-buttons {display:flex;gap:6px}
.roster-step-buttons button {min-width:44px;min-height:44px}
.roster-period-summary {display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:6px 0 18px;padding:14px 16px;background:#f0fdfa;border:1px solid #ccfbf1;border-radius:12px;color:#115e59}
.roster-period-summary>span {font-size:13px}
#roster-unsaved {font-weight:700;color:#9a3412;margin-left:auto}
.roster-filters {margin:14px 0;align-items:end}
.roster-filters>label {min-width:170px}
.roster-search-label {flex:1}
.roster-scroll {max-height:65vh;border:1px solid #dce7ed;border-radius:12px;overscroll-behavior-x:contain}
.roster-scroll table {border-collapse:separate;border-spacing:0}
.roster-scroll thead th {position:sticky;top:0;z-index:3}
.roster-scroll .name {position:sticky;left:0;z-index:2;background:#fff;min-width:210px;text-align:left}
.roster-scroll thead .name {z-index:5;background:#0f172a}
.roster-scroll .name small,.weekly-people-section .name small {display:block;color:#64748b;font-weight:400;margin-top:5px;white-space:normal}
.roster-scroll td {padding:5px}
.roster-scroll .shift-select {min-width:78px;width:100%;min-height:42px;font-size:13px;padding:7px 3px;border-radius:7px}
.roster-scroll .shift-select:focus {outline:3px solid #99f6e4;outline-offset:1px}
.roster-scroll .shift-select.is-changed {box-shadow:inset 0 -3px 0 #f59e0b}
.roster-scroll tr.roster-group th {background:#e8f4f5;color:#0f5d65;font-size:12px;letter-spacing:.03em;text-align:left;padding:10px 14px}
.roster-scroll .weekly-grid {min-width:900px}
.roster-scroll .monthly-grid {min-width:2700px}
.person-role {display:inline-block;border-radius:4px;background:#edf4ff;color:#1d4ed8;padding:2px 5px;font-size:10px;margin:2px;font-weight:700}
.person-role.duty {background:#fef3c7;color:#92400e}
.roster-save-bar {display:flex;gap:16px;align-items:end;margin-top:22px;padding:18px 0 4px;border-top:1px solid #e2e8f0}
.roster-save-bar>label {flex:1}
.roster-save-bar>div {display:flex;gap:10px}
.roster-save-bar button {min-height:44px;white-space:nowrap}
.roster-notice {padding:14px 16px;background:#eff6ff;color:#1e40af;border:1px solid #dbeafe;border-radius:10px;font-size:13px;line-height:1.65}
.roster-key-details,.roster-totals {margin-top:18px;border:1px solid #e2e8f0;border-radius:10px;padding:14px}
.roster-key-details summary,.roster-totals summary {cursor:pointer;font-size:13px;font-weight:700;color:#334155}
.roster-legend {display:flex;gap:12px 22px;flex-wrap:wrap;margin-top:16px}
.roster-legend span {display:flex;align-items:center;gap:6px;font-size:12px;color:#475569}
.roster-legend i {width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.roster-totals table {margin-top:14px;min-width:850px}
.roster-totals small {display:block;font-weight:400;font-size:11px;white-space:normal}
.weekly-people-section {margin-top:24px}
.weekly-people-section h3 {display:flex;align-items:center;gap:8px;font-size:17px}
.weekly-people-section h3>span {background:#e8f5f4;color:#0f766e;padding:3px 9px;border-radius:20px;font-size:12px}
.weekly-people-section .name {min-width:210px;text-align:left}
.weekly-people-section td {padding:10px 6px}
.weekly-people-section .weekly-grid {min-width:1050px}
.person-week-fields {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}
.person-week-fields select {min-height:44px}
.sample-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0}
.sample-metrics>div {padding:20px;border:1px solid #dce9ec;border-radius:12px;background:#f7fbfb}
.sample-metrics b {display:block;font-size:29px;color:#0f766e;line-height:1.3}
.sample-metrics span {display:block;font-size:12px;color:#526f7b;margin-top:5px}
.sample-table-wrap {max-height:70vh;overflow:auto;margin-top:18px;border:1px solid #dce7ed;border-radius:12px}
.sample-table {width:100%;min-width:1360px;border-collapse:collapse;text-align:left}
.sample-table thead {position:sticky;top:0;z-index:3;background:#0f172a;color:white}
.sample-table th {padding:13px 10px;font-size:12px;text-transform:none}
.sample-table td {padding:12px 9px;border-bottom:1px solid #e2e8f0;vertical-align:top;font-size:12px}
.sample-table tr[data-review="1"] {background:#fffbeb}
.sample-table input:not([type=checkbox]),.sample-table select {font-size:12px;min-width:155px;padding:9px 8px;background:#fff;min-height:40px}
.sample-table input.sample-name {min-width:185px}
.sample-table input.sample-subcategory {margin-top:6px}
.sample-table small {display:block;margin-top:7px;color:#64748b;font-size:10px}
.sample-table .inline-check {display:flex;gap:7px;align-items:center;font-size:11px;margin-top:8px}
.sample-table .inline-check input {flex:none;width:18px;height:18px}
.sample-match {display:block;min-width:150px;line-height:1.55}
.sample-link {margin-top:6px;font-size:11px;padding:7px 10px}
.mapping-review {margin:0;min-width:200px;color:#92400e;line-height:1.55;font-size:12px}
.sample-imported {color:#0f766e!important;font-weight:700}
.sample-import-panel>.inline-check {display:flex;gap:9px;margin:16px 0;align-items:center}
.sample-import-panel>.primary {margin-top:12px;min-height:46px}
.sample-success {background:#f0fdfa;border:1px solid #99f6e4;padding:22px;border-radius:12px;margin-top:24px}
.sample-success h3 {color:#115e59;margin-top:0}
.sample-success li {margin:7px 0}
.roster-planner .quick-note {line-height:1.65}
@media(max-width:900px){
  .roster-controls>label {min-width:160px}
  .roster-save-bar {flex-wrap:wrap}
  .roster-save-bar>label {min-width:100%}
  .sample-metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .roster-controls {gap:12px}
  .roster-controls>label {flex:1 0 100%;min-width:0}
  .roster-controls .roster-segment {width:100%;justify-content:stretch}
  .roster-segment button {flex:1;padding:11px}
  .roster-step-buttons {width:100%}
  .roster-step-buttons button {flex:1}
  .roster-period-summary {gap:8px;padding:12px}
  .roster-period-summary strong {width:100%;font-size:14px}
  #roster-unsaved {margin-left:0}
  .roster-filters>label,.roster-filters>.report-buttons {width:100%;min-width:0}
  .roster-filters .report-buttons {display:flex;gap:7px}
  .roster-filters .report-buttons button {flex:1;padding:10px 8px;font-size:12px;min-height:44px}
  .roster-scroll .name {min-width:145px;max-width:160px;font-size:12px;white-space:normal}
  .roster-scroll .shift-select {min-width:72px}
  .roster-scroll .weekly-grid {min-width:740px}
  .roster-save-bar>div {width:100%;flex-wrap:wrap}
  .roster-save-bar #roster-fixed {flex:1 0 100%}
  .roster-save-bar button {flex:1;font-size:12px;padding:12px 10px}
  .person-week-fields {grid-template-columns:repeat(2,minmax(0,1fr))}
  .sample-metrics {gap:9px}
  .sample-metrics>div {padding:14px}
  .sample-metrics b {font-size:24px}
  .sample-intro .panel-head {flex-direction:column;align-items:start}
  .sample-import-panel>.primary {width:100%}
}
.directory-meta { display:block; color:var(--muted); font-size:11px; line-height:1.6; margin-top:5px; max-width:360px; white-space:normal; }
.data-table td.directory-actions { white-space:normal; min-width:220px; }
.directory-actions button { margin:3px 4px 3px 0; }
.directory-team-list { display:grid; gap:6px; max-height:45vh; overflow:auto; margin:12px 0 22px; }
.directory-team-list label { display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); border-radius:8px; }
.directory-team-list small { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.directory-swatch { display:inline-block; width:13px; height:13px; border-radius:4px; margin-right:7px; vertical-align:middle; }
.directory-reset-notice { background:#fff8ee; border:1px solid #edd7b4; border-radius:12px; padding:18px 20px; margin:0 0 22px; color:#633d10; }
.directory-reset-notice p { line-height:1.7; margin:8px 0 0; }
.directory-review-row td { background:#fffbeb; }
#directory-source-table select { max-width:200px; min-height:38px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); padding:5px; }
#directory-source-table .table-wrap { max-height:65vh; overflow:auto; }
#directory-source-table thead { position:sticky; top:0; z-index:1; }
.directory-source-notes { margin-top:20px; line-height:1.8; color:var(--muted); }
.directory-success { background:#ecfdf5; border:1px solid #a7f3d0; border-radius:12px; padding:20px; line-height:1.7; }
@media(max-width:640px){ .directory-meta{max-width:220px}.directory-reset-notice{padding:14px}.directory-actions button{margin-bottom:6px} }