/* ── Reset / Base ────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
*:focus-visible {
  outline: 2px solid var(--safe-teal);
  outline-offset: 2px;
}
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  background: #fff;
  color: #111827;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
  font-family: inherit;
}

/* ── Blazor error UI ────────────────────────────────────────────────────── */
#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

/* ── Loading progress ───────────────────────────────────────────────────── */
.loading-progress {
  position: absolute;
  display: block;
  width: 8rem;
  height: 8rem;
  inset: 20vh 0 auto 0;
  margin: 0 auto;
}
.loading-progress circle {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.loading-progress circle:last-child {
  stroke: #0f766e;
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8) 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: 600;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text::after {
  content: var(--blazor-load-percentage-text, "Loading");
}

/* ── Page states ────────────────────────────────────────────────────────── */
.page-loading {
  padding: 3rem;
  text-align: center;
  color: #6b7280;
}
.page-error {
  padding: 2rem;
  color: #dc2626;
  background: #fef2f2;
  border-radius: 8px;
  margin: 1rem;
}

/* ── CSS custom properties ───────────────────────────────────────────────── */
:root {
  --safe-teal: #428183;
  --safe-teal-hover: #2f6264;
  --safe-teal-light: #e6f2f2;
  --nav-height: 52px;
}

/* ── Navigation bar (US 927305) ─────────────────────────────────────────── */
/* White bar, sticky, 1px bottom border — matches all wireframes exactly     */

.safe-nav {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 1200;
  height: var(--nav-height);
}

.safe-nav__inner {
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.safe-nav__logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.safe-nav__logo-light {
  font-weight: 300;
  color: #6b7280;
}
.safe-nav__logo-sep {
  color: #d1d5db;
  margin-left: 0.35rem;
  font-weight: 300;
}

/* Left side: logo + nav */
.safe-nav__left {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Horizontal nav items */
.safe-nav__menu {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Each dropdown wrapper */
.safe-nav__item {
  position: relative;
}

/* Trigger button */
.safe-nav__trigger {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0.3rem 0.1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
}
.safe-nav__trigger:hover {
  color: #161616;
}
.safe-nav__trigger--active {
  color: #161616;
  font-weight: 600;
}

/* Chevron icon */
.safe-nav__chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.safe-nav__chevron--up {
  transform: rotate(180deg);
}

/* Dropdown panel */
.safe-nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 300;
  animation: nav-fade-in 0.12s ease;
}
.safe-nav__item.safe-nav__item--open .safe-nav__trigger {
  font-weight: 700;
}

@keyframes nav-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown items */
.safe-nav__dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition:
    background 0.12s,
    color 0.12s;
  cursor: pointer;
}
.safe-nav__dropdown-item svg {
  width: 16px;
  height: 16px;
  color: #888;
  flex-shrink: 0;
  transition: color 0.12s;
}
.safe-nav__dropdown-sub {
  display: block;
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 400;
}
.safe-nav__dropdown-item:hover {
  color: #000;
}
.safe-nav__dropdown-item:hover svg {
  color: #000;
}
.safe-nav__dropdown-item--active {
  color: #fff;
  background: var(--safe-teal);
  font-weight: 600;
}
.safe-nav__dropdown-item--active svg {
  color: #fff;
}
.safe-nav__dropdown-item--active:hover {
  color: #fff;
  background: var(--safe-teal);
  font-weight: 600;
}
.safe-nav__dropdown-item--active:hover svg {
  color: #fff;
}

/* User avatar circle */
.safe-nav__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--safe-teal);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.03em;
  cursor: pointer; /* US 960481: clickable to open profile dropdown */
  flex-shrink: 0;
  border: none;
  transition: box-shadow 0.15s;
}
.safe-nav__avatar:hover {
  box-shadow: 0 0 0 3px var(--safe-teal-light);
}

/* US 960481 — Profile icon wrapper */
.safe-nav__profile {
  position: relative;
}

/* US 960481 AC-02 — Profile dropdown panel */
.safe-nav__profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.5rem 0;
  z-index: 300;
  animation: nav-fade-in 0.12s ease;
}
.safe-nav__profile-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}
.safe-nav__profile-avatar-lg {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--safe-teal);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.safe-nav__profile-details {
  min-width: 0;
}
.safe-nav__profile-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.safe-nav__profile-email {
  font-size: 0.78rem;
  color: #6b7280;
  margin: 0.1rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.safe-nav__profile-divider {
  border-top: 1px solid #f0f0f0;
  margin: 0.375rem 0;
}
.safe-nav__dropdown-item--signout {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  color: #dc2626;
}
.safe-nav__dropdown-item--signout:hover {
  background: #fef2f2;
  color: #b91c1c;
}
.safe-nav__dropdown-item--signout svg {
  color: #dc2626;
}

/* ── Issue 51: Impersonation UI ─────────────────────────────────────────── */
/* View-as section inside the profile dropdown */
.safe-nav__view-as-section {
  padding: 0.5rem 1rem 0.25rem;
}
.safe-nav__view-as-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.safe-nav__view-as-active {
  font-size: 0.8rem;
  color: #92400e;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.safe-nav__impersonating-badge {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.15rem 0.45rem;
  background: #fef3c7;
  color: #92400e;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
}
/* Wider dropdown to accommodate the user list */
.safe-nav__profile--open .safe-nav__profile-dropdown {
  min-width: 280px;
}

/* Persistent impersonation banner — sticky amber bar at top of every page */
.impersonation-banner,
.conflict-banner {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: #fef3c7;
  color: #92400e;
  padding: 0.45rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-bottom: 1px solid #fde68a;
}
.conflict-banner.conflict-banner--warning {
  background: #fef3c7;
  color: #92400e;
  border-bottom: 1px solid #fde68a;
}
.conflict-banner.conflict-banner--warning span.conflict-banner__icon {
  line-height: 1;
}
.impersonation-banner__exit {
  margin-left: auto;
  background: transparent;
  border: 1px solid #d97706;
  color: #92400e;
  border-radius: 4px;
  padding: 0.2rem 0.65rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.15s;
}
.impersonation-banner__exit:hover {
  background: #fde68a;
}

/* Click-outside overlay */
.safe-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
}

/* Ensure page content starts below navbar */
main {
  min-height: calc(100vh - var(--nav-height));
  background: #f9fafb;
}

/* ── Page header ────────────────────────────────────────────────────────── */
.page-header {
  min-height: 114px;
  background: #2b7a7b;
  color: #fff;
  padding: 1.5rem 2rem;
  position: sticky;
  top: 52px;
  z-index: 1;
}
.page-header__inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.page-header__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.page-header__h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.page-header__deadline {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}
.page-header__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Info row — sits below the breadcrumb; contains deadlines, owner, review status */
.page-header__info-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.page-header__info-row .badge {
  padding: 4px 8px;
  border-radius: 14px;
}
/* Deadline fields — side by side on the left; flex: 1 removed so it does not
   consume all remaining space and allows margin-left: auto on owner to work */
