/* YousoroFinance redesign-web — controls: buttons, segmented groups, fields, selects, pickers, switches */

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Base: typography and motion only — layout stays with each component. */
:root body.yf-redesign.yf-dashboard-auth .btn {
    --bs-btn-font-weight: 650;
    border-radius: var(--rd-radius-sm);
    font-family: var(--rd-font);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: var(--rd-tracking-snug);
    transition: background-color var(--rd-dur-fast) var(--rd-ease), color var(--rd-dur-fast) var(--rd-ease),
        box-shadow var(--rd-dur-fast) var(--rd-ease), transform var(--rd-dur-fast) var(--rd-ease);
}
:root body.yf-redesign.yf-dashboard-auth .btn:active:not(:disabled) { transform: scale(.98); }

/* Standard action buttons (footers, forms, empty states) get the full control geometry */
:root body.yf-redesign.yf-dashboard-auth :is(.modal-footer, .yf-table-empty__content, .yf-finance-form) .btn,
:root body.yf-redesign.yf-dashboard-auth .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-outline-danger):not(.task-button):not(.yf-task-action):not(.btn-group > .btn):not(.yf-rewards-tabs .btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--rd-control-h);
    padding: 0 16px;
}
:root body.yf-redesign.yf-dashboard-auth .btn:disabled,
:root body.yf-redesign.yf-dashboard-auth .btn.disabled { opacity: .45; }

/* Primary — solid emerald with a faint top highlight */
:root body.yf-redesign.yf-dashboard-auth :is(.btn-primary, .btn-success) {
    border: 0 !important;
    background: var(--rd-accent) !important;
    color: var(--rd-on-accent) !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 :is(.btn-primary, .btn-success):hover { background: var(--rd-accent-hover) !important; }
:root body.yf-redesign.yf-dashboard-auth :is(.btn-primary, .btn-success):active { background: var(--rd-accent-press) !important; }

/* Secondary — neutral system fill */
:root body.yf-redesign.yf-dashboard-auth :is(.btn-secondary, .btn-light, .btn-outline-secondary) {
    border: 0 !important;
    background: var(--rd-fill) !important;
    color: var(--rd-ink) !important;
    box-shadow: none !important;
}
:root body.yf-redesign.yf-dashboard-auth :is(.btn-secondary, .btn-light, .btn-outline-secondary):hover { background: var(--rd-fill-hover) !important; }
:root body.yf-redesign.yf-dashboard-auth :is(.btn-secondary, .btn-light, .btn-outline-secondary):active { background: var(--rd-fill-press) !important; }

/* Outline primary — tinted */
:root body.yf-redesign.yf-dashboard-auth :is(.btn-outline-primary, .btn-outline-success) {
    border: 0 !important;
    background: var(--rd-accent-soft) !important;
    color: var(--rd-accent-ink) !important;
}
:root body.yf-redesign.yf-dashboard-auth :is(.btn-outline-primary, .btn-outline-success):hover { background: var(--rd-accent-soft-strong) !important; }

/* Destructive */
:root body.yf-redesign.yf-dashboard-auth .btn-danger {
    border: 0 !important;
    background: var(--rd-negative) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(229, 72, 77, .3), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}
:root body.yf-redesign.yf-dashboard-auth .btn-outline-danger {
    border: 0 !important;
    background: var(--rd-negative-soft) !important;
    color: var(--rd-negative) !important;
}
:root body.yf-redesign.yf-dashboard-auth .btn-outline-danger:hover { background: rgba(229, 72, 77, .15) !important; }

:root body.yf-redesign.yf-dashboard-auth .btn-link { color: var(--rd-accent); text-decoration: none; font-weight: 600; }

/* Close (×) — circular neutral glyph button */
:root body.yf-redesign.yf-dashboard-auth .btn-close {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--rd-fill-soft);
    background-size: 10px;
    background-position: center;
    background-image: none;
    color: var(--rd-ink);
    opacity: .75;
    transition: background-color var(--rd-dur-fast) var(--rd-ease), opacity var(--rd-dur-fast) var(--rd-ease);
}
:root body.yf-redesign.yf-dashboard-auth .btn-close:hover { background-color: var(--rd-fill-hover); opacity: 1; }
:root body.yf-redesign.yf-dashboard-auth .btn-close:focus { box-shadow: var(--rd-focus-ring); }
/* Crisp vector cross in the text colour (light/dark aware), instead of Bootstrap's fixed SVG or a font glyph */
:root body.yf-redesign.yf-dashboard-auth .btn-close { display: inline-grid; place-items: center; padding: 0; }
:root body.yf-redesign.yf-dashboard-auth .btn-close::after {
    width: 11px;
    height: 11px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3 3 13' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3 3 13' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    content: "";
}
:root body.yf-redesign.yf-dashboard-auth .btn-close.btn-close-white { background-color: rgba(255, 255, 255, .16); color: #fff; }

/* ── Button groups → segmented control ─────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .btn-group {
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: var(--rd-fill);
}
:root body.yf-redesign.yf-dashboard-auth .btn-group > .btn {
    min-height: 30px;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--rd-ink-2) !important;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none !important;
}
:root body.yf-redesign.yf-dashboard-auth .btn-group > .btn:hover { background: var(--rd-seg-hover) !important; color: var(--rd-ink) !important; }
:root body.yf-redesign.yf-dashboard-auth .btn-group > .btn.btn-primary {
    background: var(--rd-surface) !important;
    color: var(--rd-ink) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 0 0 .5px rgba(15, 23, 42, .05) !important;
}

/* ── Labels ────────────────────────────────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .form-label,
:root body.yf-redesign.yf-dashboard-auth .yf-form-label-row .form-label {
    margin-bottom: 7px;
    color: var(--rd-ink-2);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
}
:root body.yf-redesign.yf-dashboard-auth .form-text { color: var(--rd-muted); font-size: 12px; }

:root body.yf-redesign.yf-dashboard-auth .yf-form-inline-action {
    border: 0;
    background: transparent;
    color: var(--rd-accent);
    font-size: 13px;
    font-weight: 650;
}
:root body.yf-redesign.yf-dashboard-auth .yf-form-inline-action:hover { color: var(--rd-accent-hover); }

/* ── Text fields: typography only. Surface, border, hover and focus belong to fields.css ── */
:root body.yf-redesign.yf-dashboard-auth :is(.form-control, .form-select, .custom-select .selected) {
    padding: 9px 13px;
    font-family: var(--rd-font);
    font-size: 14.5px;
    font-weight: 550;
}
:root body.yf-redesign.yf-dashboard-auth :is(.form-control, .form-select)::placeholder { color: var(--rd-placeholder); font-weight: 500; opacity: 1; }
:root body.yf-redesign.yf-dashboard-auth :is(.form-control, .form-select):disabled { opacity: .6; }
:root body.yf-redesign.yf-dashboard-auth .form-select {
    padding-right: 36px;
    background-position: right 13px center;
    background-size: 12px 10px;
}
:root body.yf-redesign.yf-dashboard-auth textarea.form-control { min-height: 96px; line-height: 1.5; }
:root body.yf-redesign.yf-dashboard-auth .form-control.is-invalid { border-color: var(--rd-negative) !important; box-shadow: 0 0 0 4px var(--rd-negative-soft) !important; }

:root body.yf-redesign.yf-dashboard-auth .yf-calculator-trigger {
    width: 34px;
    height: 34px;
    margin-left: 6px;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--rd-surface) !important;
    color: var(--rd-accent) !important;
    box-shadow: var(--rd-shadow-control) !important;
}

