/* =====================================================================
   ระบบบริหารทรัพย์สินและพัสดุ — Stylesheet
   แนวคิดดีไซน์: โทนขาว-แดง ทันสมัย สะอาดตา
   - ขาว/เทาอ่อน = พื้นหลังหลัก ให้ความรู้สึกโล่ง สบายตา
   - แดง (Ruby Red) = สีแบรนด์ จุดเน้นการกระทำสำคัญ
   - ลาย "scan-tick" = อ้างอิงบาร์โค้ด/QR ที่ระบบต้องรองรับ
   ===================================================================== */

:root {
  --brand-900: #5c0f1a;
  --brand-800: #7a1420;
  --brand-700: #9c1b29;
  --brand-600: #c81e33;
  --brand-500: #e0263c;
  --brand-100: #fbe4e8;
  --brand-50:  #fdf1f3;
  --paper: #f7f6f6;
  --paper-card: #ffffff;
  --ink-900: #221c1d;
  --ink-600: #635a5b;
  --ink-400: #9a9092;
  --line: #ece6e7;
  --danger: #b3432b;
  --danger-bg: #fbe9e4;
  --success: #1e8a55;
  --success-bg: #e5f5ec;
  --info: #2f6690;
  --info-bg: #e7f0f7;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(34, 28, 29, 0.05), 0 6px 18px rgba(34, 28, 29, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: 'Noto Sans Thai', 'Sarabun', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: 'Bai Jamjuree', 'Noto Sans Thai', sans-serif;
  color: var(--ink-900);
  margin: 0 0 .4em 0;
  font-weight: 600;
}

a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }

.scan-strip {
  height: 4px;
  background-image: repeating-linear-gradient(
    90deg, var(--brand-600) 0 2px, transparent 2px 5px,
    var(--ink-900) 5px 6px, transparent 6px 10px
  );
  opacity: .9;
}

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: #ffffff;
  border-right: 1px solid var(--line);
  color: var(--ink-900);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  transition: transform .2s ease;
  z-index: 40;
}

.sidebar-brand { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.brand-logo-wrap { display: flex; justify-content: center; margin-bottom: 8px; }
.brand-logo-main {
  width: 100%; max-width: 150px; height: auto; display: block; aspect-ratio: 370 / 212;
  -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none;
  user-select: none; pointer-events: none;
}
.sidebar-brand .subtitle { font-size: 11px; color: var(--brand-600); font-weight: 700; margin-top: 2px; }
.brand-company {
  font-size: 10.5px; color: var(--ink-400); line-height: 1.45;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
}

.nav-group { padding: 10px 10px; overflow-y: auto; }
.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-400); padding: 14px 10px 6px; }

.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--ink-600); font-size: 14.5px; margin-bottom: 2px;
}
.nav-link:hover { background: var(--brand-50); text-decoration: none; color: var(--brand-700); }
.nav-link.active { background: var(--brand-600); color: #fff; font-weight: 700; }
.nav-icon { width: 18px; text-align: center; flex-shrink: 0; }

.sidebar-footer { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 13px; }
.sidebar-footer .user-name { color: var(--ink-900); font-weight: 600; }
.sidebar-footer .user-role { color: var(--brand-600); font-size: 12px; font-weight: 600; }
.sidebar-footer form { margin-top: 8px; }
.logout-btn {
  background: transparent; border: 1px solid var(--line); color: var(--ink-600);
  padding: 6px 10px; border-radius: 6px; font-size: 12.5px; cursor: pointer; width: 100%;
}
.logout-btn:hover { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }

.main { margin-left: 240px; flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--paper-card); border-bottom: 1px solid var(--line);
  padding: 12px 22px; display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 30;
}
.menu-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--brand-700); }
.topbar h1 { font-size: 18px; margin: 0; flex: 1; }

.content { padding: 22px; flex: 1; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi-card {
  background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); border-top: 3px solid var(--brand-600);
}
.kpi-card .kpi-value { font-family: 'Bai Jamjuree', sans-serif; font-size: 28px; font-weight: 700; color: var(--ink-900); }
.kpi-card .kpi-label { font-size: 13px; color: var(--ink-600); margin-top: 2px; }
.kpi-card .kpi-accent { display:inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-600); margin-right: 6px; }