.page-header__deadlines {
  display: flex;
  gap: 2rem;
}
/* Overdue count indicator inline with header deadlines (Issue 4 V22) */
.page-header__overdue-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
/* Review Status label + badge — sits after the deadline fields */
.page-header__status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.page-header__status-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.page-header__status .badge {
  margin-left: 0.75rem;
  padding: 4px 6px;
  border-radius: 14px;
}
/* Control Owner / Domain Owner — pushed to the far right of the info row */
.page-header__owner {
  display: flex;
  font-size: 0.875rem;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.page-header__owner-name {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.page-header__owner-info {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}
.page-header__owner-info .co-hero__owner-label {
  font-size: 0.75rem;
}
.page-header__owner-info .co-hero__owner-label,
.page-header__owner-info .co-hero__owner-name {
  margin: 0;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  line-height: 100%;
  color: #fff;
}
.breadcrumb * {
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
  line-height: initial;
  max-width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumb__link {
  color: #fff;
}
.breadcrumb__link:hover {
  color: #c1eeef;
}
.breadcrumb__sep {
  color: #fff;
  margin: -5px 10px 0;
}
/* Static section label ("Survey") at the start of the breadcrumb row */
.breadcrumb__section-label {
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  line-height: 100%;
}
/* Completion badge inline with breadcrumb — extra left spacing to separate from domain name */
.breadcrumb__completion-badge {
  margin-left: 0.75rem;
}
/* Survey status badge inline with breadcrumb — extra left spacing to separate from cycle name */
.breadcrumb .breadcrumb__status-badge,
.breadcrumb .breadcrumb__completion-badge {
  margin-left: 0.75rem;
  padding: 4px 8px;
  border-radius: 14px;
}
.breadcrumb .survey-not-finalized-badge {
  margin: 0 0 0 0.35rem;
}

.breadcrumb__status-badge i {
  font-weight: inherit;
  overflow: initial;
  margin: 0 0.25rem 0 0;
  font-size: inherit;
}

/* ── Open / Closed badges ───────────────────────────────────────────────── */
.open-badge {
  background: #dcfce7;
  color: #166534;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.closed-badge {
  background: #fee2e2;
  color: #991b1b;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.paused-badge {
  background: #fef3c7;
  color: #92400e;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.status-badge-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.status-badge__icon {
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
}

/* ── Main container ─────────────────────────────────────────────────────── */
.page-main {
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem;
}

/* ── Summary grid ───────────────────────────────────────────────────────── */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.summary-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.summary-card {
  background: #fff;
  border-radius: 0;
  border: 1px solid #fff;
  padding: 0.9rem 1rem;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0px 1.6px 3.6px 0px #00000021;
}
.summary-card--ring {
  min-height: 120px;
  justify-content: center;
  align-items: center;
  position: relative;
}
.summary-card__survey-title {
  text-align: left;
  width: 100%;
  font-weight: 600;
  font-size: 0.938rem;
  line-height: 100%;
  margin: 0 0 10px;
}
.summary-card--metric {
  min-height: 120px;
  justify-content: center;
  align-items: center;
  position: relative;
}
.summary-card__label {
  font-size: 1rem;
  color: #333;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.summary-card__value {
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 600;
  color: #333;
}

/* ── Controls header ────────────────────────────────────────────────────── */
.controls-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.summary-card--difference.summary-card--behind .summary-card__value {
  color: #b91c1c;
}
.summary-card--difference.summary-card--ahead .summary-card__value {
  color: #15803d;
}
.summary-card__delta-badge {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.06rem 0.35rem;
  border-radius: 3px;
  background: #fee2e2;
  color: #b91c1c;
}

.summary-card--difference.summary-card--ahead .summary-card__delta-badge {
  background: #dcfce7;
  color: #166534;
}

.summary-card--difference.summary-card--neutral .summary-card__delta-badge {
  background: #e5e7eb;
  color: #4b5563;
}
.controls-header__title {
  font-size: 1.5rem;
  color: #333;
  font-weight: 400;
}
.controls-header__filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-select {
  padding: 0.35rem 0.65rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-size: 0.8rem;
  color: #374151;
  cursor: pointer;
}
.filter-select:focus {
  outline: 2px solid #0f766e;
  outline-offset: 1px;
}

/* ── Card grid ──────────────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Domain / Control card ──────────────────────────────────────────────── */
.domain-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition:
    box-shadow 0.15s,
    transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.domain-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.domain-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.domain-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111827;
}
.control-code {
  font-size: 0.72rem;
  color: #6b7280;
  font-weight: 600;
  margin-right: 0.4rem;
}

.domain-card__scores {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.domain-card__score-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: center;
}
.domain-card__score-label {
  font-size: 0.7rem;
  color: #9ca3af;
}
.domain-card__score-value {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}
.domain-card__name-row {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.domain-card__name-row .domain-card__name {
  max-width: calc(100% - 3.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.domain-card__name-row .badge {
  padding: 4px 8px;
  border-radius: 14px;
}
.domain-card__footer {
  display: flex;
  gap: 0.5rem;
  border-top: 1px solid #f3f4f6;
  font-size: 0.8rem;
  color: #6b7280;
  justify-content: space-between;
  padding-top: 0.625rem;
  align-items: flex-end;
}
.domain-card__footer .badge {
  padding: 0.15rem 0.5rem;
  border-radius: 14px;
}
.domain-card__footer .domain-card__owner .co-hero__avatar {
  background: var(--safe-teal);
  width: 23px;
  height: 23px;
}

.owner-name {
  font-size: 0.8rem;
  color: #6b7280;
}

/* ── Score colors ───────────────────────────────────────────────────────── */
.score--positive {
  color: #16a34a;
}
.score--negative {
  color: #dc2626;
}

/* ── User avatar ────────────────────────────────────────────────────────── */
.user-avatar {
  border-radius: 50%;
  background: #e0f2f1;
  color: #0f766e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-avatar--sm {
  width: 24px;
  height: 24px;
}
.user-avatar svg {
  width: 14px;
  height: 14px;
}
.user-avatar--md {
  width: 32px;
  height: 32px;
}
.user-avatar--md svg {
  width: 18px;
  height: 18px;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 400;
}
.badge--ahead {
  background: #dcfce7;
  color: #166534;
}
.badge--behind {
  background: #fee2e2;
  color: #991b1b;
}
.badge--neutral {
  background: #f3f4f6;
  color: #6b7280;
}
.badge--na {
  background: #f3f4f6;
  color: #6b7280;
}
.badge--grey {
  background: #f3f4f6;
  color: #6b7280;
}
.badge--green {
  background: #dcfce7;
  color: #166534;
}
.badge--blue {
  background: #dbeafe;
  color: #1e40af;
}
.badge--yellow {
  background: #fef9c3;
  color: #854d0e;
}
/* US 912660 — cycle status badges */
.badge--open {
  background: #d1fae5;
  color: #065f46;
  border-radius: 4px;
  padding: 3px 8px;
}
.badge--warning {
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  padding: 3px 8px;
}

.badge--closed {
  background: #a5d6d7;
  color: #0f4f51;
}
.badge--paused {
  background: #fef3c7;
  color: #92400e;
}

/* ── US 931220 — score diff coloring (Overachievement/Underachievement) ─── */
.score--positive {
  color: #16a34a;
  font-weight: 600;
}
.score--negative {
  color: #dc2626;
  font-weight: 600;
}

/* ── Status badges ──────────────────────────────────────────────────────── */
.status-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1.5px solid;
}
.status-badge--completed {
  border-color: #16a34a;
  color: #16a34a;
  background: #f0fdf4;
}
.status-badge--inprogress {
  border-color: #d97706;
  color: #d97706;
  background: #fffbeb;
}
.status-badge--notstarted {
  border-color: #d1d5db;
  color: #6b7280;
  background: #f9fafb;
}

/* ── Performance tag ────────────────────────────────────────────────────── */
.perf-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.perf-tag--ontrack {
  background: #e0f2fe;
  color: #0369a1;
}
.perf-tag--atrisk {
  background: #fee2e2;
  color: #991b1b;
}
.perf-tag--neutral {
  background: #f3f4f6;
  color: #6b7280;
}

/* ── DiffIndicator ──────────────────────────────────────────────────────── */
.diff-indicator {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.diff-indicator--small {
  width: 10px;
  height: 10px;
}
.diff-indicator--green {
  background: #16a34a;
}
.diff-indicator--red {
  background: #dc2626;
}
.diff-indicator--gray {
  background: #d1d5db;
}

/* ── Control detail layout ──────────────────────────────────────────────── */
.control-detail-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 56px - 60px - 64px);
}
.control-detail-layout .control-detail-main .form-field {
  align-items: flex-start;
}
.control-detail-left,
.control-detail-main {
  flex: 3;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 80px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.control-detail-main .summary-bar {
  padding: 0.75rem 0;
  top: -21px;
}
.control-detail-sidebar {
  flex: 1;
  min-width: 280px;
  max-width: 360px;
  border-left: 1px solid #e5e7eb;
  overflow: hidden;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: #f6f6f6;
}
.control-detail-sidebar .sidebar-contributors-header {
  color: #37808a;
  font-size: 0.9rem;
  font-weight: 700;
}
.control-detail-main
  .control-info-section
  .control-info-field
  .control-info-field__label {
  font-size: 1rem;
  color: #333;
  font-weight: 600;
}
.control-detail-main
  .control-info-section
  .control-info-field
  .control-info-field__value {
  font-size: 0.875rem;
  color: #333;
}
.control-detail-main
  .control-info-section
  .control-info-field
  .control-info-field__label:first-child {
  margin: 0;
}
.control-detail-main .control-info-section .form-field {
  margin: 0 0 20px;
}
.control-detail-main .control-info-section .form-field:last-child {
  margin: 0;
}
.control-detail-main .control-info-section .form-field .form-label {
  font-size: 0.875rem;
  color: #333;
  font-weight: 600;
}
.control-detail-main .dimension-card {
  background: #f6f6f6;
  border: none;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-radius: 0;
}
.control-detail-main .dimension-card__scores .dimension-score {
  font-size: 0.875rem;
  color: #818181;
  padding: 0.875rem 2.18rem;
}
.control-detail-main .dimension-card__scores .dimension-score.score--negative {
  color: #610000;
  background: #fcdada;
}
.control-detail-main .dimension-card__scores .dimension-score.score--positive {
  color: #68ad00;
  background: #f0fcdf;
}

/* ── Control detail sections ────────────────────────────────────────────── */
.control-description {
  color: #374151;
  line-height: 1.6;
}
.status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.methods-section__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #374151;
  margin: 0 0 0.5rem;
}
.methods-list {
  margin: 0;
  padding-left: 1.25rem;
  color: #4b5563;
  line-height: 1.7;
}

/* ── Summary bar (US 927078) ────────────────────────────────────────────── */
.summary-bar {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 166px;
  background: #fff;
  z-index: 1;
}
.summary-bar__item {
  flex: 1;
  text-align: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  width: 264px;
  height: 107px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  position: relative;
}
.summary-bar__item .badge {
  padding: 0.25rem 0.5rem;
  border-radius: 0;
  position: absolute;
  top: 10px;
  right: 10px;
}

.summary-bar__item--ring .summary-bar__label {
  text-align: left;
  font-weight: 700;
  color: #242424;
}

.summary-bar__label {
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.summary-bar__value {
  font-size: 2rem;
  font-weight: 600;
  color: #111827;
}
.summary-bar__value .badge.badge--na {
  font-size: 2rem;
  font-weight: 600;
  color: #111827;
}
.summary-bar__value.score--positive {
  color: #16a34a;
}
.summary-bar__value.score--negative {
  color: #dc2626;
}

/* ── Dimension cards (US 914012) ────────────────────────────────────────── */
.dimension-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.dimension-card--inactive {
  opacity: 0.6;
}
/* US 961638: Apply-Off question card — dimmed with warning tint */
.dimension-card--apply-off {
  opacity: 0.75;
  background: #fffbeb;
  border-color: #f59e0b;
}
.dimension-card__apply-off-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #92400e;
  background: #fef3c7;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
}
.dimension-card__apply-off-alert .icon--warning {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: #d97706;
}
.dimension-card__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.dimension-card__level {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: #7fb2b3;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}
.dimension-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111827;
  flex: 1;
}
.dimension-card__scores {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.dimension-score {
  font-size: 0.8rem;
  color: #6b7280;
}
.dimension-score strong {
  color: #111827;
}
.dimension-score.score--positive strong {
  color: #16a34a;
}
.dimension-score.score--negative strong {
  color: #dc2626;
}
.dimension-card__input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.dimension-card__input .dimension-card__values {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.dimension-card__notes {
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid #d1d5db;
  resize: vertical;
}
.dimension-card__notes-ro {
  font-size: 0.82rem;
  color: #6b7280;
  font-style: italic;
  margin: 0;
}
.dimension-card__selected-answer {
  font-size: 0.85rem;
  color: #374151;
  margin: 0.25rem 0 0;
}

/* ── Qualitative status section ─────────────────────────────────────────── */
.qualitative-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.qualitative-section__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.qualitative-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  width: fit-content;
}
.qualitative-badge--ontrack {
  background: #dcfce7;
  color: #166534;
}
.qualitative-badge--atrisk {
  background: #fef2f2;
  color: #991b1b;
}
.qualitative-mitigation__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.75rem 0 0.2rem;
}
.qualitative-mitigation {
  font-size: 0.83rem;
  color: #333;
  margin: 0;
  border-left: 3px solid #e5e7eb;
  padding-left: 0.75rem;
}

/* ── Control detail footer ───────────────────────────────────────────────── */

.questions-section__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.75rem;
}

.question-row {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.question-row__text {
  font-size: 0.9rem;
  color: #111827;
  font-weight: 500;
}
.question-row__num {
  color: #6b7280;
  font-size: 0.8rem;
  margin-right: 0.4rem;
}
.question-row__scores {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: #6b7280;
  flex-wrap: wrap;
}
.question-select,
.question-notes {
  padding: 0.4rem 0.65rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #374151;
  background: #fff;
  width: 100%;
}
.question-select:focus,
.question-notes:focus {
  outline: 2px solid #0f766e;
  outline-offset: 1px;
}

/* ── Sidebar tabs ───────────────────────────────────────────────────────── */
.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.sidebar-tab {
  flex: 1;
  padding: 0.6rem;
  background: none;
  border: none;
  font-size: 0.8rem;
  color: #333;
  font-weight: 700;
  transition: color 0.15s;
}
.sidebar-tab--active {
  border-bottom: 3px solid #333;
}
.comment-thread .comment-input-area .btn {
  width: 100px;
  position: relative;
  right: 0;
  left: calc(100% - 100px);
  justify-content: center;
}
.control-detail-sidebar
  .review-decision-section
  .review-decision-section__title {
  font-size: 1rem;
  color: #333;
}
.control-detail-sidebar
  .review-decision-section
  .review-decision-section__buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin: 1rem 0 0;
  gap: 1rem;
}
.review-history__empty {
  font-size: 0.9rem;
  color: #333;
}

/* ── Contributors ───────────────────────────────────────────────────────── */
.contributors-section__title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #374151;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.contributor-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  padding: 0.25rem 0;
}

/* ── Comments ───────────────────────────────────────────────────────────── */
.comments-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.comment {
  background: #fff;
  border-radius: 0;
  padding: 0.75rem;
  border: 1px solid #d9d9d9;
  gap: 1rem;
  display: flex;
  flex-direction: column;
}
.comment__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.comment__author,
.comment__wrote-on,
.comment__date {
  font-weight: 600;
  font-size: 0.82rem;
  color: #37808a;
}
.comment__text {
  font-size: 0.85rem;
  color: #333;
  padding: 0 0.7rem;
}

.comment-input-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}
.comment-textarea {
  width: 100%;
  min-height: 72px;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  font-size: 0.85rem;
  resize: vertical;
  font-family: inherit;
}
.comment-textarea:focus-visible {
  outline: 0;
  outline-offset: 0;
}
/* .comment-thread wraps both .comments-section and .comment-input-area.
   It is flex:1 so it fills remaining sidebar height after .sidebar-tabs.
   overflow:hidden + flex-direction:column lets the inner .comments-section
   scroll independently while .comment-input-area stays pinned at the bottom. */
