* { font-family: 'Sarabun', sans-serif; }

body {
  background: #f4f6f9;
}

.app-navbar {
  background: linear-gradient(90deg, #7a1f2b 0%, #a12a38 100%);
}

.app-navbar .nav-link.active {
  font-weight: 600;
  color: #fff !important;
  border-bottom: 2px solid #fff;
}

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7a1f2b 0%, #2b3a67 100%);
}

.login-card {
  max-width: 420px;
  width: 100%;
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.stat-card {
  border-radius: 14px;
  color: #fff;
  padding: 1.25rem 1.5rem;
}
.stat-card .stat-num { font-size: 2rem; font-weight: 700; }
.bg-maroon { background: linear-gradient(135deg,#7a1f2b,#a12a38); }
.bg-navy { background: linear-gradient(135deg,#2b3a67,#3d5296); }
.bg-teal { background: linear-gradient(135deg,#0f766e,#14b8a6); }
.bg-amber { background: linear-gradient(135deg,#b45309,#d97706); }

.badge-pending { background:#ffe8cc; color:#b45309; }
.badge-passed { background:#d1fae5; color:#047857; }
.badge-withdrawn { background:#fee2e2; color:#b91c1c; }

.table thead th { background:#f8f5f1; white-space:nowrap; }

/* ===================== มือถือ / แท็บเล็ต ===================== */
@media (max-width: 767.98px) {
  .app-content { padding-left: .75rem !important; padding-right: .75rem !important; }

  /* หัวเรื่องเล็กลงเล็กน้อยให้พอดีจอ */
  h5 { font-size: 1.1rem; }
  h6 { font-size: .95rem; }

  /* ปุ่มบนมือถือให้แตะง่ายขึ้น (ขนาดแตะขั้นต่ำ ~40px) และไม่บีบตัวจนอ่านยาก */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; padding-top: .35rem; padding-bottom: .35rem; }

  /* แถวปุ่มจัดการในตาราง มักแน่นเกินไปบนจอเล็ก ให้ห่อบรรทัดและเว้นระยะ */
  td.text-end .btn,
  td.text-end .btn-sm { margin-bottom: 4px; }

  /* การ์ดสถิติแดชบอร์ด ลดขนาดตัวเลขให้พอดีจอเล็ก */
  .stat-card { padding: 1rem 1.1rem; }
  .stat-card .stat-num { font-size: 1.5rem; }

  /* ฟอร์มค้นหา/กรอง ที่วางแนวนอน ให้เต็มความกว้างและเว้นระยะแนวตั้งแทน */
  .d-flex.gap-2 > .form-control,
  .d-flex.gap-2 > .form-select { min-width: 0; }

  /* Modal ให้ใช้พื้นที่กว้างขึ้นบนจอเล็ก แต่ยังมีขอบไม่ชิดเกินไป */
  .modal-dialog { margin: .75rem; }
  .modal-xl, .modal-lg { max-width: calc(100% - 1.5rem); }

  /* นำทางบนมือถือ: ให้ badge บทบาทและชื่อผู้ใช้ไม่ล้นบรรทัด */
  .app-navbar .navbar-nav .nav-link { padding-top: .6rem; padding-bottom: .6rem; }

  /* ตารางที่มีคอลัมน์เยอะ (รายงาน/ตั้งค่าระบบ) ให้เลื่อนแนวนอนได้ลื่นและเห็นชัดว่าเลื่อนได้ */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    border: 1px solid #eee;
    border-radius: 8px;
  }

  /* การ์ดในหน้า login/homepage ให้ขอบไม่ชิดจอเกินไป */
  .home-wrapper, .login-wrapper { padding: 1rem .75rem; }
}

@media (max-width: 575.98px) {
  /* จอมือถือแคบมาก: ลดขนาดตัวเลขในการ์ดสถิติต่ออีก และซ่อนไอคอนบางจุดที่ไม่จำเป็น */
  .stat-card .stat-num { font-size: 1.3rem; }
  .card-body { padding: 1rem; }
}

/* ป้องกันปัญหาการเลื่อนแนวนอนของทั้งหน้าเว็บจากองค์ประกอบที่กว้างเกิน viewport */
html, body { max-width: 100%; overflow-x: hidden; }
.table-responsive { max-width: 100%; }

@media print {
  .no-print { display:none !important; }
  .app-navbar, footer { display:none !important; }
  body { background:#fff; }
}

/* เมนูบน: ไม่ให้ข้อความขึ้นบรรทัดใหม่ซ้อนกัน — จอกว้างพอแสดงแถวเดียว จอแคบ (<1400px) ใช้เมนูพับ */
.app-navbar .nav-link, .app-navbar .navbar-brand { white-space: nowrap; }
@media (min-width: 1400px) {
  .app-navbar .navbar-nav .nav-link { padding-left: .45rem; padding-right: .45rem; font-size: .88rem; }
  .app-navbar .navbar-brand { font-size: 1.05rem; margin-right: .6rem; }
  .app-navbar .navbar-nav .nav-link .bi { margin-right: .2rem !important; }
}
@media (min-width: 1400px) and (max-width: 1799.98px) {
  /* จอกลาง: ซ่อนไอคอนในเมนูเพื่อให้พอดีแถวเดียว */
  .app-navbar .navbar-nav .nav-link .bi { display: none; }
}
@media (min-width: 1800px) {
  .app-navbar .navbar-nav .nav-link { padding-left: .6rem; padding-right: .6rem; font-size: .95rem; }
}