/* YousoroFinance redesign-web — operations: Расходы & Доходы sections (tags, month summaries, rings, KPI, categories) */

/* ── Tag lists (expense & income) ──────────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth :is(.expense-tags-card, .income-tags-card) .yf-card-heading--tag-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

:root body.yf-redesign.yf-dashboard-auth :is(.expense-tags-page, .income-tags-page) {
    gap: 4px 8px !important;
}

:root body.yf-redesign.yf-dashboard-auth .tag :is(.tag-select, .expense-tag-select, .income-tag-select) {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 10px;
    color: var(--rd-ink);
    font-size: 14px;
    font-weight: 600;
    transition: background var(--rd-dur-fast) var(--rd-ease);
}
:root body.yf-redesign.yf-dashboard-auth .tag :is(.tag-select, .expense-tag-select, .income-tag-select):hover { background: var(--rd-fill-soft); }

:root body.yf-redesign.yf-dashboard-auth :is(.expense-tag-color, .income-tag-color) {
    flex: 0 0 10px;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

:root body.yf-redesign.yf-dashboard-auth :is(.expense-tag-name, .income-tag-name) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

:root body.yf-redesign.yf-dashboard-auth :is(.expense-tag-edit, .income-tag-edit) {
    margin-left: auto;
    color: var(--rd-placeholder);
    font-size: 14px;
    opacity: 0;
    transition: opacity var(--rd-dur-fast) var(--rd-ease);
}
:root body.yf-redesign.yf-dashboard-auth .tag :hover > :is(.expense-tag-edit, .income-tag-edit) { opacity: 1; }

:root body.yf-redesign.yf-dashboard-auth :is(.expense-tags-controls, .income-tags-controls) { gap: 10px; margin-top: 14px; }
:root body.yf-redesign.yf-dashboard-auth :is(.expense-tags-control, .income-tags-control) {
    width: 30px;
    min-width: 30px !important;
    height: 30px;
    min-height: 30px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--rd-fill-soft) !important;
    color: var(--rd-ink-2) !important;
    box-shadow: none !important;
}
:root body.yf-redesign.yf-dashboard-auth :is(.expense-tags-control, .income-tags-control):hover { background: var(--rd-fill) !important; }
:root body.yf-redesign.yf-dashboard-auth :is(.expense-tags-page-indicator, .income-tags-page-indicator) { color: var(--rd-muted); font-size: 12.5px; font-weight: 650; }

:root body.yf-redesign.yf-dashboard-auth :is(.expense-tags-carousel, .income-tags-carousel)::-webkit-scrollbar { height: 0; }
:root body.yf-redesign.yf-dashboard-auth :is(.expense-tags-carousel, .income-tags-carousel) { scrollbar-width: none; }

/* ── Expense month summary: grouped list + activity ring ───────────────── */
:root body.yf-redesign.yf-dashboard-auth .expense-month-card .card-body {
    grid-template-columns: minmax(0, 1fr) 232px;
    column-gap: 28px;
    row-gap: 16px;
    align-content: start;
}

:root body.yf-redesign.yf-dashboard-auth .expense-month-card__metrics { gap: 0 28px; align-self: start; }
:root body.yf-redesign.yf-dashboard-auth .expense-month-card__metric-column { gap: 0; }

:root body.yf-redesign.yf-dashboard-auth .expense-month-card .mb-1 {
    min-height: 40px;
    gap: 10px;
    border-bottom: 1px solid var(--rd-line-soft);
    color: var(--rd-muted);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
}
:root body.yf-redesign.yf-dashboard-auth .expense-month-card .mb-1:last-child { border-bottom: 0; }
:root body.yf-redesign.yf-dashboard-auth .expense-month-card .mb-1 > :is(strong, span[id]) { margin-left: auto; text-align: right; }
:root body.yf-redesign.yf-dashboard-auth .expense-month-card .mb-1 strong { color: var(--rd-ink); font-size: 14px; font-weight: 700; }
:root body.yf-redesign.yf-dashboard-auth .expense-month-card .mb-1 :is(i, img) {
    flex: 0 0 18px;
    width: 18px;
    color: var(--rd-subtle) !important;
    font-size: 16px;
    opacity: .9;
}
:root body.yf-redesign.yf-dashboard-auth .expense-month-card .mb-1 img { filter: grayscale(1) opacity(.6); }

:root body.yf-redesign.yf-dashboard-auth .expense-budget-inline {
    padding: 18px 12px;
    border-left: 0;
    border-radius: var(--rd-radius-md);
    background: var(--rd-surface-grouped);
    box-shadow: inset 0 0 0 1px var(--rd-line-soft);
}
:root body.yf-redesign.yf-dashboard-auth .expense-budget-inline .card-title {
    align-self: center;
    margin-bottom: 14px !important;
    color: var(--rd-muted) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    text-align: center;
}

:root body.yf-redesign.yf-dashboard-auth .expense-budget-ring {
    width: 144px;
    height: 144px;
    margin-bottom: 12px;
    background:
        radial-gradient(circle closest-side, var(--rd-surface-grouped) 84%, transparent 85.5%),
        conic-gradient(var(--expense-budget-color, var(--rd-positive)) var(--expense-budget-progress, 0%), var(--rd-fill) 0);
    box-shadow: none;
    filter: drop-shadow(0 6px 14px rgba(22, 160, 107, .12));
}
:root body.yf-redesign.yf-dashboard-auth .expense-budget-ring.is-overrun { filter: drop-shadow(0 6px 14px rgba(229, 72, 77, .14)); }
:root body.yf-redesign.yf-dashboard-auth .expense-budget-ring__center strong { color: var(--rd-ink); font-size: 20px; font-weight: 750; letter-spacing: var(--rd-tracking-snug); }
:root body.yf-redesign.yf-dashboard-auth .expense-budget-ring__center span { color: var(--rd-muted); font-size: 12.5px; font-weight: 650; }
:root body.yf-redesign.yf-dashboard-auth .expense-budget-ring-caption { color: var(--rd-subtle); font-size: 12.5px; font-weight: 550; }

