/* ============================================ */
/* ============== GLOBAL STYLES ============== */
/* ============================================ */
:root {
    --sidebar-bg: #343a40;
    --sidebar-text: #c2c7d0;
    --sidebar-active-bg: #007bff;
    --sidebar-active-text: #ffffff;
    --main-bg: #f4f6f8;
    --header-bg: #ffffff;
    --card-bg: #ffffff;
    --text-dark: #333;
    --text-light: #6c757d;
    --border-color: #dee2e6;
    --shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scrollbar-gutter: stable;
}

body {
    font-family: 'Kanit', sans-serif;
    background-color: var(--main-bg);
    color: var(--text-dark);
}

.page-container {
    display: flex;
    min-height: 100vh;
}

.page-content {
    display: none; /* Hide pages by default */
}

/* ============================================ */
/* ============== SIDEBAR STYLES ============== */
/* ============================================ */
.sidebar {
    width: 250px;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-header {
    padding: 15px 20px;
    text-align: center;
    border-bottom: 1px solid #4f5962;
}

.sidebar-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--sidebar-active-text);
}

.sidebar-nav {
    flex-grow: 1;
    overflow-y: auto;
}

.sidebar-nav ul {
    list-style: none;
    padding-top: 10px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: background-color 0.3s;
    font-size: 0.95rem;
}

.sidebar-nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-nav li.active > a {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 500;
}

.sidebar-nav a i {
    width: 30px;
    margin-right: 10px;
    text-align: center;
}

.sidebar-footer {
    padding: 20px;
    border-top: 1px solid #4f5962;
}

.system-info {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}
.system-info i { margin-right: 10px; }

.version {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 15px;
}

.logout-btn {
    display: none;
    width: 70%;
    padding: 5px; /* ลดลงจาก 8px */
    margin-top: 10px; /* ลดลงจาก 12px */
    margin-left: auto;   /* เพิ่มบรรทัดนี้ */
    margin-right: auto;  /* เพิ่มบรรทัดนี้ */
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Kanit', sans-serif;
    font-size: 0.75rem; /* ลดลงจาก 0.9rem */
    display: flex;
    justify-content: center;
    align-items: center;
}
.logout-btn i { margin-right: 8px; }

/* ============================================ */
/* ============== MAIN WRAPPER STYLES ============== */
/* ============================================ */
.main-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.header {
    background-color: var(--header-bg);
    box-shadow: var(--shadow);
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 1.1rem;
}
.header-logo {
    height: 40px;
    width: auto;
    cursor: pointer;
}

/* ============================================ */
/* ============== MAIN CONTENT STYLES ============== */
/* ============================================ */
.main-content {
    padding: 25px;
    flex-grow: 1;
}

.content-header h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.card {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    padding: 20px;
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.card-content {
    width: 100%;
}

.card-content p {
    font-size: 1rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-content span {
    font-size: 2rem;
    font-weight: 600;
}

/* Table styles */
.table-container {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 20px;
    margin-top: 30px;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.table-header h3 { font-size: 1.2rem; }

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
thead tr { background-color: #e9ecef; }
tbody tr:last-child td { border-bottom: none; }

.table-search {
    position: relative;
    width: 300px;
}

.table-search i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.table-search input[type="search"] {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border: 1px solid #ced4da;
    border-radius: 20px;
    font-family: 'Kanit', sans-serif;
    font-size: 0.95rem;
}
.table-search input[type="search"]:focus {
    outline: none;
    border-color: var(--sidebar-active-bg);
}
/* จัดการความกว้างและการตัดคำของคอลัมน์ "เรื่องการประชุม" */
.table-container tbody td:nth-child(1) {
    max-width: 25ch; /* กำหนดความกว้างสูงสุดประมาณ 40 ตัวอักษร */
    overflow-wrap: break-word; /* สั่งให้ตัดคำยาวขึ้นบรรทัดใหม่ */
    word-break: break-word;
}

/* Pagination Styles */
.pagination-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.pagination-container button {
    background-color: white;
    border: 1px solid #ddd;
    color: var(--sidebar-active-bg);
    padding: 8px 14px;
    margin: 0 4px;
    cursor: pointer;
    border-radius: 5px;
    font-family: 'Kanit', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

.pagination-container button:hover { background-color: #f0f0f0; }
.pagination-container button.active {
    background-color: var(--sidebar-active-bg);
    color: white;
    border-color: var(--sidebar-active-bg);
}
.pagination-container button:disabled {
    color: #ccc;
    cursor: not-allowed;
    background-color: #f9f9f9;
}

/* ============================================ */
/* ============== CALENDAR & FORM & MODAL STYLES ============== */
/* ============================================ */
.calendar-container, .form-container {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 20px;
    margin-top: 30px;
}
.form-container {
    padding: 30px;
    max-width: 800px;
    margin: 0 auto;
}

.calendar-container h3,
#add-activity-form-container h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/* ✨ เพิ่มโค้ดนี้เข้าไปใหม่ ✨ */
#add-activity-form-container h3 i {
    margin-right: 10px;
    color: var(--sidebar-active-bg);
}
.calendar-container iframe {
    width: 100%;
    height: 500px;
    border-radius: 5px;
    border: 1px solid var(--border-color) !important;
}

#select-form-type-container {
    margin-bottom: 30px;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 25px;
}
#select-form-type-container label { font-size: 1.2rem; }

.form-group { margin-bottom: 20px; }
.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: #495057;
}

.form-group input[type="text"],
.form-group input[type="datetime-local"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-family: 'Kanit', sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--sidebar-active-bg);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.form-divider {/*
    border: 0;
    border-top: 1px solid #e9ecef;
    margin: 30px 0;*/
}
.form-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px; /* ระยะห่างระหว่างคอลัมน์ซ้าย-ขวา */
}
.form-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
}
.form-actions {
    text-align: center;
    margin-top: 30px;
}
.submit-btn {
    background-color: var(--sidebar-active-bg);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-family: 'Kanit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}
.submit-btn:hover { background-color: #0056b3; }

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    animation: fadeIn 0.3s;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
    background-color: #fefefe;
    margin: 8% auto;
    padding: 25px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px; /* ปรับค่านี้ให้เล็กลง */
    animation: slideIn 0.4s;
}

@keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}
.modal-close-btn {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.modal-close-btn:hover, .modal-close-btn:focus { color: black; }

#booking-summary p {
    margin: 0 0 12px 0;
    font-size: 1.05rem;
    line-height: 1.6;
}
#booking-summary p strong {
    display: inline-block;
    width: 160px;
    color: #555;
}

