/* Shared workforce-plan styles for both dashboards.
   Everything is scoped to `.plan-root` (added by createPlanView) and driven by
   local custom properties. Those resolve from v2's theme variables where they
   exist and fall back to literals for v1, which has no theme layer — so dark
   mode works in v2 without a second stylesheet. */

#up-form #up-complete-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  letter-spacing: 0;
}
#up-complete { flex: 0 0 auto; margin: 0; width: 16px; height: 16px; }

.plan-root {
  --pl-panel:       var(--bg-surface, #fff);
  --pl-panel-2:     var(--bg-surface-2, #eef2f8);
  --pl-hover:       var(--bg-hover, #f5f7fa);
  --pl-border:      var(--border, #d8dee6);
  --pl-border-soft: var(--border, #eef1f5);
  --pl-fg:          var(--fg-primary, #1c2430);
  --pl-fg-dim:      var(--fg-secondary, #5b6673);
  --pl-accent:      var(--blue-light, #1f6feb);

  --pl-ok-bg:   #d8f2e0;  --pl-ok-fg:   #14683a;
  --pl-info-bg: #dce8fb;  --pl-info-fg: #17458f;
  --pl-warn-bg: #fff2c2;  --pl-warn-fg: #8a6100;
  --pl-bad-bg:  #f6dcdc;  --pl-bad-fg:  #8f2020;
}
[data-theme="dark"] .plan-root {
  --pl-ok-bg:   rgba(20,160,90,.22);   --pl-ok-fg:   #6ee7a8;
  --pl-info-bg: rgba(19,131,244,.22);  --pl-info-fg: #86bcff;
  --pl-warn-bg: rgba(220,160,20,.22);  --pl-warn-fg: #f0c869;
  --pl-bad-bg:  rgba(200,60,60,.22);   --pl-bad-fg:  #ff9d9d;
}

/* v1 swaps views with a body class; v2 uses its own .view/.hidden machinery. */
#planView { display: none; padding: 16px 22px 40px; }
body.plan-active > #planView { display: block; }

.plan-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.plan-head h2 { margin: 0; font-size: 17px; font-weight: 650; color: var(--pl-fg); }
.plan-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.plan-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pl-border); margin-bottom: 16px; flex-wrap: wrap; }
.plan-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--pl-fg-dim); border-radius: 4px 4px 0 0;
}
.plan-tab:hover { background: var(--pl-hover); }
.plan-tab.active { color: var(--pl-accent); border-bottom-color: var(--pl-accent); font-weight: 600; }

.plan-panel { display: none; }
.plan-panel.active { display: block; }

/* Both dashboards style every `thead th` globally (navy fill, white text,
   sortable cursor) and force a `table { min-width }`. These tables opt out. */
.plan-root table { min-width: 0; }
.plan-root table thead th {
  background: var(--pl-panel);
  color: var(--pl-fg);
  cursor: default;
  user-select: auto;
  border-right: none;
}
.plan-root table thead th:hover { background: var(--pl-panel); }
.plan-root tbody tr:hover { filter: none; }

/* ---- review queue ---- */
.pr-group { margin-bottom: 20px; }
.pr-group-head {
  margin: 0 0 8px; font-size: 12px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--pl-fg-dim); display: flex; align-items: center; gap: 8px;
}
.pr-count { background: var(--pl-panel-2); color: var(--pl-fg); border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.pr-card { border: 1px solid var(--pl-border); border-radius: 8px; background: var(--pl-panel); padding: 12px 14px; margin-bottom: 10px; }
.pr-card.pr-done { opacity: .55; }
.pr-head { display: flex; align-items: flex-start; gap: 12px; }
.pr-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; color: var(--pl-fg); }
.pr-posid-code { font-size: 12px; background: var(--pl-panel-2); padding: 2px 6px; border-radius: 4px; }
.pr-nopos { font-size: 11px; color: var(--pl-warn-fg); background: var(--pl-warn-bg); padding: 2px 6px; border-radius: 4px; }
.pr-requested { font-size: 11px; color: var(--pl-fg-muted, var(--pl-fg)); opacity: .75; }
.pr-money { font-size: 11.5px; color: var(--pl-fg-dim); }
.pr-kind, .pr-state { font-size: 11px; color: var(--pl-fg-dim); text-transform: capitalize; }
.pr-conf { font-size: 11px; font-weight: 650; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.pr-conf-high { background: var(--pl-ok-bg); color: var(--pl-ok-fg); }
.pr-conf-good { background: var(--pl-info-bg); color: var(--pl-info-fg); }
.pr-conf-medium { background: var(--pl-warn-bg); color: var(--pl-warn-fg); }
.pr-conf-low { background: var(--pl-bad-bg); color: var(--pl-bad-fg); }

.pr-evidence { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--pl-fg-dim); }
.pr-evidence li { margin: 2px 0; }
.pr-patch { margin-top: 8px; padding: 7px 9px; border-radius: 5px; font-size: 11.5px; background: var(--pl-hover); border: 1px dashed var(--pl-border); color: var(--pl-fg); }
.pr-patch-lbl { display: block; font-weight: 650; margin-bottom: 3px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--pl-fg-dim); }
.pr-patch code { font-size: 11px; }

.pr-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pr-posid { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--pl-fg-dim); }
.pr-posid select { max-width: 460px; font: inherit; font-size: 11.5px; padding: 4px 6px; background: var(--pl-panel); color: var(--pl-fg); border: 1px solid var(--pl-border); border-radius: 5px; }
.pr-note { flex: 1; min-width: 180px; font: inherit; font-size: 12px; padding: 5px 8px; border: 1px solid var(--pl-border); border-radius: 5px; background: var(--pl-panel); color: var(--pl-fg); }
.pr-approve, .pr-reject { font: inherit; font-size: 12px; padding: 5px 12px; border-radius: 5px; cursor: pointer; border: 1px solid transparent; }
.pr-approve { background: #1a7f45; color: #fff; }
.pr-reject { background: var(--pl-panel); color: var(--pl-bad-fg); border-color: var(--pl-border); }
.pr-approve:disabled, .pr-reject:disabled { opacity: .5; cursor: default; }
.pr-status { font-size: 11.5px; margin-top: 6px; min-height: 14px; color: var(--pl-fg-dim); }
.pr-status-ok { color: var(--pl-ok-fg); }
.pr-status-err { color: var(--pl-bad-fg); }
.pr-decided-meta { font-size: 11.5px; color: var(--pl-fg-dim); margin-top: 4px; }
.pr-loading, .pr-empty { padding: 26px; text-align: center; color: var(--pl-fg-dim); font-size: 13px; }
.pr-err { color: var(--pl-bad-fg); }

/* ---- quarterly grid ---- */
/* Headcount totals live outside the scroll container: stacking two sticky header
   rows is brittle, and the totals are the summary people read first anyway. */
.qg-totals-strip {
  display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px;
  border: 1px solid var(--pl-border); border-radius: 7px;
  padding: 8px 10px; background: var(--pl-panel); overflow-x: auto;
}
.qg-tot-lbl {
  font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em;
  color: var(--pl-fg-dim); align-self: center; white-space: nowrap; padding-right: 6px;
  border-right: 1px solid var(--pl-border-soft);
}
.qg-tot-lbl span { font-weight: 400; text-transform: none; letter-spacing: 0; }
.qg-tot-row { display: flex; gap: 4px; }
.qg-tot { min-width: 58px; text-align: center; padding: 2px 4px; border-radius: 5px; background: var(--pl-hover); }
.qg-tot-q { font-size: 10px; color: var(--pl-fg-dim); }
.qg-tot-hc { font-size: 15px; font-weight: 650; line-height: 1.15; color: var(--pl-fg); }
.qg-tot-cost { font-size: 10px; color: var(--pl-fg-dim); }

.qg-scroll { overflow: auto; max-height: 62vh; border: 1px solid var(--pl-border); border-radius: 7px; }
table.qg { border-collapse: separate; border-spacing: 0; font-size: 11.5px; width: 100%; color: var(--pl-fg); }
table.qg th, table.qg td { border-bottom: 1px solid var(--pl-border-soft); padding: 4px 7px; white-space: nowrap; }
.plan-root table.qg thead th { position: sticky; top: 0; z-index: 3; text-align: left; font-weight: 650; font-size: 10.5px; box-shadow: inset 0 -1px 0 var(--pl-border); }
table.qg tbody .qg-posid, table.qg tbody .qg-name,
table.qg tbody .qg-vert, table.qg tbody .qg-leader { background: var(--pl-panel); }
table.qg .qg-posid { position: sticky; left: 0; z-index: 2; }
.plan-root table.qg thead .qg-posid { z-index: 4; }
.qg-q, .qg-on, .qg-off { text-align: center; min-width: 46px; }
.qg-on { background: var(--pl-info-bg); color: var(--pl-info-fg); font-weight: 700; }
.qg-off { color: transparent; }
.qg-end { font-size: 11px; color: var(--pl-fg-dim); }
.qg-note { font-size: 11.5px; color: var(--pl-fg-dim); margin: 8px 2px 0; }

/* ---- pivots ---- */
.pv-metrics { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.pv-metric { flex: 1 1 150px; border: 1px solid var(--pl-border); border-radius: 7px; padding: 11px 13px; background: var(--pl-panel); }
.pv-metric-val { font-size: 19px; font-weight: 650; color: var(--pl-fg); }
.pv-metric-lbl { font-size: 11px; color: var(--pl-fg-dim); margin-top: 2px; }
.pv-block { margin-bottom: 20px; }
.pv-block h4 { margin: 0 0 7px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--pl-fg-dim); }
.pv-cols { display: flex; gap: 20px; flex-wrap: wrap; }
.pv-cols > .pv-block { flex: 1 1 320px; }
table.pv-table { border-collapse: collapse; width: 100%; font-size: 12px; color: var(--pl-fg); }
table.pv-table th, table.pv-table td { border-bottom: 1px solid var(--pl-border-soft); padding: 5px 9px; text-align: left; }
.plan-root table.pv-table thead th { font-weight: 650; color: var(--pl-fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
table.pv-wide { min-width: 900px; }
.pv-n { text-align: right; font-variant-numeric: tabular-nums; }
.pv-strong { font-weight: 650; }
.pv-dim { color: var(--pl-fg-dim); }
.pv-warn { color: var(--pl-warn-fg); font-weight: 600; }
tr.pv-total td { border-top: 2px solid var(--pl-border); font-weight: 650; }
tr.pv-tbd td { background: var(--pl-warn-bg); }
.pv-checks { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--pl-fg); }
.pv-checks li { display: flex; justify-content: space-between; padding: 5px 9px; border-bottom: 1px solid var(--pl-border-soft); }
.pv-check-ok strong { color: var(--pl-ok-fg); }
.pv-check-bad strong { color: var(--pl-warn-fg); }

.disp-chip { font-size: 11px; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.disp-retain { background: var(--pl-panel-2); color: var(--pl-fg); }
.disp-move { background: var(--pl-info-bg); color: var(--pl-info-fg); }
.disp-eliminate { background: var(--pl-bad-bg); color: var(--pl-bad-fg); }
.disp-hold { background: var(--pl-warn-bg); color: var(--pl-warn-fg); }
.disp-backfill { background: var(--pl-ok-bg); color: var(--pl-ok-fg); }

/* ---- new role ---- */
.nr-result { margin-top: 12px; }

/* Job code: text box plus a Regenerate button on one row. */
.nr-jobcode { display: flex; gap: 6px; align-items: stretch; }
.nr-jobcode input { flex: 1 1 auto; min-width: 0; }
.nr-jobcode button {
  flex: 0 0 auto; padding: 4px 9px; font-size: 11px; cursor: pointer;
  border: 1.5px solid var(--pl-border); border-radius: 5px;
  background: var(--pl-panel-2); color: var(--pl-fg); font-family: inherit;
}
.nr-jobcode button:hover { border-color: var(--pl-accent); color: var(--pl-accent); }

/* Escape hatch under a list the cascade has narrowed. */
.nr-showall {
  display: inline-block; align-self: flex-start; margin-top: 2px; padding: 0;
  border: 0; background: none; font: inherit; font-size: 10px; font-weight: 400;
  color: var(--pl-accent); text-decoration: underline; cursor: pointer;
}
.nr-showall[hidden] { display: none; }

.nr-ok { border: 1px solid var(--pl-ok-fg); background: var(--pl-ok-bg); border-radius: 7px; padding: 12px 14px; }
.nr-posid { font-size: 21px; font-weight: 700; letter-spacing: .04em; color: var(--pl-ok-fg); }
.nr-meta { font-size: 12px; color: var(--pl-fg); margin-top: 3px; }
.nr-audit { font-size: 11px; color: var(--pl-fg-dim); margin-top: 5px; }

/* ---- workbook upload result (rendered inside each dashboard's upload modal) ---- */
.wb-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.wb-stat { border: 1px solid var(--border, #d8dee6); border-radius: 6px; padding: 8px 11px; min-width: 92px; }
.wb-stat-val { font-size: 17px; font-weight: 650; }
.wb-stat-lbl { font-size: 10.5px; color: var(--fg-secondary, #5b6673); }
.wb-warn { background: #fff8e0; border: 1px solid #f0dca0; border-radius: 6px; padding: 8px 11px; font-size: 12px; margin-top: 8px; color: #4a3c10; }
.wb-warn ul { margin: 4px 0 0; padding-left: 18px; }
.wb-check-ok { color: #14683a; font-size: 12px; }
.wb-check-bad { color: #8f2020; font-size: 12px; }

/* Review queue embedded in the upload modal. */
.upload-review { margin-top: 14px; border-top: 1px solid var(--pl-border); padding-top: 12px; }
.upload-review[hidden] { display: none; }
.ur-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ur-title { margin: 0; font-size: 13px; font-weight: 650; }
.ur-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ur-bulk { font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--pl-border); background: var(--pl-panel-2); color: var(--pl-fg); }
.ur-bulk[hidden] { display: none; }
.ur-bulk:disabled { opacity: .55; cursor: default; }
.ur-progress { font-size: 11.5px; color: var(--pl-fg); opacity: .75; }
.ur-minted { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.ur-minted:empty { display: none; }
.ur-minted-lbl { font-size: 11.5px; font-weight: 650; opacity: .75; }
.ur-minted code { font-family: var(--pl-mono, ui-monospace, monospace); font-size: 11.5px;
  padding: 1px 6px; border-radius: 4px; border: 1px solid var(--pl-border); background: var(--pl-panel-2); }
/* The modal already scrolls; cap the queue so the actions stay reachable. */
.ur-queue { max-height: 46vh; overflow-y: auto; }