.comment-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* required: flex children won't scroll without this */
  overflow: hidden;
  gap: 1rem;
}
.comment-thread .comments-section {
  color: #333;
  font-size: 0.9rem;
}
.comment {
  background: #f9fafb;
  border-radius: 8px;
  padding: 0.75rem;
}
.comment__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.comment__author {
  font-weight: 600;
  font-size: 0.82rem;
}
/* Control History tab scroll wrapper — mirrors .comments-section pattern */
.history-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 0.5rem;
}

/* Ticket 1017114 (Option A): Previous Survey read-only reference block */
.previous-survey-reference {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #d1d5db;
}
.previous-survey-reference__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.previous-survey-reference__badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 0.15rem 0.5rem;
}
.previous-survey-reference__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #4b5563;
}
.comment__date {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-left: auto;
}
.comment__text {
  font-size: 0.85rem;
  color: #374151;
}

.comments-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto; /* only the comments list scrolls */
  flex: 1; /* fills available space inside .comment-thread */
  min-height: 0; /* required for flex children to scroll correctly */
}
.comment-input-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
  flex-shrink: 0; /* never compressed — always fully visible */
}

/* ── History ────────────────────────────────────────────────────────────── */
.history-empty {
  color: #333;
  font-size: 0.85rem;
  padding: 0.5rem 0;
}
.history-entry {
  border-bottom: 1px solid #f3f4f6;
  padding: 0.6rem 0;
}
.history-entry__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
}
.history-entry__date {
  color: #9ca3af;
  font-weight: 400;
}
.history-entry__scores {
  font-size: 0.9rem;
  color: #374151;
  margin: 0.2rem 0;
}
.history-entry__reason {
  font-size: 0.8rem;
  color: #6b7280;
  font-style: italic;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.control-detail-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 0.75rem 1.5rem;
  display: flex;
  gap: 0.75rem;
  z-index: 50;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
  background: #0f766e;
  color: #fff;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s;
}
.btn-primary:hover:not(:disabled) {
  background: #0d6760;
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-submit {
  background: #439396;
  color: #fff;
  border: none;
  padding: 0.4rem 1rem;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s;
  align-self: flex-end;
}
.btn-submit:hover:not(:disabled) {
  background: #357a7c;
}
.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-outline {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 0.4rem 0.9rem;
  border-radius: 7px;
  font-size: 0.85rem;
  transition: background 0.15s;
}
.btn-outline:hover:not(:disabled) {
  background: #f9fafb;
}
.btn-outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .control-detail-layout {
    flex-direction: column;
    height: auto;
  }
  .control-detail-main {
    min-width: 0;
  }
  .control-detail-sidebar {
    min-width: 0;
    max-width: 100%;
    border-left: none;
    border-top: 1px solid #e5e7eb;
  }
}

/* ── Shared form elements ────────────────────────────────────────────────── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.form-label {
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 500;
}
.form-label--required::after {
  content: " *";
  color: var(--safe-teal);
}
.form-input--error {
  border-color: #dc2626 !important;
}
.form-input--readonly {
  background: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
}
.form-field__error {
  font-size: 0.78rem;
  color: #dc2626;
  margin-top: 0.25rem;
}

/* Read-only banner for non-Draft surveys (US 946528 AC-05) */
.form-readonly-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: #92400e;
  margin-bottom: 1.5rem;
}
.form-readonly-banner svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #d97706;
}
.form-textarea {
  resize: vertical;
  min-height: 80px;
}
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--safe-teal);
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
}
.form-input {
  border: 1px solid #a6a6a6;
  padding: 0.55rem 0.85rem;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  background: #fff;
  width: 100%;
}
.form-input:disabled {
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}
.form-error {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 0.85rem;
  border: 1px solid transparent;
  position: fixed;
  bottom: 1rem;
  line-height: 100%;
  right: 1rem;
  z-index: 999;
  border-radius: 4px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
}

.select-wrapper {
  position: relative;
}
.select-wrapper select,
.form-select {
  appearance: none;
  width: 100%;
  border: 1px solid #a6a6a6;
  padding: 0.55rem 2.25rem 0.55rem 0.85rem;
  font-size: 0.875rem;
  font-family: inherit;
  background: #fff;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.form-select:focus {
  border-color: var(--safe-teal);
  box-shadow: 0 0 0 3px rgba(66, 129, 131, 0.12);
}
.select-wrapper select option:hover,
.form-select option:hover,
.select-wrapper select option:focus,
.form-select option:focus {
  background: #428183;
  color: #fff;
}
.select-chevron {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #6b7280;
  pointer-events: none;
}
.select-wrapper--sm .form-select,
.form-select--sm {
  padding: 0.35rem 2rem 0.35rem 0.65rem;
  font-size: 0.8rem;
}
/* ── Alert banner ──────────────────────────────────────────────────────── */
.alert {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 0.85rem;
  border: 1px solid transparent;
  position: fixed;
  bottom: 1rem;
  line-height: 100%;
  right: 1rem;
  z-index: 999;
  border-radius: 4px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.alert.alert-inline {
  position: initial;
  border-radius: 0;
}
.alert .alert__body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
}
.alert .alert__icon svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

.alert--warning {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.alert--info {
  background: #e0f2fe;
  color: #075985;
  border-color: #bae6fd;
}
.alert--success {
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}
.alert--error {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}
.alert__dismiss {
  border: none;
  background: transparent;
  font-size: inherit;
  padding: 0;
  color: inherit;
  font-weight: 700;
  line-height: 100%;
}
/* ── Shared buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--safe-teal);
  color: #fff;
  border-color: var(--safe-teal);
}
.btn--primary:hover:not(:disabled) {
  background: var(--safe-teal-hover);
  border-color: var(--safe-teal-hover);
}
.btn--primary:hover:not(:disabled) {
  background: var(--safe-teal-hover);
  border-color: var(--safe-teal-hover);
}
/* Issue 11 V36: disabled primary button uses grey instead of faded teal — always clearly visible */
.btn--primary:disabled {
  opacity: 1;
  background: #9ca3af;
  border-color: #9ca3af;
  color: #fff;
  cursor: not-allowed;
}

.btn--outline {
  background: transparent;
  color: var(--safe-teal);
  border-color: var(--safe-teal);
}
.btn--outline:hover:not(:disabled) {
  background: var(--safe-teal-light);
}

.btn--secondary {
  background: #e5e7eb;
  color: #374151;
  border-color: #e5e7eb;
}
.btn--secondary:hover:not(:disabled) {
  background: #d1d5db;
}

.btn--danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.btn--danger:hover:not(:disabled) {
  background: #b91c1c;
}

/* ── Shared modal ────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  z-index: 1400;
}
.modal-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  width: 100%;
  max-width: 520px;
  z-index: 1401;
  overflow: hidden;
}
.modal-box--wide {
  max-width: 660px;
}

/* ── US 946472 AC-07: Pre-open validation modal — informational (neutral blue-grey) ── */
.modal-box--info {
  max-width: 600px;
  /* DF-429: bound to viewport so the CTA and Close button are always accessible */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 4rem);
  overflow: hidden;
}
.modal-box--info .modal-box__body {
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* min-height:0 required for flex+overflow to work correctly */
}
.modal-box__header--info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--safe-teal);
  border-radius: 10px 10px 0 0;
}
.modal-box__header--info .modal-box__title {
  font-size: 1.15rem;
  flex: 1;
}
.modal-box__header--info .modal-box__subtitle {
  margin: 0.35rem 0;
  font-size: 0.875rem;
  color: #333;
}
.modal-box__info-icon {
  font-size: 1.35rem;
  color: var(--safe-teal);
  flex-shrink: 0;
  background: #fff;
  padding: 4px;
  height: 24px;
  width: 24px;
  text-align: center;
  line-height: 1.35rem;
  border-radius: 100%;
}

