/* ── Variables ──────────────────────────────────────────────────────────────── */
:root {
    --income:  #2E7D32;
    --expense: #C62828;
    --primary: #1565C0;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
body {
    font-size: 15px;
    -webkit-tap-highlight-color: transparent;
}

.pb-nav { padding-bottom: 80px; }

/* ── Bottom navigation ──────────────────────────────────────────────────────── */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1030;
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #757575;
    flex: 1;
    height: 100%;
    transition: color .15s;
}

.bottom-nav-item.active {
    color: var(--primary);
}

.bottom-nav-icon  { font-size: 22px; line-height: 1; }
.bottom-nav-label { font-size: 10px; margin-top: 2px; }

.bottom-nav-add {
    width: 52px;
    height: 52px;
    background: var(--primary);
    border-radius: 50%;
    color: #fff !important;
    font-size: 28px !important;
    flex: 0 0 52px;
    margin-bottom: 16px;
    box-shadow: 0 3px 8px rgba(21,101,192,.4);
}

.bottom-nav-add .bottom-nav-icon { font-size: 26px; }

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card { border-radius: 12px; border: none; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.card-header { border-radius: 12px 12px 0 0 !important; }

/* ── Balance card ───────────────────────────────────────────────────────────── */
.balance-card {
    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
    color: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(13,71,161,.3);
}
.balance-card .label    { font-size: 12px; opacity: .8; }
.balance-card .amount   { font-size: 30px; font-weight: 700; }
.balance-card .sub-item { flex: 1; text-align: center; }
.balance-card .divider  { width: 1px; background: rgba(255,255,255,.3); align-self: stretch; }
.balance-card .sub-amount.income  { color: #A5D6A7; font-weight: 600; }
.balance-card .sub-amount.expense { color: #EF9A9A; font-weight: 600; }

/* ── Color utilities ────────────────────────────────────────────────────────── */
.text-income  { color: var(--income)  !important; }
.text-expense { color: var(--expense) !important; }

.badge-income  { background-color: #E8F5E9; color: var(--income);  font-weight: 600; }
.badge-expense { background-color: #FFEBEE; color: var(--expense); font-weight: 600; }

/* ── Transaction items ──────────────────────────────────────────────────────── */
.tx-amount { font-weight: 700; font-size: 15px; }
.tx-meta   { font-size: 12px; color: #757575; }

/* ── Section headers ────────────────────────────────────────────────────────── */
.section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #555;
    margin: 16px 0 8px;
}

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.form-label { font-size: 13px; font-weight: 600; color: #444; margin-bottom: 4px; }
.form-control, .form-select {
    border-radius: 8px;
    border-color: #ccc;
    font-size: 15px;
    padding: .55rem .75rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(21,101,192,.15);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn { border-radius: 8px; font-weight: 600; }
.btn-lg { min-height: 48px; font-size: 16px; }

/* ── Type toggle ────────────────────────────────────────────────────────────── */
.type-toggle .btn-check + .btn { border-radius: 8px !important; }
.type-toggle .btn-check:checked + .btn-outline-success { background: var(--income);  color: #fff; border-color: var(--income); }
.type-toggle .btn-check:checked + .btn-outline-danger  { background: var(--expense); color: #fff; border-color: var(--expense); }

/* ── Progress bar for category summary ─────────────────────────────────────── */
.cat-bar { height: 6px; border-radius: 3px; }

/* ── Account / category list items ─────────────────────────────────────────── */
.list-item {
    background: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Tabs ───────────────────────────────────────────────────────────────────── */
.nav-tabs .nav-link       { color: #555; font-weight: 600; border-radius: 8px 8px 0 0; }
.nav-tabs .nav-link.active{ color: var(--primary); border-bottom-color: #fff; }