/* YousoroFinance redesign-web — modals: sheet surface, header, body rhythm, footer actions, backdrop */

/* Backdrop: dim + blur the canvas like a macOS sheet */
:root body.yf-redesign.yf-dashboard-auth .modal-backdrop {
    --bs-backdrop-bg: rgb(15, 18, 24);
    --bs-backdrop-opacity: .28;
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}
:root body.yf-redesign.yf-dashboard-auth .modal-backdrop.show { opacity: .28; }

:root body.yf-redesign.yf-dashboard-auth .modal {
    --bs-modal-border-radius: var(--rd-radius-xl);
    --bs-modal-inner-border-radius: var(--rd-radius-xl);
    --bs-modal-padding: 24px;
}

@media all {
    :root body.yf-redesign.yf-dashboard-auth .modal.fade .modal-dialog {
        transform: translateY(12px) scale(.97);
        transition: transform .32s var(--rd-ease), opacity .24s var(--rd-ease);
    }
    :root body.yf-redesign.yf-dashboard-auth .modal.show .modal-dialog { transform: none; }
}

/* Surface */
:root body.yf-redesign.yf-dashboard-auth .modal-content {
    overflow: hidden;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--rd-radius-xl) !important;
    background: var(--rd-surface) !important;
    color: var(--rd-ink) !important;
    box-shadow: var(--rd-shadow-modal) !important;
}

/* Header */
:root body.yf-redesign.yf-dashboard-auth .modal-header {
    align-items: center;
    gap: 14px;
    padding: 22px 24px 14px !important;
    border-bottom: 0 !important;
    background: transparent !important;
}
:root body.yf-redesign.yf-dashboard-auth .modal-header .btn-close { flex: 0 0 auto; margin: 0 0 0 auto; }

:root body.yf-redesign.yf-dashboard-auth .modal-title {
    margin: 0;
    color: var(--rd-ink) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.25;
    letter-spacing: var(--rd-tracking-tight);
}

