/* Shared modal primitives for Leads, Contacts, Booking and Deals.
   Page-specific modal styles remain scoped to their original components. */
:root {
    --app-modal-backdrop: rgba(18, 28, 52, 0.52);
    --app-modal-border: #dfe7f5;
    --app-modal-divider: #e7edf8;
    --app-modal-heading: #1a2f68;
    --app-modal-radius: 24px;
    --app-modal-header-background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);
    --app-modal-body-background: #fbfcff;
    --app-modal-header-padding: 18px 22px 16px;
    --app-modal-footer-padding: 16px 22px;
    --app-modal-shadow: 0 28px 80px rgba(20, 42, 92, .24);
}

/* Bootstrap-based dialogs reuse a single outer shell (AppModal.razor). */
.app-modal-overlay {
    background-color: var(--app-modal-backdrop);
}

.app-modal-overlay .modal-dialog,
.app-modal-overlay .modal-content {
    min-width: 0;
}

/* Preserve the exact Leads dialog surface originally defined by its scoped CSS.
   The shared component owns this outer element, so the old scoped selector
   cannot apply to it directly. */
.leads-standard-modal .modal-content {
    border: 0;
    border-radius: 22px;
    background: #f7f9fd;
    box-shadow: 0 24px 60px rgba(22, 44, 96, .22);
    overflow: hidden;
}

/* Specialized dialogs opt in to the same styling vocabulary without
   giving up their existing dimensions and scrolling behavior. */
:where(.app-modal-backdrop) {
    isolation: isolate;
}

:where(.app-modal-dialog) {
    min-width: 0;
    max-width: 100%;
}

:where(.app-modal-header) {
    min-width: 0;
}

:where(.app-modal-body) {
    min-height: 0;
}

:where(.app-modal-footer) {
    min-width: 0;
}

:where(.app-modal-header) .btn-close {
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .app-modal-overlay .modal-dialog:not(.modal-fullscreen) {
        max-width: calc(100vw - 16px);
        margin-left: auto;
        margin-right: auto;
    }
    .app-modal-overlay .modal-content {
        max-width: 100%;
    }
    :where(.app-modal-header, .app-modal-footer) {
        gap: 8px;
    }
}

@media print {
    .app-modal-overlay,
    .app-modal-backdrop { display: none !important; }
}

/* Shared visual shell: opt-in with app-modal-surface. Individual modal
   components keep their widths, body layouts, forms and scrolling rules. */
.app-modal-surface {
    background: #fff;
    border: 1px solid var(--app-modal-border);
    border-radius: var(--app-modal-radius);
    box-shadow: var(--app-modal-shadow);
    overflow: hidden;
}
.app-modal-surface > .app-modal-header {
    background: var(--app-modal-header-background);
    border-bottom: 1px solid var(--app-modal-divider);
    padding: var(--app-modal-header-padding);
    color: var(--app-modal-heading);
}
.app-modal-surface > .app-modal-header :is(h2, h5, .modal-title) {
    color: var(--app-modal-heading);
    font-size: 1.35rem;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.015em;
    margin: 0;
}
.app-modal-surface > form > .app-modal-body,
.app-modal-surface > .app-modal-body {
    background: var(--app-modal-body-background);
}
.app-modal-surface > form > .app-modal-footer,
.app-modal-surface > .app-modal-footer {
    border-top: 1px solid var(--app-modal-divider);
    background: #fff;
}
@media (max-width: 640px) {
    .app-modal-surface { border-radius: 16px; }
    .app-modal-surface > .app-modal-header { padding: 16px; }
}