/* ===========================================================================
   Popup form primitives — GLOBAL on purpose.

   Every popup in the app writes its BodyContent in its OWN component, and a
   .razor.css file is scoped to the component it belongs to. So a rule written
   in WMPopup.razor.css can style WMPopup's own chrome (.modal-body and the
   rest) and can never reach the fields a consumer puts inside it. That is why
   new popups keep arriving unstyled: the author writes the rule in the file
   that looks right, Blazor's isolation quietly drops it on the floor, and the
   label ends up beside the textarea instead of above it.

   These classes live in a plain global stylesheet, so they apply wherever the
   markup sits. Reach for them in any popup body rather than inventing another
   private set:

     <div class="wm-popup-form">
       <div class="wm-field">
         <label for="...">Label</label>
         <textarea id="..."></textarea>
         <span class="wm-field-hint">Optional help</span>
       </div>
     </div>

   WMPopup writes padding: 0 inline on .modal-body and each popup opts back in
   through its CssClass, so .wm-popup-form carries the body padding too and a
   popup that uses it needs no padding rule of its own.
   =========================================================================== */

.wm-popup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
}

/* Sitting directly on the body, the padding above is the body's padding. */
.modal-body > .wm-popup-form {
    width: 100%;
}

.wm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.wm-field > label {
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.wm-field > input,
.wm-field > select,
.wm-field > textarea {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #1e293b;
    font-size: 13px;
    padding: 9px 12px;
    width: 100%;
}

.wm-field > input,
.wm-field > select {
    height: 40px;
    padding: 0 12px;
}

.wm-field > textarea {
    min-height: 84px;
    resize: vertical;
}

.wm-field > input:focus,
.wm-field > select:focus,
.wm-field > textarea:focus {
    border-color: #5263ff;
    outline: none;
}

.wm-field > input:disabled,
.wm-field > select:disabled,
.wm-field > textarea:disabled {
    background: #f8fafc;
    color: #94a3b8;
}

.wm-field > input::placeholder,
.wm-field > textarea::placeholder {
    color: #94a3b8;
}

.wm-field-hint {
    color: #5F6E85;
    font-size: 12px;
}

.wm-field-error {
    color: #B91C1C;
    font-size: 12px;
}

.wm-field.has-error > input,
.wm-field.has-error > select,
.wm-field.has-error > textarea {
    border-color: #EF4444;
}

/* Required marker, so a popup does not hand-roll its own asterisk. */
.wm-field > label.required::after {
    color: #EF4444;
    content: " *";
}

/* Two fields sharing a row, collapsing on a narrow popup. */
.wm-field-row {
    display: flex;
    gap: 12px;
}

.wm-field-row > .wm-field {
    flex: 1 1 0;
}

@media (max-width: 480px) {
    .wm-field-row {
        flex-direction: column;
    }
}

/* A yes/no or either/or answer inside a field: two or three pills, one of them on.
   Global for the same reason everything else here is - the markup lives in the
   consumer's component, inside WMPopup's body, where a scoped rule cannot reach it. */
.wm-choice {
    display: flex;
    gap: 8px;
}

.wm-choice > button {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    height: 40px;
    padding: 0 18px;
}

.wm-choice > button:hover:not(:disabled) {
    border-color: #cbd5e1;
}

.wm-choice > button.active {
    background: #eef1ff;
    border-color: #5263ff;
    color: #3949d6;
}

.wm-choice > button:disabled {
    color: #94a3b8;
    cursor: default;
}