/* Each validation section (domains / controls without owner / controls in review) */
.assignments-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}
.assignments-section:first-of-type {
  border-top: none;
  margin-top: 0.5rem;
  padding-top: 0;
}
.assignments-section__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}
.assignments-section__list {
  max-height: 160px;
  overflow-y: auto;
  padding: 1rem 2rem;
  margin: 0;
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.7;
  border: 1px solid #ececec;
}

.modal-box__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem 2rem 1.25rem;
}
.modal-box__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.modal-box__close {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.25rem;
  border-radius: 4px;
  transition: color 0.15s;
}
.modal-box__close svg {
  width: 22px;
  height: 22px;
}
.modal-box__close:hover {
  color: #374151;
}

.modal-box__body {
  padding: 0 2rem 2rem;
}
.modal-box__body .form-field.search-filter {
  margin: 0 0 1.5rem;
}
.modal-box__body .form-grid.data-user-form {
  margin: 0 0 1.5rem;
}
.modal-box__message {
  font-size: 1rem;
  color: #374151;
  line-height: 1.6;
}
.modal-box__error {
  font-size: 0.875rem;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  margin-top: 0.75rem;
}

/* Force Close — structured blocking items list (AC-02) */
.force-close-blocking {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  margin: 0.75rem 0 0.25rem;
  max-height: 14rem;
  overflow-y: auto;
}
.force-close-blocking__heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: #92400e;
  margin: 0 0 0.6rem;
}
.force-close-blocking__icon {
  font-size: 1rem;
  line-height: 1;
}
.force-close-blocking__group-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  margin: 0.5rem 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.force-close-blocking__list {
  list-style: none;
  margin: 0 0 0.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.force-close-blocking__list li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: #374151;
}
.force-close-blocking__bullet {
  color: #92400e;
  flex-shrink: 0;
}
.force-close-blocking__status {
  font-weight: 500;
  color: #b45309;
}

.modal-box__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0 2rem 2rem;
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast {
  padding: 1rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  position: fixed;
  font-weight: 500;
  bottom: 1.5rem;
  right: 1.5rem;
  max-width: 40%;
  width: 100%;
  z-index: 9999;
}
.toast--success {
  background: #00262b;
  color: #fff;
}
.toast--error {
  background: #780101;
  color: #fff;
}
/* ── Users page layout ───────────────────────────────────────────────────── */
.users-page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}
.users-page__page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.users-page__page-title h1 {
  margin: 0;
  font-size: 2rem;
}
.users-page__page-title h1:focus-visible {
  outline: none;
}
.users-page__content {
  display: flex;
  gap: 3rem;
}

.users-page__sidebar {
  width: 160px;
  flex-shrink: 0;
}

.sidebar-link {
  display: block;
  font-size: 0.875rem;
  padding: 0.25rem 0;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.15s;
}
.sidebar-link + .sidebar-link {
  margin-top: 1rem;
}
.sidebar-link--active {
  color: #111827;
  font-weight: 700;
}
.sidebar-link--muted:hover {
  color: #6b7280;
}

.users-page__main {
  flex: 1;
  min-width: 0;
}
.users-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
/* DF-406: .users-page__heading kept for the Users tab sub-heading but hidden on Roles
   via the dual-heading removal in Roles.razor */
.users-page__heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.users-page__actions {
  display: flex;
  gap: 0.75rem;
}

.users-page__filters {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.users-page__filters .search-wrapper {
  flex: 1;
  min-width: 200px;
}
.users-page__filters .select-wrapper {
  min-width: 180px;
}

.search-wrapper {
  position: relative;
}
.search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #9ca3af;
  pointer-events: none;
}
.search-input {
  padding-left: 2.25rem !important;
}

/* ── Data table ──────────────────────────────────────────────────────────── */
.table-wrapper {
  overflow-y: visible;
  border: 1px solid #f0f0f0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.data-table thead tr {
  background: #f2f2f2;
}
.data-table tbody tr:nth-child(2n) {
  background: #f7f7f7;
}
.data-table th {
  padding: 0.65rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #333;
  text-align: left;
  white-space: nowrap;
}
.dcm-main .data-table th {
  color: #5f5c5c;
}
.dcm-main .data-table td {
  color: #555;
}
.surveys-page .data-table thead tr th {
  padding: 1rem;
  text-align: right;
}
.surveys-page .data-table thead tr th:first-child {
  padding: 1rem 1rem 1rem 2rem;
}
.data-table tbody tr {
  border-top: 1px solid #f3f4f6;
  transition: background 0.1s;
}
.data-table tbody tr:hover {
  background: #efefef;
}
.data-table__row--dirty {
  background: #a9d6d8 !important;
}
.data-table td {
  padding: 0.85rem 1rem;
  color: #374151;
  vertical-align: middle;
}
.data-table tbody td {
  padding: 0.85rem 1rem;
  color: #333;
  font-weight: 400;
}
.surveys-page .data-table tbody td {
  text-align: right;
}
.data-table tbody td:first-child {
  padding: 0.85rem 1rem 0.85rem 2rem;
}
.surveys-page .data-table thead tr th:last-child,
.surveys-page .data-table tbody tr td:last-child {
  width: 80px;
}
.surveys-page .data-table thead tr th:nth-last-child(2),
.surveys-page .data-table tbody tr td:nth-last-child(2) {
  width: 200px;
}
.surveys-page .data-table thead tr th:first-child,
.surveys-page .data-table tbody tr td:first-child {
  text-align: left;
}
.data-table td.text-muted {
  color: #9ca3af;
}
.data-table td.text-right {
  text-align: right;
}
.data-table__empty {
  text-align: center;
  padding: 2.5rem;
  color: #9ca3af;
}
.data-table tbody td .survey-badge {
  background: #cbcbcb;
  color: #333;
  font-weight: 400;
  text-transform: capitalize;
}

/* ── Row three-dot menu ──────────────────────────────────────────────────── */
.row-menu {
  position: relative;
  display: inline-block;
}

.row-menu__trigger {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition:
    color 0.15s,
    background 0.15s;
}
.row-menu__trigger svg {
  width: 20px;
  height: 20px;
}
.row-menu__trigger:hover,
.row-menu--open .row-menu__trigger {
  color: #374151;
  background: #f3f4f6;
}

.row-menu__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  min-width: 140px;
  z-index: 200;
  padding: 0.25rem 0;
  animation: nav-fade-in 0.12s ease;
}

/* Flip the dropdown upward for the last three rows on the Surveys page (tall menu, ~6 items).
   Issue 6 V26: raised from -n+2 to -n+3 to cover the 3-survey table case where the first
   row was not flipped. DCM uses page-level scroll so dropdowns open downward freely — no flip needed there. */
/* Upward flip only for last 2 rows when table has enough rows to push the menu offscreen downward */
.surveys-page tr:nth-last-child(-n + 2):not(:first-child) .row-menu__dropdown {
  top: auto;
  bottom: calc(100% + 4px);
}

.row-menu__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  text-align: left;
  transition:
    background 0.12s,
    color 0.12s;
}
.row-menu__item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.row-menu__item:hover:not(:disabled) {
  background: #f9fafb;
}

.row-menu__item--disabled {
  color: #d1d5db !important;
  cursor: not-allowed !important;
}
.row-menu__item--danger {
  color: #dc2626;
}
.row-menu__item--danger:hover:not(:disabled) {
  background: #fef2f2;
}

/* Issue 8 V25: fix surveys actions menu clipping */
.surveys-table {
  overflow: visible;
}
.surveys-table .row-menu__dropdown--left {
  right: 30px;
  left: auto;
  bottom: auto;
  top: 0;
}
.surveys-table td {
  overflow: visible;
}
.surveys-table .survey-badge.survey-badge--open {
  background: #d1fae5;
  color: #065f46;
}
.surveys-table .survey-badge.survey-badge--closed {
  background: #d1ebfa;
  color: #06185f;
}
.surveys-table .survey-badge.survey-badge--draft {
  background: #faf9d1;
  color: #5f5d06;
}
.row-menu__dropdown--up {
  bottom: 100%;
  top: auto;
}
/* DF-430: .row-menu--dropup modifier — applied programmatically to last rows in the Users table
   so the dropdown opens upward and stays within the viewport. */
.row-menu--dropup .row-menu__dropdown {
  top: auto;
  bottom: calc(100% + 4px);
}

/* ── Surveys page (US 912986) ────────────────────────────────────────────── */
.surveys-page {
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  background: #fff;
}

.surveys-page .table-wrapper {
  overflow-x: initial;
}

.surveys-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.surveys-page__title {
  font-size: 2rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  letter-spacing: -0.02em;
}

.surveys-page__filters {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.surveys-page__filter-select {
  min-width: 200px;
}

/* Survey name column — uppercase per wireframe */
.surveys-table__name {
  font-weight: 600;
  color: #1f2937;
  letter-spacing: 0.02em;
}

/* Dropdown opens to the left for last column */
.row-menu__dropdown--left {
  right: 0;
  left: auto;
}

/* ── Survey state badges (AC-05) ─────────────────────────────────────────── */
.survey-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.survey-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Draft — grey */
.survey-badge--draft {
  background: #e2e8f0;
  color: #4b5563;
}

/* Open — green */
.survey-badge--open {
  background: #d1fae5;
  color: #065f46;
}

/* Paused — amber */
.survey-badge--paused {
  background: #fef3c7;
  color: #92400e;
}

/* Closed — teal/dark with lock icon */
.survey-badge--closed {
  background: #a5d6d7;
  color: #0f4f51;
}
/* US 961336 AC-08: "Admin Review" indicator for surveys in the lockdown window */
.survey-badge--review-window {
  background: #fef3c7;
  color: #92400e;
  margin-left: 0.35rem;
}
/* US 946496 AC-09: Not finalized at survey close — amber pill for force-closed surveys */
.survey-not-finalized-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fcd34d;
  margin: 0 0.5rem 0;
  vertical-align: middle;
  padding: 4px 8px;
  border-radius: 14px;
}

