/* =====================================================================
   quote-convert-dialog.css  —  global chrome overrides for
   ConvertQuoteToInvoiceDialog (story #707).

   Import ONCE globally (MudDialog renders its own chrome in an internal
   template, so ConvertQuoteToInvoiceDialog.razor.css's ::deep rules can't
   reach .mud-dialog / .mud-dialog-content / .mud-dialog-actions — same
   documented gotcha already solved for the Documents-page dialogs in
   documents-dialogs.css via Class="doc-dlg" + global CSS). The dialog sets
   Class="quote-convert-dialog" on its <MudDialog>, which IS a real, plain
   CSS class on the rendered .mud-dialog paper element, reachable here.

   round-2 rework (test-round1.md CRITICAL-2): the footer-stacking media
   query below is the fix for the failing AC14 responsive check. The other
   rules (max-width/border-radius/content padding/actions border-top) were
   ALSO silently dead (::deep never matched) since step 6 of the original
   implementation — fixed alongside, same root cause, same file.

   max-width needs !important: styles.css itself ships
   `.mud-dialog-width-sm { max-width: 500px !important; }` as a global Ynex
   theme override, which beats any non-important rule regardless of
   selector specificity (verified live via document.styleSheets). Scoped
   tightly to .quote-convert-dialog (a unique class used by no other
   dialog), so this can't leak into any other MudDialog's sizing. */

.mud-dialog.quote-convert-dialog {
  max-width: 620px !important;
  border-radius: 14px;
}

.quote-convert-dialog .mud-dialog-content {
  max-height: min(68vh, 620px);
  overflow-y: auto;
  padding: 16px 20px;
}

/* round-3 rework (Ali AC13 sign-off): hide the up/down spinner on the percentage/amount
   MudNumericField. Same CSS-isolation-portal problem already solved above for
   .mud-dialog-content/.mud-dialog-actions, one level deeper: MudNumericField (a component from
   the MudBlazor package, not authored by ConvertQuoteToInvoiceDialog.razor) renders its own
   internal markup, so a ::deep rule in the dialog's *.razor.css can't reliably reach it.
   Verified via a bUnit markup dump of the actual rendered percentage field (MudBlazor 9.4.0):
   the field is <input type="text" inputmode="decimal" ...> — NOT type="number" — so there is no
   native browser spinner and ::-webkit-*-spin-button/-moz-appearance:textfield can never match
   anything (that was the previous, ineffective attempt, now removed from
   ConvertQuoteToInvoiceDialog.razor.css). MudBlazor instead renders its OWN up/down step buttons
   as a sibling <div class="mud-input-numeric-spin"> under the input's wrapper (added whenever
   the wrapper carries "mud-input-showspin") — those are the visible arrows from the AC13
   screenshots. Hiding that div removes them; the input itself (typing, focus) is untouched. */
.quote-convert-dialog .quote-convert-field .mud-input-numeric-spin {
  display: none;
}

.quote-convert-dialog .mud-dialog-actions {
  border-top: 1px solid var(--default-border);
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
}

/* Responsive: below 560px the footer buttons go full-width, stacked with
   the primary button on top (paired with the balance-grid/field responsive
   rules in ConvertQuoteToInvoiceDialog.razor.css, which CAN reach our own
   scoped elements directly). */
@media (max-width: 560px) {
  .quote-convert-dialog .mud-dialog-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .quote-convert-dialog .mud-dialog-actions .mud-button-root {
    width: 100%;
  }
}