/* ===========================================================
   Кнопки в стиле Apple Liquid Glass (мягкий вариант).
   Подключается последним, поэтому перекрывает стили кнопок в шаблонах.
   =========================================================== */

:root {
    --glass-bg:            rgba(255,255,255,0.72);
    --glass-bg-pressed:    rgba(255,255,255,0.92);
    --glass-border:        rgba(0,0,0,0.10);
    --glass-shadow:
        0 6px 16px rgba(0,0,0,0.07),
        0 1px 3px rgba(0,0,0,0.05),
        inset 0 1px 1px rgba(255,255,255,0.95),
        inset 0 -1px 1px rgba(255,255,255,0.6),
        inset 0 0 0 1px rgba(255,255,255,0.5);
    --glass-shadow-pressed:
        0 2px 6px rgba(0,0,0,0.08),
        inset 0 1px 1px rgba(255,255,255,1),
        inset 0 0 0 1px rgba(255,255,255,0.6);

    --glass-blue:          rgba(10,118,255,0.88);
    --glass-blue-border:   rgba(0,70,180,0.25);
    --glass-blue-shadow:
        0 6px 16px rgba(0,122,255,0.28),
        0 1px 3px rgba(0,60,160,0.18),
        inset 0 1px 1px rgba(255,255,255,0.45),
        inset 0 -1px 1px rgba(255,255,255,0.15),
        inset 0 0 0 1px rgba(255,255,255,0.12);
    --glass-blue-shadow-pressed:
        0 2px 6px rgba(0,122,255,0.25),
        inset 0 1px 1px rgba(255,255,255,0.4);
}