/* ── Income month summary: four tiles ──────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .income-month-goal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--rd-radius-pill);
    background: var(--rd-fill-soft);
    color: var(--rd-muted);
    font-size: 13px;
    font-weight: 550;
}
:root body.yf-redesign.yf-dashboard-auth .income-month-goal i { color: var(--rd-accent); }
:root body.yf-redesign.yf-dashboard-auth .income-month-goal strong { color: var(--rd-ink); }

:root body.yf-redesign.yf-dashboard-auth .income-month-metrics { gap: 12px; }
:root body.yf-redesign.yf-dashboard-auth .income-month-metric {
    min-height: 84px;
    padding: 16px 18px;
    border: 0;
    border-radius: var(--rd-radius-md);
    background: var(--rd-surface-grouped);
    box-shadow: inset 0 0 0 1px var(--rd-line-soft);
}
:root body.yf-redesign.yf-dashboard-auth .income-month-metric__icon { width: 40px; height: 40px; border-radius: 12px; font-size: 19px; }
:root body.yf-redesign.yf-dashboard-auth .income-month-metric--plan .income-month-metric__icon { color: var(--rd-info); background: var(--rd-info-soft); }
:root body.yf-redesign.yf-dashboard-auth .income-month-metric--fact .income-month-metric__icon { color: var(--rd-positive); background: var(--rd-positive-soft); }
:root body.yf-redesign.yf-dashboard-auth .income-month-metric--delta .income-month-metric__icon { color: var(--rd-warning); background: var(--rd-warning-soft); }
:root body.yf-redesign.yf-dashboard-auth .income-month-metric__label { margin-bottom: 3px; color: var(--rd-muted); font-size: 12.5px; font-weight: 600; }
:root body.yf-redesign.yf-dashboard-auth .income-month-metric :is(strong, #incomeHeroMonthPlan, #incomeTotalMonth) { color: var(--rd-ink); font-size: 16.5px; line-height: 1.25; font-weight: 750; letter-spacing: var(--rd-tracking-snug); }
:root body.yf-redesign.yf-dashboard-auth .income-month-metric__subtext { font-size: 12.5px; }

:root body.yf-redesign.yf-dashboard-auth .income-month-progress-ring {
    background:
        radial-gradient(circle closest-side, var(--rd-surface-grouped) 76%, transparent 78%),
        conic-gradient(var(--rd-positive) var(--income-progress, 0%), var(--rd-fill) 0);
    box-shadow: none;
}

/* ── Year KPI blocks (income) ──────────────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .yf-income-kpi__metric {
    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) !important;
}
:root body.yf-redesign.yf-dashboard-auth .yf-income-kpi__metric > i {
    border-radius: 11px !important;
    color: var(--rd-accent) !important;
    background: var(--rd-accent-soft) !important;
}
:root body.yf-redesign.yf-dashboard-auth .yf-income-kpi__metric > span { color: var(--rd-muted) !important; font-size: 12.5px; font-weight: 600; }
:root body.yf-redesign.yf-dashboard-auth .yf-income-kpi__metric > strong { color: var(--rd-ink) !important; font-size: 16.5px; font-weight: 750; letter-spacing: var(--rd-tracking-snug); }
:root body.yf-redesign.yf-dashboard-auth .yf-income-kpi__metric--positive > i { color: var(--rd-positive) !important; background: var(--rd-positive-soft) !important; }
:root body.yf-redesign.yf-dashboard-auth .yf-income-kpi__metric--accent > i { color: var(--rd-info) !important; background: var(--rd-info-soft) !important; }

/* ── Expense categories (donut + ranked list) ──────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-heading p { color: var(--rd-muted); font-size: 13px; }

:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-kpis { gap: 12px; }
:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-kpi {
    padding: 14px 16px !important;
    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) !important;
}
:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-kpi > span { color: var(--rd-muted) !important; font-size: 12.5px; font-weight: 600; }
:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-kpi > strong { color: var(--rd-ink) !important; font-size: 19px; font-weight: 750; letter-spacing: var(--rd-tracking-snug); }

:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-details {
    border: 0 !important;
    border-radius: var(--rd-radius-md) !important;
    background: transparent !important;
    box-shadow: none !important;
}
:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-details__heading strong { color: var(--rd-ink); font-size: 15px; font-weight: 700; }
:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-details__heading span { color: var(--rd-subtle); font-size: 12.5px; }

:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-row {
    min-height: 44px;
    border: 0 !important;
    border-bottom: 1px solid var(--rd-line-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background var(--rd-dur-fast) var(--rd-ease);
}
:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-row:hover { background: var(--rd-fill-soft) !important; border-radius: 0 !important; }
:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-row__marker { width: 10px !important; height: 10px !important; border-radius: 50% !important; }
:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-row__name { color: var(--rd-ink); font-size: 14px; font-weight: 600; }
:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-row__amount { color: var(--rd-ink); font-weight: 700; }
:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-row__share { color: var(--rd-muted); font-weight: 600; }
:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-row__arrow { color: var(--rd-placeholder); }

:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-insight {
    border: 0 !important;
    border-radius: var(--rd-radius-md) !important;
    background: var(--rd-info-soft) !important;
    color: var(--rd-ink-2) !important;
}
:root body.yf-redesign.yf-dashboard-auth .yf-expense-category-meta { color: var(--rd-subtle); font-size: 12px; }