.modal-notice {
    margin-top: 25px;
    padding: 15px;
    background-color: #e7f3fe;
    border-left: 5px solid var(--sidebar-active-bg);
    font-size: 0.95rem;
    color: #31708f;
}
.modal-notice i { margin-right: 10px; }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.modal-btn {
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    font-family: 'Kanit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.modal-btn-primary {
    background-color: var(--sidebar-active-bg);
    color: white;
}
.modal-btn-primary:hover { background-color: #0056b3; }
.modal-btn-primary:disabled {
    background-color: #a0c7ff;
    cursor: not-allowed;
}

.modal-btn-secondary {
    background-color: #6c757d;
    color: white;
}
.modal-btn-secondary:hover { background-color: #5a6268; }

/* Styles for Today's Meetings Card */
.card-content.full-width { flex: 1; }
.meetings-list {
    margin-top: 8px;
    font-size: 0.9rem;
    max-height: 80px;
    overflow-y: auto;
    text-align: left;
    line-height: 1.6;
    color: #333;
}

.meeting-item {
    display: flex;
    margin-bottom: 4px;
}
.meeting-item .time {
    font-weight: 600;
    color: var(--sidebar-active-bg);
    margin-right: 10px;
    flex-shrink: 0;
    font-size: 1.0em;
}
.meeting-item .subject { font-size: 1.0em; }
.meetings-list .loading-text,
.meetings-list .no-meetings-text {
    color: var(--text-light);
    font-style: italic;
    font-size: 0.9em;
}
/* Styles for Management Page Table */
.table-wrapper {
    width: 100%;
    overflow-x: auto; /* ทำให้ตาราง scroll แนวนอนได้ */
}

#manage-table {
    white-space: nowrap; /* ป้องกันการตัดคำที่ไม่จำเป็นในเซลล์ */
}

.table-input {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    width: 150px; /* กำหนดความกว้างเริ่มต้นของ input */
    font-family: 'Kanit', sans-serif;
}

.action-btn-group {
    display: flex;
    gap: 8px;
}

.action-btn {
    padding: 6px 12px;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
}

.btn-send {
    background-color: var(--green-btn);
}

.btn-busy {
    background-color: var(--red-btn);
}
/* จัดการความกว้างคอลัมน์ "เรื่องการประชุม" ในหน้าจัดการการจอง */
#manage-table tbody td:nth-child(2) {
    max-width: 25ch;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}
/* Base style for action buttons in tables */
.action-btn {
    padding: 6px 12px;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-family: 'Kanit', sans-serif;
    transition: background-color 0.2s;
}

/* Style for the new manage button */
.manage-btn {
    background-color: #0d6efd; /* สีน้ำเงิน */
    width: 100%;
}

.manage-btn:hover {
    background-color: #0b5ed7; /* สีน้ำเงินเข้มขึ้นเมื่อ hover */
}
/* Styles for Management Modal */
#management-modal-body {
    max-height: 60vh;
    overflow-y: auto;
}
.detail-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px 15px;
}
.detail-grid p {
    margin: 0;
    line-height: 1.6;
}
.detail-grid p strong {
    color: #555;
}
.management-inputs {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
/* --- ปรับขนาด Popup จัดการรายการจอง (ลดขนาดลง) --- */

/* 1. ลดขนาดความกว้างโดยรวมของ Popup */
#management-modal .modal-content {
    max-width: 530px; /* ลดลงจาก 590px */
    margin: 5% auto;
}

/* 2. ลดขนาดตัวอักษรของรายละเอียดที่แสดง */
#management-modal .detail-grid p {
    font-size: 0.85rem;
}
#management-modal .detail-grid p strong {
    width: 125px;
}

/* 3. ลดขนาดช่องกรอกข้อมูลและป้ายกำกับ */
#management-modal .management-inputs .form-group label {
    font-size: 0.8rem;
}
#management-modal .management-inputs .table-input {
    font-size: 0.8rem;
    padding: 5px 9px;
}

/* 4. ลดขนาดปุ่มกดในส่วนท้าย */
#management-modal .modal-footer .modal-btn {
    font-size: 0.8rem;
    padding: 7px 18px;
}
/* --- ปรับขนาดองค์ประกอบในหน้าจัดการการจอง --- */

/* ลดขนาดหัวข้อหลักของหน้า */
#manage-bookings-page .content-header h2 {
    font-size: 1.6rem;
}

/* ลดขนาดหัวข้อของตาราง */
#manage-bookings-page .table-header h3 {
    font-size: 1.1rem;
}

/* ลดขนาดช่องค้นหา */
#manage-bookings-page .table-search {
    width: 270px;
}
#manage-bookings-page .table-search input[type="search"] {
    font-size: 0.85rem;
    padding: 9px 13px 9px 36px;
}

/* ลดขนาดตัวอักษรและระยะห่างในตาราง */
#manage-bookings-page table th,
#manage-bookings-page table td {
    padding: 10px 13px;
    font-size: 0.9rem;
}

/* ลดขนาดปุ่มจัดการในตาราง */
#manage-bookings-page .action-btn.manage-btn {
    padding: 5px 10px;
    font-size: 0.85em;
}

/* ลดขนาดปุ่มแบ่งหน้า */
#manage-bookings-page .pagination-container button {
    padding: 7px 12px;
    font-size: 0.9em;
}
/* --- ปรับขนาดตารางข้อมูลการจองในหน้า Dashboard --- */

/* ลดขนาดหัวข้อตาราง */
#dashboard .table-container .table-header h3 {
    font-size: 1.1rem;
}

/* ลดขนาดช่องค้นหาในตาราง */
#dashboard .table-container .table-search input[type="search"] {
    font-size: 0.85rem;
    padding: 8px 12px 8px 34px;
}

/* ลดขนาดตัวอักษรและระยะห่างในเซลล์ตาราง */
#dashboard .table-container table th,
#dashboard .table-container table td {
    font-size: 0.9rem;
    padding: 11px 13px;
}

