/* style.css */
body {
    font-family: 'Sarabun', sans-serif;
    background-color: #59A08F !important; /* เพิ่ม !important เพื่อบังคับใช้สีนี้ */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.emoji-picker {
    z-index: 9999 !important;
}
.card {background-color: #ffffff;}         
.sidebar { background: #f8f9fa; min-height: 80vh; border-right: 1px solid #dee2e6; }
.nav-link { color: #333; }
.nav-link:hover { background: #8ac6ff; }
.nav-link.active-menu { background: #8ac6ff; color: white !important; }


/* style.css */
.lang-switch a {
    text-decoration: none;
    color: #888;
    padding: 5px 8px;
    font-size: 0.9rem;
}

.lang-switch a.active {
    color: #0035ad; /* สีประจำมหาวิทยาลัย */
    font-weight: bold;
    border-bottom: 2px solid #0035ad;
}

.lang-divider {
    color: #ccc;
    margin: 0 5px;
}

/* ในไฟล์ style.css */
.custom-bg-section {
    background-color: #8ac6ff; /* เปลี่ยนเป็นรหัสสีที่คุณต้องการ (เช่น สีเทาอ่อน) */
    padding-top: 20px; /* เพิ่มระยะห่างด้านบน */
    padding-bottom: 20px; /* เพิ่มระยะห่างด้านล่าง */
}

/* เพิ่มความสวยงามให้ Footer */
footer {
    color: #555;
    font-size: 0.95rem;
}

footer h5 {
    color: #333;
    font-size: 1.1rem;
}

footer .fa-solid {
    width: 20px;
}


footer {
    margin-top: auto !important;
}

/* จัดการให้กลุ่มเมนูด้านล่างมีมุมมน */
.list-group.list-group-flush.mt-3 {
    border-radius: 0.375rem; /* ค่ามาตรฐานความมนของ Bootstrap */
    overflow: hidden;       /* บังคับให้เนื้อหาด้านในโค้งตามมุม */
    border: 1px solid #dee2e6; /* เพิ่มเส้นขอบเพื่อให้เห็นความมนชัดเจนขึ้น */
}

/* ลบเส้นขอบที่เกินมา (ถ้ามี) */
.list-group.list-group-flush.mt-3 .list-group-item:last-child {
    border-bottom-width: 0;
}

#btn-back-to-top {
    transition: background-color 0.3s, opacity 0.3s;
    border: none;
    font-size: 14px;
    font-weight: bold;
}

#btn-back-to-top:hover {
    background-color: #0056b3; /* สีเข้มขึ้นเมื่อเอาเม้าส์วาง */
    cursor: pointer;
}
/* ตกแต่ง Input field ให้ดูทันสมัยขึ้น */
#username.form-control, #password.form-control {
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
}

#username.form-control:focus, #password.form-control:focus {
    background-color: #fff;
    border-color: #a0c4ff;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.1);
}

/* ตกแต่งปุ่ม Login */
.btn-primary {
    background-color: #2563eb; /* สีน้ำเงิน NSRU */
    border-color: #2563eb;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    transform: translateY(-1px);
}

#emoji-list {
    display: none; /* ซ่อนไว้ก่อน */
    position: absolute;
    bottom: 45px; /* ให้อยู่เหนือช่องพิมพ์พอดี */
    right: 0;
    background: white;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* เงาด้านบน */
    z-index: 1050;
    width: 220px;
}
.emoji-item {
    cursor: pointer;
    font-size: 1.3rem;
    padding: 4px;
    display: inline-block;
}
.emoji-item:hover { background: #eee; border-radius: 4px; }

.position-relative {
    position: relative;
}

.header-logo {

    max-width: 50px; 
    height: auto;
    z-index: 10;
}

.btn-facebook:hover {
    background-color: #145dbf !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(24, 119, 242, 0.3);
}

/* ตารางปฏิทิน */
.event-input { width: 100%; border: 1px dashed #ccc; font-size: 11px; margin-bottom: 2px; }
.btn-save-all { float: right; margin-top: -35px; }

.calendar-table th {
    width: 14.28%; /* แบ่ง 7 วันเท่าๆ กัน */
    font-size: 1rem;
}

.calendar-table td {
    height: 100px;
    vertical-align: top;
    position: relative;
    padding: 5px !important;
}

.day-num {
    position: absolute;
    top: 5px;   /* ระยะห่างจากขอบบน */
    right: 8px; /* ระยะห่างจากขอบขวา */
    font-size: 0.85rem; /* ขนาดตัวเลขที่เล็กลง */
    font-weight: bold;
    color: #6c757d; /* สีเทาเข้มเพื่อให้ดูสบายตา */
}

.calendar-table small {
    font-size: 0.7rem;
    line-height: 1.2;
}

/* CSS สำหรับจุดไฟสถานะ */
.dot-online { height: 10px; width: 10px; background-color: #28a745; border-radius: 50%; display: inline-block; }
.dot-offline { height: 10px; width: 10px; background-color: #dc3545; border-radius: 50%; display: inline-block; }
.dot-busy { height: 10px; width: 10px; background-color: #ffc107; border-radius: 50%; display: inline-block; }