.admin {
    display: flex;
    flex-direction: column
}
.admin .eheader1 {
    background-color: #969696;
    border-radius: 10px;
    padding: 5px 20px;
    font-family: psuStidi-Bold;
    color: white;
}
.admin .ebtn-add {
    border-radius: 20px;
    width: auto;
    height: auto;
    padding: 5px 10px;
    background-color: #969696;
}
.admin .activity-section {
    padding: 20px;
    font-family: Arial, sans-serif;
}

.admin .activity-title {
        background-color: #808080; /* สีเทาสำหรับปุ่ม */
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
    }

.admin .activity-grid {
    display: flex;
    gap: 10px; /* ระยะห่างระหว่างกล่อง */
    margin-top: 20px;
}

.admin .activity-box {
    width: 100px;
    height: 100px;
    background-color: #d3d3d3; /* สีเทาอ่อน */
    border-radius: 5px;
}

.admin .add-box {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
}

.admin .add-box span {
    font-weight: bold;
    font-size: 32px;
}
.admin .table-com {
    display: flex;
    flex-direction: column;
}
.admin .etbody {
    display: flex;
    flex-direction: column;
}
.admin .etbody .etrow {
    border-radius: 10px;
    padding: 5px 0px;
    display: flex;
    flex-direction: column;
    background-color: #F5F5F5;
}
#complaintTable {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-out;
}
.admin .stats {
    font-size: 0.8rem;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.admin .stats .box-stat {
    padding: 5px 10px;
    border-radius: 10px;
    background-color: var(--gray-color1);
    flex: 1;
    min-width: max-content;
    text-align: center;
}
.admin .stats .box-stat .count{
    font-size: 2rem;
}
.etable {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.8rem;
}
.etable th, .etable td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.etable tr:nth-child(even) {
    background-color: #f2f2f2;
}
.etable thead {
    background-color: #969696;
    color: white;
}
.etable thead th{
    text-align: center;
}
.admin textarea {
    min-height: 200px !important;
}
.admin .pagination {
    margin-top: 10px;
    justify-content: center;
}
.admin .ebtn {
    width: 80%;
    text-align: center;
    margin: 5px;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
}

.admin #AddEventData {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out, padding 0.3s ease-out;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding: 0;
}

.admin #AddEventData.active {
    max-height: 2000px; /* Adjust this value based on your content height */
    opacity: 1;
    margin-top: 20px;
}

/* Optional: Add animation for form elements */
.admin #AddEventData form {
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease-out 0.1s; /* Delayed animation */
}

.admin #AddEventData.active form {
    transform: translateY(0);
    opacity: 1;
}

/* Optional: Add animation for the toggle button */
.admin .toggle-btn-rotate {
    transition: transform 0.3s ease;
}

.admin .toggle-btn-rotate.active {
    transform: rotate(45deg);
}

.admin .conbox {
    background-color: #f5f5f5;
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 10px;
}

.admin .conbox .etopic {
    background-color: #DAFFE1;
    border-radius: 15px;
    display: flex;
    align-items: center;
    color: black;
    font-size: 1.1rem;
    min-width: 150px;
    width: fit-content;
    margin-bottom: 20px;
    padding: 5px 10px;
}

.admin .conbox .etopic span {
    border-radius: 50%;
    background-color: #BCEAC6;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 1.8rem;
    font-family: psuStidi-Regular;
    margin-right: 15px;
}
.admin .conbox label {
    font-family: psuStidi-Bold;
    padding-left: 10px;
    margin-bottom: 0.1rem !important;
}
.admin .conbox .ex-text {
    font-family: psuStidi-Regular;
    padding-left: 10px;
    font-size: 0.75rem;
    color: red;
}
.custom-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    padding: 10px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background-color: #ffffff;
}

    .custom-upload:hover {
        border-color: #007bff;
        background-color: #f8f9fa;
    }

/* Upload Text Style */
.upload-text {
    font-size: 16px;
    color: #777;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

/* Upload Icon Style */
.upload-icon {
    color: #777;
}

/* Input File Hidden */
.custom-upload input[type="file"] {
    display: none;
}

/* File Name Text */
.file-name-text {
    font-size: 14px;
    color: #555;
    margin-top: 8px;
}
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24
}

