/* ============================================================
   Peekaboo Nursery — Back Office
   โทนอบอุ่น พาสเทล ทันสมัย ใช้ฟอนต์ในเครื่อง (ออฟไลน์ 100%)
   ============================================================ */
:root{
  /* นิวทรัล — ครีมอุ่น + น้ำตาลนุ่ม (ดึงสีจากโลโก้โรงเรียนโดยตรง ให้สบายตา) */
  --bg:#FBF7EF;
  --bg-2:#F2EBDD;          /* พื้นจม: แถบ/ราง/ตัวสลับภาษา */
  --card:#FFFFFF;
  --ink:#574B3D;           /* น้ำตาลอุ่น = สีตัวอักษรในโลโก้ อ่านสบายตากว่าดำสนิท */
  --ink-2:#8B7C6B;         /* ข้อความรอง */
  --muted:#A89A88;         /* ป้าย/ข้อความลำดับสาม */
  --line:#EFE7D8;          /* เส้นบางสุด */
  --line-2:#E5DAC7;        /* เส้นแบ่งเข้มขึ้นนิด */

  /* แบรนด์ — ลาเวนเดอร์นุ่ม (ลายเส้นรอบตัวการ์ตูนในโลโก้) */
  --brand:#9279CE;
  --brand-ink:#6E55B2;     /* ลาเวนเดอร์เข้ม — ตัวอักษรบนพื้นอ่อน */
  --brand-soft:#EEE9FA;
  --coral:var(--brand);            /* คงชื่อโทเคนเดิมไว้ ให้โค้ดส่วนอื่นใช้ต่อได้ */
  --coral-ink:var(--brand-ink);
  --coral-soft:var(--brand-soft);
  --peach:#C4ACE9;                 /* ลาเวนเดอร์อ่อน — เส้นโฟกัส/ไฮไลต์ */

  /* สีรอง — พาสเทลจากโลโก้ + สีสื่อความหมาย (นุ่ม สบายตา) */
  --sun:#D7A220;   --sun-soft:#FAF0D3;   /* เหลืองน้ำผึ้ง (ผมเด็กในโลโก้) */
  --rose:#E08AA0;  --rose-soft:#FBE8EE;  /* ชมพูแก้ม */
  --lav:#9279CE;   --lav-soft:#EEE9FA;
  --teal:#3DA89A;  --teal-soft:#E3F2EF;
  --green:#3FA177; --green-soft:#E5F2EB;
  --red:#DC6A6A;   --red-soft:#FBEAEA;    /* แดงนุ่มลง ไม่จัดจ้าน */

  /* ไล่สีแบรนด์ — ลาเวนเดอร์→ม่วงอมชมพู (นุ่มแบบโลโก้) */
  --grad:linear-gradient(135deg,#A892E0 0%,#9279CE 55%,#BD9FDB 100%);
  --grad-teal:linear-gradient(135deg,#45AE9F 0%,#5FC4B6 100%);

  /* เงา — โทนกลางอุ่น เป็นชั้น (ไม่เรืองสีจัด) */
  --shadow-sm:0 1px 2px rgba(87,75,61,.05), 0 2px 8px rgba(87,75,61,.06);
  --shadow:0 4px 12px rgba(87,75,61,.08), 0 14px 30px rgba(87,75,61,.06);
  --shadow-lg:0 22px 55px rgba(87,75,61,.15);

  --ring:0 0 0 3px rgba(146,121,206,.22);   /* วงโฟกัส (ลาเวนเดอร์) */

  /* สเกลความโค้ง */
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
}
/* ฟอนต์อิโมจิการ์ตูน (Twemoji) — ออฟไลน์ 100% ทำให้ไอคอนทุกหน้าเป็นชุดเดียวกัน น่ารัก ไม่ใช่อิโมจิเครื่อง */
@font-face{
  font-family:'AppEmoji';
  src:url('fonts/twemoji.ttf') format('truetype');
  font-display:swap;
}
/* ฟอนต์หลัก Sarabun — ฟอนต์มาตรฐานเอกสารไทย ดูคม/มืออาชีพ · ฝังในเครื่อง ออฟไลน์ 100% (ไทย+อังกฤษ) */
@font-face{ font-family:'Sarabun'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/sarabun-thai-400.woff2') format('woff2'); unicode-range:U+0E00-0E7F; }
@font-face{ font-family:'Sarabun'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/sarabun-thai-600.woff2') format('woff2'); unicode-range:U+0E00-0E7F; }
@font-face{ font-family:'Sarabun'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/sarabun-thai-700.woff2') format('woff2'); unicode-range:U+0E00-0E7F; }
@font-face{ font-family:'Sarabun'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/sarabun-latin-400.woff2') format('woff2'); unicode-range:U+0000-024F,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2122,U+2153-215F; }
@font-face{ font-family:'Sarabun'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/sarabun-latin-600.woff2') format('woff2'); unicode-range:U+0000-024F,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2122,U+2153-215F; }
@font-face{ font-family:'Sarabun'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/sarabun-latin-700.woff2') format('woff2'); unicode-range:U+0000-024F,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2122,U+2153-215F; }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Sarabun','Leelawadee UI','Segoe UI',Tahoma,'AppEmoji',sans-serif;
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{letter-spacing:-.01em}
button{font-family:inherit}
input,select,textarea{font-family:inherit;font-size:14px}
.hidden{display:none!important}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
  width:236px;flex:0 0 236px;background:var(--card);
  border-right:1px solid var(--line);
  padding:22px 14px;display:flex;flex-direction:column;gap:6px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.content{flex:1;min-width:0;padding:26px 30px 60px}

/* ---------- Brand ---------- */
.brand{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 8px 16px;text-align:center}
.brand-logo{width:152px;max-width:90%;height:auto;display:block}
.brand .name{font-weight:700;font-size:17px;line-height:1.15}
.brand .sub{font-size:11.5px;color:var(--muted)}

/* ---------- Nav ---------- */
.nav-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:10px 12px 4px}
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;
  border:0;background:transparent;color:var(--ink);
  padding:11px 13px;border-radius:13px;font-size:14.5px;cursor:pointer;
  text-align:left;text-decoration:none;transition:background .15s;
}
.nav-item:hover{background:var(--coral-soft)}
.nav-item.active{background:var(--grad);color:#fff;font-weight:700;box-shadow:0 5px 14px rgba(146,121,206,.26)}
.nav-item .ico{font-size:17px;width:22px;text-align:center}
.nav-ext{border:1.5px dashed var(--peach);margin-top:4px;color:var(--coral-ink);font-weight:600}
.nav-ext:hover{background:var(--coral-soft)}
.sidebar .foot{margin-top:auto;padding:12px 8px 0;display:flex;flex-direction:column;gap:9px}
.lang-toggle{display:flex;background:var(--bg);border-radius:11px;padding:3px}
.lang-toggle button{flex:1;border:0;background:transparent;padding:7px 0;border-radius:9px;cursor:pointer;font-size:13px;color:var(--muted)}
.lang-toggle button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:var(--shadow-sm)}
.save-status{font-size:12px;color:var(--muted);text-align:center}
.save-status.saved{color:var(--green)}

/* ---------- Page chrome ---------- */
.page{animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:24px}
.page-head .desc{color:var(--muted);font-size:13.5px;margin-top:3px}
.page-actions{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{
  border:1px solid var(--line-2);border-radius:11px;padding:9px 15px;font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;font-weight:600;
  background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .12s, box-shadow .12s, background .12s;text-decoration:none;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-primary{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(146,121,206,.28)}
.btn-primary:hover{box-shadow:0 6px 18px rgba(146,121,206,.34)}
.btn-teal{background:var(--grad-teal);color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(61,168,154,.26)}
.btn-ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--coral-soft);color:var(--coral-ink);box-shadow:none}
.btn-danger{background:var(--red-soft);color:var(--red);border-color:transparent}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:9px}
.btn-icon{padding:7px 9px;border-radius:9px;font-size:14px}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:20px}
.card h3{margin:0 0 4px;font-size:16px}
.card .hint{color:var(--muted);font-size:12.5px;margin:0 0 14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1100px){.grid2,.grid3{grid-template-columns:1fr}}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:18px 20px;position:relative;overflow:hidden;transition:transform .14s,box-shadow .14s}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kpi-card .ico{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:20px;margin-bottom:10px;
}
.kpi-card .num{font-size:26px;font-weight:700;line-height:1.1}
.kpi-card .num small{font-size:14px;font-weight:600;color:var(--muted)}
.kpi-card .lbl{color:var(--muted);font-size:13px;margin-top:3px}
.meter{height:7px;background:var(--bg);border-radius:99px;margin-top:10px;overflow:hidden}
.meter>i{display:block;height:100%;border-radius:99px;background:var(--grad)}

/* ---------- Hero ---------- */
.hero{
  background:var(--grad);border-radius:var(--r-lg);color:#fff;padding:26px 28px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:20px;box-shadow:0 12px 28px rgba(146,121,206,.24);
  position:relative;overflow:hidden;
}
/* แสงนุ่ม ๆ มุมบนให้ดูมีมิติ ไม่แบนเหมือนสีทับ */
.hero::before{content:"";position:absolute;top:-40%;right:-10%;width:380px;height:380px;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%);pointer-events:none}
.hero>*{position:relative}
.hero h2{margin:0 0 6px;font-size:22px;letter-spacing:-.01em}
.hero .sub{opacity:.95;font-size:14px}
.hero .chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hero .chip{background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:99px;padding:7px 14px;font-size:13px;backdrop-filter:blur(4px)}

/* ---------- Chips / badges ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);border-radius:99px;padding:8px 15px;font-size:13.5px;cursor:pointer;color:var(--ink-2);font-weight:600;transition:background .12s,color .12s,border-color .12s}
.chip:hover{border-color:var(--peach);color:var(--coral-ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.on:hover{color:#fff}
.badge{display:inline-block;border-radius:99px;padding:3px 10px;font-size:11.5px;font-weight:700}
.b-teal{background:var(--teal-soft);color:#1F6F64}
.b-coral{background:var(--coral-soft);color:var(--coral-ink)}
.b-sun{background:var(--sun-soft);color:#8A6D1E}
.b-lav{background:var(--lav-soft);color:#7C5CD6}
.b-green{background:var(--green-soft);color:#2E7D55}
.b-red{background:var(--red-soft);color:var(--red)}
.b-gray{background:#F1EDE8;color:var(--muted)}
.b-rose{background:var(--rose-soft);color:#D6479C}

/* ---------- Toolbar / filter ---------- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.search{
  border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;min-width:240px;
  background:#fff;outline:none;
}
.search:focus{border-color:var(--peach);box-shadow:var(--ring)}

/* ---------- Tables ---------- */
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:auto}
table.grid{width:100%;border-collapse:collapse;font-size:14px}
table.grid th{
  text-align:left;padding:12px 14px;font-size:11.5px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.045em;
  border-bottom:1px solid var(--line-2);white-space:nowrap;position:sticky;top:0;background:#FDFAF6;z-index:1;
}
table.grid td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.grid tr:last-child td{border-bottom:0}
table.grid tbody tr{transition:background .1s}
table.grid tr:hover td{background:#FCF7F1}
td.num,th.num{text-align:right}
.empty{padding:36px;text-align:center;color:var(--muted)}
.empty .big{font-size:34px;margin-bottom:8px}

/* ---------- เงินเดือน: คอลัมน์จัดการลอยติดขอบขวา + เตือนต้องตรวจ ---------- */
table.grid th.pay-act,table.grid td.pay-act{
  position:sticky;right:0;white-space:nowrap;text-align:right;background:#fff;
  box-shadow:-12px 0 14px -12px rgba(44,37,33,.22);
}
table.grid th.pay-act{background:#FDFAF6;z-index:2}
table.grid tr:hover td.pay-act{background:#FCF7F1}
table.grid tr.needs-review td:first-child{box-shadow:inset 4px 0 0 0 var(--sun,#FFC93C)}
.review-badge{font-size:10px;white-space:nowrap}
.review-bar{
  background:var(--sun-soft);border:1.5px solid var(--sun,#FFC93C);border-radius:12px;
  padding:10px 14px;margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--ink);
}
.kpi-card.kpi-warn{border-color:var(--sun,#FFC93C);background:linear-gradient(180deg,var(--sun-soft),#fff)}
.pay-warn{border:1.5px solid var(--sun,#FFC93C);border-radius:10px;padding:8px 12px;font-size:13px;line-height:1.5}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.form-grid .full{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);font-weight:600}
label.f input,label.f select,label.f textarea{
  border:1.5px solid var(--line-2);border-radius:10px;padding:9px 12px;background:#fff;outline:none;color:var(--ink);font-weight:400;
  transition:border-color .12s, box-shadow .12s;
}
label.f input:focus,label.f select:focus,label.f textarea:focus{border-color:var(--peach);box-shadow:var(--ring)}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;color:var(--ink);font-weight:400}
fieldset.box{border:1.5px solid var(--line);border-radius:13px;padding:12px 14px;margin:0}
fieldset.box legend{font-size:12.5px;color:var(--muted);font-weight:700;padding:0 6px}

/* ---------- Modal ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(44,37,33,.42);display:flex;
  align-items:center;justify-content:center;z-index:100;padding:20px;
  backdrop-filter:blur(2px);
}
.modal{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  width:min(720px,100%);max-height:90vh;overflow:auto;padding:24px;
  animation:pop .18s ease;
}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.modal h3{margin:0 0 16px;font-size:18px}
/* ปุ่มบันทึก/ยกเลิก ติดขอบล่าง modal ตลอด (ไม่ต้องเลื่อนหา) — ใช้ได้กับทุก modal */
.modal .foot{
  display:flex;justify-content:flex-end;align-items:center;gap:10px;
  position:sticky;bottom:-24px;z-index:6;
  margin:18px -24px -24px;padding:13px 24px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(5px);
  border-top:1.5px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg);
}
/* ฟุตเตอร์สลิป: โชว์ยอดสุทธิคู่กับปุ่ม */
.modal .foot.pay-foot{justify-content:space-between;flex-wrap:wrap}
.pay-foot-net{flex:1;min-width:180px;font-size:13.5px;line-height:1.45}
.pay-foot-btns{display:flex;gap:10px;flex-shrink:0}

/* ---------- Toast ---------- */
#toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:12px 22px;border-radius:99px;
  font-size:14px;box-shadow:var(--shadow);z-index:200;opacity:0;pointer-events:none;
  transition:opacity .25s, transform .25s;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}
#toast.err{background:var(--red)}

/* ---------- Dashboard charts ---------- */
.chart-row{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;gap:16px;margin-bottom:20px}
@media(max-width:1200px){.chart-row{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.chart-row{grid-template-columns:1fr}}
.donut-wrap{display:flex;align-items:center;gap:18px}
.legend{display:flex;flex-direction:column;gap:7px;font-size:13px}
.legend .dot{width:10px;height:10px;border-radius:99px;display:inline-block;margin-right:7px}
.hbar{display:flex;flex-direction:column;gap:10px}
.hbar .row{display:grid;grid-template-columns:64px 1fr 38px;gap:10px;align-items:center;font-size:13px}
.hbar .track{height:12px;background:var(--bg);border-radius:99px;overflow:hidden}
.hbar .track>i{display:block;height:100%;border-radius:99px}
.cols{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:8px}
.cols .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.cols .bar{width:100%;max-width:46px;background:var(--grad-teal);border-radius:9px 9px 4px 4px;transition:height .4s}
.cols .v{font-size:10.5px;color:var(--muted);white-space:nowrap}
.cols .l{font-size:11.5px;color:var(--muted)}

/* quick links */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
@media(max-width:1100px){.quick{grid-template-columns:repeat(2,1fr)}}
.quick a{
  text-decoration:none;color:var(--ink);background:var(--card);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:18px;display:flex;gap:13px;align-items:center;
  transition:transform .14s, box-shadow .14s;
}
.quick a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.quick .ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:21px;flex:0 0 44px}
.quick b{display:block;font-size:14.5px}
.quick small{color:var(--muted);font-size:12px}

/* alerts */
.alert{display:flex;gap:10px;align-items:flex-start;background:var(--sun-soft);border-radius:13px;padding:12px 14px;font-size:13.5px;margin-bottom:8px}
.alert.red{background:var(--red-soft)}

/* room cards */
.room-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media(max-width:1100px){.room-cards{grid-template-columns:repeat(2,1fr)}}
.room-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow-sm);padding:15px 16px;border-top:4px solid var(--teal)}
.room-card h4{margin:0 0 2px;font-size:15px}
.room-card .age{font-size:12px;color:var(--muted)}
.room-card .focus{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.5}
.room-card .count{font-size:21px;font-weight:700;margin-top:8px}

/* ---------- Dashboard: KPI delta / รายรับ / ศูนย์รวมงาน ---------- */
.delta{display:inline-block;font-weight:800;font-size:11.5px;padding:1px 7px;border-radius:99px;margin-left:4px;vertical-align:middle}
.delta.up{color:var(--green);background:var(--green-soft)}
.delta.down{color:var(--red);background:var(--red-soft)}
.kpi-card.kpi-warn{border-color:#F0C7C7;background:linear-gradient(180deg,#FFF8F6,#fff)}

.rev-card{margin-bottom:20px}
.rev-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.rev-big{font-size:30px;font-weight:700;line-height:1;text-align:right;color:var(--ink)}
.rev-big span{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:5px}
.area-svg{display:block;width:100%;height:auto;margin-top:8px;overflow:visible}

.task-center{margin-bottom:20px}
.tc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.task-tile{
  font-family:inherit;color:inherit;text-align:left;border:1px solid var(--line);background:var(--card);
  border-radius:15px;padding:13px 15px;cursor:pointer;display:flex;gap:12px;align-items:center;
  box-shadow:var(--shadow-sm);transition:transform .12s, box-shadow .12s, border-color .12s;
}
.task-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.task-tile .tt-ic{flex:0 0 42px;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center}
.tt-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.tt-top{display:flex;align-items:baseline;gap:7px;min-width:0}
.tt-n{font-size:20px;font-weight:700;line-height:1;color:var(--ink)}
.tt-l{font-weight:700;font-size:13px;color:var(--ink)}
.tt-s{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tone-red .tt-ic{background:var(--red-soft);color:var(--red)}
.tone-red{border-color:#F1D2D2}
.tone-lav .tt-ic{background:var(--lav-soft);color:var(--brand-ink)}
.tone-teal .tt-ic{background:var(--teal-soft);color:var(--teal)}
.tone-sun .tt-ic{background:var(--sun-soft);color:#B8860B}
.tone-rose .tt-ic{background:var(--rose-soft);color:#D6479C}
.all-clear{display:flex;align-items:center;gap:14px;background:var(--green-soft);border-radius:15px;padding:18px 20px}
.all-clear .ac-ic{flex:0 0 46px;width:46px;height:46px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--green)}

/* invoice builder */
.inv-line{display:grid;grid-template-columns:auto 1fr 110px 34px;gap:8px;margin-bottom:8px;align-items:center}
.inv-line input{border:1.5px solid var(--line);border-radius:10px;padding:8px 11px}
.inv-line input.amt{text-align:right}
.drag-h{cursor:grab;color:var(--muted);font-size:17px;line-height:1;user-select:none;padding:0 1px;text-align:center;transition:color .12s}
.drag-h:hover{color:var(--brand)}
.drag-h:active{cursor:grabbing}
.inv-line.dragging{opacity:.45}
.inv-line.drop-on{outline:2px dashed var(--peach);outline-offset:2px;border-radius:9px}
.inv-total{display:flex;justify-content:space-between;align-items:center;border-top:2px dashed var(--line);margin-top:12px;padding-top:12px;font-size:16px}
.inv-total b{font-size:22px;color:var(--coral-ink)}
.preset-row{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}

/* ---------- ช่องค้นหาแบบพิมพ์ได้ (combobox) + แถบกำลังแก้ไข ---------- */
.combo{position:relative}
.combo-input{width:100%}
.combo-list{
  position:absolute;z-index:60;top:calc(100% + 5px);left:0;right:0;
  max-height:256px;overflow:auto;background:#fff;
  border:1.5px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);padding:5px;
}
.combo-item{display:flex;flex-direction:column;gap:1px;padding:8px 11px;border-radius:9px;cursor:pointer}
.combo-item:hover,.combo-item.hi{background:var(--brand-soft)}
.combo-item-main{font-size:14px;font-weight:600;color:var(--ink)}
.combo-item-sub{font-size:12px;color:var(--muted)}
.combo-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}
.edit-banner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--sun-soft);border:1.5px solid #EAD9A8;color:#8A6D1E;
  border-radius:12px;padding:9px 13px;font-size:13px;font-weight:600;margin:2px 0 14px;
}

/* fee structure */
.fee-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.fee-row:last-child{border-bottom:0}
.fee-row b{font-size:15px}
/* รายการค่าบริการที่เพิ่มเอง (หน้าตั้งค่า) */
.fee-custom-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.fee-custom-row{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:9px 12px;background:#fff}
.fee-custom-row .fcr-names{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.fee-custom-row .fcr-en{font-size:11.5px;color:var(--muted)}
.fee-custom-row .fcr-en.fcr-warn{color:var(--sun,#B8860B)}
.fee-custom-row .fcr-amt{font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.fee-custom-row .fcr-act{display:flex;gap:5px;white-space:nowrap}

/* kit cards */
.kit-card{border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:10px}
.kit-card h4{margin:0 0 6px;font-size:14px}
.kit-card ul{margin:0;padding-left:18px;font-size:13px;color:var(--muted);line-height:1.7}

/* duty grid */
.duty-wrap{overflow:auto}
table.duty{width:100%;border-collapse:collapse;font-size:13px}
table.duty th{background:var(--teal-soft);color:var(--teal);padding:9px;font-size:12.5px;border:1px solid #fff;border-radius:6px}
table.duty td{padding:5px;border:1px solid var(--line);min-width:110px}
table.duty td.slot{font-weight:600;font-size:12.5px;background:#FFFBF4;min-width:170px;padding:8px 10px}
table.duty select{width:100%;border:1px solid var(--line);border-radius:8px;padding:6px;background:#fff}
table.duty td.na{background:#F5F1EC}

/* settings */
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

/* ---------- Print (invoice) ---------- */
#printArea{display:none}
@media print{
  body.printing .app{display:none}
  body.printing #printArea{display:block}
  body{background:#fff}
}
.inv-paper{font-family:'Leelawadee UI','Segoe UI',Tahoma,'AppEmoji',sans-serif;color:#222;max-width:720px;margin:0 auto;padding:30px 10px}
.inv-paper .head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #9279CE;padding-bottom:14px;margin-bottom:18px}
.inv-paper h2{margin:0;font-size:22px}
.inv-paper table{width:100%;border-collapse:collapse;margin-top:14px}
.inv-paper th{background:#F1ECFB;text-align:left;padding:9px 12px;font-size:13px}
.inv-paper td{padding:9px 12px;border-bottom:1px solid #eee;font-size:14px}
.inv-paper .tot td{font-weight:800;font-size:16px;border-top:2px solid #9279CE;border-bottom:0}
.inv-paper .sign{display:flex;justify-content:space-between;margin-top:54px;font-size:13px;text-align:center}
.inv-paper .sign div{width:220px;border-top:1px dotted #999;padding-top:8px}

/* ---------- ใบแจ้งหนี้/ใบเสร็จ ครึ่ง A4 (2 ใบต่อกระดาษ 1 แผ่น) ---------- */
.batch-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:9px 12px;margin:10px 0 12px}
.batch-bar select{border:1.5px solid var(--line);border-radius:9px;padding:6px 9px;background:#fff}
.batch-bar .chk{display:flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer}

/* ---------- รายการค่าใช้จ่ายแบบกางดู (ในตารางใบแจ้ง/ใบเสร็จ) ---------- */
.inv-exp{border:0;background:#EFEAFB;color:#6B53B5;width:20px;height:20px;border-radius:6px;
  font-size:12px;line-height:1;cursor:pointer;font-weight:800;vertical-align:1px;margin-right:3px}
.inv-exp:hover{background:#E0D7F7}
.inv-row.open{background:#FAF7FF !important}
.inv-row.open>td{border-bottom:0}
a.inv-name{color:inherit;text-decoration:none;border-bottom:1px dashed transparent;cursor:pointer}
a.inv-name:hover{border-bottom-color:var(--muted)}
.inv-detail-row>td{padding:0 !important;background:#FAF7FF}
.inv-detail{margin:0 6px 10px;border:1.5px solid #E6DEF8;border-radius:10px;overflow:hidden;background:#fff}
.inv-detail-head{background:#F1ECFB;color:#5A47A0;font-weight:700;font-size:12.5px;padding:7px 12px}
.inv-detail-line{display:flex;justify-content:space-between;gap:14px;padding:7px 12px;font-size:13px;border-top:1px solid #F0ECF8}
.inv-detail-line span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-detail-line.minus span:last-child{color:#C0392B}
.inv-detail-line.total{font-weight:800;background:#FBF9FF;border-top:2px solid #9279CE}

.half-sheet{width:190mm;margin:0 auto}
.half-paper{
  font-family:'Leelawadee UI','Segoe UI',Tahoma,sans-serif;color:#222;
  height:130mm;padding:7mm 5mm 4mm;box-sizing:border-box;overflow:hidden;
  display:flex;flex-direction:column;
}
.half-cut{border-top:2px dashed #aaa;position:relative;height:0;margin:3mm 0}
.half-cut span{position:absolute;top:-9px;left:10mm;background:#fff;padding:0 8px;font-size:11px;color:#888}
.half-paper .h-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-bottom:2.5px solid #9279CE;padding-bottom:6px}
.half-paper .h-brand b{font-size:17px}
.half-paper .h-brand small{display:block;color:#666;font-size:11px;margin-top:2px}
.half-paper .h-meta{text-align:right;font-size:12px;white-space:nowrap}
.half-paper .h-title{font-size:15px;font-weight:800;color:#9279CE}
.half-paper .h-stu{font-size:13px;margin:7px 0 4px}
.half-paper .h-table{width:100%;border-collapse:collapse;font-size:12.5px}
.half-paper .h-table th{background:#F1ECFB;text-align:left;padding:5px 9px;font-size:11.5px}
.half-paper .h-table td{padding:5px 9px;border-bottom:1px solid #eee}
.half-paper .h-table .r{text-align:right}
.half-paper .h-table .tot td{font-weight:800;border-top:2px solid #9279CE;border-bottom:0;font-size:13.5px}
.half-paper .h-table.compact th{padding:3.5px 9px}
.half-paper .h-table.compact td{padding:3px 9px;font-size:12px}
.half-paper .h-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;font-size:12px;padding-top:6px}
.half-paper .h-paid{border:2.5px solid #18A058;color:#18A058;font-weight:800;padding:3px 12px;border-radius:8px;transform:rotate(-4deg);font-size:14px}
.half-paper .h-note{color:#777;max-width:62%}
.half-paper .h-sign{white-space:nowrap}
@media print{
  .half-sheet{page-break-after:always}
}

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#F4EEFB 0%,#FBF7EF 55%,#FBF0F3 100%);padding:20px;
}
.auth-card{
  background:#fff;border-radius:26px;box-shadow:var(--shadow-lg);
  width:min(440px,100%);padding:30px 34px 28px;text-align:center;animation:pop .25s ease;
}
.auth-logo{width:160px;max-width:78%;height:auto;display:block;margin:0 auto 14px}
.auth-card h2{margin:0 0 4px;font-size:21px}
.auth-card .sub{color:var(--muted);font-size:13px;margin-bottom:20px}
.auth-card input{
  width:100%;border:1.5px solid var(--line);border-radius:13px;padding:12px 15px;
  font-size:15px;margin-bottom:11px;outline:none;text-align:center;
}
.auth-card input:focus{border-color:var(--peach)}
.auth-card .btn{width:100%;justify-content:center;padding:12px;font-size:15px}
.auth-err{color:var(--red);font-size:13px;min-height:18px;margin-bottom:6px}
.user-pick{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;max-height:300px;overflow:auto}
.user-pick button{
  display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);background:#fff;
  border-radius:14px;padding:11px 14px;cursor:pointer;font-size:15px;text-align:left;
}
.user-pick button:hover{border-color:var(--peach);background:var(--coral-soft)}
.user-pick button.on{border-color:var(--coral);background:var(--coral-soft);font-weight:700}
.user-pick .av{
  width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;font-size:16px;flex:0 0 38px;
}
.rec-code{
  font-family:Consolas,monospace;font-size:24px;letter-spacing:5px;font-weight:800;
  background:var(--sun-soft);border:2px dashed var(--sun);border-radius:14px;
  padding:14px;margin:12px 0;color:#8a6d00;
}
.auth-link{background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline;margin-top:12px}

/* ---------- ผู้ใช้ในแถบข้าง + กระดิ่ง ---------- */
.me-chip{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:13px;padding:9px 11px}
.me-chip .av{width:34px;height:34px;border-radius:11px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 34px}
.me-chip .nm{font-size:13px;font-weight:700;line-height:1.2}
.me-chip .rl{font-size:11px;color:var(--muted)}
.me-chip .out{margin-left:auto;border:0;background:none;cursor:pointer;font-size:15px;color:var(--muted)}
.me-chip .out:hover{color:var(--red)}
.bell-badge{
  background:var(--red);color:#fff;border-radius:99px;font-size:11px;font-weight:800;
  padding:1px 7px;margin-left:auto;display:none;
}
.nav-item.active .bell-badge{background:#fff;color:var(--coral)}

/* ---------- ระบบบันทึกรายรับ (ฝังในระบบหลัก) ---------- */
.income-frame-wrap{height:calc(100vh - 168px);min-height:560px;border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);background:#fff}
.income-frame{width:100%;height:100%;border:0;display:block}

/* ---------- ตารางสอน ---------- */
.tt-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
table.tt{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
table.tt th{background:var(--lav-soft);color:#6D4FC9;padding:10px 9px;font-size:12.5px;font-weight:800;border-bottom:1px solid var(--line)}
table.tt th+th{border-left:1px solid #fff}
table.tt td{border-bottom:1px solid var(--line);border-left:1px solid var(--line);padding:5px;vertical-align:top;min-width:120px}
table.tt td:first-child{border-left:0}
table.tt td.time{background:#FFFBF4;min-width:118px;font-weight:600;padding:7px}
table.tt td.time input{width:100%;border:0;background:transparent;font-weight:700;font-size:12.5px}
table.tt .cell-t{width:100%;border:0;background:transparent;font-size:12.5px;padding:3px 4px}
table.tt .cell-s{width:100%;border:0;background:transparent;font-size:11px;color:var(--muted);margin-top:3px;cursor:pointer}
table.tt td.has-t .cell-s{font-size:11.5px;-webkit-appearance:none;appearance:none}
.cell-grp{margin-top:4px}
.cell-grp .badge{font-size:10px;padding:1.5px 8px;font-weight:600}
table.tt td:not(.has-t):hover{background:#FFFDF8}
.tt-row-del{border:0;background:none;color:var(--line);cursor:pointer;font-size:13px}
.tt-row-del:hover{color:var(--red)}

/* ---------- เอกสาร ---------- */
.tpl-cards{display:grid;grid-template-columns:1fr;gap:10px}
.tpl-card{
  display:flex;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:14px;
  padding:13px 15px;cursor:pointer;background:#fff;text-align:left;font-family:inherit;
}
.tpl-card:hover{border-color:var(--peach);background:var(--coral-soft)}
.tpl-card.on{border-color:var(--coral);background:var(--coral-soft);box-shadow:var(--shadow-sm)}
.tpl-card .ico{font-size:24px}
.tpl-card b{font-size:14px;display:block}
.tpl-card small{color:var(--muted);font-size:12px}
.doc-cut{border-top:2px dashed #999;margin:26px 0 14px;position:relative;font-size:12px;color:#777}
.doc-cut span{position:absolute;top:-11px;left:12px;background:#fff;padding:0 8px}
.doc-check{display:inline-block;width:14px;height:14px;border:1.5px solid #555;border-radius:3px;vertical-align:-2px;margin-right:6px}
.doc-line{display:inline-block;border-bottom:1px dotted #777;min-width:160px}

/* ---------- แจ้งเตือน ---------- */
.alert-item{
  display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:14px;
  padding:13px 16px;box-shadow:var(--shadow-sm);margin-bottom:10px;border-left:5px solid var(--sun);
}
.alert-item.red{border-left-color:var(--red)}
.alert-item.info{border-left-color:var(--teal)}
.alert-item .ic{font-size:19px}
.alert-item .tx{flex:1;font-size:14px}
.alert-item .tx small{color:var(--muted);display:block;margin-top:2px}
.sev-pill{font-size:11px;font-weight:800;border-radius:99px;padding:3px 10px}

/* ---------- ตัวสลับมุมมอง (รายเดือน / รายคน) ---------- */
.seg-toggle{display:inline-flex;background:var(--lav-soft);border-radius:12px;padding:4px;gap:4px;margin-bottom:14px}
.seg-toggle .seg{border:0;background:transparent;color:var(--ink);font-weight:700;font-size:13.5px;
  padding:7px 16px;border-radius:9px;cursor:pointer;transition:background .14s,box-shadow .14s,color .14s}
.seg-toggle .seg:hover{color:var(--lav)}
.seg-toggle .seg.on{background:#fff;color:var(--lav);box-shadow:var(--shadow-sm)}

/* ---------- การ์ดหัวข้อรายคน (เงินเดือน / เด็ก) ---------- */
.person-head-card{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-sm);padding:13px 18px;margin-bottom:14px;font-size:16px}
.person-dot{display:inline-block;width:13px;height:13px;border-radius:50%;flex:none}
tr.pay-prow:hover td,tr.child-prow:hover td{background:var(--lav-soft)}

/* ---------- การ์ดเงินเดือนรายเดือน (มุมมองรายคน) ---------- */
.pay-pcard{margin-bottom:12px;padding:0;overflow:hidden}
.pay-pcard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;
  background:var(--lav-soft);padding:11px 16px}
.pay-pcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pay-pcard-grid>div{padding:12px 16px}
.pay-pcard-grid>div:first-child{border-right:1px solid var(--line)}
.pay-col-h{font-weight:800;font-size:13px;margin-bottom:7px}
.pay-line{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:2.5px 0;color:var(--ink)}
.pay-sub{display:flex;justify-content:space-between;gap:12px;margin-top:7px;padding-top:7px;
  border-top:1px dashed var(--line);font-weight:700}
.pay-net-bar{display:flex;justify-content:space-between;align-items:center;background:var(--green-soft);
  padding:9px 16px;font-weight:700}
.pay-net-bar b{font-size:17px;color:var(--green)}
@media(max-width:640px){.pay-pcard-grid{grid-template-columns:1fr}.pay-pcard-grid>div:first-child{border-right:0;border-bottom:1px solid var(--line)}}

/* ---------- เงินผ่อน / หนี้สิน ---------- */
.loan-card{border:1px solid var(--line);border-radius:13px;padding:12px 14px;margin-top:10px;background:var(--bg,#FBF7EF)}
.loan-card:first-of-type{margin-top:0}
.loan-card.loan-done{opacity:.72}
.loan-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.loan-meta{font-size:13.5px;color:var(--ink);margin-top:7px}
.loan-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px}
.loan-bar>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--lav),var(--teal))}
.loan-card.loan-done .loan-bar>span{background:var(--green)}
.loan-pays{margin-top:9px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:3px 16px}
.loan-pay{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;border-bottom:1px dotted var(--line);padding:2px 0}
.loan-pay span:first-child{color:var(--muted)}
/* หัวข้อย่อยในการ์ดบัญชีสะสม/กองทุน รายคน */
.acct-sec{border-top:1px dashed var(--line-2);padding-top:10px}
.acct-sec:first-child{border-top:0;padding-top:0}
.acct-sec-h{font-size:14px;font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ตารางบัญชี/กองทุน — แถวกางจัดการในที่เดียว */
.acct-grid tbody .acct-row:hover{background:var(--lav-soft)}
.acct-grid tbody .acct-row-open{background:var(--lav-soft)}
.acct-grid tbody .acct-row-open td{font-weight:700}
.acct-grid tbody .acct-expand>td{background:var(--bg);padding:14px 16px;border-top:0}
/* แท็กรายการผ่อนในกล่องแก้ไขเงินเดือน */
.pay-edit-line{margin-bottom:4px}
.pay-loan-tag{font-size:11.5px;color:var(--lav);background:var(--lav-soft);border-radius:7px;padding:3px 9px;margin-bottom:3px;display:inline-block}

/* ---------- ตัวช่วยคิดเงิน (คอม / หักลา-สาย-ไม่สแกน) ในกล่องแก้ไขเงินเดือน ---------- */
.pay-helper{margin-top:10px;background:var(--bg);border:1.5px dashed var(--line-2);border-radius:12px;padding:9px 11px}
.pay-helper-on{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;cursor:pointer}
.pay-helper-on input{width:17px;height:17px;cursor:pointer}
.pay-helper-title{font-size:13.5px;font-weight:700;margin-bottom:7px}
.pay-helper-hint{font-size:12.5px;color:var(--muted);margin:8px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pay-chk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:3px 9px;cursor:pointer}
.pay-chk input{cursor:pointer}
.pay-calc{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;padding:5px 0}
.pay-calc + .pay-calc{border-top:1px solid var(--line)}
.pay-calc-lbl{min-width:88px;font-weight:600}
.pay-calc-u{color:var(--muted);font-size:12px}
.pay-calc-x{color:var(--muted)}
.pay-calc-out{min-width:62px;text-align:right}
.pay-mini{width:74px;border:1.5px solid var(--line);border-radius:8px;padding:5px 8px;text-align:right;font-size:13px;background:#fff}
.pay-mini:focus{outline:none;border-color:var(--peach);box-shadow:var(--ring)}
/* ตัวเลือกแบบประกันสังคมของแต่ละคน */
.pay-ins{display:flex;gap:8px;flex-wrap:wrap}
.pay-ins-btn.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.pay-ins-note{margin-top:9px;font-size:12.5px;background:var(--lav-soft);border-radius:10px;padding:8px 11px;line-height:1.5}
/* รายชื่อใน "เงินพิเศษชั่วคราว" */
.pay-tb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-height:230px;overflow:auto;background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:9px}
.pay-tb-item{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;padding:3px 5px;border-radius:7px}
.pay-tb-item:hover{background:#fff}
.pay-tb-item input{width:16px;height:16px;cursor:pointer}
.bc-amt{margin-left:auto;color:var(--green);font-weight:700;font-size:12.5px}
/* แถวในตารางรายเดือน: คลิกทั้งเซลล์เพื่อแก้ไข */
.pay-row:hover{background:var(--brand-soft)}
td.pay-click{cursor:pointer}

/* ---------- ภาพรวมเงินเดือน (สรุปแยกหัวข้อ) ---------- */
.kpis-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1300px){.kpis-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.kpis-5{grid-template-columns:repeat(2,1fr)}}
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.ov-grid>.card{margin:0}
@media(max-width:900px){.ov-grid{grid-template-columns:1fr}}
.brk-sub{font-size:13px;color:var(--muted);margin:0 0 10px}
.brk-sub b{color:var(--ink)}
.brk-row{margin-bottom:10px}
.brk-top{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;margin-bottom:4px}
.brk-top b{white-space:nowrap}
.brk-top b small{color:var(--muted);font-weight:600}
.brk-bar{height:9px;border-radius:99px;background:var(--line);overflow:hidden}
.brk-bar>span{display:block;height:100%;border-radius:99px;transition:width .3s}
.stat-line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dotted var(--line);font-size:14px}
.stat-line:last-of-type{border-bottom:0}
.stat-line.total{border-top:2px solid var(--line);border-bottom:0;margin-top:4px;padding-top:10px;font-weight:800;font-size:15px}
.mini-bars{display:flex;align-items:flex-end;gap:8px;height:150px;padding:8px 2px 0;overflow-x:auto}
.mini-bar{flex:1 1 0;min-width:38px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:4px;background:transparent;border:0;cursor:pointer;padding:0;border-radius:9px;transition:background .14s}
.mini-bar:hover{background:var(--lav-soft)}
.mini-bar .mini-val{font-size:11px;font-weight:700;color:var(--muted)}
.mini-bar .mini-fill{width:60%;max-width:42px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#A892E0,#9279CE);min-height:5px}
.mini-bar small{font-size:11.5px;color:var(--muted);font-weight:600}
.mini-bar.on .mini-fill{background:linear-gradient(180deg,#5FC4B6,#3DA89A)}
.mini-bar.on .mini-val,.mini-bar.on small{color:var(--teal);font-weight:800}

/* ---------- ตารางสรุปเงินเดือนเต็ม (ดูบนเว็บ + พิมพ์) ---------- */
.full-sum-wrap{overflow:auto;max-height:72vh;border:1px solid var(--line);border-radius:14px;
  background:#fff;box-shadow:var(--shadow-sm);margin-bottom:12px;-webkit-overflow-scrolling:touch}
table.pmx{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;background:#fff;font-size:12.5px;color:var(--ink)}
.pmx col.w-no{width:34px}   .pmx col.w-name{width:96px}
.pmx col.w-i0{width:62px}   .pmx col.w-i1{width:66px}  .pmx col.w-i2{width:52px}  .pmx col.w-i3{width:50px}  .pmx col.w-i4{width:50px}
.pmx col.w-tot{width:60px}
.pmx col.w-d0{width:46px}   .pmx col.w-d1{width:48px}  .pmx col.w-d2{width:52px}  .pmx col.w-d3{width:52px}  .pmx col.w-d4{width:52px}  .pmx col.w-d5{width:56px}  .pmx col.w-d6{width:46px}  .pmx col.w-d7{width:50px}
.pmx col.w-net{width:66px}  .pmx col.w-paid{width:34px} .pmx col.w-note{width:118px}
.pmx th,.pmx td{border-right:1px solid #ECE6DA;border-bottom:1px solid #ECE6DA;padding:6px 8px;text-align:center;white-space:nowrap;vertical-align:middle}
.pmx td.num{text-align:right;font-variant-numeric:tabular-nums}
.pmx tbody td.c-no{color:var(--muted);font-size:11.5px}
.pmx .col-name{text-align:left;font-weight:700;white-space:nowrap}
.pmx .col-note{text-align:left;white-space:normal;color:var(--muted);font-size:11px;line-height:1.35}
.pmx .col-note .muted{color:#B7AE9C}
/* หัวตารางค้างบนเมื่อเลื่อนลง */
.pmx thead th{position:sticky;top:0;z-index:5;background:#F5F1FB;font-size:11.5px;font-weight:700}
.pmx thead .pmx-sub th{top:29px;z-index:4;font-size:10.5px;color:var(--ink-2,#7a6f60);font-weight:600;background:#F8F5FC}
.pmx thead .grp-inc{background:var(--green-soft);color:var(--green)}
.pmx thead .grp-ded{background:var(--rose-soft);color:#B05E76}
.pmx thead .grp-net{background:#D9F0E6;color:var(--green)}
.pmx thead .th-tot{background:#E6EFE9}
.pmx thead .pmx-sub th:nth-child(n+6){background:#FBF1F4}  /* ฝั่งหักโทนชมพูอ่อน */
.pmx thead .pmx-sub th:nth-child(-n+6){background:#EEF6F1} /* ฝั่งรับโทนเขียวอ่อน */
/* คอลัมน์ชื่อค้างซ้ายเมื่อเลื่อนข้าง */
.pmx .col-name{position:sticky;left:0;z-index:3;background:#fff;box-shadow:1px 0 0 #E7E1D4}
.pmx thead th.col-name{z-index:7;background:#F5F1FB}
.pmx .c-no{position:sticky;left:0;z-index:3;background:#fff}   /* ลำดับไม่ค้าง แต่กันพื้นโปร่ง */
.pmx .c-net{background:var(--green-soft);font-weight:800;color:var(--green)}
.pmx .c-m39{background:var(--lav-soft);color:var(--brand-ink);font-weight:700}
.pmx thead .grp-m39{background:#EEE9FA;color:var(--brand-ink)}
.pmx .c-sso{background:#FBF3F3}
.pmx .c-sub-inc{background:#EDF7F1;font-weight:700}
.pmx .c-sub-ded{background:#FBEFEF;font-weight:700}
.pmx tr.r-sub td{background:var(--teal-soft);font-weight:800}
.pmx tr.r-sub .col-name{background:var(--teal-soft)}
.pmx tr.r-section td{background:var(--sun-soft);font-weight:800;text-align:left}
.pmx tr.r-grand td{background:#D9F0E6;font-weight:800;font-size:13px}
.pmx tr.r-grand .col-name{background:#D9F0E6}
.pmx-print{display:none}
/* พิมพ์ A4 แนวนอน — สัดส่วนพอดีหน้า ไม่ย่น */
@media print{
  .full-sum-wrap{overflow:visible;max-height:none;border:0;border-radius:0;box-shadow:none}
  .pmx-print{display:block;font-family:'Sarabun','Leelawadee UI',sans-serif;color:#222}
  .pmx-phead{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2.5px solid #9279CE;padding-bottom:6px;margin-bottom:8px}
  .pmx-org{font-size:18px}  .pmx-loc{font-size:12px;color:#666}  .pmx-date{font-size:12px}
  .pmx-title{text-align:center;font-size:16px;font-weight:800;margin-bottom:7px}
  .pmx-mnote{margin-top:8px;font-size:11px}
  .pmx-sign{display:flex;justify-content:space-between;margin-top:26px;font-size:12px;text-align:center}
  .pmx-sign div{width:230px;border-top:1px dotted #999;padding-top:6px}
  table.pmx{width:100%;table-layout:fixed;font-size:9px}
  /* คง <col> ไว้เป็นสัดส่วน — table-layout:fixed จะย่อ/ขยายให้พอดีหน้า A4 แนวนอน (ชื่อกว้าง ตัวเลขแคบ ไม่ย่น) */
  .pmx th,.pmx td{border:1px solid #999;padding:2.5px 3px;
    print-color-adjust:exact;-webkit-print-color-adjust:exact;overflow:hidden;text-overflow:ellipsis}
  .pmx thead th,.pmx .col-name,.pmx .c-no{position:static;box-shadow:none}
  .pmx thead th{background:#F1ECFB}
  .pmx thead .grp-inc{background:#E5F2EB}  .pmx thead .grp-ded{background:#FBEAEA}  .pmx thead .grp-net{background:#D9F0E6}
  .pmx thead .pmx-sub th:nth-child(-n+6){background:#EAF6F0}  .pmx thead .pmx-sub th:nth-child(n+6){background:#FBF1F1}
  .pmx .col-note{white-space:normal;font-size:8px;line-height:1.25}
  .pmx tr.r-grand td{font-size:9px}
}

/* ---------- แฟ้มเด็กรายคน ---------- */
.prof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.prof-cell{background:var(--bg,#FBF8F3);border:1px solid var(--line);border-radius:11px;padding:9px 13px}
.prof-cell span{display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
.prof-cell b{font-size:14px;color:var(--ink)}
.fee-chips{display:flex;flex-wrap:wrap;gap:8px}
.fee-chip{display:inline-flex;align-items:center;gap:6px;background:var(--lav-soft);color:var(--ink);
  border-radius:99px;padding:5px 13px;font-size:13px}
.fee-chip b{color:var(--lav)}
tr.child-month td{background:var(--lav-soft);font-weight:700;border-top:2px solid var(--line)}