/* ===== ระบบข้อมูลงบประมาณโครงการ/กิจกรรม — โรงเรียนลาดยาววิทยาคม ===== */

:root{
  --blue:#13385f; --blue-2:#1b4f82; --blue2:#2563eb; --blue-soft:#eff6ff;
  --bg:#eef2f7; --card:#ffffff; --line:#e4e9f0; --line-2:#cbd5e1;
  --txt:#16233a; --txt-2:#475569; --txt-3:#7a8699;
  --ok:#15803d; --okbg:#dcfce7; --no:#b91c1c; --nobg:#fee2e2;
  --mid:#1d4ed8; --midbg:#dbeafe; --wait:#92400e; --waitbg:#fef3c7;
  --sh-1:0 1px 2px rgba(16,30,54,.06), 0 1px 3px rgba(16,30,54,.05);
  --sh-2:0 4px 12px rgba(16,30,54,.07), 0 1px 3px rgba(16,30,54,.05);
  --sh-3:0 14px 34px rgba(15,23,42,.18);
  --r:14px; --r-sm:9px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);
     font-family:"Sarabun","TH Sarabun New",system-ui,-apple-system,sans-serif;
     font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1320px;margin:0 auto;padding:0 18px}
a{color:var(--mid)}

/* ---------- แถบหัวเว็บ ---------- */
.topbar{background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;
        padding:11px 0;position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(13,42,74,.25)}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.brand{color:#fff;text-decoration:none;display:flex;align-items:center;gap:11px;line-height:1.15}
.brand .logo{height:44px;width:44px;object-fit:contain;background:#fff;border-radius:50%;padding:3px;
             flex:0 0 auto;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.brand .logo.ph{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);font-size:1.3rem}
.brand .btxt{display:flex;flex-direction:column}
.brand .btxt b{font-weight:700;font-size:1.14rem;letter-spacing:-.01em}
.brand .btxt small{font-size:.84rem;opacity:.82;font-weight:400}
.me{display:flex;gap:8px;align-items:center;font-size:.88rem;color:#cfe0f5;flex-wrap:wrap}
main.wrap{padding-top:20px;padding-bottom:48px}
.foot{text-align:center;color:var(--txt-3);font-size:.84rem;padding:20px}

/* ---------- เมนู ---------- */
.nav{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-inline-start:auto}
.nav a{color:#d9e6f7;text-decoration:none;padding:7px 13px;border-radius:999px;transition:background .15s}
.nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.nav a.on{background:#fff;color:var(--blue);font-weight:600}
.navgroup{position:relative}
.navgroup>.navbtn{font:inherit;color:#d9e6f7;background:transparent;border:0;cursor:pointer;
                  padding:7px 13px;border-radius:999px;white-space:nowrap;transition:background .15s}
.navgroup>.navbtn::after{content:' ▾';opacity:.7;font-size:.85em}
.navgroup>.navbtn:hover{background:rgba(255,255,255,.16);color:#fff}
.navgroup>.navbtn.on{background:#fff;color:var(--blue);font-weight:600}
.navgroup::after{content:'';position:absolute;left:0;right:0;top:100%;height:9px}
.navmenu{display:none;position:absolute;top:calc(100% + 7px);left:0;z-index:30;min-width:220px;
         background:#fff;border-radius:12px;padding:7px;box-shadow:var(--sh-3);animation:navdrop .13s ease-out}
.navgroup:hover>.navmenu,.navgroup:focus-within>.navmenu,.navgroup.open>.navmenu{display:block}
@keyframes navdrop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.navmenu a{display:block;padding:9px 13px;border-radius:8px;color:#16233a;white-space:nowrap;text-decoration:none}
.navmenu a:hover{background:var(--blue-soft);color:var(--mid)}
.navmenu a.on{background:var(--blue);color:#fff}

/* ---------- หัวข้อ ---------- */
h1{font-size:1.5rem;margin:6px 0 16px;letter-spacing:-.015em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
h2{font-size:1.1rem;margin:20px 0 10px;letter-spacing:-.01em;color:#1e293b}
.card>h2:first-child{margin-top:0}

/* ---------- การ์ด ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
      padding:18px;margin-bottom:16px;box-shadow:var(--sh-1)}
.card.sub{background:#f8fafc;border:1px solid var(--line);box-shadow:none}
details.card>summary{cursor:pointer;font-size:1rem;padding:2px 0;font-weight:600;color:#1e293b}
details.card[open]>summary{margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:10px}

/* ---------- ฟอร์ม ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
input,select,textarea{font-family:inherit;font-size:1rem;padding:9px 11px;border:1px solid var(--line-2);
                      border-radius:var(--r-sm);background:#fff;color:inherit;transition:border-color .15s,box-shadow .15s}
input[type=text],input[type=search],textarea,select{width:100%}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue2);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
input:disabled,select:disabled,textarea:disabled{background:#f3f6fa;color:#8595a9;cursor:not-allowed}
input::placeholder,textarea::placeholder{color:#a3aec0}
textarea{min-height:84px;resize:vertical;line-height:1.5}
label{display:block;font-size:.88rem;color:var(--txt-2);margin:12px 0 5px;font-weight:600}
label.inline{display:inline-flex;align-items:center;gap:8px;font-weight:600}
label.inline input{width:auto;margin:0}
input[type=checkbox],input[type=radio]{width:17px;height:17px;accent-color:var(--blue2);cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px}
.grid3 .span2{grid-column:span 2}.grid3 .span3{grid-column:1/-1}
@media(max-width:720px){.grid2{grid-template-columns:1fr}}
@media(max-width:760px){.grid3{grid-template-columns:1fr}.grid3 .span2,.grid3 .span3{grid-column:auto}}
.row-end{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
select.locked{background:#f1f5f9;color:#334155;pointer-events:none;border-style:dashed}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:var(--r-sm);padding:9px 17px;
     font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;background:var(--blue2);color:#fff;
     text-decoration:none;box-shadow:var(--sh-1);transition:transform .08s,filter .15s,box-shadow .15s}
.btn:hover{filter:brightness(1.07);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;filter:none}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;padding:6px 12px;
           font-size:.85rem;box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.16)}
.btn.sm{padding:5px 12px;font-size:.88rem}
.btn.gray{background:#e8edf4;color:#33415a}
.btn.green{background:#16a34a}.btn.red{background:#dc2626}.btn.amber{background:#d97706}

/* ---------- ตาราง ---------- */
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh-1)}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--blue);color:#fff;font-weight:600;position:sticky;top:0;font-size:.92rem;
   letter-spacing:.01em;white-space:nowrap}
tbody tr:nth-child(even) td{background:#fafbfd}
tbody tr:hover td{background:var(--blue-soft)}
tbody tr:last-child td{border-bottom:0}
tfoot th{background:#eef2f7;color:#16233a;position:static;border-top:2px solid var(--line-2)}
tr.project td{background:#e8eeff!important;font-weight:700}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td a:not(.btn){color:var(--mid);text-decoration:none;border-bottom:1px dotted rgba(29,78,216,.45)}
td a:not(.btn):hover{border-bottom-style:solid;background:var(--blue-soft)}
/* ตารางไม่ถูกบีบจนอ่านไม่ออกบนจอแคบ — เลื่อนแนวนอนแทน */
.tablewrap table{min-width:700px}
table.mini{font-size:.92rem;min-width:620px}
table.mini th,table.mini td{padding:5px 9px}
table.mini tfoot th{background:#f1f5f9}

/* ---------- ข้อความประกอบ / ป้าย ---------- */
.meta{display:block;font-size:.82rem;color:var(--txt-3);font-weight:400}
.badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:.82rem;
       background:#eaeff6;color:#33415a;font-weight:600;white-space:nowrap}
.st{display:inline-block;padding:3px 11px;border-radius:999px;font-size:.84rem;font-weight:700;white-space:nowrap}
.st.ok{background:var(--okbg);color:var(--ok)}.st.no{background:var(--nobg);color:var(--no)}
.st.mid{background:var(--midbg);color:var(--mid)}.st.wait{background:var(--waitbg);color:var(--wait)}
.pill{display:inline-block;padding:2px 11px;border-radius:999px;font-size:.82rem;font-weight:600;
      background:#eef2f7;color:#33415a;margin-left:6px;white-space:nowrap}
.pill.ok{background:#dcfce7;color:#14532d}.pill.no{background:#fee2e2;color:#7f1d1d}
.pill.mid{background:#dbeafe;color:#1e3a8a}

/* ---------- แจ้งเตือน ---------- */
.flash{padding:12px 16px;border-radius:12px;margin-bottom:14px;border:1px solid;border-left-width:5px;
       box-shadow:var(--sh-1);font-size:.96rem}
.flash.ok{background:var(--okbg);border-color:#86efac;border-left-color:#16a34a;color:var(--ok)}
.flash.err{background:var(--nobg);border-color:#fca5a5;border-left-color:#dc2626;color:var(--no)}
.flash.info{background:var(--midbg);border-color:#93c5fd;border-left-color:var(--blue2);color:var(--mid)}
.flash.warn{background:var(--waitbg);border-color:#fcd34d;border-left-color:#d97706;color:var(--wait)}
.maintbar{background:linear-gradient(90deg,#b91c1c,#dc2626);color:#fff;padding:9px 14px;text-align:center;
          font-size:.95rem;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.maintbar .btn{padding:3px 12px}

/* ---------- การ์ดสรุปตัวเลข ---------- */
.sumcards{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.sumcard{flex:1 1 205px;background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue2);
         border-radius:12px;padding:12px 16px;box-shadow:var(--sh-1);transition:transform .12s,box-shadow .12s}
.sumcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.sumcard b{display:block;font-size:.86rem;color:var(--txt-2);font-weight:600}
.sumcard .v{font-size:1.45rem;font-weight:700;line-height:1.3;letter-spacing:-.02em;
            font-variant-numeric:tabular-nums}
.cards{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}
.card.stat{flex:1 1 180px;min-width:170px;padding:13px 16px}
.card.stat .big{font-size:1.6rem;font-weight:700;line-height:1.25;color:#14532d}

/* ---------- แถบสัดส่วน ---------- */
.bar{height:7px;background:#e4e9f0;border-radius:999px;overflow:hidden;margin-top:5px}
.bar span{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#2563eb);border-radius:999px}
.bar.warn span{background:linear-gradient(90deg,#f59e0b,#d97706)}
.bar.over span{background:linear-gradient(90deg,#ef4444,#dc2626)}

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.loginbox{max-width:430px;margin:9vh auto;background:#fff;border:1px solid var(--line);
          border-radius:18px;padding:30px;box-shadow:var(--sh-3)}

/* ---------- ตัวช่วยจัดวาง ---------- */
.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}

/* ---------- แผงรายละเอียดกิจกรรมในหน้าขอใช้งบ ---------- */
.apgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px 18px}
.apgrid>div{font-size:.92rem;color:#0f172a}
.apgrid span{display:block;font-size:.78rem;color:var(--txt-3)}
.apsec{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.aplist{margin:8px 0 0;padding-left:20px}
.aplist li{margin:4px 0;font-size:.92rem}
.aplist .meta{display:inline;margin-left:6px}
.aplist form{margin-left:6px}
.card.sub details summary{cursor:pointer;color:var(--mid);font-weight:600}

/* ---------- รายละเอียดการใช้งบแต่ละครั้ง ---------- */
tr.detailrow>td{background:#f8fafc}
.usedetail{padding:12px 4px}
.usedetail .apsec{margin-top:12px}
.usedetail table{background:#fff}

/* ---------- แบบฟอร์มเสนอ/สรุปกิจกรรม ---------- */
label.inline.chkline{display:flex;align-items:flex-start;gap:8px;font-weight:400;margin:4px 0}
label.inline.chkline input{margin-top:4px}
label.inline.chkline span{font-size:.93rem;line-height:1.4}
.stdrow{margin:7px 0;padding:8px 12px;background:#f8fafc;border:1px solid var(--line);border-radius:10px}
.stdrow label.inline{margin-left:14px;font-weight:400}
.stepbox{margin:12px 0;padding:12px 14px;background:#f8fafc;border:1px solid var(--line);
         border-left:4px solid var(--blue2);border-radius:10px}
.stepbox textarea{margin-top:5px}
.satis th,.satis td{text-align:center}
.satis td:first-child,.satis th:first-child{text-align:left}
.satis .grp td{background:#eef2f7!important;font-weight:600;text-align:left}
.card.qa{padding:15px 17px}
.card.qa .qa-head{font-size:1.02rem;margin-bottom:2px}
.card.qa .meta{margin-bottom:8px}
.card.qa input:disabled,.card.qa textarea:disabled{background:#f1f5f9;color:#475569}

/* ---------- ตารางเลือกเบิกจากประมาณการ ---------- */
/* ตารางคอลัมน์เยอะ: บนจอแคบให้เลื่อนแนวนอนแทนการบีบช่องจนอ่านไม่ออก */
#itemTable{min-width:1060px}
#planTbl{min-width:980px}
.satis{min-width:640px}
#itemTable input[type=checkbox].pick,#itemTable #pickAll{width:19px;height:19px}
#itemTable td{vertical-align:middle}
#itemTable tbody tr{transition:background .12s}
#itemTable tr.off td{background:#fafbfd}
#itemTable tr.off input:not(.pick),#itemTable tr.off select{opacity:.45}
#itemTable tr.done td{background:#f1f5f9}
#itemTable tr.done .iname{color:var(--txt-3)}
#itemTable tr.done .planhint{color:#b45309}
#itemTable tr.over td{background:#fef2f2}
#itemTable tr.over .num.amt{color:#b91c1c;font-weight:700}
#itemTable tr.extra .iname{background:#fffbeb}
#itemTable .planhint{display:block;font-size:.82rem;margin-top:3px}
#itemTable .overwarn{display:block;color:#b91c1c;font-weight:700}

/* ---------- จอเล็ก ---------- */
@media(max-width:820px){
  .wrap{padding:0 12px}
  h1{font-size:1.28rem}
  .card{padding:14px;border-radius:12px}
  th,td{padding:8px 9px;font-size:.94rem}
  .sumcard .v{font-size:1.25rem}
  .nav{width:100%;margin-inline-start:0}
  .navgroup{position:static}
  .navgroup::after{display:none}
  .navgroup:hover>.navmenu{display:none}
  .navgroup.open>.navmenu{display:block;position:static;box-shadow:none;
                          background:rgba(255,255,255,.12);padding:5px;margin:5px 0}
  .navgroup.open>.navmenu a{color:#fff}
  .navgroup.open>.navmenu a:hover{background:rgba(255,255,255,.2)}
}
@media(max-width:600px){
  .brand .logo{height:36px;width:36px}
  .brand .btxt b{font-size:1rem}
  .brand .btxt small{font-size:.76rem}
}

/* ---------- พิมพ์ ---------- */
@media print{
  .topbar,.foot,.toolbar,.noprint,.maintbar{display:none}
  body{background:#fff}
  .card,.tablewrap{box-shadow:none;border-color:#999}
  tbody tr:hover td{background:transparent}
}

/* ---------- แถบติดตามขั้นตอนของคำขอ ---------- */
.wfbar{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.wfstep{flex:1 1 150px;min-width:140px;background:#f6f8fb;border:1px solid var(--line);border-left:4px solid #cbd5e1;
        border-radius:10px;padding:8px 11px;font-size:.9rem;position:relative}
.wfstep i{font-style:normal;font-weight:700;margin-inline-end:5px;color:#94a3b8}
.wfstep b{font-weight:600;color:#33415a}
.wfstep span{display:block;font-size:.82rem;color:var(--txt-3);margin-top:2px}
.wfstep span.nt{color:#b45309;font-weight:600}
.wfstep.done{background:#f0fdf4;border-left-color:var(--ok)}
.wfstep.done i{color:var(--ok)}
.wfstep.now{background:#fffbeb;border-left-color:#d97706;box-shadow:0 2px 10px rgba(217,119,6,.14)}
.wfstep.now i{color:#d97706}
.wfstep.now b{color:#92400e}
.wfstep.bad{background:var(--nobg);border-left-color:var(--no)}
.wfstep.bad i,.wfstep.bad b{color:var(--no)}
.wfstep.wait{opacity:.72}
.wfq td.cmp{white-space:nowrap}
.cmp .up{color:var(--no);font-weight:700}
.cmp .dn{color:var(--ok);font-weight:700}

/* ---------- แถบโหมดสาธิต ---------- */
.demobar{background:linear-gradient(90deg,#b45309,#d97706);color:#fff;padding:8px 18px;font-size:.92rem;text-align:center}
.demobar b{background:rgba(255,255,255,.22);border-radius:999px;padding:2px 11px;margin-inline-end:7px}
.demobar a{color:#fff;text-decoration:underline;white-space:nowrap}

/* ===================================================================
   รองรับมือถือ — เพิ่ม 28 ต.ค. 2569
   =================================================================== */

/* ---------- ปุ่มเมนู (แสดงเฉพาะจอแคบ) ---------- */
.navtoggle{display:none;font:inherit;font-size:1.35rem;line-height:1;background:rgba(255,255,255,.14);
           color:#fff;border:0;border-radius:10px;padding:7px 13px;cursor:pointer}
.navtoggle:active{background:rgba(255,255,255,.3)}

@media(max-width:820px){
  .topbar .wrap{gap:8px}
  .navtoggle{display:inline-flex;align-items:center;margin-inline-start:auto;flex:0 0 auto}
  .nav,.me{display:none}
  body.navopen .nav{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:2px;
                    border-top:1px solid rgba(255,255,255,.2);padding-top:8px;margin-top:4px}
  body.navopen .nav a,body.navopen .navgroup>.navbtn{text-align:left;border-radius:9px;padding:11px 14px;
                    font-size:1rem;width:100%}
  body.navopen .navgroup{width:100%}
  body.navopen .me{display:flex;width:100%;gap:8px;padding-top:8px;
                   border-top:1px solid rgba(255,255,255,.2);margin-top:4px}
  body.navopen .me>span{width:100%}
  body.navopen .me .btn.ghost{flex:1 1 auto;justify-content:center;padding:9px 12px;font-size:.95rem}
}

/* ---------- จอแคบ: ตารางแปลงเป็นการ์ด ---------- */
@media(max-width:760px){
  /* เอากรอบ/การเลื่อนแนวนอนออกเฉพาะตารางที่แปลงเป็นการ์ดแล้ว
     ตารางที่แปลงไม่ได้ ยังเลื่อนซ้าย-ขวาได้เหมือนเดิม */
  .tablewrap.flat{overflow:visible;border:0;background:transparent;box-shadow:none;border-radius:0}
  table.cardify{display:block;width:100%;min-width:0!important;border-collapse:separate}
  table.cardify colgroup{display:none}
  table.cardify thead{display:none}
  table.cardify.hasthead thead{display:block;margin-bottom:9px}
  table.cardify.hasthead thead tr{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
        background:var(--blue);border-radius:11px;padding:8px 13px}
  table.cardify.hasthead thead th{display:none}
  table.cardify.hasthead thead th.hasctl{display:inline-flex;align-items:center;gap:9px;
        background:transparent;color:#fff;border:0;padding:0;width:auto!important;white-space:normal}
  table.cardify.hasthead thead th.hasctl::after{content:attr(data-l);font-size:.92rem;font-weight:600;order:2}
  table.cardify.hasthead thead th.hasctl>*{order:1}

  table.cardify tbody,table.cardify tfoot{display:block}
  table.cardify tr{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
        box-shadow:var(--sh-1);margin-bottom:10px;padding:5px 0}
  table.cardify td,table.cardify tfoot th{display:block;width:auto!important;border:0;
        padding:6px 13px;text-align:left!important;white-space:normal!important;vertical-align:top}
  table.cardify tbody tr:nth-child(even) td,table.cardify tbody tr:hover td{background:transparent}
  table.cardify tfoot tr{background:#eef2f7}
  table.cardify tfoot th{background:transparent;color:var(--txt);position:static;font-size:.95rem}
  table.cardify tr.project td{background:transparent!important}
  table.cardify tr.project{border-left:5px solid var(--blue2);background:#f4f7ff}
  table.cardify tr.detailrow>td{background:transparent}

  /* บรรทัดที่มีป้ายชื่อคอลัมน์ */
  table.cardify td[data-l]{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
  table.cardify td[data-l]::before{content:attr(data-l);flex:0 0 38%;max-width:38%;
        color:var(--txt-3);font-size:.8rem;font-weight:600;line-height:1.5;padding-top:1px}
  table.cardify td[data-l]>*{min-width:0}
  table.cardify td[data-l=""]{display:block}
  table.cardify td[data-l=""]::before{display:none}
  table.cardify td[colspan]{font-weight:600}
  table.cardify td.lead1{font-weight:700;font-size:1.02rem;background:var(--blue-soft)!important;
        border-bottom:1px solid var(--line);margin:-5px 0 5px;padding:9px 13px}
  table.cardify td.lead1::before{display:none}

  /* ตารางซ้อนในการ์ด ไม่ต้องแปลง */
  table.cardify td table{display:table;min-width:0;width:100%}
  table.cardify td table tr{display:table-row;border:0;box-shadow:none;margin:0;background:transparent}
  table.cardify td table td,table.cardify td table th{display:table-cell;padding:5px 7px}
  table.cardify td table td::before{display:none}

  /* ปุ่มในการ์ด แตะง่าย */
  table.cardify td .btn{margin:3px 4px 3px 0}
  table.cardify td .btn.sm{padding:8px 14px;font-size:.95rem}
  table.cardify td form{display:inline-block}
}

/* ---------- จอแคบ: ฟอร์มและองค์ประกอบอื่น ---------- */
@media(max-width:760px){
  body{font-size:16.5px}
  .wrap{padding:0 11px}
  main.wrap{padding-top:14px;padding-bottom:34px}
  h1{font-size:1.22rem;margin-bottom:12px}
  h2{font-size:1.04rem}
  .card{padding:13px 12px}
  .btn{padding:11px 16px;min-height:44px}
  .btn.sm{padding:8px 13px;min-height:38px;font-size:.92rem}
  .btn.ghost{min-height:0;padding:7px 12px}
  .toolbar{gap:8px}
  .toolbar>*{flex:1 1 100%}
  .toolbar .btn{flex:1 1 auto}
  input,select,textarea{font-size:16px;padding:11px 12px}   /* 16px กัน iOS ซูมเองเวลาแตะช่องกรอก */
  input[type=date],input[type=number]{width:100%}
  label{font-size:.9rem;margin-top:14px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  .row-end{justify-content:stretch}
  .row-end .btn{flex:1 1 auto;justify-content:center}
  .sumcards{gap:9px}
  .sumcard{flex:1 1 calc(50% - 5px);padding:10px 12px;border-left-width:4px}
  .sumcard b{font-size:.8rem}
  .sumcard .v{font-size:1.12rem}
  .card.stat{flex:1 1 calc(50% - 6px);min-width:0}
  .card.stat .big{font-size:1.3rem}
  .wfbar{gap:7px}
  .wfstep{flex:1 1 100%;min-width:0}
  .apgrid{grid-template-columns:1fr}
  .flash{padding:11px 13px;font-size:.93rem}
  .loginbox{margin:4vh auto;padding:22px 18px;border-radius:14px}
  .pill{margin-left:0;margin-right:5px}
  details.card>summary{padding:4px 0}
  .man table.doc{font-size:14px}
  .man table.doc th,.man table.doc td{padding:5px 6px}
  .mantoc a{padding:5px 13px}
}

/* ---------- ช่องแจกแจงรายละเอียดย่อยของรายการค่าใช้จ่าย ---------- */
.idet{margin-top:4px}
.idet>summary{cursor:pointer;font-size:.82rem;color:var(--mid);font-weight:600;list-style:none}
.idet>summary::-webkit-details-marker{display:none}
.idet>summary .meta{display:inline;font-weight:400}
.idet>summary:hover{text-decoration:underline}
.idet[open]>summary{margin-bottom:4px}
.idet textarea{min-height:0;font-size:.92rem;padding:7px 9px;line-height:1.45}
@media(max-width:760px){ .idet textarea{font-size:16px} }

/* ---------- ตารางรายการย่อย (แจกแจงรายละเอียด) ---------- */
.subwrap{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:8px 9px;margin-top:2px}
.subtbl{width:100%;border-collapse:collapse;background:transparent;min-width:0}
.subtbl thead th{background:transparent;color:var(--txt-3);font-size:.76rem;font-weight:600;
                 padding:0 6px 4px;border:0;white-space:nowrap;position:static;text-align:left}
.subtbl thead th.n{text-align:right}.subtbl thead th.u{text-align:left}
.subtbl td{border:0;border-top:1px dashed var(--line);padding:4px 6px;background:transparent!important}
.subtbl tbody tr:first-child td{border-top:0}
.subtbl input{padding:5px 7px;font-size:.9rem}
.subtbl .sqty,.subtbl .sprice{text-align:right}
.subtbl td.samt{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
                font-size:.9rem;padding-top:9px}
.subtbl th:nth-child(2),.subtbl td:nth-child(2){width:72px}
.subtbl th:nth-child(3),.subtbl td:nth-child(3){width:86px}
.subtbl th:nth-child(4),.subtbl td:nth-child(4){width:96px}
.subtbl th:nth-child(5),.subtbl td:nth-child(5){width:96px}
.subtbl th:last-child,.subtbl td:last-child{width:34px}
.subtbl .subdel{padding:3px 8px;line-height:1}
.subfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px}
.subfoot .subsum{flex:1 1 auto}
@media(max-width:760px){
  .subtbl,.subtbl thead,.subtbl tbody,.subtbl tr,.subtbl td{display:block;width:auto!important}
  .subtbl thead{display:none}
  .subtbl tbody tr{border:1px solid var(--line);border-radius:9px;background:#fff;
                   padding:5px 2px;margin-bottom:7px}
  .subtbl td{border-top:0;display:flex;gap:9px;align-items:center}
  .subtbl td::before{content:attr(data-l);flex:0 0 34%;color:var(--txt-3);font-size:.8rem;font-weight:600}
  .subtbl td.samt{padding-top:4px;justify-content:flex-end}
}