/* iPad annotation rules — 2026-10-07.
   Presentation-only corrections. Estimator pricing, save hooks, room data,
   Relay files, and build behavior remain owned by their existing modules. */
:root {
  --wbe-orange: #f58216;
  --wbe-orange-hover: #ff9633;
  --wbe-orange-wash: rgba(245, 130, 22, .13);
}

/* WBE rule: dropdown interaction is orange everywhere. */
#app .premium-app select,
#app .premium-app [role="combobox"],
#app .premium-app .painting-form-select-toggle {
  accent-color: var(--wbe-orange) !important;
}
#app .premium-app select:is(:hover, :focus, :focus-visible),
#app .premium-app [role="combobox"]:is(:hover, :focus, :focus-visible),
#app .premium-app .painting-form-select-toggle:is(:hover, :focus-visible) {
  border-color: var(--wbe-orange) !important;
  outline: 2px solid var(--wbe-orange) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}
#app .premium-app select option:is(:checked, :hover, :focus),
#app .premium-app [role="listbox"] [role="option"]:is(:hover, :focus-visible, [aria-selected="true"]),
#app .premium-app .painting-form-select-menu button:is(:hover, :focus-visible, [aria-selected="true"]) {
  color: #120b05 !important;
  background: var(--wbe-orange) linear-gradient(var(--wbe-orange), var(--wbe-orange)) !important;
  outline-color: var(--wbe-orange) !important;
}

/* The template editor does not need a three-step banner above its real work. */
#app .premium-app .painting-scope-template-shell .painting-template-progress {
  display: none !important;
}

/* The Previous Step / Next Step cards are no longer part of page navigation. */
#app .premium-app .app-workflow-nav {
  display: none !important;
}

/* Keep the AI scope tools orderly when the canvas narrows. */
#app .premium-app .painting-module-shell > .core-ai-scope-tools {
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
#app .premium-app .painting-module-shell > .core-ai-scope-tools > strong {
  flex: 1 0 100% !important;
  margin-bottom: 2px !important;
}
#app .premium-app .painting-module-shell > .core-ai-scope-tools > button {
  min-width: 0 !important;
  min-height: 40px !important;
  white-space: normal !important;
}

/* Approved proposal rail order: customer display first, proposal actions next,
   and the internal estimating controls available in one collapsed card. */
#app .premium-app .painting-rail-estimate-details {
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid #2d3b48 !important;
  border-bottom: 1px solid #2d3b48 !important;
  background: #0a1016 !important;
}
#app .premium-app .painting-rail-estimate-details > summary {
  display: flex !important;
  min-height: 46px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 11px 13px !important;
  color: #f4f7f9 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  list-style: none !important;
}
#app .premium-app .painting-rail-estimate-details > summary::-webkit-details-marker {
  display: none !important;
}
#app .premium-app .painting-rail-estimate-details > summary > span {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#app .premium-app .painting-rail-estimate-details > summary svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--wbe-orange) !important;
}
#app .premium-app .painting-rail-estimate-details[open] > summary > svg:last-child {
  transform: rotate(180deg) !important;
}
#app .premium-app .painting-rail-estimate-details > div {
  display: grid !important;
  gap: 10px !important;
  padding: 0 12px 13px !important;
}
#app .premium-app .painting-rail-essential-actions .painting-customer-display {
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid #22d3ee !important;
  border-left-width: 4px !important;
  border-radius: 8px !important;
  background: #0a1b28 !important;
}

