/* bs-bridge.css — แมปธีม ETDA (navy/gold) เข้า Bootstrap 5 CSS variables.
   โหลดหลัง bootstrap.min.css และก่อน base.css/buttons.css เฉพาะใน layout ที่
   ใช้ Bootstrap เป็น foundation (ตอนนี้คือ employee-profile-layout.html เท่านั้น
   — welfare-layout.html ยังใช้ buttons.css มือทำอยู่, ห้ามโหลดไฟล์นี้ในนั้น).

   จุดประสงค์: ทำให้ Bootstrap component ออกมาเป็นสีองค์กรโดยไม่ต้อง override
   ทีละ class. <button class="btn btn-primary"> ของ Bootstrap จะออกมา navy อัตโนมัติ
   เทียบเท่า buttons.css ปัจจุบัน → ใช้ class ของ Bootstrap ได้เลยโดยไม่เสียธีม. */

:root {
    /* ── Design tokens ของระบบ (เคยอยู่ใน base.css) ──
       ย้ายมาที่นี่เพื่อให้ layout ที่ใช้ Bootstrap เป็นหลักไม่ต้องโหลด base.css
       เพื่อแค่ตัวแปรสีพวกนี้. หน้าที่ใช้ var(--navy) ฯลฯ ใน <style> จะยังทำงานได้. */
    --navy: #12326e;
    --navy-dark: #0d2454;
    --gold: #ffd100;
    --bg: #f5f6f8;
    --line: #e5e7eb;
    --ink: #1f2937;
    --muted: #64748b;
    --ok: #047857;
    --warn: #b45309;

    /* สีหลักของระบบ → Bootstrap primary */
    --bs-primary: #12326e;
    --bs-primary-rgb: 18, 50, 110;
    --bs-link-color: #12326e;
    --bs-link-hover-color: #0d2454;

    /* พื้นหลัง / ตัวอักษร / เส้น — ตรงกับ base.css */
    --bs-body-bg: #f5f6f8;
    --bs-body-color: #1f2937;
    --bs-border-color: #e5e7eb;
    --bs-secondary-color: #64748b;

    /* font ตรงกับ base.css (Sarabun) — 0.9375rem (15px) ให้อ่านสบาย.
       เป็นจุดกำหนดเดียว: Bootstrap ทุก component ที่ใช้ var(--bs-body-font-size)
       (body, .table, .form-control, ฯลฯ) จะเปลี่ยนตามทันที. ปรับค่านี้ที่นี่พอ. */
    --bs-font-sans-serif: "Sarabun", "Segoe UI", system-ui, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.9375rem;
}

/* ── ปุ่ม: แมป variant ของ Bootstrap ให้ตรงธีม ETDA ── */
/* primary = navy (เหมือน .btn-primary ใน buttons.css) */
.btn-primary {
    --bs-btn-bg: #12326e;
    --bs-btn-border-color: #12326e;
    --bs-btn-hover-bg: #0d2454;
    --bs-btn-hover-border-color: #0d2454;
    --bs-btn-active-bg: #0d2454;
    --bs-btn-active-border-color: #0d2454;
    --bs-btn-disabled-bg: #12326e;
    --bs-btn-disabled-border-color: #12326e;
}

/* warning = gold (เหมือน .btn-warning ใน buttons.css — พื้น gold, ตัว navy) */
.btn-warning {
    --bs-btn-bg: #ffd100;
    --bs-btn-color: #12326e;
    --bs-btn-border-color: #ffd100;
    --bs-btn-hover-bg: #e0b900;
    --bs-btn-hover-color: #12326e;
    --bs-btn-hover-border-color: #e0b900;
    --bs-btn-active-bg: #e0b900;
    --bs-btn-active-color: #12326e;
    --bs-btn-active-border-color: #e0b900;
}

/* success / danger ใช้ค่า Bootstrap เดิม (ตรงกับ buttons.css อยู่แล้ว) */
.btn-success {
    --bs-btn-bg: #059669;
    --bs-btn-border-color: #059669;
    --bs-btn-hover-bg: #047857;
    --bs-btn-hover-border-color: #047857;
}
.btn-danger {
    --bs-btn-bg: #dc2626;
    --bs-btn-border-color: #dc2626;
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #b91c1c;
}

