/* ============================================================================
   ธีมสีองค์กร — บริษัท เคพีดี ออดิท แอนด์ แอคเคาน์ติ้ง จำกัด
   ไฟล์นี้ทับค่าสีของ Bootstrap ให้เป็นโทน "เขียว + เหลืองอ่อน + ฟ้าอ่อน"
   ต้องโหลดหลัง bootstrap.min.css และก่อน site.css / app.css
   ใช้ร่วมกันทุกหน้า: เว็บไซต์สาธารณะ ระบบหลังบ้าน และหน้าเข้าสู่ระบบ
   ========================================================================== */

:root{
  /* --- เขียว (สีหลัก) --- */
  --kpd-green-900:#0c3b1e;
  --kpd-green-800:#145c30;
  --kpd-green-600:#1a8040;   /* ตัวอักษรขาวบนสีนี้ได้คอนทราสต์ 4.99 */
  --kpd-green:#2DB84B;
  --kpd-green-300:#86d99b;
  --kpd-green-50:#eefaf1;

  /* --- เหลือง (สีรอง) --- */
  --kpd-yellow:#FFE100;
  --kpd-yellow-300:#f2e07a;
  --kpd-yellow-100:#fdf6c9;
  --kpd-yellow-50:#fffdf0;

  /* --- ไล่ระดับน้ำเงิน → ฟ้าอ่อน (สีหลักของเว็บไซต์ อ้างอิงคลื่นน้ำในโลโก้) --- */
  --kpd-navy-950:#0a2440;    /* น้ำเงินเข้มสุด — พื้นหลังและส่วนท้าย */
  --kpd-navy-900:#0e2d4f;
  --kpd-navy-850:#123f6d;
  --kpd-navy-800:#1c5fa8;    /* น้ำเงิน — สีหลัก ตัวอักษรขาวได้ 6.46 */
  --kpd-navy-700:#17708f;    /* ฟ้า */
  --kpd-navy-600:#1f7bb8;
  --kpd-navy-50:#dde8f5; --kpd-navy-100:#dbeafd;
  --kpd-navy-200:#ddeffb; --kpd-navy-300:#e4f4fd;

  --kpd-blue-700:#2b6a8b;    /* ตัวอักษรฟ้าบนพื้นสว่าง */
  --kpd-blue-600:#2b8ec4;    /* ไอคอน/กราฟิก */
  --kpd-blue-500:#4FB3E8;    /* ฟ้าอ่อนจากโลโก้ */
  --kpd-blue-300:#a9dcf5;
  --kpd-blue-100:#e7f4fc;
  --kpd-blue-ink:#06334a;    /* ตัวอักษรบนพื้นฟ้าอ่อน */

  --kpd-orange:#F5A623;

  /* --- ตัวแปรของ Bootstrap --- */
  --bs-blue:#4FB3E8;
  --bs-primary:#1c5fa8; --bs-primary-rgb:28,95,168;
  --bs-primary-text-emphasis:#0e2d4f;
  --bs-primary-bg-subtle:#eaf2fc; --bs-primary-border-subtle:#a8c8ee;

  --bs-info:#4FB3E8; --bs-info-rgb:79,179,232;
  --bs-info-text-emphasis:#2b6a8b;
  --bs-info-bg-subtle:#e7f4fc; --bs-info-border-subtle:#a9dcf5;

  --bs-link-color:#1c5fa8; --bs-link-color-rgb:28,95,168;
  --bs-link-hover-color:#123f6d; --bs-link-hover-color-rgb:18,63,109;

  /* เทากลางของ Bootstrap เดิมอมน้ำเงิน ปรับเป็นเทาอมเขียว
     โดยคุมค่าคอนทราสต์ให้เท่าเดิม (4.68 เทียบกับ 4.69) */
  --kpd-gray:#657586; --kpd-gray-dark:#4b5766; --kpd-gray-text:#5a6675;
  --bs-secondary:#657586; --bs-secondary-rgb:101,117,134;

  --bs-focus-ring-color:rgba(79,179,232,.3);
  --bs-highlight-bg:var(--kpd-yellow-100);
}

/* สีพื้นฐานของ Bootstrap เดิมเป็นเทาอมน้ำเงิน (#212529, #6c757d, #dee2e6)
   ปรับเป็นเทาอมเขียวให้เข้ากับธีม โดยไม่แตะโหมดมืดซึ่ง Bootstrap กำหนดค่าเอง */
:root:not([data-bs-theme="dark"]){
  --bs-body-color:#12202e; --bs-body-color-rgb:18,32,46;
  --bs-secondary-color:rgba(18,32,46,.72);
  --bs-tertiary-color:rgba(18,32,46,.5);
  --bs-border-color:#dde5ee; --bs-border-color-translucent:rgba(18,32,46,.14);
  --bs-emphasis-color:#0a1520;
}
.text-muted{ color:var(--kpd-gray-text) !important; }