/* Eyebrow above titles (finance forms, notifications, manage modals) */
:root body.yf-redesign.yf-dashboard-auth :is(.yf-finance-modal-heading, .yf-notifications-panel .modal-header) > div > span,
:root body.yf-redesign.yf-dashboard-auth :is(.yf-manage-modal__eyebrow, .yf-welcome-modal__eyebrow, .yf-demo-readonly-modal__eyebrow, .yf-admin-preview-modal__eyebrow) {
    display: block;
    margin-bottom: 2px;
    color: var(--rd-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

:root body.yf-redesign.yf-dashboard-auth .yf-finance-modal-heading { gap: 14px; align-items: center; }
:root body.yf-redesign.yf-dashboard-auth .yf-finance-modal-heading__icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient(160deg, rgba(var(--rd-accent-rgb), .16), rgba(var(--rd-accent-rgb), .07)) !important;
    color: var(--rd-accent) !important;
    box-shadow: inset 0 0 0 .5px rgba(var(--rd-accent-rgb), .14) !important;
    font-size: 20px;
}
:root body.yf-redesign.yf-dashboard-auth .yf-finance-modal-heading__icon--expense {
    background: linear-gradient(160deg, rgba(229, 72, 77, .15), rgba(229, 72, 77, .06)) !important;
    color: var(--rd-negative) !important;
    box-shadow: inset 0 0 0 .5px rgba(229, 72, 77, .14) !important;
}

/* Body */
:root body.yf-redesign.yf-dashboard-auth .modal-body {
    padding: 8px 24px 20px !important;
    color: var(--rd-ink-2);
    font-size: 14px;
}
:root body.yf-redesign.yf-dashboard-auth .modal-body > form > .mb-3,
:root body.yf-redesign.yf-dashboard-auth .modal-body > .mb-3 { margin-bottom: 18px !important; }

/* Footer: right-aligned action pair, equal height */
:root body.yf-redesign.yf-dashboard-auth .modal-footer {
    gap: 10px;
    padding: 14px 24px 22px !important;
    border-top: 0 !important;
    background: transparent !important;
}
:root body.yf-redesign.yf-dashboard-auth .modal-footer > * { margin: 0 !important; }
:root body.yf-redesign.yf-dashboard-auth .modal-footer .btn { min-width: 112px; min-height: 42px; border-radius: 12px; }

:root body.yf-redesign.yf-dashboard-auth .modal-dialog-scrollable .modal-body { scrollbar-gutter: stable; }

/* Finance form dialogs sizing */
@media (min-width: 576px) {
    :root body.yf-redesign.yf-dashboard-auth :is(.yf-finance-form-dialog, .yf-day-editor-dialog, .yf-income-calendar-day-dialog, .yf-tag-edit-dialog) {
        max-width: min(640px, calc(100vw - 32px));
    }
    :root body.yf-redesign.yf-dashboard-auth :is(.yf-finance-form-dialog, .yf-day-editor-dialog, .yf-income-calendar-day-dialog, .yf-tag-edit-dialog).modal-lg {
        max-width: min(920px, calc(100vw - 32px));
    }
    :root body.yf-redesign.yf-dashboard-auth :is(.yf-finance-form-dialog, .yf-day-editor-dialog, .yf-income-calendar-day-dialog, .yf-tag-edit-dialog).modal-xl {
        max-width: min(1120px, calc(100vw - 32px));
    }
}
:root body.yf-redesign.yf-dashboard-auth .modal-footer { justify-content: flex-end; }
:root body.yf-redesign.yf-dashboard-auth .modal-footer .btn-primary { min-width: 168px; }

/* Info dialogs */
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-info-modal {
    border: 0 !important;
    box-shadow: var(--rd-shadow-modal) !important;
}
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-info-modal .modal-header {
    border: 0 !important;
    background: transparent !important;
}

/* Manage modals (assets/plans) */
:root body.yf-redesign.yf-dashboard-auth .yf-manage-modal { border: 0 !important; border-radius: var(--rd-radius-xl) !important; }
:root body.yf-redesign.yf-dashboard-auth .yf-manage-modal .modal-header { padding: 24px 26px 12px !important; }
:root body.yf-redesign.yf-dashboard-auth .yf-manage-modal .modal-title { font-size: 21px !important; }
:root body.yf-redesign.yf-dashboard-auth .yf-manage-modal__intro { color: var(--rd-muted); font-size: 14px; }
:root body.yf-redesign.yf-dashboard-auth :is(.yf-manage-form-grid, .yf-asset-create, .yf-asset-edit) label { color: var(--rd-ink-2); font-size: 13px; font-weight: 650; }

/* Welcome / read-only / preview dialogs */
:root body.yf-redesign.yf-dashboard-auth :is(.yf-welcome-modal__icon, .yf-demo-readonly-modal__icon, .yf-admin-preview-modal__icon) {
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(160deg, rgba(var(--rd-accent-rgb), .16), rgba(var(--rd-accent-rgb), .06)) !important;
    color: var(--rd-accent) !important;
}
:root body.yf-redesign.yf-dashboard-auth .yf-welcome-modal h2 { font-size: 28px; font-weight: 750; letter-spacing: var(--rd-tracking-tight); }
:root body.yf-redesign.yf-dashboard-auth .yf-welcome-modal p { color: var(--rd-muted); font-size: 15px; line-height: 1.55; }
:root body.yf-redesign.yf-dashboard-auth .yf-welcome-modal__hub {
    border: 0 !important;
    border-radius: var(--rd-radius-md) !important;
    background: var(--rd-surface-grouped) !important;
    box-shadow: inset 0 0 0 1px var(--rd-line-soft);
}
:root body.yf-redesign.yf-dashboard-auth :is(.yf-welcome-modal__primary, .yf-demo-readonly-modal__primary, .yf-admin-preview-modal__primary, .yf-onboarding-focus__primary) {
    border: 0 !important;
    background: var(--rd-accent) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(var(--rd-accent-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}
:root body.yf-redesign.yf-dashboard-auth .yf-welcome-modal__secondary {
    border: 0 !important;
    background: var(--rd-fill) !important;
    color: var(--rd-ink) !important;
}

/* Onboarding focus panel */
:root body.yf-redesign.yf-dashboard-auth .yf-onboarding-focus__panel {
    border: 0 !important;
    border-radius: var(--rd-radius-lg) !important;
    background: var(--rd-surface) !important;
    box-shadow: var(--rd-shadow-modal) !important;
}

@media (max-width: 575.98px) {
    :root body.yf-redesign.yf-dashboard-auth .modal-header { padding: 18px 18px 10px !important; }
    :root body.yf-redesign.yf-dashboard-auth .modal-body { padding: 6px 18px 16px !important; }
    :root body.yf-redesign.yf-dashboard-auth .modal-footer { padding: 12px 18px 18px !important; }
    :root body.yf-redesign.yf-dashboard-auth .modal-footer .btn { min-width: 0; flex: 1 1 0; }
}