/* ---------------------------------------------------------------------- */
/* 1. FullCalendar Base Styles (การจัดวางและการแสดงผล Event) */
/* ---------------------------------------------------------------------- */

/* ทำให้ปฏิทินตอบสนอง (Responsive) และจัดกึ่งกลาง */
#calendar { 
    max-width: 100%; 
    margin: 0 auto; 
    /*font-family: 'Prompt', sans-serif; *//* ใช้ฟอนต์หลักของธีม */
}

/* ลบขีดเส้นใต้ของลิงก์ทั้งหมดภายในปฏิทิน */
#calendar a { 
    text-decoration: none !important; 
}

/* ซ่อนเวลาของ Event ทั้งหมด (Day Grid และ List View) */
.fc-event-time,
.fc-list-event-time,
.fc-daygrid-event-dot { 
    display: none !important; 
}

/* ปรับความสูง Event ใน Day Grid ให้ยืดหยุ่น */
.fc-daygrid-event { 
    height: auto !important; 
    min-height: 3em; 
    padding: 2px 4px; 
    white-space: normal; 
    border-radius: 6px; /* เพิ่มความโค้งมนเล็กน้อย */
}

/* จัดวาง Event ภายใน Day Grid */
.fc-daygrid-event-harness { 
    margin-bottom: 5px; 
}

/* ใช้ Flexbox จัด Event ภายในให้ข้อความและไอคอนอยู่ด้วยกัน */
.fc-event { 
    display: flex; 
    align-items: flex-start; 
    gap: 4px; 
    flex-wrap: wrap; 
    font-size: 0.9em; /* ปรับขนาดฟอนต์ใน Event */
}
    
.fc-event-title { 
    line-height: 1.2; 
    white-space: normal; 
}

/* --- 1.1 Header Toolbar Responsive (สำหรับปุ่มเปลี่ยนมุมมองและชื่อเดือน) --- */

.fc-header-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0; /* ลบ padding ด้านข้างออกให้ชิดขอบ */
    margin-bottom: 10px;
}

