/* assets/css/style.css */

/* --------------------
   1. Global Styles & Variables (ถ้าไม่ใช้ SCSS ของ Bootstrap)
   -------------------- */
body {
    font-family: 'Sarabun', sans-serif;
    /* ยืนยันว่าใช้ฟอนต์นี้ */
    background-color: #FFF8E1;
    /* สีพื้นหลังหลัก (ครีม/เหลืองอ่อน) */
    color: #4E342E;
    /* สีตัวอักษรหลัก (น้ำตาลเข้ม) */
}

:root {
    --primary-orange: #F57C00;
    /* สีส้มหลัก */
    --secondary-orange: #FFA726;
    /* สีส้มรอง / สีพื้นหลัง Card */
    --accent-yellow: #FFCA28;
    /* สีเหลืองสำหรับไอคอน */
    --text-brown-dark: #4E342E;
    --text-brown-medium: #795548;
    --background-cream: #FFF8E1;
    --background-light-orange: #FFF3E0;
    /* สีส้มอ่อนๆ อีกเฉด */
}

a {
    color: var(--primary-orange);
    /* สีลิงก์ */
}

a:hover {
    color: #E65100;
    /* สีลิงก์เมื่อ Hover (ส้มเข้มขึ้น) */
}
/* Dropdown Menu */
.dropdown-menu {
    background-color: var(--background-light-orange);
    border: 1px solid var(--secondary-orange);
}

.dropdown-item {
    color: var(--text-brown-medium);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background-color: var(--secondary-orange);
    color: var(--text-brown-dark);
}

.dropdown-divider {
    border-top-color: var(--secondary-orange);
}


/* --------------------
   3. Buttons
   -------------------- */
.btn-primary {
    background-color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    color: white !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #E65100 !important;
    /* ส้มเข้มขึ้น */
    border-color: #E65100 !important;
}

.btn-secondary {
    background-color: var(--text-brown-medium) !important;
    border-color: var(--text-brown-medium) !important;
    color: white !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--text-brown-dark) !important;
    border-color: var(--text-brown-dark) !important;
}

.btn-outline-secondary {
    color: var(--secondary-orange);
    border-color: var(--secondary-orange);
}

.btn-outline-secondary:hover {
    background-color: var(--secondary-orange);
    color: white;
}

.btn-danger {
    /* อาจจะคงสีแดงไว้สำหรับปุ่มยกเลิก/ลบ หรือปรับเป็นโทนส้มเข้ม */
    /* background-color: #D32F2F !important; */
    /* border-color: #D32F2F !important; */
}


/* --------------------
   4. Cards (การ์ดแสดงผลต่างๆ)
   -------------------- */
.card {
    background-color: var(--background-light-orange);
    /* สีพื้นหลัง Card */
    border: 1px solid var(--primary-orange);
    /* เส้นขอบ Card */
    border-radius: 0.75rem;
    /* ทำให้ขอบมนขึ้น */
}

.card-header {
    background-color: var(--primary-orange);
    /* สี Header ของ Card */
    color: white;
    border-bottom: 1px solid #E65100;
}

.card-title {
    color: var(--text-brown-dark);
    /* สีหัวข้อในการ์ด */
    font-weight: bold;
}

.card-text {
    color: var(--text-brown-medium);
    /* สีเนื้อหาในการ์ด */
}

.card-icon {
    /* ไอคอนใหญ่ๆ ใน Dashboard Cards */
    color: var(--primary-orange) !important;
    /* สีเหลืองแบบในภาพ */
    /* หรือใช้ var(--primary-orange) ถ้าต้องการให้เป็นสีส้ม */
}

.list-group-item {
    background-color: var(--background-light-orange);
    /* สีพื้นหลังรายการใน List Group */
    border-color: var(--secondary-orange);
    color: var(--text-brown-medium);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: #FFE0B2;
    /* สีส้มอ่อนมากๆ เมื่อ Hover */
    color: var(--text-brown-dark);
}

/* --------------------
   5. Forms (ฟอร์มกรอกข้อมูล)
   -------------------- */
.form-control {
    background-color: #FFFFFF;
    /* พื้นหลังช่อง Input เป็นสีขาวเพื่อความชัดเจน */
    border: 1px solid var(--secondary-orange);
    color: var(--text-brown-dark);
}

.form-control:focus {
    border-color: var(--primary-orange);
    box-shadow: 0 0 0 0.25rem rgba(245, 124, 0, 0.25);
    /* สีส้มอ่อนๆ ตอน Focus */
}

.form-label {
    color: var(--text-brown-dark);
    font-weight: 500;
}

.form-select {
    background-color: #FFFFFF;
    border: 1px solid var(--secondary-orange);
    color: var(--text-brown-dark);
}


/* --------------------
   6. Alerts (กล่องข้อความแจ้งเตือน)
   -------------------- */
.alert-success {
    background-color: #FFF3E0;
    /* สีครีม */
    border-color: #FFCC80;
    /* ส้มอ่อน */
    color: #A1887F;
    /* น้ำตาลอ่อน */
}

.alert-danger {
    background-color: #FFEBEE;
    /* ชมพูอ่อน */
    border-color: #FFCDD2;
    color: #C62828;
    /* แดงเข้ม */
}

.alert-info {
    background-color: #E3F2FD;
    border-color: #BBDEFB;
    color: #0D47A1;
}

.alert-warning {
    background-color: #FFFDE7;
    border-color: #FFF59D;
    color: #F57F17;
}


/* --------------------
   7. Footer
   -------------------- */
footer.bg-light {
    /* ถ้า Footer เดิมใช้ class bg-light */
    background-color: var(--background-light-orange) !important;
    border-top: 1px solid var(--secondary-orange);
    color: var(--text-brown-medium);
}

/* --------------------
   8. Specific Page Elements (ตัวอย่าง)
   -------------------- */

/* Carousel ใน index.php */
#newsCarousel .carousel-caption {
    background-color: rgba(78, 52, 46, 0.7);
    /* สีน้ำตาลเข้มโปร่งแสง */
    border-radius: 0.5rem;
}

#newsCarousel .carousel-indicators button {
    background-color: var(--primary-orange);
}

#newsCarousel .carousel-indicators button.active {
    background-color: #E65100;
}

#newsCarousel .carousel-control-prev-icon,
#newsCarousel .carousel-control-next-icon {
    background-color: var(--primary-orange);
    /* อาจจะต้องปรับ SVG หรือใช้ Font Icon */
    border-radius: 50%;
    padding: 10px;
}


/* ตัวอย่างการปรับไอคอน ถ้าต้องการ */
.bi {
    /* อาจจะตั้งสี Default ให้ไอคอน ถ้าไม่ต้องการให้มันตามสี Text */
}

/* ตัวอย่างสำหรับ List Group ใน helpme.php หรือ contacts.php */
.list-group-item h5 {
    color: var(--text-brown-dark);
}

.list-group-item .badge {
    background-color: var(--primary-orange) !important;
    /* สำหรับเบอร์โทร */
}