/**
 * Phase 13A — final integration / responsive QA overrides.
 * Late-loaded internal CRM layer only. Scoped under body[data-ui-final="13a"].
 * Not a redesign. Public Proposal / Tracking / ZAOG must not load this file.
 */

body[data-ui-final="13a"] {
  --rubus-mobile-nav-clearance: calc(
    var(--mobile-bottom-nav-h, 4rem) + env(safe-area-inset-bottom, 0px) + 1.25rem
  );
  --rubus-z-mobile-overlay: 2200;
  --rubus-z-mobile-overlay-nested: 2300;
  --rubus-z-auth-overlay: 3000;
}

/* ——— Shared focus-visible baseline (keyboard only) ——— */
body[data-ui-final="13a"] :where(
  button,
  a[href],
  input:not([type="hidden"]),
  select,
  textarea,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--ds-color-accent, #0f766e);
  outline-offset: 2px;
}

body[data-ui-final="13a"] :where(
  button,
  a[href],
  input,
  select,
  textarea,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):disabled:focus-visible,
body[data-ui-final="13a"] :where(
  button,
  a[href],
  input,
  select,
  textarea,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
)[aria-disabled="true"]:focus-visible {
  outline: none;
}

/* ——— Mobile overlay z-index ladder (above bottom nav ~2000, below auth 3000) ——— */
@media (max-width: 767px) {
  body[data-ui-final="13a"] .operations-detail-modal {
    z-index: var(--rubus-z-mobile-overlay);
  }

  body[data-ui-final="13a"] .flow-editor-drawer {
    z-index: var(--rubus-z-mobile-overlay);
  }

  body[data-ui-final="13a"] .operations-support-drawer {
    z-index: var(--rubus-z-mobile-overlay-nested);
  }

  body[data-ui-final="13a"] .offer-revision-modal {
    z-index: var(--rubus-z-mobile-overlay-nested);
  }

  /* Must stay above .flow-editor-drawer when stacked */
  body[data-ui-final="13a"] .flow-analysis-modal {
    z-index: var(--rubus-z-mobile-overlay-nested);
  }
}

/*
 * Operations Detail — opaque mobile content surface.
 * Root cause: .operations-detail-modal__dialog animates via operations-modal-in
 * (opacity 0 → 1) while .operations-detail-panel / __body / __content are
 * background:transparent and rely on the dialog layer. Mid-animation (and any
 * translucent paint) lets Dashboard/Sales text bleed through the modal surface.
 * Keep z-index ladder unchanged; dimming remains on __backdrop only.
 * Selectors include #operationsDetailModal.operations-detail-modern so height
 * clearance can override the modern full-bleed 100dvh dialog rule.
 */
@media (max-width: 767px) {
  body[data-ui-final="13a"] #operationsDetailModal.operations-detail-modern .operations-detail-modal__dialog,
  body[data-ui-final="13a"] .operations-detail-modal .operations-detail-modal__dialog {
    background-color: #ffffff;
    opacity: 1;
    animation: none;
    /* Leave the fixed bottom-nav band outside the opaque surface (z-order unchanged). */
    height: calc(100dvh - var(--mobile-bottom-nav-h, 4rem) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--mobile-bottom-nav-h, 4rem) - env(safe-area-inset-bottom, 0px));
  }

  body[data-ui-final="13a"] #operationsDetailModal.operations-detail-modern .operations-detail-modal__backdrop,
  body[data-ui-final="13a"] .operations-detail-modal .operations-detail-modal__backdrop {
    bottom: calc(var(--mobile-bottom-nav-h, 4rem) + env(safe-area-inset-bottom, 0px));
  }

  body[data-ui-final="13a"] #operationsDetailModal.operations-detail-modern .operations-detail-modal__body,
  body[data-ui-final="13a"] #operationsDetailModal.operations-detail-modern .operations-detail-panel,
  body[data-ui-final="13a"] #operationsDetailModal.operations-detail-modern .operations-detail-modal__content,
  body[data-ui-final="13a"] .operations-detail-modal .operations-detail-modal__body,
  body[data-ui-final="13a"] .operations-detail-modal .operations-detail-panel,
  body[data-ui-final="13a"] .operations-detail-modal .operations-detail-modal__content {
    background-color: #ffffff;
  }
}

