/* QA1125: Roof Coatings uses the approved shared proposal header. */
.roofing-shared-proposal-shell .roofing-coatings-legacy > .hgc-root {
  padding-top: 0;
}

.roofing-shared-proposal-shell .hgc-shared-roofing-estimate-top {
  margin-top: 8px;
}

.roofing-shared-proposal-shell .hgc-roofing-estimator-switcher {
  max-width: 1540px;
  margin: 0 auto 12px;
  padding: 7px;
  border: 1px solid #24394b;
  border-radius: 8px;
  background: #09121b;
}

.roofing-shared-proposal-shell .hgc-roofing-estimator-switcher .home-repair-painting-service:first-child {
  --painting-tone: #22d3ee;
}

.roofing-shared-proposal-shell .hgc-roofing-estimator-switcher .home-repair-painting-service:last-child {
  --painting-tone: #ff7a18;
}

.roofing-shared-proposal-shell .hgc-rc-page > .hgc-rc-header {
  display: none !important;
}

.roofing-shared-proposal-shell .hgc-rc-page > .hgc-rc-steps {
  max-width: 980px;
  margin: 0 auto 8px;
}

/* Keep the Roofing accuracy rail content-sized. The global page shell styles every
   aside as a full-viewport sticky rail, which also caught this nested notice. */
.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside {
  align-self: start !important;
  height: max-content !important;
  min-height: 0 !important;
  max-height: none !important;
}