@media (min-width: 761px) and (max-width: 1366px) {
  /* iPad uses the real app navigation. The phone card bar was covering pages. */
  #app .premium-app .mobile-bottom-nav,
  #app .premium-app .content + .mobile-bottom-nav,
  #app .premium-app .content:has(.painting-proposal-flow) + .mobile-bottom-nav {
    display: none !important;
  }

  #app .premium-app .content,
  #app .premium-app .painting-proposal-flow.estimate-service-module {
    padding-bottom: 28px !important;
  }

  /* Touch scrolling stays available, but its desktop-looking bar does not. */
  #app .premium-app .dashboard-pipeline-row,
  #app .premium-app :is(.pipeline-board, .lead-pipeline-board, .calendar-month-scroll-v4),
  #app .premium-app .painting-reference-room,
  #app .premium-app .painting-pricing-workspace > .paint-center {
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  #app .premium-app .dashboard-pipeline-row::-webkit-scrollbar,
  #app .premium-app :is(.pipeline-board, .lead-pipeline-board, .calendar-month-scroll-v4)::-webkit-scrollbar,
  #app .premium-app .painting-reference-room::-webkit-scrollbar,
  #app .premium-app .painting-pricing-workspace > .paint-center::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
  #app .premium-app .dashboard-v1 .dashboard-pipeline-row {
    scroll-snap-type: none !important;
    overscroll-behavior-x: contain !important;
  }
  #app .premium-app .dashboard-v1 .dashboard-pipeline-row > * {
    scroll-snap-align: none !important;
    transform: none !important;
  }
  #app .premium-app .dashboard-v1 :is(.dashboard-pipeline-row, .dashboard-pipeline-row > *, .panel, article) {
    scroll-behavior: auto !important;
  }

  /* Calendar availability is one compact working row in landscape. */
  #app .premium-app .ironflow-calendar-page .calendar-month-availability-v4 {
    grid-template-columns: minmax(185px, auto) minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 8px 10px !important;
    min-height: 64px !important;
    padding: 9px 12px !important;
  }
  #app .premium-app .ironflow-calendar-page .calendar-month-open-slots-v4 {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  #app .premium-app .ironflow-calendar-page .calendar-month-route-v4 {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
  #app .premium-app .ironflow-calendar-page .calendar-mobile-weekend-hint {
    display: none !important;
  }

  /* The proposal summary belongs in the layout; it must never cover the work. */
  #app .premium-app .painting-shared-estimate-page .estimate-shared-layout,
  #app .premium-app .painting-time-materials-service-page .estimate-shared-layout,
  #app .premium-app .painting-shared-estimate-page .estimate-shared-layout.summary-collapsed,
  #app .premium-app .painting-time-materials-service-page .estimate-shared-layout.summary-collapsed {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    align-items: start !important;
    gap: 12px !important;
  }
  #app .premium-app .painting-shared-estimate-page .painting-shared-reference-rail,
  #app .premium-app .painting-time-materials-service-page .painting-shared-reference-rail,
  #app .premium-app .painting-proposal-flow .painting-reference-summary {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }
  #app .premium-app .painting-shared-reference-rail.is-collapsed {
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
  }

  /* All rail actions use the same calm card rhythm as the approved rail. */
  #app .premium-app .painting-shared-reference-rail .painting-summary-approval-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 12px 12px !important;
  }
  #app .premium-app .painting-shared-reference-rail .painting-summary-approval-actions > :is(button, a, .btn, .primary),
  #app .premium-app .painting-shared-reference-rail .proposal-acceptance-actions > :is(button, a) {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    border-radius: 7px !important;
  }
  #app .premium-app .painting-shared-reference-rail .proposal-acceptance-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #app .premium-app .painting-shared-reference-rail .painting-rail-essential-actions > summary {
    min-height: 48px !important;
  }

  /* Compact the record facts so the estimator starts sooner. */
  #app .premium-app .active-project-context,
  #app .premium-app .proposal-record-strip,
  #app .premium-app .proposal-estimator-record-strip {
    min-height: 0 !important;
    padding: 10px 12px !important;
  }
  #app .premium-app :is(.active-project-context, .proposal-record-strip, .proposal-estimator-record-strip)
  :is(.fresh-builder-start-fields, .proposal-record-grid, .proposal-estimator-record-grid) {
    gap: 8px !important;
  }
  #app .premium-app :is(.active-project-context, .proposal-record-strip, .proposal-estimator-record-strip)
  :is(label, article, .proposal-record-item) {
    min-height: 52px !important;
    padding: 8px 10px !important;
  }

  /* Preserve the room selector. It becomes a visible touch row. */
  #app .premium-app .painting-module-shell.interior .painting-pricing-workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    overflow: visible !important;
  }
  #app .premium-app .painting-module-shell.interior .painting-reference-rooms {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #app .premium-app .painting-module-shell.interior .painting-reference-rooms .paint-room-list {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  #app .premium-app .painting-module-shell.interior .painting-reference-rooms .paint-room-list::-webkit-scrollbar {
    display: none !important;
  }
  #app .premium-app .painting-module-shell.interior .painting-reference-rooms .paint-room-card-shell {
    flex: 0 0 clamp(205px, 32vw, 270px) !important;
    min-width: 205px !important;
  }
  #app .premium-app .painting-module-shell.interior .painting-reference-rooms .painting-whole-home-card {
    margin: 0 8px 8px !important;
  }
  #app .premium-app .painting-module-shell.interior .painting-reference-rooms .painting-reorder-button {
    width: calc(100% - 16px) !important;
    margin: 0 8px 8px !important;
  }
  #app .premium-app .painting-module-shell.interior .painting-pricing-workspace > .paint-center {
    min-width: 0 !important;
    overflow: visible !important;
  }
  #app .premium-app .painting-module-shell.interior .painting-reference-room {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  #app .premium-app .painting-module-shell.interior .painting-reference-room .painting-grouped-table {
    min-width: 720px !important;
  }

  /* Compact, balanced AI tools at iPad widths. */
  #app .premium-app .painting-module-shell > .core-ai-scope-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 10px !important;
  }
  #app .premium-app .painting-module-shell > .core-ai-scope-tools > strong {
    grid-column: 1 / -1 !important;
  }
  #app .premium-app .painting-module-shell > .core-ai-scope-tools > button:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  /* Portrait: work first, then a full-width non-overlapping proposal rail. */
  #app .premium-app .painting-proposal-flow .pe-layout,
  #app .premium-app .painting-shared-estimate-page .estimate-shared-layout,
  #app .premium-app .painting-time-materials-service-page .estimate-shared-layout,
  #app .premium-app .painting-shared-estimate-page .estimate-shared-layout.summary-collapsed,
  #app .premium-app .painting-time-materials-service-page .estimate-shared-layout.summary-collapsed {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #app .premium-app .painting-shared-reference-rail.is-collapsed > .painting-shared-service-rail,
  #app .premium-app .painting-shared-reference-rail.is-collapsed > .painting-rail-work-order-host {
    display: block !important;
  }
  #app .premium-app .painting-shared-reference-rail.is-collapsed > .painting-rail-collapse-toggle span {
    display: block !important;
  }
  #app .premium-app .painting-module-shell > .core-ai-scope-tools {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #app .premium-app .painting-module-shell > .core-ai-scope-tools > :is(strong, button:last-child) {
    grid-column: 1 !important;
  }
  #app .premium-app .painting-module-shell.interior .painting-reference-rooms .paint-room-card-shell {
    flex-basis: min(72vw, 260px) !important;
  }

  /* Portrait keeps the same compact card, with times on a short second row. */
  #app .premium-app .ironflow-calendar-page .calendar-month-availability-v4 {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
  }
  #app .premium-app .ironflow-calendar-page .calendar-month-open-slots-v4 {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
  #app .premium-app .ironflow-calendar-page .calendar-month-route-v4 {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}