/**
 * Recommendation workflow — phone-optimised UI (email preview, security distribution, review).
 * Scoped to .rec-workflow-mobile; safe to load globally.
 */

@media (max-width: 991.98px) {
  body.modern-app .rec-workflow-mobile {
    /* Bottom nav + sticky Record/Email bar — room so row actions (delete) are tappable */
    padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px));
  }

  /* Page header: title above actions */
  body.modern-app .rec-workflow-mobile .rec-page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem;
  }

  body.modern-app .rec-workflow-mobile .rec-page-header h1 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 0;
  }

  body.modern-app .rec-workflow-mobile .rec-page-header h5 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 0;
  }

  body.modern-app .rec-workflow-mobile .rec-page-header .btn {
    width: 100%;
    min-height: 44px;
  }

  body.modern-app .rec-workflow-mobile .rec-page-header h1 small {
    display: block;
    font-size: 0.85rem;
    margin-top: 0.25rem;
  }

  /* Primary / secondary actions — full-width touch targets */
  body.modern-app .rec-workflow-mobile .rec-mobile-action-bar {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    width: 100%;
  }

  body.modern-app .rec-workflow-mobile .rec-mobile-action-bar .btn {
    width: 100%;
    min-height: 44px;
    margin: 0 !important;
    justify-content: center;
  }

  body.modern-app .rec-workflow-mobile .rec-mobile-action-bar-inline {
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  body.modern-app .rec-workflow-mobile .rec-mobile-action-bar-inline .btn {
    width: 100%;
    min-height: 44px;
  }

  /* Summary metric cards — 2×2 grid on phone */
  body.modern-app .rec-workflow-mobile .rec-summary-grid > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 0.5rem;
  }

  body.modern-app .rec-workflow-mobile .rec-summary-grid .card-body {
    padding: 0.65rem;
  }

  body.modern-app .rec-workflow-mobile .rec-summary-grid h4,
  body.modern-app .rec-workflow-mobile .rec-summary-grid h3 {
    font-size: 1rem;
    margin-bottom: 0;
  }

  body.modern-app .rec-workflow-mobile .rec-summary-grid h6,
  body.modern-app .rec-workflow-mobile .rec-summary-grid .card-title {
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
  }

  /* Email preview pane */
  body.modern-app .rec-workflow-mobile .rec-email-preview-pane {
    padding: 0.75rem !important;
    max-height: min(55vh, 480px) !important;
  }

  body.modern-app .rec-workflow-mobile .rec-email-preview-pane .tab-content {
    padding: 0.75rem !important;
    min-height: 200px !important;
  }

  body.modern-app .rec-workflow-mobile #emailPreview {
    padding: 0.75rem !important;
    min-height: 180px !important;
    font-size: 0.875rem;
  }

  body.modern-app .rec-workflow-mobile #emailPreview table {
    font-size: 0.8rem;
  }

  body.modern-app .rec-workflow-mobile #emailPreview table th,
  body.modern-app .rec-workflow-mobile #emailPreview table td {
    padding: 0.35rem;
  }

  body.modern-app .rec-workflow-mobile #emailPlainText {
    font-size: 0.8rem;
    rows: 12;
  }

  /* Card headers with collapse toggle */
  body.modern-app .rec-workflow-mobile .card-header .btn.float-end,
  body.modern-app .rec-workflow-mobile .card-header .float-end {
    float: none !important;
    display: block;
    width: 100%;
    margin-top: 0.5rem;
  }

  /* Larger inputs in security tables */
  body.modern-app .rec-workflow-mobile .section1-input,
  body.modern-app .rec-workflow-mobile .future-weight-input,
  body.modern-app .rec-workflow-mobile .amount-input,
  body.modern-app .rec-workflow-mobile .quantity-input,
  body.modern-app .rec-workflow-mobile .allocation-amount-input {
    min-height: 44px !important;
    font-size: 1rem !important;
    max-width: none !important;
    width: 100% !important;
  }

  body.modern-app .rec-workflow-mobile .input-group-sm .form-control,
  body.modern-app .rec-workflow-mobile .form-control-sm {
    min-height: 44px;
    font-size: 1rem;
  }

  /* Card-style tables: see mobile-ui.css (.rec-card-table / .mobile-card-table) */

  /* Section 1 delete — full-width touch target in card layout */
  body.modern-app .rec-workflow-mobile .delete-row-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
    touch-action: manipulation;
  }

  body.modern-app .rec-workflow-mobile .rec-card-table tbody td:last-child {
    justify-items: end;
    padding-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
    margin-top: 0.25rem;
  }

  body.modern-app .rec-workflow-mobile .rec-card-table tbody td:last-child::before {
    content: attr(data-label);
  }

  /* Checkbox sizing in rec workflow */
  body.modern-app .rec-workflow-mobile .rec-card-table tbody td .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
  }

  /* Footer totals / card host overflow: mobile-ui.css */

  /* Sticky bottom primary actions (security distribution) */
  body.modern-app .rec-workflow-mobile .rec-sticky-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(8px);
  }

  body.modern-app .rec-workflow-mobile .rec-sticky-actions .btn {
    min-height: 44px;
    font-size: 0.85rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  body.modern-app .rec-workflow-mobile .rec-sticky-actions .btn-primary {
    grid-column: 1 / -1;
  }

  /* Section spacing */
  body.modern-app .rec-workflow-mobile .card {
    margin-bottom: 1rem;
  }

  body.modern-app .rec-workflow-mobile .card-header h5 {
    font-size: 1rem;
  }

  body.modern-app .rec-workflow-mobile .card-header small {
    display: block;
    margin-top: 0.25rem;
    line-height: 1.35;
  }

  /* Form stacks */
  body.modern-app .rec-workflow-mobile .rec-form-stack .col-md-6 {
    margin-bottom: 0.75rem;
  }

  body.modern-app .rec-workflow-mobile textarea.form-control {
    min-height: 5rem;
  }
}

@media (min-width: 992px) {
  body.modern-app .rec-workflow-mobile .rec-page-header .btn {
    width: auto;
    min-height: unset;
  }
}

@media (max-width: 575.98px) {
  body.modern-app .rec-workflow-mobile .rec-summary-grid > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  body.modern-app .rec-workflow-mobile .rec-sticky-actions {
    grid-template-columns: 1fr;
  }
}