/* Painter Pro shared proposal standard: dark canvas, crisp type, and a
   collapsible summary rail. Presentation only; estimator math is untouched. */

.painting-shared-estimate-page,
.painting-time-materials-service-page,
.painting-shared-estimate-page .estimate-shared-layout,
.painting-time-materials-service-page .estimate-shared-layout,
.painting-shared-estimate-page .estimate-shared-layout>main,
.painting-time-materials-service-page .estimate-shared-layout>main,
.pe-live .painting-pricing-workspace,
.pe-live .paint-center,
.pe-live .painting-module-shell,
.pe-live .paint-pricing-card,
.pe-live .paint-scope-areas,
.pe-live .proposal-media-workspace {
  background: #070b10 !important;
}

.painting-shared-estimate-page,
.painting-time-materials-service-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}
.painting-shared-estimate-page .estimate-shared-layout,
.painting-time-materials-service-page .estimate-shared-layout {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0,1fr) 304px !important;
}
.painting-shared-estimate-page .estimate-shared-layout.summary-collapsed,
.painting-time-materials-service-page .estimate-shared-layout.summary-collapsed {
  grid-template-columns: minmax(0,1fr) 58px !important;
}
.painting-shared-estimate-page .estimate-shared-layout>*,
.painting-time-materials-service-page .estimate-shared-layout>*,
.painting-shared-estimate-page .painting-module-shell,
.painting-time-materials-service-page .painting-module-shell {
  min-width: 0 !important;
  max-width: 100% !important;
}
.painting-shared-estimate-page .painting-embedded-exact,
.painting-time-materials-service-page .painting-embedded-exact {
  min-width: 0 !important;
  overflow-x: auto !important;
}

.pe-live .painting-pricing-workspace,
.pe-live .paint-center,
.pe-live .paint-scope-areas,
.pe-live .paint-pricing-card,
.pe-live .proposal-media-workspace {
  border-color: #2d3b48 !important;
  box-shadow: none !important;
}

/* Keep room creation visible at the top of every area rail while its list
   scrolls. This applies to interior, exterior, cabinet, deck and specialty. */
.pe-live .paint-scope-areas>.paint-add-room,
.pe-live .painting-pricing-workspace>.paint-rooms>.paint-add-room {
  position: sticky !important;
  top: 8px;
  z-index: 8;
  display: flex !important;
  width: calc(100% - 16px) !important;
  min-height: 44px !important;
  margin: 8px !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  visibility: visible !important;
}

/* The shared header is a flat utility row. Service and pricing illuminate
   with an orange underline instead of pill/oval containers. */
