/* YousoroFinance redesign-web — surfaces: cards, headings, affordances, gates, badges */

/* ── Card ──────────────────────────────────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .card {
    border: 0 !important;
    border-radius: var(--rd-radius-lg) !important;
    background: var(--rd-surface) !important;
    color: var(--rd-ink) !important;
    box-shadow: var(--rd-shadow-card) !important;
    transition: box-shadow var(--rd-dur) var(--rd-ease);
}

:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .card-body {
    padding: 24px 26px 26px;
}

/* ── Card headings ─────────────────────────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .card-title {
    margin-bottom: 4px;
    color: var(--rd-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: var(--rd-tracking-snug);
}

:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .card-title:has(> .yf-card-title-icon) {
    display: flex;
    align-items: center;
    gap: 12px;
}

:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .card-subtitle {
    margin-top: 2px;
    color: var(--rd-muted) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell :is(.card-text, .mb-1, .mb-2) {
    font-size: 14px;
    line-height: 1.55;
}

/* Icon chip beside titles: squircle with a subtle tinted gradient */
:root body.yf-redesign.yf-dashboard-auth .yf-card-title-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-right: 0 !important;
    border-radius: 10px;
    color: var(--rd-accent);
    background: linear-gradient(160deg, rgba(var(--rd-accent-rgb), .14), rgba(var(--rd-accent-rgb), .07));
    box-shadow: inset 0 0 0 .5px rgba(var(--rd-accent-rgb), .12);
    font-size: 16px;
}

:root body.yf-redesign.yf-dashboard-auth #card2 .yf-card-title-icon { color: var(--rd-info); background: linear-gradient(160deg, rgba(47, 111, 228, .14), rgba(47, 111, 228, .06)); box-shadow: inset 0 0 0 .5px rgba(47, 111, 228, .14); }
:root body.yf-redesign.yf-dashboard-auth #card3 .yf-card-title-icon { color: var(--rd-violet); background: linear-gradient(160deg, rgba(124, 92, 214, .15), rgba(124, 92, 214, .06)); box-shadow: inset 0 0 0 .5px rgba(124, 92, 214, .14); }
:root body.yf-redesign.yf-dashboard-auth #card5 .yf-card-title-icon { color: var(--rd-gold); background: linear-gradient(160deg, rgba(181, 138, 47, .16), rgba(181, 138, 47, .06)); box-shadow: inset 0 0 0 .5px rgba(181, 138, 47, .16); }

:root body.yf-redesign.yf-dashboard-auth :is(.yf-card-heading, .yf-card-title-row, .yf-table-card-heading, .yf-chart-card-heading) {
    gap: 12px;
}