/* ลดขนาดปุ่มแบ่งหน้าของตาราง */
#dashboard .table-container .pagination-container button {
    font-size: 0.9em;
    padding: 7px 12px;
}
/* --- ปรับขนาดองค์ประกอบในหน้าจองห้องประชุม --- */

/* ลดขนาดหัวข้อหลักของหน้า */
#room-booking .content-header h2 {
    font-size: 1.6rem;
}

/* ลดระยะห่างภายในฟอร์ม */
#room-booking .form-container {
    padding: 27px;
}

/* ลดขนาดตัวเลือกรูปแบบการประชุม */
#room-booking #select-form-type-container label {
    font-size: 1.1rem;
}

/* ลดขนาดป้ายกำกับ (Label) ของแต่ละช่อง */
#room-booking .form-group label {
    font-size: 0.9rem;
}

/* ลดขนาดช่องกรอกข้อมูลและ Dropdown */
#room-booking .form-group input,
#room-booking .form-group select {
    padding: 11px 13px;
    font-size: 0.9rem;
}

/* ลดขนาดหัวข้อย่อยในฟอร์ม */
#room-booking .form-section-title {
    font-size: 1.0rem;
}

/* ลดขนาดปุ่มส่งข้อมูล */
#room-booking .submit-btn {
    padding: 11px 27px;
    font-size: 0.9rem;
}
/* --- Styles for Status Colors in Tables --- */
.status-approved {
    color: #198754; /* สีเขียว */
    font-weight: 600;
}

.status-pending {
    color: #ffc107; /* รหัสสีสำหรับสีเหลือง */
    font-weight: 600;
}

.status-busy {
    color: #dc3545; /* สีแดง */
    font-weight: 600;
}
/* --- Styles for Status Buttons in Manage Table --- */

/* โค้ดหลักสำหรับปุ่ม (เพิ่มเข้ามา) */
.action-btn {
    padding: 6px 12px;
    border: none;
    color: white; /* <-- กำหนดให้ตัวอักษรเป็นสีขาว */
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-family: 'Kanit', sans-serif;
    transition: background-color 0.2s;
}

/* ปุ่มสถานะอนุมัติ (สีเขียว) */
.manage-btn.status-approved {
    background-color: #198754; 
}
.manage-btn.status-approved:hover {
    background-color: #146c43;
}

/* ปุ่มสถานะรออนุมัติ (สีเหลือง) */
.manage-btn.status-pending {
    background-color: #ffc107;
    color: #fff; /* กำหนดให้เป็นสีขาวตามที่ต้องการ */
}
.manage-btn.status-pending:hover {
    background-color: #ffca2c;
}

/* ปุ่มสถานะไม่ว่าง (สีแดง) */
.manage-btn.status-busy {
    background-color: #dc3545;
}
.manage-btn.status-busy:hover {
    background-color: #bb2d3b;
}
/* --- ปรับแก้ Popup ยืนยันข้อมูลการจองไม่ให้มี Scrollbar --- */

/* 1. กำหนดขนาดและความกว้างโดยรวม */
#confirmation-modal .modal-content {
    max-width: 445px;
    padding: 15px 25px; /* ลด Padding บน-ล่าง */
    margin: 3vh auto;   /* ลดระยะห่างจากขอบบนสุด */
}

/* 2. ลดระยะห่างของ Header */
#confirmation-modal .modal-header {
    padding-bottom: 10px;
    margin-bottom: 15px;
}
#confirmation-modal .modal-header h2 {
    font-size: 1.2rem;
}

/* 3. ทำให้ส่วนเนื้อหาไม่มี Scrollbar และกระชับขึ้น */
#confirmation-modal .modal-body {
    max-height: none;      /* เอาความสูงสูงสุดออก */
    overflow-y: visible; /* ไม่ต้องมี scrollbar */
    padding-right: 0;      /* เอาระยะห่าง scrollbar ออก */
}

/* 4. ลดระยะห่างระหว่างบรรทัดของรายละเอียด */
#confirmation-modal #booking-summary p {
    font-size: 0.85rem;
    margin-bottom: 8px; /* ลดระยะห่างท้ายบรรทัด */
    line-height: 1.4;   /* ลดความสูงของบรรทัด */
}
#confirmation-modal #booking-summary p strong {
    width: 130px;
}

/* 5. ลดระยะห่างของข้อความแจ้งเตือน */
#confirmation-modal .modal-notice {
    margin-top: 15px;
    padding: 10px;
    font-size: 0.8rem;
}

/* 6. ลดระยะห่างของส่วนท้ายและปุ่ม */
#confirmation-modal .modal-footer {
    margin-top: 20px;
    padding-top: 15px;
}
#confirmation-modal .modal-footer .modal-btn {
    font-size: 0.8rem;
    padding: 7px 18px;
}
/* --- Style for Success Modal Button --- */

#success-modal .modal-btn {
    background-color: var(--sidebar-active-bg); /* ใช้ตัวแปรสีน้ำเงินหลัก */
    color: white;
}

#success-modal .modal-btn:hover {
    background-color: #0b5ed7; /* สีน้ำเงินเข้มขึ้นเมื่อ hover */
}
/* --- ปรับขนาด Popup สถานะการบันทึก (ลดขนาด 30%) --- */

/* 1. ลดขนาดความกว้างและระยะห่างโดยรวม */
#success-modal .modal-content {
    max-width: 350px; /* ลดลงจาก 500px */
    padding: 20px 25px;
}

/* 2. ลดขนาดไอคอนและข้อความ */
#success-modal .modal-body i {
    font-size: 2.1em; /* ลดลงจาก 3em */
    margin-bottom: 10px;
}
#success-modal .modal-body p {
    font-size: 1.0em; /* ลดลงจาก 1.1em */
}

/* 3. ลดขนาดปุ่ม "ตกลง" */
#success-modal .modal-footer .modal-btn {
    font-size: 0.8rem; /* ลดลงจาก 1rem */
    padding: 7px 18px; /* ลดลงจาก 10px 25px */
}
/* --- Style for Action Result Modal Button --- */

#action-result-modal .modal-btn {
    background-color: var(--sidebar-active-bg);
    color: white;
}

