/* ============================================================
   ATB Brand Colors Override — Phase E
   Version: 1.0.0  |  Date: 2026-06-01
   ============================================================
   สีที่ต้องแทนที่ (เก่า → ใหม่):
     #003087 / #0D2B5E  →  #0033A0  (Pantone 286C)
     #f5c518 / #c9a84c  →  #FFD100  (Pantone 109C)

   กฎสำคัญ (Reference เล่ม 1 v1.0):
   - ทอง #FFD100 ใช้บนพื้นน้ำเงิน/เข้มเท่านั้น
   - ห้ามใช้ทองเป็น text บนพื้นขาว/สว่าง (contrast ต่ำ)
   - Gold divider bar ใต้ heading ยังใช้ได้ (accent ตกแต่ง)

   วิธี deploy:
   1. คัดลอกไฟล์นี้ไปที่:
      C:\xampp\htdocs\autoboxes\assets\css\brand-colors.css
   2. ไฟล์นี้ถูก link ใน css.blade.php หลัง custom.css แล้ว
   ============================================================ */


/* ============================================================
   1. CSS Custom Properties (เหมือน css.blade.php — ใส่ซ้ำ
      เผื่อใช้ brand-colors.css แบบ standalone)
   ============================================================ */
:root {
    --atb-blue:         #0033A0;
    --atb-gold:         #FFD100;
    --atb-white:        #FFFFFF;
    --atb-blue-dark:    #002480;
    --atb-blue-light:   #1A4FBF;
    --atb-text:         #333333;
}


/* ============================================================
   2. Typography — Sarabun ทุก element
   ============================================================ */
body,
h1, h2, h3, h4, h5, h6,
p, li, td, th, span, a,
input, textarea, select, button,
.form-control, .form-select,
.btn, .nav-link, .dropdown-item {
    font-family: "Noto Sans Thai", sans-serif !important;
}


/* ============================================================
   3. Headings — ATB Blue + Gold accent underline
   ============================================================ */
h1, .h1 {
    color: #0033A0 !important;
}
/* Gold divider bar ใต้ H1 (50px, 3px solid)
   ข้อยกเว้น: heading บน background น้ำเงิน → override ดูใน section 9 */
h1::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background-color: #FFD100;
    margin-top: 0.4rem;
}
/* H1 ที่จัดกึ่งกลาง (เช่น หน้า job detail) → เส้นทองอยู่กึ่งกลางตาม */
.text-center h1::after,
h1.text-center::after {
    margin-left: auto;
    margin-right: auto;
}
h2, .h2 {
    color: #0033A0 !important;
}
/* H3 rule removed to follow CI */
h4, .h4,
h5, .h5,
h6, .h6 {
    color: #0033A0 !important;
}


/* ============================================================
   4. Bootstrap Primary Override
   ============================================================ */
.btn-primary {
    background-color: #0033A0 !important;
    border-color: #0033A0 !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: #002480 !important;
    border-color: #002480 !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    color: #0033A0 !important;
    border-color: #0033A0 !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #0033A0 !important;
    border-color: #0033A0 !important;
    color: #ffffff !important;
}

