/* หน้า "รายงาน" กำไร 7 ช่อง (แท็บ สรุป › รายงาน) — ยกจากเดโม ~/report-demo/web/report.css · ใช้ token สีของ demo.css */
.rd .red, .rd.red { color:var(--red) !important; } .rd .green { color:var(--green); }

/* ชั้น 1 */
.rd-range button { font-size:14px; padding-left:2px; padding-right:2px; }
.rd-custom { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.rd-date { flex:1; position:relative; overflow:hidden; justify-content:center; font-size:15px; padding:9px 6px; min-width:0; white-space:nowrap; }
.rd-date input[type=date] { position:absolute; inset:0; opacity:0; width:100%; height:100%; border:0; }
.rd-bar { display:flex; align-items:center; gap:10px; margin:2px 2px 10px; }
.rd-period { flex:1; font-size:15px; min-width:0; }
.rd-vs { font-size:12px; color:var(--muted); }
.rd-cmp { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); flex:none; cursor:pointer; }
.rd-cmp .sw { transform:scale(.8); transform-origin:right center; }
.rd-make { margin-bottom:var(--s3); }
.rd-top .circ-btn.on { background:var(--tint); color:#fff; }
.rd-cal.hidden, #mk-cal.hidden { display:none; }
#mk-cal { margin-top:8px; }

/* hero */
.rd-hero .rp-big.neg { color:var(--red); }
.rd-prev { font-size:13px; color:var(--muted); margin-left:8px; }
.rd-dl { display:inline-flex; align-items:center; gap:1px; font-size:12px; font-weight:700; padding:2px 7px; border-radius:99px; white-space:nowrap; }
.rd-dl.up { color:var(--green); background:color-mix(in srgb, var(--green) 15%, transparent); }
.rd-dl.down { color:var(--red); background:color-mix(in srgb, var(--red) 15%, transparent); }
.rd-dl.flat { color:var(--muted); background:var(--card-2); }
.rd-hlines > div { display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-top:1px solid var(--line); font-size:14px; }
.rd-hlines > div:first-child { border-top:0; }
.rd-hlines > div.tot { font-size:16px; } .rd-hlines > div.tot b { font-size:18px; }
.rd-hlines > div.red b { color:var(--red); }
.rd-hlines > div.small { font-size:12px; }
.rd-hlines span { min-width:0; } .rd-hlines b { white-space:nowrap; }

/* การ์ดช่อง */
.rd-ch { padding:12px 14px; cursor:pointer; margin-bottom:var(--s2); }
.rd-ch-top { display:flex; align-items:center; gap:10px; }
.rd-no { width:26px; height:26px; border-radius:50%; display:inline-grid; place-items:center; color:#fff; font-size:14px; font-weight:700; flex:none; }
.rd-no.big { width:30px; height:30px; font-size:16px; vertical-align:4px; }
.rd-ch-name { flex:1; min-width:0; font-weight:600; font-size:15px; line-height:1.3; }
.rd-ch-meta { font-size:12px; color:var(--muted); font-weight:400; margin-top:2px; }
.rd-ch-val { text-align:right; flex:none; }
.rd-ch-val > div { font-size:18px; font-weight:700; letter-spacing:-.3px; }
.rd-ch .go { color:var(--muted); font-size:14px; }
.rd-share { height:4px; border-radius:99px; background:var(--card-2); margin-top:9px; overflow:hidden; }
.rd-share i { display:block; height:100%; border-radius:99px; }
.rd-subs { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--muted); margin-top:7px; }
.rd-subs b { color:var(--ink-2); font-weight:600; }
.rd-note { font-size:12px; color:var(--muted); margin-top:6px; }
.rd-note.warn { color:var(--orange); }
.rd-tag { display:inline-block; font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:99px; background:rgba(142,142,147,.2); color:var(--muted); vertical-align:1px; white-space:nowrap; }
.rd-tag.warn { background:color-mix(in srgb, var(--orange) 18%, transparent); color:var(--orange); }
.rd-tag.blue { background:color-mix(in srgb, var(--tint) 18%, transparent); color:var(--tint); }
.rd-gross { display:flex; align-items:center; gap:10px; padding:12px 14px; margin-bottom:var(--s2); font-weight:600; }
.rd-gross span { flex:1; } .rd-gross b { font-size:18px; }
.rd-gross.net b { font-size:22px; }
.rd-ch.exp .rd-ch-val > div { color:var(--red); }
.rd-hidden-note { font-size:13px; color:var(--tint); text-align:center; margin:4px 0 0; cursor:pointer; }

/* กราฟ */
.rd-chartcard { padding:10px 6px 10px; }
.rd-chart { display:flex; align-items:flex-start; gap:8px; overflow-x:auto; padding:4px 8px 2px; scrollbar-width:none; }
.rd-chart.daily { gap:3px; }
.rd-col { flex:1 0 46px; display:flex; flex-direction:column; align-items:center; background:none; border:0; color:inherit; font:inherit; padding:0; cursor:pointer; border-radius:8px; }
.rd-chart.daily .rd-col { flex:1 0 16px; }
.rd-up { display:flex; flex-direction:column; justify-content:flex-end; width:70%; max-width:34px; border-bottom:1px solid var(--muted); }
.rd-dn { display:flex; flex-direction:column; justify-content:flex-start; width:70%; max-width:34px; }
.rd-up i, .rd-dn i { display:block; width:100%; flex:none; }
.rd-up i:first-child { border-radius:4px 4px 0 0; } .rd-dn i:last-child { border-radius:0 0 4px 4px; }
.rd-mv { font-size:11px; height:16px; white-space:nowrap; } .rd-mv.neg { color:var(--red); }
.rd-ml { font-size:11px; color:var(--muted); margin-top:3px; white-space:nowrap; }
.rd-col:active { background:var(--card-2); }
.rd-legend { display:flex; flex-wrap:wrap; gap:4px 10px; font-size:11px; color:var(--muted); padding:8px 8px 0; }
.rd-legend b { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }

/* ชั้น 3 เจาะลึก */
.rd-dsum { background:var(--card); border-radius:var(--r-card); padding:12px 14px; margin-bottom:var(--s3); }
.rd-dper { font-size:13px; color:var(--muted); margin-bottom:6px; }
.rd-dgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.rd-dgrid .l { font-size:12px; color:var(--muted); } .rd-dgrid .v { font-size:17px; font-weight:700; }
.rd-chips { margin-bottom:var(--s2); }
.rd-chips .c { font-size:13px; padding:6px 12px; border:0; font-family:inherit; }
.rd-tw { overflow-x:auto; background:var(--card); border-radius:var(--r-inner); margin-bottom:var(--s2); }
.rd-t { width:100%; border-collapse:collapse; font-size:12.5px; }
.rd-t th, .rd-t td { padding:7px 5px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.rd-t th { background:var(--card-2); font-weight:600; font-size:12px; color:var(--ink-2); white-space:nowrap; cursor:pointer; user-select:none; }
.rd-t th i { font-size:11px; margin-left:2px; color:var(--tint); }
.rd-t .n { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rd-t tbody tr { cursor:pointer; }
.rd-t tbody tr:active { background:var(--card-2); }
.rd-t tfoot td { font-weight:700; border-bottom:0; border-top:2px solid var(--line); }
.rd-t td:nth-child(2):not(.n) { min-width:96px; }
.rd-t td:first-child { white-space:nowrap; }
.rd-t th:first-child, .rd-t td:first-child { padding-left:10px; } .rd-t th:last-child, .rd-t td:last-child { padding-right:10px; }
.rd-cs { font-size:11px; color:var(--muted); margin-top:1px; }
.rd-empty { text-align:center; color:var(--muted); padding:20px !important; }
.rd-hint { font-size:12px; color:var(--muted); margin:6px 4px 10px; }
.rd-paybar .btn, .rd-paybar3 .btn { flex:1; }
.rd-paybar3 { gap:6px; } .rd-paybar3 .btn { padding-left:6px; padding-right:6px; font-size:15px; }
.rd-paybar3 + .field { margin-top:28px; } /* แยกกลุ่ม "บันทึกเป็นรายงานประจำ" ออกจากปุ่มดู/พิมพ์/CSV */
.rd-lbl { font-size:13px; color:var(--muted); margin:14px 4px 6px; font-weight:600; }
.rd-rc { font-size:14px; }
.rd-rc hr { border:0; border-top:1px solid var(--line); margin:8px 0; }
.rd-rc .rl.hot span:first-child { font-weight:700; }
.rd-rc .rl.small { font-size:12px; }
.rd-mv-box { margin-top:8px; }
.rd-x { width:32px; height:32px; border-radius:50%; border:0; background:color-mix(in srgb, var(--red) 15%, transparent); color:var(--red); display:grid; place-items:center; font-size:15px; flex:none; }
.rd-names .field:last-child { margin-bottom:0; }

/* ตัวอย่าง A4 ย่อ */
.rd-a4wrap { width:100%; overflow:hidden; border-radius:8px; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.25); margin-bottom:var(--s3); position:relative; height:500px; }
.rd-a4 { width:794px; height:1123px; border:0; transform-origin:0 0; display:block; background:#fff; position:absolute; left:0; top:0; }

@media (min-width:700px) {
  .rd-cards-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
}

/* ตารางเจาะลึกพอดีจอ iPhone: คอลัมน์ตัวเลขกว้างคงที่ ชื่อตัดบรรทัดได้ */
.rd-t { table-layout:fixed; }
.rd-t th.n { width:74px; } .rd-t th.k-q { width:46px; } .rd-t th.k-s { width:64px; }
.rd-t th:first-child { width:auto; }
.rd-t.rd-items th:first-child { width:46px; }
.rd-t td { overflow-wrap:anywhere; }

/* แถวบนของ pane: ชื่อร้าน + เฟือง */
.rd-top { display:flex; align-items:center; gap:8px; margin:2px 2px 10px; }
.rd-shop { flex:1; min-width:0; color:var(--muted); font-size:14px; }
#r-rep7.pv-wait #rd-hero, #r-rep7.pv-wait #rd-cards { opacity:.55; transition:opacity .2s; }
.rd-kbtn { margin-left:4px; border:0; border-radius:8px; padding:1px 7px; font:inherit; font-size:11px; font-weight:600; background:var(--card-2); color:var(--tint); vertical-align:1px; }