#action-result-modal .modal-btn:hover {
    background-color: #0b5ed7;
}
/* --- ปรับขนาด Delete Confirm Modal (ลดขนาด 30%) --- */

#delete-confirm-modal .modal-content {
    max-width: 350px; /* ลดลงจากค่าเดิม */
    padding: 14px 17.5px; /* ลดลงจาก 20px 25px */
}

#delete-confirm-modal .modal-header h2 {
    font-size: 1.12em; /* ลดลงจากค่าเดิม */
}

#delete-confirm-modal .modal-body i {
    font-size: 2.1em; /* ลดลงจาก 3em */
    margin-bottom: 10.5px; /* ลดลงจาก 15px */
}

#delete-confirm-modal .modal-body p {
    font-size: 0.77em; /* ลดลงจาก 1.1em */
}

#delete-confirm-modal .modal-footer .modal-btn {
    font-size: 0.7rem; /* ลดลงจากค่าเดิม */
    padding: 7px 17.5px; /* ลดลงจาก 10px 25px */
}
/* --- ปรับขนาด Action Result Modal เมื่อกด "ไม่ว่าง" (ลดขนาดเพิ่มอีก 25%) --- */
#action-result-modal.unavailable-action .modal-content {
    max-width: 262px; /* ลดจาก 350px (350 * 0.75) */
    padding: 15px 18.75px; /* ลดจาก 20px 25px (20 * 0.75, 25 * 0.75) */
}

#action-result-modal.unavailable-action .modal-body i {
    font-size: 1.575em; /* ลดจาก 2.1em (2.1 * 0.75) */
    margin-bottom: 7.875px; /* ลดจาก 10.5px (10.5 * 0.75) */
}

#action-result-modal.unavailable-action .modal-body p {
    font-size: 0.58em; /* ลดจาก 0.77em (0.77 * 0.75) */
}

#action-result-modal.unavailable-action .modal-footer .modal-btn {
    font-size: 0.525rem; /* ลดจาก 0.7rem (0.7 * 0.75) */
    padding: 5.25px 13.125px; /* ลดจาก 7px 17.5px (7 * 0.75, 17.5 * 0.75) */
}
/* --- ปรับขนาดฟอร์มลงทะเบียนผู้ใช้งาน --- */

#class-management .form-container {
    max-width: 480px; /* ลดความกว้างสูงสุดลงเหลือ 60% (จากเดิม 800px) */
}
/* --- ปรับขนาดฟอร์มลงทะเบียนผู้ใช้งาน (ลดความสูง 10%) --- */

/* ลดระยะห่างภายในฟอร์ม */
#class-management .form-container {
    padding: 25px;
}

/* ลดระยะห่างระหว่างช่องกรอกข้อมูล */
#class-management .form-group {
    margin-bottom: 15px;
}

/* ลดขนาดช่องกรอกข้อมูลและป้ายกำกับ */
#class-management .form-group label {
    font-size: 0.9rem;
    margin-bottom: 6px;
}
#class-management .form-group input {
    font-size: 0.9rem;
    padding: 10px 12px;
}

/* ลดขนาดหัวข้อย่อย */
#class-management .form-section-title {
    font-size: 1.0rem;
    margin-bottom: 15px;
}

/* ลดขนาดปุ่มลงทะเบียน */
#class-management .submit-btn {
    font-size: 0.9rem;
    padding: 10px 25px;
}
/* --- Style for Registration Success Modal Button --- */

#registration-success-modal .modal-btn {
    background-color: var(--sidebar-active-bg); /* สีน้ำเงิน */
    color: white;
}

#registration-success-modal .modal-btn:hover {
    background-color: #0b5ed7; /* สีน้ำเงินเข้มขึ้นเมื่อ hover */
}
/* ===== Styles for Settings Modal (เพิ่มส่วนนี้เข้ามาใหม่) ===== */
.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5px;
    border-bottom: 1px solid #f0f0f0;
}
.settings-item:last-child {
    border-bottom: none;
}
.settings-item span {
    font-size: 1rem;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #007bff; /* สีเดียวกับ sidebar active */
}

input:focus + .slider {
    box-shadow: 0 0 1px #007bff;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
/* ===== Style for Delete Button (เพิ่มใหม่) ===== */
.btn-delete {
    background-color: #dc3545; /* สีแดง */
    color: white;              /* อักษรสีขาว */
}

.btn-delete:hover {
    background-color: #bb2d3b; /* สีแดงเข้มขึ้นเมื่อ hover */
}
/* ===== Styles for User Management Table (Scaled Down 10%) ===== */

/* ปรับขนาดหัวข้อและช่องค้นหา */
#manage-users-page .table-header h3 {
    font-size: 1.1rem;
}

#manage-users-page .table-search input[type="search"] {
    font-size: 0.85rem;
    padding: 9px 14px 9px 36px;
}

/* ปรับขนาดตัวอักษรและระยะห่างในตาราง */
#manage-users-page table th,
#manage-users-page table td {
    padding: 11px 14px;
    font-size: 0.9rem;
}

/* ปรับขนาดปุ่มจัดการและปุ่มลบ */
#manage-users-page .action-btn {
    padding: 5px 11px;
    font-size: 0.8em;
}

/* ปรับขนาดปุ่มแบ่งหน้า */
#manage-users-page .pagination-container button {
    padding: 7px 13px;
    font-size: 0.9em;
}
/* Style for Login Modal Note (เพิ่มใหม่) */
.login-note {
    color: #dc3545; /* สีแดง */
    font-size: 0.85rem;
    margin-top: 15px;
    line-height: 1.5;
    text-align: center;
}
/* เพิ่มใหม่: สไตล์สำหรับไอคอนโปรไฟล์เมื่อถูกปิดใช้งาน */
#user-profile-icon.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}
/* ===== สไตล์ใหม่สำหรับ Popup Login (เพิ่มใหม่ทั้งหมด) ===== */

/* ปรับ Body ของ Modal ให้จัดกลาง */
.login-body {
    text-align: center;
    padding: 20px 30px 30px 30px; /* เพิ่ม padding ด้านข้าง */
}

