/* hris-premium.css — ชั้นสไตล์พรีเมียม (Premium Banking) สำหรับโมดูล employee-profile.
   โหลดหลัง bs-bridge.css ใน employee-profile-layout.html เท่านั้น.

   หลักการ:
   - ใช้ token ที่มีอยู่ใน bs-bridge.css (--navy/--gold/--ink/...) ไม่สร้างสีใหม่
   - override ผ่าน Bootstrap CSS variable (--bs-*) ให้มากที่สุด ตามตำรา
   - ส่วนที่ Bootstrap ไม่มี variable ให้ (shadow scale, gradient, hover-lift)
     จึงเขียน selector เท่าที่จำเป็น
   - ไม่ใช้ !important (ยกเว้นกรณีจำเป็นจริงๆ เช่นข้าม utility)
   - เคารพ prefers-reduced-motion

   สิ่งที่ปรับ:
   1. Shadow scale มีมิติ (tinted navy ไม่ใช่ดำทึบ)
   2. Navbar gradient + hairline ทอง + เงาลอย
   3. Card hover-lift, radius ใหญ่ขึ้น
   4. Table borderless + uppercase header + zebra บาก + tabular-nums
   5. Button gradient + shadow-on-hover
   6. Focus ring ทอง (accessibility + พรีเมียม)
   7. Pagination hover-lift + gold focus
   8. Body: font-smoothing + line-height หายใจขึ้น (เหมือน preview)
   9. Navbar search: พื้นโปร่ง + border ขาวจาง + focus ทอง (เหมือน preview)
*/

/* ── Body: font smoothing + line-height หายใจขึ้น เหมือน preview ──
   bs-bridge ตั้ง --bs-body-font-size: 0.9rem ไว้ และ font-family Sarabun
   (โหลดจาก Google Fonts ใน layout). ที่นี่เพิ่ม rendering quality. */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

:root {
    /* ── Premium shadow scale — tinted ด้วย navy (ไม่ใช่ดำทึบ).
       คีย์ของ "หรู": เงาชี้โทนเดียวกับแบรนด์ ดูเป็นชิ้นเดียว ไม่แบน. ── */
    --hris-shadow-xs: 0 1px 2px rgba(18, 50, 110, 0.05);
    --hris-shadow-sm: 0 1px 3px rgba(18, 50, 110, 0.06), 0 1px 2px rgba(18, 50, 110, 0.04);
    --hris-shadow-md: 0 4px 8px -2px rgba(18, 50, 110, 0.08), 0 2px 4px -1px rgba(18, 50, 110, 0.05);
    --hris-shadow-lg: 0 12px 24px -6px rgba(18, 50, 110, 0.1), 0 4px 8px -3px rgba(18, 50, 110, 0.06);
    --hris-shadow-navy: 0 8px 28px -10px rgba(13, 36, 84, 0.45);

    /* focus ring ทอง — ใช้ผ่าน --bs-focus-ring-* ที่ Bootstrap มีให้ */
    --bs-focus-ring-color: rgba(255, 209, 0, 0.35);

    /* ── Gutter ด้านข้างรวมของหน้า — navbar กับ main ใช้ค่าเดียวกัน (เหมือน preview
       ที่ใช้ 24px ทั้งคู่). ก่อนหน้านี้ navbar ใช้ 2.5rem (40px) จาก bs-bridge แต่ main
       ซ้อน padding หลายชั้น ค่าไม่ตรงกัน — รวมเป็นตัวแปรเดียวแล้วใช้ที่ทั้งคู่. ── */
    --hris-gutter-x: 1.5rem;
}

/* ── Navbar + main ใช้ gutter ด้านข้างเท่ากัน — navbar ผ่าน --bs-gutter-x
   (ทับค่า 2.5rem ของ bs-bridge), main ผ่าน padding ตรงๆ.
   เพิ่ม max-width + margin:auto ให้ navbar จำกัดเท่า main (เหมือน preview
   ที่ใช้ .navbar-inner max-width:1180px) แทนที่จะเต็มจอ. ── */
