/* Единое оформление модальных окон, уведомлений и системных сообщений. */
:root {
    --notice-blue: #3157e5;
    --notice-text: #172640;
    --notice-muted: #65738a;
    --notice-border: #dfe6f0;
    --notice-danger: #c93649;
    --notice-danger-soft: #fff1f3;
    --notice-warning: #8a5a00;
    --notice-warning-soft: #fff7df;
    --notice-success: #16745a;
    --notice-success-soft: #eaf8f3;
}

.modal-backdrop.show {
    opacity: .46;
    backdrop-filter: blur(2px);
}

.modal .modal-dialog {
    padding: 16px;
}

.modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--notice-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 75px rgba(18, 35, 66, .22);
}

.modal .modal-header {
    min-height: 64px;
    padding: 16px 20px;
    border-bottom: 1px solid #e8edf4;
    color: var(--notice-text);
    background: #f8faff;
}

.modal .modal-title {
    margin: 0;
    color: inherit !important;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.3;
}

.modal .modal-header.bg-primary,
.modal .modal-header.bg-info {
    border-bottom-color: #d9e4ff;
    color: #2149ba !important;
    background: #edf3ff !important;
}

#errorModal .modal-header,
.modal .modal-header.bg-danger {
    border-bottom-color: #f4d1d7;
    color: var(--notice-danger) !important;
    background: var(--notice-danger-soft) !important;
}

#deleteModal .modal-header,
#confirmDeleteModal .modal-header,
#deleteFromArchiveModal .modal-header,
#deleteAllFilesModal .modal-header,
#deleteAllTemplatesModal .modal-header,
#deleteUserModal .modal-header,
#deleteTagModal .modal-header {
    border-bottom-color: #f4d1d7;
    color: var(--notice-danger) !important;
    background: var(--notice-danger-soft) !important;
}

.modal .modal-header.bg-warning {
    border-bottom-color: #f1dfad;
    color: var(--notice-warning) !important;
    background: var(--notice-warning-soft) !important;
}

.modal .modal-header.bg-success {
    border-bottom-color: #c9eadf;
    color: var(--notice-success) !important;
    background: var(--notice-success-soft) !important;
}

.modal .modal-header .btn-close {
    width: 34px;
    height: 34px;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 9px;
    background-size: 13px;
    filter: none !important;
    opacity: .58;
    transition: opacity .16s ease, background-color .16s ease;
}

.modal .modal-header .btn-close:hover,
.modal .modal-header .btn-close:focus-visible {
    background-color: rgba(23, 38, 64, .08);
    box-shadow: none;
    opacity: .9;
}

.modal .modal-body {
    padding: 24px 22px;
    color: var(--notice-text);
    font-size: 16px;
    line-height: 1.55;
}

.modal .modal-body > :last-child {
    margin-bottom: 0;
}

.modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e8edf4;
    background: #fbfcfe;
}

.modal .modal-footer .btn {
    min-height: 42px;
    margin: 0;
    padding: 9px 17px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 650;
    box-shadow: none;
}

.modal .modal-footer .btn-secondary {
    border-color: #d6deea;
    color: #4f5e74;
    background: #fff;
}

.modal .modal-footer .btn-secondary:hover,
.modal .modal-footer .btn-secondary:focus-visible {
    border-color: #bfcadb;
    color: #263753;
    background: #f3f6fa;
}

.modal .modal-footer .btn-primary {
    border-color: var(--notice-blue);
    background: var(--notice-blue);
}

.modal .modal-footer .btn-danger {
    border-color: var(--notice-danger);
    background: var(--notice-danger);
}

.modal .modal-footer .btn-danger:hover,
.modal .modal-footer .btn-danger:focus-visible {
    border-color: #aa293a;
    background: #aa293a;
}

.toast.position-fixed,
.toast-container .toast {
    z-index: 11000;
    width: min(370px, calc(100vw - 32px));
    margin: 16px !important;
    overflow: hidden;
    border: 1px solid var(--notice-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(18, 35, 66, .2);
}

.toast-container {
    z-index: 11000;
    padding: 16px;
}

.toast-container .toast {
    margin: 0 0 10px !important;
}

.toast .toast-header {
    min-height: 48px;
    padding: 11px 14px;
    border-bottom: 1px solid #e8edf4;
    color: var(--notice-text);
    background: #f8faff;
}

.toast .toast-header.bg-success {
    border-bottom-color: #c9eadf;
    color: var(--notice-success) !important;
    background: var(--notice-success-soft) !important;
}

.toast .toast-header.bg-danger {
    border-bottom-color: #f4d1d7;
    color: var(--notice-danger) !important;
    background: var(--notice-danger-soft) !important;
}

.toast .toast-header.bg-warning {
    border-bottom-color: #f1dfad;
    color: var(--notice-warning) !important;
    background: var(--notice-warning-soft) !important;
}

.toast .toast-header.bg-primary {
    border-bottom-color: #d9e4ff;
    color: #2149ba !important;
    background: #edf3ff !important;
}

.toast .toast-header .btn-close {
    filter: none !important;
    opacity: .58;
}

.toast .toast-body {
    padding: 14px 16px;
    color: var(--notice-text);
    font-size: 14px;
    line-height: 1.5;
}

.success-message,
.error-message {
    width: min(370px, calc(100vw - 32px));
    padding: 14px 16px !important;
    border: 1px solid !important;
    border-radius: 14px !important;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 20px 55px rgba(18, 35, 66, .2) !important;
}

.success-message {
    border-color: #c9eadf !important;
    color: var(--notice-success) !important;
    background: var(--notice-success-soft) !important;
}

.error-message {
    border-color: #f4d1d7 !important;
    color: var(--notice-danger) !important;
    background: var(--notice-danger-soft) !important;
}

.alert {
    border-width: 1px;
    border-radius: 12px;
    line-height: 1.5;
}

.alert-error,
.alert-danger {
    border-color: #f4c7cf;
    color: #9e2939;
    background: #fff1f3;
}

.alert-warning {
    border-color: #ecd99c;
    color: #775000;
    background: #fff7df;
}

.alert-success {
    border-color: #bfe4d7;
    color: #14644f;
    background: #eaf8f3;
}

.alert-info,
.alert-message {
    border-color: #ccdcff;
    color: #244caa;
    background: #edf3ff;
}

@media (max-width: 575px) {
    .modal .modal-dialog {
        margin: 0;
        padding: 12px;
    }

    .modal .modal-content {
        border-radius: 15px;
    }

    .modal .modal-header,
    .modal .modal-footer {
        padding-right: 16px;
        padding-left: 16px;
    }

    .modal .modal-body {
        padding: 20px 16px;
    }
}