/* สไตล์ไอคอนผู้ใช้ด้านบน */
.login-icon {
    font-size: 4.5rem; /* ขนาดไอคอนใหญ่ขึ้น */
    color: #0d6efd;    /* สีน้ำเงิน */
    margin-bottom: 15px;
}

/* ปรับ Title "เข้าสู่ระบบ" */
.login-body h2 {
    margin-bottom: 25px;
    font-size: 1.8rem;
    color: #333;
}

/* ปรับป้ายกำกับ (Label) ของช่องกรอกข้อมูล */
.login-body .form-group label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    font-weight: 500;
    color: #555;
}

/* ปรับช่องกรอกข้อมูล (Input) */
.login-body .form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px; /* ทำให้โค้งมนมากขึ้น */
    background-color: #f7f7f7;
    font-family: 'Kanit', sans-serif;
    font-size: 1rem;
    box-sizing: border-box; /* สำคัญมาก! */
}

.login-body .form-group input:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
}

/* ปรับปุ่ม Login */
.login-body #login-submit-btn {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background-color: #0d6efd;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.login-body #login-submit-btn:hover {
    background-color: #0b5ed7;
}

/* ปรับปุ่มปิด (X) ให้อยู่มุมขวาบน */
.modal-content .modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

.modal-content .modal-close-btn:hover {
    color: #333;
}

/* ลบ Header และ Footer เดิมของ Modal นี้ออกไป */
#login-modal .modal-header,
#login-modal .modal-footer {
    display: none;
}
/* ===== ลดขนาด Popup Login ลง 30% (เพิ่มใหม่) ===== */

/* 1. กำหนดขนาดสูงสุดใหม่ للـ popup */
#login-modal .modal-content {
    max-width: 280px; /* ลดจาก 400px */
}

/* 2. ลดขนาดไอคอนและ Title */
#login-modal .login-icon {
    font-size: 3.5rem; /* ลดจาก 4.5rem */
}

#login-modal .login-body h2 {
    font-size: 1.5rem; /* ลดจาก 1.8rem */
    margin-bottom: 20px;
}

/* 3. ลดขนาดช่องกรอกข้อมูลและปุ่ม */
#login-modal .login-body .form-group input,
#login-modal .login-body #login-submit-btn {
    padding: 10px 12px; /* ลด padding ลงเล็กน้อย */
    font-size: 0.9rem;  /* ลดขนาดตัวอักษร */
}

#login-modal .login-body #login-submit-btn {
    font-size: 1rem;
}

/* 4. ลดขนาดหมายเหตุ */
#login-modal .login-note {
    font-size: 0.75rem;
}
/* ===== ลดความสูง Popup Login ลง 10% (ลดพื้นที่ว่าง) ===== */

/* 1. ลด padding แนวตั้งของตัว popup หลัก */
#login-modal .login-body {
    padding-top: 15px;
    padding-bottom: 20px;
}

/* 2. ลดระยะห่างของไอคอนและ Title */
#login-modal .login-icon {
    margin-bottom: 10px; /* ลดระยะห่างด้านล่างไอคอน */
}

#login-modal .login-body h2 {
    margin-bottom: 20px; /* ลดระยะห่างด้านล่าง Title */
}

/* 3. ลดระยะห่างระหว่างช่องกรอกข้อมูล */
#login-modal .login-body .form-group {
    margin-bottom: 12px; /* ลดระยะห่างระหว่างช่อง Username/Password */
}

/* 4. ลดระยะห่างบนปุ่ม Login */
#login-modal .login-body #login-submit-btn {
    margin-top: 10px;
}
/* สไตล์สำหรับลิงก์ไปหน้าลงทะเบียนใน Popup Login */
.registration-link-container {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: #555;
}

#show-registration-link {
    color: #007bff;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

#show-registration-link:hover {
    text-decoration: underline;
}
/* ===== ลดขนาด Popup Login ลงอีก 10% (อัปเดตล่าสุด) ===== */

/* 1. กำหนดขนาดสูงสุดใหม่ للـ popup */
#login-modal .modal-content {
    max-width: 250px; /* ลดจาก 280px */
}

/* 2. ลดขนาดไอคอนและ Title ให้สมส่วน */
#login-modal .login-icon {
    font-size: 3.2rem; /* ลดจาก 3.5rem */
}

#login-modal .login-body h2 {
    font-size: 1.4rem; /* ลดจาก 1.5rem */
}

/* 3. ลดขนาดหมายเหตุลงอีกเล็กน้อย */
#login-modal .login-note {
    font-size: 0.7rem;
}
/* ===== ลดขนาด Popup Login ลงอีก 10% (อัปเดตล่าสุด) ===== */

/* 1. กำหนดขนาดสูงสุดใหม่ للـ popup */
#login-modal .modal-content {
    max-width: 250px; /* ลดจาก 280px */
}

/* 2. ลดขนาดไอคอนและ Title ให้สมส่วน */
#login-modal .login-icon {
    font-size: 3.2rem; /* ลดจาก 3.5rem */
}

#login-modal .login-body h2 {
    font-size: 1.4rem; /* ลดจาก 1.5rem */
}

/* 3. ลดขนาดหมายเหตุลงอีกเล็กน้อย */
#login-modal .login-note {
    font-size: 0.7rem;
}
/* ===== ลดขนาด Popup Login เพิ่มเติม (อัปเดตล่าสุด) ===== */

/* 1. ลดขนาดโดยรวมลงอีก 10% */
#login-modal .modal-content {
    max-width: 225px; /* ลดจาก 250px */
}

/* 2. ลดระยะห่างแนวตั้งลงอีก 15% */
#login-modal .login-body {
    padding-top: 10px;      /* ลดลง */
    padding-bottom: 15px;   /* ลดลง */
}

#login-modal .login-icon {
    font-size: 3rem;        /* ลดลง */
    margin-bottom: 8px;     /* ลดลง */
}

#login-modal .login-body h2 {
    font-size: 1.3rem;      /* ลดลง */
    margin-bottom: 15px;    /* ลดลง */
}

#login-modal .login-body .form-group {
    margin-bottom: 10px;    /* ลดลง */
}

#login-modal .login-body #login-submit-btn {
    margin-top: 8px;       /* ลดลง */
}

#login-modal .registration-link-container {
    margin-top: 15px;       /* ลดลง */
}
/* ===== ลดขนาด Popup Login ลงอีก 10% (อัปเดตล่าสุด) ===== */

#login-modal .modal-content {
    max-width: 100px; /* ลดจาก 225px */
}
/* ============================================ */
/* ============== RESPONSIVE STYLES (MOBILE) ============== */
/* ============================================ */

/* กำหนดให้สไตล์ข้างในนี้ทำงานเมื่อหน้าจอกว้างไม่เกิน 768px */
@media (max-width: 768px) {

    /* --- 1. ปรับ Sidebar --- */
    .sidebar {
        position: fixed; /* ทำให้ลอยทับเนื้อหาอื่น */
        left: 0;
        top: 0;
        height: 100%;
        z-index: 1001; /* ให้อยู่เหนือทุกอย่าง */
        transform: translateX(-100%); /* ซ่อนไว้ทางซ้ายนอกจอ */
        transition: transform 0.3s ease-in-out;
    }

    .sidebar.open {
        transform: translateX(0); /* เลื่อนกลับเข้ามาในจอเมื่อมี class 'open' */
    }

    /* --- 2. ปรับ Header และ Main Content --- */
    .header-left span {
        display: none; /* ซ่อนชื่อระบบยาวๆ ใน Header */
    }

    .main-wrapper {
        width: 100%;
    }

    .main-content {
        padding: 15px; /* ลดระยะห่างรอบๆ */
    }

    /* ================================================================= */
    /* == จัดการการตัดคำในคอลัมน์แรกของตารางกิจกรรม (Mobile) == */
    /* ================================================================= */
    
    #activity-table td:first-child,
    #dashboard table td:first-child {
        white-space: normal;      /* อนุญาตให้ขึ้นบรรทัดใหม่ (สำคัญที่สุด) */
        max-width: 25ch;          /* กำหนดความกว้างสูงสุดประมาณ 25 ตัวอักษร */
        overflow-wrap: break-word; /* ช่วยตัดคำยาวๆ ที่ไม่มีเว้นวรรค */
    }
    

    /* --- 3. แสดงปุ่มแฮมเบอร์เกอร์ --- */
    #hamburger-menu {
        display: block; /* แสดงปุ่ม */
        font-size: 1.5rem;
        cursor: pointer;
    }

    /* --- 4. ปรับการแสดงผลการ์ดสรุป --- */
    .summary-cards {
        grid-template-columns: 1fr; /* เปลี่ยนจาก 3 คอลัมน์เป็น 1 คอลัมน์ */
    }
    
    /* --- 5. ปรับฟอร์ม --- */
    .form-row, .form-layout-grid {
        grid-template-columns: 1fr; /* เปลี่ยนจาก 2 คอลัมน์เป็น 1 คอลัมน์ */
    }

    .form-container {
        padding: 15px;
    }
    
    /* --- 6. ปรับ Modal ให้เหมาะสม --- */
    .modal-content {
        margin: 15% auto; /* ลดระยะห่างจากขอบบน */
    }
}

/* --- ซ่อนปุ่มแฮมเบอร์เกอร์ในหน้าจอปกติ (Desktop) --- */
#hamburger-menu {
    display: none;
}
/* ============================================ */
/* ============== MOBILE TOP NAV STYLES ============== */
/* ============================================ */

/* ซ่อนเมนูด้านบนในหน้าจอ Desktop เป็นค่าเริ่มต้น */
.top-mobile-nav {
    display: none;
}

@media (max-width: 768px) {
    /* --- 1. แสดงผลเมนูด้านบน และซ่อน Sidebar เดิม --- */
    .top-mobile-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #007bff; /* เปลี่ยนพื้นหลังเป็นสีฟ้า */
        padding: 5px 0;
        position: sticky;
        top: 60px;
        z-index: 998;
    }

    .sidebar {
        display: none; 
    }

    .main-wrapper {
        width: 100%;
    }

    /* --- 2. จัดรูปแบบลิงก์ในเมนูด้านบน --- */
    .top-mobile-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.8); /* เปลี่ยนสีไอคอนและตัวอักษรเป็นสีขาวโปร่งแสง */
        padding: 5px 8px;
        font-size: 0.7rem;
        transition: color 0.2s;
    }

    .top-mobile-nav a i {
        font-size: 1.4rem;
        margin-bottom: 2px;
    }

    /* --- 3. สไตล์สำหรับเมนูที่ถูกเลือก (Active) --- */
    .top-mobile-nav a.active {
        color: #ffffff; /* เปลี่ยนเป็นสีขาวทึบเมื่อถูกเลือก */
        font-weight: bold;
    }

    /* --- 4. ปรับแก้ Header และ Main Content --- */
    .header {
        position: sticky;
        top: 0;
        z-index: 999;
    }

    #hamburger-menu {
        display: none;
    }
}
/* ============================================ */
/* == RESPONSIVE TABLES (ปรับปรุงตารางบน Mobile) == */
/* ============================================ */

@media (max-width: 768px) {

    /* 1. ทำให้ Container ของตารางสามารถ Scroll ด้านข้างได้ */
    .table-container, .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* ทำให้ Scroll ลื่นบน iOS */
    }

    /* 2. ปรับขนาดตัวอักษรและระยะห่างในตารางทั้งหมด */
    #dashboard table th, #dashboard table td,
    #manage-table th, #manage-table td,
    #user-table th, #user-table td,
    #history-page table th, #history-page table td, /* <-- เพิ่มตาราง history เข้าไปด้วย */
    #activity-table th, #activity-table td { /* <-- และตาราง activity */
        font-size: 0.85rem; /* ลดขนาดตัวอักษรลงเล็กน้อย */
        padding: 8px 10px;   /* ลดระยะห่างภายในเซลล์ */
        white-space: nowrap; /* << บรรทัดนี้สำคัญที่สุด: ป้องกันไม่ให้ข้อความตัดขึ้นบรรทัดใหม่ */
    }

    /* 3. ปรับขนาดปุ่มในตารางจัดการให้เล็กลงอีก */
    #manage-table .action-btn,
    #user-table .action-btn {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    /* 4. ปรับแก้ Header ของตารางให้ดูดีขึ้น */
    .table-header {
        flex-direction: column; /* ทำให้หัวข้อกับช่องค้นหาเรียงแนวตั้ง */
        align-items: flex-start;
        gap: 10px;
    }

    .table-search {
        width: 100%; /* ทำให้ช่องค้นหาเต็มความกว้าง */
    }
}
/* ===== สไตล์สำหรับ Popup กำลังโหลด (เพิ่มใหม่) ===== */
#loading-modal {
    /* ทำให้พื้นหลังโปร่งใสกว่าปกติเล็กน้อย */
    background-color: rgba(0,0,0,0.4);
}

