/* Deal profile form styles */

.deal-profile-row {
  transition: opacity 0.3s ease;
}

.deal-profile-row.deleted-row {
  opacity: 0.6;
  border-color: #dc3545 !important;
  background-color: rgba(220, 53, 69, 0.05) !important;
}

.deal-profile-row.deleted-row input,
.deal-profile-row.deleted-row select,
.deal-profile-row.deleted-row button {
  opacity: 0.6;
  text-decoration: line-through;
  color: #999;
}

.deal-profile-row.deleted-row .btn-outline-danger {
  opacity: 1;
  text-decoration: none;
}

.deal-profile-row.deleted-row .profile-label,
.deal-profile-row.deleted-row .rate-label,
.deal-profile-row.deleted-row label,
.deal-profile-row.deleted-row .form-text,
.deal-profile-row.deleted-row .rate-hint,
.deal-profile-row.deleted-row .duration-hint {
  opacity: 0.6;
  color: #999;
}

/* Profile dropdown styling */
.dropdown-item[data-profile-item] {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dropdown-item[data-profile-item]:hover {
  background-color: #f8f9fa;
}

/* Rate and duration hints */
.rate-hint,
.duration-hint {
  display: block !important;
  margin-top: 0.25rem;
}

/* Better spacing for profile rows */
.deal-profile-row .col-md-3 {
  flex: 0 0 calc(25% - 0.5rem);
}

.deal-profile-row .row {
  margin-right: -0.25rem;
  margin-left: -0.25rem;
}

.deal-profile-row .col-md-3 {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}

/* ---------------------------------------------------------------------------
   Purchase Order modals (create AND edit) — static (pinned) form footer.

   `deals/partials/_form` renders in four contexts:
     1. #createDealModal  (deals#index -> deals_controller.js#showCreateDealModal)
     2. #editDealModal    (deals#edit -> deals/edit_modal_controller.js)
     3. full page         (deals#new)
     4. full page         (deals#edit rendered with the layout)

   Only the two modals (1) and (2) get the flex/scroll treatment, hence the
   #createDealModal / #editDealModal id prefix on every rule below — never a
   bare `.modal-body` and never the `.deal-form` class on its own. The
   full-page contexts (3) and (4) render the same markup but with no such id
   ancestor, so they match none of these selectors and keep their natural
   document flow (display: block, max-height: none, no internal scroll region).

   The <form> itself is the flex column, so the Create/Cancel buttons stay
   literally inside the form and native submit is untouched. Adding profile rows
   grows .deal-form-body (which scrolls) instead of pushing .deal-form-footer
   off the bottom.

   A flex column only pins its footer if it is BOUNDED, so the max-height is
   declared here rather than inherited from the generic `.modal-body` rule in
   allocation_validation.css — that rule is misfiled and a future cleanup could
   move, scope or delete it, which would silently un-bound this column and
   bring the pushed-off-the-bottom footer bug straight back. The shared
   --cp-modal-max-height token (theme_foundation/tokens.css) keeps the two in
   step. Note the `overflow: hidden` below deliberately overrides the generic
   rule's `overflow-y: auto`: scrolling is handed down to .deal-form-body so
   the footer ends up outside the scroll region.

   The two modals nest the form slightly differently:
     create (deals_controller.js#showCreateDealModal, from deals#new's .card)
       .modal-body > .card-body > (h2 + form.deal-form)
     edit   (deals/edit.html.erb injected into #edit-deal-content)
       .modal-body > form.deal-form
   Both intermediate shapes are covered: the `.modal-body > .card-body`
   selectors are paired with the plain `.modal-body` ones so the chain resolves
   whether or not that wrapper is present, which also means neither modal
   breaks if the other's structure is adopted later.

   Keep the create and edit selectors on the SAME rules (comma-separated) —
   duplicating the block per modal is how the two silently drift apart.
   --------------------------------------------------------------------------- */

#createDealModal .modal-body,
#editDealModal .modal-body {
  /* Self-sufficient height bound — do NOT rely on the generic `.modal-body`
     rule in allocation_validation.css for this. */
  max-height: var(--cp-modal-max-height, calc(100vh - 200px));
}

#createDealModal .modal-body,
#createDealModal .modal-body > .card-body,
#editDealModal .modal-body,
#editDealModal .modal-body > .card-body {
  display: flex;
  flex-direction: column;
  /* Lets a flex child shrink below its content height — without this the
     overflow never engages and the footer gets pushed out again. */
  min-height: 0;
  overflow: hidden;
}

#createDealModal .modal-body > .card-body,
#createDealModal .deal-form,
#editDealModal .modal-body > .card-body,
#editDealModal .deal-form {
  flex: 1 1 auto;
  min-height: 0;
}

#createDealModal .deal-form,
#editDealModal .deal-form {
  display: flex;
  flex-direction: column;
}

#createDealModal .deal-form-body,
#editDealModal .deal-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Keep focus rings and card shadows from being clipped by the scroll box. */
  padding-inline: 0.25rem;
  margin-inline: -0.25rem;
}

#createDealModal .deal-form-footer,
#editDealModal .deal-form-footer {
  flex: 0 0 auto;
}

/* showCreateDealModal injects deals#new's .card innerHTML — which carries that
   page's own <h2 class="card-title">New Purchase Order</h2> — underneath the
   modal header's <h5 class="modal-title">New Purchase Order</h5>, so the title
   renders twice. Keep the .modal-title (it is the dialog's accessible name via
   the header) and drop the injected heading, scoped to #createDealModal so the
   full-page deals#new keeps its heading — it has no such id ancestor. Also
   collapses the h2's own `mb-4` so no gap is left behind, which `display: none`
   does and visibility/opacity would not. #editDealModal is untouched: deals#edit
   renders its own .modal-header and has no second heading to suppress. */
#createDealModal .modal-body > .card-body > .card-title {
  display: none;
}