/* ── Lazy editor dialogs (shared) ──────────────────────────────────────────────────────────────────
   Pairs with wwwroot/js/editor-dialog.js and Views/Shared/_{EditorDialog,DialogEditor}.cshtml. Load it
   only in an app that has adopted the framework:

       <link rel="stylesheet" href="~/_content/Web.Shared/css/editor-dialog.css" />

   Kept in a SEPARATE file (not shared-ui.css) precisely so adopting the framework is opt-in — an app that
   still uses its own dialog styling can't be restyled from under it.

   Everything is scoped to #ocEditorDialog, so no page style is affected. Colours come from Bootstrap's own
   custom properties, so the dialog follows the host's light/dark theme with no per-app override. */

/* The layout emits .card-body (scroll region) + .card-footer (Save row). The modal-body owns the padding
   normally, so hand it to .card-body instead — otherwise the sticky footer sits inset from the edges. */
#ocEditorDialog .modal-body {
    padding: 0;
}

#ocEditorDialog .card-body {
    padding: 1rem;
}

/* Pin Save to the bottom of the scroll area. A long editor otherwise scrolls its own Save button out of
   sight, which reads as "there is no way to save this". */
#ocEditorDialog .card-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: .75rem 1rem;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
}

/* An editor's fields are the whole content — a trailing margin under the last one doubles the footer gap. */
#ocEditorDialog .card-body > *:last-child {
    margin-bottom: 0;
}

/* Server-side validation messages painted by editor-dialog.js (no jQuery-validation in play). */
#ocEditorDialog .field-validation-error {
    display: block;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-form-invalid-color, var(--bs-danger));
}

/* On a phone the dialog should use the whole screen — an editor is a task, not a peek at something. */
@media (max-width: 575.98px) {
    #ocEditorDialog .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    #ocEditorDialog .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
}