/* outline-secondary = พื้นเทาอ่อน ตัว navy (เหมือน .btn-outline-secondary ใน buttons.css) */
.btn-outline-secondary {
    --bs-btn-color: #12326e;
    --bs-btn-bg: #eef2f7;
    --bs-btn-border-color: #c7d2e8;
    --bs-btn-hover-bg: #e0e7f3;
    --bs-btn-hover-border-color: #12326e;
    --bs-btn-hover-color: #12326e;
    --bs-btn-active-bg: #e0e7f3;
    --bs-btn-active-border-color: #12326e;
}

/* ── ความสูง/ขนาดปุ่มให้ใกล้เคียง buttons.css เดิม ── */
/* buttons.css ใช้ padding 9px 15px / font 13px; Bootstrap default ใหญ่กว่าเล็กน้อย
   ปรับให้กระชับขึ้นตาม convention เดิม */
.btn {
    --bs-btn-padding-x: 15px;
    --bs-btn-padding-y: 9px;
    --bs-btn-font-size: 13px;
    --bs-btn-border-radius: 7px;
    font-weight: 600;
}
.btn-sm {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 5px;
    --bs-btn-font-size: 12px;
}

/* ── สี heading/ลิงก์ใน content ให้ตรงธีม ── */
.text-primary {
    color: #12326e !important;
}
a {
    color: #12326e;
}

/* ── Navbar (top chrome) — ใช้ Bootstrap navbar component จริงๆ, ไม่มี class
   เขียนเอง. สีพื้นขาวและเส้นล่างใช้ utility bg-body + border-bottom ใน HTML.
   แมปธีมผ่าน --bs-navbar-* ที่ Bootstrap กำหนดให้ override ได้:
   - brand สี navy ตัวหนา, "HRIS" สีทอง
   - gutter 2.5rem = padding 20px each side (ค่าเดิมก่อน migrate) */
.navbar {
    --bs-navbar-color: var(--muted);
    --bs-navbar-brand-color: var(--navy);
    --bs-navbar-brand-hover-color: var(--navy-dark);
    --bs-navbar-brand-font-size: 17px;
}
.navbar > .container-fluid {
    /* gutter ด้านข้างของ navbar = 2.5rem (40px each side). hris-premium.css ใช้ค่าเดียวกัน
       ผ่าน --hris-gutter-x ที่ทั้ง navbar และ main เพื่อให้ content กับ nav ตรงกัน. */
    --bs-gutter-x: 2.5rem;
}
.navbar-brand {
    font-weight: 800;
}
.navbar-brand b {
    color: #d5ad00;
}

/* ── Navbar สี primary (navy) — ใช้เฉพาะ employee-profile-layout (navbar-dark bg-primary).
   บังคับโทนสีให้สว่างบนพื้น navy ตามตัวอย่างมาตรฐาน navbar-dark ของ Bootstrap;
   ชนะ override --bs-navbar-* สำหรับพื้นสว่างข้างบนด้วย specificity เท่ากันแต่โหลดทีหลัง. */
.navbar.bg-primary.navbar-dark {
    --bs-navbar-color: rgba(255, 255, 255, 0.85);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.25);
}
.navbar.bg-primary.navbar-dark .navbar-brand b {
    color: var(--gold);
}

/* ── Avatar ผู้ใช้ใน navbar — วงกลมตัวอักษรย่อ (initials); สี/ความกลมใช้ utility
   (bg-white/text-primary/rounded-circle/d-flex/...), เหลือเฉพาะขนาดที่ Bootstrap
   ไม่มี utility ตายตัวให้. เป็น hook เดียว ไม่ใช่ component ที่เขียนเองทั้งยวง. */
.navbar-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
    flex: 0 0 auto;
}

/* ── Module toggle (segmented pill control ใน navbar) — ใช้ Bootstrap
   .nav.nav-pills.nav-fill จริงๆ. แมปธีมผ่าน --bs-nav-* และ
   --bs-nav-pills-* ที่ Bootstrap มีให้: inactive = muted, active = navy. */
.nav .nav-link {
    --bs-nav-link-color: var(--muted);
    --bs-nav-link-hover-color: var(--navy);
    --bs-nav-link-font-weight: 600;
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--navy);
    --bs-nav-pills-link-active-color: #fff;
}