/* ——— Products mobile bottom-nav clearance ——— */
@media (max-width: 767px) {
  /*
   * Border-box + max-height so padding-bottom consumes layout space inside the
   * scrollport and interactive controls cannot paint under the fixed bottom nav
   * at rest (discovery: card actions at y≈865+ with navTop≈876).
   */
  body[data-ui-final="13a"] #productsView.products-list-modern {
    /* Keep the entire view box above the fixed bottom nav. */
    max-height: calc(100dvh - var(--rubus-mobile-nav-clearance) - 5.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: var(--rubus-mobile-nav-clearance);
    scroll-padding-bottom: var(--rubus-mobile-nav-clearance);
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  body[data-ui-final="13a"] #productsView.products-list-modern [data-product-section="list"],
  body[data-ui-final="13a"] #productsView.products-list-modern .pl-mobile-list,
  body[data-ui-final="13a"] #productsView.products-list-modern .pl-table-wrap,
  body[data-ui-final="13a"] #productsView.products-list-modern #productList {
    padding-bottom: 0.5rem;
    scroll-padding-bottom: var(--rubus-mobile-nav-clearance);
  }

  body[data-ui-final="13a"] #productFormSection.products-form-modern,
  body[data-ui-final="13a"] #productFormSection.products-form-modern.active {
    max-height: calc(100dvh - var(--rubus-mobile-nav-clearance) - 5.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: var(--rubus-mobile-nav-clearance);
    scroll-padding-bottom: var(--rubus-mobile-nav-clearance);
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  body[data-ui-final="13a"] #productFormSection.products-form-modern .pf-toolbar {
    margin-bottom: 0.5rem;
  }
}

/* ——— Toast above mobile bottom nav ——— */
@media (max-width: 767px) {
  body[data-ui-final="13a"] .toast {
    bottom: var(--rubus-mobile-nav-clearance);
    right: max(16px, env(safe-area-inset-right, 0px));
  }
}

/* ——— Opportunities mobile tap targets (~44px) ——— */
@media (max-width: 767px) {
  body[data-ui-final="13a"] #pipelineView.is-list-layout .pipeline-stage-filter button,
  body[data-ui-final="13a"] #pipelineView.is-board-layout .pipeline-stage-filter button,
  body[data-ui-final="13a"] #pipelineView.is-list-layout .pipeline-layout-toggle .view-toggle-btn,
  body[data-ui-final="13a"] #pipelineView.is-board-layout .pipeline-layout-toggle .view-toggle-btn,
  body[data-ui-final="13a"] #pipelineView button,
  body[data-ui-final="13a"] #pipelineView .btn,
  body[data-ui-final="13a"] #pipelineView .view-toggle-btn,
  body[data-ui-final="13a"] #pipelineView.is-list-layout .opportunities-new-btn,
  body[data-ui-final="13a"] #pipelineView.is-list-layout .opportunities-toolbar-new-btn,
  body[data-ui-final="13a"] #pipelineView.is-board-layout .opportunities-toolbar-new-btn,
  body[data-ui-final="13a"] #pipelineList.opportunities-list-modern .opportunities-view-btn,
  body[data-ui-final="13a"] #pipelineList.opportunities-list-modern .opportunities-overflow__summary,
  body[data-ui-final="13a"] #pipelineList.opportunities-list-modern .opportunities-overflow__item,
  body[data-ui-final="13a"] #pipelineList.opportunities-list-modern .sortable-th-button,
  body[data-ui-final="13a"] #pipelineView.is-board-layout #pipelineBoard.opportunities-kanban-modern .deal-actions .small-button,
  body[data-ui-final="13a"] #pipelineView.is-board-layout #pipelineBoard.opportunities-kanban-modern .deal-actions .danger-icon-button,
  body[data-ui-final="13a"] #dealDialog button,
  body[data-ui-final="13a"] #dealDialog.is-opportunity-create #closeDealDialog,
  body[data-ui-final="13a"] #dealDialog .btn-compact,
  body[data-ui-final="13a"] #dealDetailDialog button,
  body[data-ui-final="13a"] #dealDetailDialog .opportunities-detail-form .opportunities-detail-close,
  body[data-ui-final="13a"] #dealDetailDialog .opportunities-detail-form .opportunities-detail-actions .btn-compact,
  body[data-ui-final="13a"] .user-menu__trigger,
  body[data-ui-final="13a"] .topbar button {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
  }

  body[data-ui-final="13a"] #pipelineView.is-board-layout .pipeline-layout-toggle .view-toggle-btn,
  body[data-ui-final="13a"] #pipelineView.is-list-layout .pipeline-layout-toggle .view-toggle-btn,
  body[data-ui-final="13a"] #dealDialog.is-opportunity-create #closeDealDialog,
  body[data-ui-final="13a"] #dealDetailDialog .opportunities-detail-form .opportunities-detail-close,
  body[data-ui-final="13a"] #pipelineList.opportunities-list-modern .opportunities-overflow__summary,
  body[data-ui-final="13a"] .user-menu__trigger {
    width: 44px;
    height: 44px;
  }
}