body {
    background-color: #eef0fa;
}

.sidebar {
    background-color: #cdd7f0;
    padding: 1rem;
    height: 100%;
}

.sidebar h5 {
    margin-top: 1rem;
}

.sidebar .btn {
    width: 100%;
    margin-bottom: 0.5rem;
}

.full-height-row {
    height: calc(100vh - 56px); /* 假设顶部导航栏是 56px */
}

.main-content {
    display: flex;
    flex-direction: column; /* 竖向分布 */
    height: calc(100vh - 56px); /* 例如顶部导航高度是 56px */
    background-color: #f5f8ff;
    padding: 0.5rem;

}


.card-box2 {
    width: 100px;
    background-color: #fff;
    min-height: 120px; /* 关键：增加高度 */
    border-radius: 0.5rem;
    padding: 0.5rem;
    text-align: center;
    border: 1px solid #ccc;
}

.card-box {
    width: 100px;
    background: transparent; /* 半透明白色 */
    min-height: 300px; /* 关键：增加高度 */
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    backdrop-filter: blur(5px); /* 可选：毛玻璃模糊效果 */
    color: #000; /* 保证文字可读 */
    border: 1px solid #ccc; /* 灰色边框 */
}

.right-panel {
    background-color: #f0f3ff;
    padding: 1rem;
}

.summary-area {
    background-color: #d0daf8;
    height: 100px;
    border-radius: 0.5rem;
}

.card-list-area {
    flex: 9.5;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    gap: 10px;
    padding: 0.5rem;
}

/* 通用侧栏链接 */
.sidebar-link {
    display: block;
    padding: .375rem .5rem;
    border-radius: .25rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.sidebar-link:hover,
.sidebar-link:focus {
    background: rgba(13, 110, 253, .075); /* 主色浅背景 */
    color: #0d6efd;
}

/* ③ 箭头旋转动画 */
.collapse-arrow {
    transition: transform .2s;
}

button[aria-expanded="true"] .collapse-arrow {
    transform: rotate(90deg); /* 向右 → 向下 */
}

/* 子列表整体：取消默认列表间距 */
.sidebar-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 每个链接卡片化处理 */
.sidebar-link {
    display: block;
    padding: .45rem .75rem;
    margin-bottom: .35rem;
    border-radius: .5rem;
    background: linear-gradient(145deg, #ffffff, #f3f4f8); /* 内凹微渐变 */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05),
    0 1px 2px rgba(0, 0, 0, .06); /* 轻内阴影+外阴影 */
    color: var(--bs-body-color);
    text-decoration: none;
    transition: all .15s ease-in-out;
}

/* 悬停 / 聚焦：文字主色 + 投影上浮 */
.sidebar-link:hover,
.sidebar-link:focus {
    color: #0d6efd;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
}

/* 若需“当前选中”效果，可给 a 加 active 类 */
.sidebar-link.active {
    background: #0d6efd;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}

/* ───────────── 新增：加号卡片 ───────────── */
.card-box.add-card {
    /* 确保继承 card-box 的宽度/高度/边框 */
    display: flex; /* 仅用于让加号居中 */
    align-items: center;
    justify-content: center;
    cursor: pointer; /* 鼠标提示 */
    transition: background .15s, box-shadow .15s;
}

/* 加号图标：深石墨灰实心 */
.card-box.add-card i {
    font-size: 2.5rem;
    color: #0d6efd; /* ← 高级灰 */
    text-shadow: none;
    pointer-events: none;
}

/* 悬停时：图标亮一点 + 卡片浮起 */
.card-box.add-card:hover {
    background: rgba(13, 110, 253, .08); /* 维持原有蓝色微底 */
    box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
}

.card-box.add-card:hover i {
    color: #0d6efd; /* 悬停时主色高亮，强调可点击 */
}

/* 让加号项显得是“按钮”而非普通列表 */
.add-ledger-link i {
    font-size: 1.25rem;
    color: #0d6efd;
}

.add-ledger-link:hover {
    background: rgba(13, 110, 253, .1);
    transform: none; /* 取消上浮，可根据喜好保留 */
}

/* 让加号行继续继承 .sidebar-link 的内边距，并用 flex 居中 */
.sidebar-sublist .add-ledger-link {
    display: flex; /* 居中 */
    align-items: center;
    justify-content: center;
    padding: .45rem .75rem; /* 与普通项完全一致 */
}

.sidebar-sublist .add-ledger-link i {
    font-size: 1.25rem; /* 建议与文字字号一致 */
    color: #0d6efd; /* 深石墨灰，保持高级感 */
}

/* 让整条链接左侧为图标预留 1.75rem（0.75 内边距 + 1rem 图标宽度） */
.add-ledger-link {
    position: relative;
    padding-left: 1.75rem;
}

/* 图标固定在 0.75rem 内边距处，文字自然左对齐 */
.add-ledger-link i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}


/* 统一卡片尺寸：所有 card-box（含新增按钮）同高同宽 */
:root{
  --entry-card-w: 80px;   /* ← 自行微调 */
  --entry-card-h: 540px;   /* ← 自行微调，和新增按钮保持一致 */
}

.card-box{
  width: var(--entry-card-w) !important;
  height: var(--entry-card-h) !important;
  min-height: 0 !important;
}

/* 三段式卡片：上-中-下，各自居中 */
.entry-card{
  display: grid;
  grid-template-rows: 1fr auto 1fr auto 1fr; /* 中间那块自然在正中 */
  align-items: center;
  justify-items: center;
  padding: 8px 6px;
}

/* 三段的公共样式 */
.entry-card .blk{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* 竖排文字（姓名 + 大写金额） */
.entry-card .vtext{
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  letter-spacing: 2px;
  line-height: 1.2;
  text-align: start;
}
.entry-card .name{ font-weight: 700; }
.entry-card .upper{ color:#333; }

/* 数字金额（横排） */
.entry-card .num{
  font-weight: 700;
  white-space: nowrap;
}

/* 分隔线（虚线） */
.entry-card .sep{
  width: 90%;
  border-top: 1px dashed rgba(0,0,0,.25);
  margin: 4px 0;
}

.quick-amounts .btn { min-width: 64px; }

.card-list-area{
  gap: 2px !important;     /* 原来是 10px，按需改成 6/4 等 */
  padding: .25rem !important;  /* 可选：整体内边距再小一点 */
}

/* 卡片允许菜单溢出显示 */
.entry-card{
  position: relative;
  overflow: visible;            /* 重要：不要裁剪 dropdown */
}