.planning-shell {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.planning-commandbar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 22px rgba(15, 53, 87, 0.08);
  padding: 9px;
}

.planning-profile-select,
.planning-density-field,
.planning-policy-field,
.planning-horizon-field {
  display: grid;
  gap: 3px;
  min-width: 150px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.planning-profile-select select,
.planning-density-field select,
.planning-policy-field select,
.planning-horizon-field select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #c7d8e2;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 6px 28px 6px 9px;
}

.planning-profile-select { grid-column: span 2; }
.planning-period-nav { grid-column: span 3; }
.planning-view-switch { grid-column: span 4; }
.planning-horizon-field,
.planning-zoom-field,
.planning-policy-field { grid-column: span 2; }
.planning-density-field { grid-column: span 1; }
.planning-option-toggle { grid-column: span 1; }
.planning-command-actions { grid-column: span 3; }

.planning-horizon-field.is-hidden,
.planning-zoom-field.is-hidden {
  display: none;
}

.planning-option-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #405567;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.planning-option-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-2);
}

.planning-period-nav,
.planning-command-actions,
.planning-view-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.planning-command-actions {
  flex: 0 0 auto;
  margin-left: 0;
}

.planning-command-actions .btn {
  flex: 0 0 auto;
  min-width: 132px;
  min-height: 42px;
  justify-content: center;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.planning-period-nav {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.planning-period-nav > button,
.planning-view-switch button {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.planning-today-button {
  min-width: 82px;
  justify-content: center;
}

.planning-period-nav strong {
  min-width: 190px;
  padding-inline: 4px;
  overflow-wrap: anywhere;
}

.planning-view-switch {
  padding: 3px;
  border: 1px solid #cbdbe4;
  border-radius: 7px;
  background: #f2f7f9;
  max-width: 100%;
}

.planning-view-switch button {
  min-width: 82px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #405567;
  padding: 7px 10px;
  cursor: pointer;
}

.planning-view-switch .planning-capacity-view {
  min-width: 112px;
}

.planning-view-switch button.active {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 1px 5px rgba(15, 53, 87, 0.14);
  font-weight: 850;
}

.planning-zoom-field {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.planning-zoom-field select,
.planning-work-filters select {
  min-height: 38px;
  border: 1px solid #c7d8e2;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 6px 9px;
}

.planning-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.planning-employee-dock {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(145px, auto) minmax(250px, 290px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
}

.planning-employee-tools {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.planning-employee-search {
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #c7d8e2;
  border-radius: 6px;
  background: #fff;
  padding: 0 9px;
  color: var(--muted);
}

.planning-employee-search svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.planning-employee-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  padding: 8px 0;
}

.planning-employee-filter-menu {
  position: relative;
}

.planning-employee-filter-menu > summary {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #c7d8e2;
  border-radius: 6px;
  background: #fff;
  color: var(--brand);
  padding: 7px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.planning-employee-filter-menu > summary::-webkit-details-marker {
  display: none;
}

.planning-employee-filter-menu > summary svg {
  width: 17px;
  height: 17px;
}

.planning-employee-filter-menu[open] > summary {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 2px rgba(10, 141, 143, 0.13);
}

.planning-employee-filter-menu > div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: min(300px, 82vw);
  display: grid;
  gap: 8px;
  border: 1px solid #c7d8e2;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 53, 87, 0.16);
  padding: 10px;
}

.planning-employee-filter-menu label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.planning-employee-filter-menu select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #c7d8e2;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 6px 28px 6px 8px;
}

.planning-employee-dock > header {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.planning-employee-dock h2 {
  margin: 1px 0 0;
  font-size: 0.95rem;
  white-space: nowrap;
}

.planning-employee-count {
  flex: 0 0 auto;
  border-radius: 99px;
  background: #edf6f7;
  color: var(--brand);
  padding: 4px 7px;
  font-size: 0.7rem;
  font-weight: 850;
  white-space: nowrap;
}

.planning-employee-track {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(215px, 245px);
  gap: 7px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding: 2px 1px 5px;
}

.planning-employee-card {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "avatar details drag" "capacity capacity capacity";
  align-items: center;
  gap: 5px 8px;
  scroll-snap-align: start;
  border: 1px solid #d4e1e7;
  border-radius: 7px;
  background: #fbfdfe;
  color: var(--ink);
  padding: 7px 8px;
  cursor: grab;
}

.planning-employee-drag-label {
  grid-area: drag;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #567083;
  font-size: 0.64rem;
  font-weight: 800;
  white-space: nowrap;
}

.planning-employee-drag-label svg {
  width: 15px;
  height: 15px;
}

.planning-employee-card:active {
  cursor: grabbing;
}

.planning-employee-card:hover,
.planning-employee-card:focus-visible,
.planning-employee-card.is-selected {
  border-color: var(--brand-2);
  background: #f1fafa;
  box-shadow: 0 0 0 2px rgba(10, 141, 143, 0.13);
  outline: 0;
}

.planning-employee-card > .avatar {
  grid-area: avatar;
}

.planning-employee-details {
  grid-area: details;
  min-width: 0;
}

.planning-employee-details strong,
.planning-employee-details small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-employee-details small,
.planning-employee-capacity small {
  color: var(--muted);
  font-size: 0.68rem;
}

.planning-employee-capacity {
  grid-area: capacity;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-top: 1px solid #e1eaee;
  padding-top: 5px;
  color: #166a58;
  font-size: 0.7rem;
}

.planning-employee-capacity.is-unavailable {
  color: #9b3728;
}

.planning-employee-dock > .planning-resource-pager {
  min-height: 0;
  border: 0;
  padding: 0;
}

.planning-workspace {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.planning-workspace.is-assistant-open {
  grid-template-columns: minmax(250px, 290px) minmax(520px, 1fr) minmax(290px, 330px);
}

.planning-workqueue,
.planning-board-surface,
.planning-assistant,
.planning-demand-strip {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.planning-workqueue {
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 860px);
  padding: 10px;
}

.planning-workqueue > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.planning-workqueue h2,
.planning-region-lane h3 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.count-badge {
  display: grid;
  min-width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #e6f4f5;
  color: var(--brand);
  font-weight: 900;
}

.planning-work-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid #c7d8e2;
  border-radius: 7px;
  background: #fff;
  padding-inline: 9px;
}

.planning-work-search:focus-within {
  outline: 3px solid rgba(10, 141, 143, 0.2);
  border-color: var(--brand-2);
}

.planning-work-search input {
  min-width: 0;
  min-height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
}

.planning-work-filters {
  display: grid;
  margin-top: 7px;
}

.planning-filter-menu {
  position: relative;
  margin-top: 7px;
  border: 1px solid #cbdbe4;
  border-radius: 7px;
  background: #fff;
}

.planning-filter-menu summary {
  min-height: 40px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  color: #405567;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.planning-filter-menu summary::-webkit-details-marker {
  display: none;
}

.planning-filter-menu summary strong {
  min-width: 34px;
  border-radius: 999px;
  background: #e9f7f7;
  color: var(--brand);
  padding: 3px 7px;
  text-align: center;
}

.planning-filter-menu fieldset {
  display: grid;
  gap: 5px;
  margin: 0;
  border: 0;
  border-top: 1px solid #dbe6eb;
  padding: 8px;
}

.planning-filter-menu legend {
  padding: 0 2px 4px;
  color: var(--muted);
  font-size: 0.7rem;
}

.planning-filter-menu label {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  padding: 6px;
  color: #253b4d;
  font-size: 0.76rem;
  font-weight: 760;
}

.planning-filter-menu label:hover {
  background: #f0f7f9;
}

.planning-filter-menu input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand-2);
}

.planning-filter-menu button {
  min-height: 32px;
  border: 1px solid #cbdbe4;
  border-radius: 6px;
  background: #fff;
  color: var(--brand);
  font-weight: 800;
  cursor: pointer;
}

.planning-filter-menu button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.planning-bulkbar {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  border-block: 1px solid #dbe6eb;
  padding-block: 6px;
  color: #405567;
  font-size: 0.74rem;
}

.planning-bulkbar > span {
  margin-right: auto;
  white-space: nowrap;
}

.planning-bulkbar button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #cbdbe4;
  border-radius: 6px;
  background: #fff;
  color: var(--brand);
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.planning-bulkbar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.planning-work-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
  overflow: auto;
  overscroll-behavior: contain;
}

.planning-work-item {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 1px solid #d4e1e7;
  border-left: 4px solid var(--brand-2);
  border-radius: 7px;
  background: #fff;
  padding: 9px;
  cursor: grab;
}

.planning-work-item.is-bulk-selected {
  border-left-color: #16724f;
  background: #f3faf7;
}

.planning-work-check {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #c7d8e2;
  border-radius: 5px;
  background: #fff;
}

.planning-work-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand-2);
}