/* ---------------- ปุ่ม ---------------- */
.btn-primary{
  --bs-btn-bg:var(--kpd-navy-800); --bs-btn-border-color:var(--kpd-navy-800);
  --bs-btn-hover-bg:var(--kpd-navy-850); --bs-btn-hover-border-color:var(--kpd-navy-850);
  --bs-btn-active-bg:var(--kpd-navy-900); --bs-btn-active-border-color:var(--kpd-navy-900);
  --bs-btn-disabled-bg:var(--kpd-blue-300); --bs-btn-disabled-border-color:var(--kpd-blue-300); }
.btn-outline-primary{
  --bs-btn-color:var(--kpd-navy-800); --bs-btn-border-color:var(--kpd-navy-800);
  --bs-btn-hover-bg:var(--kpd-navy-800); --bs-btn-hover-border-color:var(--kpd-navy-800);
  --bs-btn-active-bg:var(--kpd-navy-850); --bs-btn-active-border-color:var(--kpd-navy-850); }
.btn-warning{
  --bs-btn-bg:var(--kpd-yellow); --bs-btn-border-color:var(--kpd-yellow);
  --bs-btn-color:#3d3000; --bs-btn-hover-bg:#f0d400; --bs-btn-hover-border-color:#f0d400;
  --bs-btn-hover-color:#3d3000; --bs-btn-active-bg:#e0c700; }
.btn-info{
  --bs-btn-bg:var(--kpd-blue-500); --bs-btn-border-color:var(--kpd-blue-500);
  --bs-btn-color:var(--kpd-blue-ink); --bs-btn-hover-bg:#37a3dc; --bs-btn-hover-border-color:#37a3dc;
  --bs-btn-hover-color:var(--kpd-blue-ink); --bs-btn-active-bg:var(--kpd-blue-600); }
.btn-outline-info{
  --bs-btn-color:var(--kpd-blue-700); --bs-btn-border-color:var(--kpd-blue-500);
  --bs-btn-hover-bg:var(--kpd-blue-500); --bs-btn-hover-color:var(--kpd-blue-ink); }
.btn-link{ --bs-btn-color:var(--kpd-navy-800); --bs-btn-hover-color:var(--kpd-navy-850); }
.btn-secondary{ --bs-btn-bg:var(--kpd-gray); --bs-btn-border-color:var(--kpd-gray);
  --bs-btn-hover-bg:var(--kpd-gray-dark); --bs-btn-hover-border-color:var(--kpd-gray-dark);
  --bs-btn-active-bg:var(--kpd-gray-dark); --bs-btn-active-border-color:var(--kpd-gray-dark); }
.btn-outline-secondary{ --bs-btn-color:var(--kpd-gray); --bs-btn-border-color:var(--kpd-gray);
  --bs-btn-hover-bg:var(--kpd-gray); --bs-btn-hover-border-color:var(--kpd-gray);
  --bs-btn-active-bg:var(--kpd-gray-dark); --bs-btn-active-border-color:var(--kpd-gray-dark); }
.btn-check:focus + .btn, .btn:focus-visible{ box-shadow:0 0 0 .25rem rgba(79,179,232,.25); }

/* ---------------- ป้ายและพื้นสี ---------------- */
.text-bg-primary{ background-color:var(--kpd-navy-800) !important; color:#fff !important; }
.text-bg-info{ background-color:var(--kpd-blue-500) !important; color:var(--kpd-blue-ink) !important; }
.text-primary{ color:var(--kpd-navy-800) !important; }
.text-info{ color:var(--kpd-blue-700) !important; }
.text-secondary{ color:var(--kpd-gray-text) !important; }
.text-body-secondary{ color:var(--kpd-gray-text) !important; }
.bg-primary{ background-color:var(--kpd-navy-800) !important; }
.bg-info{ background-color:var(--kpd-blue-500) !important; }
.border-primary{ border-color:var(--kpd-navy-800) !important; }
.border-info{ border-color:var(--kpd-blue-500) !important; }
.link-primary{ color:var(--kpd-navy-800) !important; }
.link-primary:hover{ color:var(--kpd-navy-850) !important; }

/* ---------------- กล่องแจ้งเตือน ---------------- */
.alert-primary{ --bs-alert-bg:var(--kpd-navy-300); --bs-alert-border-color:var(--kpd-blue-300);
  --bs-alert-color:var(--kpd-navy-850); }
.alert-info{ --bs-alert-bg:var(--kpd-blue-100); --bs-alert-border-color:var(--kpd-blue-300);
  --bs-alert-color:var(--kpd-blue-700); }
.alert-primary .alert-link{ color:var(--kpd-navy-900); }
.alert-info .alert-link{ color:var(--kpd-blue-ink); }

/* ---------------- ตาราง ---------------- */
.table-primary, .table-info{
  --bs-table-bg:var(--kpd-blue-100); --bs-table-color:inherit;
  --bs-table-border-color:#c7e5f6;
  --bs-table-hover-bg:#dbeefa; --bs-table-hover-color:inherit;
  --bs-table-striped-bg:#dff0fa; --bs-table-striped-color:inherit;
  --bs-table-active-bg:#d3ebf8; --bs-table-active-color:inherit; }
.list-group-item-primary{ color:var(--kpd-navy-850); background-color:var(--kpd-navy-300); }
.list-group-item-info{ color:var(--kpd-blue-700); background-color:var(--kpd-blue-100); }

/* ---------------- ฟอร์ม ---------------- */
.form-control:focus, .form-select:focus{
  border-color:var(--kpd-blue-300); box-shadow:0 0 0 .2rem rgba(79,179,232,.18); }
.form-check-input:checked{
  background-color:var(--kpd-navy-800); border-color:var(--kpd-navy-800); }
.form-check-input:focus{
  border-color:var(--kpd-blue-300); box-shadow:0 0 0 .2rem rgba(79,179,232,.18); }
/* ปุ่มสวิตช์ของ Bootstrap ฝังไอคอนสีน้ำเงินไว้ในไฟล์ จึงต้องเขียนทับเป็นสีเขียว */
.form-switch .form-check-input:focus{
  --bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386d99b'/%3e%3c/svg%3e"); }
.form-range::-webkit-slider-thumb{ background-color:var(--kpd-navy-800); }
.form-range::-moz-range-thumb{ background-color:var(--kpd-navy-800); }
.form-range:focus::-webkit-slider-thumb{ box-shadow:0 0 0 1px #fff, 0 0 0 .25rem rgba(79,179,232,.25); }

/* ---------------- นำทางและหน้าเพจ ---------------- */
.nav-link{ --bs-nav-link-hover-color:var(--kpd-navy-850); }
.nav-tabs .nav-link.active{ color:var(--kpd-navy-850); }
.nav-pills{ --bs-nav-pills-link-active-bg:var(--kpd-navy-800); }
.page-link{ color:var(--kpd-navy-800); }
.page-item.active .page-link{
  background-color:var(--kpd-navy-800); border-color:var(--kpd-navy-800); }
.progress-bar{ background-color:var(--kpd-navy-800); }
.dropdown-menu{ --bs-dropdown-link-active-bg:var(--kpd-navy-800); }
.list-group{ --bs-list-group-active-bg:var(--kpd-navy-800);
  --bs-list-group-active-border-color:var(--kpd-navy-800); }

/* ---------------- แอคคอร์เดียน (ไอคอนลูกศรของ Bootstrap เป็นสีน้ำเงินฝังไว้) ---------------- */
.accordion{
  --bs-accordion-active-color:var(--kpd-navy-850);
  --bs-accordion-active-bg:var(--kpd-navy-300);
  --bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(79,179,232,.22);
  --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23145c30'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }

/* ---------------- โหมดมืด (ระบบหลังบ้าน) ---------------- */
[data-bs-theme="dark"]{
  --bs-link-color:#8ecbf0; --bs-link-color-rgb:142,203,240;
  --bs-link-hover-color:#bfe3f8; --bs-link-hover-color-rgb:191,227,248;
  --bs-primary-text-emphasis:#8ecbf0;
  --bs-info-text-emphasis:#a9dcf5;
}
[data-bs-theme="dark"] .text-primary{ color:#8ecbf0 !important; }
[data-bs-theme="dark"] .text-info{ color:var(--kpd-blue-300) !important; }
[data-bs-theme="dark"] .page-link,
[data-bs-theme="dark"] .btn-link{ color:var(--kpd-blue-300); }
[data-bs-theme="dark"] .nav-tabs .nav-link.active{ color:var(--kpd-blue-300); }
[data-bs-theme="dark"] .btn-outline-primary{
  --bs-btn-color:#8ecbf0; --bs-btn-border-color:#8ecbf0;
  --bs-btn-hover-color:var(--kpd-navy-950); }
[data-bs-theme="dark"] .alert-info{
  --bs-alert-bg:#122f3d; --bs-alert-color:var(--kpd-blue-300); --bs-alert-border-color:#255a76; }
[data-bs-theme="dark"] .table-primary,
[data-bs-theme="dark"] .table-info{
  --bs-table-bg:#123a4d; --bs-table-border-color:#255a76;
  --bs-table-hover-bg:#16465c; --bs-table-striped-bg:#154255; --bs-table-active-bg:#1a4e64; }