.painting-shared-estimate-top .painting-service-header-actions {
  border-left: 1px solid #314758 !important;
}
.painting-header-service-controls {
  width: 100%;
  grid-template-columns: minmax(230px,1.25fr) minmax(170px,.85fr) minmax(190px,auto) !important;
}
.painting-header-service-select,
.painting-header-method {
  border: 0 !important;
  border-right: 1px solid #314758 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.painting-header-service-select:hover,
.painting-header-service-select:focus-within,
.painting-header-method:hover,
.painting-header-method:focus-visible {
  background: #15110d !important;
  box-shadow: inset 0 -3px 0 #ff861f !important;
}
.painting-header-service-select>small,
.painting-header-method>small,
.painting-shared-estimate-top .painting-estimate-identity small {
  font-family: "Segoe UI",Arial,sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.painting-header-service-select select,
.painting-header-method strong,
.painting-shared-estimate-top .painting-estimate-identity strong {
  font-family: "Segoe UI",Arial,sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
.painting-header-method>span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
.painting-header-method>span svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #ff861f;
}
.painting-header-service-select>span {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Shared rail: native Segoe UI, integer sizes, no compositing effects. */
.premium-app .painting-shared-reference-rail,
.premium-app .painting-shared-reference-rail :is(h3,h4,p,span,small,strong,b,dt,dd,em,summary,button,input,select,label) {
  font-family: "Segoe UI",Arial,sans-serif !important;
  font-synthesis: none !important;
  font-kerning: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: auto !important;
  text-shadow: none !important;
  filter: none !important;
  letter-spacing: 0 !important;
}
.painting-shared-reference-rail {
  position: relative;
  min-width: 0;
  background: #070b10 !important;
  border: 1px solid #2d3b48 !important;
  box-shadow: none !important;
}
.painting-shared-reference-rail .painting-shared-service-rail {
  background: #070b10 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.painting-rail-collapse-toggle {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid #2d3b48;
  border-radius: 0;
  background: #0b1219;
  color: #dce7ee;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.painting-rail-collapse-toggle:hover,
.painting-rail-collapse-toggle:focus-visible {
  color: #fff;
  background: #17120e;
  box-shadow: inset 3px 0 0 #ff861f;
  outline: none;
}
.painting-rail-collapse-toggle svg {width: 20px;height: 20px;color:#ff861f}
.painting-rail-collapse-toggle span {flex:1;text-align:left}

.painting-shared-reference-rail.is-collapsed {
  width: 58px;
  min-height: 58px;
  overflow: hidden;
}
.painting-shared-reference-rail.is-collapsed>.painting-rail-collapse-toggle {
  min-height: 58px;
  justify-content: center;
  padding: 8px;
  border-bottom: 0;
}
.painting-shared-reference-rail.is-collapsed>.painting-rail-collapse-toggle span,
.painting-shared-reference-rail.is-collapsed>.painting-shared-service-rail,
.painting-shared-reference-rail.is-collapsed>.painting-rail-work-order-host {display:none!important}

.painting-rail-essential-actions {
  margin: 0;
  border: 0;
  border-bottom: 1px solid #2d3b48;
  background: #0a1016;
}
.painting-rail-essential-actions>summary {
  display:flex;
  min-height:46px;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 13px;
  color:#f4f7f9;
  font-size:15px !important;
  font-weight:700 !important;
  cursor:pointer;
  list-style:none;
}
.painting-rail-essential-actions>summary::-webkit-details-marker{display:none}
.painting-rail-essential-actions>summary>span{display:flex;align-items:center;gap:8px}
.painting-rail-essential-actions>summary svg{width:18px;height:18px;color:#ff861f}
.painting-rail-essential-actions[open]>summary>svg:last-child{transform:rotate(180deg)}
.painting-rail-essential-actions>div{display:grid;gap:10px;padding:0 12px 13px}
.painting-rail-essential-actions .painting-customer-display {
  display:grid !important;
  gap:7px;
  color:#f4f7f9 !important;
  font-size:14px !important;
  font-weight:700 !important;
}
.painting-rail-essential-actions .painting-customer-display select {
  min-height:42px;
  font-size:14px !important;
  font-weight:600 !important;
}
.painting-rail-essential-actions .painting-shared-budget {margin:0!important}
.painting-rail-essential-actions .painting-summary-utilities,
.painting-rail-essential-actions .summary-actions {display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
.painting-rail-essential-actions :is(.painting-summary-utilities button,.summary-actions button) {
  min-height:42px!important;
  font-size:14px!important;
  font-weight:700!important;
}
.painting-customer-display-anchor {
  padding: 12px;
  border-bottom: 1px solid #2d3b48;
  background: #070b10;
}
.painting-customer-display-anchor .painting-customer-display {
  display: grid !important;
  gap: 7px;
  margin: 0 !important;
  color: #f4f7f9 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.painting-customer-display-anchor .painting-customer-display select {
  width: 100%;
  min-height: 42px;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.painting-rail-save-status {
  display:flex;
  min-height:38px;
  align-items:center;
  gap:8px;
  margin:0;
  padding:8px 10px;
  border:1px solid #315064;
  border-radius:6px;
  background:#09141c;
  color:#c8d6df;
  font-size:13px!important;
  font-weight:600!important;
}
.painting-rail-save-status svg{width:17px;height:17px;color:#58d68d}
.painting-rail-save-status.saving svg{color:#ff861f;animation:painting-save-spin .9s linear infinite}
.painting-rail-save-status.saved{border-color:#256c4a;background:#091912;color:#a9efc8}
@keyframes painting-save-spin{to{transform:rotate(360deg)}}

.painting-shared-reference-rail .shared-estimator-section h3 {font-size:15px!important;font-weight:700!important}
.painting-shared-reference-rail .shared-estimator-current-service header strong {font-size:16px!important}
.painting-shared-reference-rail .shared-estimator-current-service header small,
.painting-shared-reference-rail .shared-estimator-warning {font-size:13px!important}
.painting-shared-reference-rail :is(.shared-estimator-service-profit,.shared-estimator-primary-facts,.shared-estimator-deposit,.shared-estimator-balance) {font-size:14px!important;line-height:1.4!important}
.painting-shared-reference-rail :is(.shared-estimator-disclosure summary,.painting-shared-budget summary) {font-size:14px!important;font-weight:700!important}

/* Landscape tablets get a true slide-over rail. It starts open so the
   proposal controls are discoverable, then reduces to a 58px handle without
   forcing the estimator wider than the screen. */
@media(min-width:901px) and (max-width:1366px){
  .painting-shared-estimate-page .estimate-shared-layout,
  .painting-time-materials-service-page .estimate-shared-layout,
  .painting-shared-estimate-page .estimate-shared-layout.summary-collapsed,
  .painting-time-materials-service-page .estimate-shared-layout.summary-collapsed{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .painting-shared-estimate-page .painting-shared-reference-rail,
  .painting-time-materials-service-page .painting-shared-reference-rail{
    position:fixed!important;
    z-index:950!important;
    top:152px!important;
    right:12px!important;
    width:320px!important;
    max-height:calc(100vh - 168px)!important;
    overflow:auto!important;
    border-radius:8px!important;
    box-shadow:0 16px 42px rgba(0,0,0,.42)!important;
  }
  .painting-shared-estimate-page .painting-shared-reference-rail.is-collapsed,
  .painting-time-materials-service-page .painting-shared-reference-rail.is-collapsed{
    width:58px!important;
    height:58px!important;
    min-height:58px!important;
    overflow:hidden!important;
    box-shadow:0 8px 24px rgba(0,0,0,.34)!important;
  }
}

@media(max-width:900px){
  .painting-shared-estimate-page .estimate-shared-layout,
  .painting-time-materials-service-page .estimate-shared-layout,
  .painting-shared-estimate-page .estimate-shared-layout.summary-collapsed,
  .painting-time-materials-service-page .estimate-shared-layout.summary-collapsed{grid-template-columns:minmax(0,1fr)!important}
  .painting-shared-reference-rail.is-collapsed{width:100%;min-height:48px}
  .painting-shared-reference-rail.is-collapsed>.painting-rail-collapse-toggle{min-height:48px;justify-content:flex-start}
  .painting-shared-reference-rail.is-collapsed>.painting-rail-collapse-toggle span{display:block!important}
}