/* ── Role cards (Roles list page) ────────────────────────────────────────── */
.role-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.role-card {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-top: 0;
  border-right: 0;
  border-radius: 0;
  padding: 1.75rem 2rem 1rem;
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.05);
}
.role-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.role-card__name {
  font-size: 1.15rem;
  font-weight: 400;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.role-card__name .role-card__badge {
  font-size: 1rem;
  font-weight: 100;
}
.role-card__desc {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.65;
  margin: 0;
  max-width: 900px;
}

/* ── Role form page ──────────────────────────────────────────────────────── */
.role-form-page {
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}
.role-form-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.role-form-page__title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.role-form-page__title {
  font-size: 2rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}
.role-form-page__actions {
  display: flex;
  gap: 0.75rem;
}
.role-form-page__fields {
  max-width: 700px;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.role-form-page__name-input {
  font-size: 1rem;
}
.role-form-page__desc-input {
  min-height: 130px;
  resize: vertical;
  font-size: 1rem;
}

.back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #111827;
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.back-btn:hover {
  color: var(--safe-teal);
}
.back-btn svg {
  width: 30px;
  height: 30px;
}

/* ── Privileges side panel ───────────────────────────────────────────────── */
.privileges-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  z-index: 400;
}
.privileges-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 360px;
  background: #f9f9f9;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 401;
  display: flex;
  flex-direction: column;
}
.privileges-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem;
}
.privileges-panel__title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.privileges-panel__list {
  flex: 1;
  overflow-y: auto;
  padding: 0 1.5rem 1.5rem;
}
.privileges-panel__group {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
}
.priv-checkbox {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #f9fafb;
  transition: background 0.1s;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}
.priv-checkbox:last-child {
  border-bottom: none;
}
.priv-checkbox:hover {
  background: #f9fafb;
}
.priv-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--safe-teal);
  flex-shrink: 0;
}

/* 3-tier privilege row (replaces checkbox) */
.priv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #f9fafb;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}
.priv-row:last-child {
  border-bottom: none;
}
.priv-row__name {
  flex: 1;
}
.priv-row__select {
  flex-shrink: 0;
  width: 148px;
}

.privileges-panel__footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
}

/* ── Access Denied page ──────────────────────────────────────────────────── */
.access-denied {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--nav-height));
  text-align: center;
  padding: 2rem;
}
.access-denied__icon svg {
  width: 72px;
  height: 72px;
  color: #d1d5db;
  margin-bottom: 1.5rem;
}
.access-denied__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.75rem;
}
.access-denied__message {
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.7;
  margin: 0 0 2rem;
}

/* ── Empty layout (Login page) ───────────────────────────────────────────── */
.empty-layout {
  min-height: 100vh;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Login page ──────────────────────────────────────────────────────────── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(135deg, #f0f9f9 0%, #e6f2f2 100%);
}

.login-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.login-card__logo {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}
.login-card__logo-bold {
  font-weight: 700;
  color: #111827;
}
.login-card__logo-light {
  font-weight: 300;
  color: #6b7280;
}

.login-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.5rem;
}
.login-card__subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 2rem;
  line-height: 1.6;
}

.login-card__stub-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: #92400e;
  text-align: left;
  margin-bottom: 1.5rem;
}
.login-card__stub-notice svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.login-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: var(--safe-teal);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 1.5rem;
}
.login-card__btn:hover:not(:disabled) {
  background: var(--safe-teal-hover);
}
.login-card__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.login-card__btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.login-card__help {
  font-size: 0.78rem;
  color: #9ca3af;
  line-height: 1.6;
  margin: 0;
}
.login-card__help a {
  color: var(--safe-teal);
  text-decoration: underline;
}

/* ── Auth message pages (NoRole, NoActiveSurvey) ─────────────────────────── */
.auth-message-page {
  display: flex;
  padding: 2rem;
  width: 100%;
  height: calc(100vh - 100px);
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.auth-message-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.auth-message-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--safe-teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}
.auth-message-card__icon svg {
  width: 30px;
  height: 30px;
  color: var(--safe-teal);
}
.auth-message-card__icon--warning {
  background: #fef3c7;
}
.auth-message-card__icon--warning svg {
  color: #d97706;
}

.auth-message-card__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.75rem;
}
.auth-message-card__message {
  font-size: 1rem;
  color: #374151;
  line-height: 1.65;
  margin: 0 0 0.5rem;
  font-weight: 500;
}
.auth-message-card__sub {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.65;
  margin: 0 0 2rem;
}

/* ── Domain & Control Management page (US 907888) ───────────────────────── */
.dcm-layout {
  display: flex;
  min-height: calc(100vh - var(--nav-height));
}

/* Sidebar */
.dcm-sidebar {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
  position: sticky;
  top: 0;
  height: calc(100vh - var(--nav-height));
  align-self: flex-start;
}
.dcm-sidebar__add {
  padding: 1.25rem 1.25rem 0.5rem;
}
.dcm-sidebar__add-btn,
.dcm-sidebar__add-btn--active,
.dcm-sidebar__add-btn--disabled {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.dcm-sidebar__add-btn svg,
.dcm-sidebar__add-btn--active svg,
.dcm-sidebar__add-btn--disabled svg {
  width: 18px;
  height: 18px;
}

.dcm-sidebar__add-btn {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}
.dcm-sidebar__add-btn--active {
  background: var(--safe-teal);
  color: #fff;
  cursor: pointer;
}
.dcm-sidebar__add-btn--active:hover {
  background: var(--safe-teal-hover);
}
.dcm-sidebar__add-btn--disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Edit Domain confirmation block */
.edit-domain-confirm {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  padding: 1rem;
  font-size: 0.875rem;
  color: #0369a1;
  line-height: 1.6;
}

.dcm-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.75rem 1.5rem;
}
.dcm-sidebar__loading {
  padding: 1rem;
  color: #9ca3af;
  font-size: 0.875rem;
}
.dcm-sidebar__item {
  display: block;
  padding: 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 1px;
  transition:
    background 0.1s,
    color 0.1s;
}
.dcm-sidebar__item:hover {
  color: #000;
}
.dcm-sidebar__item--active {
  color: #000;
  font-weight: 700;
  font-size: 0.8rem;
}

/* Main content */
.dcm-main {
  flex: 1;
  padding: 2rem 0 2rem 2.5rem;
  background: #fff;
}
.dcm-main__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}
.dcm-main__title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

/* Domain section header */
.dcm-domain-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.dcm-domain-header__left {
  flex: 1;
}
.dcm-domain-header__name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 1rem;
}
.dcm-domain-header__owner-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dcm-domain-header__owner-select {
  width: 320px;
}

/* Control table */
.dcm-table thead tr.dcm-table__head {
  background: var(--safe-teal);
}
.dcm-table thead tr.dcm-table__head th {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.65rem 1rem;
}
.dcm-table__ctrl-link {
  cursor: pointer;
}
.dcm-table__ctrl-link:hover {
  color: var(--safe-teal-hover);
  font-weight: 700;
  font-size: 0.8rem;
}

.dcm-table__contrib-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  color: var(--safe-teal);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.dcm-table__contrib-btn svg {
  width: 14px;
  height: 14px;
}

/* State badges */
.dcm-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* DF-418: Review badge must be Neutral/Yellow (amber), not gray */
.dcm-badge--review {
  background: #fef3c7;
  color: #92400e;
}
.dcm-badge--approved {
  background: #a5d6d7;
  color: #0f4f51;
}

/* Empty state */
.dcm-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #9ca3af;
  font-size: 0.9rem;
}

/* Cascade conflict warning in modal */
.modal-conflict-warning {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: #991b1b;
  line-height: 1.6;
}
.modal-conflict-warning svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #dc2626;
}
.modal-conflict-list {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
  list-style: disc;
  line-height: 1.8;
}
.modal-conflict-footer {
  margin-top: 0.75rem;
}

/* ── Survey Create page (US 912721) ──────────────────────────────────────── */
.survey-create {
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 6rem;
}

.survey-create__breadcrumb {
  font-size: 2rem;
  color: #333;
  margin-bottom: 2rem;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0.65rem;
}
.survey-create__breadcrumb .link-btn {
  text-decoration: none;
}
.survey-create__breadcrumb strong {
  color: #111827;
}

.survey-create__section {
  margin-bottom: 1rem;
}

.survey-create__section-title {
  font-size: 1.125rem;
  font-weight: 400;
  color: #34414e;
  margin: 0 0 2rem;
}

.survey-create__fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 3rem;
}
.survey-create__fields.top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 3rem;
}
.survey-create__fields.middle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 3rem;
}

.survey-create__field {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 0 0 3rem;
  align-items: flex-start;
}

.form-field__hint {
  font-size: 0.75rem;
  color: #6b7280;
  font-style: italic;
}

.survey-create__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f3f4f6;
  border-top: 1px solid #e5e7eb;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

/* Previous survey summary cards */
.survey-prev__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.survey-prev__card {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 2.5rem;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.survey-prev__big {
  font-size: 2rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.5rem;
}

.survey-prev__sub {
  font-size: 0.875rem;
  color: #333;
  margin: 0;
}

.survey-prev__scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.survey-create__section .form-hint {
  margin: 0;
}
.survey-create__section .form-hint .badge {
  position: initial;
}
.survey-prev__score-card {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.survey-prev__score-value {
  font-size: 1.75rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.5rem;
}

.survey-prev__score--green {
  color: #065f46;
}
.survey-prev__score--red {
  color: #dc2626;
}

.survey-prev__score-label {
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: capitalize;
  color: #333;
  margin: 0;
}

/* Survey setup (Step 2) header */
.survey-setup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}

.survey-setup__title {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.survey-setup__prepopulate {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  color: #374151;
  cursor: pointer;
}
.survey-setup__prepopulate input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--safe-teal);
  cursor: pointer;
}

