/* Existing Product Minor Change
   Unified detail-page visual language with Existing Product Redesign.
   Keep the minor-change workflow logic/forms unchanged; only normalize layout,
   cards, workflow states, information density and right-side action styling. */

.detail-content.detail-content-page.minor-split-active {
  max-height: none;
  overflow: hidden !important;
}

.detail-page-panel.minor-split-host {
  overflow: hidden !important;
}

/* ===== Same two-pane geometry as the redesign detail page ===== */
.minor-split-active > .minor-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(380px, .95fr);
  gap: 18px;
  height: calc(100vh - 285px);
  min-height: 560px;
  overflow: hidden;
}

.minor-split-main,
.minor-split-side {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.minor-split-main {
  padding-right: 10px;
  overflow-x: hidden;
}

.minor-split-side {
  padding: 0 6px 0 2px;
  border-left: 1px solid #e6ebf3;
}

.minor-split-main::-webkit-scrollbar,
.minor-split-side::-webkit-scrollbar {
  width: 10px;
}

.minor-split-main::-webkit-scrollbar-track,
.minor-split-side::-webkit-scrollbar-track {
  background: transparent;
}

.minor-split-main::-webkit-scrollbar-thumb,
.minor-split-side::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: #c5d0df;
  background-clip: padding-box;
}