.planning-work-item.is-selected {
  border-color: var(--brand-2);
  background: #f2fbfb;
  box-shadow: 0 0 0 2px rgba(10, 141, 143, 0.14);
}

.is-dragging-planning-employee .planning-work-item[data-drop-planning-source] {
  border-color: var(--brand-2);
  background: #f1fafa;
}

.planning-work-select {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.planning-work-select:focus-visible,
.planning-work-plan:focus-visible,
.planning-filter-menu summary:focus-visible,
.planning-filter-menu input:focus-visible,
.planning-filter-menu button:focus-visible {
  outline: 3px solid rgba(10, 141, 143, 0.28);
  outline-offset: 2px;
}

.planning-work-plan {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #b9cfd9;
  border-radius: 6px;
  background: #fff;
  color: var(--brand);
  padding: 5px 8px;
  font-size: 0.74rem;
  font-weight: 850;
  cursor: pointer;
}

.planning-work-signals {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.planning-data-warning {
  color: #8a5700 !important;
}

.planning-work-item:hover,
.planning-work-item:focus-visible {
  border-color: var(--brand-2);
  box-shadow: 0 4px 12px rgba(15, 53, 87, 0.1);
  outline: 0;
}

.planning-work-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding-right: 26px;
}

.planning-work-item > span,
.planning-work-item small {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.planning-work-item small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.76rem;
}

.planning-board-surface {
  min-height: 560px;
  overflow: hidden;
}

.planning-demand-strip {
  padding: 10px;
}

.planning-scenario,
.planning-conflicts {
  min-width: 0;
  border: 1px solid #b8d3d7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 53, 87, 0.07);
}

.planning-scenario {
  display: grid;
  gap: 10px;
  padding: 11px;
}

.planning-scenario > header,
.planning-scenario > footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.planning-scenario h2 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.planning-scenario-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.planning-scenario-metrics > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  border: 1px solid #d6e3e8;
  border-radius: 7px;
  background: #f7fafb;
  padding: 8px;
}

