/* =========================================================
   App cards
   Единый стиль карточек
   ========================================================= */

:root {
    --app-card-bg: var(--app-surface, #ffffff);
    --app-card-bg-soft: #f8faf8;
    --app-card-border: var(--app-border, #dfe5e1);
    --app-card-text: var(--app-text, #162033);
    --app-card-muted: var(--app-muted, #68736d);

    --app-card-radius: 26px;
    --app-card-radius-md: 22px;
    --app-card-radius-sm: 18px;

    --app-card-shadow: 0 12px 32px rgba(22, 32, 51, 0.07);
    --app-card-shadow-soft: 0 8px 22px rgba(22, 32, 51, 0.05);
}

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

.app-card {
    overflow: hidden;
    background: var(--app-card-bg);
    border: 1px solid var(--app-card-border);
    border-radius: var(--app-card-radius);
    box-shadow: var(--app-card-shadow);
}

.app-card-header {
    min-height: 68px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--app-card-border);
    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.app-card-body {
    padding: 24px;
}

.app-card-title {
    margin: 0;
    color: var(--app-card-text);
    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.app-card-subtitle {
    margin: 5px 0 0;
    color: var(--app-card-muted);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 500;
}

/* =========================================================
   Card modifiers
   ========================================================= */

.app-card-soft {
    background: var(--app-card-bg-soft);
    box-shadow: var(--app-card-shadow-soft);
}

.app-card-flat {
    box-shadow: none;
}

.app-card-form {
    border-radius: var(--app-card-radius);
    box-shadow: var(--app-card-shadow);
}

.app-card-section {
    border-radius: var(--app-card-radius-md);
    box-shadow: var(--app-card-shadow-soft);
}

/* =========================================================
   Bootstrap compatibility
   ========================================================= */

.app-shell .card {
    border-color: var(--app-card-border);
    border-radius: var(--app-card-radius-md);
}

.app-shell .card.shadow-sm,
.app-shell .shadow-sm {
    box-shadow: var(--app-card-shadow-soft) !important;
}

.app-shell .card-header {
    border-bottom-color: var(--app-card-border);
}

/* =========================================================
   Finance compatibility
   Эти классы уже есть на страницах finance
   ========================================================= */

.transaction-desktop-create,
.account-desktop-create-card,
.category-desktop-create-card,
.category-settings-card,
.category-mobile-settings-card {
    overflow: hidden;
    background: var(--app-card-bg) !important;
    border: 1px solid var(--app-card-border) !important;
    border-radius: var(--app-card-radius) !important;
    box-shadow: var(--app-card-shadow) !important;
}

.transaction-history-card,
.category-group-card,
.account-desktop-group {
    overflow: hidden;
    background: var(--app-card-bg) !important;
    border: 1px solid var(--app-card-border) !important;
    border-radius: var(--app-card-radius-md) !important;
    box-shadow: var(--app-card-shadow-soft) !important;
}

.transaction-history-card > .card-header,
.category-desktop-list-header,
.account-desktop-group-header {
    min-height: 68px;
    padding: 0 26px !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--app-card-border) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.transaction-history-card > .card-body,
.category-desktop-list-body,
.account-desktop-list {
    background: #fbfdfb !important;
}

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

@media (max-width: 991.98px) {
    :root {
        --app-card-radius: 22px;
        --app-card-radius-md: 18px;
        --app-card-radius-sm: 16px;
    }

    .app-card-header {
        min-height: 56px;
        padding: 14px 16px;
    }

    .app-card-body {
        padding: 16px;
    }

    .app-card-title {
        font-size: 19px;
    }

    .app-card-subtitle {
        font-size: 13px;
    }
}