.bg-primary, .badge.bg-primary {
    background-color: #0033A0 !important;
    color: #ffffff !important;
}
.border-primary { border-color: #0033A0 !important; }
.text-primary    { color: #0033A0 !important; }

a         { color: #0033A0; }
a:hover   { color: #002480; }


/* ============================================================
   5. Quotation / CTA Buttons
   ============================================================ */

/* บน background ขาว/อ่อน → น้ำเงิน solid */
.btn-quotation {
    background-color: #0033A0 !important;
    border-color: #0033A0 !important;
    color: #ffffff !important;
    font-weight: 600;
}
.btn-quotation:hover,
.btn-quotation:focus,
.btn-quotation:active {
    background-color: #002480 !important;
    border-color: #002480 !important;
    color: #ffffff !important;
}

/* บน background น้ำเงินเข้ม (hero) → ขาว → hover ทอง */
.btn-quotation-on-dark,
.btn-cta-white {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #0033A0 !important;
    font-weight: 600;
}
.btn-quotation-on-dark:hover,
.btn-quotation-on-dark:focus,
.btn-cta-white:hover,
.btn-cta-white:focus {
    background-color: #FFD100 !important;
    border-color: #FFD100 !important;
    color: #0033A0 !important;
}

/* ห้ามใช้ btn-outline-secondary — theme นี้มันเป็นสีทองบนพื้นขาว */
.btn-outline-secondary {
    color: #333333 !important;
    border-color: #6c757d !important;
    background-color: transparent !important;
}


/* ============================================================
   6. Navbar / Header
   ============================================================ */
header,
header.navbar-light,
.navbar,
.navbar-light {
    background-color: #0033A0 !important;
    margin-top: 0 !important;
    border-top: none !important;
}

header.navbar-light,
header.landing-header {
    border-bottom: 2px solid #FFD100 !important;
}

header .nav-link,
.navbar .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}
header .nav-link:hover,
.navbar .nav-link:hover {
    color: #FFD100 !important;
}

.nav-top-text   { color: rgba(255, 255, 255, 0.85) !important; }
.nav-top-text i { color: rgba(255, 255, 255, 0.7) !important; }

.dropdown-menu { border-top: 3px solid #FFD100; }
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(0, 51, 160, 0.08) !important;
    color: #0033A0 !important;
}

.navbar .nav-item .nav-link.active,
.navbar .nav-item.active > .nav-link {
    color: #FFD100 !important;
    font-weight: 600;
}

.navbar-toggler { border-color: rgba(255, 255, 255, 0.5) !important; }
.navbar-toggler-animation span { background-color: #ffffff !important; }


/* ============================================================
   7. Footer
   ============================================================ */
footer,
footer.bg-section-primary,
.bg-section-primary {
    background-color: #0033A0 !important;
}

footer.bg-section-primary {
    border-top: 2px solid #FFD100 !important;
}

footer h1, footer h2, footer h3,
footer h4, footer h5, footer h6 {
    color: #ffffff !important;
}
footer h1::after { display: none; }
footer hr { border-color: rgba(255, 255, 255, 0.25) !important; }


/* ============================================================
   8. Breadcrumb (แก้จาก #0D2B5E เดิม)
   ============================================================ */
.breadcrumb-item a               { color: #0033A0 !important; }
.breadcrumb-item a:hover         { color: #002480 !important; }
.breadcrumb-item.active          { color: #6c757d !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #6c757d !important; }


/* ============================================================
   9. Section น้ำเงิน — heading + text เป็นขาว
   ============================================================ */
.bg-section-primary h1,
.bg-section-primary h2,
.bg-section-primary h3,
.bg-section-primary h4,
.bg-section-primary h5,
.bg-section-primary h6,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3 {
    color: #ffffff !important;
}
.bg-section-primary h1::after,
.bg-primary h1::after {
    background-color: #FFD100;
}

.bg-section-primary .text-gold,
.bg-primary .text-gold {
    color: #FFD100 !important;
}

.divider-gold,
.section-divider-gold,
.heading-underline {
    background-color: #FFD100 !important;
    border-color: #FFD100 !important;
}

.badge-gold {
    background-color: #FFD100 !important;
    color: #0033A0 !important;
    font-weight: 700;
}


/* ============================================================
   10. Forms
   ============================================================ */
.form-control:focus,
.form-select:focus {
    border-color: #0033A0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 51, 160, 0.15) !important;
}


/* ============================================================
   11. Old Hex Direct Override
       รับมือ style="color:#003087" ที่ hardcode ใน HTML/CMS
   ============================================================ */
[style*="color:#003087"],
[style*="color: #003087"]                   { color: #0033A0 !important; }
[style*="color:#0D2B5E"],
[style*="color: #0D2B5E"],
[style*="color:#0d2b5e"],
[style*="color: #0d2b5e"]                   { color: #0033A0 !important; }
[style*="background-color:#003087"],
[style*="background-color: #003087"]        { background-color: #0033A0 !important; }
[style*="background-color:#0D2B5E"],
[style*="background-color: #0D2B5E"],
[style*="background-color:#0d2b5e"],
[style*="background-color: #0d2b5e"]        { background-color: #0033A0 !important; }
[style*="color:#f5c518"],
[style*="color: #f5c518"]                   { color: #FFD100 !important; }
[style*="color:#c9a84c"],
[style*="color: #c9a84c"]                   { color: #FFD100 !important; }
[style*="background-color:#f5c518"],
[style*="background-color: #f5c518"]        { background-color: #FFD100 !important; }
[style*="background-color:#c9a84c"],
[style*="background-color: #c9a84c"]        { background-color: #FFD100 !important; }