/* 日历面板的每日可花汇总区：主卡 → 超支选择卡 → 本期设置 (+ ⚡) → 不记账试算 → ⚠️ / 💡 → 计算明细 (结构见 daily_allowance_summary.js)
   全部文字 ≥ 11px、零负字距，放不下就换行，不截断不缩字；可点控件高 ≥ 28px (选择卡 ≥ 34px)
   超支卡与试算结果卡共用 .das-choice-card + 对账表 .das-ot-table (daily_allowance_table.js)；试算块其余样式见 daily_allowance_whatif.css */
/* 次要文字在浅灰底上加深到 #6B7280 (对比度约 4.6:1)；只覆盖汇总区内的变量，不动全局色板 */
.das-grid { --text-sub: #6B7280; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 8px; }
.das-grid > * { grid-column: 1 / -1; min-width: 0; }
.das-grid [hidden] { display: none !important; }
.das-item { display: flex; gap: 4px; min-width: 0; font-size: 11.5px; color: var(--text-sub); }
.das-item b { font-weight: 600; color: var(--text-main); font-variant-numeric: tabular-nums; }

/* 主卡：两个大数字 (标题与小字说明同一行，放不下时说明换行靠右) + 底部一行当前还剩 / 目标剩余 (/ 目标还差) */
.das-hero { background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 82%); border: 1px solid #DCFCE7; border-radius: 10px; padding: 5px 10px 4px; }
.das-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.das-kpi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.das-kpi + .das-kpi { padding-left: 8px; border-left: 1px solid #E5E7EB; }
.das-kpi-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 4px; min-width: 0; }
.das-kpi-label { font-size: 11px; line-height: 1.15; color: var(--text-sub); white-space: nowrap; }
.das-kpi small { font-size: 11px; line-height: 1.18; color: var(--text-sub); text-align: right; overflow-wrap: anywhere; }
.das-kpi b { font-size: 19px; line-height: 1.08; font-weight: 800; color: #16A34A; font-variant-numeric: tabular-nums; white-space: nowrap; }
.das-kpi-val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 3px; min-width: 0; } /* 分段：「工作日」+ 大字，周末小字另起一行 */
.das-kpi .das-kpi-tag, .das-kpi .das-kpi-more { text-align: left; font-variant-numeric: tabular-nums; }
.das-compound { display: flex; flex-direction: column; gap: 0; margin-top: 3px; padding-top: 3px; border-top: 1px dashed #DCFCE7; min-width: 0; text-align: left; } /* 复利的力量：今日还可花 KPI 底下 */
.das-compound-title { font-size: 11px; line-height: 1.15; font-weight: 600; color: #166534; white-space: nowrap; }
.das-compound-row { font-size: 11px; line-height: 1.25; color: var(--text-sub); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.das-compound-num { font-size: 12px; font-weight: 700; color: #15803D; white-space: nowrap; }
.das-compound-note { font-size: 11px; line-height: 1.2; color: #94A3B8; overflow-wrap: anywhere; }
.das-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 10px; margin-top: 3px; padding-top: 3px; border-top: 1px dashed #E5E7EB; }
.das-stats .das-item { align-items: baseline; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.das-stats .das-item b { font-size: 11.5px; font-weight: 700; margin-left: 2px; }

/* 分段按钮 (临时账单出法)：可点高度 ≥ 28px */
.das-bill-modes { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 1px; border-radius: 999px; background: #E5E7EB; }
.das-bill-modes button { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 8px; border: none; border-radius: 999px; background: transparent; font-family: inherit; font-size: 11.5px; line-height: 1.2; color: #475569; white-space: nowrap; cursor: pointer; }
.das-bill-modes button.active { background: #fff; color: #15803D; font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }

/* 今天超支：顶栏一句话 + 两张选择卡 (默认剩余出，每天一种出法管整笔超支) */
.das-over { display: flex; flex-direction: column; gap: 3px; background: #F8F9FA; border-radius: 10px; padding: 4px 8px; }
.das-over-head { font-size: 11.5px; font-weight: 700; line-height: 1.25; color: #DC2626; }

/* 选择卡 (超支卡与试算结果卡共用)：点表头或卡片空白处选中，选中的绿框浅绿底；卡里是对账表，两张卡上下排、各占满一行，三列放得下不折行 */
.das-choice-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.das-choice-card { display: flex; flex-direction: column; min-width: 0; padding: 2px 8px 3px; border-radius: 8px; border: 1px solid #CBD5E1; background: #FFFFFF; font-family: inherit; text-align: left; cursor: pointer; }
.das-choice-card.is-active { border-color: #16A34A; background: #F0FDF4; box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.22); }
.das-low-badge { font-size: 11px; font-weight: 700; color: #DC2626; white-space: nowrap; }

/* 对账表：「出法 | 每天 | 合计」固定列宽 (上下两张卡的列对齐)，数字右对齐、等宽数字；每天低于 ¥20 那格红，目标剩余蓝，额外多出绿 */
.das-ot-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; line-height: 1.3; color: #1E293B; font-variant-numeric: tabular-nums; }
.das-ot-c1 { width: 46%; }
.das-ot-c2 { width: 24%; }
.das-ot-c3 { width: 30%; }
.das-ot-table th, .das-ot-table td { padding: 1px 2px; vertical-align: baseline; }
.das-ot-table th { font-weight: 600; color: #64748B; text-align: right; white-space: nowrap; }
.das-ot-table th.das-ot-title { text-align: left; font-size: 11.5px; font-weight: 700; color: #334155; white-space: normal; }
.das-choice-card.is-active .das-ot-pick-name { color: #15803D; }
.das-ot-table tbody tr { border-top: 1px dashed #E2E8F0; }
.das-ot-label { text-align: left; font-weight: 500; color: #475569; overflow-wrap: anywhere; }
.das-ot-per, .das-ot-sub { text-align: right; font-weight: 600; white-space: nowrap; }
.das-ot-total-row td { border-top: 1px solid #CBD5E1; padding-top: 2px; font-weight: 700; color: #0F172A; }
.das-ot-total-val { text-align: right; white-space: nowrap; }
.das-ot-table .das-neg { color: #DC2626; }
.das-ot-table .das-good { color: #16A34A; }
.das-ot-table .das-tgt { color: #2563EB; }
/* 表头选择按钮「均摊出 ✓ 已选 / 剩余出 选这个」：看着是标题，键盘可聚焦；整张卡空白处也能点选 */
.das-ot-pick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1px 5px; padding: 0; border: none; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.das-ot-pill { padding: 0 6px; border-radius: 999px; background: #F1F5F9; border: 1px solid #CBD5E1; font-size: 11px; font-weight: 600; line-height: 1.2; color: #475569; white-space: nowrap; }
.das-ot-pill.is-on { background: #DCFCE7; border-color: #86EFAC; color: #15803D; }
/* 能点开明细的行：金额下面虚线下划线，点整行都行；展开的那行浅灰底 */
.das-ot-table tr.has-detail { cursor: pointer; }
.das-ot-table tr.is-open > td { background: #F1F5F9; }
.das-ot-amt { padding: 0; border: none; background: transparent; font: inherit; color: inherit; white-space: nowrap; cursor: pointer; text-decoration: underline dotted; text-decoration-color: #94A3B8; text-underline-offset: 2px; }
/* 明细框：名称 · 小字说明 · 金额三列，最后一行「= …」加粗带上线；整句说明占满一行 */
.das-ot-detail > td { padding: 0 0 3px; }
.das-ot-dbox { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: baseline; gap: 1px 6px; margin-top: 1px; padding: 3px 6px; border: 1px solid #E2E8F0; border-radius: 6px; background: #F8FAFC; font-size: 11px; line-height: 1.3; color: #475569; cursor: default; }
.das-ot-dl-label { white-space: nowrap; color: #334155; }
.das-ot-dl-label.is-text { grid-column: 1 / -1; white-space: normal; color: #64748B; }
.das-ot-dl-note { min-width: 0; color: #64748B; overflow-wrap: anywhere; }
.das-ot-dl-amt { text-align: right; font-weight: 600; color: #1E293B; white-space: nowrap; }
.das-ot-dl-label.is-sum, .das-ot-dl-label.is-sum ~ span { padding-top: 1px; border-top: 1px solid #CBD5E1; font-weight: 700; }

/* 本期设置：分组 (已调整标准 / 固定支出 / 临时账单)，组间细线；放不下时右侧金额 / 分段按钮整段换到下一行靠右；⚡ 说明在账单组下方只出现一次 */
.das-list { display: flex; flex-direction: column; background: #F8F9FA; border-radius: 10px; padding: 2px 8px; }
.das-group { padding: 2px 0; }
.das-group + .das-group { border-top: 1px solid #ECEDEF; }
.das-group > .das-item { flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1px 6px; line-height: 1.22; }
.das-item-key { flex-shrink: 0; font-weight: 600; color: #475569; white-space: nowrap; }
.das-group > .das-item > b { margin-left: auto; text-align: right; }
.das-group-bills { display: flex; flex-direction: column; gap: 2px; }
.das-bill { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 6px; padding: 1px 0; }
.das-bill-name { flex: 1 1 auto; font-weight: 600; color: var(--text-main); }
.das-bill > .das-bill-modes { margin-left: auto; }
.das-bill-notes { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; border-top: 1px dashed #E2E8F0; }
.das-bill-note { font-size: 11px; line-height: 1.3; color: #92400E; }

/* ⚠️ / 💡 提示 (常显)，与收进「计算明细」的算式 */
.das-calc { font-size: 11px; line-height: 1.35; color: var(--text-sub); }
.das-calc.das-warn { color: #B91C1C; background: #FEF2F2; border-left: 3px solid #DC2626; border-radius: 6px; padding: 4px 8px; }
.das-calc.das-note { color: #92400E; background: #FFFBEB; border-left: 3px solid #F59E0B; border-radius: 6px; padding: 4px 8px; }
/* 「📐 计算明细」可点高度 28px，上下用负外边距抵掉；position: relative 让它在命中测试里盖过展开后的第一行明细 */
.das-details > summary { position: relative; list-style: none; display: flex; align-items: center; gap: 4px; min-height: 28px; margin: -5px 0; padding: 0 2px; font-size: 11.5px; color: var(--text-sub); cursor: pointer; }
.das-details > summary::-webkit-details-marker { display: none; }
.das-details > summary::after { content: "展开 ▾"; margin-left: auto; font-size: 11px; }
.das-details[open] > summary::after { content: "收起 ▴"; }
.das-details > .das-calc { padding: 2px 2px 3px; }

/* 数字语义色：超支 / 负数 / 每天低于 ¥20 红色，真正可花/额外多出绿色，目标剩余蓝色，目标达不到 / 没有收入 / ¥0 用中性深色 */
.das-grid b.das-neg, .das-grid small.das-neg, .das-grid span.das-neg { color: #DC2626; }
.das-grid b.das-good, .das-grid span.das-good { color: #16A34A; }
.das-grid b.das-tgt, .das-grid span.das-tgt { color: #2563EB; }
.das-grid b.das-muted { color: var(--text-main); }

/* 约 320px 宽的手机：缩内边距与大字 (文字仍 ≥ 11px)，按钮仍 ≥ 28px 高 */
@media (max-width: 359px) {
  .das-grid { gap: 2.5px; }
  .das-hero { padding: 3px 6px 2px; }
  .das-kpis { gap: 6px; }
  .das-kpi + .das-kpi { padding-left: 6px; }
  .das-kpi b { font-size: 16px; line-height: 1.05; }
  .das-stats { gap: 1px 6px; margin-top: 2px; padding-top: 2px; }
  .das-stats .das-item, .das-stats .das-item b { font-size: 11px; }
  .das-over { padding: 2px 5px; gap: 2px; }
  .das-over-head, .das-ot-table th.das-ot-title { font-size: 11px; }
  .das-choice-card { padding: 2px 5px; }
  .das-ot-table th, .das-ot-table td { padding: 0.5px 1px; }
  .das-choice-cards { gap: 3px; }
  .das-bill-modes button { padding: 0 6px; font-size: 11px; }
  .das-list { padding: 1px 4px; }
  .das-group { padding: 1px 0; }
  .das-group > .das-item { gap: 1px 2px; font-size: 11px; }
}
.das-inst-stop { min-height: 28px; padding: 0 8px; border: 1px solid #FECDD3; border-radius: 9999px; background: #FFF1F2; color: #E11D48; font-size: 11px; font-weight: 700; cursor: pointer; } /* 分期「停止」 */