/* ── Общая основа ── */
.chip,
.btn-save, .btn-cancel, .btn-delete, .btn-logout, .btn-login,
.btn-add-expense, .btn-add-income,
.month-form button,
.cat-edit-form button,
.calc-pad button,
.nav-link, .back-link {
    border: 0.5px solid var(--glass-border);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow: var(--glass-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.chip:active,
.btn-save:active, .btn-cancel:active, .btn-delete:active, .btn-logout:active, .btn-login:active,
.btn-add-expense:active, .btn-add-income:active,
.month-form button:active,
.cat-edit-form button:active,
.calc-pad button:active,
.nav-link:active, .back-link:active {
    transform: scale(0.95);
    background: var(--glass-bg-pressed);
    box-shadow: var(--glass-shadow-pressed);
    opacity: 1;
}

/* ── Синее стекло: главные действия ── */
.chip.active,
.btn-save, .btn-login,
.btn-add-expense, .btn-add-income,
.month-form button,
.cat-edit-form button[type=submit]:not(.cat-delete-btn) {
    background: var(--glass-blue);
    border-color: var(--glass-blue-border);
    color: white;
    box-shadow: var(--glass-blue-shadow);
}

.btn-save:active, .btn-login:active,
.btn-add-expense:active, .btn-add-income:active,
.month-form button:active,
.cat-edit-form button[type=submit]:not(.cat-delete-btn):active {
    background: rgba(10,118,255,0.95);
    box-shadow: var(--glass-blue-shadow-pressed);
}

/* ── Белое стекло: второстепенные ── */
.btn-cancel { color: #3A3A3C; }

.nav-link:hover { opacity: 1; }

.back-link {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
}

.calc-pad button { background: var(--glass-bg); }

.calc-pad .calc-op {
    background: rgba(0,122,255,0.12);
    color: #007AFF;
}

.calc-pad .calc-op:active { background: rgba(0,122,255,0.2); }

/* ── Красный текст: выход и удаление ── */
.btn-logout, .btn-delete {
    color: #FF3B30;
    padding: 7px 14px;
    border-radius: 999px;
}

.cat-edit-form .cat-delete-btn {
    align-self: flex-start;
    background: var(--glass-bg);
    color: #FF3B30;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8em;
    font-weight: 500;
}


/* ===========================================================
   Поля ввода: слегка «вдавленные», синее свечение при фокусе
   =========================================================== */

.f-input, .f-select, .f-input-add, .f-select-add,
.field input,
.month-form input[type=number], .month-form select,
.savings-edit input,
.cat-edit-form input,
.period-form input {
    background: #F4F4F7;
    border: 0.5px solid rgba(0,0,0,0.08);
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.06),
        0 1px 0 rgba(255,255,255,0.8);
    color: #1C1C1E;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.f-input:focus, .f-select:focus, .f-input-add:focus, .f-select-add:focus,
.field input:focus,
.month-form input[type=number]:focus, .month-form select:focus,
.savings-edit input:focus,
.cat-edit-form input:focus,
.period-form input:focus,
.amount-wrap .f-input.active {
    outline: none;
    background: white;
    border-color: rgba(0,122,255,0.55);
    box-shadow:
        0 0 0 4px rgba(0,122,255,0.14),
        inset 0 1px 2px rgba(0,0,0,0.03);
}

/* Доходы — зелёный акцент */
.f-input-add:focus, .f-select-add:focus {
    border-color: rgba(52,199,89,0.6);
    box-shadow:
        0 0 0 4px rgba(52,199,89,0.16),
        inset 0 1px 2px rgba(0,0,0,0.03);
}

.amount-wrap .f-input.invalid {
    border-color: rgba(255,59,48,0.6);
    box-shadow: 0 0 0 4px rgba(255,59,48,0.14);
}

.cat-edit-form input[readonly],
.cat-edit-form input[readonly]:focus {
    background: #EDEDF0;
    color: #8E8E93;
    border-color: rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}

.f-input::placeholder, .f-input-add::placeholder,
.field input::placeholder, .cat-edit-form input::placeholder {
    color: #A1A1A8;
}


/* ===========================================================
   Шапка: прилипает сверху и размывает контент под собой
   =========================================================== */

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Контент над шапкой плавно уходит в цвет фона */
    background: linear-gradient(180deg, rgba(242,242,247,0.96) 0%, rgba(242,242,247,0.85) 40%, rgba(242,242,247,0) 100%);
}

.header-inner {
    background: rgba(255,255,255,0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 0.5px solid rgba(255,255,255,0.7);
    box-shadow:
        0 8px 24px rgba(0,0,0,0.08),
        0 1px 3px rgba(0,0,0,0.05),
        inset 0 1px 1px rgba(255,255,255,0.9),
        inset 0 0 0 1px rgba(255,255,255,0.35);
}


/* ===========================================================
   Карточки: мягкая объёмная тень и блик по верхнему краю
   =========================================================== */

.card, .stat-card, .content > .total-row {
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFE 100%);
    border: 0.5px solid rgba(0,0,0,0.05);
    box-shadow:
        0 8px 24px rgba(0,0,0,0.06),
        0 1px 3px rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,1);
}


/* ===========================================================
   Зелёное стекло: действия с доходами
   =========================================================== */

.btn-add-income,
.income-edit .btn-save {
    background: rgba(40,190,80,0.90);
    border-color: rgba(20,120,50,0.25);
    color: white;
    box-shadow:
        0 6px 16px rgba(52,199,89,0.28),
        0 1px 3px rgba(20,120,50,0.18),
        inset 0 1px 1px rgba(255,255,255,0.45),
        inset 0 -1px 1px rgba(255,255,255,0.15),
        inset 0 0 0 1px rgba(255,255,255,0.12);
}

.btn-add-income:active,
.income-edit .btn-save:active {
    background: rgba(40,190,80,0.97);
    box-shadow:
        0 2px 6px rgba(52,199,89,0.25),
        inset 0 1px 1px rgba(255,255,255,0.4);
}


/* ===========================================================
   Прогресс-бары: вдавленная дорожка, заливка с бликом
   =========================================================== */

.cat-bar, .prog-bar {
    background: rgba(120,120,128,0.14);
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}

.cat-bar  { height: 6px; }
.prog-bar { height: 8px; }

.cat-bar-fill, .prog-fill {
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 1px 3px rgba(0,0,0,0.12);
}

.cat-bar-fill.ok   { background: linear-gradient(90deg, #6BE08A 0%, #34C759 100%); }
.cat-bar-fill.warn { background: linear-gradient(90deg, #FFBE5C 0%, #FF9500 100%); }
.cat-bar-fill.over { background: linear-gradient(90deg, #FF7A70 0%, #FF3B30 100%); }


/* ===========================================================
   Тёмная тема — включается вместе с тёмным режимом системы.
   Палитра как в iOS: фон #000, карточки #1C1C1E, цвета акцентов светлее.
   =========================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --glass-bg:          rgba(58,58,60,0.62);
        --glass-bg-pressed:  rgba(72,72,74,0.85);
        --glass-border:      rgba(255,255,255,0.10);
        --glass-shadow:
            0 6px 16px rgba(0,0,0,0.45),
            0 1px 3px rgba(0,0,0,0.35),
            inset 0 1px 1px rgba(255,255,255,0.14),
            inset 0 0 0 1px rgba(255,255,255,0.04);
        --glass-shadow-pressed:
            0 2px 6px rgba(0,0,0,0.4),
            inset 0 1px 1px rgba(255,255,255,0.12);

        --glass-blue:        rgba(10,132,255,0.90);
        --glass-blue-border: rgba(120,190,255,0.25);
    }

    body { background: #000000; color: #F2F2F7; }

    /* Шапка */
    .header {
        background: linear-gradient(180deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0) 100%);
    }

    .header-inner {
        background: rgba(28,28,30,0.72);
        border-color: rgba(255,255,255,0.08);
        box-shadow:
            0 8px 24px rgba(0,0,0,0.6),
            inset 0 1px 1px rgba(255,255,255,0.10),
            inset 0 0 0 1px rgba(255,255,255,0.04);
    }

    /* Карточки */
    .card, .stat-card, .content > .total-row {
        background: linear-gradient(180deg, #1F1F21 0%, #1C1C1E 100%);
        border-color: rgba(255,255,255,0.06);
        box-shadow:
            0 8px 24px rgba(0,0,0,0.5),
            inset 0 1px 0 rgba(255,255,255,0.06);
    }

    /* Текст */
    .header-title, .stat-value, .title, .remember-label, .chip, .btn-cancel,
    .calc-pad button {
        color: #F2F2F7;
    }

    .section-label, .month-period, .stat-label, .savings-goal-text, .prog-pct,
    .cat-of, .cat-done-toggle, .period-form-label, .empty, .tx-meta, .tx-date,
    .total-label, .person-name, .edit-title, .subtitle, .field label,
    .remember-label span, .calc-pad .calc-fn {
        color: #98989F;
    }

    .cat-edit-link, .hint, .person-amount.zero { color: #636366; }

    .stat-value.blue, .amount-preview, .back-link, .nav-link,
    .month-period:hover, .cat-edit-link:hover, .cat-done-toggle:hover {
        color: #0A84FF;
    }

    .stat-value.green, .person-amount.positive, .total-row .person-amount {
        color: #30D158;
    }

    .stat-value.red, .cat-spent.over, .tx-amount, .total-value,
    .btn-logout, .btn-delete, .cat-edit-form .cat-delete-btn {
        color: #FF453A;
    }

    /* Разделители и вложенные блоки */
    .cat-item, .tx-item, .income-item { border-bottom-color: rgba(255,255,255,0.08); }

    .cat-done-toggle, .tx-edit, .income-edit { border-top-color: rgba(255,255,255,0.08); }

    .tx-edit, .income-edit, .card .total-row { background: rgba(255,255,255,0.03); }

    .tx-main:active, .person-btn:hover { background: rgba(255,255,255,0.06); }

    .cat-badge { background: rgba(255,255,255,0.08); color: #98989F; }

    /* Поля ввода */
    .f-input, .f-select, .f-input-add, .f-select-add,
    .field input,
    .month-form input[type=number], .month-form select,
    .savings-edit input,
    .cat-edit-form input,
    .period-form input,
    .remember-row input[type=checkbox] {
        background: rgba(118,118,128,0.18);
        border-color: rgba(255,255,255,0.08);
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
        color: #F2F2F7;
    }

    .f-input:focus, .f-select:focus, .f-input-add:focus, .f-select-add:focus,
    .field input:focus,
    .month-form input[type=number]:focus, .month-form select:focus,
    .savings-edit input:focus,
    .cat-edit-form input:focus,
    .period-form input:focus,
    .amount-wrap .f-input.active {
        background: rgba(118,118,128,0.26);
        border-color: rgba(10,132,255,0.7);
        box-shadow: 0 0 0 4px rgba(10,132,255,0.28);
    }

    .f-input-add:focus, .f-select-add:focus {
        border-color: rgba(48,209,88,0.7);
        box-shadow: 0 0 0 4px rgba(48,209,88,0.25);
    }

    .cat-edit-form input[readonly],
    .cat-edit-form input[readonly]:focus {
        background: rgba(118,118,128,0.10);
        color: #636366;
        box-shadow: none;
    }

    .remember-row input[type=checkbox]:checked { background: #0A84FF; border-color: #0A84FF; }

    .f-input::placeholder, .f-input-add::placeholder,
    .field input::placeholder, .cat-edit-form input::placeholder {
        color: #636366;
    }

    /* Калькулятор */
    .calc-pad .calc-op { background: rgba(10,132,255,0.20); color: #0A84FF; }

    .calc-pad .calc-op:active { background: rgba(10,132,255,0.30); }

    /* Прогресс-бары */
    .cat-bar, .prog-bar {
        background: rgba(118,118,128,0.24);
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
    }

    .cat-bar-fill.ok   { background: linear-gradient(90deg, #5EE07F 0%, #30D158 100%); }
    .cat-bar-fill.warn { background: linear-gradient(90deg, #FFC15E 0%, #FF9F0A 100%); }
    .cat-bar-fill.over { background: linear-gradient(90deg, #FF7B72 0%, #FF453A 100%); }

    /* Уведомления */
    .flash.success { background: rgba(48,209,88,0.16); color: #30D158; }

    .flash.error, .error { background: rgba(255,69,58,0.16); color: #FF453A; }
}