.survey-setup__domain-header {
  padding: 0 2rem 1.5rem 0;
  position: relative;
}

.survey-setup__domain-header .form-hint {
  position: absolute;
  top: 93px;
  right: 0;
}
.survey-create__field .form-field .form-field__error {
  width: 100%;
  display: flex;
  position: absolute;
}
.survey-create__field .form-field span:nth-child(3) {
  position: relative;
  top: 28px;
}
.survey-setup__domain-name {
  font-size: 1.25rem;
  font-weight: 400;
  color: #333;
  margin: 0 0 2rem;
}

.survey-setup__owner-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-direction: column;
}

.survey-setup__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: #f3f4f6;
  border-top: 1px solid #e5e7eb;
  margin-top: 2rem;
}

.dcm-sidebar__search {
  padding: 1rem 1rem 0.5rem;
}

.form-input--sm {
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
}
.survey-create__field .form-label {
  flex-grow: 1;
  margin: 6px 0 0;
}
.survey-create__fields .form-field {
  flex-grow: 11;
  display: initial;
  position: relative;
}
.survey-create__fields .form-field .form-field__hint {
  position: absolute;
  display: flex;
  top: 35px;
}
.dcm-layout .dcm-sidebar .form-input {
  padding: 0.55rem 0.85rem;
  font-size: 0.875rem;
}
/* ── Control Owner Overview (US 913954) ─────────────────────────────────── */

/* Hero header */
.co-hero {
  background: var(--safe-teal);
  color: #fff;
  padding: 2.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}
.co-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 300;
  flex-wrap: wrap;
}
.co-hero__breadcrumb-bold {
  font-weight: 600;
}
.co-hero__breadcrumb-sep {
  font-weight: 100;
  opacity: 0.7;
}
.co-hero__badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
}
.co-hero__badge--incomplete {
  background: rgba(255, 255, 255, 0.2);
}
.co-hero__badge--complete {
  background: rgba(34, 197, 94, 0.3);
}
.co-hero__deadline {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  opacity: 0.8;
}
.co-hero__owner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  flex-shrink: 0;
}
.co-hero__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.co-hero__owner-label {
  font-size: 0.65rem;
  opacity: 0.7;
}
.co-hero__owner-name {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Page wrapper */
.co-page {
  max-width: 1200px;
  margin: -2rem auto 0;
  padding: 0 1.5rem 3rem;
  position: relative;
  z-index: 10;
}
/* CO multi-domain view: no summary bar, so no negative-margin overlap needed */
.co-page--flush {
  margin-top: 0;
}

/* Summary bar (AC-02) */
.co-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.co-summary-bar__card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  position: relative;
}
.co-summary-bar__card--diff {
  overflow: hidden;
}
.co-summary-bar__card--status {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}
.co-summary-bar__value {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}
.co-summary-bar__label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-top: 0.25rem;
}
.co-summary-bar__stat {
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
}
.co-summary-bar__status-text {
  flex: 1;
}
.co-diff--ahead {
  color: #16a34a;
}
.co-diff--behind {
  color: #dc2626;
}

/* Circular progress ring */
.co-ring {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.co-ring__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.co-ring__bg {
  stroke: #e5e7eb;
}
.co-ring__fg {
  stroke: #22c55e;
}
.co-ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #111827;
}

/* Performance badge */
.co-perf-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  white-space: nowrap;
}
.co-perf-badge--track {
  background: #dbeafe;
  color: #1d4ed8;
}
.co-perf-badge--risk {
  background: #fee2e2;
  color: #b91c1c;
}
.co-perf-badge--ahead {
  background: #dcfce7;
  color: #15803d;
}
.co-perf-badge--behind {
  background: #fee2e2;
  color: #b91c1c;
}
.co-perf-badge--overdue {
  background: #fff7ed;
  color: #c2410c;
}

/* List header */
.co-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.co-list-header__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
}
.co-list-header__controls {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Control cards grid */
.co-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  padding: 0.75rem 1.5rem;
}
.co-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition:
    box-shadow 0.15s,
    transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.co-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #d1d5db;
}
.co-card--accepted {
  opacity: 0.8;
  cursor: default;
}
.co-card--accepted:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-color: #f3f4f6;
}
.co-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.co-card__safe-number {
  font-size: 0.7rem;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.04em;
}
.co-card__name {
  max-width: calc(100% - 3.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 0.95rem;
}
.co-card__scores {
  font-size: 0.72rem;
  color: #4b5563;
  gap: 8px;
  display: flex;
  margin: 10px 0;
}
.co-card__contributors {
  font-size: 0.72rem;
  color: #6b7280;
}
.co-card__owner-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.co-hero__avatar--xs {
  width: 23px;
  height: 23px;
  min-width: 23px;
  line-height: 1;
  background: var(--safe-teal);
  color: #fff;
}
.co-card__owner-name {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  color: #6b7280;
  font-size: 0.8rem;
}
.co-card__footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  justify-content: space-between;
}
.co-card__footer .btn {
  border-radius: 30px;
  font-weight: 400;
  background: #f1fdfe;
  color: #37808a;
  padding: 0.2rem 0.5rem;
}
.co-card__footer .btn:hover {
  border-radius: 30px;
  font-weight: 400;
  background: #bedcdf;
  color: #255c63;
}
.co-card__status-label {
  font-size: 0.7rem;
  color: #9ca3af;
}

/* Review status badges (AC-05) */
.co-status-badge {
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0.2rem 0.65rem;
  margin: 0;
  text-transform: capitalize;
  color: #868686;
  border-radius: 4px;
}
.co-status-badge--container {
  padding: 0.25rem 0.5rem;
  border-radius: 30px;
}
.co-status-badge--draft {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}
.co-status-badge--pending {
  background: #fef9c3;
  color: #a16207;
  border: 1px solid #fde68a;
}
.co-status-badge--accepted {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.co-status-badge--rejected {
  background: #ffedd5;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

/* Empty state */
.co-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 5rem 1rem;
  text-align: center;
}
.co-empty__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(66, 129, 131, 0.1);
  color: var(--safe-teal);
  font-size: 2.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-empty__title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #374151;
}
.co-empty__sub {
  font-size: 0.875rem;
  color: #6b7280;
  max-width: 380px;
}

/* ── Domain Owner Overview cards (US 915287) ────────────────────────────── */
.do-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.do-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  border-color: #d1d5db;
}
.do-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.do-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.do-card__scores {
  font-size: 0.8rem;
  color: #4b5563;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}
.do-card__score-label {
  color: #6b7280;
  font-weight: 400;
}
.do-card__score-label.ml {
  margin-left: 0.5rem;
}
.do-card__diff-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #4b5563;
}
.do-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid #f9fafb;
}
.do-card__owner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.do-card__owner-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--safe-teal);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}
.do-card__owner-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: #374151;
}

/* Performance badges (domain cards) */
.do-perf-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
}
.do-perf-badge--ahead {
  background: #d1fae5;
  color: #065f46;
}
.do-perf-badge--behind {
  background: #fee2e2;
  color: #991b1b;
}

/* Completion badges */
.do-completion-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}
.do-completion-badge--complete {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.do-completion-badge--incomplete {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}

/* ── US 926781 — Admin Control Detail ───────────────────────────────────────── */
.admin-control-detail {
  padding: 0;
}

.control-info-section {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.control-info__text {
  font-size: 0.9rem;
  color: #333;
  line-height: 1.6;
  margin: 0.25rem 0 0;
  white-space: pre-wrap;
}

.form-error-list {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.form-error-list .form-error {
  margin: 0.15rem 0;
}

/* Control edit page aligned with AdminControlDetail visual language */
.control-edit-layout {
  background: #fff;
}

.control-edit-main {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 80px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.control-edit-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
  margin: 0;
}

.control-edit-main .slide-panel__tabs {
  background: #fff;
  border: none;
}

.control-edit-main .slide-panel__tab {
  font-weight: 600;
  text-transform: uppercase;
  width: 100%;
  color: #333;
}

.control-edit-main .slide-panel__tab--active {
  border-bottom-color: var(--safe-teal);
  color: var(--safe-teal);
}

.control-edit-main .control-edit-body,
.control-edit-main .maturity-tab,
.control-edit-main .commitment-tab {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 1.25rem 1.5rem;
}

.control-edit-main .maturity-tab__list,
.control-edit-main .commitment-tab__questions {
  border-right: 1px solid #d1d5db;
}

.control-edit-main .maturity-tab__detail,
.control-edit-main .commitment-tab__years {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 1rem;
}

.control-edit-main .maturity-tab__q-item--active,
.control-edit-main .commitment-tab__q-item--active {
  background: #eef7f8;
  color: #255c63;
}

.control-edit-main .maturity-tab__q-item--active .maturity-tab__q-name,
.control-edit-main .commitment-tab__q-item--active .commitment-tab__q-name {
  font-size: 0.8rem;
}

.control-edit-main .maturity-tab__toolbar,
.control-edit-main .commitment-tab__toolbar {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.75rem;
}

.control-edit-main .commitment-tab__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  background: #fff;
}

.control-edit-main .commitment-tab__row + .commitment-tab__row {
  border-top: 0;
}

.control-edit-main .commitment-tab__row-header {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: #4b5563;
}

.control-edit-main .commitment-tab__placeholder {
  background: #fff;
  border: 1px dashed #d1d5db;
  padding: 1rem;
  color: #6b7280;
}

.control-edit-main .control-edit-body .form-field {
  margin-bottom: 1rem;
}

.control-edit-main .control-edit-body .form-field .form-label {
  color: #333;
  font-weight: 700;
}

@media (max-width: 960px) {
  .control-edit-main {
    padding: 1rem 1rem 64px;
  }

  .control-edit-main .control-edit-body,
  .control-edit-main .maturity-tab,
  .control-edit-main .commitment-tab {
    padding: 1rem;
  }

  .control-edit-main .maturity-tab__body,
  .control-edit-main .commitment-tab__body {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .control-edit-main .maturity-tab__list,
  .control-edit-main .commitment-tab__questions {
    border-right: 0;
    border-bottom: 1px solid #d1d5db;
    padding-right: 0;
    padding-bottom: 0.75rem;
  }
}
/* DF-446: Read-only display field for immutable fields like SAFE ID */
.form-field-readonly {
  padding: 0.5rem 0.75rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: #374151;
  user-select: text;
  cursor: text;
}

.info-lock-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: #92400e;
  font-weight: 500;
}

.form-char-counter {
  font-size: 0.75rem;
  color: #6b7280;
  text-align: right;
  margin: 0.2rem 0 0;
}

.form-hint {
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0.2rem 0 0;
}

.form-select--error {
  border-color: #dc2626 !important;
}

/* ── US 934265 — Commitment tab two-pane layout ─────────────────────────────── */
.commitment-tab__body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.5rem;
}

.commitment-tab__questions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-right: 1px solid #e5e7eb;
  padding-right: 1rem;
}