.fc-toolbar-chunk {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ****************************************************** */
/* * ปรับปรุง: สไตล์ปุ่มใน Header ให้เป็นสีน้ำเงินทั้งหมด * */
/* ****************************************************** */

.fc-button-group .fc-button,
.fc-toolbar-chunk .fc-today-button {
    /* ปุ่มลูกศรซ้าย/ขวา และปุ่ม Today */
    background-color: #003da5; /* สีน้ำเงินเข้ม */
    color: #fff;
    border: 1px solid #003da5;
    box-shadow: none;
    transition: all 0.2s ease;
    text-transform: capitalize; 
    border-radius: 4px; /* กำหนดความโค้งมนที่ 4px สำหรับปุ่มทั้งหมด */
}

.fc-button-group {
    /* รีเซ็ตขอบเขตปุ่มในกลุ่ม */
    border-radius: 4px;
}

.fc-button-group .fc-button:not(:last-child) {
    border-right: none; /* ลบเส้นแบ่งระหว่างปุ่มในกลุ่ม */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.fc-button-group .fc-button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.fc-button-group .fc-button:hover,
.fc-toolbar-chunk .fc-today-button:hover,
.fc-button-group .fc-button:focus,
.fc-button-active {
    /* สี Hover/Active เป็นสีน้ำเงินที่สว่างขึ้น */
    background-color: #0056d1 !important; 
    border-color: #0056d1 !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* ปรับสีชื่อเดือน */
.fc-toolbar-title {
    color: #003da5; /* สีน้ำเงินเข้ม */
    font-weight: 700;
}

/* ---------------------------------------------------------------------- */
/* 2. Event Status Styles (สไตล์ตามสถานะ: Available, Full, Closed, Unknown) */
/* ---------------------------------------------------------------------- */

/* 2.1. Available (สีเขียว/ฟ้า - พร้อมรับสมัคร) */
.fc-event.status-available { 
    border: none; 
    padding: 5px; 
    border-left: 5px solid #28a745; /* สีเขียว (สื่อถึงสถานะพร้อมใช้งาน) */
    background-color: #e6f5ea !important; /* พื้นหลังสีเขียวอ่อนมาก */
    color: #1a5e2f !important;      
    font-weight: normal !important;
}

/* 2.2. Full (สีแดง - เต็ม) */
.fc-event.status-full { 
    background-color: #f8d7da !important; /* พื้นหลังสีแดงอ่อน */
    color: #721c24 !important;
    border: none; 
    padding: 5px; 
    border-left: 5px solid #dc3545; /* สีแดงเข้ม */
    font-weight: normal!important;
}

/* 2.3. Closed (สีน้ำเงินอ่อน/ฟ้า - ปิดรับสมัคร/ยกเลิก) - ใช้โทนสีน้ำเงิน/ฟ้า แทนส้ม */
.fc-event.status-closed { 
    border: none; 
    padding: 5px; 
    border-left: 5px solid #0dcaf0; /* สีฟ้า */
    background-color: #d1ecf1 !important; /* พื้นหลังสีฟ้าอ่อน */ 
    color: #0c5460 !important;
    font-weight: normal !important;
}
    
/* 2.4. Unknown (สีเทา - ไม่ทราบสถานะ) */
.fc-event.status-unknown { 
    border: none; 
    padding: 5px; 
    border-left: 5px solid #6c757d; /* สีเทาเข้ม */
    background-color: #e9ecef !important; /* พื้นหลังสีเทาอ่อน */ 
    color: #383d41 !important;
    font-weight: normal !important;
}

/* ---------------------------------------------------------------------- */
/* 3. Interaction & Disabled States */
/* ---------------------------------------------------------------------- */

/* ทำให้ Event ที่ไม่ใช่ 'Available' คลิกไม่ได้และจางลง */
.fc-event.status-full,
.fc-event.status-closed,
.fc-event.fc-event.status-unknown {
    pointer-events: none;
    opacity: 0.75; 
    cursor: not-allowed;
}

/* ทำให้ลิงก์ใน List View ที่ไม่ใช่ 'Available' คลิกไม่ได้ */
.fc-list-event.status-full a,
.fc-list-event.status-closed a,
.fc-list-event.status-unknown a {
    pointer-events: none;
    text-decoration: none;
    cursor: not-allowed;
}

/* Hover Effect สำหรับสถานะ Available เท่านั้น */
.fc-event.status-available:hover,
.fc-list-event.status-available:hover {
    background-color: #b8e6c5 !important; 
    border-color: #155724; 
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3); 
    cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* 4. List View Specific Styles (มุมมองแบบรายการ) */
/* ---------------------------------------------------------------------- */

.fc-list-event,
.fc-list-event td,
.fc-list-event:hover {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ปิดเส้นแบ่งที่อยู่ระหว่างวัน/ Event List */
.fc-list-day-cushion,
.fc .fc-list-day,
.fc .fc-list-event td {
    border: none !important;
}

.fc-list-day-cushion {
    background: #f8f8f8; 
}

/* ปิด hr ใต้ event ถ้ามี */
.fc-list-event hr {
    display: none !important;
}

/* จัดสไตล์เส้นแบ่งด้านล่างในมุมมอง List Month */
.fc-listMonth-view .fc-event {
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid #ddd !important;
}

/* เปลี่ยนสีเส้นแบ่งด้านล่างตามสถานะใน List Month */
.fc-listMonth-view .fc-event.status-available {
    border-bottom: 1px solid #28a745 !important;
}

.fc-listMonth-view .fc-event.status-full {
    border-bottom: 1px solid #dc3545 !important;
}

.fc-listMonth-view .fc-event.status-closed {
    border-bottom: 1px solid #0dcaf0 !important;
}

.fc-listMonth-view .fc-event.status-unknown {
    border-bottom: 1px solid #6c757d !important;
}

/* ---------------------------------------------------------------------- */
/* 5. Custom UI Components (Selection / Booking Area) */
/* ---------------------------------------------------------------------- */

.div-area-info {
    text-align: center;
    margin: 30px 0; 
    color: #495057;
}

.div-info {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 15px;
}

.div-select-province {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; 
    margin-top: 15px;
    margin-bottom: 30px;
}

/* ****************************************************** */
/* * ปรับปรุง: สไตล์ปุ่มเลือกพื้นที่ (ใช้ Blue/Light Blue) * */
/* ****************************************************** */

.c_in_bk,
.c_out_bk {
    padding: 12px 25px; 
    border-radius: 25px; 
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    border: none;
    display: flex; 
    align-items: center;
}

/* In-Center (ศูนย์สอบกรุงเทพฯ): สีน้ำเงินเข้ม (Primary) */
.c_in_bk {
    background-color: #003da5; 
    color: #fff;
    border: 1px solid #003da5;
}

.c_in_bk:hover {
    background-color: #0056d1;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* Out-Center (ศูนย์ทดสอบต่างจังหวัด): สีฟ้าอ่อน (Secondary/Outline Style) */
.c_out_bk {
    background-color: #fff; /* พื้นหลังสีขาว */
    color: #003da5; /* ตัวอักษรสีน้ำเงินเข้ม */
    border: 1px solid #003da5; /* ขอบสีน้ำเงินเข้ม */
    box-shadow: none; /* ลบเงาเพื่อเน้นขอบ */
}

.c_out_bk:hover {
    background-color: #f1f7ff; /* พื้นหลังสีฟ้าอ่อนมากเมื่อ Hover */
    color: #003da5;
    border-color: #0056d1;
    box-shadow: 0 4px 8px rgba(0, 61, 165, 0.1); /* เงาสีน้ำเงินจางๆ */
}

/* ซ่อน input (radio/checkbox) แต่ยังให้สามารถทำงานได้ */
.c_in_bk input,
.c_out_bk input {
    margin-right: 8px; 
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* ---------------------------------------------------------------------- */
/* 6. Responsive (สำหรับหน้าจอเล็ก) */
/* ---------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
    /* จัดปุ่มเลือกพื้นที่ให้อยู่ในแนวตั้ง */
    .div-select-province {
        flex-direction: column;
        align-items: center;
    }

    .c_in_bk,
    .c_out_bk {
        width: 80%;
        text-align: center;
        justify-content: center; /* จัดข้อความกึ่งกลาง */
    }

    /* จัด Header Toolbar ให้อยู่ในแนวตั้ง */
    .fc-header-toolbar {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .fc-toolbar-chunk {
        justify-content: center;
    }
}

/* --- สไตล์สำหรับปุ่มเลือกศูนย์สอบ --- */

.div-select-province {
    display: flex;
    justify-content: center; /* จัดให้อยู่ตรงกลาง */
    gap: 20px; /* ระยะห่างระหว่างปุ่ม */
    margin: 20px 0;
}

.exam-location-button {
    /* สไตล์พื้นฐาน */
    padding: 10px 20px;
    border-radius: 30px; /* ขอบโค้งมน */
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-width: 200px; 
}

/* สไตล์ปุ่มที่ไม่ได้ถูกเลือก (Unselected) - พื้นขาว ขอบน้ำเงิน ตัวอักษรน้ำเงิน */
.exam-location-button.unselected {
    background-color: #fff;
    color: #0047a0; /* สีน้ำเงินเข้ม */
    border: 2px solid #0047a0;
}

/* สไตล์ปุ่มที่ถูกเลือก (Selected) - พื้นน้ำเงิน ตัวอักษรขาว */
.exam-location-button.selected {
    background-color: #0047a0; /* สีน้ำเงินเข้ม */
    color: #fff;
    border: 2px solid #0047a0;
    box-shadow: 0 4px 8px rgba(0, 71, 160, 0.4); /* เพิ่มเงาเล็กน้อย */
}

/* สไตล์เมื่อถูก Hover */
.exam-location-button:hover {
    filter: brightness(1.1); /* สว่างขึ้นเมื่อชี้ */
}