/* Shared modal, alert, toast, and popover finish for public and admin screens. */
:root {
    --dialog-ink: #17231d;
    --dialog-muted: #68766e;
    --dialog-surface: #fff;
    --dialog-border: rgba(28, 48, 37, .12);
    --dialog-shadow: 0 24px 70px rgba(15, 30, 21, .22);
    --dialog-accent: #31734f;
}

html[data-theme="dark"] {
    --dialog-ink: #edf4ef;
    --dialog-muted: #a9b8ae;
    --dialog-surface: #202a24;
    --dialog-border: rgba(224, 242, 230, .13);
    --dialog-shadow: 0 24px 70px rgba(0, 0, 0, .48);
    --dialog-accent: #78bd91;
}

.modal-backdrop.show {
    opacity: .58;
    backdrop-filter: blur(3px);
}

.modal.fade .modal-dialog {
    transform: translateY(12px) scale(.985);
    transition: transform .24s cubic-bezier(.2, .75, .25, 1);
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

.modal-content,
.toast,
.popover {
    color: var(--dialog-ink);
    background-color: var(--dialog-surface);
    border: 1px solid var(--dialog-border);
    box-shadow: var(--dialog-shadow);
}

.modal-content {
    overflow: hidden;
    border-radius: 12px;
}

.modal-header,
.modal-footer {
    border-color: var(--dialog-border);
}

.modal-title,
.popover-header {
    color: var(--dialog-ink);
    font-weight: 700;
    letter-spacing: -.02em;
}

.confirmation-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: var(--dialog-accent);
    background: color-mix(in srgb, var(--dialog-accent) 12%, transparent);
    font-size: 1.15rem;
}

.confirmation-mark.is-danger {
    color: #b74643;
    background: rgba(183, 70, 67, .12);
}

.confirmation-modal .modal-body > p {
    color: var(--dialog-muted);
    line-height: 1.55;
    white-space: pre-line;
}

.modal-body,
.toast-body,
.popover-body {
    color: var(--dialog-ink);
}

.modal .btn-close {
    border-radius: 50%;
    transition: background-color .16s ease, transform .16s ease;
}

.modal .btn-close:hover {
    background-color: rgba(49, 115, 79, .12);
    transform: rotate(6deg);
}

.alert {
    --alert-accent: #477b9d;
    position: relative;
    border: 1px solid var(--dialog-border);
    border-inline-start: 4px solid var(--alert-accent);
    border-radius: 8px;
    box-shadow: 0 5px 18px rgba(20, 35, 26, .06);
    animation: dialog-alert-in .22s ease-out both;
}

.alert-success { --alert-accent: #318158; }
.alert-danger { --alert-accent: #bd4d49; }
.alert-warning { --alert-accent: #b67b21; }
.alert-info, .alert-primary { --alert-accent: #477b9d; }

.alert .btn-close {
    padding: .85rem;
    transition: opacity .15s ease, transform .15s ease;
}

.alert .btn-close:hover {
    opacity: .65;
    transform: scale(1.08);
}

.toast {
    border-radius: 9px;
}

.toast-header {
    color: var(--dialog-ink);
    background: transparent;
    border-color: var(--dialog-border);
}

.popover {
    border-radius: 9px;
}

.popover-header {
    background: transparent;
    border-color: var(--dialog-border);
}

@keyframes dialog-alert-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog,
    .modal .btn-close,
    .alert,
    .alert .btn-close {
        animation: none !important;
        transition: none !important;
    }
}