.card { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; }
.card-header { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-header h2 { font-size: 16px; margin: 0; }
.card-body { padding: 18px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent;
  padding: 9px 16px; border-radius: 8px; font-size: 14px; font-family: inherit;
  font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--ink-900); color: #fff; }
.btn-primary:hover { background: #3a3132; }
.btn-gold { background: var(--brand-600); color: #fff; }
.btn-gold:hover { background: var(--brand-700); }
.btn-outline { background: transparent; border-color: var(--line); color: var(--ink-900); }
.btn-outline:hover { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #93331f; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-900); margin-bottom: 5px; }
.required::after { content: " *"; color: var(--danger); }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 14.5px; background: #fff; color: var(--ink-900);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--brand-500); outline-offset: 1px; border-color: var(--brand-500);
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 18px; }
.form-group { margin-bottom: 4px; }
.form-hint { font-size: 12px; color: var(--ink-400); margin-top: 4px; }
.form-actions { display: flex; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }

.dept-code-preview {
  display: inline-block; font-family: 'Bai Jamjuree', monospace; font-size: 20px; font-weight: 700;
  background: var(--brand-100); color: var(--brand-800); padding: 6px 14px; border-radius: 8px; letter-spacing: .04em;
}

.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
table.data-table th {
  text-align: left; background: var(--paper); color: var(--ink-900);
  padding: 10px 12px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 2px solid var(--line); white-space: nowrap;
}
table.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data-table td.col-qty, table.data-table th.col-qty { text-align: right; }
table.data-table tbody tr:hover { background: var(--brand-50); }
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-green { background: var(--success-bg); color: var(--success); }
.badge-red { background: var(--danger-bg); color: var(--danger); }
.badge-gold { background: var(--brand-100); color: var(--brand-800); }
.badge-info { background: var(--info-bg); color: var(--info); }
.row-actions { display: flex; gap: 8px; white-space: nowrap; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--ink-400); }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; }
.alert-success { background: var(--success-bg); color: var(--success); border-color: #bfe0c6; }
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: #eec3b7; }
.alert-info { background: var(--info-bg); color: var(--info); border-color: #c3dced; }

.login-shell {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(circle at 20% 15%, var(--brand-600) 0%, var(--brand-800) 38%, var(--brand-900) 100%);
  padding: 20px;
}
.dev-credit {
  color: rgba(255,255,255,.65); font-size: 11.5px; text-align: center; max-width: 380px; width: 100%;
}
.login-card { width: 100%; max-width: 380px; background: var(--paper-card); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(92, 15, 26, .35); }
.login-card .login-head { padding: 30px 28px 18px; text-align: center; }
.login-logo-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
.login-logo-main {
  width: 100%; max-width: 190px; height: auto; display: block; aspect-ratio: 370 / 212;
  -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none;
  user-select: none; pointer-events: none;
}
.login-company-name { font-size: 12.5px; font-weight: 600; color: var(--ink-600); line-height: 1.55; padding: 0 6px; }
.login-divider { width: 36px; height: 3px; background: var(--brand-600); border-radius: 2px; margin: 16px auto; }
.login-title { font-size: 21px; margin: 0; color: var(--ink-900); }
.login-subtitle { font-size: 11.5px; color: var(--brand-600); font-weight: 600; margin-top: 4px; }
.login-card .login-body { padding: 6px 28px 28px; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 6px; }

.pagination { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line); font-size: 13px; color: var(--ink-900); }
.pagination a:hover { background: var(--brand-50); text-decoration: none; }
.pagination .current { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--brand-500); outline-offset: 2px;
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); box-shadow: 8px 0 24px rgba(0,0,0,.08); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .menu-toggle { display: inline-block; }
}
@media (max-width: 560px) {
  .content { padding: 14px; }
  .card-body { padding: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  table.data-table { font-size: 13px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===== หน้าต่างสแกนด้วยกล้อง (QR Code / บาร์โค้ด) ===== */
#camera-scanner-modal {
  display: none; position: fixed; inset: 0; background: rgba(20,10,10,.78);
  z-index: 200; align-items: center; justify-content: center; padding: 20px;
}
#camera-scanner-modal.open { display: flex; }
.camera-scanner-box {
  background: #fff; border-radius: 14px; padding: 18px; max-width: 380px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.camera-scanner-box h3 { margin: 0 0 12px; font-size: 15px; color: var(--ink-900); }
#camera-scanner-view {
  width: 100%; min-height: 260px; border-radius: 10px; overflow: hidden; background: #14100f;
}
#camera-scanner-view video { width: 100% !important; border-radius: 10px; }
#camera-scanner-status { font-size: 12.5px; color: var(--ink-600); margin-top: 10px; min-height: 18px; text-align: center; }
.camera-scanner-close-btn { margin-top: 12px; width: 100%; justify-content: center; }
.scan-field-row { display: flex; gap: 6px; align-items: stretch; }
.scan-field-row input { flex: 1; min-width: 0; }
.camera-scan-btn {
  flex-shrink: 0; font-size: 17px; padding: 0 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* ===== โหมดพิมพ์รายงาน: ซ่อนเมนู/แถบค้นหา/ปุ่ม เหลือแค่เนื้อหารายงาน ===== */
.print-signature { display: none; }
.signature-row { display: none; }
.print-repeat-header { display: none; }
.group-total-row { display: none; }

/* แถวหัวข้อคั่นกลุ่มตามผู้รับผิดชอบ (ทั้งบนจอปกติและตอนพิมพ์) */
table.data-table .emp-group-header td {
  background: var(--brand-50);
  font-weight: 700;
  border-top: 2px solid var(--brand-600);
  border-bottom: 1px solid var(--brand-100);
}

@media print {
  /* ตอนพิมพ์ ซ่อนแถวคั่นกลุ่ม "แผนก/ผู้รับผิดชอบ" แบบบนจอไปเลย เพราะข้อมูลเดียวกันถูกย้ายไปแสดง
     เหนือหัวคอลัมน์ (ในแถว .print-repeat-group ของแต่ละตารางย่อย) อยู่แล้ว ไม่ต้องการให้ซ้ำกัน 2 ที่ */
  table.data-table .emp-group-header {
    display: none !important;
  }
  /* ขึ้นหน้ากระดาษใหม่ทุกครั้งที่เปลี่ยนกลุ่ม (แผนก+ผู้รับผิดชอบ) - แต่ละกลุ่มคือคนละ <table>
     ยกเว้นตารางแรกสุดของรายงาน (ไม่มี class นี้) ไม่งั้นจะเกิดหน้าว่างนำหน้า */
  table.data-table.group-break {
    page-break-before: always;
    break-before: page;
  }
}
@media print {
  .sidebar, .topbar, .scan-strip, .no-print, .menu-toggle { display: none !important; }
  .main { margin-left: 0 !important; }
  .content { padding: 0 !important; }
  body { background: #fff !important; }
  .card { box-shadow: none !important; border: none !important; }
  .print-area .card-body { padding: 0 !important; }

  /* กลับไปใช้กระดาษแนวตั้ง (Portrait) แบบเดียวกับรายงานเก่า
     เคล็ดลับให้อัดข้อมูลได้เยอะในแนวตั้ง: "ไม่ตัดข้อความขึ้นบรรทัดใหม่เลย" ให้ตัดจบด้วย "..." แทน (truncate)
     ทำให้ทุกแถวสูงแค่บรรทัดเดียวเสมอไม่ว่าข้อความจะยาวแค่ไหน (เหมือนรายงานระบบเก่าที่เขียนด้วย Clipper) */
  @page { size: A4 portrait; margin: 10mm 8mm; }

  /* เปลี่ยนจาก width:100% (ยืดตารางให้เต็มหน้ากระดาษเสมอ ทำให้คอลัมน์สั้นๆ ถูกดึงกว้างเกินจำเป็น)
     เป็นกำหนดความกว้างแต่ละคอลัมน์เป็น "มิลลิเมตร" ตรงๆ แทน แม่นยำกว่ามากสำหรับกระดาษ A4 ที่ขนาดคงที่
     ตารางจะกว้างเท่าผลรวมของทุกคอลัมน์เท่านั้น ไม่ถูกดึงยืดเกินความจำเป็น คอลัมน์สั้นๆ จะแคบสมตัวจริงๆ */
  /* ฟอนต์ขยับขึ้นจาก 6px เป็น 9px ได้ เพราะตัดคอลัมน์ "ประเภท" ออกแล้ว เหลือพื้นที่ให้ตัวหนังสือใหญ่ขึ้นอีกนิด */
  table.data-table { font-size: 9px; line-height: 1.35; table-layout: fixed; width: 100%; min-width: 0; border-collapse: collapse; }
  table.data-table th, table.data-table td {
    padding: 2px 3px !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    overflow-wrap: normal !important; word-break: normal !important; /* ยกเลิกการตัดขึ้นบรรทัดใหม่จากที่อื่น (ถ้ามี) เพื่อให้ "..." ทำงานได้จริง */
    box-sizing: border-box !important; /* ทำให้ padding ถูกนับรวมอยู่ "ใน" ความกว้างที่กำหนด แทนที่จะถูกบวกเพิ่มออกไปนอกเหนือ */
    border: none !important; /* พิมพ์ด้วยปริ้นเตอร์หัวเข็ม: เอาเส้นทุกเส้นออก เหลือแค่ตัวหนังสือล้วนๆ ไม่มีตาราง/เส้นคั่นเลย */
  }
  /* หัวคอลัมน์ (ลำดับ/รหัสพัสดุ/ชื่อรายการ/รหัส KT/รหัส KT BKK/สถานที่ใช้งาน) เดิมมีกฎ font-size: 12.5px ทั่วไป
     (ไม่ใช่กฎในโหมดพิมพ์) มาทับอยู่ก่อน ทำให้ตัวใหญ่กว่าแถวข้อมูลด้านล่าง ต้องบังคับด้วย !important ให้เท่ากับแถวข้อมูล (9px) */
  table.data-table th { background: transparent !important; font-weight: normal !important; font-size: 9px !important; }

  /* กำหนดความกว้างคอลัมน์เป็นมิลลิเมตรตรงๆ ทีละคอลัมน์ (แม่นยำกว่า % มาก เพราะกระดาษ A4 ขนาดคงที่แน่นอน)
     คำนวณจากความยาวตัวอักษรจริงของแต่ละประเภทข้อมูล (ดูค่า max-length คู่กันได้ที่ reports/asset_report.php ตัวแปร $maxCharsByClass)
     ตัดคอลัมน์ "ประเภท" ออกแล้ว เลยเอาพื้นที่ที่ว่างลงมาเพิ่มให้ "ชื่อรายการ" แทน (คอลัมน์ที่ต้องการพื้นที่มากที่สุด) */
  table.data-table .col-seq       { width: 10mm;  }  /* ลำดับ: 1-4 หลัก */
  table.data-table .col-stockcode { width: 27mm; }  /* รหัสพัสดุ: 12 หลัก */
  table.data-table .col-itemname  { width: 44mm; }  /* ชื่อรายการ: คอลัมน์ที่ต้องการพื้นที่มากที่สุด */
  table.data-table .col-ktcode    { width: 24mm; }  /* รหัส KT: KT+ตัวเลข ~11 หลัก */
  table.data-table .col-ktbkk     { width: 30mm; }
  table.data-table .col-bdate     { width: 16mm; }  /* วันที่ยืม: วว/ดด/ปป */
  table.data-table .col-bdoc      { width: 14mm; }  /* เลขที่ใบยืม: 5 หลัก */  /* รหัส KT BKK: ~17-18 ตัวอักษร */
  table.data-table .col-qty       { width: 12mm; }  /* จำนวน: ตัวเลขล้วนสั้นๆ ชิดขวาให้อ่านง่าย (แทนที่ตำแหน่ง รหัส KT BKK ตอนดูรายงานครุภัณฑ์) */
  table.data-table .col-docno     { width: 18mm; }  /* มูลค่า: สั้นมาก */
  table.data-table .col-remark    { width: auto; }  /* สถานที่ใช้งาน: ไม่กำหนดความกว้างตายตัว ให้กินพื้นที่ที่เหลือทั้งหมดจนเต็มขอบขวาของกระดาษ */
  /* รายงานยืม-คืน */
  table.data-table .col-date      { width: 17mm; }
  table.data-table .col-status    { width: 21mm; }
  table.data-table .col-person    { width: 32mm; }
  table.data-table .col-dept      { width: 42mm; }
  table.data-table.loan-report .col-itemname { width: 48mm; }
  table.data-table.loan-report .col-ktbkk    { width: 30mm; }
  table.data-table.loan-report.loan-kropun .col-itemname { width: 66mm; }
  table.data-table.loan-report .col-status   { width: 19mm; }
  table.data-table.loan-report td.col-remark { white-space: normal !important; text-overflow: clip !important; }
  table.data-table.loan-report .col-docno    { width: 16mm; }
  /* รายงานครุภัณฑ์ไม่มีคอลัมน์ "รหัส KT BKK" (20mm) แล้ว เอาพื้นที่ที่ว่างมาเพิ่มให้ "ชื่อรายการ" แทน ให้ตารางดูสมส่วน/เต็มพอดีเหมือนเดิม */
  table.data-table.kropun-report .col-itemname { width: 62mm; }


  /* หัวกระดาษ (ชื่อบริษัท+รายละเอียดรายงาน+แผนก/ผู้รับผิดชอบของกลุ่มนี้) ที่ซ้ำทุกหน้าอัตโนมัติ เพราะอยู่ใน <thead> ของตาราง */
  .print-repeat-header { display: table-row; }
  .print-repeat-header th {
    background: transparent !important; text-align: center; padding: 3px 0 4px 0 !important;
    border: none !important;
  }
  /* ตามที่ขอ: ขนาดฟอนต์เท่ากันหมดทั้งหน้าพิมพ์ (เท่ากับตัวหนังสือในตาราง 9px) และไม่มีตัวหนา/ตัวบางเลยสักที่
     เพื่อประหยัดหมึก/โทนเนอร์ตอนพิมพ์ - เดิมหัวกระดาษ/ชื่อกลุ่ม/ยอดรวมจะใหญ่กว่าและเป็นตัวหนา ตอนนี้ปรับให้เท่ากันหมด */
  .print-repeat-company { font-size: 9px; font-weight: normal !important; color: #000; }
  .print-repeat-meta { font-size: 9px; color: #444; margin-top: 1px; }
  .print-repeat-group { font-size: 9px; font-weight: normal !important; color: #000; margin-top: 2px; }

  .print-signature {
    display: flex; gap: 8mm; margin-top: 20px; font-size: 9px; color: #333;
  }
  .print-signature > div { flex: 1 1 0; display: flex; align-items: baseline; white-space: nowrap; }
  .print-signature > div > i { flex: 1; border-bottom: 1px dotted #333; margin-left: 2px; }
  .signature-row { display: table-row; }
  .signature-row td { border: none !important; padding-top: 6px !important; }

  /* สรุปยอดรวม "เฉพาะกลุ่มนี้" (แผนก+ผู้รับผิดชอบ) - ไม่ใช่ยอดรวมทั้งรายงาน เพราะแต่ละกลุ่มแยกหน้ากันแล้ว
     แต่ละหน้าควรเห็นแค่จำนวนของกลุ่มตัวเองเท่านั้น ไม่ใช่ยอดรวมทั้งหมดที่ไม่เกี่ยวกับคนในหน้านั้น */
  .group-total-row { display: table-row; }
  .group-total-row td {
    text-align: right; font-weight: normal !important; border: none !important; padding-top: 5px !important;
  }
}

/* รายงานยืม-คืน มุมมองตามทรัพย์สิน: แถวหัวคั่นแต่ละชิ้น (แสดงทั้งจอและตอนพิมพ์) */
table.data-table tr.asset-sub-row td { font-weight: 700; background: #f1f1f1; }
@media print { table.data-table tr.asset-sub-row td { font-weight: 700 !important; background: #f1f1f1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }