/* tuition.css — page-specific styles for tuition.html */

/* ── Header ──────────────────────────────────────── */
.tuition-header {
  background: var(--primary-deep);
  color: white;
  padding: 18px 20px 20px;
  border-radius: 0 0 24px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tuition-header .header-brand { min-width: 0; flex: 1; }
.tuition-header .logo { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -0.2px; }
.tuition-header .logo-sub { color: #fff; margin-left: 2px; }
/* UIV-11：画板 12.5 / 500 / #A9C4AC（= --on-dark-muted，页头其它浅字同一个）· 上距 2。原来靠 opacity .75 调淡 —— 换成显式色，不再叠透明度 */
.t-subtitle { font-size: 12.5px; font-weight: 500; color: var(--on-dark-muted); margin-top: 2px; }

/* ── Breadcrumb ──────────────────────────────────── */
.t-breadcrumb {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; opacity: 0.75; margin-bottom: 2px; line-height: 1.2;
}
.t-breadcrumb a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  /* UX-004 / UX-002：实测 13.2px —— 全页最小的一个，而它是这一页唯一的返回路径。
     撑开点击区，版面用负外边距收回。 */
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 6px; margin: -12px -6px;
}
.t-breadcrumb a:hover { text-decoration: underline; }
/* t-232 · BUG-047：原来 0.6 叠在整条 0.75 上，合成 0.45 → 压顶栏深绿 3.66。和两边链接字同一个分量（0.85 × 0.75），
   过线且不比链接更抢眼。它是装饰符号，读屏器不念（aria-hidden，在 tuition.html）。 */
.t-breadcrumb .t-crumb-sep { opacity: 0.85; }
.t-breadcrumb .t-crumb-current { color: #fff; opacity: 0.9; font-weight: 600; }

/* ── Role switch ─────────────────────────────────── */
/* ── Layout ──────────────────────────────────────── */
.content { padding: 16px 20px 96px; }
@supports (padding: env(safe-area-inset-left)) {
  .content {
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + env(safe-area-inset-right));
  }
}

/* ── Section titles ──────────────────────────────── */
.section-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-secondary);
  margin: 18px 0 10px;
}
.section-title:first-child { margin-top: 0; }
.section-title.primary { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: 0; text-transform: none; }
.section-title.secondary { color: var(--text-secondary); }

/* ── Card ────────────────────────────────────────── */
.card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 12px; }


/* ── Parent: my status card ──────────────────────── */
.my-status-card { border: 1.5px solid #EFD9BE; border-radius: 20px; padding: 22px 20px; }
.my-status-card.paid { border-color: #CFE2D2; }
.status-title { font-size: 12px; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.status-amount { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; line-height: 1.1; margin-bottom: 14px; }
.my-status-card.paid .status-amount { color: var(--text); }
.status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.status-meta-label { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.status-meta-val { font-size: 13px; font-weight: 700; color: var(--text); }
.pay-btn {
  display: block; width: 100%; margin-top: 14px; padding: 15px;
  /* T103 立的 --radius-btn：填色的主行动只有一种形状。
     /tuition 不在 T103 那 8 屏的枚举里，所以这两颗一直是第五、第六种。 */
  /* PD-0072 · S-019 §1 ⑤：照画板 --accent 底 + 白字（2.70，豁免表）—— 推翻 §12.1 的深橙底 */
  background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--radius-btn);
  font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
  box-shadow: var(--shadow-accent);
}
.pay-btn:active { opacity: 0.9; }
.paid-tag {
  display: inline-block; margin-top: 8px;
  background: #DCFCE7; color: #166534;
  font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}

/* ── Generic modal ───────────────────────────────── */
.t-modal { position: fixed; inset: 0; z-index: 200; }
.t-modal[hidden] { display: none; }
.t-modal-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.5);
}
.t-modal-sheet {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: var(--card);
  border-radius: 18px 18px 0 0;
  padding: 22px 20px 20px;
  max-height: 85dvh; overflow-y: auto;
  box-sizing: border-box;
  animation: t-modal-up 0.22s cubic-bezier(.2,.8,.2,1);
}
@media (min-width: 768px) {
  .t-modal-sheet {
    bottom: 50%; transform: translate(-50%, 50%);
    border-radius: 18px;
    max-width: 460px;
  }
}
@keyframes t-modal-up {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.t-modal-head h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.t-modal-subtitle { font-size: 13px; color: var(--text-secondary); margin: 0 0 14px; }
.t-modal-subtitle:empty { display: none; }
.t-modal-body { display: flex; flex-direction: column; gap: 14px; }
.t-modal-foot {
  display: flex; gap: 10px; margin-top: 18px;
}
.t-btn {
  flex: 1; padding: 12px; border-radius: 10px;
  border: none; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 700;
  min-height: 44px;
}
.t-btn-cancel { background: var(--border); color: var(--text); }
.t-btn-confirm { background: var(--primary); color: white; }
.t-btn:active { opacity: 0.85; }

/* Modal field components */
.tm-field-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 6px;
}
.tm-channel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.tm-channel-chip {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 10px 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--text); cursor: pointer; min-height: 44px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tm-channel-chip.active {
  background: var(--primary-light); border-color: var(--primary);
  color: var(--primary);
}
.tm-channel-chip:active { transform: translateY(1px); }
.tm-amount-input,
.tm-note-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 15px; font-family: inherit;
  background: var(--card); color: var(--text);
  outline: none;
}
.tm-amount-input:focus,
.tm-note-input:focus { border-color: var(--primary); }
.tm-note-input { min-height: 80px; resize: vertical; }
.tm-amount-row {
  display: flex; align-items: center; gap: 6px;
}
.tm-amount-prefix {
  font-size: 18px; font-weight: 700; color: var(--text-secondary);
}

