/* =========================================================
   App buttons
   Единый стандарт кнопок для всего приложения
   ========================================================= */

:root {
    --fs-btn-green: var(--app-primary, #0f9360);
    --fs-btn-green-dark: #0d7f53;
    --fs-btn-green-soft: var(--app-primary-soft, #e8f4ee);

    --fs-btn-yellow: #ffc107;
    --fs-btn-yellow-hover: #f2b705;

    --fs-btn-danger: #dc3545;
    --fs-btn-danger-soft: #fff5f5;

    --fs-btn-text: var(--app-text, #162033);
    --fs-btn-muted: var(--app-muted, #667085);
    --fs-btn-border: var(--app-border, #dfe5e1);
    --fs-btn-surface: var(--app-surface, #ffffff);

    --fs-btn-height: 46px;
    --fs-btn-height-sm: 38px;
    --fs-btn-height-lg: 52px;

    --fs-btn-radius: 999px;
    --fs-btn-radius-square: 14px;
}

/* =========================================================
   Base
   ========================================================= */

.fs-btn {
    min-height: var(--fs-btn-height);
    padding: 0 22px;
    border-radius: var(--fs-btn-radius);
    border: 1px solid transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-size: 15px;
    line-height: 1;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    user-select: none;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
}

.fs-btn:hover {
    text-decoration: none;
}

.fs-btn:active {
    transform: translateY(1px);
}

.fs-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(15, 147, 96, 0.16);
}

.fs-btn:disabled,
.fs-btn.disabled {
    opacity: 0.56;
    pointer-events: none;
}

/* =========================================================
   Variants
   ========================================================= */

.fs-btn-primary {
    background: var(--fs-btn-green);
    border-color: var(--fs-btn-green);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 147, 96, 0.18);
}

.fs-btn-primary:hover {
    background: var(--fs-btn-green-dark);
    border-color: var(--fs-btn-green-dark);
    color: #ffffff;
}

.fs-btn-accent {
    background: var(--fs-btn-yellow);
    border-color: var(--fs-btn-yellow);
    color: #141b18;
    box-shadow: 0 9px 18px rgba(255, 193, 7, 0.22);
}

.fs-btn-accent:hover {
    background: var(--fs-btn-yellow-hover);
    border-color: var(--fs-btn-yellow-hover);
    color: #141b18;
}

.fs-btn-outline {
    background: #ffffff;
    border-color: #9aa5af;
    color: var(--fs-btn-muted);
}

.fs-btn-outline:hover {
    background: #f3faf6;
    border-color: var(--fs-btn-green);
    color: var(--fs-btn-green);
}

.fs-btn-secondary {
    background: #f4f8f5;
    border-color: #edf1ee;
    color: var(--fs-btn-muted);
}

.fs-btn-secondary:hover {
    background: #edf5f0;
    border-color: #dce8e1;
    color: var(--fs-btn-text);
}

.fs-btn-danger {
    background: #ffffff;
    border-color: rgba(220, 53, 69, 0.42);
    color: var(--fs-btn-danger);
}

.fs-btn-danger:hover {
    background: var(--fs-btn-danger-soft);
    border-color: var(--fs-btn-danger);
    color: var(--fs-btn-danger);
}

/* =========================================================
   Sizes
   ========================================================= */

.fs-btn-sm {
    min-height: var(--fs-btn-height-sm);
    padding: 0 16px;
    font-size: 14px;
}

.fs-btn-lg {
    min-height: var(--fs-btn-height-lg);
    padding: 0 28px;
    font-size: 16px;
}

.fs-btn-full {
    width: 100%;
}

.fs-btn-icon {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 50%;
}

.fs-btn-icon .bi,
.fs-btn-icon .ph {
    font-size: 18px;
    line-height: 1;
}

/* =========================================================
   Existing app buttons
   Сохраняем старые классы, но приводим к общей системе
   ========================================================= */

.app-icon-button {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 1px solid var(--fs-btn-border);
    background: var(--fs-btn-surface);
    color: var(--fs-btn-text);
    text-decoration: none;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.12s ease;
}

.app-icon-button:hover {
    background: var(--fs-btn-green-soft);
    border-color: rgba(15, 147, 96, 0.22);
    color: var(--fs-btn-green);
}

.app-icon-button:active {
    transform: translateY(1px);
}

.app-primary-soft-button {
    min-height: var(--fs-btn-height-sm);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--fs-btn-radius);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--fs-btn-green);
    background: var(--fs-btn-green-soft);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

/* =========================================================
   Bootstrap compatibility
   Чтобы обычные .btn тоже не выбивались
   ========================================================= */

.app-shell .btn {
    min-height: var(--fs-btn-height);
    padding-inline: 20px;
    border-radius: var(--fs-btn-radius);
    font-size: 15px;
    line-height: 1;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.app-shell .btn-sm {
    min-height: var(--fs-btn-height-sm);
    padding-inline: 16px;
    font-size: 14px;
}

.app-shell .btn-primary {
    border-color: var(--fs-btn-green);
    background: var(--fs-btn-green);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 147, 96, 0.18);
}

.app-shell .btn-primary:hover {
    border-color: var(--fs-btn-green-dark);
    background: var(--fs-btn-green-dark);
    color: #ffffff;
}

.app-shell .btn-warning {
    border-color: var(--fs-btn-yellow);
    background: var(--fs-btn-yellow);
    color: #141b18;
    box-shadow: 0 9px 18px rgba(255, 193, 7, 0.22);
}

.app-shell .btn-outline-secondary {
    border-color: #9aa5af;
    background: #ffffff;
    color: var(--fs-btn-muted);
}

.app-shell .btn-outline-secondary:hover {
    border-color: var(--fs-btn-green);
    background: #f3faf6;
    color: var(--fs-btn-green);
}

.app-shell .btn-outline-danger {
    border-color: rgba(220, 53, 69, 0.42);
    background: #ffffff;
    color: var(--fs-btn-danger);
}

.app-shell .btn-outline-danger:hover {
    border-color: var(--fs-btn-danger);
    background: var(--fs-btn-danger-soft);
    color: var(--fs-btn-danger);
}

/* =========================================================
   Page compatibility
   ВАЖНО: эти !important нужны временно, потому что page-css
   подключается позже и перебивает общий components/buttons.css
   ========================================================= */

/* Желтые основные кнопки добавления */

.account-add-btn,
.transaction-desktop-submit-btn,
.transaction-mobile-submit-btn,
.statistics-desktop-apply-btn,
.statistics-mobile-apply-btn {
    min-height: var(--fs-btn-height) !important;
    padding: 0 24px !important;
    border: 1px solid var(--fs-btn-yellow) !important;
    border-radius: var(--fs-btn-radius) !important;
    background: var(--fs-btn-yellow) !important;
    color: #141b18 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    box-shadow: 0 9px 18px rgba(255, 193, 7, 0.22) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.account-add-btn:hover,
.transaction-desktop-submit-btn:hover,
.transaction-mobile-submit-btn:hover,
.statistics-desktop-apply-btn:hover,
.statistics-mobile-apply-btn:hover {
    background: var(--fs-btn-yellow-hover) !important;
    border-color: var(--fs-btn-yellow-hover) !important;
    color: #141b18 !important;
}

/* Зеленые кнопки применения */

.transaction-filter-grid .btn-primary,
#bulk-set-category-btn {
    min-height: var(--fs-btn-height-sm) !important;
    padding: 0 20px !important;
    border: 1px solid var(--fs-btn-green) !important;
    border-radius: var(--fs-btn-radius) !important;
    background: var(--fs-btn-green) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 18px rgba(15, 147, 96, 0.18) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.transaction-filter-grid .btn-primary:hover,
#bulk-set-category-btn:hover {
    background: var(--fs-btn-green-dark) !important;
    border-color: var(--fs-btn-green-dark) !important;
}

/* Серые outline-кнопки: развернуть, сбросить, отмена */

.account-desktop-group-toggle,
.account-mobile-group-toggle,
.category-desktop-list-header .btn,
.category-mobile-group-toggle,
.transaction-filter-grid .btn-outline-secondary,
.transaction-select-all-btn,
.transaction-clear-selection-btn {
    min-height: var(--fs-btn-height-sm) !important;
    padding: 0 18px !important;
    border: 1px solid #9aa5af !important;
    border-radius: var(--fs-btn-radius) !important;
    background: #ffffff !important;
    color: var(--fs-btn-muted) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    box-shadow: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.account-desktop-group-toggle:hover,
.account-mobile-group-toggle:hover,
.category-desktop-list-header .btn:hover,
.category-mobile-group-toggle:hover,
.transaction-filter-grid .btn-outline-secondary:hover,
.transaction-select-all-btn:hover,
.transaction-clear-selection-btn:hover {
    border-color: var(--fs-btn-green) !important;
    background: #f3faf6 !important;
    color: var(--fs-btn-green) !important;
}

/* Красные действия */

#bulk-delete-btn,
.account-mobile-delete-btn {
    min-height: var(--fs-btn-height-sm) !important;
    padding: 0 18px !important;
    border: 1px solid rgba(220, 53, 69, 0.42) !important;
    border-radius: var(--fs-btn-radius) !important;
    background: #ffffff !important;
    color: var(--fs-btn-danger) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    box-shadow: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

#bulk-delete-btn:hover,
.account-mobile-delete-btn:hover {
    border-color: var(--fs-btn-danger) !important;
    background: var(--fs-btn-danger-soft) !important;
    color: var(--fs-btn-danger) !important;
}

/* Удаление на десктопной карточке счетов оставляем высоким,
   но приводим цвет/радиус/шрифт к системе */

.account-desktop-delete-btn {
    border: 1px solid rgba(220, 53, 69, 0.42) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: var(--fs-btn-danger) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    box-shadow: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.account-desktop-delete-btn:hover {
    border-color: var(--fs-btn-danger) !important;
    background: var(--fs-btn-danger-soft) !important;
    color: var(--fs-btn-danger) !important;
}

/* Кнопки-иконки редактирования/удаления категорий */

.category-row button[type="button"]:not(.category-color-option):not(.category-icon-option),
.category-desktop-compact-item button[type="button"],
.category-mobile-compact-item button[type="button"] {
    border-radius: 50%;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 991.98px) {
    :root {
        --fs-btn-height: 44px;
        --fs-btn-height-sm: 38px;
        --fs-btn-height-lg: 48px;
    }

    .fs-btn,
    .app-shell .btn {
        font-size: 15px;
    }

    .fs-btn-full-mobile {
        width: 100%;
    }

    .account-add-btn,
    .transaction-desktop-submit-btn,
    .transaction-mobile-submit-btn,
    .statistics-desktop-apply-btn,
    .statistics-mobile-apply-btn {
        min-height: 44px !important;
        font-size: 15px !important;
    }
}