body { font-family: 'Sarabun', sans-serif; font-size: 16px; } 
    
/* ระบบซ่อนเดือนภาษาอังกฤษ & เพิ่มความลื่นไหลตาราง */
input[type="month"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit-fields-wrapper,
input[type="month"]::-webkit-datetime-edit-text,
input[type="month"]::-webkit-datetime-edit-month-field,
input[type="month"]::-webkit-datetime-edit-year-field {
    color: transparent !important;
    background: transparent !important;
}
input[type="month"] {
    color: transparent !important;
    text-shadow: 0 0 0 transparent !important;
}
#leaveTableMain, #tableBody {
    will-change: transform;
    transform: translateZ(0);
}

.hidden { display: none !important; } 
body { transition: background-color 0.3s, color 0.3s; }
input, select, button, a { transition: all 0.3s; }
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; } 
.dark ::-webkit-scrollbar-track { background: #2d3748; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

.btn-slot-active { box-shadow: 0 0 0 2px #3b82f6; background-color: #2563eb !important; color: white !important; border-color: #2563eb !important; }
.btn-slot-empty { background-color: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.dark .btn-slot-empty { background-color: rgba(6, 95, 70, 0.6); color: #6ee7b7; border-color: #047857; }
.btn-slot-filled { background-color: #ffffff; color: #334155; border-color: #cbd5e1; }
.dark .btn-slot-filled { background-color: #1e293b; color: #cbd5e1; border-color: #475569; }

.sidebar-scroll { max-height: 95vh; overflow-y: auto; }
th.sticky-header { position: sticky; top: 0; z-index: 20; }

.dept-segment-container {
    display: flex; background-color: rgba(15, 23, 42, 0.4); padding: 0.25rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; backdrop-filter: blur(12px);
}
.dept-segment-btn {
    padding: 0.375rem 1.25rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; transition: all 0.3s; cursor: pointer; position: relative; z-index: 10; color: #9ca3af; display: flex; align-items: center; gap: 0.5rem; background-color: transparent; border: none;
}
.dept-segment-btn.active {
    background-color: #ffffff; color: #0f172a; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transform: scale(1);
}
.dept-segment-btn:not(.active):hover {
    color: #ffffff; background-color: rgba(255, 255, 255, 0.05);
}

.nm-sidebar { background-color: #041020; border-right: 1px solid #1a273a; font-family: Tahoma, sans-serif; }
.nm-menu-title { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; cursor: pointer; transition: all 0.3s; color: #8b9bb4; font-weight: bold; font-size: 14px; background: transparent; border: none; width: 100%; outline: none; }
.nm-menu-title:hover { background-color: #0a192f; color: #ffffff; }
.nm-menu-title.active { background-color: #0f2341; color: #ffffff; border-left: 4px solid #ef4444; }
.nm-menu-icon { margin-right: 12px; font-size: 18px; width: 20px; text-align: center; }

.theme-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.theme-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #1a273a; transition: .4s; border-radius: 34px; }
.theme-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #8b9bb4; transition: .4s; border-radius: 50%; }
input:checked + .theme-slider { background-color: #ef4444; }
input:checked + .theme-slider:before { transform: translateX(20px); background-color: white; }