/* FILE: /meeting-room/app/assets/css/app-style.css (THE ABSOLUTE FINAL VERSION) */
:root { --primary-color: #0d6efd; --primary-color-light: #e7f1ff; --primary-color-dark: #0a58ca; --danger-color: #dc3545; --success-color: #198754; }
body { font-family: 'Sarabun', sans-serif; background-color: #f8f9fa; color: #333; }
.bkr-app-container { max-width: 1200px; margin: 20px auto; background-color: #fff; border-radius: 15px; box-shadow: 0 5px 25px rgba(0,0,0,0.07); padding: 20px 30px; }
.bkr-header { text-align: center; color: var(--primary-color); padding-bottom: 15px; border-bottom: 1px solid #e0e0e0; margin-bottom: 20px; }
.bkr-header h1 { font-weight: 700; }
.bkr-nav-tabs { display: flex; gap: 10px; border-bottom: 2px solid #e0e0e0; margin-bottom: 25px; }
.bkr-tab { padding: 10px 20px; text-decoration: none; color: #555; font-weight: 500; border-bottom: 3px solid transparent; transition: all 0.2s; }
.bkr-tab.active, .bkr-tab:hover { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.bkr-view:not(.active) { display: none; }
.bkr-section { margin-bottom: 30px; }
.bkr-section h4 { 
    color: #333;
    font-size: 1.2rem !important;
    line-height: 150%;
    margin-bottom: 20px;
    padding-bottom: 10px;
}
.bkr-section h4 i { margin-right: 8px; }

/* ===== Calendar Styles (Final Polish) ===== */
#bkr-calendar-wrapper { 
    width: 100%; 
}
.bkr-calendar-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 15px; 
    background-color: var(--primary-color); 
    color: white; 
    padding: 10px 20px; 
    border-radius: 8px; 
}
.bkr-calendar-header h5 { margin: 0; font-size: 1.2rem; }
.bkr-nav-arrow { cursor: pointer; padding: 10px; transition: transform 0.2s; }
.bkr-nav-arrow:hover { transform: scale(1.2); }
.bkr-calendar-table { 
    width: 100%; 
    text-align: center; 
    border-collapse: separate; /* สำคัญ: ทำให้ border-spacing ทำงาน */
    border-spacing: 0 5px; /* เพิ่มระยะห่างแนวตั้งระหว่างสัปดาห์ */
}

/* --- 1. ปรับปรุง Header (อา. จ. อ. ...) --- */
.bkr-calendar-table thead tr {
    background-color: #f8f9fa; /* พื้นหลังสีเทาอ่อน */
    border-radius: 8px;
}
.bkr-calendar-table th { 
    color: #333; /* ทำให้ทุกวันเป็นสีดำก่อน */
    font-weight: 500; 
    padding: 10px 0; 
    font-size: 0.9rem; 
}
.bkr-calendar-table th:first-child { 
    color: var(--danger-color); /* เจาะจงเฉพาะวันอาทิตย์ให้เป็นสีแดง */
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.bkr-calendar-table th:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}


/* --- 2. ปรับปรุงวันที่ในวันอาทิตย์ --- */
.bkr-calendar-table tbody td:first-child .bkr-day-cell {
    color: var(--danger-color); /* ทำให้ตัวเลขวันอาทิตย์เป็นสีแดง */
    font-weight: 500;
}

/* สไตล์ของวันที่ (เหมือนเดิม แต่ยืนยันว่าครบถ้วน) */
.bkr-day-cell { 
    width: 100%; 
    aspect-ratio: 1 / 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    cursor: pointer; 
    transition: all 0.2s; 
}
.bkr-day-cell.bkr-other-month { color: #ccc; cursor: default; }
.bkr-day-cell:not(.bkr-other-month):hover { background-color: var(--primary-color-light); }
.bkr-day-cell.bkr-today { font-weight: bold; background-color: #d6e8ff; }

/* เมื่อวันอาทิตย์ถูกเลือก ให้ตัวอักษรกลับเป็นสีขาว */
.bkr-calendar-table tbody td:first-child .bkr-day-cell.bkr-selected {
    color: #fff;
}
.bkr-day-cell.bkr-selected { 
    background-color: var(--primary-color); 
    color: #fff; 
    transform: scale(1.1); 
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.5); 
}

.bkr-room-schedule { border: 1px solid #ddd; border-radius: 8px; margin-bottom: 20px; overflow: hidden; }
.bkr-room-header { background-color: #f5f5f5; padding: 12px; font-weight: bold; border-bottom: 1px solid #ddd; }
.bkr-room-capacity { font-size: 0.85rem; font-weight: 400; color: #777; }
.bkr-time-slot { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid #eee; transition: background-color 0.2s; }
.bkr-time-slot:last-child { border-bottom: none; }
.bkr-time-slot .status-icon { font-weight: bold; }
.bkr-time-slot.bkr-available { cursor: pointer; }
.bkr-time-slot.bkr-available:hover { background-color: #e8f5e9; }
.bkr-time-slot.bkr-available .status-icon { color: var(--success-color); }
.bkr-time-slot.bkr-booked { background-color: #ffebee; }
.bkr-time-slot.bkr-booked .view-details-btn { color: #555; border: none; background: none; padding: 0; font-size: 1.2rem; line-height: 1; }
.bkr-time-slot.bkr-selected { background-color: var(--primary-color); color: white; }
.search-panel { padding: 20px; background-color: #f8f9fa; border-radius: 8px; margin-bottom: 25px; }
.pagination .page-link { cursor: pointer; }
.pagination .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); }
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); }
.btn-primary:hover { background-color: var(--primary-color-dark); border-color: var(--primary-color-dark); }
.bkr-modal { display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); justify-content: center; align-items: center; padding: 20px; }
/* ===== Modal Styles (FINAL FIX) ===== */
.bkr-modal { 
    display: none; 
    position: fixed; 
    z-index: 1050; 
    left: 0; top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; /* Prevent body scroll */
    background-color: rgba(0,0,0,0.6); 
    display: flex; /* Changed initial state to flex */
    justify-content: center; 
    align-items: center; 
    padding: 20px; 
    display: none; /* Hide it again by default */
}

.bkr-modal-content {
    background-color: #fff;
    padding: 20px 30px; /* Adjust padding */
    border-radius: 8px;
    width: 100%;
    max-width: 800px;
    position: relative;
    max-height: 90vh; /* Max height is 90% of viewport height */
    display: flex;
    flex-direction: column;
}

.bkr-modal-content.large { max-width: 900px; }

/* This is the key fix */
#booking-modal #booking-form {
    overflow-y: auto; /* Allow the form itself to scroll */
    padding-right: 15px; /* Add some space for the scrollbar */
}

.bkr-close-btn { position: absolute; top: 10px; right: 20px; font-size: 2rem; cursor: pointer; color: #aaa; z-index: 10; }
.bkr-modal-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #eee; }
.bkr-modal-header h5 { margin: 0; }
.bkr-modal-actions { display: flex; align-items: center; }
#details-modal-content { overflow-y: auto; padding-right: 15px; }
.details-grid { display: grid; grid-template-columns: 150px 1fr; gap: 15px; align-items: center; }
.details-grid dt { font-weight: bold; color: #555; }
.details-grid dd { margin: 0; }
#share-buttons-container .share-button { margin-left: 5px; }
.bkr-modal-content.large { max-width: 900px; }
.bkr-close-btn { position: absolute; top: 10px; right: 20px; font-size: 2rem; cursor: pointer; color: #aaa; z-index: 10; }
.bkr-modal-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #eee; }
.bkr-modal-header h5 { margin: 0; }
.bkr-modal-actions { display: flex; align-items: center; }
#details-modal-content { overflow-y: auto; padding-right: 15px; }
.details-grid { display: grid; grid-template-columns: 150px 1fr; gap: 15px; align-items: center; }
.details-grid dt { font-weight: bold; color: #555; }
.details-grid dd { margin: 0; }
#share-buttons-container .share-button { margin-left: 5px; }

/* --- General Body & Footer --- */
body {
    font-family: 'Sarabun', sans-serif;
    background-color: #f8f9fa; /* Changed background */
    color: #333;
    padding-bottom: 70px; /* Space for footer */
}

.bkr-footer {
    text-align: center;
    padding: 1rem 0;
    color: #6c757d;
    font-size: 0.9rem;
    background-color: #f8f9fa;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* --- App Container Adjustment --- */
.bkr-app-container {
    max-width: 1200px;
    margin: 30px auto; /* Add margin from top navbar */
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
    padding: 20px 30px;
}

/* Remove the old header styles */
.bkr-header {
    display: none; /* Hide the old header */
}
/* --- START: Form Icon Polish --- */
#booking-form .form-label i {
    margin-right: 8px;
    color: #6c757d;
    width: 1.2em; /* จัดให้ไอคอนมีพื้นที่เท่ากัน */
}

/* สไตล์สำหรับวันหยุด */
.bkr-day-cell.bkr-holiday {
    color: var(--danger-color); /* ทำให้ตัวเลขเป็นสีแดง */
    font-weight: 500;
}
/* เมื่อวันหยุดถูกเลือก ให้ตัวอักษรกลับเป็นสีขาว */
.bkr-day-cell.bkr-holiday.bkr-selected {
    color: #fff;
}

/* --- START: Responsive Fix for Back Button --- */

/* บนจอใหญ่: แสดงทั้งไอคอนและข้อความ */
.back-btn .back-text {
    display: inline;
}
.back-btn .bi-arrow-left-circle {
    display: inline-block;
    margin-right: 5px;
}

/* บนจอเล็ก (น้อยกว่า 768px): แสดงเฉพาะไอคอน */
@media (max-width: 768px) {
    /* .navbar-brand span { display: none; } */ /* ลบ หรือ คอมเมนต์บรรทัดนี้ */
    .back-btn .back-text {
        display: none; /* ซ่อนข้อความ */
    }
    .back-btn {
        padding: 0.4rem 0.6rem;
    }
}

/* --- END: Responsive Fix for Back Button --- */