#loading-modal .modal-content {
    /* ไม่มี Header และ Footer */
    padding: 35px 20px;
    border-radius: 15px;
}

/* ทำให้ไอคอนหมุน */
.fa-spin {
    animation: fa-spin 1.5s infinite linear;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* จัดการการตัดคำในตารางประวัติการจอง */
#history-table tbody td:first-child {
    max-width: 25ch;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}
/* ===== ลดขนาด Popup ลงทะเบียนผู้ใช้งานลง 15% (เพิ่มใหม่) ===== */

/* 1. ลดขนาดความกว้างของ Popup */
#registration-modal .modal-content {
    max-width: 425px; /* ลดจาก 500px */
}

/* 2. ลดขนาดตัวอักษรและระยะห่างภายในฟอร์ม */
#registration-modal .form-group {
    margin-bottom: 15px; /* ลดระยะห่างระหว่างช่อง */
}

#registration-modal .form-group label {
    font-size: 0.9rem;
    margin-bottom: 6px;
}

#registration-modal .form-group input {
    font-size: 0.9rem;
    padding: 10px 12px;
}

/* 3. ลดขนาดปุ่มลงทะเบียน */
#registration-modal .submit-btn {
    font-size: 0.9rem;
    padding: 10px 25px;
}

/* --- ปรับขนาดตารางข้อมูลการจองในหน้า Dashboard และหน้าประวัติการจอง --- */

/* ลดขนาดหัวข้อตาราง */
#dashboard .table-container .table-header h3,
#history-page .table-container .table-header h3 {
    font-size: 1.1rem;
}

/* ลดขนาดช่องค้นหาในตาราง */
#dashboard .table-container .table-search input[type="search"],
#history-page .table-container .table-search input[type="search"] {
    font-size: 0.85rem;
    padding: 8px 12px 8px 34px;
}

/* ลดขนาดตัวอักษรและระยะห่างในเซลล์ตาราง */
#dashboard .table-container table th,
#dashboard .table-container table td,
#history-page .table-container table th,
#history-page .table-container table td {
    font-size: 0.9rem;
    padding: 11px 13px;
}

/* ลดขนาดปุ่มแบ่งหน้าของตาราง */
#dashboard .table-container .pagination-container button,
#history-page .table-container .pagination-container button {
    font-size: 0.9em;
    padding: 7px 12px;
}

/* ===== สไตล์สำหรับปุ่มคัดลอก (เพิ่มใหม่) ===== */
.modal-footer .btn-copy {
    background-color: #17a2b8; /* สีฟ้าอมเขียว */
    color: white;
    margin-right: auto; /* ดันปุ่มนี้ไปอยู่ด้านซ้ายสุด */
}

.modal-footer .btn-copy:hover {
    background-color: #138496;
}
/* ===== Styles for Password Visibility Toggle (เพิ่มใหม่) ===== */
.password-container {
    position: relative;
}

.password-container input {
    /* เพิ่มระยะห่างด้านขวาในช่อง input เพื่อไม่ให้ข้อความทับไอคอน */
    padding-right: 45px !important;
}

.password-container i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
}

.password-container i:hover {
    color: #333;
}
/* ================================================================= */
/* == ลดขนาดตารางกิจกรรมลง 10% == */
/* ================================================================= */

/* 1. ลดขนาดหัวข้อของตาราง */
#activity-calendar .table-header h3 {
    font-size: 1.08rem; /* จาก 1.2rem */
}

/* 2. ลดขนาดช่องค้นหา */
#activity-calendar .table-search input[type="search"] {
    font-size: 0.85rem; /* จาก 0.95rem */
    padding: 9px 14px 9px 36px; /* จาก 10px 15px 10px 40px */
}

/* 3. ลดขนาดตัวอักษรและระยะห่างในเซลล์ตาราง */
#activity-table th,
#activity-table td {
    font-size: 0.9rem; /* ลดขนาดตัวอักษรหลัก */
    padding: 11px 14px; /* จาก 12px 15px */
}

/* 4. ลดขนาดปุ่มแบ่งหน้า */
#activity-pagination-container button {
    font-size: 0.9rem;
    padding: 7px 13px; /* จาก 8px 14px */
}
/* ================================================================= */
/* == สไตล์สำหรับปุ่มเพิ่มสมาชิก และจัดเรียง Action ใน Header == */
/* ================================================================= */

.table-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* ระยะห่างระหว่างปุ่มกับช่องค้นหา */
}

#add-user-btn {
    background-color: #198754; /* สีเขียว */
    padding: 10px 15px;
    white-space: nowrap; /* ป้องกันปุ่มตัดคำ */
}

#add-user-btn:hover {
    background-color: #157347; /* สีเขียวเข้มขึ้นเมื่อ hover */
}

#add-user-btn i {
    margin-right: 8px; /* ระยะห่างระหว่างไอคอนกับข้อความ */
}

/* ================================================================= */
/* == ลดขนาด Popup ลงทะเบียนผู้ใช้งานลง 15% == */
/* ================================================================= */

/* 1. ลดขนาดความกว้างของ Popup */
#registration-modal .modal-content {
    max-width: 425px; /* ลดจาก 500px */
}

/* 2. ลดขนาดตัวอักษรของหัวข้อ */
#registration-modal .modal-header h2 {
    font-size: 1.25rem; /* ลดจาก 1.5rem */
}

/* 3. ลดขนาดตัวอักษรและระยะห่างภายในฟอร์ม */
#registration-modal .form-group {
    margin-bottom: 15px; /* ลดระยะห่างระหว่างช่อง */
}

#registration-modal .form-group label {
    font-size: 0.9rem;
    margin-bottom: 6px;
}