.navbar > .container-fluid {
    --bs-gutter-x: var(--hris-gutter-x);
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
.hris-main {
    padding-left: var(--hris-gutter-x);
    padding-right: var(--hris-gutter-x);
    padding-top: 2rem;
}
/* บนมือถือ gutter ลดลง (เหมือน responsive container ทั่วไป) */
@media (max-width: 575.98px) {
    :root {
        --hris-gutter-x: 1rem;
    }
    .hris-main {
        padding-left: var(--hris-gutter-x);
        padding-right: var(--hris-gutter-x);
    }
}

/* ============================================================
   1. NAVBAR — gradient navy + hairline ทอง + เงาลอย
   (ทองเป็นเส้นประดับ ไม่ใช่บล็อกใหญ่ = ละมุน พรีเมียม)
   ============================================================ */
.navbar.bg-primary.navbar-dark {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
    box-shadow: var(--hris-shadow-navy);
    border-bottom: 2px solid var(--gold);
    /* padding บน-ล่าง navbar. preview ใช้ 14px แต่ไม่มี navbar-collapse wrapper
       และ nav-link padding ซ้อนเหมือน Bootstrap; ใช้ 10px ให้ความสูงรวมใกล้ preview. */
    --bs-navbar-padding-y: 0.625rem;
    /* brand font-size = 18px เหมือน preview (bs-bridge ตั้ง 17px). */
    --bs-navbar-brand-font-size: 1.125rem;
    /* brand padding-y = 0 เพราะ preview ไม่มี padding ซ้อนที่ brand
       (Bootstrap default --bs-navbar-brand-padding-y = 0.3125rem = 5px ทำให้รวมแล้วสูงเกิน preview). */
    --bs-navbar-brand-padding-y: 0;
}

/* ── Navbar search (กล่อง email) — พื้นโปร่ง + border ขาวจาง + focus ทอง
   เหมือน preview (ไม่ใช่ form-control ขาวทึบ). ใส่ class .hris-navbar-search
   ใน HTML เพื่อเลือกเฉพาะกล่องนี้ ไม่กระทบ form-control อื่น. */
.navbar.bg-primary.navbar-dark .hris-navbar-search {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    transition:
        border 0.18s,
        box-shadow 0.18s,
        background 0.18s;
}
.navbar.bg-primary.navbar-dark .hris-navbar-search::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.navbar.bg-primary.navbar-dark .hris-navbar-search:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.3);
    color: #fff;
}

/* ── nav-link ใน navbar-dark — โทนสว่าง, padding/rounded พรีเมียม, hover/active bg.
   ทับค่า default ของ navbar-nav (ที่ไม่มี rounded/hover-bg) ให้เหมือน preview:
   inactive = ขาวจาง, hover = ขาวจางเข้มขึ้น, active = ขาวจางเข้มสุด + ตัวขาวเต็ม. */
.navbar.bg-primary.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 14px;
    border-radius: var(--bs-border-radius-sm);
    transition:
        color 0.18s,
        background 0.18s;
}
.navbar.bg-primary.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.navbar.bg-primary.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.navbar.bg-primary.navbar-dark .navbar-nav .nav-link:focus-visible {
    outline: 0;
    box-shadow: var(--bs-focus-ring-color);
}

/* ============================================================
   2. CARD — shadow นุ่น + radius ใหญ่ขึ้น + hover-lift
   ============================================================ */
.card {
    border-color: rgba(18, 50, 110, 0.07);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--hris-shadow-sm);
}
/* card-body padding ตาม preview: 20px บน-ล่าง, 24px ซ้าย-ขวา
   (Bootstrap default = 16px ทั้งสี่ด้าน ดูแน่นไป). */
.card {
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.5rem;
}
.card > .card-body:first-child {
    padding-top: 1.25rem;
}
/* การ์ดที่โชว์เป็นกล่องเนื้อหาหลัก (มี .card-body) hover-lift เพื่อให้รู้สึกมีชีวิต.
   ไม่ใส่ทุก .card — แค่ที่ควร "ลอย". */
.card.card-body,
.card > .card-body {
    transition:
        box-shadow 0.2s,
        transform 0.2s;
}
.card.card-body:hover,
.card > .card-body:hover {
    box-shadow: var(--hris-shadow-md);
}

/* ============================================================
   2.5. GLASS CARD — modifier โปร่งแสง (glassmorphism) สำหรับทับพื้นหลังภาพ.
      ใช้เป็น class ที่สองคู่กับ .card: <div class="card hris-glass">.
      เป็น modifier (ไม่แตะ .card รวม) จึงใช้กับการ์ดที่ต้องการโปร่งแสงเท่านั้น —
      การ์ดอื่นยังเป็นพื้นขาวทึบได้ตามปกติ.
      - backdrop-filter: blur เบลอภาพหลังผ่านการ์ด
      - background ขาวใส 85% — โปร่งแสงแต่ยังอ่านเนื้อหาได้สบาย
      - border ขาวจางนุ่นกว่าเดิม + shadow เดิมของ .card
   ============================================================ */