.commitment-tab__q-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s;
}
.commitment-tab__q-item:hover {
  background: #f3f4f6;
}
.commitment-tab__q-item--active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}
.commitment-tab__q-item--inactive {
  opacity: 0.6;
}
.commitment-tab__q-name {
  flex: 1;
}

.commitment-tab__years {
  flex: 1;
}

.commitment-tab__inactive-notice {
  background: #fefce8;
  border: 1px solid #fef08a;
  border-radius: 0.375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.85rem;
  color: #713f12;
  margin-bottom: 1rem;
}

/* US 907910: read-only year value display */
.commitment-tab__value-ro {
  font-size: 0.9rem;
  color: #374151;
  font-weight: 500;
  padding: 0.35rem 0;
}

/* ── US 911088 — Contributors side panel ────────────────────────────────────── */

/* Field row wrapper */
.contributors-field {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.contributors-field__empty {
  font-size: 0.9rem;
  color: #9ca3af;
  padding: 0.35rem 0;
  flex: 1;
}
.contributors-field__add {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  border-radius: 0.375rem;
  background: var(--safe-teal);
  color: #fff;
  border: 1px solid var(--safe-teal);
  cursor: pointer;
  transition: background 0.15s;
}
.contributors-field__add:hover:not(:disabled) {
  background: var(--safe-teal-light);
  color: var(--safe-teal);
}
.contributors-field__add--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Side panel */
.side-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 210; /* above .safe-nav (200) so nav is not clickable through backdrop */
}
.side-panel {
  position: fixed;
  top: var(--nav-height, 52px); /* starts below the fixed nav bar */
  right: 0;
  width: 380px;
  height: calc(
    100vh - var(--nav-height, 52px)
  ); /* fills remaining height below nav */
  background: #fff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 1200; /* above backdrop (210) and nav (200) — fully visible */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.side-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.side-panel__body {
  padding: 1.25rem 1.5rem 1rem;
}
.side-panel__body .badge {
  padding: 4px 8px;
  border-radius: 14px;
}
.side-panel__body .side-panel__section-title {
  margin-top: 0;
  padding: 0;
}
.side-panel__body .form-group {
  margin: 0 0 10px;
  padding: 0;
}
.side-panel__body .form-group .form-label {
  color: #333;
  font-weight: 100;
  padding: 0 0 6px;
  display: flex;
  font-size: 0.875rem;
}
.side-panel__body .form-group .form-label strong {
  font-weight: 700;
}
.side-panel__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #333;
  margin: 0;
}
.side-panel__close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: #6b7280;
  padding: 0.25rem;
  border-radius: 0.25rem;
}
.side-panel__close:hover {
  background: #f3f4f6;
}
.side-panel__search {
  padding: 0.75rem 1.5rem;
  flex-shrink: 0;
}
.side-panel__list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1.5rem 1rem;
}
.side-panel__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.side-panel__close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: #6b7280;
  padding: 0.25rem;
  border-radius: 0.25rem;
}
.side-panel__close:hover {
  background: #f3f4f6;
}
/* Domain Summary panel — section title */
.side-panel__section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
  margin: 1.25rem 0 0.5rem;
  padding: 0 1.5rem;
}
/* Domain Summary panel — read-only author attribution block */
.domain-summary-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 0.8rem;
}
.domain-summary-author {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 0.8rem;
  padding: 0 0 0.8rem;
  border-bottom: 1px solid #d6d6d6;
}
.domain-summary-author__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: #111827;
}
.domain-summary-author__role {
  font-size: 0.8rem;
  color: #333;
  font-weight: 700;
}
.domain-summary-author__date {
  font-size: 0.8rem;
  color: #9ca3af;
}
/* Read-only form value display */
.form-value {
  margin: 0 0 0.25rem;
  color: #374151;
  font-size: 0.9rem;
}
.form-value--multiline {
  white-space: pre-wrap;
  line-height: 1.6;
}
.side-panel__search {
  padding: 0.75rem 1.5rem;
  flex-shrink: 0;
}
.side-panel__list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1.5rem 1rem;
}
.side-panel__actions {
  padding: 0 1.5rem 1rem;
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}
.domain-summary-section__empty {
  padding: 20px;
  color: #333;
  font-size: 0.9rem;
}
/* Panel internals */
.contributors-panel__selected {
  padding: 0.5rem 1.5rem 0.25rem;
  font-size: 0.8rem;
  color: #374151;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.contributors-panel__selected-label {
  font-weight: 600;
  margin-right: 0.25rem;
}
.contributors-panel__chip {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 9999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
}
.contributors-panel__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  font-size: 0.875rem;
  color: #374151;
}
.contributors-panel__item:hover {
  background: #f9fafb;
}
.contributors-panel__item input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.contributors-panel__email {
  margin-left: auto;
  font-size: 0.75rem;
  color: #9ca3af;
}
.contributors-panel__empty {
  font-size: 0.875rem;
  color: #333;
  padding: 0.75rem 0;
}

/* ── US 936267 — Request Center ─────────────────────────────────────────────── */
.rc-filters {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  align-items: flex-end;
  padding: 0 1.5rem;
}

.rc-table-wrapper {
  padding: 0 1.5rem;
}
.rc-table-wrapper .rc-table thead tr {
  background: var(--safe-teal);
  color: #fff;
}
.rc-table-wrapper .rc-table td button {
  padding: 0.2rem;
  line-height: 100%;
  font-size: 1rem;
  border-radius: 100%;
  cursor: pointer;
  color: #333;
  font-weight: 300;
}
.rc-table-wrapper .rc-table td button.btn--edit {
  transform: rotate(145deg);
}
.rc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.rc-table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
}
.rc-table th .sort-icon {
  font-weight: 100;
  padding: 0 10px;
  font-size: 10px;
}
.rc-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
}
.rc-table__row {
  cursor: pointer;
  transition: background 0.1s;
}
.rc-table__row:hover {
  background: #f0f9ff;
}

.rc-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #9ca3af;
  font-size: 0.95rem;
}

.rc-count {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: #9ca3af;
  text-align: right;
}

/* ── US 913064 — Status badge variants (AC-7) ────────────────────────────────── */
.badge--draft {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}
.badge--pending {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.badge--accepted {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}
.badge--rejected {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* ── US 913064 — Review screen layout ───────────────────────────────────────── */
.review-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 56px - 60px - 64px);
}
@media (max-width: 900px) {
  .review-layout {
    grid-template-columns: 1fr;
  }
}

.review-main {
  flex: 3;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 80px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.review-action-panel {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1.25rem;
  position: sticky;
  top: 1rem;
}
.review-action-panel__title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 1rem;
}
.review-action-panel__buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.review-action-panel__accept {
  flex: 1;
}
.review-action-panel__reject {
  flex: 1;
  background: #dc2626;
  border-color: #dc2626;
}
.review-action-panel__reject:hover:not(:disabled) {
  background: #b91c1c;
}

.btn--danger {
  background: #990909;
  border-color: #990909;
  color: #fff;
}
.btn--danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

.review-history {
  padding-top: 1rem;
}
.review-history__title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.75rem;
}
.review-history__entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.875rem;
}
.review-history__entry .badge {
  padding: 4px 8px;
  border-radius: 14px;
}
.review-history__who {
  font-weight: 600;
  color: #374151;
}
.review-history__when {
  color: #9ca3af;
  margin-left: auto;
}
.review-history__comment {
  width: 100%;
  margin: 0.25rem 0 0;
  color: #374151;
  font-style: italic;
}

/* ── US 946988 — Overdue badge (AC-02) ──────────────────────────────────────── */
.badge--overdue {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  font-weight: 700;
  white-space: nowrap;
}

/* ── US 913623 — Admin Survey View ──────────────────────────────────────────── */
.survey-view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.5rem;
}
.survey-view-toolbar__title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.survey-view-toolbar__filters {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}
/* V40: scoped to avoid overriding the global .form-select--sm which needs right padding for the chevron */
.survey-view-toolbar__filters .form-select--sm {
  font-size: 0.85rem;
  padding: 0.35rem 3rem 0.35rem 0.75rem;
}

.domain-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 0.5rem;
  padding: 0 1.5rem;
}
.domain-card-grid .domain-card__name-row .badge {
  border-radius: 0;
}
.domain-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #d1d5db;
}
.domain-card--complete {
  border-left: 4px solid #10b981;
}
.domain-card--complete:hover {
  border-left: 4px solid #10b981;
}
.domain-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.domain-card__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.domain-card__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #111827;
  flex: 1;
  min-width: 0;
}
.domain-card__owner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #6b7280;
}

.domain-card__scores {
  display: flex;
  gap: 0.75rem;
  border-top: 1px solid #f3f4f6;
  padding-top: 0.75rem;
}
.domain-card__score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.domain-card__score-label {
  font-size: 0.7rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.domain-card__score-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #374151;
  margin-top: 0.1rem;
}
.domain-card__progress {
  font-size: 0.78rem;
  color: #6b7280;
}

