/* ==========================================================================
   ชั้นเชื่อม — ทำให้ Bootstrap พูดภาษาเดียวกับ design token ของ YourAccount
   ==========================================================================

   ⚠️ อ่านก่อนแก้ไฟล์นี้

   ลำดับการโหลดสำคัญมาก และเป็นเหตุผลทั้งหมดที่ไฟล์นี้มีอยู่:

       1. bootstrap.min.css        ← ฐาน (ปุ่ม การ์ด กริด ยูทิลิตี้ คอมโพเนนต์)
       2. bootstrap-bridge.css     ← ไฟล์นี้ แปลง token ของเราเป็น --bs-*
       3. app.css                  ← ระบบดีไซน์ของเรา ชนะทุกกรณีที่ชื่อคลาสชนกัน

   ทำไมต้องมีชั้นกลาง แทนที่จะปล่อยให้ Bootstrap ใช้สีของมันเอง:

   Bootstrap 5.3 วาดทุกอย่างผ่านตัวแปร `--bs-*` ของตัวเอง ซึ่งค่าปริยายเป็น
   ชุดสีของ Bootstrap (#0d6efd, #212529, #dee2e6) ที่ **ไม่มีอะไรเกี่ยวกับ
   จานสีของเราเลย** ถ้าไม่ผูก จะได้หน้าจอที่มีสองระบบสีอยู่ด้วยกัน —
   คอมโพเนนต์ของเราสีหนึ่ง คอมโพเนนต์ของ Bootstrap อีกสีหนึ่ง

   และปัญหาจะโผล่หนักที่สุดในโหมดมืด เพราะ Bootstrap จะยังวาดพื้นขาวอยู่
   (เคยเกิดกับ YourHR มาแล้ว — ดู theme.css:215 ของโปรเจกต์นั้น)

   ⚠️ ไฟล์นี้ตั้งค่าได้เฉพาะ "ตัวแปร" เท่านั้น ห้ามเขียนกฎของคอมโพเนนต์
   กฎของคอมโพเนนต์อยู่ที่ app.css ที่เดียว ไม่งั้นจะมีสองที่ตอบคำถามเดียวกัน
   แล้ววันหนึ่งจะไม่ตรงกัน

   ⚠️ ทุกค่าต้องเป็น var(--token) ห้ามใส่ค่าดิบ
   ไฟล์นี้อยู่นอกขอบเขตของเกต qa_design_system (ซึ่งอ่านเฉพาะ app.css)
   ค่าดิบที่หลุดมาที่นี่จึงไม่มีอะไรจับได้ — วินัยต้องมาจากคนเขียน
   ========================================================================== */

:root {
  /* ---- พื้นและตัวอักษร ---- */
  --bs-body-bg:            var(--bg);
  --bs-body-color:         var(--ink);
  --bs-secondary-bg:       var(--surface-2);
  --bs-tertiary-bg:        var(--surface-3);
  --bs-secondary-color:    var(--ink-2);
  --bs-tertiary-color:     var(--muted);
  --bs-emphasis-color:     var(--ink);
  --bs-border-color:       var(--line);

  /* ---- สีหลัก ---- */
  --bs-primary:            var(--brand);
  --bs-primary-rgb:        var(--brand-rgb);
  --bs-link-color:         var(--brand);
  --bs-link-hover-color:   var(--brand-ink);

  /* ---- สีสถานะ — ใช้ชุดเดียวกับที่ระบบเราใช้อยู่แล้ว ---- */
  --bs-success:            var(--ok-500);
  --bs-warning:            var(--warn-500);
  --bs-danger:             var(--danger-500);
  --bs-info:               var(--info-500);

  /* ---- ตัวอักษร: ใช้สเกลเดียวกับทั้งระบบ ----
     ⚠️ ห้ามปล่อยให้ Bootstrap ใช้ 1rem ของมันเอง จะได้ขั้นที่ 9 ที่ไม่มีใครเลือก
     (บทเรียนข้อ 15 ของโปรเจกต์: ค่าปริยายของเบราว์เซอร์ไม่โผล่ในไฟล์ CSS ให้เกตเห็น) */
  --bs-body-font-family:   var(--font-body);
  --bs-body-font-size:     var(--t-body);
  --bs-body-line-height:   1.6;

  /* ---- มุมมน: ผูกกับสี่ขั้นของเรา ไม่ใช่ห้าขั้นของ Bootstrap ---- */
  --bs-border-radius-sm:   var(--r-xs);
  --bs-border-radius:      var(--r-sm);
  --bs-border-radius-lg:   var(--r);
  --bs-border-radius-xl:   var(--r-lg);
  --bs-border-radius-2xl:  var(--r-lg);
  --bs-border-radius-pill: var(--r-pill);

  /* ---- เงา: ใช้ระบบเงาของเรา ---- */
  --bs-box-shadow-sm:      var(--sh-xs);
  --bs-box-shadow:         var(--sh-card);
  --bs-box-shadow-lg:      var(--sh-float);

  /* ---- วงแหวนโฟกัส: ต้องเป็นวงเดียวกับทั้งระบบ ----
     ⚠️ โฟกัสที่หน้าตาต่างกันสองแบบบนหน้าเดียว ทำให้คนกด Tab ไม่รู้ว่าอยู่ตรงไหน */
  /* --ring คือวงแหวนโฟกัสที่ทั้งระบบใช้อยู่ ผูกตรงนั้นเลย */
  --bs-focus-ring-color:   var(--brand-soft);
  --bs-focus-ring-width:   3px;
}

/* ⚠️ โหมดมืดต้องครอบทั้งสามสถานะเหมือนที่ app.css ทำ
   (เลือกมืดชัดเจน · เลือกสว่างชัดเจน · ปล่อยตามเครื่อง)
   ถ้าเขียนแค่ prefers-color-scheme คนที่กดเลือกโหมดเองจะได้พื้นผิดชุด */
:root[data-theme="dark"] {
  --bs-body-bg:         var(--bg);
  --bs-body-color:      var(--ink);
  --bs-secondary-bg:    var(--surface-2);
  --bs-tertiary-bg:     var(--surface-3);
  --bs-secondary-color: var(--ink-2);
  --bs-border-color:    var(--line);
  --bs-emphasis-color:  var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bs-body-bg:         var(--bg);
    --bs-body-color:      var(--ink);
    --bs-secondary-bg:    var(--surface-2);
    --bs-tertiary-bg:     var(--surface-3);
    --bs-secondary-color: var(--ink-2);
    --bs-border-color:    var(--line);
    --bs-emphasis-color:  var(--ink);
  }
}

/* ==========================================================================
   ของ Bootstrap ที่ต้องปิด เพราะเราทำเองอยู่แล้วและทำได้ตรงกว่า
   ========================================================================== */

/* ⚠️ Bootstrap รีเซ็ต box-sizing/margin ของ body ทับของเรา
   ปล่อยไว้จะทำให้ระยะห่างทั้งหน้าขยับ — คืนค่าที่ app.css ตั้งไว้ */
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  background: var(--bg);
  color: var(--ink);
}

/* ⚠️ ไอคอนของ Bootstrap Icons ต้องรับขนาดจากบรรทัดที่มันอยู่
   ไม่งั้นจะได้ 1rem ตายตัวซึ่งไม่ตรงกับสเกลตัวอักษรของเรา */
.bi::before {
  vertical-align: -0.125em;
}