.card.hris-glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   2.6. NAV-TABS — แถบแท็บด้านบน tab-content (detail.html).
      โทนกลมกลืนกับ glass: inactive ขาวใส, hover ขาวเข้มขึ้น, active มีขอบล่าง
      navy 3px (underline indicator ตามตำรา modern tab). border-bottom ของ
      .nav-tabs เองเป็นขาวจางนุ่นกว่าเดิม.
   ============================================================ */
.nav-tabs {
    --bs-nav-tabs-border-color: rgba(255, 255, 255, 0.5);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--navy);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.5);
}
.nav-tabs .nav-link {
    color: var(--muted);
    font-weight: 600;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    transition: color .15s, border-color .15s, background .15s;
}
.nav-tabs .nav-link:hover {
    color: var(--navy);
    background: rgba(255, 255, 255, 0.3);
    border-bottom-color: transparent;
}
.nav-tabs .nav-link.active {
    color: var(--navy);
    background: rgba(255, 255, 255, 0.4);
    border-bottom-color: var(--navy);
}
.nav-tabs .nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.3);
}

/* ============================================================
   2.7. PERSON CARD — แถบสรุปชื่อ-รหัส-กลุ่มสิทธิ ใต้ page header (detail.html).
      ใช้ glass แบบบางกว่าการ์ดหลัก (opacity .7) เพื่อให้ดูเป็นแถบ info ไม่ใช่
      การ์ดเนื้อหาเต็ม. ลบ .bg-light border ของ Bootstrap ออก เลือก glass เอง.
   ============================================================ */
#personCard {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--bs-border-radius);
}

/* ============================================================
   3. TABLE — borderless + uppercase header + zebra บาก +
   tabular-nums คอลัมน์ตัวเลข
   ส้มันแดง = พื้นตารางโปร่งใส ไม่มีสีทึบ (background: transparent)
   ให้พื้นหลัง glass ของการ์ดโผล่ผ่าน และใช้ zebra/hover สว่าง
   กลมกลืนกับ glass ไม่ออกเทาหม่นเหมือนตอนสีทับกัน.
   ============================================================ */