/* Currency picker */
:root body.yf-redesign.yf-dashboard-auth .yf-currency-picker__trigger {
    min-height: 32px;
    margin-right: 6px;
    padding: 0 10px;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--rd-surface) !important;
    color: var(--rd-ink) !important;
    box-shadow: var(--rd-shadow-control) !important;
    font-weight: 650;
}
:root body.yf-redesign.yf-dashboard-auth .yf-currency-picker__trigger small { color: var(--rd-muted); }
:root body.yf-redesign.yf-dashboard-auth :is(.yf-currency-picker__list, .yf-floating-listbox) {
    padding: 6px !important;
    border: 0 !important;
    border-radius: var(--rd-radius-md) !important;
    background: var(--rd-surface-glass-strong) !important;
    box-shadow: var(--rd-shadow-raised) !important;
    backdrop-filter: blur(30px) saturate(190%);
    -webkit-backdrop-filter: blur(30px) saturate(190%);
}
:root body.yf-redesign.yf-dashboard-auth .yf-currency-picker__option {
    min-height: 34px;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--rd-ink) !important;
}
:root body.yf-redesign.yf-dashboard-auth .yf-currency-picker__option:hover { background: var(--rd-fill-soft) !important; }
:root body.yf-redesign.yf-dashboard-auth .yf-currency-picker__option.is-selected { background: var(--rd-accent-soft) !important; color: var(--rd-accent-ink) !important; }

