.director-page {
  --director-green-900: #123f30;
  --director-green-700: #176548;
  --director-green-500: #268660;
  --director-green-100: #e8f3ee;
  --director-gold: #d4af37;
  --director-ink: #1f2d26;
  --director-muted: #617169;
  --director-line: #d7dfda;
  --director-surface: #ffffff;
  --director-canvas: #f3f7f4;
  --director-danger: #b42318;
  --director-warning: #a15c0b;
  color: var(--director-ink);
  min-width: 0;
}

.director-page *,
.director-page *::before,
.director-page *::after {
  box-sizing: border-box;
}

.director-page :focus-visible {
  outline: 3px solid #c79c0b;
  outline-offset: 3px;
}

.director-page-head,
.director-panel-head,
.director-case-header,
.director-case-title,
.director-workload-card header,
.director-capacity-line,
.director-workload-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.director-page-head {
  align-items: flex-start;
  margin: 0 0 1.25rem;
}

.director-page-head h2,
.director-panel-head h3,
.director-case-header h2 {
  margin: 0;
}

.director-page-head p,
.director-case-header p {
  color: var(--director-muted);
  margin: 0.25rem 0 0;
}

.director-eyebrow {
  color: var(--director-green-700) !important;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 0.25rem !important;
  text-transform: uppercase;
}

.director-breadcrumb {
  color: var(--director-muted);
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}

.director-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.director-metric {
  background: var(--director-surface);
  border: 1px solid var(--director-line);
  border-left: 5px solid var(--director-green-500);
  border-radius: 0.7rem;
  box-shadow: 0 4px 14px rgba(18, 63, 48, 0.06);
  color: inherit;
  display: grid;
  min-height: 132px;
  padding: 1rem;
  text-decoration: none;
}

.director-metric:hover {
  border-color: var(--director-green-500);
  box-shadow: 0 8px 22px rgba(18, 63, 48, 0.12);
  text-decoration: none;
  transform: translateY(-1px);
}

.director-metric--today { border-left-color: #c79c0b; }
.director-metric--risk { border-left-color: #c56a13; }
.director-metric--overdue { border-left-color: var(--director-danger); }
.director-metric__label { color: var(--director-muted); font-size: 0.9rem; font-weight: 600; }
.director-metric__value { align-self: center; color: var(--director-green-900); font-size: 2.25rem; line-height: 1; }
.director-metric__detail { align-self: end; color: var(--director-muted); font-size: 0.8rem; }

.director-dashboard-grid,
.director-workspace-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.7fr) minmax(290px, 0.7fr);
}

.director-panel,
.director-action-rail {
  background: var(--director-surface);
  border: 1px solid var(--director-line);
  border-radius: 0.75rem;
  box-shadow: 0 3px 12px rgba(18, 63, 48, 0.05);
  min-width: 0;
  padding: 1rem;
}

.director-panel-head {
  align-items: flex-end;
  margin-bottom: 0.8rem;
}

