/**
 * [KM] Project   : iShare - Intelligent Sharing Center (สปช.ทร.)
 * [KM] Path      : /static/CSS/style.css
 * [KM] Objective : แก้ไขปัญหาธีมสีไม่แสดงผล (Visual Fix) ตามภาพหลักฐานล่าสุด
 * [KM] Author    : AdminTee
 */

/* ==========================================
   SECTION 1: CORE THEME COLORS (RTN IDENTITY)
   ========================================== */
:root {
    --rtn-navy: #002366;
    --rtn-navy-dark: #00153d;
    --rtn-gold: #C5A059;
    --rtn-gold-light: #d4b881;
    --header-height: 75px;
}

/* [KM]: พื้นฐานตัวอักษรของระบบ */
body {
    font-family: 'Sarabun', sans-serif;
    background-color: #f0f2f5;
    color: #333;
}

/* ==========================================
   SECTION 2: LAYOUT COMPONENT STYLING
   ========================================== */

/* [KM]: ส่วนหัว (Header) ปรับให้เป็นสี Navy Gradient ตามโจทย์ */
.navbar.bg-navy-gradient {
    background: linear-gradient(90deg, var(--rtn-navy) 0%, var(--rtn-navy-dark) 100%) !important;
    height: var(--header-height);
}

/* [KM]: Sidebar ซ้าย (Left Sidebar) บังคับสี Navy 100% */
aside.bg-navy, .sidebar {
    background-color: var(--rtn-navy) !important;
    color: #ffffff !important;
}

/* [KM]: ปรับแต่งเมนูใน Sidebar ให้ตัวอักษรขาวชัดเจน */
.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.2s ease;
}

.sidebar .nav-link:hover, .sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--rtn-gold) !important;
}

/* ==========================================
   SECTION 3: HEADING & ICON VISIBILITY FIX
   ========================================== */

/* [KM]: แก้ไขปัญหา Heading และ Icon กลืนกับพื้นหลัง */
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy h5, .bg-navy h6,
.bg-navy span, .bg-navy strong, .rtn-footer h5, .card-header.bg-navy h6 {
    color: #ffffff !important;
    text-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

/* [KM]: บังคับ Icon ให้เป็นสีทอง RTN Gold */
.bg-navy i, .text-gold, .bi-share-fill, .rtn-footer i, .card-header.bg-navy i {
    color: var(--rtn-gold) !important;
}

/* ==========================================
   SECTION 4: RIGHT SIDEBAR & CARD STYLING
   ========================================== */

/* [KM]: ปรับแต่ง Card ใน Sidebar ขวาให้ดูมีมิติ */
.card {
    border: none !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
}

.card-header.bg-navy {
    background-color: var(--rtn-navy) !important;
    border-bottom: 2px solid var(--rtn-gold) !important;
}

/* [KM]: ปรับแต่ง ProgressBar ให้เป็นสีทอง */
.bg-rtn-gold {
    background-color: var(--rtn-gold) !important;
}

/* ==========================================
   SECTION 5: FOOTER STYLING
   ========================================== */
.rtn-footer {
    background-color: var(--rtn-navy-dark) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ==========================================
   SECTION 6: ADAPTIVE GRID SETTINGS
   ========================================== */
.sticky-wrapper {
    position: sticky;
    top: calc(var(--header-height) + 15px);
    max-height: calc(100vh - var(--header-height) - 30px);
    overflow-y: auto;
}


/* ==========================================
   SECTION 7: Mobile Menu
   ========================================== */

/**
 * [KM]: ปรับแต่ง Offcanvas สำหรับ Mobile ให้เป็นสีกรมท่าและไอคอนสีทอง
 * แก้ไขปัญหาเมนูสีขาวมองไม่เห็นตามภาพหลักฐาน
 */
.offcanvas.bg-navy {
    background-color: #002366 !important; /* สีกรมท่า ทร. */
}

/* [KM]: บังคับให้รายการลิงก์ในหน้าจอมือถือเป็นสีขาวและมีระยะห่างที่เหมาะสม */
.offcanvas .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* [KM]: เมื่อมีการเลือกเมนู (Active) ให้แสดงเป็นพื้นหลังสีน้ำเงินสว่างหรือสีทอง */
.offcanvas .nav-link.active {
    background-color: #007bff !important; /* สีน้ำเงิน Active */
    color: #ffffff !important;
}

/* [KM]: บังคับสีไอคอนใน Offcanvas ให้เป็นสีทองสม่ำเสมอ */
.offcanvas .bi, .offcanvas i {
    color: #C5A059 !important;
    font-size: 1.2rem;
}

/* [KM]: ปรับสีข้อความส่วนหัวในเมนู (ถ้ามี) */
.offcanvas h6 {
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 1.5rem 1.5rem 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}