/* รายรับ-รายจ่าย — เขียนแบบ mobile-first กฎพื้นฐานคือหน้าจอมือถือ แล้วค่อยเพิ่มของสำหรับจอกว้างใน @media (min-width:...) */ :root{ --ground:#f4f7f6; --surface:#fff; --sunk:#eef3f1; --ink:#0f2420; --body:#314742; --muted:#5d7873; --faint:#8ea8a2; --line:#d7e3df; --line-soft:#e6eeeb; --accent:#0b6b53; --accent-strong:#085240; --accent-soft:#e0f0ea; --in:#1f7a4d; --in-soft:#e7f4ec; --out:#b03a2e; --out-soft:#fdf0ee; --brass:#9a6f2a; --topbar-h:3.5rem; color-scheme:light; } *{box-sizing:border-box} body{ margin:0;background:var(--ground);color:var(--body); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai","Sarabun",sans-serif; } a{color:var(--accent)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} /* ---------- แถบบน ---------- */ .topbar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10} .bar-in{max-width:64rem;margin:0 auto;display:flex;align-items:center;gap:.7rem;flex-wrap:nowrap; min-height:var(--topbar-h);padding:.45rem .9rem; /* เว้นขวาให้ปุ่มแฮมเบอร์เกอร์ที่ลอยทับอยู่ ชื่อแอปยาว ๆ จะได้ไม่มุดใต้ปุ่ม */ padding-right:3.4rem} .brand{font-weight:700;color:var(--ink);text-decoration:none;font-size:.98rem; flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav-top{display:none} .out{display:none} /* ---------- เมนูแฮมเบอร์เกอร์ ---------- ปุ่มและแผงอยู่ระดับ ไม่ซ้อนใน .topbar ที่ sticky เพราะ iOS Safari วางตำแหน่ง fixed/absolute ที่ซ้อนในตัว sticky ผิด แผงจะเพี้ยนตอนกางออกมา ทุกชิ้นเป็น fixed เทียบ viewport ตรง ๆ และ fixed ไม่ถูกนับใน scrollable overflow จึงไม่ไปยืดความสูงเอกสารจนหน้าเลื่อนลงไปเจอที่ว่าง */ .menu{display:flex;align-items:center;position:fixed;top:0;right:.55rem;z-index:20; height:calc(var(--topbar-h) + 1px)} .menu>summary{ display:flex;align-items:center;justify-content:center; width:2.75rem;height:2.75rem;border-radius:8px;color:var(--body);cursor:pointer; list-style:none;-webkit-tap-highlight-color:transparent} .menu>summary::-webkit-details-marker{display:none} .menu[open]>summary{background:var(--accent-soft);color:var(--accent)} .menu .ic{width:24px;height:24px} .menu .ic-close,.menu[open] .ic-burger{display:none} .menu[open] .ic-close{display:block} .menu-panel{ position:fixed;top:calc(var(--topbar-h) + 1px);left:0;right:0; background:var(--surface);border-bottom:1px solid var(--line); box-shadow:0 12px 24px rgba(15,36,32,.14); padding:.5rem .6rem calc(.6rem + env(safe-area-inset-bottom)); max-height:calc(100vh - var(--topbar-h) - 1px); max-height:calc(100dvh - var(--topbar-h) - 1px); overflow-y:auto;overscroll-behavior:contain; animation:sheet-in .16s ease-out} .menu-panel nav{display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem} .menu-panel a{display:flex;align-items:center;gap:.6rem;min-height:2.9rem; padding:.55rem .7rem;border-radius:8px;text-decoration:none;color:var(--body);font-size:.95rem} .menu-panel a.on{background:var(--accent-soft);color:var(--accent);font-weight:700} .menu-panel .ic{width:21px;height:21px;flex:0 0 auto;color:var(--faint)} .menu-panel a.on .ic{color:var(--accent);stroke-width:2} .menu-panel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menu-panel form{margin:.5rem .1rem 0;padding-top:.55rem;border-top:1px solid var(--line-soft)} .menu-panel button{width:100%;min-height:2.75rem;background:none;border:1px solid var(--line); border-radius:8px;padding:.6rem;font:inherit;font-size:.9rem;color:var(--body);cursor:pointer} /* ฉากหลังมืดเป็น ::after ของ summary จะได้กดตรงไหนก็ปิดเมนู โดยไม่ต้องใช้ JS */ .menu[open]>summary::after{content:"";position:fixed; inset:calc(var(--topbar-h) + 1px) 0 0 0;background:rgba(6,20,17,.45)} @keyframes sheet-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.menu-panel{animation:none}} /* ---------- โครงหน้า ---------- */ .page{max-width:64rem;margin:0 auto;padding:1.25rem .9rem 3rem} h1{font-size:1.35rem;color:var(--ink);margin:0 0 1rem} h2{font-size:1.02rem;color:var(--ink);margin:0 0 .5rem} .head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem} .head h1{margin:0} .muted{color:var(--muted)} .small{font-size:.87rem} .sub{color:var(--muted);margin:.2rem 0 1.25rem} .count{font-size:.9rem;color:var(--muted);font-weight:400} .card{background:var(--surface);border:1px solid var(--line);border-radius:10px; padding:1.1rem 1.15rem;margin-bottom:1rem} .card.narrow{max-width:24rem;margin:8vh auto 0} .card>h2:first-child{margin-top:0} /* ---------- ตัวเลขสรุป ---------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem;margin-bottom:1rem} .stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem} .stat b{display:block;font-size:1.5rem;color:var(--ink);line-height:1.25;font-variant-numeric:tabular-nums} .stat span{font-size:.82rem;color:var(--muted)} .stat b.in{color:var(--in)} .stat b.out{color:var(--out)} .stat b.neg{color:var(--out)} /* ---------- ฟอร์ม ---------- */ .stack{display:flex;flex-direction:column;gap:.15rem} .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:0 .9rem} .fld{display:block;margin-bottom:.9rem} .fld>span{display:block;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:.3rem} .fld>span i{color:var(--out);font-style:normal} .fld input,.fld select,.fld textarea{ width:100%;min-height:2.75rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px; background:var(--ground);font:inherit;font-size:1rem;color:var(--ink)} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);background:var(--surface)} .fld input.amount{font-size:1.35rem;text-align:right;font-variant-numeric:tabular-nums} .fld small{display:block;font-size:.78rem;color:var(--faint);margin-top:.25rem} .row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center} .err{color:var(--out);font-size:.9rem;margin:0 0 .8rem} /* ปุ่มเลือกประเภท รับ/จ่าย — ใหญ่พอให้กดด้วยนิ้วโป้งข้างเดียว */ .kindpick{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem} .kindpick label{display:flex;align-items:center;justify-content:center;min-height:3rem; border:1px solid var(--line);border-radius:8px;background:var(--surface); font-weight:700;color:var(--muted);cursor:pointer} .kindpick input{position:absolute;opacity:0;pointer-events:none} .kindpick input:checked+span{color:inherit} .kindpick label:has(input[value=income]:checked){background:var(--in-soft);border-color:var(--in);color:var(--in)} .kindpick label:has(input[value=expense]:checked){background:var(--out-soft);border-color:var(--out);color:var(--out)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem; min-height:2.75rem;padding:.5rem 1rem;border:1px solid var(--line);border-radius:8px; background:var(--surface);color:var(--body);font:inherit;font-size:.95rem;cursor:pointer;text-decoration:none} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700} .btn.danger{color:var(--out);border-color:#e8c4be} .btn.wide{width:100%} .btn.small{min-height:2.2rem;padding:.3rem .7rem;font-size:.87rem} /* ---------- ตาราง ---------- */ .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)} table{width:100%;border-collapse:collapse;font-size:.93rem} th,td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap} th{background:var(--sunk);color:var(--muted);font-size:.78rem;font-weight:700; text-transform:uppercase;letter-spacing:.04em} tbody tr:last-child td{border-bottom:none} td.n,th.n{text-align:right;font-variant-numeric:tabular-nums} td.wrap{white-space:normal;min-width:9rem} tfoot td{background:var(--sunk);font-weight:700;color:var(--ink);border-top:2px solid var(--line)} td.in{color:var(--in)} td.out{color:var(--out)} .pill{display:inline-block;padding:.1rem .5rem;border-radius:20px;font-size:.74rem;font-weight:700;white-space:nowrap} .pill.in{background:var(--in-soft);color:var(--in)} .pill.out{background:var(--out-soft);color:var(--out)} .pill.closed{background:var(--sunk);color:var(--muted)} .pill.warn{background:#fdf5e6;color:var(--brass)} .flash{padding:.7rem 1rem;border-radius:8px;margin:0 0 1rem;font-size:.93rem} .flash.ok{background:var(--in-soft);color:var(--in);border:1px solid #bfe0cd} .flash.bad{background:var(--out-soft);color:var(--out);border:1px solid #f2c9c2} .empty{padding:2.5rem 1rem;text-align:center;color:var(--muted);background:var(--surface); border:1px dashed var(--line);border-radius:10px;font-size:.93rem} .check{display:flex;align-items:center;gap:.5rem;font-size:.93rem;color:var(--ink);margin:.6rem 0} .check input{width:1.1rem;height:1.1rem} /* ---------- แถบเลือกช่วงเวลา ---------- */ .tabs{display:flex;gap:.35rem;margin-bottom:1rem;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none} .tabs::-webkit-scrollbar{display:none} .tabs a{flex:0 0 auto;padding:.45rem .8rem;border-radius:20px;text-decoration:none; background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:.9rem} .tabs a.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700} /* ---------- ตัวกรองที่พับเก็บได้ ---------- */ .filter{margin-bottom:1rem} .filter>summary{cursor:pointer;color:var(--accent);font-size:.92rem;padding:.4rem 0; list-style:none;-webkit-tap-highlight-color:transparent} .filter>summary::-webkit-details-marker{display:none} .filter>summary::before{content:"▸ "} .filter[open]>summary::before{content:"▾ "} .filter .card{margin-top:.5rem} /* ---------- แถวหมวดหมู่ ---------- */ .catrow{display:flex;align-items:center;gap:.5rem;padding:.35rem 0} .catrow input[type=color]{width:2.4rem;height:2.4rem;padding:2px;border:1px solid var(--line); border-radius:6px;background:var(--surface);flex:0 0 auto} .catrow input[type=text]{flex:1 1 auto;min-width:6rem;min-height:2.4rem;padding:.4rem .6rem; border:1px solid var(--line);border-radius:6px;background:var(--ground);font:inherit;color:var(--ink)} .catrow .used{font-size:.78rem;color:var(--faint);white-space:nowrap} .catrow-arch{margin:0 0 .7rem;padding-bottom:.7rem;border-bottom:1px solid var(--line-soft)} .catrow-arch:last-child{border-bottom:none;margin-bottom:0} /* ---------- กราฟ ---------- */ .chart-row{display:grid;gap:1rem} .chart-fig{display:flex;justify-content:center} .donut{width:min(15rem,70vw);height:auto} .donut-cap{font-size:13px;fill:var(--muted)} .donut-total{font-size:19px;font-weight:700;fill:var(--ink);font-variant-numeric:tabular-nums} .swatch{display:inline-block;width:.7rem;height:.7rem;border-radius:3px;margin-right:.45rem;vertical-align:0} /* กราฟแท่งกว้างคงที่ต่อช่วงเวลา จอแคบให้เลื่อนในกล่องตัวเอง ไม่ให้ทั้งหน้าเลื่อนตาม */ .chart-scroll{overflow-x:auto;margin-bottom:.5rem} .bars{height:11rem;min-width:100%} .bar-in{fill:var(--in)} .bar-out{fill:var(--out)} .bar-label{font-size:11px;fill:var(--muted)} .legend-bars{display:flex;gap:1.25rem;margin:.2rem 0 1rem;font-size:.82rem;color:var(--muted)} .legend-bars i{display:inline-block;width:1.1rem;height:5px;border-radius:20px;margin-right:.35rem;vertical-align:3px} .legend-bars i.in{background:var(--in)} .legend-bars i.out{background:var(--out)} /* ---------- จอกว้าง ---------- */ @media screen and (min-width:861px){ .bar-in{padding:.7rem 1.25rem;gap:1rem} .brand{flex:0 0 auto;max-width:14rem;font-size:1.02rem} .nav-top{display:flex;gap:.25rem;flex:1 1 auto;min-width:0;flex-wrap:nowrap} .nav-top a{padding:.35rem .62rem;border-radius:6px;text-decoration:none;color:var(--muted); font-size:.92rem;white-space:nowrap} .nav-top a:hover{background:var(--sunk);color:var(--ink)} .nav-top a.on{background:var(--accent-soft);color:var(--accent);font-weight:700} .out{display:flex;align-items:center;margin:0;flex:0 0 auto} .out button{background:none;border:1px solid var(--line);border-radius:6px;padding:.28rem .7rem; font:inherit;font-size:.85rem;color:var(--body);cursor:pointer;white-space:nowrap} .out button:hover{border-color:var(--accent);color:var(--accent)} .menu{display:none} .page{padding:1.75rem 1.25rem 4rem} h1{font-size:1.5rem} .card{padding:1.35rem 1.5rem} /* จอกว้างพอให้โดนัทกับตารางประกอบอยู่ข้างกัน */ .chart-row{grid-template-columns:auto 1fr;align-items:center;gap:1.5rem} } @media print{ .topbar,.menu,.head .btn,.btn,form{display:none!important} .page{padding:0} .card,.tablewrap{border:none} }