.director-panel-head a {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.director-table-wrap {
  border: 1px solid var(--director-line);
  border-radius: 0.55rem;
  max-width: 100%;
  overflow: auto;
}

.director-table {
  border-collapse: collapse;
  font-size: 0.86rem;
  min-width: 900px;
  width: 100%;
}

.director-table caption {
  color: var(--director-muted);
  font-size: 0.8rem;
  padding: 0.6rem 0.75rem;
  text-align: left;
}

.director-table th,
.director-table td {
  border-bottom: 1px solid var(--director-line);
  padding: 0.7rem;
  text-align: left;
  vertical-align: top;
}

.director-table th {
  background: var(--director-canvas);
  color: var(--director-green-900);
  font-weight: 700;
  white-space: nowrap;
}

.director-table tbody tr:last-child td { border-bottom: 0; }
.director-table tbody tr:hover td { background: #f8fbf9; }
.director-queue-row--critical td:first-child { border-left: 4px solid var(--director-danger); }
.director-queue-row--high td:first-child { border-left: 4px solid #c56a13; }
.director-case-link { color: var(--director-green-700); font-weight: 700; white-space: nowrap; }

.director-cell-note {
  color: var(--director-muted);
  display: block;
  font-size: 0.76rem;
  line-height: 1.35;
  margin-top: 0.2rem;
}

.director-deadline { font-weight: 600; white-space: nowrap; }
.director-deadline--overdue,
.director-text-danger { color: var(--director-danger); font-weight: 700; }

.director-priority,
.ux-status,
.director-availability {
  border-radius: 999px;
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.18rem 0.52rem;
  white-space: nowrap;
}

.director-priority--critical,
.ux-status--overdue,
.ux-status--returned { background: #fee4e2; color: #9d251c; }
.director-priority--high,
.ux-status--near { background: #fff0d5; color: #8c4b06; }
.director-priority--medium,
.ux-status--pending { background: #f0e8f8; color: #6d3a93; }
.director-priority--normal,
.ux-status--checking { background: #e8f3ee; color: #176548; }
.director-priority--closed,
.ux-status--done { background: #e9f7ed; color: #18733a; }
.ux-status--new { background: #e8f3ee; color: #0d6d49; }

.director-workload-list {
  display: grid;
  gap: 0.7rem;
}

.director-workload-card {
  border-bottom: 1px solid var(--director-line);
  padding: 0 0 0.75rem;
}

.director-workload-card:last-child { border-bottom: 0; padding-bottom: 0; }
.director-workload-card header { align-items: flex-start; }
.director-workload-card header div { min-width: 0; }
.director-workload-card header strong,
.director-workload-card header span { display: block; }
.director-workload-card header div > span,
.director-workload-card p { color: var(--director-muted); font-size: 0.76rem; margin: 0.12rem 0 0; }
.director-availability--available { background: #e9f7ed; color: #18733a; }
.director-availability--leave,
.director-availability--unavailable { background: #fee4e2; color: #9d251c; }
.director-capacity-line { font-size: 0.8rem; margin-top: 0.55rem; }
.director-workload-card progress { accent-color: var(--director-green-500); display: block; height: 0.65rem; width: 100%; }
.director-workload-meta { color: var(--director-muted); font-size: 0.76rem; margin-top: 0.25rem; }

.director-empty {
  background: var(--director-canvas);
  border: 1px dashed #b9c8c0;
  border-radius: 0.6rem;
  color: var(--director-muted);
  padding: 2rem 1rem;
  text-align: center;
}

.director-empty strong { color: var(--director-green-900); display: block; }
.director-empty p { margin: 0.3rem 0 0; }
.director-empty--compact { padding: 1rem; }

.director-queue-tabs,
.director-case-tabs {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1rem;
  max-width: 100%;
  overflow-x: auto;
  padding: 0.15rem;
}

.director-queue-tab,
.director-case-tabs a {
  background: var(--director-surface);
  border: 1px solid var(--director-line);
  border-radius: 999px;
  color: var(--director-green-700);
  flex: 0 0 auto;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.45rem 0.8rem;
  text-decoration: none;
}

.director-queue-tab span { background: var(--director-canvas); border-radius: 999px; margin-left: 0.35rem; padding: 0 0.4rem; }
.director-queue-tab.is-active,
.director-case-tabs a:hover { background: var(--director-green-900); border-color: var(--director-green-900); color: #fff; text-decoration: none; }

.director-alert {
  border: 1px solid;
  border-radius: 0.55rem;
  margin-bottom: 0.75rem;
  padding: 0.7rem 0.85rem;
}

.director-alert--success { background: #edf9f0; border-color: #a9dfb8; color: #176b35; }
.director-alert--error { background: #fff0ef; border-color: #f1b8b4; color: #92231b; }

.director-case-header {
  align-items: flex-start;
  background: var(--director-surface);
  border: 1px solid var(--director-line);
  border-left: 6px solid var(--director-green-500);
  border-radius: 0.7rem;
  margin-bottom: 0.75rem;
  padding: 1rem;
  position: sticky;
  top: 0;
  z-index: 5;
}

.director-case-title { justify-content: flex-start; }
.director-case-context { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-end; }
.director-case-context > span:not(.director-priority) { background: var(--director-canvas); border-radius: 0.45rem; display: grid; font-size: 0.82rem; padding: 0.4rem 0.55rem; }
.director-case-context b { color: var(--director-muted); font-size: 0.7rem; font-weight: 600; }

.director-workspace-main { display: grid; gap: 1rem; min-width: 0; }
.director-workspace-main h3,
.director-action-rail h3 { margin-top: 0; }
.director-workspace-main h4 { color: var(--director-green-700); margin: 1rem 0 0.25rem; }
.director-case-summary { margin: 0; white-space: pre-line; }

.director-detail-list {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.director-detail-list div { background: var(--director-canvas); border-radius: 0.45rem; min-width: 0; padding: 0.6rem; }
.director-detail-list dt { color: var(--director-muted); font-size: 0.74rem; }
.director-detail-list dd { font-weight: 600; margin: 0.15rem 0 0; overflow-wrap: anywhere; }

.director-next-action {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 0.8rem;
}

.director-next-action div { border-left: 4px solid var(--director-gold); padding: 0.35rem 0.65rem; }
.director-next-action div:last-child { border-left-color: #c56a13; }
.director-next-action span,
.director-next-action strong { display: block; }
.director-next-action span { color: var(--director-muted); font-size: 0.74rem; }

.director-action-rail {
  align-self: start;
  position: sticky;
  top: 8.5rem;
}

.director-action-rail form > p { color: var(--director-muted); font-size: 0.8rem; }
.director-action-rail fieldset { border: 0; margin: 0 0 0.8rem; padding: 0; }
.director-action-rail legend { margin-bottom: 0.45rem; padding: 0; }
.director-action-rail label:not(.director-candidate) { display: grid; font-weight: 600; gap: 0.25rem; margin-top: 0.7rem; }
.director-action-rail input[type="date"],
.director-action-rail textarea { width: 100%; }
.director-submit { margin-top: 0.8rem; width: 100%; }

.director-candidates { display: grid; gap: 0.45rem; }
.director-candidate { align-items: flex-start; background: var(--director-canvas); border: 1px solid var(--director-line); border-radius: 0.5rem; cursor: pointer; display: flex; gap: 0.55rem; padding: 0.65rem; }
.director-candidate:has(input:checked) { background: #edf7f2; border-color: var(--director-green-500); box-shadow: inset 0 0 0 1px var(--director-green-500); }
.director-candidate.is-recommended { border-color: #ba951e; }
.director-candidate.is-disabled { cursor: not-allowed; opacity: 0.62; }
.director-candidate input { flex: 0 0 auto; margin-top: 0.25rem; }
.director-candidate__main,
.director-candidate__name { display: block; min-width: 0; }
.director-candidate__name { color: var(--director-green-900); font-weight: 700; }
.director-candidate__name em { background: #fff3c2; border-radius: 999px; color: #745a00; font-size: 0.68rem; font-style: normal; margin-left: 0.35rem; padding: 0.12rem 0.4rem; }
.director-candidate__main > span:not(.director-candidate__name),
.director-candidate__main small { color: var(--director-muted); display: block; font-size: 0.74rem; line-height: 1.35; }

.director-timeline { border-left: 3px solid var(--director-green-500); list-style: none; margin: 0; padding: 0; }
.director-timeline li { padding: 0 0 0.9rem 1rem; position: relative; }
.director-timeline li::before { background: var(--director-gold); border: 2px solid var(--director-green-700); border-radius: 50%; content: ""; height: 0.65rem; left: -0.43rem; position: absolute; top: 0.25rem; width: 0.65rem; }
.director-timeline time,
.director-timeline span { color: var(--director-muted); display: block; font-size: 0.76rem; }
.director-timeline p { margin: 0.15rem 0 0; }

@media (max-width: 1080px) {
  .director-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .director-dashboard-grid,
  .director-workspace-grid { grid-template-columns: 1fr; }
  .director-action-rail { position: static; }
  .director-workload-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .director-page-head,
  .director-case-header { align-items: stretch; flex-direction: column; }
  .director-case-header { position: static; }
  .director-case-context { justify-content: flex-start; }
  .director-metrics,
  .director-workload-list,
  .director-detail-list,
  .director-next-action { grid-template-columns: 1fr; }
  .director-metric { min-height: 112px; }
  .director-table { min-width: 0; }
  .director-table thead { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  .director-table,
  .director-table tbody,
  .director-table tr,
  .director-table td { display: block; width: 100%; }
  .director-table tr { border-bottom: 1px solid var(--director-line); padding: 0.55rem; }
  .director-table td { border: 0; display: grid; gap: 0.4rem; grid-template-columns: minmax(95px, 0.35fr) minmax(0, 1fr); padding: 0.32rem; }
  .director-table td::before { color: var(--director-muted); content: attr(data-label); font-size: 0.74rem; font-weight: 600; }
  .director-queue-row--critical td:first-child,
  .director-queue-row--high td:first-child { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .director-metric { transition: none; }
  .director-metric:hover { transform: none; }
}

.director-election-cards,
.director-status-cards {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin: 0 0 1rem;
}
.director-status-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.director-election-card,
.director-status-card {
  background: var(--director-surface);
  border: 1px solid var(--director-line);
  border-radius: 0.6rem;
  color: inherit;
  min-height: 72px;
  padding: 0.7rem;
  text-decoration: none;
}
.director-status-card strong { display: block; font-size: 1.45rem; }
.director-integration { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--director-line); }
@media (max-width: 1024px) {
  .director-election-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .director-status-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .director-election-cards,
  .director-status-cards { grid-template-columns: 1fr 1fr; }
}