/* ── Card affordances: add (+) and info (i) ────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .yf-card-action {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 0;
    border-radius: 50%;
    background: var(--rd-accent-soft);
    color: var(--rd-accent);
    font-size: 16px;
    transition: background var(--rd-dur-fast) var(--rd-ease), transform var(--rd-dur-fast) var(--rd-ease);
}
:root body.yf-redesign.yf-dashboard-auth .yf-card-action:hover { background: var(--rd-accent-soft-strong); transform: none; }
:root body.yf-redesign.yf-dashboard-auth .yf-card-action:active { transform: scale(.94); }

:root body.yf-redesign.yf-dashboard-auth .yf-card-auto-info,
:root body.yf-redesign.yf-dashboard-auth .dashboard-info-button:not(.yf-table-info-button):not(.yf-card-auto-info),
:root body.yf-redesign.yf-dashboard-auth .yf-table-info-button {
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    color: var(--rd-subtle) !important;
    box-shadow: none !important;
    transition: background var(--rd-dur-fast) var(--rd-ease), color var(--rd-dur-fast) var(--rd-ease);
}
:root body.yf-redesign.yf-dashboard-auth .yf-card-auto-info { top: 20px; right: 20px; }
:root body.yf-redesign.yf-dashboard-auth :is(.yf-card-auto-info, .dashboard-info-button, .yf-table-info-button) i { font-size: 18px; }
:root body.yf-redesign.yf-dashboard-auth :is(.yf-card-auto-info, .dashboard-info-button, .yf-table-info-button):hover {
    background: var(--rd-fill-soft) !important;
    color: var(--rd-ink-2) !important;
    transform: none;
}

/* ── Inline actions (“Создать расход”, “Добавить тег”) ─────────────────── */
:root body.yf-redesign.yf-dashboard-auth .yf-inline-action {
    min-height: 32px;
    gap: 6px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--rd-radius-pill);
    background: var(--rd-accent-soft);
    color: var(--rd-accent-ink);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: var(--rd-tracking-snug);
    transition: background var(--rd-dur-fast) var(--rd-ease), color var(--rd-dur-fast) var(--rd-ease);
}
:root body.yf-redesign.yf-dashboard-auth .yf-inline-action:hover,
:root body.yf-redesign.yf-dashboard-auth .yf-inline-action:focus-visible {
    border: 0;
    background: var(--rd-accent-soft-strong);
    color: var(--rd-accent-press);
    transform: none;
}
:root body.yf-redesign.yf-dashboard-auth .yf-inline-action i { font-size: 15px; }
:root body.yf-redesign.yf-dashboard-auth .yf-table-card-actions .yf-inline-action:first-child {
    background: var(--rd-accent);
    color: var(--rd-on-accent);
    box-shadow: 0 1px 2px rgba(var(--rd-accent-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .14);
}
:root body.yf-redesign.yf-dashboard-auth .yf-table-card-actions .yf-inline-action:first-child:hover { background: var(--rd-accent-hover); color: #fff; }

/* ── View switchers inside cards (Таблица / Календарь, bar / line) ─────── */
:root body.yf-redesign.yf-dashboard-auth .yf-income-view-toolbar {
    gap: 2px;
    padding: 3px;
    border: 0;
    border-radius: 10px;
    background: var(--rd-fill);
}
:root body.yf-redesign.yf-dashboard-auth .yf-income-view-switch {
    min-height: 28px;
    gap: 6px;
    padding: 0 12px;
    border: 0 !important;
    border-radius: 7px;
    background: transparent;
    color: var(--rd-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: none;
}
:root body.yf-redesign.yf-dashboard-auth .yf-income-view-switch:hover { color: var(--rd-ink); background: var(--rd-seg-hover); }
:root body.yf-redesign.yf-dashboard-auth .yf-income-view-switch.is-active,
:root body.yf-redesign.yf-dashboard-auth .yf-income-view-switch[aria-pressed="true"] {
    color: var(--rd-ink);
    background: var(--rd-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 0 0 .5px rgba(15, 23, 42, .05);
}

/* ── Subscription gate on locked cards ─────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .yf-card--subscription-locked > .card-body { filter: blur(5px) saturate(.6); opacity: .42; }
:root body.yf-redesign.yf-dashboard-auth .yf-card--subscription-locked::after { background: none; }

:root body.yf-redesign.yf-dashboard-auth .yf-subscription-gate {
    gap: 12px;
    background: linear-gradient(180deg, var(--rd-gate-top), var(--rd-gate-bottom));
    backdrop-filter: blur(6px) saturate(150%);
    -webkit-backdrop-filter: blur(6px) saturate(150%);
}
:root body.yf-redesign.yf-dashboard-auth .yf-subscription-gate__icon {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    color: var(--rd-gold);
    background: linear-gradient(160deg, rgba(181, 138, 47, .2), rgba(181, 138, 47, .08));
    box-shadow: inset 0 0 0 .5px rgba(181, 138, 47, .2);
    font-size: 20px;
}
:root body.yf-redesign.yf-dashboard-auth .yf-subscription-gate__content strong { font-size: 16px; font-weight: 700; letter-spacing: var(--rd-tracking-snug); }
:root body.yf-redesign.yf-dashboard-auth .yf-subscription-gate__content span { color: var(--rd-muted); font-size: 13px; }
:root body.yf-redesign.yf-dashboard-auth .yf-subscription-gate__button {
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--rd-radius-pill);
    background: var(--rd-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 650;
    box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .45);
}
:root body.yf-redesign.yf-dashboard-auth .yf-subscription-gate__button:hover { background: #000; color: #fff; }
:root body.yf-redesign.yf-dashboard-auth .yf-subscription-gate__button i { color: #f3d27a; }

:root body.yf-redesign.yf-dashboard-auth .overlay-card-lock {
    border: 0;
    background: var(--rd-surface-glass);
    backdrop-filter: blur(16px) saturate(160%);
}

/* ── Badges ────────────────────────────────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .badge {
    padding: 4px 8px;
    border-radius: var(--rd-radius-pill);
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0;
}
:root body.yf-redesign.yf-dashboard-auth :is(.bg-positive-change, .bg-changes-up) { background: var(--rd-positive-soft) !important; color: var(--rd-positive) !important; }
:root body.yf-redesign.yf-dashboard-auth .bg-negative-change { background: var(--rd-negative-soft) !important; color: var(--rd-negative) !important; }

/* ── Skeletons ─────────────────────────────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth {
    --yf-skeleton-base: rgba(118, 118, 128, .1);
    --yf-skeleton-highlight: rgba(118, 118, 128, .04);
}
:root body.yf-redesign.yf-dashboard-auth .placeholder { background-color: rgba(118, 118, 128, .16); border-radius: 6px; }

/* ── Empty states ──────────────────────────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .yf-table-empty__content > span:first-child {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 15px;
    background: var(--rd-accent-soft);
    color: var(--rd-accent);
}
:root body.yf-redesign.yf-dashboard-auth .yf-table-empty__content strong { color: var(--rd-ink); font-size: 16px; }
:root body.yf-redesign.yf-dashboard-auth .yf-table-empty__content p { color: var(--rd-muted); }

/* ── Demo / admin banners ──────────────────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth :is(.yf-demo-banner, .yf-admin-preview-banner) {
    border: 0;
    border-radius: var(--rd-radius-md);
    background: var(--rd-surface);
    box-shadow: var(--rd-shadow-card);
    color: var(--rd-ink);
}

@media (max-width: 575.98px) {
    :root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .card { border-radius: 18px !important; }
    :root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .card-body { padding: 18px 16px 20px; }
    :root body.yf-redesign.yf-dashboard-auth .yf-card-auto-info { top: 14px; right: 12px; }
}

/* Primary hero cards (hero-cards.css): on the gradient the whole token set flips to light-on-colour,
   so every component inside (tiles, chips, rings, rows) follows without its own override. */
:root body.yf-redesign.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] {
    color-scheme: dark;
    --rd-ink: var(--hero-ink); --rd-ink-2: rgba(255, 255, 255, .9);
    --rd-muted: var(--hero-muted); --rd-subtle: var(--hero-subtle); --rd-placeholder: rgba(255, 255, 255, .46);
    --rd-line: var(--hero-line); --rd-line-soft: rgba(255, 255, 255, .1); --rd-line-strong: rgba(255, 255, 255, .3);
    --rd-surface: var(--hero-tile); --rd-surface-raised: var(--hero-tile); --rd-surface-grouped: var(--hero-tile);
    --rd-fill: rgba(255, 255, 255, .14); --rd-fill-soft: rgba(255, 255, 255, .1); --rd-fill-hover: rgba(255, 255, 255, .2); --rd-fill-press: rgba(255, 255, 255, .26);
    --rd-accent: var(--hero-accent); --rd-accent-rgb: 255, 255, 255; --rd-accent-soft: rgba(255, 255, 255, .14); --rd-accent-soft-strong: rgba(255, 255, 255, .22); --rd-accent-ink: #fff;
    --rd-positive: var(--hero-pos); --rd-positive-soft: rgba(134, 239, 196, .16);
    --rd-negative: var(--hero-neg); --rd-negative-soft: rgba(255, 183, 170, .16);
    --rd-info: #cfe6ff; --rd-info-soft: rgba(207, 230, 255, .16);
    --rd-warning: #ffd79a; --rd-warning-soft: rgba(255, 215, 154, .16);
    --rd-gold: #f3dca2; --rd-gold-soft: rgba(243, 220, 162, .16);
}
:root body.yf-redesign.yf-dashboard-auth[data-card-accents="on"] .yf-dashboard-shell .card[data-primary-card] {
    --rd-shadow-card: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 16px 30px -18px color-mix(in srgb, var(--hero-mid) 78%, transparent), 0 2px 6px -2px rgba(0, 0, 0, .18);
    --rd-shadow-card-hover: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 20px 36px -18px color-mix(in srgb, var(--hero-mid) 86%, transparent), 0 3px 8px -2px rgba(0, 0, 0, .2);
    background:
        radial-gradient(120% 95% at 108% -12%, var(--hero-glow-a), transparent 52%),
        radial-gradient(95% 80% at -18% 118%, var(--hero-glow-b), transparent 58%),
        linear-gradient(155deg, var(--hero-start) 0%, var(--hero-mid) 48%, var(--hero-end) 100%) !important;
}
:root body.yf-redesign.yf-dashboard-auth.dark-theme[data-card-accents="on"] .yf-dashboard-shell .card[data-primary-card] {
    --rd-shadow-card: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 30px -18px color-mix(in srgb, var(--hero-start) 62%, transparent);
    --rd-shadow-card-hover: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 36px -18px color-mix(in srgb, var(--hero-start) 72%, transparent);
}
:root body.yf-redesign.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .expense-budget-ring {
    background:
        radial-gradient(circle closest-side, var(--hero-hole) 73%, transparent 74.5%),
        conic-gradient(var(--expense-budget-color, var(--rd-positive)) var(--expense-budget-progress, 0%), rgba(255, 255, 255, .16) 0);
    filter: none;
}
:root body.yf-redesign.yf-dashboard-auth[data-card-accents="on"] .card[data-primary-card] .income-month-progress-ring {
    background:
        radial-gradient(circle closest-side, var(--hero-hole) 76%, transparent 78%),
        conic-gradient(var(--rd-positive) var(--income-progress, 0%), rgba(255, 255, 255, .16) 0);
}
:root body.yf-redesign.yf-dashboard-auth[data-card-accents="on"] #card1 .yf-total-money__amount { border-bottom-color: rgba(255, 255, 255, .42) !important; }
:root body.yf-redesign.yf-dashboard-auth[data-card-accents="on"] #card1 .yf-total-money__amount:hover,
:root body.yf-redesign.yf-dashboard-auth[data-card-accents="on"] #card1 .yf-total-money__amount:focus-visible { border-bottom-color: rgba(255, 255, 255, .9) !important; }