/* ── US 914025 — Control History: rejection decisions ────────────────────────── */
.history-decisions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.history-decision {
  border-radius: 0;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.history-decision--rejected {
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.history-decision--accepted {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.history-decision--rejected {
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.history-decision--accepted {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
/* Gray card variant for all non-review history events (Part 5 fix) */
.history-decision--neutral {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.history-decision__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.8rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid;
  border-bottom-color: inherit;
}
.history-decision__badge {
  margin-bottom: 0.8rem;
  text-align: left;
  display: flex;
}
.history-decision__badge .badge {
  padding: 4px 8px;
  border-radius: 4px;
}
.history-decision__who {
  font-weight: 600;
  color: #374151;
}
.history-decision__when {
  margin-left: auto;
  font-size: 0.75rem;
  color: #6d6d6d;
}
.history-decision__comment {
  margin: 0;
  color: #374151;
  line-height: 1.5;
}

/* ── US 960135 — Pagination Bar ─────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
  white-space: nowrap;
}
.pagination__btn svg {
  width: 0.875rem;
  height: 0.875rem;
}
.pagination__btn:hover:not(:disabled) {
  background: var(--safe-teal-light);
  color: var(--safe-teal);
  border-color: var(--safe-teal);
}
/* AC-03: current page highlighted */
.pagination__btn--active {
  background: var(--safe-teal);
  color: #fff;
  border-color: var(--safe-teal);
  cursor: default;
  font-weight: 700;
}
/* AC-04: boundary buttons disabled */
.pagination__btn--disabled,
.pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination__ellipsis {
  font-size: 0.8125rem;
  color: #9ca3af;
  padding: 0 0.25rem;
  user-select: none;
}

/* ── Issue 6-D: Domain Summary comment history thread ──────────────────── */
.summary-comment-thread {
  margin-top: 1.25rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 1rem;
}
.summary-comment-thread__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.75rem;
}
.summary-comment-thread__entry {
  margin-bottom: 0.875rem;
  padding: 0.5rem 0.75rem;
  background: #f9fafb;
  border-radius: 6px;
}
.summary-comment-thread__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
}
.summary-comment-thread__role {
  color: #6b7280;
  font-size: 0.75rem;
}
.summary-comment-thread__time {
  color: #9ca3af;
  font-size: 0.75rem;
  margin-left: auto;
}
.summary-comment-thread__text {
  font-size: 0.8125rem;
  color: #374151;
  margin: 0;
  white-space: pre-wrap;
}
.commitment-section {
  margin: 1.5rem 0;
  border-top: 1px solid #e5e7eb;
  padding-top: 1rem;
}
.commitment-section__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.75rem;
}
.commitment-section__question {
  margin-bottom: 1rem;
}
.commitment-section__q-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.commitment-section__q-name--inactive {
  color: #9ca3af;
}
.commitment-section__rows {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.commitment-section__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.75rem;
  background: #f9fafb;
  border-radius: 4px;
  font-size: 0.8125rem;
}
.commitment-section__year {
  color: #6b7280;
  font-weight: 500;
}
.commitment-section__value {
  font-weight: 600;
  color: #111827;
  min-width: 3rem;
  text-align: right;
}

/* ── Maturity Levels Tab (Issues V3-1, US 929248) ──────────────────────── */
.maturity-tab,
.commitment-tab {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.maturity-tab__toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.maturity-tab__cycle-selector {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.maturity-tab__state-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.maturity-tab__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.maturity-tab__body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.5rem;
  min-height: 400px;
}
.maturity-tab__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-right: 1px solid var(--color-border, #e5e7eb);
  padding-right: 1rem;
  overflow-y: auto;
}
.maturity-tab__empty {
  color: var(--color-muted, #6b7280);
  font-size: 0.875rem;
  padding: 0.5rem;
}
.maturity-tab__q-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
}
.maturity-tab__q-item:hover {
  background: var(--color-surface-hover, #f3f4f6);
}
.maturity-tab__q-item--active {
  background: var(--color-primary-light, #eff6ff);
  font-weight: 600;
}
.maturity-tab__q-item--inactive {
  opacity: 0.55;
}
.maturity-tab__q-level {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted, #6b7280);
}
.maturity-tab__q-name {
  font-size: 0.875rem;
  line-height: 1.3;
  white-space: normal;
}
.maturity-tab__detail {
  overflow-y: auto;
}
.maturity-tab__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.maturity-tab__select-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--color-muted, #6b7280);
  font-size: 0.9rem;
}
.maturity-tab__toggles {
  display: flex;
  gap: 2rem;
}
.maturity-tab__inactive-warning {
  padding: 0.5rem 0.75rem;
  background: var(--color-warning-bg, #fef3c7);
  color: var(--color-warning-text, #92400e);
  border-radius: 6px;
  font-size: 0.875rem;
}
.maturity-tab__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.maturity-tab__options-header {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.maturity-tab__option-row {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 0.75rem;
}
.form-input--weight {
  text-align: right;
}
.maturity-tab__weight-total {
  font-size: 0.875rem;
  text-align: right;
  color: var(--color-muted, #6b7280);
}
.maturity-tab__weight-total--error {
  color: var(--color-danger, #dc2626);
  font-weight: 600;
}
.maturity-tab__form-actions {
  display: flex;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

/* ── Slide Panel — Add New Control (Issues V3-2A, US 929229) ────────────── */
.slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 100vw;
  height: 100vh;
  background: var(--color-surface, #ffffff);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.slide-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  flex-shrink: 0;
}
.slide-panel__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}
.slide-panel__subtitle {
  font-size: 0.8rem;
  color: var(--color-muted, #6b7280);
  margin: 0.2rem 0 0;
}
.slide-panel__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.slide-panel__tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  flex-shrink: 0;
}
.slide-panel__tab {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--color-muted, #6b7280);
}
.slide-panel__tab--active {
  border-bottom-color: var(--color-primary, #2563eb);
  color: var(--color-primary, #2563eb);
  font-weight: 600;
}
.slide-panel__tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.slide-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.slide-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 999;
}

/* ── Toggle / Pill Switch (Issues V3-3A, US 934247 AC-09/AC-10) ─────────── */
.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--color-muted-bg, #d1d5db);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.toggle__slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
.toggle input[type="checkbox"]:checked + .toggle__slider {
  background: var(--safe-teal);
}
.toggle input[type="checkbox"]:checked + .toggle__slider::before {
  transform: translateX(20px);
}
.toggle input[type="checkbox"]:disabled + .toggle__slider {
  background: var(--color-muted-bg, #e5e7eb);
  cursor: not-allowed;
}
.toggle input[type="checkbox"]:disabled + .toggle__slider::before {
  background: var(--color-muted, #9ca3af);
}
.toggle input[type="checkbox"]:focus-visible + .toggle__slider {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: 2px;
}

/* ── Icon Button — bin/trash for delete (Issues V3-3B) ──────────────────── */
.btn--icon {
  padding: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Committed Cycles page layout (V27 Issue 4) ────────────────────────────── */
.committed-cycles-page {
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  background: #fff;
}
.committed-cycles-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.committed-cycles-page__title {
  font-size: 2rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  letter-spacing: -0.02em;
}
.committed-cycles-page__filters {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.committed-cycles-page__filter-select {
  min-width: 200px;
}
.committed-cycles-page__header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.committed-cycles-page__cycle-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  position: relative;
}

.committed-cycles-page__cycle-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}
.committed-cycles-page__cycle-info .badge {
  position: relative;
  top: 0;
  left: 0;
  line-height: 1.25rem;
}
.committed-cycles-page .data-table thead tr th:first-child,
.committed-cycles-page .data-table tbody tr td:first-child {
  text-align: left;
}
.committed-cycles-page .data-table thead tr th:first-child {
  padding: 1rem 1rem 1rem 2rem;
}
.committed-cycles-page .data-table thead tr th {
  padding: 1rem;
  text-align: right;
  background: #37808a;
  color: #fff;
}
.committed-cycles-page .data-table tbody td {
  text-align: right;
  padding: 1rem 1rem 1rem 2rem;
}
.committed-cycles-page .data-table .score-chip {
  border: 2px solid #a6a6a6;
  width: 300px;
  display: inline-flex;
  color: #a6a6a6;
  font-size: 1.063rem;
  padding: 0.65rem;
}

/* ── New Committed Cycles page layout ────────────────────────────── */
.new-committed-cycle-page {
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  background: #fff;
}
.new-committed-cycle-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.new-committed-cycle-page__title {
  font-size: 2rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  letter-spacing: -0.02em;
}
.new-committed-cycle-page__filters {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.new-committed-cycle-page__filter-select {
  min-width: 200px;
}
.new-committed-cycle-page__header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.new-committed-cycle-page__cycle-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  position: relative;
}

.new-committed-cycle-page__cycle-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}
.new-committed-cycle-page__cycle-info .badge {
  position: relative;
  top: 0;
  left: 0;
  line-height: 1.25rem;
}
.new-committed-cycle-page .data-table thead tr th:first-child,
.new-committed-cycle-page .data-table tbody tr td:first-child {
  text-align: left;
}
.new-committed-cycle-page .data-table thead tr th:first-child {
  padding: 1rem 1rem 1rem 2rem;
}
.new-committed-cycle-page .data-table thead tr th {
  padding: 1rem;
  text-align: right;
  background: #37808a;
  color: #fff;
}
.new-committed-cycle-page .data-table tbody td {
  text-align: right;
  padding: 1rem 1rem 1rem 2rem;
}
.new-committed-cycle-page .data-table .score-chip {
  border: 2px solid #a6a6a6;
  width: 300px;
  display: inline-flex;
  color: #a6a6a6;
  font-size: 1.063rem;
  padding: 0.65rem;
}
.new-committed-cycle-page .data-table .score-chip:focus-visible {
  outline: none;
}
.new-committed-cycle-page__breadcrumb {
  font-size: 2rem;
  color: #333;
  margin-bottom: 2rem;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0.65rem;
}
.new-committed-cycle-page__breadcrumb .link-btn {
  text-decoration: none;
}
.new-committed-cycle-page__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: #f3f4f6;
  border-top: 1px solid #e5e7eb;
  margin-top: 2rem;
}
.request-center-page {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem 0 1rem;
}
.request-center-page .co-page-title-row {
  padding: 0 1.5rem;
}
.rc-table-wrapper .rc-table__row .badge {
  padding: 4px 8px;
  border-radius: 14px;
}