/* Custom tag select (expense / income tag) */
:root body.yf-redesign.yf-dashboard-auth .custom-select .selected {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
:root body.yf-redesign.yf-dashboard-auth .custom-select .selected:hover { background-color: var(--rd-fill) !important; }
:root body.yf-redesign.yf-dashboard-auth .custom-select .options {
    padding: 6px;
    border: 0 !important;
    border-radius: var(--rd-radius-md) !important;
    background: var(--rd-surface-glass-strong) !important;
    box-shadow: var(--rd-shadow-raised) !important;
    backdrop-filter: blur(30px) saturate(190%);
    -webkit-backdrop-filter: blur(30px) saturate(190%);
}
:root body.yf-redesign.yf-dashboard-auth .custom-select .option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--rd-ink);
    font-size: 14px;
    font-weight: 550;
}
:root body.yf-redesign.yf-dashboard-auth .custom-select .option:hover { background: var(--rd-fill-soft); }
/* Tag dots in fields and lists match the «Теги» cards exactly: a crisp 10 px circle, never stretched */
:root body.yf-redesign.yf-dashboard-auth .yf-tag-swatch {
    flex: 0 0 10px !important;
    align-self: center;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px;
    aspect-ratio: 1;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08) !important;
}

/* bootstrap-select */
:root body.yf-redesign.yf-dashboard-auth .bootstrap-select > .dropdown-toggle {
    min-height: 42px;
    border: 0 !important;
    border-radius: 11px !important;
    background: var(--rd-fill-soft) !important;
    color: var(--rd-ink) !important;
    box-shadow: none !important;
}

/* ── Day calendar (operation date) ─────────────────────────────────────── */
:root body.yf-redesign.yf-dashboard-auth .yf-day-calendar {
    padding: 14px;
    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-day-calendar__caption span { color: var(--rd-muted); font-size: 12.5px; font-weight: 600; }
:root body.yf-redesign.yf-dashboard-auth .yf-day-calendar__caption strong { color: var(--rd-ink); font-size: 13.5px; font-weight: 700; }
:root body.yf-redesign.yf-dashboard-auth .yf-day-calendar__week span { color: var(--rd-subtle); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
:root body.yf-redesign.yf-dashboard-auth .yf-day-calendar__grid { gap: 4px; }
:root body.yf-redesign.yf-dashboard-auth .yf-day-calendar__day {
    min-height: 36px;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--rd-ink) !important;
    font-size: 14px;
    font-weight: 600;
    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-day-calendar__day:hover { background: var(--rd-fill-soft) !important; }
:root body.yf-redesign.yf-dashboard-auth .yf-day-calendar__day.is-today { color: var(--rd-accent) !important; font-weight: 750; }
:root body.yf-redesign.yf-dashboard-auth .yf-day-calendar__day.is-selected {
    background: var(--rd-accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px -4px rgba(var(--rd-accent-rgb), .6) !important;
}
:root body.yf-redesign.yf-dashboard-auth .yf-day-calendar__day:disabled { color: var(--rd-placeholder) !important; }

/* Month picker */
:root body.yf-redesign.yf-dashboard-auth .yf-month-picker__month {
    min-height: 36px;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--rd-fill-soft) !important;
    color: var(--rd-ink) !important;
    font-weight: 600;
}
:root body.yf-redesign.yf-dashboard-auth .yf-month-picker__month:hover { background: var(--rd-fill) !important; }
:root body.yf-redesign.yf-dashboard-auth .yf-month-picker__month.is-selected,
:root body.yf-redesign.yf-dashboard-auth .yf-month-picker__month[aria-pressed="true"] {
    background: var(--rd-accent) !important;
    color: #fff !important;
}

:root body.yf-redesign.yf-dashboard-auth .form-check-input {
    border-color: var(--rd-line-strong);
    background-color: var(--rd-surface);
}
:root body.yf-redesign.yf-dashboard-auth .form-check-input:checked { border-color: var(--rd-accent); background-color: var(--rd-accent); }
:root body.yf-redesign.yf-dashboard-auth .form-check-input:focus { box-shadow: var(--rd-focus-ring); border-color: var(--rd-accent); }
:root body.yf-redesign.yf-dashboard-auth .form-switch .form-check-input {
    width: 42px;
    height: 24px;
    border: 0;
    background-color: rgba(120, 120, 128, .24);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.4' fill='%23fff'/%3e%3c/svg%3e");
}
:root body.yf-redesign.yf-dashboard-auth .form-switch .form-check-input:checked { background-color: var(--rd-positive); }

:root body.yf-redesign.yf-dashboard-auth input[type="checkbox"][role="switch"]:not(.form-check-input) { accent-color: var(--rd-positive); }

/* Tooltips / popovers */
:root body.yf-redesign.yf-dashboard-auth .tooltip { --bs-tooltip-bg: rgba(28, 28, 30, .92); --bs-tooltip-border-radius: 8px; --bs-tooltip-font-size: 12px; }
:root body.yf-redesign.yf-dashboard-auth .popover {
    --bs-popover-border-color: transparent;
    --bs-popover-border-radius: var(--rd-radius-md);
    --bs-popover-body-color: var(--rd-ink-2);
    box-shadow: var(--rd-shadow-raised);
}