.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside > :is(.hgc-rc-accuracy-warning, .hgc-rc-accuracy-ready) {
  position: static !important;
  inset: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Match the approved Painting package entry: the shared Roofing approval
   renderer supplies only a neutral button class, so give that one action the
   same fuchsia outline, tint, and icon treatment used by Painting. */
.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page .hgc-rail-customer-approval-actions > .packages {
  border-color: rgba(255, 91, 214, 0.92) !important;
  background: rgba(255, 91, 214, 0.06) !important;
  color: #fff !important;
}

.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page .hgc-rail-customer-approval-actions > .packages > svg {
  color: #ff5bd6 !important;
}

.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page .hgc-rail-customer-approval-actions > .packages > small {
  color: #fff !important;
}

.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page .hgc-rail-customer-approval-actions > .packages:is(:hover, :focus-visible) {
  border-color: rgba(255, 91, 214, 1) !important;
  outline: 2px solid rgba(255, 91, 214, 0.42) !important;
  outline-offset: -2px !important;
  background: rgba(255, 91, 214, 0.13) !important;
}

/* QA1125: keep the Roofing right rail in the approved proposal sequence.
   The shared Proposal Price renderer also owns Priced sections, totals, and
   Customer approval, so flatten only that wrapper and order its existing
   children without duplicating markup or changing any calculation. */
.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside {
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
}

.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside > .hgc-price-center {
  display: contents !important;
}

.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside > .hgc-price-center > :is(header, .hgc-priced-sections, .hgc-proposal-price-footer, .hgc-rail-measurements, .hgc-rail-customer-approval) {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 1. Proposal Price, including its priced-section and total details. */
.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside > .hgc-price-center > :is(header, .hgc-priced-sections, .hgc-proposal-price-footer) {
  order: 1 !important;
}

.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside > .hgc-price-center > header {
  padding: 16px !important;
}

.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside > .hgc-price-center > .hgc-priced-sections {
  padding: 0 16px 14px !important;
}

.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside > .hgc-price-center > .hgc-proposal-price-footer {
  padding: 14px 16px 16px !important;
  border-bottom: 1px solid #263a4b !important;
}

/* 2. Estimate Summary, with its compact setup notice kept immediately below. */
.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside > :is(.hgc-rc-summary, .hgc-rc-accuracy-warning, .hgc-rc-accuracy-ready) {
  order: 2 !important;
}

/* 3. Included services and financial breakdown. */
.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside > .hgc-rc-financial-summary {
  order: 3 !important;
}

/* 4. Compact proposal measurements, matching Painting's rail placement. */
.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside > .hgc-price-center > .hgc-rail-measurements {
  order: 4 !important;
  display: grid !important;
  gap: 12px;
  padding: 16px !important;
  border-bottom: 1px solid #263a4b !important;
  background: #0a1823;
}

.roofing-shared-proposal-shell .hgc-rail-measurements > header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.roofing-shared-proposal-shell .hgc-rail-measurements > header > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #ff8618;
  border: 1px solid #a8540d;
  border-radius: 8px;
  background: rgba(255, 134, 24, 0.08);
}

.roofing-shared-proposal-shell .hgc-rail-measurements > header svg {
  width: 17px;
  height: 17px;
}

.roofing-shared-proposal-shell .hgc-rail-measurements > header small,
.roofing-shared-proposal-shell .hgc-rail-measurements > header strong,
.roofing-shared-proposal-shell .hgc-rail-measurements > header p {
  display: block;
}

.roofing-shared-proposal-shell .hgc-rail-measurements > header small {
  color: #ff8618;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}

.roofing-shared-proposal-shell .hgc-rail-measurements > header strong {
  margin-top: 2px;
  color: #f5f9fc;
  font-size: 14px;
}

.roofing-shared-proposal-shell .hgc-rail-measurements > header p {
  margin: 2px 0 0;
  color: #9db2c1;
  font-size: 11px;
}

.roofing-shared-proposal-shell .hgc-rail-measurements > .if-measure-launch.is-compact-menu {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  justify-content: center !important;
  color: #f8fbfd !important;
  border-color: #a8540d !important;
  background: #101b24 !important;
}

.roofing-shared-proposal-shell .hgc-rail-measurements > .if-measure-launch.is-compact-menu:is(:hover, :focus-visible) {
  border-color: #ff8618 !important;
  background: rgba(255, 134, 24, 0.14) !important;
}

/* 5. Customer approval, retaining the Painting-matched pink Packages action. */
.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside > .hgc-price-center > .hgc-rail-customer-approval {
  order: 5 !important;
  padding: 16px !important;
  border-bottom: 0 !important;
}

.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside > .hgc-work-service-rail {
  order: 7 !important;
}

/* 6. Work-order and record controls replace the removed duplicate footer card. */
.roofing-shared-proposal-shell .hgc-estimator-page.hgc-rc-page > .hgc-rc-layout > aside > .hgc-rail-record-actions {
  order: 6 !important;
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 16px;
  border: 1px solid #263a4b;
  background: #0a1823;
  box-sizing: border-box;
}

.roofing-shared-proposal-shell .hgc-rail-record-actions > header {
  display: grid;
  gap: 3px;
}

.roofing-shared-proposal-shell .hgc-rail-record-actions > header small {
  color: #ff8618;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}

.roofing-shared-proposal-shell .hgc-rail-record-actions > header strong {
  color: #f5f9fc;
  font-size: 15px;
}

.roofing-shared-proposal-shell .hgc-rail-record-actions > header p {
  margin: 0;
  color: #9db2c1;
  font-size: 12px;
  line-height: 1.35;
}

.roofing-shared-proposal-shell .hgc-rail-record-work-order,
.roofing-shared-proposal-shell .hgc-rail-record-work-order > .hgc-work-order-menu,
.roofing-shared-proposal-shell .hgc-rail-record-work-order .hgc-proposal-header-action {
  position: relative;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.roofing-shared-proposal-shell .hgc-rail-record-work-order .hgc-work-order-menu-panel {
  right: 0;
  left: auto;
  width: 100%;
}

.roofing-shared-proposal-shell .hgc-rail-record-management {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.roofing-shared-proposal-shell .hgc-rail-record-management > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #4b6477;
  border-radius: 6px;
  background: #0b1721;
  color: #edf5fa;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.roofing-shared-proposal-shell .hgc-rail-record-management > button > svg {
  width: 16px;
  height: 16px;
}

.roofing-shared-proposal-shell .hgc-rail-record-management > .archive:is(:hover, :focus-visible),
.roofing-shared-proposal-shell .hgc-rail-record-management > .restore:is(:hover, :focus-visible) {
  border-color: #ff8618;
  color: #fff;
  outline: 2px solid rgba(255, 134, 24, .28);
  outline-offset: 1px;
}

.roofing-shared-proposal-shell .hgc-rail-record-management > .delete {
  border-color: rgba(255, 92, 111, .58);
  color: #ff8d9a;
}

.roofing-shared-proposal-shell .hgc-rail-record-management > .delete:is(:hover, :focus-visible) {
  background: rgba(255, 70, 92, .1);
  border-color: #ff5c6f;
  color: #fff;
  outline: 2px solid rgba(255, 70, 92, .24);
  outline-offset: 1px;
}

.roofing-shared-proposal-shell .hgc-rail-record-management > button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* The Roofing approval and record controls live in the right rail. Remove the
   shared HGC completion card that is otherwise appended below the estimator. */
.roofing-shared-proposal-shell .roofing-coatings-legacy > .hgc-root > .proposal-completion-center.is-compact {
  display: none !important;
}

/* QA1125: the first Roofing scope card uses proposal navigation here. The
   measurement launcher now lives in the compact right-rail card. */
.roofing-shared-proposal-shell .hgc-rc-roof-information .hgc-rc-page-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(88px, auto));
  gap: 8px;
  align-self: center;
}

.roofing-shared-proposal-shell .hgc-rc-roof-information .hgc-rc-page-navigation > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.roofing-shared-proposal-shell .hgc-rc-roof-information .hgc-rc-page-navigation > button > svg {
  width: 16px;
  height: 16px;
}

.roofing-shared-proposal-shell .hgc-rc-roof-information .hgc-rc-page-back {
  border: 1px solid #4b6477;
  background: #0b1721;
  color: #edf5fa;
}

.roofing-shared-proposal-shell .hgc-rc-roof-information .hgc-rc-page-next {
  border: 1px solid #ff7a0b;
  background: #ff7410;
  color: #071018;
}

.roofing-shared-proposal-shell .hgc-rc-roof-information .hgc-rc-page-back:is(:hover, :focus-visible) {
  border-color: #ff8618;
  outline: 2px solid rgba(255, 134, 24, .28);
  outline-offset: 1px;
}

.roofing-shared-proposal-shell .hgc-rc-roof-information .hgc-rc-page-next:is(:hover, :focus-visible) {
  border-color: #ff9a43;
  background: #ff8618;
  outline: 2px solid rgba(255, 134, 24, .28);
  outline-offset: 1px;
}

@media (max-width: 900px) {
  .roofing-shared-proposal-shell .hgc-roofing-estimator-switcher {
    grid-template-columns: 1fr;
  }

  .roofing-shared-proposal-shell .hgc-rc-roof-information .hgc-rc-page-navigation {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
}