/* Reminder panel inside modal */
.tm-reminder-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 180px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 6px;
}
.tm-reminder-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--bg); border-radius: 8px;
  font-size: 13px;
}
.tm-reminder-list li .rl-name { flex: 1; font-weight: 600; }
.tm-reminder-list li .rl-status { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.tm-reminder-list li.is-sending .rl-status { color: var(--accent); }
.tm-reminder-list li.is-ok .rl-status { color: var(--success); }
.tm-reminder-list li.is-fail .rl-status { color: var(--danger); }
.tm-preview-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}

/* ── Lang-specific tweaks ────────────────────────── */
/* zh: Chinese glyphs are visually denser at the same px size; add +1px on key text */
body.lang-zh .section-title.primary { font-size: 16px; }
body.lang-zh .pay-btn { font-size: 16px; }
body.lang-zh .status-amount { font-size: 29px; }

@media (max-width: 360px) {
  .tuition-header { flex-wrap: wrap; }
}

/* ── 账单列表 ────────────────────────────────────── */
.bill-list { list-style: none; margin: 0 0 12px; padding: 0; }
.bill-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 8px;
}
/* 已结清的往后退一步，但**不隐藏** —— 「我上个月交过了吗」是个真问题。
   BUG-050：原来整行 opacity .6，把四格字一起拖到 2.43–4.02。**退让用明确的颜色，不用 opacity**
   （design-spec §8；举报卡 S-018 §3.1 已经这么改过一次）：标题和金额退成次级字（压白 5.17），
   其余三格本来就是次级字、不动；「已完成」这件事由那颗状态徽章说。
   PD-0090 ①（t-264）：已付的行不再在这张列表里（付款历史接手），这里只剩减免 / 退款两种。 */
