/* =========================================================================
   TGMS_PMRS — Global theme overrides (วางทับ AdminLTE 3)
   แก้ลุคทั้งระบบได้จากไฟล์เดียวนี้ — ปรับค่าที่ :root ด้านล่าง
   ต้องโหลด "หลัง" adminlte.min.css จึงจะ override ได้ (ดู layout.html)
   ========================================================================= */
:root {
  /* ▸ ฟอนต์หลัก — เปลี่ยนได้ที่นี่ที่เดียว
     ทางเลือกอื่น: 'Sarabun', 'IBM Plex Sans Thai', 'Anuphan' */
  --app-font: 'Noto Sans Thai', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* ▸ สีหลักของแบรนด์ */
  --app-primary: #2563eb;
  --app-primary-dark: #1e4fd1;

  /* ▸ รูปลักษณ์ (มุมโค้ง / เงา / เส้นขอบ) */
  --app-radius: .65rem;
  --app-radius-sm: .45rem;
  --app-shadow: 0 6px 18px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --app-shadow-hover: 0 12px 26px rgba(16, 24, 40, .12);
  --app-border: #e6e8ec;
}

/* ---------- Typography ---------- */
html, body,
.wrapper, .content-wrapper,
.nav, .btn, .form-control, .custom-select,
.dropdown-menu, table, .small-box, .info-box, .card, .modal {
  font-family: var(--app-font);
}
body { letter-spacing: .1px; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
/* ภาษาไทยอ่านง่ายขึ้นด้วยระยะบรรทัดที่สูงขึ้นเล็กน้อย */
body, p, td, th, li, .timeline-body { line-height: 1.6; }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}
.card-header { border-bottom: 1px solid var(--app-border); }

/* ---------- Small box (สถิติบน dashboard) ---------- */
.small-box {
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.small-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--app-shadow-hover);
}

/* ---------- Buttons ---------- */
.btn { border-radius: var(--app-radius-sm); font-weight: 500; }
.btn-primary {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--app-primary-dark);
  border-color: var(--app-primary-dark);
}

/* ---------- Links & primary accents ---------- */
a { color: var(--app-primary); }
a:hover { color: var(--app-primary-dark); }
.bg-primary { background-color: var(--app-primary) !important; }
.text-primary { color: var(--app-primary) !important; }

/* ---------- Forms ---------- */
.form-control, .custom-select {
  border-radius: var(--app-radius-sm);
  border-color: var(--app-border);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15);
}

/* ---------- Tables ---------- */
.table thead th {
  background: #f6f8fb;
  border-bottom: 2px solid var(--app-border);
  font-weight: 600;
}
.table td, .table th { vertical-align: middle; }
.table-hover tbody tr:hover { background-color: #f3f7ff; }

/* ---------- Badges ---------- */
.badge { border-radius: 999px; padding: .35em .7em; font-weight: 500; }