#registration-modal .form-group input {
    font-size: 0.9rem;
    padding: 10px 12px;
}

/* 4. ลดขนาดปุ่มลงทะเบียน */
#registration-modal .submit-btn {
    font-size: 0.9rem;
    padding: 10px 25px;
}


/* ================================================================= */
/* == ลดขนาดฟอร์มบันทึกกิจกรรมใหม่ลง 15% == */
/* ================================================================= */

/* 1. ลดขนาดหัวข้อของฟอร์ม */
#add-activity-form-container h3 {
    font-size: 1.0rem; /* ลดจาก 1.2rem */
    margin-bottom: 15px;
}

/* 2. ลดขนาดป้ายกำกับ (Label) และระยะห่าง */
#activity-form .form-group label {
    font-size: 0.85rem;
    margin-bottom: 6px;
}

/* 3. ลดขนาดช่องกรอกข้อมูล */
#activity-form .form-group input {
    font-size: 0.85rem;
    padding: 10px 12px;
}

/* 4. ลดขนาดปุ่มส่งข้อมูล */
#activity-form .submit-btn {
    font-size: 0.85rem;
    padding: 10px 25px;
}

/* 5. ลดระยะห่างระหว่างแถว */
#activity-form .form-row {
    gap: 20px;
}

/* ================================================================= */
/* == ซ่อน/แสดงองค์ประกอบตามสถานะการล็อกอิน == */
/* ================================================================= */
.logged-in-only {
    display: none;
}

/* ================================================================= */
/* == ลดขนาด Popup แก้ไขข้อมูลกิจกรรมลง 30% == */
/* ================================================================= */

/* 1. ลดขนาดความกว้างโดยรวมของ Popup */
#activity-edit-modal .modal-content {
    max-width: 390px; /* ลดจาก 550px */
    padding: 20px 25px;
}

/* 2. ลดขนาดหัวข้อของ Popup */
#activity-edit-modal .modal-header h2 {
    font-size: 1.2rem;
}

/* 3. ลดขนาดและระยะห่างของฟอร์ม */
#activity-edit-modal .form-group {
    margin-bottom: 15px; /* ลดระยะห่างระหว่างช่อง */
}

#activity-edit-modal .form-group label {
    font-size: 0.85rem;
    margin-bottom: 5px;
}

#activity-edit-modal .form-group input {
    font-size: 0.9rem;
    padding: 10px 12px;
}

/* 4. ลดขนาดปุ่มในส่วนท้าย */
#activity-edit-modal .modal-footer .modal-btn {
    font-size: 0.9rem;
    padding: 8px 20px;
}

/* ================================================================= */
/* == ลดขนาด Popup โปรดตรวจสอบข้อมูลกิจกรรมลง 30% == */
/* ================================================================= */

/* 1. ลดขนาดความกว้างโดยรวมของ Popup */
#activity-confirmation-modal .modal-content {
    max-width: 350px; /* ลดจาก 500px */
    padding: 20px 25px;
}

/* 2. ลดขนาดหัวข้อของ Popup */
#activity-confirmation-modal .modal-header h2 {
    font-size: 1.2rem;
}

/* 3. ลดขนาดตัวอักษรของรายละเอียดที่แสดง */
#activity-confirmation-modal #activity-summary p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

#activity-confirmation-modal #activity-summary p strong {
    width: 140px; /* ปรับความกว้างของ Label ให้เหมาะสม */
}

/* 4. ลดขนาดปุ่มในส่วนท้าย */
#activity-confirmation-modal .modal-footer {
    margin-top: 20px;
    padding-top: 15px;
}

#activity-confirmation-modal .modal-footer .modal-btn {
    font-size: 0.9rem;
    padding: 8px 20px;
}

/* ================================================================= */
/* == ลดขนาด Popup ลงทะเบียนผู้ใช้งานลง 40% == */
/* ================================================================= */

/* 1. ลดขนาดความกว้างโดยรวมของ Popup */
#registration-modal .modal-content {
    max-width: 255px; /* ลดจาก 425px (ลดลง 40%) */
    padding: 12px 18px;
}

/* 2. ลดขนาดหัวข้อของ Popup */
#registration-modal .modal-header h2 {
    font-size: 1.0rem;
}

/* 3. ลดขนาดและระยะห่างของฟอร์ม */
#registration-modal .form-group {
    margin-bottom: 10px;
}

#registration-modal .form-group label {
    font-size: 0.75rem;
    margin-bottom: 3px;
}

#registration-modal .form-group input {
    font-size: 0.8rem;
    padding: 7px 9px;
}

/* 4. ลดขนาดปุ่มในส่วนท้าย */
#registration-modal .submit-btn {
    font-size: 0.8rem;
    padding: 7px 18px;
}
/* style.css */

/* ทำให้ข้อความใน Popup รองรับการเว้นบรรทัด (\n) */
#action-result-message {
    white-space: pre-line; 
    line-height: 1.6;
    color: #333;
}

/* ================================================================= */
/* == สไตล์สำหรับปุ่ม ThaiD และเส้นแบ่ง (เพิ่มใหม่) == */
/* ================================================================= */

/* เส้นแบ่งคำว่า "หรือ" */
.login-divider {
    text-align: center;
    margin: 15px 0 10px 0;
    position: relative;
}
.login-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid #ddd;
    z-index: 1;
}
.login-divider span {
    background: #fefefe; /* สีพื้นหลังเดียวกับ modal-content */
    padding: 0 10px;
    color: #888;
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
}

/* ปุ่มเข้าสู่ระบบด้วย ThaiD (อิงตามภาพตัวอย่าง) */
.thaid-btn {
    width: 100%;
    padding: 10px 15px;
    background-color: #ffffff; /* พื้นหลังสีขาว */
    border: 1px solid #333333; /* ขอบสีดำ/เทาเข้ม */
    border-radius: 8px; /* มุมโค้งมนให้เข้ากับปุ่มบน */
    font-family: 'Kanit', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #333333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

.thaid-btn:hover {
    background-color: #f8f9fa;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.thaid-btn img {
    height: 22px; /* ขนาดความสูงของโลโก้ ThaiD */
    margin-left: 8px; /* เว้นวรรคระหว่างข้อความกับรูป */
}