/* ============================================================
   template.css — หน้าตามาตรฐานของทุกเว็บในบ้าน sirirak
   เจ้าของเลือกแบบนี้เมื่อ 12 ส.ค. 2569: พื้นขาว · น้ำเงิน · กระชับ
   ฟอนต์ IBM Plex Sans Thai (โหลดจาก Google Fonts ในแต่ละหน้า)
   ห้ามคิดสไตล์ใหม่เอง — ก๊อปไฟล์นี้ไปทั้งไฟล์ แล้วเขียน CSS
   เฉพาะของโปรเจกต์ต่อท้ายหรือแยกไฟล์ตัวเอง
   ============================================================ */
:root {
  /* สี — โทนน้ำเงินบนพื้นขาว (โหมดสว่างอย่างเดียว ไม่มีโหมดมืด) */
  --brand:#2563eb; --brand-dark:#1e40af; --brand-soft:#eff6ff; --brand-line:#bfdbfe;
  --ink:#1f2937; --ink-soft:#64748b; --ink-faint:#94a3b8;
  --line:#e5e9ef; --bg:#ffffff; --tint:#f3f5f8; --card:#ffffff; --field:#ffffff;
  --ok:#16a34a; --ok-soft:#f0fdf4; --warn:#d97706; --warn-soft:#fffbeb;
  --danger:#dc2626; --danger-soft:#fef2f2;
  /* ระยะห่าง — คูณ 4 เสมอ */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s8:48px;
  --r:10px; --r-lg:16px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --font:'IBM Plex Sans Thai','Sarabun','Leelawadee UI',system-ui,sans-serif;
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:14px; line-height:1.5;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4 { margin:0; line-height:1.3; text-wrap:balance; }
p { margin:0; }
button { font-family:inherit; font-size:inherit; cursor:pointer; }
input,select { font-family:inherit; font-size:14px; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ---------- ปุ่ม ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:36px; padding:0 var(--s4); border-radius:8px;
  border:1px solid transparent; font-weight:600; font-size:14px;
  transition:background .15s, border-color .15s;
  text-decoration:none;
}
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-dark); }
.btn-secondary { background:var(--card); color:var(--ink); border-color:var(--line); }
.btn-secondary:hover { border-color:var(--ink-faint); background:var(--tint); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-ghost { background:transparent; color:var(--brand); }
.btn-ghost:hover { background:var(--brand-soft); }
.btn-sm { min-height:30px; padding:0 var(--s3); font-size:13px; border-radius:6px; }
.btn:active { transform:translateY(1px); }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

/* ---------- ฟอร์ม ---------- */
.field { display:flex; flex-direction:column; gap:var(--s1); }
.field label { font-weight:600; font-size:13px; color:var(--ink); }
.field .hint { font-size:12px; color:var(--ink-soft); }
.input, .select {
  min-height:36px; padding:0 var(--s3);
  border:1px solid var(--line); border-radius:8px;
  background:var(--field); color:var(--ink); width:100%;
}
.input:focus, .select:focus { border-color:var(--brand); outline:2px solid var(--brand); outline-offset:0; }
.field.invalid .input { border-color:var(--danger); }
.field .error-text { font-size:12px; color:var(--danger); }

/* ---------- การ์ด ---------- */
.card {
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.card-head {
  padding:var(--s2) var(--s4); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; min-height:40px;
}
.card-head h3 { font-size:14px; }
.card-head .spacer { margin-left:auto; }
.card-body { padding:var(--s3) var(--s4); }

/* ---------- ป้ายสถานะ ---------- */
.pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:1px var(--s2); border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap;
}
.pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill-ok { color:var(--ok); background:var(--ok-soft); }
.pill-warn { color:var(--warn); background:var(--warn-soft); }
.pill-danger { color:var(--danger); background:var(--danger-soft); }
.pill-neutral { color:var(--ink-soft); background:var(--tint); }

/* ---------- ข้อความแจ้งผล (flash) ---------- */
.flash {
  display:flex; gap:var(--s3); align-items:flex-start;
  padding:var(--s2) var(--s3); border-radius:8px;
  border:1px solid; font-size:13px;
}
.flash-ok { color:var(--ok); background:var(--ok-soft); border-color:var(--ok); }
.flash-warn { color:var(--warn); background:var(--warn-soft); border-color:var(--warn); }
.flash-danger { color:var(--danger); background:var(--danger-soft); border-color:var(--danger); }
.flash b { font-weight:700; }

/* ---------- หน้า login ---------- */
.login-wrap {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s6) var(--s4);
}
.login-card {
  width:100%; max-width:360px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  overflow:hidden;
}
.login-brand { background:var(--brand); color:#fff; padding:var(--s5); }
.login-brand .org { font-size:12px; opacity:.85; letter-spacing:.06em; text-transform:uppercase; }
.login-brand h2 { font-size:18px; margin-top:2px; }
.login-form { padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.login-foot {
  padding:var(--s2) var(--s4) var(--s4);
  font-size:12px; color:var(--ink-soft); text-align:center;
}

/* ---------- โครงหน้าแอป: แถบบน + เนื้อหา ---------- */
.app-top { background:var(--card); border-bottom:1px solid var(--line); }
.app-top-inner {
  max-width:1100px; margin:0 auto; padding:var(--s2) var(--s4);
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
}
.app-logo { display:flex; align-items:center; gap:var(--s2); font-weight:700; font-size:14px; }
.app-logo .mark {
  width:26px; height:26px; border-radius:6px; background:var(--brand);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.app-nav { display:flex; gap:var(--s1); flex-wrap:wrap; }
.app-nav a {
  text-decoration:none; color:var(--ink-soft); font-weight:600; font-size:13px;
  padding:var(--s1) var(--s3); border-radius:6px; min-height:30px;
  display:inline-flex; align-items:center;
}
.app-nav a:hover { background:var(--tint); color:var(--ink); }
.app-nav a.current { background:var(--brand-soft); color:var(--brand); }
.user-chip {
  margin-left:auto; display:flex; align-items:center; gap:var(--s2);
  font-size:13px; color:var(--ink-soft);
}
.user-chip .avatar {
  width:26px; height:26px; border-radius:50%; font-size:12px;
  background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-weight:700;
  border:1px solid var(--brand-line);
}
.page {
  max-width:1100px; margin:0 auto; padding:var(--s3) var(--s4) var(--s6);
  display:flex; flex-direction:column; gap:var(--s3);
}
.page-head { display:flex; align-items:flex-end; gap:var(--s3); flex-wrap:wrap; }
.page-head h2 { font-size:17px; }
.page-head .sub { color:var(--ink-soft); font-size:12px; }
.page-head .actions { margin-left:auto; display:flex; gap:var(--s2); }

/* ---------- แถว KPI ---------- */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); }
@media (max-width:900px) { .kpi-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .kpi-grid { grid-template-columns:1fr; } }
.kpi {
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow); padding:var(--s2) var(--s3);
  display:flex; flex-direction:column; gap:1px;
}
.kpi .k-label { font-size:11px; font-weight:600; color:var(--ink-soft); letter-spacing:.02em; }
.kpi .k-value { font-size:19px; font-weight:700; line-height:1.2; }
.kpi .k-value small { font-size:12px; font-weight:600; color:var(--ink-soft); }
.kpi .k-delta { font-size:11px; font-weight:600; display:flex; align-items:center; gap:var(--s2); }
.kpi .k-delta.up { color:var(--ok); } .kpi .k-delta.down { color:var(--danger); }
.kpi svg { margin-top:2px; width:100%; height:22px; }