.planning-scenario-metrics span,
.planning-scenario-metrics strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.planning-scenario-metrics span {
  color: var(--muted);
  font-size: 0.72rem;
}

.planning-scenario-content {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 9px;
}

.planning-scenario-list {
  min-width: 0;
  display: grid;
  gap: 5px;
  max-height: 260px;
  overflow: auto;
}

.planning-scenario-list > article {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) minmax(150px, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e1eaee;
  padding: 6px 2px;
}

.planning-scenario-list article > div,
.planning-scenario-list article strong,
.planning-scenario-list article small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.planning-scenario-list article > div {
  display: grid;
  gap: 2px;
}

.planning-scenario-list article small,
.planning-scenario-unscheduled p {
  color: var(--muted);
  font-size: 0.74rem;
}

.planning-scenario-unscheduled {
  min-width: 0;
  align-self: start;
  display: grid;
  gap: 6px;
  border: 1px solid #ead7aa;
  border-radius: 7px;
  background: #fffaf0;
  padding: 9px;
}

.planning-scenario-unscheduled p {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  overflow-wrap: anywhere;
}

.planning-scenario > footer > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.planning-scenario > footer > div {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.planning-conflicts > summary {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
}

.planning-conflicts > summary::-webkit-details-marker {
  display: none;
}

.planning-conflicts > summary > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.planning-conflicts > summary small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.planning-conflicts > div {
  display: grid;
  gap: 4px;
  border-top: 1px solid #dbe6eb;
  padding: 8px;
}

.planning-conflict-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #d6e3e8;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 8px;
  text-align: left;
  cursor: pointer;
}

.planning-conflict-item.error {
  border-left: 4px solid #b42318;
}

.planning-conflict-item.warning {
  border-left: 4px solid #a05a00;
}

.planning-conflict-item > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.planning-conflict-item small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.planning-demand-strip > header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
}

.planning-demand-strip h3 {
  margin: 2px 0 0;
  font-size: 0.95rem;
}

