/*
 * BLACK X responsive operational workflows — Phase 3
 * Scope: Requests Center, Deals, CRM, Reports, Media Library, Rewards,
 * Notifications, WhatsApp and Security Vault.
 * Loads after Phase 1 foundation and Phase 2 core/admin responsive layers.
 */

:root {
  --bx-ops-narrow-gap: clamp(0.6rem, 2.2vw, 0.95rem);
  --bx-ops-panel-padding: clamp(0.9rem, 2.6vw, 1.35rem);
  --bx-ops-local-scroll-min: 42rem;
}

/* Operational surfaces must shrink inside the shared shell instead of widening it. */
:where(
  .request-workflow-hero,
  .request-board-hero,
  .request-form-hero,
  .request-profile-hero,
  .request-related-hero,
  .request-portal-hero,
  .request-hero-grid,
  .request-board-heading,
  .request-profile-heading,
  .request-detail-layout,
  .request-filter-panel,
  .request-form,
  .request-form-grid,
  .request-board-grid,
  .request-match-grid,
  .request-relation-panel,
  .request-assignment-panel,
  .request-timeline,
  .request-notes-stream,
  .bx-quick-modal,
  .deal-overview-heading,
  .deal-board-heading,
  .deal-profile-heading,
  .deal-subpage-heading,
  .deal-conversion-heading,
  .deal-detail-layout,
  .deal-filter-panel,
  .deal-board-grid,
  .deal-form,
  .deal-form-grid,
  .deal-foundation-grid,
  .deal-participant-grid,
  .deal-commission-grid,
  .deal-schedule-list,
  .deal-document-list,
  .deal-notes-stream,
  .deal-stepper,
  .crm-hero-grid,
  .crm-list-head,
  .crm-opportunity-heading,
  .crm-dashboard-grid,
  .crm-card-grid,
  .crm-module-grid,
  .crm-detail-layout,
  .crm-pipeline-layout,
  .crm-filters,
  .crm-form,
  .crm-form-grid,
  .crm-stage-banner,
  .crm-context-banner,
  .crm-stage-column,
  .crm-task-board,
  .crm-task-stack,
  .crm-report-table,
  .report-page,
  .report-filter-bar,
  .report-kpi-grid,
  .report-module-grid,
  .report-table-wrap,
  .report-export-row,
  .media-op-upload,
  .media-op-gallery,
  .media-op-upload-grid,
  .media-op-grid,
  .media-op-primary-panel,
  .media-op-card,
  .media-op-actions,
  .rewards-page,
  .rewards-stat-grid,
  .rewards-benefit-grid,
  .rewards-activity-grid,
  .rewards-adjust-grid,
  .rewards-form-grid,
  .rewards-table-wrap,
  .rewards-redemption-list,
  .rewards-pending-accounts,
  .notification-grid,
  .notification-card,
  .notification-detail-panel,
  .notification-meta-grid,
  .notification-preference-grid,
  .notification-actions,
  .vault-hero-grid,
  .vault-page-head .container,
  .vault-subnav,
  .vault-stat-grid,
  .vault-command-grid,
  .vault-detail-grid,
  .vault-form-grid,
  .vault-policy-grid,
  .vault-table-wrap,
  .vault-filter-bar,
  .vault-metadata-board,
  .vault-permission-grid
) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(
  .request-workflow-card,
  .request-match-grid > *,
  .deal-pipeline-card,
  .deal-financial-summary,
  .deal-relation-panel,
  .deal-assignment-panel,
  .deal-payment-block,
  .deal-client-card,
  .crm-card,
  .crm-subsection,
  .crm-detail-aside > article,
  .crm-task-board article,
  .report-kpi-card,
  .report-module-card,
  .media-op-card,
  .reward-benefit-card,
  .rewards-history-panel,
  .notification-card,
  .notification-detail-panel,
  .vault-policy-card,
  .vault-metadata-board,
  .vault-form-panel
) > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Local data scroll regions: never make the document itself horizontally scroll. */
:where(
  .crm-report-table,
  .report-table-wrap,
  .rewards-table-wrap,
  .vault-table-wrap,
  .deal-stepper
) {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

:where(.crm-report-table, .report-table-wrap, .rewards-table-wrap, .vault-table-wrap, .deal-stepper):focus-visible {
  outline: 2px solid rgba(224, 190, 121, 0.7);
  outline-offset: 2px;
}

/* Text-heavy operational data must wrap without changing business meaning. */
:where(
  .request-workflow-card,
  .request-relation-panel,
  .request-assignment-panel,
  .request-notes-stream,
  .deal-pipeline-card,
  .deal-financial-summary,
  .deal-relation-panel,
  .deal-assignment-panel,
  .deal-document-list,
  .deal-notes-stream,
  .crm-card,
  .crm-detail-aside,
  .crm-task-board,
  .crm-timeline,
  .report-kpi-value,
  .report-table td,
  .media-op-card-body,
  .rewards-history-panel,
  .rewards-table td,
  .notification-card,
  .notification-detail-panel,
  .vault-table td,
  .vault-metadata-board,
  .vault-plaintext,
  .vault-code
) {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Forms and filters keep a stable, touch-friendly contract. */
:where(
  .request-input,
  .deal-input,
  .crm-input,
  .report-filter-bar input,
  .report-filter-bar select,
  .media-op-field input,
  .media-op-field select,
  .rewards-filter input,
  .rewards-filter select,
  .rewards-form-grid input,
  .rewards-form-grid select,
  .rewards-form-grid textarea,
  .vault-filter-bar input,
  .vault-filter-bar select
) {
  min-width: 0;
  max-width: 100%;
}

/* Compact desktop / landscape tablet. */
@media (max-width: 1199px) {
  .request-detail-layout,
  .deal-detail-layout,
  .crm-detail-layout,
  .crm-pipeline-layout,
  .vault-command-grid,
  .vault-detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .request-filter-panel,
  .deal-filter-panel,
  .crm-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .request-filter-panel > :where(.btn, button, a.btn),
  .deal-filter-panel > :where(.btn, button, a.btn),
  .crm-filters > :where(.btn, button, a.btn) {
    min-width: 0;
  }

  .crm-module-grid,
  .crm-card-grid,
  .crm-task-board,
  .report-module-grid,
  .report-kpi-grid,
  .vault-stat-grid,
  .vault-policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rewards-redemption-list > article {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.48fr);
  }
}

/* Tablet portrait and narrow side-by-side panels. */
@media (max-width: 991px) {
  .request-hero-grid,
  .request-board-heading,
  .request-profile-heading,
  .request-portal-heading,
  .deal-overview-heading,
  .deal-board-heading,
  .deal-profile-heading,
  .deal-subpage-heading,
  .deal-conversion-heading,
  .crm-hero-grid,
  .crm-list-head,
  .crm-opportunity-heading,
  .crm-context-banner,
  .vault-page-head .container {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .request-filter-panel,
  .deal-filter-panel,
  .crm-filters,
  .crm-filters-small,
  .request-form-grid,
  .deal-form-grid,
  .crm-form-grid,
  .vault-form-grid,
  .rewards-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .request-board-grid,
  .request-match-grid,
  .deal-board-grid,
  .deal-foundation-grid,
  .deal-participant-grid,
  .deal-commission-grid,
  .crm-dashboard-grid,
  .media-op-grid,
  .rewards-benefit-grid,
  .rewards-activity-grid,
  .rewards-adjust-grid,
  .notification-grid,
  .notification-preference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-stage-banner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .crm-stage-banner > :last-child {
    grid-column: 1 / -1;
  }

  .deal-stepper {
    grid-template-columns: repeat(4, minmax(7rem, 1fr));
    min-width: 0;
    padding-block-end: 0.45rem;
  }

  .deal-stepper > div {
    min-width: 7rem;
  }

  .report-filter-bar > label,
  .vault-filter-bar > label {
    flex: 1 1 min(14rem, 100%);
    min-width: 0;
  }

  .report-filter-bar > :where(.btn, button, a.btn),
  .vault-filter-bar > :where(.btn, button, a.btn) {
    flex: 1 1 10rem;
  }

  .media-op-primary-panel {
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  }
}

/* Phone / narrow split panel. */
@media (max-width: 767px) {
  .request-filter-panel,
  .deal-filter-panel,
  .crm-filters,
  .crm-filters-small,
  .request-form-grid,
  .deal-form-grid,
  .crm-form-grid,
  .vault-form-grid,
  .rewards-form-grid,
  .request-board-grid,
  .request-match-grid,
  .deal-board-grid,
  .deal-foundation-grid,
  .deal-participant-grid,
  .deal-commission-grid,
  .crm-dashboard-grid,
  .crm-card-grid,
  .crm-module-grid,
  .crm-task-board,
  .report-module-grid,
  .report-kpi-grid,
  .media-op-grid,
  .media-op-upload-grid,
  .rewards-benefit-grid,
  .rewards-activity-grid,
  .rewards-adjust-grid,
  .notification-grid,
  .notification-preference-grid,
  .vault-stat-grid,
  .vault-policy-grid,
  .vault-metadata-board dl,
  .vault-permission-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .request-form,
  .deal-form-compact,
  .crm-form,
  .crm-form-shell,
  .media-op-upload,
  .media-op-gallery,
  .rewards-history-panel,
  .rewards-adjust-grid form,
  .rewards-form-section form,
  .vault-form-shell,
  .vault-form-panel,
  .vault-metadata-board,
  .vault-warning-board,
  .vault-action-panel {
    padding: var(--bx-ops-panel-padding);
  }

  .request-subsection-head,
  .deal-subsection-head,
  .crm-panel-head,
  .media-op-head,
  .media-op-group-title,
  .rewards-section-head,
  .notification-card__head,
  .vault-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .request-subsection-head > :where(.btn, a.btn, button),
  .deal-subsection-head > :where(.btn, a.btn, button),
  .crm-panel-head > :where(.btn, a.btn, button),
  .media-op-head > :where(.btn, a.btn, button),
  .rewards-section-head > :where(.btn, a.btn, button),
  .notification-actions > :where(.btn, a.btn, button),
  .vault-section-head > :where(.btn, a.btn, button) {
    max-width: 100%;
  }

  .request-match-grid dl > div,
  .request-assignment-panel dl > div,
  .deal-financial-summary dl > div,
  .deal-assignment-panel dl > div,
  .deal-client-card dl > div,
  .crm-card dl > div,
  .crm-detail-aside dl > div,
  .crm-task-board dl > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.3rem;
  }

  .crm-stage-banner,
  .crm-context-banner {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .crm-stage-banner > :last-child {
    grid-column: auto;
  }

  .crm-stage-column article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .crm-stage-column article > strong {
    grid-column: 2;
  }

  .crm-task-stack article {
    align-items: flex-start;
    flex-direction: column;
  }

  .deal-stepper {
    grid-template-columns: repeat(4, minmax(6.5rem, 1fr));
  }

  .deal-schedule-list article {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .deal-schedule-list article > :last-child {
    grid-column: 1 / -1;
  }

  .deal-document-list article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .deal-document-list article > :last-child {
    grid-column: 1 / -1;
    width: 100%;
  }

  .deal-document-list article > :last-child:where(.btn, a.btn, button) {
    justify-content: center;
  }

  .media-op-primary-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .media-op-actions {
    display: flex;
    align-items: stretch;
  }

  .media-op-actions > :where(.btn, a.btn, button, form) {
    flex: 1 1 min(12rem, 100%);
    min-width: 0;
  }

  .media-op-actions form > :where(.btn, button) {
    width: 100%;
  }

  .rewards-redemption-list > article {
    grid-template-columns: minmax(0, 1fr);
  }

  .rewards-pending-accounts form,
  .rewards-history-panel article,
  .rewards-tier-progress > div,
  .profile-reward-summary__head,
  .profile-reward-progress {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-filter-bar,
  .vault-filter-bar {
    align-items: stretch;
  }

  .report-filter-bar > label,
  .report-filter-bar > :where(.btn, button, a.btn),
  .vault-filter-bar > label,
  .vault-filter-bar > :where(.btn, button, a.btn) {
    width: 100%;
    flex-basis: 100%;
  }

  .report-export-row {
    align-items: stretch;
    flex-direction: column;
  }

  .report-export-note {
    margin-inline: 0;
  }

  .notification-actions {
    align-items: stretch;
  }

  .notification-actions > :where(.btn, a.btn, button, form) {
    flex: 1 1 min(12rem, 100%);
  }

  .notification-actions form > :where(.btn, button) {
    width: 100%;
  }

  .vault-action-row,
  .vault-signal-row {
    align-items: stretch;
  }

  .vault-action-row > :where(.btn, a.btn, button, form),
  .vault-signal-row > :where(.btn, a.btn, button, form) {
    flex: 1 1 min(12rem, 100%);
  }

  .vault-action-row form > :where(.btn, button),
  .vault-signal-row form > :where(.btn, button) {
    width: 100%;
  }
}

/* Very small phones: prioritize one clear action per row. */
@media (max-width: 479px) {
  .request-card-actions,
  .deal-card-actions,
  .crm-card-actions,
  .media-op-actions,
  .rewards-tabs,
  .rewards-pagination,
  .notification-actions,
  .vault-action-row,
  .vault-signal-row {
    width: 100%;
  }

  :where(
    .request-card-actions,
    .deal-card-actions,
    .crm-card-actions,
    .media-op-actions,
    .notification-actions,
    .vault-action-row,
    .vault-signal-row
  ) > :where(.btn, a.btn, button, form) {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  :where(
    .request-card-actions,
    .deal-card-actions,
    .crm-card-actions,
    .media-op-actions,
    .notification-actions,
    .vault-action-row,
    .vault-signal-row
  ) form > :where(.btn, button) {
    width: 100%;
  }

  .request-status-line,
  .deal-card-top,
  .deal-status-line,
  .crm-card-top,
  .notification-card__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .deal-stepper {
    grid-template-columns: repeat(4, minmax(6.25rem, 1fr));
  }

  .crm-score {
    width: 100%;
    min-width: 0;
  }

  .rewards-filter,
  .rewards-filter label,
  .rewards-filter :where(.btn, button, a.btn) {
    width: 100%;
  }

  .vault-subnav {
    padding-block-end: 0.5rem;
  }
}

/* Coarse pointers: preserve usable controls without altering permission visibility. */
@media (pointer: coarse) {
  :where(
    .request-card-actions,
    .deal-card-actions,
    .crm-card-actions,
    .media-op-actions,
    .rewards-tabs,
    .rewards-pagination,
    .notification-actions,
    .vault-action-row,
    .vault-subnav
  ) :where(a, button, .btn) {
    min-block-size: 44px;
  }

  :where(
    .request-input,
    .deal-input,
    .crm-input,
    .report-filter-bar input,
    .report-filter-bar select,
    .media-op-field input,
    .media-op-field select,
    .rewards-filter input,
    .rewards-filter select,
    .vault-filter-bar input,
    .vault-filter-bar select
  ) {
    min-block-size: 44px;
  }
}