/* header: uppercase + letter-spacing + bg navy อ่อนมาก */
.table thead th {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    background: rgba(18, 50, 110, 0.03);
    border-bottom-width: 2px;
    border-bottom-color: var(--navy-100, #dbe3f1);
}
/* body: เส้นล่างเท่านั้น (ลบเส้นบน/ซ้าย/ขวา), zebra บากมาก, hover ไฮไลต์นุ่น */
.table tbody td {
    border-bottom: 1px solid var(--line);
}
.table > :not(caption) > * > * {
    border-top: 0;
}
/* พื้นตารางโปร่งใส — ให้พื้นหลัง glass ของการ์ดโผล่ผ่าน */
.table > :not(caption) > * > td,
.table > :not(caption) > * > th {
    background-color: transparent;
}
/* zebra สว่างกว่าเดิม กลมกลืนกับ glass (น้ำงน้ำเงินนุ่นน้อยกว่า) */
.table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.25);
}
.table-hover tbody tr:hover {
    --bs-table-hover-bg: rgba(18, 50, 110, 0.06);
}
/* ตัวเลขในตารางเรียงแถวเดียวกัน */
.table td[num],
.table .num {
    font-variant-numeric: tabular-nums;
}
/* ตัวเลขในตารางเรียงแถวเดียวกัน */
.table td[num],
.table .num {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   4. BUTTONS — gradient + shadow-on-hover
   (override ผ่าน --bs-btn-* ที่ Bootstrap มีให้ + gradient เล็กน้อย)
   ============================================================ */
.btn-primary {
    background: linear-gradient(180deg, #1a3d80 0%, var(--navy) 100%);
    box-shadow:
        0 1px 2px rgba(13, 36, 84, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(180deg, #224a99 0%, #163574 100%);
    box-shadow:
        0 4px 12px -2px rgba(13, 36, 84, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-primary:active {
    transform: translateY(1px);
}
.btn-outline-secondary {
    background: #eef2f7;
    border-color: #dbe3f1;
}
.btn-outline-secondary:hover {
    background: #dbe3f1;
    border-color: var(--navy);
}

/* ============================================================
   5. FOCUS RING ทอง — ใช้ผ่าน --bs-focus-ring-* ที่ Bootstrap มีให้.
   Bootstrap 5.3 ใช้ --bs-focus-ring-color ใน :focus-visible ของ
   หลาย component (btn, form-control, page-link, ฯลฯ). ค่านี้
   ตั้งที่ :root ข้างบนแล้ว จึงออกมาเป็นทองทั่วไปโดยอัตโนมัติ.
   รักษา .form-control:focus ด้วย เพราะมัน hardcode box-shadow
   อยู่ ต้อง override ตรงๆ. ============================================================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 0.25rem rgba(255, 209, 0, 0.3);
}

/* ── field label สไตล์ premium — ตัวเล็ก สี muted ตัวหนา + letter-spacing
   (เหมือน preview: ดูละมุนกว่า form-label ปกติที่ตัวเท่า body). ใช้กับ label
   ที่ต้องการสไตล์นี้โดยใส่ class .hris-field-label เพิ่ม. */
.hris-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

/* ── field input สไตล์ premium — ความกว้าง + padding + radius ตาม preview.
   ใช้กับ input ที่ต้องการสไตล์นี้โดยใส่ class .hris-field-input เพิ่ม. */
.hris-field-input {
    width: 320px;
    max-width: 100%;
    padding: 9px 13px;
    border-radius: var(--bs-border-radius-sm);
    transition:
        border 0.18s,
        box-shadow 0.18s;
}
.page-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255, 209, 0, 0.35);
}

/* ============================================================
   6. PAGINATION — hover-lift + radius + ขนาดตาม preview
   (min-width/height 34px, inline-flex, font 13px, navy hover bg)
   ============================================================ */
.pagination {
    --bs-pagination-border-radius: var(--bs-border-radius-sm);
    /* ระยะห่างระหว่าง page-item (เหมือน preview: gap 4px) — สำคัญเพราะ .page-link
       ในบล็อกด้านล่างใส่ border-radius ทุกมุม ถ้าไม่มี gap กล่องมุมโค้งจะชนกันแนบชิด */
    gap: 0.25rem;
}
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--bs-border-radius-sm);
    transition:
        background 0.15s,
        border-color 0.15s,
        transform 0.15s,
        box-shadow 0.15s;
}
.pagination .page-link:hover {
    background: var(--navy-50, #eef2f7);
    border-color: var(--navy-100, #dbe3f1);
}
.pagination .page-item:not(.disabled) .page-link:hover {
    transform: translateY(-1px);
}

/* ============================================================
   7. STAT / hover-lift สำหรับไทล์สรุป (ถ้ามีใช้ในอนาคต)
   — เตรียมไว้เป็น convention; ใส่ class .hris-stat บนไทล์
   ============================================================ */
.hris-stat {
    background: #fff;
    border: 1px solid rgba(18, 50, 110, 0.07);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--hris-shadow-sm);
    padding: 1.25rem;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}
.hris-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--hris-shadow-md);
}
.hris-stat .label {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.hris-stat .num {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   7.5. PAGE BACKGROUND — ภาพพื้นหลังของพื้นที่เนื้อหา (ใต้ navbar ก่อน main).
      ใส่บน .container-fluid.hris-bg เท่านั้น (ไม่แตะ .container-fluid ทั่วไป).
      ใช้ overlay สีขาวใส (opacity .5) ทับภาพ — โทนนุ่นลงแต่ภาพยังเด่นชัด.
      background-attachment: fixed — ภาพยึด viewport ทำให้ฟิตเสมอไม่ว่ากล่องเนื้อหา
      จะยาวแค่ไหน (cover+scroll จะยืดภาพให้เต็มความสูงกล่องจนสูญเสียสัดส่วน).
      background-position-y: 3.5rem เลื่อนภาพลงมาพ้น navbar (สูง ~56px) ไม่ให้
      ส่วนบนสุดโดน navbar ที่ stick อยู่ด้านบนบัง.
   ============================================================ */
.hris-bg {
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("/assets/image/bg-hr.png");
    background-size: cover;
    background-position: center 3.5rem;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ============================================================
   8. AVATAR — gradient ขาว→navy-100 + ring ขาวรอบ
   ============================================================ */
.navbar-avatar {
    background: linear-gradient(135deg, #fff, #dbe3f1);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.25),
        var(--hris-shadow-xs);
}

/* ============================================================
   9. PAGE HEADER — letter-spacing ประณีต
   ============================================================ */
h1,
.h1,
h2,
.h2 {
    letter-spacing: 0.005em;
}

/* ============================================================
   prefers-reduced-motion — ปิด transition/transform ทั้งหมด
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
    .card.card-body:hover,
    .card > .card-body:hover,
    .hris-stat:hover,
    .pagination .page-item:not(.disabled) .page-link:hover,
    .btn-primary:active {
        transform: none;
    }
}