/* Shared right-rail Budget Health fit
   Keep the four compact metrics readable inside every Painter Pro sales rail. */
.premium-app .painting-shared-reference-rail .painting-shared-budget,
.premium-app .painting-shared-reference-rail .painting-shared-budget > .painting-financials,
.premium-app .painting-shared-reference-rail .painting-financial-grid,
.premium-app .painting-shared-reference-rail .painting-financial-grid > * {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.premium-app .painting-shared-reference-rail .painting-financial-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

.premium-app .painting-shared-reference-rail .painting-financial-grid > label,
.premium-app .painting-shared-reference-rail .painting-financial-grid > div {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  grid-template-rows: minmax(28px, auto) auto !important;
  grid-template-areas:
    "metric-icon metric-label"
    "metric-value metric-value" !important;
  align-items: center !important;
  gap: 5px 7px !important;
  width: 100% !important;
  min-height: 78px !important;
  padding: 9px !important;
  overflow: hidden !important;
}

.premium-app .painting-shared-reference-rail .painting-financial-grid > label > svg,
.premium-app .painting-shared-reference-rail .painting-financial-grid > div > svg {
  grid-area: metric-icon !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
}

.premium-app .painting-shared-reference-rail .painting-financial-grid > label > span,
.premium-app .painting-shared-reference-rail .painting-financial-grid > div > span {
  grid-area: metric-label !important;
  min-width: 0 !important;
  color: #d7e1e7 !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

.premium-app .painting-shared-reference-rail .painting-financial-grid > label > input,
.premium-app .painting-shared-reference-rail .painting-financial-grid > div > strong {
  grid-area: metric-value !important;
  justify-self: stretch !important;
  align-self: end !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  color: #f7fbff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.premium-app .painting-shared-reference-rail .painting-financial-grid > label > input {
  min-height: 30px !important;
  padding: 4px 7px !important;
}

.premium-app .painting-shared-reference-rail .painting-financials > small {
  display: block !important;
  min-width: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 760px) {
  .premium-app .painting-shared-reference-rail .painting-financial-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .premium-app .painting-shared-reference-rail .painting-financial-grid > label,
  .premium-app .painting-shared-reference-rail .painting-financial-grid > div {
    grid-template-columns: 30px minmax(0, 1fr) minmax(72px, auto) !important;
    grid-template-rows: auto !important;
    grid-template-areas: "metric-icon metric-label metric-value" !important;
    min-height: 52px !important;
  }
}