.planning-demand-strip > header small {
  color: var(--muted);
}

.planning-demand-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.planning-demand-day {
  min-width: 0;
  display: grid;
  gap: 3px;
  border-left: 3px solid #64a8ad;
  background: #f5fafb;
  padding: 7px 8px;
}

.planning-demand-day > span,
.planning-demand-day small {
  color: var(--muted);
  font-size: 0.7rem;
}

.planning-demand-day > div {
  height: 6px;
  border-radius: 99px;
  background: #dce7eb;
  overflow: hidden;
}

.planning-demand-day > div i {
  display: block;
  height: 100%;
  background: var(--brand-2);
}

.planning-demand-day.is-over {
  border-left-color: #b7422d;
  background: #fff7f5;
}

.planning-demand-day.is-over > div i {
  background: #b7422d;
}

.planning-assistant {
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 860px);
  overflow: hidden;
}

.planning-assistant > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 10px;
}

.planning-assistant h2,
.planning-assistant-empty h2 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.planning-assistant-empty {
  min-height: 250px;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.planning-assistant-empty > svg {
  width: 28px;
  height: 28px;
  margin: auto;
  color: var(--brand-2);
}

.planning-assistant-empty p {
  max-width: 28ch;
  margin: 0;
}

.planning-assistant-source {
  display: grid;
  gap: 3px;
  border-bottom: 1px solid var(--line);
  background: #f6fafb;
  padding: 9px 10px;
}

.planning-assistant-source span,
.planning-assistant-source small {
  color: var(--muted);
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.planning-assistant-list {
  display: grid;
  gap: 7px;
  padding: 8px;
  overflow: auto;
}

.planning-match {
  min-width: 0;
  display: grid;
  gap: 7px;
  border: 1px solid #d4e1e7;
  border-radius: 7px;
  padding: 8px;
}

.planning-match.is-blocked {
  background: #fafbfc;
  opacity: 0.82;
}

.planning-match-head,
.planning-match-head > span:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.planning-match-head > span:first-child {
  justify-content: flex-start;
}

.planning-match-head strong,
.planning-match-head small {
  display: block;
  overflow-wrap: anywhere;
}

.planning-match-head small,
.planning-match p {
  color: var(--muted);
  font-size: 0.72rem;
}

.planning-match p {
  margin: 0;
}

.planning-score {
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e5f4f4;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 900;
}

.planning-score-breakdown {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.planning-score-breakdown span {
  border-radius: 4px;
  background: #eef4f6;
  padding: 4px 2px;
  color: #405567;
  font-size: 0.65rem;
  font-weight: 800;
  text-align: center;
}

.planning-match-message {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  border-radius: 5px;
  padding: 6px;
  font-size: 0.7rem;
}

.planning-match-message.error {
  background: #fff0ed;
  color: #8e2e1d;
}

.planning-match-message.warning {
  background: #fff7df;
  color: #805400;
}

.planning-assistant > footer {
  margin-top: auto;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding: 9px 10px;
  color: var(--muted);
  font-size: 0.7rem;
}

.planning-shell.density-compact .planning-resource-head,
.planning-shell.density-compact .planning-day-dropzone {
  min-height: 92px;
  padding: 6px;
}

.planning-shell.density-compact .planning-work-item,
.planning-shell.density-compact .planning-match {
  gap: 4px;
  padding: 6px;
}

.planning-resource-scroll,
.planning-day-board {
  max-height: min(72vh, 860px);
  overflow: auto;
  overscroll-behavior: contain;
}

.planning-resource-grid {
  min-width: calc(230px + (var(--planning-days) * 190px));
  display: grid;
  grid-template-columns: 230px repeat(var(--planning-days), minmax(190px, 1fr));
}

.planning-grid-corner,
.planning-date-head,
.planning-resource-head,
.planning-day-dropzone {
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.planning-grid-corner,
.planning-date-head {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 54px;
  background: #eef5f7;
  padding: 9px;
}

.planning-grid-corner {
  left: 0;
  z-index: 7;
  font-weight: 900;
}

.planning-date-head span,
.planning-resource-head span,
.planning-resource-head small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
}

.planning-resource-head {
  position: sticky;
  left: 0;
  z-index: 3;
  min-height: 118px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  background: #fff;
  padding: 10px;
}

.planning-day-dropzone {
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: 6px;
  background: #fbfdfe;
  padding: 7px;
}

.planning-day-dropzone:has(.planning-assignment) .planning-free-slot {
  display: none;
}

.planning-free-slot {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px dashed #c5d6df;
  border-radius: 6px;
  color: #6b7e8d;
  font-size: 0.78rem;
}

.planning-assignment {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid #8fcbd0;
  border-left: 4px solid var(--brand-2);
  border-radius: 6px;
  background: #e9f7f7;
  color: var(--ink);
  padding: 7px;
  text-align: left;
  cursor: grab;
}

.planning-assignment.status-ingepland,
.planning-assignment.status-gepubliceerd {
  border-color: #8fb9da;
  border-left-color: #17669c;
  background: #edf6fc;
}

.planning-assignment strong,
.planning-assignment span,
.planning-assignment small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-assignment span,
.planning-assignment small {
  color: #4e6575;
  font-size: 0.74rem;
}

.planning-resource-pager {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding: 6px 9px;
}

.planning-time-header,
.planning-day-resource-row {
  min-width: 1050px;
  display: grid;
  grid-template-columns: 230px minmax(820px, 1fr);
}

.planning-time-header {
  position: sticky;
  top: 0;
  z-index: 8;
}

.planning-time-scale,
.planning-time-track {
  display: grid;
  grid-template-columns: repeat(var(--planning-slot-count), minmax(38px, 1fr));
}

.planning-time-scale {
  min-height: 54px;
  background: #eef5f7;
}

.planning-time-scale span {
  border-right: 1px solid #d4e1e7;
  padding: 9px 4px;
  color: var(--muted);
  font-size: 0.7rem;
}

.planning-day-resource-row .planning-resource-head {
  min-height: 82px;
}

.planning-time-track {
  position: relative;
  min-height: 82px;
  border-bottom: 1px solid var(--line);
  background: #fbfdfe;
}

.planning-time-drop {
  min-width: 0;
  border-right: 1px solid #e2eaee;
}

.planning-time-drop:hover {
  background: #eaf7f7;
}

.planning-time-assignment {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: var(--assignment-left);
  width: var(--assignment-width);
  min-width: 76px;
}

.planning-region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 9px;
  max-height: min(72vh, 860px);
  overflow: auto;
  padding: 9px;
}

.planning-region-lane {
  min-width: 0;
  border: 1px solid #d4e1e7;
  border-radius: 7px;
  background: #fbfdfe;
  padding: 9px;
}

.planning-region-lane > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.planning-region-lane > header > span {
  color: var(--muted);
  font-size: 0.76rem;
  text-align: right;
}

.planning-region-resources,
.planning-region-assignments {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.planning-region-person {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px dashed #c7d8e2;
  border-radius: 6px;
  background: #fff;
  padding: 7px;
}

.planning-region-person span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-capacity-grid {
  max-height: min(72vh, 860px);
  overflow: auto;
}

.planning-capacity-head,
.planning-capacity-row {
  min-width: 1120px;
  display: grid;
  grid-template-columns: minmax(210px, 1.15fr) minmax(210px, 1fr) 105px 90px 95px 95px 95px minmax(170px, 0.85fr);
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 9px;
}

.planning-capacity-head {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #eef5f7;
  color: #4b6171;
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.planning-capacity-row {
  width: 100%;
  border-inline: 0;
  border-top: 0;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.planning-capacity-row:hover,
.planning-capacity-row:focus-visible {
  background: #f3fafb;
  outline: 2px solid var(--brand-2);
  outline-offset: -2px;
}

.planning-capacity-person {
  display: flex;
  align-items: center;
  gap: 8px;
}

.planning-capacity-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.planning-source-status.current { color: #17684c; }
.planning-source-status.warning,
.planning-negative-balance { color: #a43b21; }
.planning-source-status.neutral { color: var(--muted); }

@media (max-width: 1350px) {
  .planning-commandbar {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .planning-profile-select,
  .planning-policy-field,
  .planning-horizon-field,
  .planning-density-field,
  .planning-option-toggle {
    grid-column: span 2;
  }

  .planning-period-nav,
  .planning-command-actions {
    grid-column: span 3;
  }

  .planning-view-switch {
    grid-column: span 6;
  }
}

.planning-utilization > span {
  display: block;
  height: 7px;
  border-radius: 99px;
  background: #dce7eb;
  overflow: hidden;
}

.planning-utilization i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-2);
}

.planning-assignment-form .planning-validation {
  display: grid;
  gap: 5px;
  border: 1px solid #d4e1e7;
  border-radius: 7px;
  background: #f7fafb;
  padding: 9px;
}

@media (max-width: 1180px) {
  .planning-zoom-field {
    margin-left: 0;
  }

  .planning-command-actions {
    margin-left: auto;
  }

  .planning-employee-dock {
    grid-template-columns: minmax(145px, auto) minmax(230px, 270px) minmax(0, 1fr);
  }

  .planning-employee-dock > .planning-resource-pager {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .planning-workspace {
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
  }

  .planning-workspace.is-assistant-open {
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
  }

  .planning-workspace.is-assistant-open .planning-assistant {
    grid-column: 1 / -1;
    max-height: 430px;
  }

  .planning-assistant-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .planning-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-workspace {
    grid-template-columns: 1fr;
  }

  .planning-workspace.is-assistant-open {
    grid-template-columns: 1fr;
  }

  .planning-workspace.is-assistant-open .planning-assistant {
    grid-column: auto;
  }

  .planning-workqueue {
    max-height: 300px;
  }

  .planning-work-list {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    overflow: auto hidden;
  }

  .planning-assistant-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .planning-commandbar,
  .planning-period-nav,
  .planning-command-actions {
    align-items: stretch;
  }

  .planning-commandbar,
  .planning-period-nav,
  .planning-command-actions {
    width: 100%;
  }

  .planning-profile-select,
  .planning-density-field,
  .planning-policy-field,
  .planning-horizon-field,
  .planning-option-toggle {
    min-width: 0;
    flex: 1 1 140px;
  }

  .planning-commandbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-profile-select,
  .planning-density-field,
  .planning-policy-field,
  .planning-horizon-field,
  .planning-option-toggle {
    grid-column: span 1;
  }

  .planning-period-nav,
  .planning-view-switch,
  .planning-command-actions {
    grid-column: 1 / -1;
  }

  .planning-period-nav {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
  }

  .planning-period-nav strong {
    grid-column: 1 / -1;
    min-width: 0;
    text-align: center;
  }

  .planning-view-switch {
    width: 100%;
    overflow-x: auto;
  }

  .planning-view-switch button {
    flex: 1 0 auto;
  }

  .planning-employee-dock {
    grid-template-columns: 1fr;
  }

  .planning-employee-tools {
    width: 100%;
  }

  .planning-employee-dock > header {
    justify-content: space-between;
  }

  .planning-employee-track {
    grid-auto-columns: minmax(170px, 82vw);
  }

  .planning-employee-dock > .planning-resource-pager {
    grid-column: auto;
  }

  .planning-command-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-left: 0;
  }

  .planning-summary {
    grid-template-columns: 1fr 1fr;
  }

  .planning-demand-strip > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .planning-demand-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-scenario-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-scenario-content {
    grid-template-columns: 1fr;
  }

  .planning-scenario-list > article {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .planning-scenario-list > article > div:nth-child(3) {
    grid-column: 2 / -1;
  }

  .planning-work-list {
    grid-template-columns: 1fr;
  }

  .planning-resource-grid {
    grid-template-columns: 180px repeat(var(--planning-days), minmax(165px, 1fr));
  }

  .planning-time-header,
  .planning-day-resource-row {
    grid-template-columns: 180px minmax(760px, 1fr);
  }

  .planning-board-surface {
    min-height: 480px;
  }
}

@media (max-width: 430px) {
  .planning-view-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
  }

  .planning-view-switch button,
  .planning-view-switch .planning-capacity-view {
    width: 100%;
    min-width: 0;
  }

  .planning-summary,
  .planning-demand-days,
  .planning-command-actions,
  .planning-scenario-metrics {
    grid-template-columns: 1fr;
  }

  .planning-scenario > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .planning-scenario > footer > div {
    display: grid;
    grid-template-columns: 1fr;
  }

  .planning-workqueue {
    max-height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planning-work-item,
  .planning-assignment,
  .planning-view-switch button {
    transition: none;
  }
}

/* V61: board-first workspace; secondary controls do not squeeze the timeline. */
.planning-shell .planning-commandbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  box-shadow: none;
  gap: 8px 12px;
}
.planning-shell .planning-period-nav { flex: 1 1 340px; display: flex; flex-wrap: wrap; }
.planning-shell .planning-period-nav strong { flex-basis: 100%; font-size: 12px; padding-left: 4px; }
.planning-shell .planning-period-nav .icon-button { width: 40px; height: 40px; min-width: 40px; display: grid; place-items: center; }
.planning-shell .planning-period-nav .icon-button svg { width: 18px; height: 18px; }
.planning-shell .planning-anchor-field { flex: 0 0 150px; min-width: 0; }
.planning-shell .planning-anchor-field input { width: 100%; min-width: 0; min-height: 40px; }
.planning-shell .planning-view-switch { flex: 0 1 auto; width: auto; max-width: 100%; }
.planning-shell .planning-view-switch button { flex: 0 0 auto; white-space: nowrap; }
.planning-shell .planning-command-actions { margin-left: auto; display: flex; flex-wrap: wrap; }
.planning-shell .planning-command-actions .btn { min-width: 0; font-size: 12px; }
.planning-shell .planning-commandbar > label { margin: 0; }
.planning-shell .planning-option-toggle { flex: 0 0 auto; }
.planning-shell .planning-settings-menu { position: relative; flex: 0 0 auto; }
.planning-settings-menu summary {
  display: flex; align-items: center; gap: 7px; min-height: 40px;
  cursor: pointer; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px;
  font-size: 12px; font-weight: 700; list-style: none; white-space: nowrap;
}
.planning-settings-menu summary::-webkit-details-marker { display: none; }
.planning-settings-menu svg { width: 18px; height: 18px; flex-shrink: 0; }
.planning-settings-fields {
  position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: 260px;
  display: grid; gap: 12px; padding: 14px; background: white; border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 6px 20px #0002;
}
.planning-shell .planning-settings-fields label { min-width: 0; width: 100%; margin: 0; }
.planning-shell .planning-settings-fields select { max-width: 100%; }
.planning-shell .planning-employee-dock {
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(240px, 320px);
  gap: 8px 16px; padding: 10px; border-radius: 6px; box-shadow: none;
}
.planning-shell .planning-employee-dock > header { min-width: 0; justify-content: start; gap: 12px; }
.planning-shell .planning-employee-dock .eyebrow { display: none; }
.planning-shell .planning-employee-dock h2 { font-size: 15px; }
.planning-shell .planning-employee-track { grid-column: 1 / -1; grid-auto-columns: 270px; max-height: 112px; }
.planning-shell .planning-employee-card { min-height: 92px; }
.planning-shell .planning-employee-details strong { white-space: normal; overflow-wrap: break-word; word-break: normal; }
.planning-shell .planning-employee-capacity strong { white-space: normal; word-break: normal; }
.planning-shell .planning-workspace { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
.planning-shell .planning-workspace.is-assistant-open { grid-template-columns: 250px minmax(0, 1fr); }
.planning-shell .planning-workspace .planning-assistant { grid-column: 1 / -1; max-height: 380px; }
.planning-shell .planning-workspace:has(.planning-workqueue.quick-collapsed) { grid-template-columns: minmax(0, 1fr); }
.planning-shell .planning-workqueue.quick-collapsed { grid-column: 1 / -1; }
.planning-shell .planning-workqueue { max-height: 680px; border-radius: 6px; box-shadow: none; }
.planning-shell .planning-board-surface { border-radius: 6px; min-width: 0; min-height: 320px; box-shadow: none; }
.planning-shell .planning-resource-scroll { max-height: 680px; }
.planning-shell .planning-resource-grid { min-width: calc(210px + var(--planning-days) * 155px); grid-template-columns: 210px repeat(var(--planning-days),minmax(155px,1fr)); }
.planning-shell .planning-resource-head { min-height: 100px; }
.planning-shell .planning-day-dropzone { min-height: 100px; }
.planning-shell .planning-day-dropzone.is-weekend { background: repeating-linear-gradient(135deg,#f5f6f7 0px,#f5f6f7 6px,#ebedef 6px,#ebedef 7px); }
.planning-shell .planning-project-head { grid-template-columns: minmax(0,1fr); }
.planning-project-booking > small { display: block; margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.planning-board-basis { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); }
.planning-board-basis button { display: flex; gap: 6px; align-items: center; min-height: 38px; border-radius: 5px; padding: 6px 10px; font-size: 12px; border: 1px solid transparent; }
.planning-board-basis [aria-pressed="true"] { background: #e9f3f0; color: #174c3c; border-color: #a6c8bd; }
.planning-board-basis svg { width: 17px; height: 17px; }
.planning-matrix-scroll { max-height: 680px; overflow: auto; overscroll-behavior: contain; }
.planning-matrix { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; min-width: max-content; font-size: 13px; }
.planning-matrix :is(th,td) { min-width: 150px; width: 150px; border: 0; border-right: 1px solid #dbe2e5; border-bottom: 1px solid #dbe2e5; padding: 12px; vertical-align: top; white-space: normal; }
.planning-matrix tr > :first-child { position: sticky; left: 0; z-index: 2; width: 220px; min-width: 220px; max-width: 220px; background: #fff; text-align: left; }
.planning-matrix thead th { position: sticky; top: 0; z-index: 3; background: #f0f4f5; }
.planning-matrix thead th:first-child { z-index: 4; background: #f0f4f5; }
.planning-matrix th button { padding: 0; width: 100%; background: transparent; border: 0; text-align: left; color: inherit; }
.planning-matrix th button:not(.planning-matrix-person) { min-height: 36px; }
.planning-matrix .planning-matrix-person { display: flex; align-items: start; gap: 7px; min-height: 38px; }
.planning-matrix-person > span { min-width: 0; }
.planning-matrix-person svg { flex: 0 0 18px; width: 18px; height: 18px; }
.planning-matrix-person[aria-expanded="true"] > svg[data-lucide="chevron-right"] { transform: rotate(90deg); }
.planning-matrix :is(strong,small) { display: block; overflow-wrap: break-word; word-break: normal; letter-spacing: 0; }
.planning-matrix small { font-size: 11px; margin-top: 4px; color: inherit; font-weight: 400; }
.planning-matrix td.capacity-low { background: #eef7f1; color: #224c36; }
.planning-matrix td.capacity-medium { background: #e7f0f8; color: #22485d; }
.planning-matrix td.capacity-high { background: #fff3ce; color: #634c15; }
.planning-matrix td.capacity-critical { background: #fbe4e6; color: #842633; }
.planning-matrix td.capacity-unknown { background: #f1f3f4; color: #485259; }
.planning-matrix-detail[hidden] { display: none !important; }
.planning-matrix-detail td { background: #fafbfc; }
.planning-matrix-detail .planning-assignment { margin-bottom: 6px; }
.planning-matrix-detail .planning-assignment span { white-space: normal; }
.planning-capacity-details > summary { padding: 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.planning-capacity-details .planning-capacity-grid { max-height: 450px; overflow: auto; }
.planning-muted { font-size: 12px; color: var(--muted); }
.planning-shell :is(.planning-matrix button,.planning-settings-menu summary,.planning-board-basis button):focus-visible { outline: 2px solid #1b726b; outline-offset: 2px; }
@media (max-width: 900px) {
  .planning-shell .planning-workspace, .planning-shell .planning-workspace.is-assistant-open { grid-template-columns: minmax(0,1fr); }
  .planning-shell .planning-workqueue { max-height: 290px; }
  .planning-shell .planning-employee-dock { grid-template-columns: minmax(0,1fr); }
  .planning-shell .planning-employee-tools { width: 100%; }
  .planning-shell .planning-period-nav { flex-basis: 100%; }
  .planning-shell .planning-view-switch { flex-basis: 100%; }
  .planning-shell .planning-settings-fields { right: auto; left: 0; width: min(260px,calc(100vw - 70px)); }
  .planning-shell .planning-command-actions { margin-left: 0; width: 100%; }
  .planning-shell .planning-command-actions .btn { flex: 1 1 auto; }
  .planning-matrix tr > :first-child { width: 160px; min-width: 160px; max-width: 160px; }
  .planning-matrix :is(th,td) { padding: 10px; }
  .planning-shell .planning-resource-grid { min-width: calc(160px + var(--planning-days) * 155px); grid-template-columns: 160px repeat(var(--planning-days),minmax(155px,1fr)); }
}