/* File Preview */
.file-preview {
    display: block;
    margin-top: 8px;
    max-width: 100%;
    max-height: 200px;
    border: 1px solid #ddd;
    border-radius: 4px;
    object-fit: cover;
}
.event-form-container {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out, padding 0.3s ease-out;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding: 0;
    background: #f9f9f9;
    border: 1px solid #ccc;
}

    .event-form-container.active {
        max-height: 1200px; /* Increased to accommodate the larger form */
        opacity: 1;
        margin-top: 20px;
        padding: 20px;
    }

    .event-form-container form {
        transform: translateY(20px);
        opacity: 0;
        transition: all 0.3s ease-out 0.1s;
    }

    .event-form-container.active form {
        transform: translateY(0);
        opacity: 1;
    }

.form-group {
    margin-bottom: 1rem;
}

.row {
    display: flex;
    margin: 0 -10px;
    flex-wrap: wrap;
}


.ad-com .table-responsive {
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ad-com .custom-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

    .ad-com .custom-table thead {
        background: #fafafa;
    }

        .ad-com .custom-table thead th {
            color: #503690;
            font-weight: 600;
            padding: 12px 16px;
            border-bottom: 2px solid #eee;
        }

    .ad-com .custom-table tbody td {
        padding: 12px 16px;
        color: #333;
        border-bottom: 1px solid #eee;
    }

    /* สลับสีแถว */
    .ad-com .custom-table tbody tr:nth-child(odd) {
        background: #fcfcfc;
    }

    .ad-com .custom-table tbody tr:nth-child(even) {
        background: #f5f5f5;
    }
    /* hover effect */
    .ad-com .custom-table tbody tr:hover {
        background: #e1e1ff;
    }

.ad-com td, .ad-com th {
    text-align: center;
}
.ad-com td .medal {
    display: flex;
    align-items: center;
    justify-content: center;
}

/******************* new page from V.2 *******************/
.actpage {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.calendar-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: 10px 0px;
}
    /* Make scrollbar thin by default */
    .calendar-container::-webkit-scrollbar {
        width: 5px; /* Thin scrollbar */
        height: 10px;
    }

    /* Make the track transparent */
    .calendar-container::-webkit-scrollbar-track {
        background: transparent;
    }

    /* Style the thumb to be barely visible by default */
    .calendar-container::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2); /* Light, semi-transparent color */
        border-radius: 10px; /* Rounded corners */
        transition: background-color 0.2s ease-in-out, width 0.2s ease-in-out;
    }

    /* On hover over the scrollable area, make the scrollbar thumb more visible */
    .calendar-container:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.5); /* Darker, more opaque color */
    }

    /* Optional: Make the scrollbar slightly wider on hover over the area */
    .calendar-container:hover::-webkit-scrollbar {
        width: 8px;
    }

.calendar-table {
    background-color: #eee;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 90%;
    min-width: 800px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0px auto;
    padding: 10px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    font-size: 1.2rem;
    margin-bottom: 10px;
    padding: 5px;
    font-weight: bold;
}

    .calendar-header button {
        background: none;
        border: none;
        font-size: 16px;
        cursor: pointer;
    }

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

    .calendar-grid.underline {
        border-bottom: 2px solid black;
        margin-bottom: 0.2rem;
    }

    .calendar-grid .day-name {
        text-align: center;
    }

    .calendar-grid .calendar-day {
        background: #fff;
        padding: 16px;
        text-align: center;
        position: relative;
        cursor: pointer;
        width: 100%;
        overflow: hidden; /* <-- สำคัญถ้าไม่ใส่ที่ span */
    }

    .calendar-grid div.highlight {
        background: #ff9800;
        color: #fff;
    }

        .calendar-grid div.highlight span {
            display: block;
            margin-top: 8px;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden; /* 🔑 ต้องมี */
            text-overflow: ellipsis; /* 🔑 ต้องมี */

            width: 100%;
        }

.day-name {
    background: #eee;
    font-weight: bold;
}