/* ---------- กราฟ (SVG เขียนเอง ไม่ใช้ไลบรารี) ---------- */
.chart-grid { display:grid; grid-template-columns:3fr 2fr; gap:var(--s2); }
@media (max-width:900px) { .chart-grid { grid-template-columns:1fr; } }
.bar-chart { display:flex; flex-direction:column; gap:var(--s2); }
.bar-chart svg { width:100%; height:160px; }
.chart-note { font-size:12px; color:var(--ink-soft); }
.legend { display:flex; gap:var(--s4); font-size:12px; color:var(--ink-soft); flex-wrap:wrap; }
.legend span { display:inline-flex; align-items:center; gap:5px; }
.legend i { width:10px; height:10px; border-radius:3px; background:var(--brand); display:inline-block; }

/* ---------- รายการแจ้งเตือน (แถบสีตามความรุนแรง) ---------- */
.alert-list { display:flex; flex-direction:column; }
.alert-item {
  display:flex; gap:var(--s3); padding:var(--s2) 0;
  border-bottom:1px solid var(--line); align-items:flex-start;
}
.alert-item:last-child { border-bottom:0; }
.alert-item .when { font-size:11px; color:var(--ink-faint); white-space:nowrap; }
.alert-item .what { font-size:13px; }
.alert-item .what small { display:block; color:var(--ink-soft); font-size:11px; }
.stripe { width:4px; border-radius:2px; align-self:stretch; flex-shrink:0; }
.stripe.ok { background:var(--ok); } .stripe.warn { background:var(--warn); } .stripe.danger { background:var(--danger); }