/* ===== Use the same card system as redesign ===== */
.minor-split-main > .minor-card,
.minor-split-side > .minor-card {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line, #dfe6f0);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

.minor-split-main .minor-card-head,
.minor-split-side .minor-card-head {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.minor-split-main .minor-card-head h3,
.minor-split-side .minor-card-head h3 {
  margin: 0;
  color: #122033;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 730;
}

.minor-split-main .minor-card-head p,
.minor-split-side .minor-card-head p {
  margin: 5px 0 0;
  color: #68788f;
  font-size: 12px;
  line-height: 1.5;
}

.minor-kicker {
  margin: 0 0 6px;
  color: #68788f;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ===== Workflow: match redesign progress cards ===== */
.minor-workflow-card {
  padding: 16px !important;
}

.minor-workflow-head {
  align-items: flex-start !important;
  margin-bottom: 12px !important;
}

.minor-workflow-head h3 {
  font-size: 14px !important;
}

.minor-workflow-head small {
  padding-top: 2px;
  color: #68788f;
  font-size: 11px;
  line-height: 1.4;
}

.minor-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.minor-flow-step {
  min-width: 0;
  width: 100%;
  min-height: 68px;
  display: block;
  padding: 9px;
  border: 1px solid var(--line, #dfe6f0);
  border-radius: 10px;
  background: #f8fafc;
  color: #122033;
  box-sizing: border-box;
}

.minor-flow-step span {
  width: 20px;
  height: 20px;
  display: block;
  margin: 0 0 7px;
  border-radius: 6px;
  background: #e7edf5;
  color: #6b7c91;
  text-align: center;
  line-height: 20px;
  font-size: 10px;
  font-weight: 850;
}

.minor-flow-step strong {
  display: block;
  color: inherit;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.minor-flow-step.done {
  border-color: #bfe2d0;
  background: #f2fbf6;
  color: #176546;
}

.minor-flow-step.done span {
  background: #1f9a67;
  color: #fff;
}

.minor-flow-step.active {
  border-color: #88a5ef;
  background: #f1f5ff;
  color: #244fac;
  box-shadow: inset 0 0 0 1px #b5c7f5;
}

.minor-flow-step.active span {
  background: var(--primary, #2957d9);
  color: #fff;
}

/* ===== Request summary: same information-card rhythm as redesign ===== */
.minor-split-main .minor-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.minor-split-main .minor-summary-field,
.minor-split-main .minor-summary-field.wide {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line, #dfe6f0);
  border-radius: 10px;
  background: var(--panel-soft, #f8fafc);
}

.minor-split-main .minor-summary-field.wide {
  grid-column: 1 / -1;
}

/* Match .detail-item strong from the redesign flow exactly. */
.minor-split-main .minor-summary-field span {
  display: block;
  margin: 0 0 5px;
  color: var(--muted, #68788f);
  font-size: 10px;
  line-height: normal;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Match .detail-item p from the redesign flow exactly. */
.minor-split-main .minor-summary-field strong {
  display: block;
  margin: 0;
  color: var(--text, #122033);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 400;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===== Left-side submitted information ===== */
.minor-split-main .minor-info {
  padding: 10px 12px;
  border: 1px solid #d7e2f4;
  border-radius: 10px;
  background: #f7faff;
  color: #4f6380;
  font-size: 12px;
  line-height: 1.5;
}

.minor-split-main .minor-dimension,
.minor-split-main .minor-department-card,
.minor-split-main .minor-impact-card,
.minor-split-main .minor-pilot-history > div {
  border-color: #dde4ef;
  border-radius: 10px;
  box-shadow: none;
}

.minor-split-main .minor-dimension-head {
  padding: 11px 12px;
  background: #f8fafc;
}

.minor-split-main .minor-dimension-head h4,
.minor-split-main .minor-department-head h4,
.minor-split-main .minor-impact-list > h4 {
  color: #122033;
  font-size: 12px;
  font-weight: 730;
}

.minor-split-main .minor-table th,
.minor-split-main .minor-table td {
  padding: 9px 10px;
  border-color: #e6ebf3;
  font-size: 11px;
  line-height: 1.45;
}

.minor-split-main .minor-table th {
  background: #fbfcfe;
  color: #5f7086;
  font-weight: 750;
}

.minor-split-main .minor-impact-card {
  padding: 12px;
  background: #fbfcfe;
}

.minor-split-main .minor-impact-grid {
  gap: 8px;
  margin-top: 10px;
}

.minor-split-main .minor-impact-grid > div {
  padding: 9px 10px;
  border-color: #e6ebf3;
  border-radius: 9px;
  background: #fff;
}

.minor-split-main .minor-impact-grid span {
  color: #68788f;
  font-size: 10px;
  font-weight: 750;
}

.minor-split-main .minor-impact-grid p,
.minor-split-main .minor-impact-grid strong {
  margin: 0;
  color: #122033;
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 550;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ===== Right rail: same hierarchy as redesign action panel ===== */
.minor-side-role-card,
.minor-side-action-card {
  border-color: #d7e2f4 !important;
}

.minor-side-role-card {
  background: #fff !important;
}

.minor-side-role-card h3 {
  margin: 0;
  color: #193f88;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 760;
}

.minor-side-role-card p {
  margin: 6px 0 0;
  color: #68788f;
  font-size: 12px;
  line-height: 1.5;
}

.minor-side-refresh {
  width: 100%;
  margin-top: 14px;
}

.minor-side-action-card {
  background: linear-gradient(180deg, #f7faff 0%, #fdfefe 100%) !important;
}

.minor-side-action-card > .minor-kicker {
  margin-bottom: 10px;
  color: #193f88;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 730;
  letter-spacing: 0;
  text-transform: none;
}

.minor-side-action-body {
  display: grid;
  gap: 12px;
}

.minor-side-action-block {
  min-width: 0;
  padding: 12px;
  border: 1px solid #dfe6f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: none !important;
  overflow: hidden;
}

/* Remove the old yellow/blue/brown semantic card accents so both workflows use
   the same neutral enterprise surface; decisions themselves still retain status colors. */
.minor-side-action-block:has(> .minor-assessment-form),
.minor-side-action-block:has(> .minor-action-form[data-review]),
.minor-side-action-block:has(> .minor-action-form[data-result]),
.minor-side-action-block:has(> #mpilotresult),
.minor-side-action-block:has(> #mpilot),
.minor-side-action-block:has(> #mmass) {
  border-color: #dfe6f0;
  background: #fff;
  box-shadow: none !important;
}

.minor-side-action-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  padding: 0 0 9px;
  border-bottom: 1px solid #e8edf4;
  color: #122033 !important;
  font-size: 12px;
  line-height: 1.45;
}

.minor-side-action-heading::before {
  display: none !important;
}

.minor-side-action-block > .minor-action-form,
.minor-side-action-block > .minor-assessment-form {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.minor-split-side .minor-action-form,
.minor-split-side .minor-assessment-form {
  gap: 14px;
}

.minor-split-side .minor-action-form label,
.minor-split-side .minor-assessment-form label {
  color: #344054;
  font-size: 12px;
  font-weight: 650;
}

.minor-split-side .minor-action-form textarea,
.minor-split-side .minor-assessment-form textarea,
.minor-split-side .minor-assessment-impact-fields textarea {
  min-height: 90px;
  border-color: #d1d9e6;
  border-radius: 10px;
  background: #fff;
}

.minor-split-side .minor-action-form input,
.minor-split-side .minor-action-form select {
  border-radius: 10px;
}

.minor-split-side .minor-assessment-impact-row {
  padding: 11px;
  border-color: #e3e8f0;
  border-radius: 10px;
  background: #fbfcfe;
}

.minor-split-side .minor-no-impact-check {
  border-radius: 10px;
  box-shadow: none;
}

/* Result-entry reference uses the same compact requirement cards as redesign. */
.minor-side-requirement-reference {
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid #d7e2f4;
  border-radius: 10px;
  background: #f9fbff;
}

.minor-side-requirement-title {
  margin-bottom: 8px;
  color: #31539f;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 800;
}

.minor-side-requirement-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  margin: 0 !important;
}

.minor-side-requirement-grid > div {
  padding: 9px 10px !important;
  border: 1px solid #e6ebf3 !important;
  border-radius: 9px !important;
  background: #fff !important;
}

.minor-side-requirement-grid > div > span {
  display: block;
  margin: 0 0 4px;
  color: #68788f;
  font-size: 10px;
  font-weight: 750;
}

.minor-side-requirement-grid > div > p,
.minor-side-requirement-grid > div > strong {
  display: block;
  margin: 0;
  color: #122033;
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 550;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.minor-side-note {
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: #eef3ff;
  color: #31539f;
  font-size: 12px;
  line-height: 1.5;
}

.minor-side-note strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
}

.minor-side-note p {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

.minor-side-guide-card {
  display: none;
}

/* Review choices keep meaning but use the same compact controls as redesign. */
.minor-split-side .minor-action-form[data-review] .minor-radio-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.minor-split-side .minor-action-form[data-review] .minor-radio-row label {
  position: relative;
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  color: #344054;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  user-select: none;
}

.minor-split-side .minor-action-form[data-review] .minor-radio-row input[type='radio'] {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.minor-split-side .minor-action-form[data-review] .minor-radio-row label::before {
  content: '';
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  box-sizing: border-box;
  border: 1.5px solid #98a2b3;
  border-radius: 50%;
  background: #fff;
}

.minor-split-side .minor-action-form[data-review] .minor-radio-row label:nth-child(1):has(input:checked) {
  border-color: #168253;
  background: #f1faf5;
  color: #116b45;
}

.minor-split-side .minor-action-form[data-review] .minor-radio-row label:nth-child(2):has(input:checked) {
  border-color: #7296ef;
  background: #f3f6ff;
  color: #244fac;
}

.minor-split-side .minor-action-form[data-review] .minor-radio-row label:nth-child(3):has(input:checked) {
  border-color: #e04452;
  background: #fff4f5;
  color: #b42331;
}

.minor-split-side .minor-action-form[data-review] .minor-radio-row label:has(input:checked)::before {
  border: 4px solid currentColor;
}

/* Pilot decision controls remain readable in the narrower right rail. */
.minor-split-side #mpilot .minor-radio-row {
  gap: 8px;
}

.minor-split-side #mpilot .minor-radio-row label {
  min-width: 0;
}

/* ===== Responsive behavior follows redesign ===== */
@media (max-width: 1280px) {
  .detail-content.detail-content-page.minor-split-active,
  .detail-page-panel.minor-split-host {
    overflow: visible !important;
  }

  .minor-split-active > .minor-shell {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .minor-split-main,
  .minor-split-side {
    overflow: visible;
    max-height: none;
    padding-right: 0;
    padding-left: 0;
    border-left: 0;
    scrollbar-gutter: auto;
  }
}

@media (max-width: 760px) {
  .minor-flow-grid,
  .minor-split-main .minor-summary-grid,
  .minor-split-side .minor-action-form[data-review] .minor-radio-row {
    grid-template-columns: 1fr;
  }

  .minor-split-main .minor-summary-field.wide {
    grid-column: auto;
  }
}