/* General App Styles */
.nav-button {
    @apply font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline transition-colors duration-200 bg-blue-500 text-gray-100 hover:bg-blue-600;
}

.nav-button.active {
    @apply bg-blue-700 text-white;
}

#message-display {
    transition: opacity 0.5s ease-in-out;
}

/* Custom Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50; /* Ensure it's on top */
}

.modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 500px; /* Limit max width */
}

/* สไตล์สำหรับปุ่มเมนูที่ถูกเลือก (Active State) */
.nav-button.active {
    background-color: #4f46e5; /* เทียบเท่ากับ bg-indigo-600 ของ Tailwind */
    color: white;
}

/* สไตล์สำหรับลิงก์ใน Dropdown ที่ถูกเลือก */
.nav-link.active {
    background-color: #eef2ff; /* เทียบเท่ากับ bg-indigo-100 */
    font-weight: 600; /* semibold */
    color: #3730a3; /* indigo-800 */
}