/* YousoroFinance redesign-web — motion: sliding segmented thumbs, preloader, soft transitions */

/* ── Sliding thumb for segmented controls (inserted by interactions.js) ── */
:root body.yf-redesign.yf-dashboard-auth .rd-seg-track { position: relative; isolation: isolate; }
:root body.yf-redesign.yf-dashboard-auth .rd-seg-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 9px;
    background: var(--rd-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 3px 8px -2px rgba(15, 23, 42, .08), 0 0 0 .5px rgba(15, 23, 42, .06);
    opacity: 0;
    pointer-events: none;
    transform-origin: 0 50%;
    /* Position and width are animated by interactions.js with transform only (compositor-friendly). */
    transition: opacity .2s ease;
    will-change: transform;
}
:root body.yf-redesign.yf-dashboard-auth .rd-seg-indicator.is-instant { transition: none; }
:root body.yf-redesign.yf-dashboard-auth .rd-seg-track > :not(.rd-seg-indicator) { position: relative; z-index: 1; }
/* Every segmented control moves exactly like the section nav: the thumb slides, items never squash on press */
:root body.yf-redesign.yf-dashboard-auth .rd-seg-track > :not(.rd-seg-indicator) {
    transform: none !important;
    transition: background-color var(--rd-dur) var(--rd-ease), color var(--rd-dur) var(--rd-ease) !important;
}

/* Pressed / pressing items drop their hover wash: only the thumb animates the choice */
:root body.yf-redesign.yf-dashboard-auth .rd-seg-track > :is(.rd-seg-pressed, :active):not(.rd-seg-indicator) {
    background: transparent !important;
    box-shadow: none !important;
}

/* Active items become transparent — the thumb draws the selection */
:root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .yf-dashboard-commandbar .rd-seg-track .nav-element.nav-element-active,
:root body.yf-redesign.yf-dashboard-auth .rd-seg-track.yf-income-view-toolbar .yf-income-view-switch:is(.is-active, [aria-pressed="true"]),
:root body.yf-redesign.yf-dashboard-auth .rd-seg-track.btn-group > .btn.btn-primary,
:root body.yf-redesign.yf-dashboard-auth .rd-seg-track.yf-manage-tabs button.is-active,
:root body.yf-redesign.yf-dashboard-auth .rd-seg-track.yf-rewards-tabs .btn.btn-primary,
:root body.yf-redesign.yf-dashboard-auth .rd-seg-track.yf-plan-terms__options .yf-package-period.is-active,
:root body.yf-redesign.yf-dashboard-auth .rd-seg-track.yf-settings-nav .yf-settings-nav__item.is-active {
    background: transparent !important;
    box-shadow: none !important;
}
:root body.yf-redesign.yf-dashboard-auth .yf-rewards-tabs.rd-seg-track > .rd-seg-indicator { border-radius: 14px; }
:root body.yf-redesign.yf-dashboard-auth .yf-settings-nav.rd-seg-track > .rd-seg-indicator { border-radius: 11px; box-shadow: var(--rd-shadow-control); }
:root body.yf-redesign.yf-dashboard-auth .yf-income-view-toolbar.rd-seg-track > .rd-seg-indicator,
:root body.yf-redesign.yf-dashboard-auth .btn-group.rd-seg-track > .rd-seg-indicator { border-radius: 8px; }


/* ── Preloader: frosted glass over the dashboard with the brand mark ─────
   The body carries the design classes from the first frame, so the glass shows the Эфир canvas
   (never a classic/blank page) on the first load as well as on later navigations. */
:root body.yf-redesign.yf-dashboard-auth #preloader {
    flex-direction: column;
    gap: 22px;
    background: rgba(243, 244, 246, .22) !important;
    backdrop-filter: blur(9px) saturate(140%);
    -webkit-backdrop-filter: blur(9px) saturate(140%);
}
:root body.yf-redesign.yf-dashboard-auth #preloader::before {
    width: 184px;
    height: 44px;
    background: var(--yf-preloader-mark, url("../../images/brand/yousoro-text-color.webp")) center / contain no-repeat;
    content: "";
    opacity: 0;
}
/* Wordmark and spinner fade in together once the image is ready (inline script in layouts/app.blade.php) */
:root body.yf-redesign.yf-dashboard-auth #preloader.is-brand-ready::before {
    animation: rd-brand-in .7s cubic-bezier(.22, 1, .36, 1) both, rd-breathe 1.8s ease-in-out .7s infinite;
}
:root body.yf-redesign.yf-dashboard-auth #loader {
    width: 28px;
    height: 28px;
    border: 2.5px solid rgba(var(--rd-accent-rgb), .16);
    border-top-color: var(--rd-accent);
    opacity: 0;
    transition: opacity .6s ease-out .15s;
    animation: spin .8s linear infinite;
}
:root body.yf-redesign.yf-dashboard-auth #preloader.is-brand-ready #loader { opacity: 1; }
@keyframes rd-brand-in {
    from { opacity: 0; transform: translateY(8px) scale(.96); filter: opacity(var(--rd-brand-dim, 1)) blur(6px); }
    to { opacity: 1; transform: none; filter: opacity(var(--rd-brand-dim, 1)) blur(0); }
}
@keyframes rd-breathe {
    0%, 100% { opacity: .75; transform: scale(.985); }
    50% { opacity: 1; transform: scale(1); }
}