.bill-item.state-waived .bill-title, .bill-item.state-refunded .bill-title,
.bill-item.state-waived .bill-amount, .bill-item.state-refunded .bill-amount {
  color: var(--text-secondary);
}
.bill-item .bill-main { min-width: 0; flex: 1; }
.bill-item .bill-title { font-size: 14px; font-weight: 700; line-height: 1.35; }
.bill-item .bill-child {
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
}
.bill-item .bill-kind {
  display: inline-block; margin-left: 6px;
  font-size: 11px; font-weight: 700; color: var(--text-secondary);
  background: var(--bg); border-radius: 999px; padding: 2px 8px;
}
.bill-item .bill-meta { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
/* 驳回理由必须显眼：只看到「又变回欠费了」，家长会以为系统坏了 */
.bill-item .bill-reject {
  margin-top: 8px; padding: 8px 10px;
  background: #FEF2F2; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45; color: #991B1B;
}
.bill-item .bill-side { text-align: right; flex-shrink: 0; }
.bill-item .bill-amount {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;   /* UIV-11：画板历史行 15 / 700（原 17 / 800） */
}
.bill-badge {
  display: inline-block; margin-top: 5px;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px;
  background: var(--bg); color: var(--text-secondary);
}
/* UIV-11 §3①：状态徽章收进 --tag-* 家族（原来整套写死的琥珀 / 红 / 绿）。
   未付照画板那一对（暖橙字压 --tag-warning-bg，4.48 —— PD-0072 v2 ② 类，照稿、进闸 8 豁免表）；
   逾期画板没画，用 danger 那一对（比未付更该醒目，过线）；已付画板是个勾，文字徽章收进 success。 */
.bill-badge.overdue { background: var(--tag-danger-bg);  color: var(--tag-danger-fg); }
.bill-badge.due     { background: var(--tag-warning-bg); color: var(--accent-text); }
.bill-badge.paid    { background: var(--tag-success-bg); color: var(--tag-success-fg); }
.bill-badge.waived  { background: #E0E7FF; color: #3730A3; }
/* 「等老师确认」不是「已付款」—— 颜色上也不能像 */
.bill-badge.waiting { background: #E0F2FE; color: #075985; }
.bill-claim {
  display: block; margin-top: 8px; margin-left: auto;
  background: var(--card); color: var(--primary);
  border: 1.5px solid var(--primary); border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  /* T104 量到的：这一页此前没进过 T100 的 42 个状态，空态下它根本不出现。
     36 → 44：申报付款是这一屏上家长唯一的动作。 */
  padding: 7px 12px; min-height: 44px; cursor: pointer;
}
.bill-claim:active { opacity: 0.85; }
/* ── 申报线下付款 ────────────────────────────────── */
.claim-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.claim-method {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 11px 12px; font-size: 14px; font-weight: 600; cursor: pointer;
  min-height: 44px; box-sizing: border-box;
}
.claim-method:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.claim-note {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 15px; font-family: inherit; resize: vertical;
  background: var(--card); color: var(--text); outline: none;
}
.claim-note:focus { border-color: var(--primary); }
.claim-caveat {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
}

/* ── 筹款 ────────────────────────────────────────── */
.fundraiser-list { list-style: none; margin: 0; padding: 0; }
.fr-item { padding: 16px; }
.fr-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.fr-desc { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin-top: 4px; }
.fr-bar {
  height: 8px; border-radius: 999px; background: var(--bg);
  margin-top: 12px; overflow: hidden;
}
.fr-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.fr-meta {
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.fr-give {
  display: block; width: 100%; margin-top: 12px; padding: 12px;
  /* PD-0072 · S-019 §1 ⑤：照画板 --accent 底 + 白字（2.70，豁免表）—— 推翻 §12.1 的深橙底 */
  background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--radius-btn);
  font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  min-height: 44px;
}
.fr-give:active { opacity: 0.9; }
.give-row { display: flex; align-items: center; gap: 8px; }
.give-cur { font-size: 22px; font-weight: 800; color: var(--text-secondary); }
.give-amount {
  flex: 1; min-width: 0; padding: 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 20px; font-weight: 700; font-family: inherit;
  background: var(--card); color: var(--text); outline: none;
}
.give-amount:focus { border-color: var(--primary); }
.give-anon { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }

.t-signed-out { text-align: center; }
.t-signed-out p { margin: 0 0 14px; font-size: 15px; }
.t-signed-out .pay-btn { text-decoration: none; text-align: center; box-sizing: border-box; }

/* ── 在线付款 ─────────────────────────────────────── */
/* 「在线付」是实心的主动作，「我付过了」保持描边 —— 两个按钮并排时家长一眼
   能分出哪个是付钱、哪个是告诉老师 */
/* UIV-11 · S-019 v2.1 §1 ⑤：付钱这一颗照画板 CTuition 的橙「Pay now」—— --accent 底 · --on-accent 白字 · 橙光晕
   （白压 #DD8A3E 2.70，PD-0072 ① 类，照稿、进豁免表）；字 15（原 12.5）。和「I paid this」的描边一眼分开。 */
/* 两颗是两条路，不是一颗的两种皮肤：`.bill-pay` 指的就是卡那一颗（脚本 / 守卫都按它找主动作），
   银行那颗有自己的名字，只是共用这一身形状。排序改了之后（PD-0060），两者的 DOM 次序会变，
   而「.bill-pay = 卡」这句话不能跟着变。 */
.bill-pay, .bill-pay-ach {
  display: block; margin-top: 8px; margin-left: auto;
  border: 1.5px solid transparent; border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  /* BUG-049：命中区实测 36 < 44 —— 而这是她付钱的那一下。旁边「我付过了」那颗 T104 早就改到 44 了，
     这颗当时不在量程里（账号名下没有未付账单，按钮没出现）。画板那颗的内边距是 15，比 44 还高一档，
     所以做大是往画板走、不是离开它：内边距 11 / 18 + min-height 44。 */
  padding: 11px 18px; min-height: 44px; cursor: pointer;
}
/* 卡那一颗的颜色（UIV-11 · S-019 v2.1 §1 ⑤ 那身橙）只写在它自己名下 */
.bill-pay {
  background: var(--accent); color: var(--on-accent);
  border-color: var(--accent); box-shadow: var(--shadow-accent);
}
.bill-pay:active, .bill-pay-ach:active { opacity: 0.85; }
/* 全局 :focus-visible 的 box-shadow 会顶掉光晕 —— 两层一起写（同 .fab / 签字钮） */
.bill-pay:focus-visible { box-shadow: var(--focus-ring), var(--shadow-accent); }
/* 付完跳回来的那一下**不是**已付。这块说的是「我们在确认」，并且一直挂着，
   直到 webhook 把那一行改成已付 —— 免得她以为没成功又付一遍 */
.checkout-note {
  background: var(--accent-light); color: var(--accent-deep);   /* t-215 · D-006 §3 */
  font-size: 13.5px; font-weight: 600; line-height: 1.45;
}

/* 银行转账那一颗：白底绿字绿边、不带光晕（UIV-11 没涂它）；「还没启用」是一行说明 */
/* 银行转账那一颗表里没涂橙：照旧白底绿字绿边、不带光晕（.bill-pay 换橙之后要把边和光晕明着拿回来） */
.bill-pay-ach { background: var(--card); color: var(--primary); border-color: var(--primary); box-shadow: none; }
.bill-pay-ach:focus-visible { box-shadow: var(--focus-ring); }
.bill-ach-note { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
.bill-ach-note.is-off { color: var(--accent-deep); font-weight: 600; }

/* ── 付款历史（S-027 · t-264 · 照画板 CTuition）──
   小节标题 16/700/--text（与「What you owe」同一族）· 卡 --card / --radius-card / --shadow-md / 16 内边距 ·
   行 67 高三列：38 图标块（--radius-sm · --primary-light 底 · 17 ✓ --primary 笔）/ 名目 14/700 + 副行 12/400 --text-secondary / 金额 15/700 右对齐不换行。 */
#t-signed-in .t-history-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: 0; text-transform: none; margin-top: 18px; }
#t-signed-in .t-history { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 0 16px; }
#t-signed-in .th-row { display: flex; align-items: center; gap: 12px; height: 67px; box-sizing: border-box; border-bottom: 1px solid var(--hairline); }
#t-signed-in .th-row:last-child { border-bottom: none; }
#t-signed-in .th-row .th-ico { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
#t-signed-in .th-row .th-ico svg { width: 17px; height: 17px; }
#t-signed-in .th-row .th-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#t-signed-in .th-row .th-title { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#t-signed-in .th-row .th-sub { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
#t-signed-in .th-row .th-amt { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* 空历史：不渲染那张 ✓ 行的卡，只留一句（§2）—— 壳用全站那一个 .empty-state.is-compact（空态只有一种形状），字 13/400/--text-secondary 由它给 */
#t-signed-in .t-history-empty { font-size: 13px; font-weight: 400; }