/* ---------- ตารางข้อมูล (กางแถวดูรายละเอียดได้) ---------- */
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
table.data th {
  text-align:left; font-size:11px; font-weight:700; color:var(--ink-soft);
  padding:var(--s1) var(--s3); border-bottom:2px solid var(--line);
  white-space:nowrap; letter-spacing:.02em;
}
table.data th.num, table.data td.num { text-align:right; }
table.data th button {
  border:0; background:none; font:inherit; color:inherit; padding:0;
  display:inline-flex; align-items:center; gap:4px;
}
table.data th button::after { content:'↕'; font-size:11px; color:var(--ink-faint); }
table.data th.sorted button::after { content:'↓'; color:var(--brand); }
table.data td { padding:6px var(--s3); border-bottom:1px solid var(--line); vertical-align:top; }
table.data tbody tr.row-main:hover { background:var(--tint); }
table.data td .sub { display:block; font-size:11px; color:var(--ink-soft); }
table.data tfoot td { font-weight:700; border-bottom:0; border-top:2px solid var(--line); }
.row-toggle {
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  width:24px; height:24px; border-radius:6px; font-size:12px; line-height:1;
}
.row-toggle[aria-expanded="true"] { background:var(--brand-soft); color:var(--brand); border-color:var(--brand-line); }
tr.row-detail > td { background:var(--tint); padding:var(--s3) var(--s4); }
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s3); }
.detail-grid dl { margin:0; display:flex; flex-direction:column; gap:var(--s1); }
.detail-grid dt { font-size:11px; font-weight:700; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase; }
.detail-grid dd { margin:0; font-size:13px; }
.mini-table { width:100%; border-collapse:collapse; font-size:12px; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.mini-table th { text-align:left; font-size:11px; color:var(--ink-soft); padding:var(--s1) var(--s2); border-bottom:1px solid var(--line); background:var(--tint); }
.mini-table td { padding:var(--s1) var(--s2); border-bottom:1px solid var(--line); }
.mini-table tr:last-child td { border-bottom:0; }
.mini-table .num { text-align:right; }

/* ---------- แถบกรอง ---------- */
.filter-bar {
  display:flex; gap:var(--s3); flex-wrap:wrap; align-items:flex-end;
  padding:var(--s3) var(--s4);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.filter-bar .field { min-width:160px; flex:1; }
.filter-bar .field.grow { flex:2; min-width:220px; }
.filter-bar .btn { flex-shrink:0; }

/* ---------- แบ่งหน้า ---------- */
.paging {
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  padding:var(--s2) var(--s4); border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-soft);
}
.paging .pages { margin-left:auto; display:flex; gap:var(--s1); }
.paging button {
  min-width:28px; min-height:28px; border-radius:6px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-weight:600; font-size:12px;
}
.paging button[aria-current="page"] { background:var(--brand); border-color:var(--brand); color:#fff; }
.paging button:disabled { opacity:.4; }

/* ---------- 4 สถานะที่ทุกหน้าต้องมี ---------- */
.state-box {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s2); padding:var(--s4); text-align:center;
  color:var(--ink-soft); min-height:130px;
}
.state-box .big { font-size:26px; line-height:1; }
.state-box b { color:var(--ink); font-size:14px; }
.state-box p { font-size:12px; max-width:36ch; }
.spinner {
  width:22px; height:22px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.states-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s3); }

/* ---------- ฟอร์มสองคอลัมน์ ---------- */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
@media (max-width:640px) { .form-grid { grid-template-columns:1fr; } }
.form-grid .full { grid-column:1 / -1; }