/*
     const getStatusDisplay = (status) => {
            let displayHtml = '';
            let statusClass = '';
            let description = '';

            if (status === "ยังไม่เปิด") {
                displayHtml = `<div>Upcoming</div>`;
                statusClass = 'status-upcoming'; // For CSS styling
            } else if (status === "ปิดแล้ว") {
                displayHtml = `<div>Closed</div>`;
                statusClass = 'status-closed'; // For CSS styling
            } else { // status === "เปิด"
                displayHtml = `<div>Opening</div>`;
                statusClass = 'status-opening'; // For CSS styling
            }

            // You could return more structured HTML here, e.g., with a span for description
            return `<div class="registration-status ${statusClass}"> &#8226; ${displayHtml}</div>`;
        };
                const regStatus = getRegistrationStatus(event);


        function renderEventList(data) {
        const container = document.getElementById("eventListContainer");
        container.innerHTML = "";

        const getStatusDisplay = (status) => {
            let displayHtml = '';
            let statusClass = '';
            let description = '';

            if (status === "ยังไม่เปิด") {
                displayHtml = `<div>Upcoming</div>`;
                statusClass = 'status-upcoming'; // For CSS styling
            } else if (status === "ปิดแล้ว") {
                displayHtml = `<div>Closed</div>`;
                statusClass = 'status-closed'; // For CSS styling
            } else { // status === "เปิด"
                displayHtml = `<div>Opening</div>`;
                statusClass = 'status-opening'; // For CSS styling
            }

            // You could return more structured HTML here, e.g., with a span for description
            return `<div class="registration-status ${statusClass}"> &#8226; ${displayHtml}</div>`;
        };

        data.forEach((event, index) => {
            const start = new Date(event.startDate);
            const end = new Date(event.endDate);
            const regStatus = getRegistrationStatus(event);

            const regBtn = event.isRegistered
                ? `<span class="text-success">${regStatus.isBackup ? "สมัคร (ตัวสำรองแล้ว)" : "สมัครแล้ว"}</span>`
                : (regStatus.canRegister
                    ? `<button class="regist-btn" data-uid="${event.uid}" data-backup="${regStatus.isBackup}">
                ${regStatus.isBackup ? "สมัคร (ตัวสำรอง)" : "สมัครกิจกรรม"}
           </button>`
                    : `<span class="text-muted">${regStatus.status}</span>`);
            const openStatus = getStatusDisplay(regStatus.status);
            const totalStats = !event.maxRegist
                ? `-`
                : event.currentRegistry != event.maxRegist
                    ? `${event.currentRegistry ?? '0'}/${event.maxRegist}`
                    : `สำรอง`;

            // 🟡 แสดงช่วงเวลารับสมัครแบบ auto
            const openText = regStatus.openDate.toLocaleString("th-TH", {
                day: "2-digit", month: "short", year: "numeric",
                hour: "2-digit", minute: "2-digit"
            });
            const closeText = regStatus.closeDate.toLocaleString("th-TH", {
                day: "2-digit", month: "short", year: "numeric",
                hour: "2-digit", minute: "2-digit"
            });
            const registerPeriod = `${openText} - ${closeText}`;

            const toggleDesktopBtn = document.getElementById(`toggle-btn-${index}-desktop`);
            if (toggleDesktopBtn) {
                toggleDesktopBtn.addEventListener('click', () => {
                    toggleDetails(index, 'desktop');
                });
            }

            const toggleMobileBtn = document.getElementById(`toggle-btn-${index}-mobile`);
            if (toggleMobileBtn) {
                toggleMobileBtn.addEventListener('click', () => {
                    toggleDetails(index, 'mobile');
                });
            }


            container.innerHTML += `
            <div id="event-${event.uid}" class="etdata my-2">
                <div class="redata">
                    <div data-label="ลำดับ: " style="flex: 0.5;">${index + 1}</div>
                    <div class="d-md-none d-block" data-label="กิจกรรม: " style="flex: 3; text-align: left;" >${event.eventName}</div>
                    <div class="d-md-block d-none "  data-label="กิจกรรม: " style="flex: 3; text-align: left;" >${event.eventName}</div>
                    <div data-label="วันที่เริ่มกิจกรรม: " style="flex: 1;">${event.thaiDateRange}</div>
                    <div data-label="ชั่วโมงกิจกรรม: " style="flex: 1;">${event.activityHours ?? '-'}</div>
                    <div data-label="จำนวนผู้สมัคร: " style="flex: 1;">${totalStats}</div>
                    <div data-label="" style="flex: 0.8;" class="d-none d-sm-block">
                    <div class="toggle-btn d-none d-md-block" id="toggle-btn-${index}-desktop">
                        ${openStatus}
                    </div>
               </div>
                </div>
                <div id="details-${index}" class="slide-toggle">
                    <div style="flex: 0.5;"></div>
                    <div style="flex: 3; text-align: left;">
                        <div><strong>สถานที่จัดกิจกรรม:</strong> ${event.location || '-'}</div>
                        <div><strong>วันที่รับสมัคร:</strong> ${registerPeriod}</div>
                    </div>
                    <div style="flex: 1;"></div>
                    <div style="flex: 1;"></div>
                    <div style="flex: 1;"></div>
                    <div style="flex: 1;" class="d-flex align-items-end justify-content-center">
                        ${regBtn}
                    </div>
                </div>
                <div data-label="" style="flex: 1;" class="d-block d-sm-none">
<div class="regist toggle-btn d-block d-md-none" id="toggle-btn-${index}-mobile">
    รายละเอียด
</div>
                </div>
            </div>
        `;


        });
    }


*/