/**
 * Canonical Admin Modal Contract v6.0.0
 * CI_ADMIN_MODAL_CONTRACT_V6
 *
 * One reusable admin contract:
 * root[data-ci-admin-modal] -> backdrop[data-ci-modal-backdrop] ->
 * dialog[data-ci-modal-dialog] -> header[data-ci-modal-header] + body[data-ci-modal-body]
 * (+ optional footer[data-ci-modal-footer]).
 *
 * Lifecycle is owned only by assets/js/modal-manager.js.
 * Public Bio Claim, public Catalog detail and public QR are intentionally excluded.
 */

:root {
    --ci-modal-radius: 26px;
    --ci-modal-mobile-radius: 30px;
    --ci-modal-backdrop: rgba(15, 23, 42, 0.58);
    --ci-modal-surface: var(--surface-solid, #fff);
    --ci-modal-surface-soft: var(--surface-soft, #fbf8f1);
    --ci-modal-text: var(--text, #171411);
    --ci-modal-muted: var(--muted, #756f65);
    --ci-modal-primary: var(--primary, #174f3f);
    --ci-modal-gold: var(--gold, #d9a441);
    --ci-modal-line: var(--line, rgba(31, 24, 17, 0.12));
    --ci-modal-shadow: var(--shadow-soft, 0 24px 80px rgba(52, 39, 21, 0.16));
    --ci-modal-safe-top: env(safe-area-inset-top, 0px);
    --ci-modal-safe-right: env(safe-area-inset-right, 0px);
    --ci-modal-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ci-modal-safe-left: env(safe-area-inset-left, 0px);
}

html.ci-modal-open,
body.ci-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body.ci-modal-open {
    position: fixed !important;
    inset: calc(var(--ci-modal-scroll-y, 0px) * -1) 0 0 !important;
    width: 100% !important;
}

[data-ci-admin-modal] {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--ci-modal-layer, 1000) !important;
    display: grid !important;
    place-items: center !important;
    min-width: 0 !important;
    padding:
        max(16px, var(--ci-modal-safe-top))
        max(16px, var(--ci-modal-safe-right))
        max(16px, var(--ci-modal-safe-bottom))
        max(16px, var(--ci-modal-safe-left)) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    isolation: isolate !important;
}

[data-ci-admin-modal][hidden] {
    display: none !important;
}

[data-ci-admin-modal] > [data-ci-modal-backdrop] {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--ci-modal-backdrop) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    cursor: default !important;
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
}

[data-ci-admin-modal] > [data-ci-modal-dialog] {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: min(480px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: auto !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    color: var(--ci-modal-text) !important;
    background: var(--ci-modal-surface) !important;
    border: 0 !important;
    border-radius: var(--ci-modal-radius) !important;
    box-shadow: var(--ci-modal-shadow) !important;
    outline: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

[data-ci-admin-modal] > [data-ci-modal-dialog][data-ci-modal-layout="footer"] {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
}

[data-ci-modal-dialog][data-ci-modal-size="sm"] { width: min(520px, calc(100vw - 32px)) !important; }
[data-ci-modal-dialog][data-ci-modal-size="md"] { width: min(680px, calc(100vw - 32px)) !important; }
[data-ci-modal-dialog][data-ci-modal-size="lg"] { width: min(780px, calc(100vw - 32px)) !important; }
[data-ci-modal-dialog][data-ci-modal-size="xl"] { width: min(960px, 70vw) !important; }
[data-ci-modal-dialog][data-ci-modal-size="2xl"] { width: min(1180px, 80vw) !important; }

/* Preserve established per-modal size classes centrally. Component CSS no longer owns shell geometry. */
.mod-bio-avatar-dialog,
.mod-bio-profile-dialog,
.mod-bio-social-edit-dialog { width: min(480px, calc(100vw - 32px)) !important; }

.mod-bio-cover-dialog { width: min(560px, calc(100vw - 32px)) !important; }
.mod-bio-add-link-dialog { width: min(920px, calc(100vw - 32px)) !important; height: min(700px, calc(100dvh - 32px)) !important; }
.mod-bio-social-manager-dialog { width: min(520px, calc(100vw - 32px)) !important; height: min(620px, calc(100dvh - 32px)) !important; }
.mod-bio-social-icons-dialog { width: min(620px, calc(100vw - 32px)) !important; height: min(680px, calc(100dvh - 32px)) !important; }
.mod-bio-settings-dialog { width: min(960px, 70vw) !important; height: min(760px, calc(100dvh - 32px)) !important; }
.bio-link-icon-dialog { width: min(460px, calc(100vw - 32px)) !important; max-height: min(720px, calc(100dvh - 32px)) !important; }
.bio-delete-verification-dialog { width: min(520px, calc(100vw - 32px)) !important; }

.ci-catalog-item-dialog { width: min(760px, calc(100vw - 48px)) !important; }
.ci-catalog-image-dialog { width: min(680px, calc(100vw - 32px)) !important; max-height: min(560px, calc(100dvh - 32px)) !important; }
.ci-catalog-categories-dialog { width: min(620px, calc(100vw - 32px)) !important; }
.ci-catalog-category-dialog,
.ci-catalog-create-dialog { width: min(520px, calc(100vw - 32px)) !important; }
.ci-catalog-settings-dialog { width: min(780px, calc(100vw - 48px)) !important; }
.ci-catalog-archive-dialog { width: min(720px, calc(100vw - 32px)) !important; }

.ci-domain-dialog { width: min(960px, 70vw) !important; height: min(760px, calc(100dvh - 32px)) !important; }
.team-members-modal-card { width: min(80vw, 1180px) !important; height: min(80dvh, 860px) !important; }

[data-ci-modal-header] {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    min-width: 0 !important;
    min-height: 86px !important;
    align-content: center !important;
    gap: 5px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 18px 64px 16px 18px !important;
    color: var(--ci-modal-text) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(243, 199, 164, 0.32), transparent 18rem),
        radial-gradient(circle at 90% 18%, rgba(223, 238, 232, 0.86), transparent 20rem),
        rgba(255, 255, 255, 0.74) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ci-modal-line) !important;
    border-radius: var(--ci-modal-radius) var(--ci-modal-radius) 0 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

[data-ci-modal-header]::after {
    position: absolute !important;
    top: -88px !important;
    right: -80px !important;
    z-index: 0 !important;
    width: 190px !important;
    height: 190px !important;
    pointer-events: none !important;
    content: "" !important;
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.66), transparent 24%),
        linear-gradient(135deg, rgba(217, 164, 65, 0.32), rgba(23, 79, 63, 0.18)) !important;
    border-radius: 999px !important;
    filter: blur(2px) !important;
}

[data-ci-modal-header] > * {
    position: relative !important;
    z-index: 1 !important;
}

[data-ci-modal-header] :is(
    .mod-bio-modal-kicker,
    .ci-catalog-modal-kicker,
    .ci-domain-kicker,
    .bio-link-icon-modal-kicker,
    .team-members-modal-title > span,
    [data-ci-modal-kicker]
) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    margin: 0 !important;
    color: var(--ci-modal-primary) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

[data-ci-modal-header] :is(
    .mod-bio-modal-kicker,
    .ci-catalog-modal-kicker,
    .ci-domain-kicker,
    .bio-link-icon-modal-kicker,
    .team-members-modal-title > span,
    [data-ci-modal-kicker]
)::before {
    flex: none !important;
    width: 8px !important;
    height: 8px !important;
    content: "" !important;
    background: var(--ci-modal-gold) !important;
    border-radius: 99px !important;
    box-shadow: 0 0 0 5px rgba(217, 164, 65, 0.16) !important;
}

[data-ci-modal-header] :is(h1, h2, h3, .mod-bio-modal-title, .team-members-modal-title > strong) {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--ci-modal-text) !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.035em !important;
    text-overflow: ellipsis !important;
}

[data-ci-modal-header] p {
    max-width: 720px !important;
    margin: 0 !important;
    color: var(--ci-modal-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

[data-ci-modal-header] > :is(div, .team-members-modal-title) {
    min-width: 0 !important;
}

[data-ci-modal-header] > div:not(.mod-bio-social-modal-icon),
.team-members-modal-title {
    display: grid !important;
    gap: 4px !important;
}

button[data-ci-modal-close-control] {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 40 !important;
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ci-modal-text) !important;
    font: inherit !important;
    font-size: 22px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    background: rgba(255, 255, 255, 0.86) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 24px rgba(52, 39, 21, 0.08) !important;
    outline: 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
}

button[data-ci-modal-close-control]:hover {
    color: var(--ci-modal-primary) !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(52, 39, 21, 0.11) !important;
}

button[data-ci-modal-close-control]:focus-visible {
    outline: 3px solid rgba(23, 79, 63, 0.16) !important;
    outline-offset: 2px !important;
}

[data-ci-modal-body] {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(117, 111, 101, 0.28) transparent !important;
    scrollbar-gutter: stable !important;
}

[data-ci-modal-scroll] {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(117, 111, 101, 0.28) transparent !important;
    scrollbar-gutter: stable !important;
}

[data-ci-modal-body]::-webkit-scrollbar,
[data-ci-modal-scroll]::-webkit-scrollbar {
    width: 8px !important;
}

[data-ci-modal-body]::-webkit-scrollbar-track,
[data-ci-modal-scroll]::-webkit-scrollbar-track {
    background: transparent !important;
}

[data-ci-modal-body]::-webkit-scrollbar-thumb,
[data-ci-modal-scroll]::-webkit-scrollbar-thumb {
    background: rgba(117, 111, 101, 0.28) !important;
    border: 2px solid var(--ci-modal-surface) !important;
    border-radius: 999px !important;
}

/* Bio settings and social manager keep their final action row visible while their list scrolls. */
.mod-bio-settings-form {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    gap: 12px !important;
    overflow: hidden !important;
}

.mod-bio-social-manager-body {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    overflow: hidden !important;
}

.mod-bio-social-icons-body {
    overflow: hidden !important;
}

.mod-bio-social-icons-grid {
    height: 100% !important;
}

/* Cover is content-heavy: the form itself is the internal scroller. */
.mod-bio-cover-dialog > .mod-bio-modal-form {
    overflow-y: auto !important;
}

[data-ci-modal-footer] {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px 14px max(14px, var(--ci-modal-safe-bottom)) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 0 !important;
    border-top: 1px solid var(--ci-modal-line) !important;
    box-shadow: none !important;
}

/* Footer inside a padded scrolling form spans that form cleanly. */
[data-ci-modal-body] > [data-ci-modal-footer] {
    margin-right: -14px !important;
    margin-bottom: -14px !important;
    margin-left: -14px !important;
}

.mod-bio-modal-actions-left {
    margin-right: auto !important;
}

.ci-catalog-modal-actions {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
}

/* Social edit has a back button at left; keep header copy clear of it. */
.mod-bio-social-edit-dialog [data-ci-modal-header] {
    padding-left: 58px !important;
}

/* Business guard is still owned by mod-bio-admin.js; this is visual feedback only. */
.mod-bio-social-manager-dialog.is-social-manager-saving button[data-ci-modal-close-control] {
    opacity: 0.45 !important;
    pointer-events: none !important;
}

/* Canonical root animation only; no component-owned modal animation. */
@keyframes ciAdminModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

[data-ci-admin-modal]:not([hidden]) > [data-ci-modal-dialog] {
    animation: ciAdminModalIn 0.18s ease-out both;
}

@media (max-width: 719px) {
    [data-ci-admin-modal]:not([data-ci-modal-family="team-members"]) {
        place-items: end stretch !important;
        padding: max(10px, var(--ci-modal-safe-top)) 0 0 !important;
    }

    [data-ci-admin-modal]:not([data-ci-modal-family="team-members"]) > [data-ci-modal-dialog] {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - max(10px, var(--ci-modal-safe-top))) !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: var(--ci-modal-mobile-radius) var(--ci-modal-mobile-radius) 0 0 !important;
        box-shadow: 0 -18px 70px rgba(23, 20, 17, 0.22) !important;
    }

    .mod-bio-settings-dialog,
    .ci-domain-dialog,
    .mod-bio-social-manager-dialog,
    .mod-bio-social-icons-dialog {
        height: calc(100dvh - max(10px, var(--ci-modal-safe-top))) !important;
    }

    .bio-link-icon-dialog {
        height: min(680px, calc(100dvh - max(10px, var(--ci-modal-safe-top)))) !important;
    }

    [data-ci-modal-header] {
        min-height: 78px !important;
        padding: 16px 58px 14px 16px !important;
        border-radius: var(--ci-modal-mobile-radius) var(--ci-modal-mobile-radius) 0 0 !important;
    }

    [data-ci-modal-header]::after {
        top: -94px !important;
        right: -92px !important;
    }

    [data-ci-modal-body] {
        padding: 12px !important;
    }

    [data-ci-modal-body] > [data-ci-modal-footer] {
        margin-right: -12px !important;
        margin-bottom: -12px !important;
        margin-left: -12px !important;
    }

    [data-ci-modal-footer] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 10px 12px calc(12px + var(--ci-modal-safe-bottom)) !important;
    }

    [data-ci-modal-footer] > :is(button, .btn, .bio-btn, .mod-bio-btn) {
        width: 100% !important;
        min-width: 0 !important;
    }

    .ci-catalog-modal-actions > span {
        display: none !important;
    }

    .ci-catalog-modal-actions .ci-catalog-danger-button,
    .ci-catalog-modal-actions .ci-catalog-modal-trash-button {
        grid-column: 1 / -1 !important;
    }

    /* Team Members uses its dedicated mobile detail screen, not the desktop modal. */
    [data-ci-admin-modal][data-ci-modal-family="team-members"] {
        display: none !important;
    }
}

@media (max-width: 380px) {
    [data-ci-modal-header] {
        padding: 15px 56px 13px 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-ci-admin-modal] *,
    [data-ci-admin-modal]::before,
    [data-ci-admin-modal]::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}