/* รอบ 66: เงินเดือน (โมดูลส่วนกลาง ร้านค้า + โรงเรียน)
   หน้า: /payroll (Pages/Payroll.razor + PrRunsTab/PrEmployeesTab/PrAdvancesTab/PrSettingsTab), /payroll/run/{id} (PayrollRun.razor + PrLineEditor),
         /my-payslips (MyPayslips.razor), สลิปบนจอ PayslipView (prv-), สลิปพิมพ์ PayslipPrint (prs-)
   - คลาสขึ้นต้น prl- / prv- / prs- · สีใช้ตัวแปรของธีม (โหมดมืดใช้ได้) · ใช้ชิ้นส่วนของหน้ารายจ่าย (exp-pf, pf-*, exp-pfseg, exp-amount, exp-hint)
   - พิมพ์: html[data-print="prs-a4"] (A4 2 ใบ/หน้า) | "prs-a5" (A5 1 ใบ/หน้า) แสดงเฉพาะ .prs-print */

@media screen {
  /* ---------- หัว + แท็บ ---------- */
  .prl-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
  .prl-back { color: var(--muted); text-decoration: none; font-weight: 600; }
  .prl-back:hover { color: var(--brand); }
  .prl-tools { gap: 8px; }
  .prl-tools .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; }
  .prl-tabs {
    display: flex; gap: 4px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
    background: var(--chip); border-radius: 14px;
  }
  .prl-tabs::-webkit-scrollbar { display: none; }
  .prl-tabs button {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
    border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  }
  .prl-tabs button:hover { color: var(--ink); }
  .prl-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
  .prl-hide { display: none; }

  /* ---------- ตัวเลขสรุป ---------- */
  .prl-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .prl-stats .fit-stat small { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prl-stat-net { background: var(--ok); }
  /* รอบ 98: โหมดมืด --ok เป็นเขียวอ่อน ตัวหนังสือขาวอ่านไม่ออก → พื้นเขียวเข้ม */
  html[data-theme="dark"] .prl-stat-net { background: color-mix(in srgb, var(--ok) 34%, #10241A); }
  .prl-stat-net.fit-stat.hl strong, .prl-stat-net > span, .prl-stat-net > small.muted { color: #fff; }
  .prl-stat-net > span, .prl-stat-net > small.muted { opacity: .88; }

  /* ---------- ตาราง ---------- */
  .prl-pane { min-width: 0; }
  .prl-pane > .fit-pane-head { flex-wrap: wrap; }
  .prl-add { display: inline-flex; align-items: center; gap: 6px; }
  .prl-table td { vertical-align: middle; }
  .prl-sub { display: block; color: var(--muted); font-size: .8rem; line-height: 1.3; }
  .prl-code { color: var(--muted); font-weight: 600; margin-right: 4px; }
  .prl-emp-name { font-weight: 600; }
  .prl-period { font-weight: 600; white-space: nowrap; }
  .prl-login {
    display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
    padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong, var(--brand)); font-size: .8rem; font-weight: 600;
  }
  .prl-table tr.prl-neg td { background: var(--danger-soft); }
  .prl-table tfoot td { border-top: 2px solid var(--line); font-weight: 700; background: var(--surface); }
  .fit-scroll .prl-table tfoot td { position: sticky; bottom: 0; z-index: 1; }
  .prl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .prl-empty p { margin: 0; }
  .prl-empty-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--brand-soft); color: var(--brand); }

  /* สถานะ */
  .prl-st {
    display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px;
    font-size: .78rem; font-weight: 700; white-space: nowrap; background: var(--chip); color: var(--muted);
  }
  .prl-st-draft { background: var(--warn-soft); color: var(--warn-text, #7a5300); }
  .prl-st-confirmed { background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }
  .prl-st-paid, .prl-adv-deducted { background: var(--ok-soft); color: var(--ok); }
  .prl-st-void, .prl-adv-void { background: var(--danger-soft); color: var(--danger); }
  .prl-adv-open { background: var(--warn-soft); color: var(--warn-text, #7a5300); }

  /* ---------- ฟอร์ม/ป๊อปอัป ---------- */
  .prl-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .prl-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .prl-seg { display: flex; flex-wrap: wrap; gap: 6px; }
  .prl-seg button {
    flex: 1 1 110px; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
  }
  .prl-seg button.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong, var(--brand)); box-shadow: inset 0 0 0 1px var(--brand); }
  .prl-presets { display: flex; flex-wrap: wrap; gap: 6px; }
  .prl-presets .btn { border: 1px solid var(--line); }
  .prl-presets .btn.on { border-color: var(--brand); color: var(--brand-strong, var(--brand)); background: var(--brand-tint); }
  .prl-check { align-items: flex-start; }
  .prl-check > span { display: flex; flex-direction: column; gap: 2px; }
  .prl-check small.block { display: block; font-size: .8rem; }
  .prl-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .prl-checks-col { flex-direction: column; justify-content: flex-end; padding-bottom: 6px; }
  .prl-check-inline { white-space: nowrap; font-size: .88rem; color: var(--muted); }
  .prl-emp-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .prl-search { width: 240px; }
  .prl-bigamt {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px;
    border-radius: 14px; background: var(--brand-tint); border: 1px solid var(--line);
  }
  .prl-bigamt span { color: var(--muted); }
  .prl-bigamt strong { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .prl-bigamt.voided strong { text-decoration: line-through; color: var(--muted); }

  /* รายการประจำของพนักงาน */
  .prl-itemrows, .prl-lines, .prl-itemlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .prl-itemrows li {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) 130px 34px; align-items: center; gap: 8px;
    padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  }
  .prl-itemrows input { min-width: 0; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; font: inherit; text-align: right; background: var(--surface); color: var(--ink); }
  .prl-itemname { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; }
  .prl-kind {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-weight: 800; line-height: 1;
    background: var(--ok-soft); color: var(--ok);
  }
  .prl-kind.ded, .ded > .prl-kind { background: var(--danger-soft); color: var(--danger); }

  /* ---------- ตั้งค่า ---------- */
  .prl-settings { display: flex; flex-direction: column; gap: 14px; }
  .prl-legal { display: flex; align-items: flex-start; gap: 10px; background: var(--warn-soft); color: var(--warn-text, #7a5300); }
  .prl-legal svg { flex: none; margin-top: 2px; }
  .prl-card { display: flex; flex-direction: column; gap: 12px; margin: 0; }
  .prl-card h2 { margin: 0; font-size: 1.05rem; }
  .prl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .prl-chip {
    position: relative; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--line);
    border-radius: 999px; background: var(--surface); color: var(--muted); font-weight: 600; cursor: pointer; user-select: none;
  }
  .prl-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .prl-chip:focus-within { box-shadow: 0 0 0 3px var(--brand-soft); }
  .prl-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }
  .prl-days .prl-chip { min-width: 46px; justify-content: center; padding: 0 10px; }
  .prl-brackets { display: flex; flex-direction: column; gap: 6px; }
  .prl-brackets.off { opacity: .55; }
  .prl-brow { display: grid; grid-template-columns: minmax(0, 1fr) 120px 34px; gap: 8px; align-items: center; }
  .prl-bhead { color: var(--muted); font-size: .8rem; font-weight: 600; }
  /* รอบ 98: ปุ่มลบขั้นภาษี (icon-btn กว้าง ~44px) ล้นคอลัมน์ 34px ออกนอกการ์ด */
  .prl-brow > .icon-btn { width: 34px; height: 34px; min-width: 0; padding: 0; display: inline-grid; place-items: center; }
  .prl-brow input, .prl-pct input {
    min-width: 0; width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit;
    text-align: right; background: var(--surface); color: var(--ink);
  }
  .prl-pct { display: flex; align-items: center; gap: 6px; }
  .prl-pct b { color: var(--muted); }
  .prl-addrow { align-self: flex-start; }
  .prl-savebar { display: flex; justify-content: flex-end; }
  .prl-savebar .btn { min-width: 180px; min-height: 44px; }
  .prl-items { margin: 0; }
  .prl-itemform { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--brand-tint); }
  .prl-itemlist li {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  }
  .prl-itemlist li .prl-itemname { flex: 1 1 auto; }
  .prl-itemlist li.off { opacity: .6; }

  /* ---------- สลิปร่าง (แผงข้าง) ---------- */
  .prl-lines li.sys {
    display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 12px;
    background: var(--chip); color: var(--ink); font-size: .92rem;
  }
  .prl-lname { min-width: 0; overflow-wrap: anywhere; }
  .prl-le {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) 130px 34px; align-items: center; gap: 8px;
    padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  }
  .prl-le input[type="text"], .prl-le input[type="number"] {
    min-width: 0; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; font: inherit;
    background: var(--surface); color: var(--ink);
  }
  .prl-le .prl-le-amt { text-align: right; }
  .prl-le-flags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--muted); }
  .prl-le-flags .check input { width: 16px; height: 16px; }
  .prl-absence { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
  .prl-absence .field { flex: 0 1 140px; }
  .prl-addline { display: flex; flex-wrap: wrap; gap: 8px; }
  .prl-addline select {
    flex: 1 1 200px; min-width: 0; min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px;
    font: inherit; background: var(--surface); color: var(--ink);
  }
  .prl-totals .prl-net { padding-top: 6px; border-top: 1px dashed var(--line); font-size: 1.08rem; font-weight: 800; }

  /* ---------- สลิปบนจอ (PayslipView) ---------- */
  .prv { display: flex; flex-direction: column; gap: 12px; }
  .prv-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--brand-tint); border: 1px solid var(--line); }
  .prv-head > div { display: flex; flex-direction: column; gap: 2px; }
  .prv-paydate { text-align: right; }
  .prv-h { margin: 4px 0 0; font-size: .92rem; color: var(--muted); }
  .prv-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .prv-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: .93rem; }
  .prv-lines li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .prv-lines li.prv-sum { border-bottom: 0; font-weight: 700; }
  .prv-net {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px;
    background: var(--ok); color: #fff;
  }
  .prv-net strong { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .prv-extra { font-size: .88rem; }

  /* ---------- เมนู: สลิปของฉัน (แถบข้างสีเข้ม) ---------- */
  .who-slip { display: inline-flex; align-items: center; gap: 6px; color: #D8CCC2; text-decoration: none; font-size: .86rem; }
  .who-slip:hover, .who-slip.active { color: #fff; text-decoration: underline; }
}

/* ---------- จอคอม: ตารางเลื่อนในกรอบ ---------- */
@media screen and (min-width: 1025px) {
  .prl-fit .fit-body > .prl-pane { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .prl-pane > .fit-scroll { flex: 1 1 auto; min-height: 0; }
}

/* ---------- มือถือ 390px ---------- */
@media screen and (max-width: 760px) {
  .prl-hide-m { display: none; }
  .prl-tools { flex-wrap: wrap; }
  .prl-tools .btn { flex: 1 1 auto; justify-content: center; }
  .prl-tabs { width: 100%; }
  .prl-tabs button { flex: 1 0 auto; justify-content: center; padding: 0 10px; }
  .prl-tabs button svg { display: none; }
  .prl-grid2 { grid-template-columns: minmax(0, 1fr); }
  .prl-emp-tools { width: 100%; justify-content: stretch; }
  .prl-search { flex: 1 1 100%; width: auto; }
  .prl-emp-tools .prl-add { flex: 1 1 auto; justify-content: center; }
  .prl-itemrows li, .prl-le { grid-template-columns: 22px minmax(0, 1fr) 96px 34px; }
  .prl-brow { grid-template-columns: minmax(0, 1fr) 96px 34px; }
  .prl-savebar .btn { flex: 1 1 auto; }
  .prl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prv-net strong, .prl-bigamt strong { font-size: 1.3rem; }
}

/* =====================================================================
   พิมพ์สลิป: html[data-print="prs-a4"] → A4 แนวตั้ง 2 ใบ/หน้า · "prs-a5" → A5 แนวตั้ง 1 ใบ/หน้า (ขาวดำ ไม่ขึ้นกับธีม)
   ===================================================================== */
.prs-print { display: none; }

@page prsa4 { size: A4 portrait; margin: 8mm 10mm; }
@page prsa5 { size: A5 portrait; margin: 7mm; }
@media print {
  html[data-print="prs-a4"]:has(.prs-print), html[data-print="prs-a4"]:has(.prs-print) body { page: prsa4; }
  html[data-print="prs-a5"]:has(.prs-print), html[data-print="prs-a5"]:has(.prs-print) body { page: prsa5; }
  html[data-print^="prs-"]:has(.prs-print), html[data-print^="prs-"]:has(.prs-print) body {
    margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important;
    background: #fff !important; color: #000 !important;
  }
  html[data-print^="prs-"]:has(.prs-print) body *:not(:has(.prs-print)):not(.prs-print):not(.prs-print *) { display: none !important; }
  html[data-print^="prs-"]:has(.prs-print) body *:has(.prs-print) {
    display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
    width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
    background: none !important; box-shadow: none !important; transform: none !important;
  }
  html[data-print^="prs-"] .prs-print, html[data-print^="prs-"] .prs-print * { visibility: visible !important; }
  html[data-print^="prs-"] .prs-print { display: block !important; }
}

/* โครงสลิป (ใช้ตอนพิมพ์) — A4: ครึ่งหน้า 134mm × 190mm · A5: เต็มหน้า 196mm × 134mm */
.prs-print { color: #000; background: #fff; font-size: 8.6pt; line-height: 1.3; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.prs-sheet { display: flex; flex-direction: column; break-after: page; page-break-after: always; }
.prs-sheet:last-child { break-after: auto; page-break-after: auto; }
.prs-doc {
  box-sizing: border-box; height: 134mm; overflow: hidden; padding: 2mm 1mm;
  display: flex; flex-direction: column; gap: 2mm; break-inside: avoid; page-break-inside: avoid;
}
.prs-a5 .prs-doc { height: 194mm; gap: 3mm; font-size: 8.8pt; }
.prs-sheet-long .prs-doc { height: auto; overflow: visible; break-inside: auto; page-break-inside: auto; }
.prs-cut { height: 0; margin: 2mm 0; border-top: 1px dashed #777; position: relative; }
.prs-cut::after { content: "✂"; position: absolute; left: -1mm; top: -2.4mm; font-size: 9pt; line-height: 1; background: #fff; color: #555; }

.prs-head { display: flex; align-items: flex-start; gap: 3mm; padding-bottom: 2mm; border-bottom: 1.6px solid #000; }
.prs-logo { width: 14mm; height: 14mm; object-fit: contain; flex: none; }
.prs-org { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3mm; }
.prs-orgname { font-size: 11.5pt; font-weight: 700; }
.prs-pre { white-space: pre-line; font-size: 8pt; margin: 0; }
.prs-titlebox { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .4mm; text-align: right; }
.prs-title {
  margin: 0 0 .6mm; padding: 1mm 3mm; border: 1.4px solid #000; border-radius: 1.5mm;
  font-size: 11pt; font-weight: 800; letter-spacing: .02em;
}
.prs-draft { padding: .3mm 2mm; border: 1px dashed #000; border-radius: 1mm; font-weight: 700; font-size: 7.6pt; }

.prs-emp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1mm 4mm; padding: 1.6mm 2mm; border: 1px solid #000; border-radius: 1.5mm; }
.prs-a5 .prs-emp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prs-emp > div { display: flex; flex-direction: column; min-width: 0; }
.prs-emp span { font-size: 7.2pt; color: #333; }
.prs-emp b { font-weight: 700; overflow-wrap: anywhere; }

.prs-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3mm; align-items: start; flex: 1 1 auto; min-height: 0; }
.prs-t { width: 100%; border-collapse: collapse; }
.prs-t th, .prs-t td { padding: .9mm 1.4mm; border-bottom: .6px solid #999; text-align: left; vertical-align: top; }
.prs-t th { border-bottom: 1.2px solid #000; font-weight: 700; background: #eee; }
.prs-t tfoot td { border-top: 1.2px solid #000; border-bottom: 0; font-weight: 800; }
.prs-t .r, .prs-ytd .r { text-align: right; white-space: nowrap; }
.prs-muted { color: #666; }

.prs-netrow { display: flex; align-items: stretch; gap: 3mm; }
.prs-info { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: .5mm; font-size: 7.6pt; color: #222; }
.prs-net {
  flex: none; min-width: 55mm; display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  padding: 1.6mm 3mm; border: 1.8px solid #000; border-radius: 1.5mm; background: #f1f1f1;
}
.prs-net span { font-size: 8pt; font-weight: 700; }
.prs-net strong { font-size: 14pt; font-weight: 800; }
.prs-a5 .prs-net { min-width: 50mm; }

.prs-ytd { width: 100%; border-collapse: collapse; font-size: 7.6pt; }
.prs-ytd th, .prs-ytd td { padding: .6mm 1.4mm; border: .6px solid #999; text-align: left; }
.prs-ytd th { font-weight: 700; background: #f5f5f5; }

.prs-foot { display: flex; flex-direction: column; gap: 1.6mm; margin-top: auto; }
.prs-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10mm; padding-top: 5mm; }
.prs-signs > div { display: flex; flex-direction: column; align-items: center; gap: 1mm; font-size: 7.8pt; }
.prs-line { display: block; width: 100%; border-bottom: .8px dotted #000; height: 0; }
.prs-print .num { font-variant-numeric: tabular-nums; }