/* ===== 家庭记账 自定义主题（基于 Bootstrap 5.3） ===== */

:root {
    --fl-primary: #4F6BED;
    --fl-primary-dark: #3D55C8;
    --fl-bg: #F4F6FB;
    --fl-card-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --fl-up: #DC2626;      /* 支出上涨=红（警示） */
    --fl-up-bg: #FEE2E2;
    --fl-down: #059669;    /* 支出下降=绿（改善） */
    --fl-down-bg: #D1FAE5;
    --fl-flat: #64748B;
    --fl-flat-bg: #EEF1F5;
}

html { scroll-behavior: smooth; }

body {
    background: var(--fl-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: #1F2937;
}

/* 金额数字等宽对齐 */
.money { font-variant-numeric: tabular-nums; }

/* ---------- 导航 ---------- */
.app-navbar {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .06);
}
.app-navbar .nav-link {
    color: #475569;
    font-weight: 500;
    border-radius: 10px;
    padding: .45rem .9rem;
    margin-right: .15rem;
}
.app-navbar .nav-link:hover { color: var(--fl-primary); background: #EEF2FF; }
.app-navbar .nav-link.active { color: var(--fl-primary); background: #EEF2FF; }
.navbar-toggler { border-color: #E2E8F0; }

.brand-badge {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366F1, #4F6BED);
    color: #fff; font-size: 1.05rem;
    box-shadow: 0 4px 10px rgba(79, 107, 237, .35);
}
.btn-user {
    border: 1px solid #E2E8F0;
    background: #fff;
    border-radius: 999px;
    font-size: .875rem;
}
.btn-user:hover { border-color: var(--fl-primary); color: var(--fl-primary); }

/* ---------- 卡片 ---------- */
.card {
    border: 0;
    border-radius: 16px;
    box-shadow: var(--fl-card-shadow);
}

/* ---------- 汇总统计卡 ---------- */
.stat-label {
    display: flex; align-items: center; gap: .45rem;
    font-size: .8rem; color: #64748B; margin-bottom: .4rem;
}
.stat-ico {
    width: 30px; height: 30px; font-size: .95rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
}
.c-total { background: #EEF2FF; color: #4F6BED; }
.c-count { background: #ECFDF5; color: #059669; }
.c-max   { background: #FEF2F2; color: #DC2626; }
.c-avg   { background: #FFF7ED; color: #EA580C; }
.stat-value { font-size: 1.65rem; font-weight: 700; line-height: 1.2; }

/* 环比徽章：涨=红 跌=绿 平=灰 */
#cardChange { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.badge-change {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .78rem; font-weight: 600;
    padding: .25rem .55rem; border-radius: 999px;
    white-space: nowrap;
}
.badge-change.up   { color: var(--fl-up); background: var(--fl-up-bg); }
.badge-change.down { color: var(--fl-down); background: var(--fl-down-bg); }
.badge-change.flat { color: var(--fl-flat); background: var(--fl-flat-bg); }
/* 次要口径：描边样式 */
.badge-change.outline { background: transparent; box-shadow: inset 0 0 0 1px currentColor; opacity: .8; }
/* 双月账单口径提示 */
.stat-note { font-size: .72rem; color: #94A3B8; line-height: 1.35; }

/* 账单周期标签 */
.badge-cycle {
    display: inline-block;
    font-size: .68rem; font-weight: 600;
    padding: .15rem .5rem; border-radius: 999px;
    vertical-align: 1px;
    margin-left: .35rem;
}
.badge-cycle.cycle-monthly { background: #EEF2FF; color: #4F6BED; }
.badge-cycle.cycle-bimonthly { background: #FFF7ED; color: #EA580C; }

/* ---------- 期间切换 ---------- */
.period-card .card-body { padding: .8rem 1rem; }
.seg-period .btn {
    border: 1px solid #E2E8F0;
    color: #475569;
    font-weight: 600;
    min-width: 52px;
}
.seg-period .btn-check:checked + .btn {
    background: var(--fl-primary);
    border-color: var(--fl-primary);
    color: #fff;
}
.period-label {
    font-size: 1.02rem;
    font-weight: 700;
    min-width: 128px;
    text-align: center;
    letter-spacing: .5px;
}

/* ---------- 图表容器 ---------- */
.chart-box { height: 300px; padding: .25rem .5rem .5rem; }
.chart-tall { height: 330px; }
.chart-box > div { width: 100%; height: 100%; }

.empty-ico { font-size: 2.6rem; }

/* ---------- 最近记录列表 ---------- */
#recentList .list-group-item { padding: .7rem 1.1rem; }
.recent-main { min-width: 0; }

/* ---------- 分类圆点 ---------- */
.cat-dot {
    display: inline-block;
    width: 11px; height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .04);
}

/* ---------- 表格 ---------- */
.expense-table td { padding: .65rem .9rem; }
.expense-table .amount-cell { font-weight: 600; color: #0F172A; }
.table-light thead th { color: #64748B; font-weight: 600; }

.btn-icon {
    border: 0; background: transparent;
    width: 30px; height: 30px; line-height: 1;
    border-radius: 8px;
    color: #64748B;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { background: #EEF2F5; color: var(--fl-primary); }
.btn-icon.danger:hover { background: var(--fl-up-bg); color: var(--fl-up); }
.btn-icon:disabled { opacity: .35; }

/* ---------- 分类色板 ---------- */
.swatch-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.swatch {
    width: 26px; height: 26px;
    border-radius: 8px; cursor: pointer;
    border: 2px solid transparent;
    transition: transform .1s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.active { border-color: #1F2937; }

/* ---------- 角色与状态徽章 ---------- */
.badge-role-admin { background: #EEF2FF; color: #4F6BED; font-weight: 600; padding: .35rem .7rem; border-radius: 999px; font-size: .76rem; }
.badge-role-member { background: #F1F5F9; color: #475569; font-weight: 600; padding: .35rem .7rem; border-radius: 999px; font-size: .76rem; }
.badge-status-active { background: #ECFDF5; color: #059669; font-weight: 600; padding: .35rem .7rem; border-radius: 999px; font-size: .76rem; }
.badge-status-disabled { background: #FEF2F2; color: #DC2626; font-weight: 600; padding: .35rem .7rem; border-radius: 999px; font-size: .76rem; }

/* ---------- 头像 ---------- */
.avatar-circle {
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366F1, #4F6BED);
    color: #fff; font-size: 1.25rem; font-weight: 700;
}

/* ---------- 登录页 ---------- */
.login-body {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, .18), transparent 60%),
        radial-gradient(900px 500px at 110% 20%, rgba(14, 165, 233, .15), transparent 55%),
        var(--fl-bg);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}
.login-wrap { width: 100%; max-width: 420px; }
.login-card { border-radius: 20px; box-shadow: 0 10px 40px rgba(31, 41, 55, .12); border: 0; }
.login-logo {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #6366F1, #4F6BED);
    color: #fff; font-size: 1.8rem;
    box-shadow: 0 8px 20px rgba(79, 107, 237, .4);
}
.login-body .form-control-lg { font-size: 1rem; }

/* ---------- 页脚 ---------- */
.app-footer { margin-top: auto; }

/* ---------- 小屏适配 ---------- */
@media (max-width: 575.98px) {
    .stat-value { font-size: 1.35rem; }
    .period-label { min-width: 104px; font-size: .95rem; }
    .chart-box { height: 260px; }
    .main-content { padding-top: 1rem; }
    .expense-table th:nth-child(4),
    .expense-table td:nth-child(4) { /* 小屏隐藏备注列 */ }
}