/* ============================================================
   ระบบบันทึกการเข้าใช้งานห้องสมุด — surintechdigital.net
   สร้าง 2026-08-15

   หน้าสแกนถูกออกแบบให้ "อ่านง่ายจากระยะไกล" เพราะเจ้าหน้าที่
   มองจอจากอีกฝั่งของเคาน์เตอร์ ตัวอักษรผลลัพธ์จึงใหญ่เป็นพิเศษ
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Sarabun", "Prompt", "Segoe UI", Tahoma, sans-serif;
  background: #f1f5f9;
  color: #1e293b;
  font-size: 15px;
}

/* ---------- แถบหัว ---------- */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  background: #1e40af; color: #fff;
  padding: 12px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.app-header-left  { display: flex; align-items: center; gap: 10px; }
.app-logo   { font-size: 1.5rem; }
.app-title  { font-size: 1.15rem; font-weight: 600; }
.app-header-right { display: flex; align-items: center; gap: 14px; font-size: .9rem; }
.hdr-link { color: #dbeafe; text-decoration: none; padding: 4px 10px;
            border: 1px solid rgba(255,255,255,.35); border-radius: 5px; }
.hdr-link:hover { background: rgba(255,255,255,.15); color: #fff; }
.hdr-user { color: #bfdbfe; }

.page-body { max-width: 1000px; margin: 0 auto; padding: 20px 16px 40px; }

/* ---------- ช่องรับรหัสจากเครื่องอ่าน ---------- */
.scan-box {
  background: #fff; border: 2px solid #1e40af; border-radius: 12px;
  padding: 20px; margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(30,64,175,.12);
}
.scan-label { display: block; font-size: .92rem; color: #475569; margin-bottom: 8px; }
.scan-input {
  width: 100%; padding: 16px 18px;
  font-size: 1.7rem; font-family: monospace; letter-spacing: 1px;
  border: 2px solid #cbd5e1; border-radius: 8px; outline: none;
}
.scan-input:focus { border-color: #2563eb; background: #f8fafc; }
.scan-hint { margin-top: 8px; font-size: .85rem; color: #64748b; }

/* ---------- ผลการสแกน ---------- */
.scan-result {
  display: flex; align-items: center; gap: 16px;
  border-radius: 12px; padding: 18px 20px; margin-bottom: 16px;
  border: 2px solid;
}
.scan-result.ok  { background: #f0fdf4; border-color: #86efac; }
.scan-result.dup { background: #fffbeb; border-color: #fcd34d; }
.scan-result.bad { background: #fef2f2; border-color: #fca5a5; }
.sr-icon {
  flex: 0 0 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; font-weight: 700; color: #fff;
}
.scan-result.ok  .sr-icon { background: #16a34a; }
.scan-result.dup .sr-icon { background: #d97706; }
.scan-result.bad .sr-icon { background: #dc2626; }
.sr-name { font-size: 1.45rem; font-weight: 700; line-height: 1.3; }
.sr-meta { font-size: .95rem; color: #475569; margin-top: 2px; }
.sr-note { font-size: .88rem; color: #64748b; margin-top: 4px; }

/* ---------- สรุปยอด ---------- */
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.stat-card {
  flex: 1; min-width: 150px; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 14px; text-align: center;
}
.stat-num { font-size: 2rem; font-weight: 700; color: #1e40af; line-height: 1.2; }
.stat-lbl { font-size: .82rem; color: #64748b; margin-top: 2px; }

/* ---------- แผง / ตาราง ---------- */
.panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.panel-head { background: #f8fafc; border-bottom: 1px solid #e2e8f0;
              padding: 10px 14px; font-weight: 600; font-size: .95rem; }

.tbl { width: 100%; border-collapse: collapse; background: #fff; }
.tbl th, .tbl td { border: 1px solid #e2e8f0; padding: 7px 10px; font-size: .9rem; }
.tbl thead th { background: #dbeafe; font-weight: 600; text-align: center; }
.tbl td.c { text-align: center; }
.tbl td.r { text-align: right; }
.tbl tbody tr:nth-child(even) td { background: #f8fafc; }
.tbl tfoot td { background: #eff6ff; font-weight: 600; }

.empty { padding: 34px 20px; text-align: center; color: #64748b; }

.bar { height: 12px; background: #60a5fa; border-radius: 3px; min-width: 2px; }

/* ---------- ตัวกรองรายงาน ---------- */
.filter-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
              padding: 14px; margin-bottom: 16px; }
.f-row  { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.f-item { display: flex; flex-direction: column; gap: 4px; }
.f-item label { font-size: .8rem; color: #64748b; }
.f-item input, .f-item select {
  padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 6px;
  font-family: inherit; font-size: .9rem; min-width: 155px;
}
.f-btn { flex-direction: row; gap: 8px; }

.btn {
  padding: 8px 18px; border: 1px solid #cbd5e1; background: #fff;
  border-radius: 6px; cursor: pointer; font-family: inherit; font-size: .9rem;
}
.btn:hover { background: #f1f5f9; }
.btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.btn-primary:hover { background: #1d4ed8; }
.btn-full { width: 100%; }
.btn-lg { padding: 12px; font-size: 1rem; }

.sum-bar { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
           padding: 10px 14px; margin-bottom: 12px; font-size: .92rem; }

/* ---------- หัวรายงานสำหรับพิมพ์ ---------- */
.print-head { display: none; }

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.login-page { background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: #fff; border-radius: 14px; padding: 32px 28px;
              width: 100%; max-width: 380px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.login-logo  { font-size: 2.8rem; text-align: center; }
.login-title { font-size: 1.35rem; text-align: center; margin: 6px 0 2px; }
.login-sub   { font-size: .88rem; color: #64748b; text-align: center; margin: 0 0 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .85rem; color: #475569; margin-bottom: 5px; }
.field input { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1;
                border-radius: 7px; font-family: inherit; font-size: .95rem; }
.field input:focus { outline: none; border-color: #2563eb; }
.alert { padding: 10px 14px; border-radius: 7px; font-size: .88rem; margin-bottom: 14px; }
.alert-danger { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }

/* ---------- ตอนสั่งพิมพ์ ---------- */
@media print {
  @page { size: A4 portrait; margin: 1.2cm 1.4cm; }

  body { background: #fff; font-size: 11pt; }
  .no-print, .app-header, .filter-box { display: none !important; }
  .page-body { max-width: none; padding: 0; margin: 0; }

  .print-head { display: block; text-align: center; margin-bottom: 10pt;
                border-bottom: 1.5pt solid #000; padding-bottom: 5pt; }
  .ph-title { font-size: 15pt; font-weight: 700; }
  .ph-sub   { font-size: 10pt; margin-top: 3pt; }

  .sum-bar { border: 0.75pt solid #999; background: #f4f4f4 !important;
             -webkit-print-color-adjust: exact; print-color-adjust: exact;
             font-size: 10pt; padding: 5pt 8pt; }

  .tbl th, .tbl td { border: 0.75pt solid #666 !important; font-size: 9.5pt; padding: 3pt 5pt; }
  .tbl thead th { background: #e4e4e4 !important;
                  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tbl tbody tr:nth-child(even) td { background: #fff !important; }
  thead { display: table-header-group; }   /* หัวตารางซ้ำทุกหน้า */
  tr    { page-break-inside: avoid; }

  .bar { background: #888 !important;
         -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- จอเล็ก ---------- */
@media (max-width: 640px) {
  .scan-input { font-size: 1.3rem; }
  .sr-name    { font-size: 1.2rem; }
  .stat-card  { min-width: 120px; }
  .f-item input, .f-item select { min-width: 130px; }
}

/* ============================================================
   หน้าสรุปผู้บริหาร (dashboard.php) — เพิ่ม 2026-08-15
   ใช้กราฟแท่งจาก CSS ล้วน ไม่พึ่งไลบรารีภายนอก
   เหตุผล: canvas ของ Chart.js มักพิมพ์ออกกระดาษไม่ติด
   แต่ CSS พิมพ์ได้ตรงตามที่เห็นบนจอ
   ============================================================ */

.stat-diff { font-size: .78rem; margin-top: 4px; color: #64748b; }
.stat-diff.up   { color: #16a34a; font-weight: 600; }
.stat-diff.down { color: #dc2626; font-weight: 600; }

.chart-wrap {
  display: flex; align-items: flex-end; gap: 3px;
  height: 190px; padding: 14px 14px 6px; overflow-x: auto;
}
.chart-col {
  flex: 1; min-width: 20px; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.chart-val { font-size: .68rem; color: #64748b; margin-bottom: 2px; }
.chart-bar {
  width: 100%; background: #3b82f6; border-radius: 3px 3px 0 0; min-height: 2px;
}
.chart-bar.hour { background: #8b5cf6; }
.chart-lbl { font-size: .68rem; color: #94a3b8; margin-top: 3px; }
.chart-note { padding: 0 14px 12px; font-size: .78rem; color: #94a3b8; }

.two-col { display: flex; gap: 14px; flex-wrap: wrap; }
.two-col > .panel { flex: 1; min-width: 300px; }

.panel { margin-bottom: 14px; }

.sign-row {
  display: flex; justify-content: space-between; gap: 30px;
  margin-top: 26px; font-size: .92rem; line-height: 2.1;
}
.sign-row > div { flex: 1; text-align: center; }

@media print {
  .chart-wrap  { height: 130px; overflow: visible; page-break-inside: avoid; }
  .chart-bar   { background: #666 !important;
                 -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .chart-bar.hour { background: #999 !important; }
  .panel       { page-break-inside: avoid; border: 0.75pt solid #999 !important; }
  .panel-head  { background: #eee !important;
                 -webkit-print-color-adjust: exact; print-color-adjust: exact;
                 font-size: 10pt; padding: 3pt 6pt; }
  .stat-row    { page-break-inside: avoid; }
  .stat-card   { border: 0.75pt solid #999 !important; }
  .stat-num    { font-size: 1.4rem; }
  .two-col     { display: block; }
  .two-col > .panel { margin-bottom: 8pt; }
  .sign-row    { page-break-inside: avoid; margin-top: 20pt; }
}

/* ---------- ชื่อสถานศึกษาบนแถบหัวและหัวกระดาษ ---------- */
.app-school {
  display: block; font-size: .78rem; font-weight: 400;
  color: #bfdbfe; margin-top: 1px; letter-spacing: .2px;
}
.ph-school { display: none; }

@media print {
  /* ในกระดาษ ชื่อสถานศึกษาต้องเด่นกว่าชื่อรายงาน เพราะเป็นเอกสารราชการ */
  .ph-school { display: block; font-size: 13pt; font-weight: 700; margin-bottom: 2pt; }
  .ph-title  { font-size: 13pt; font-weight: 600; }
}