/* ── Tag carousels: aligned pages + soft page turn ─────────────────────── */
:root body.yf-redesign.yf-dashboard-auth :is(.expense-tags-carousel, .income-tags-carousel) {
    gap: 0 !important;
    scroll-behavior: smooth;
}
:root body.yf-redesign.yf-dashboard-auth :is(.expense-tags-page, .income-tags-page) {
    min-width: 100%;
    padding-right: 2px;
    transition: opacity .38s var(--rd-ease), transform .38s var(--rd-ease);
}
/* ── Card hover lift (subtle) ──────────────────────────────────────────── */
@media (hover: hover) {
    :root body.yf-redesign.yf-dashboard-auth .yf-dashboard-shell .card:not(.yf-card--subscription-locked):hover { box-shadow: var(--rd-shadow-card-hover) !important; }
}

/* Bootstrap turns fades off under OS reduced motion; the product keeps short, gentle fades */
:root body.yf-redesign.yf-dashboard-auth .fade { transition: opacity .2s linear !important; }
:root body.yf-redesign.yf-dashboard-auth .modal.fade .modal-dialog { transition: transform .32s var(--rd-ease), opacity .24s var(--rd-ease) !important; }
:root body.yf-redesign.yf-dashboard-auth .collapsing { transition: height .28s var(--rd-ease) !important; }

/* ── Shared dashboard states (css/financeDashboard/dashboard-states.css), «Эфир» finish ── */
:root body.yf-redesign.yf-dashboard-auth .yf-skeleton { --yf-skeleton-base: rgba(118, 118, 128, .1); --yf-skeleton-highlight: rgba(118, 118, 128, .04); }
:root body.yf-redesign.yf-dashboard-auth.dark-theme .yf-skeleton { --yf-skeleton-base: rgba(120, 120, 128, .16); --yf-skeleton-highlight: rgba(120, 120, 128, .28); }
:root body.yf-redesign.yf-dashboard-auth .card.yf-is-refreshing::before { background-image: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .6) 45%, transparent 65%); }
:root body.yf-redesign.yf-dashboard-auth.dark-theme .card.yf-is-refreshing::before { background-image: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .06) 45%, transparent 65%); }
:root body.yf-redesign.yf-dashboard-auth .yf-calendar-skeleton {
    border: 0;
    border-radius: var(--rd-radius-md);
    background: var(--rd-surface);
    box-shadow: var(--rd-shadow-hairline);
}
@container (max-width: 1120px) {
    :root body.yf-redesign.yf-dashboard-auth .yf-calendar-skeleton:last-child:not(.is-selected) { display: none !important; }
}
@container (max-width: 640px) {
    :root body.yf-redesign.yf-dashboard-auth .yf-calendar-skeleton:not(.is-selected) { display: none !important; }
}
:root body.yf-redesign.yf-dashboard-auth .yf-premium-visibility {
    margin: -12px 0 14px;
    padding: 6px 8px 6px 12px;
    border: 0;
    border-radius: 14px;
    background: var(--rd-surface-glass);
    box-shadow: var(--rd-shadow-control);
    color: var(--rd-ink-2);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}
:root body.yf-redesign.yf-dashboard-auth .yf-premium-visibility__icon { border-radius: 9px; background: var(--rd-gold-soft); color: var(--rd-gold); }
:root body.yf-redesign.yf-dashboard-auth .yf-premium-visibility__switch { color: var(--rd-ink); }
:root body.yf-redesign.yf-dashboard-auth .yf-premium-visibility__track { background: var(--rd-fill-hover) !important; }
:root body.yf-redesign.yf-dashboard-auth .yf-premium-visibility__track::after { box-shadow: var(--rd-shadow-thumb); }
:root body.yf-redesign.yf-dashboard-auth .yf-premium-visibility__switch input:checked + .yf-premium-visibility__track { background: var(--rd-accent) !important; }
:root body.yf-redesign.yf-dashboard-auth .yf-premium-visibility__switch input:focus-visible + .yf-premium-visibility__track { outline-color: var(--rd-accent-ring); }