/* BPS License Generator — โทนสีตามแบรนด์ BPS (ทอง/ดำ/ครีม) บน Bootstrap 5 */

:root {
  /* โทนหลัก: ดำ/เทาเข้ม เป็นสีปุ่ม/ลิงก์หลักบนพื้นสว่าง (คอนทราสต์ดีกว่าทองบนพื้นขาว) */
  --bps-primary: #1c1b18;
  --bps-primary-hover: #000000;
  --bps-primary-contrast: #ffffff;

  /* โทนทอง: ใช้เป็นสี accent/ไฮไลต์ (โค้ด, active menu, focus ring, โลโก้) */
  --bps-gold: #a1740a;
  --bps-gold-rgb: 161, 116, 10;
  --bps-gold-bright: #f0b429;

  --bs-primary: var(--bps-primary);
  --bs-primary-rgb: 28, 27, 24;
  --bs-link-color: var(--bps-gold);
  --bs-link-hover-color: var(--bps-primary-hover);
  --bs-link-color-rgb: var(--bps-gold-rgb);
  --bs-focus-ring-color: rgba(var(--bps-gold-rgb), .35);

  /* พื้นหลังหน้าเว็บกับพื้นหลังการ์ด ตั้งใจให้ต่างสีกัน — ปกติ Bootstrap ผูก --bs-card-bg ไว้กับ --bs-body-bg ค่าเดียวกัน
     (เลยดูกลืนเป็นสีเดียวกันไปหมด) ที่นี่แยกให้การ์ดขาวแท้ลอยเด่นจากพื้นหลังเบจเข้มขึ้นของหน้า */
  --bs-body-bg: #e9e0c9;
  --bs-body-bg-rgb: 233, 224, 201;
  --bs-card-bg: #ffffff;
  --bs-tertiary-bg: #ded2ae;
}
[data-bs-theme="dark"] {
  /* โหมดมืด: สลับให้ทองเป็นสีหลัก (ทองบนดำ = คู่สีของโลโก้พอดี) */
  --bps-primary: var(--bps-gold-bright);
  --bps-primary-hover: #ffce5c;
  --bps-primary-contrast: #171509;
  --bps-gold: var(--bps-gold-bright);
  --bps-gold-rgb: 240, 180, 41;

  --bs-primary: var(--bps-primary);
  --bs-primary-rgb: 240, 180, 41;
  --bs-link-color: var(--bps-gold);
  --bs-link-hover-color: var(--bps-primary-hover);
  --bs-link-color-rgb: var(--bps-gold-rgb);
  --bs-focus-ring-color: rgba(var(--bps-gold-rgb), .35);

  --bs-body-bg: #0e0d0a;
  --bs-body-bg-rgb: 14, 13, 10;
  --bs-card-bg: #1d1a13;
  --bs-tertiary-bg: #262117;
}

body {
  min-height: 100vh;
  font-family: 'Sarabun', 'Segoe UI', Tahoma, sans-serif;
}

/* .card ของ Bootstrap ประกาศ --bs-card-bg: var(--bs-body-bg) ไว้ในตัวเอง (component-scoped)
   ทำให้ override ที่ :root เฉยๆ ไม่มีผล ต้องทับตรงที่ .card เองถึงจะกันสีไม่ให้กลืนกับพื้นหลัง */
.card {
  --bs-card-bg: #ffffff;
  border-color: rgba(0, 0, 0, .12);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08) !important;
}
[data-bs-theme="dark"] .card {
  --bs-card-bg: #1d1a13;
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45) !important;
}

/* ปุ่มหลัก — กำหนดสีตัวอักษร/พื้นหลังตรงๆ กันปัญหาคอนทราสต์ (ไม่พึ่ง auto-contrast ของ Bootstrap ที่ compile ไว้ล่วงหน้า) */
.btn-primary {
  --bs-btn-bg: var(--bps-primary);
  --bs-btn-border-color: var(--bps-primary);
  --bs-btn-color: var(--bps-primary-contrast);
  --bs-btn-hover-bg: var(--bps-primary-hover);
  --bs-btn-hover-border-color: var(--bps-primary-hover);
  --bs-btn-hover-color: var(--bps-primary-contrast);
  --bs-btn-active-bg: var(--bps-primary-hover);
  --bs-btn-active-border-color: var(--bps-primary-hover);
  --bs-btn-active-color: var(--bps-primary-contrast);
  --bs-btn-disabled-bg: var(--bps-primary);
  --bs-btn-disabled-border-color: var(--bps-primary);
}

/* Navbar เป็น "แถบแบรนด์" สีเข้มถาวร ไม่ผูกกับ light/dark toggle ของหน้าเนื้อหา
   (data-bs-theme="dark" ที่ตั้งตรงนี้ทำให้ปุ่ม/dropdown ของ Bootstrap ในแถบนี้ปรับสีให้เข้ากับพื้นเข้มอัตโนมัติ) */
.navbar-brand-bar {
  background: linear-gradient(180deg, #221f16 0%, #121109 100%);
  border-bottom: 3px solid var(--bps-gold-bright);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.navbar-brand-bar .navbar-brand .fw-bold { color: #fdfaf3; }

.navbar-brand-bar .nav-link {
  color: rgba(255, 255, 255, .72);
  font-weight: 500;
  border-radius: .5rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  transition: background-color .15s ease, color .15s ease;
}
.navbar-brand-bar .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

/* เมนูที่กำลังเลือกอยู่ — พื้นหลังทองตัน + ตัวหนังสือดำเข้ม เห็นชัดกว่าเดิมมาก */
.navbar-brand-bar .nav-link.active {
  color: #1a1608 !important;
  background: var(--bps-gold-bright);
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(240, 180, 41, .45);
}
.navbar-brand-bar .nav-link.active:hover {
  background: var(--bps-gold-bright);
}

.navbar-brand-bar .navbar-toggler {
  border-color: rgba(255, 255, 255, .35);
}
.navbar-brand-bar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(240, 180, 41, .35);
}

.brand-logo {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}
.brand-logo-lg {
  height: 100px;
  width: auto;
}

.section-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bs-secondary-color);
}

.code-display {
  font-family: 'Consolas', 'Courier New', monospace;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--bps-gold) !important;
}

.hist-code {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: .82rem;
  color: var(--bps-gold);
}

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card { width: 100%; max-width: 400px; }

.table-responsive { border-radius: .5rem; }