/* ── Sidebar — ใช้ Bootstrap offcanvas-lg (responsive sidebar ตามตำรา,
   โครงตาม dashboard example ของ Bootstrap): หุ้มด้วย grid column
   (.sidebar.col-lg-3) ใน row; ในนั้นคือ .offcanvas.offcanvas-lg ที่
   ≥lg = static sidebar, <lg = drawer เลื่อนเข้าจากซ้าย (เปิดผ่านปุ่ม ☰
   ใน navbar). bg-primary อยู่ที่ wrapper column (ไม่ต้องสู้กฎ transparent
   !important ของ .offcanvas-lg เพราะใส่ที่ div นอก). ปรับ link ในแนวตั้ง
   ให้อยู่ในธีมผ่าน --bs-nav-* (inactive = ฟ้าจาง, active = ทอง/navy). */
.nav-pills.flex-column .nav-link {
    --bs-nav-link-color: #c5cfde;
    --bs-nav-link-hover-color: #fff;
}
.nav-pills.flex-column .nav-link.active {
    --bs-nav-pills-link-active-bg: var(--gold);
    --bs-nav-pills-link-active-color: var(--navy);
    font-weight: 800;
}

/* ── Tabs: ตอนนี้โหลด Bootstrap JS bundle แล้ว — สลับ .active ผ่าน
   data-bs-toggle="tab". กฎ .tab-pane.active{display:block} เก็บไว้เป็น safety
   net: ถ้า JS bundle โหลดล้มเหลว pane แรกที่มี .active ใน HTML ยังโผล่ได้
   (ผลลัพธ์เหมือนกฎ .tab-content>.active ของ Bootstrap เอง — ไม่ขัด). */
.tab-pane.active {
    display: block;
}

/* ── Pagination: active page = navy ตามธีม (Bootstrap default สีน้ำเงิน) ── */
.pagination {
    --bs-pagination-active-bg: var(--navy);
    --bs-pagination-active-border-color: var(--navy);
    --bs-pagination-active-color: #fff;
}
/* ปุ่ม active หน้าปัจจุบัน — ยกเลิก hover ที่ Bootstrap สั่งให้สีอ่อนลงเมื่อชี้เมาส์
   (จางและไม่ได้ช่วยอะไร เพราะคลิกซ้อนไม่ได้อยู่แล้ว). ให้ hover/focus ใช้สี active เดิมตลอด. */
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
    color: var(--bs-pagination-active-color);
}

/* ── Sortable table headers — pattern ที่ใช้ซ้ำใน employee-profile index.
   แทน inline style="cursor:pointer" และ class .user-select-none ที่ Bootstrap
   ไม่มีอยู่จริง (เคยใส่ไว้แต่เป็น no-op). ใน HTML ใช้แค่ data-sort/data-label. */
th[data-sort] {
    cursor: pointer;
    user-select: none;
}

/* ── Layout chrome — ทุกอย่างใช้ Bootstrap component จริงๆ, ไม่มี class
   เขียนเองเลย. ฝั่ง HTML ใช้ navbar/nav/container/row/col และ utility.
   ดูรายละเอียด override ของ navbar/nav ที่บล็อกด้านบน. */

/* embedded mode — หน้าที่ฝังกลับเป็น iframe ใน hris-shell.html ไม่ต้องการ
   chrome ซ้อน. ซ่อน navbar + sidebar ด้วย d-none (utility ของ Bootstrap) ที่
   เพิ่มผ่าน JS ที่ layout; ส่วนนี่เหลือแค่เปิด container เต็มจอสำหรับเนื้อหา. */
body.embedded .container-lg {
    max-width: none;
    padding-left: 28px;
    padding-right: 28px;
}

/* ── go-top: ปุ่มโผล่ตอน scroll ลง (JS เพิ่ม .show). HTML ใช้ Bootstrap utility
   (btn-primary/rounded-circle/position-fixed/d-flex) สำหรับหน้าตา; ขนาด/ตำแหน่ง/
   visibility ไม่มี utility ตรงๆ ใน Bootstrap จึงเขียนเท่าที่จำเป็น. */
#goTop {
    bottom: 80px;
    right: 24px;
    width: 40px;
    height: 40px;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
#goTop.show {
    opacity: 1;
    pointer-events: auto;
}
#goTop:hover {
    transform: translateY(-2px);
    background: var(--navy-dark);
}

/* ── Responsive: ใช้กลไกของ Bootstrap เอง ไม่มี @media มือที่นี่ —
   navbar ยุบ/กาง ผ่าน navbar-toggler + .collapse.navbar-collapse (breakpoint lg),
   sidebar ซ่อน <lg ผ่าน display utility d-none d-lg-block ใน HTML. */