/* ============================================================================
   sp-profile-forms.css
   ----------------------------------------------------------------------------
   Shared styling for the four Profile-list popup forms:

     Section                    Modal ID                     Body host ID
     -------------------------  ---------------------------  -----------------------
     Products list              #sp-pl-product-modal         #sp-pl-product-form
     Batches list               #sp-bl-batch-modal           #sp-bl-batch-form
     Group session samples      #sp-ssn-new-sample-modal     #sp-ssn-new-sample-form
     Producers (Organisations)  #sp-pr-producer-modal        #sp-pr-producer-form

   Phase (a): chrome consolidation only — replaces four near-identical
   per-modal blocks in sp-profile.css with one shared rule, and promotes the
   modal-width fix that previously lived only on the sample modal.

   Phase (b) — not yet applied — will scope form-rhythm rules and chooser
   harmony rules under the `.sp-profile-form` wrapper class added to every
   modal-body host.
   ========================================================================= */

:root {
    --sp-brand: #084b7e;
    --sp-brand-hover: #063a63;
}

/* ── Modal chrome ─────────────────────────────────────────────────────────
   Attribute-prefix selector so future popups whose ID starts with `sp-`
   (and which use Bootstrap's `.modal` class) inherit automatically. The
   wizard modal (`sp-bw-wizard-modal`) is a custom container, not a Bootstrap
   .modal, so this rule does not reach it. */

.modal[id^="sp-"] .modal-header {
    background: var(--sp-brand);
    border-radius: 3px 3px 0 0;
    position: relative;
    padding-right: 48px;
}
.modal[id^="sp-"] .modal-title {
    color: #fff;
}
.modal[id^="sp-"] .modal-header .close {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #fff !important;
    opacity: 0.85;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    float: none;
}
.modal[id^="sp-"] .modal-header .close:hover {
    opacity: 1;
}

/* ── Form-body widget width ──────────────────────────────────────────────
   Constrain native selects and slim-select wrappers to the modal width.
   Previously lived only on the sample modal; promoted here for every
   popup so dropdowns line up with the rest of the form. */

.sp-profile-form select,
.sp-profile-form .ss-main {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}