/* Popup Bubble Styling */
.popup-alert {
    position: absolute;
    top: -50px;
    left: 0;
    background-color: #f8d7da;
    color: #721c24;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 10;
    animation: fadeIn 0.3s linear;
}

.popup-alert::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 1rem;
    border-width: 6px;
    border-style: solid;
    border-color: #f8d7da transparent transparent transparent;
}
/* Spinner Styles */
.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}
/* Theme Variables */
/*body[data-theme="light"] {
    --bg-sidebar: #fefefe;
    --bg-menu-item: #f9fafb;
    --text-menu-item: #1f2937;
    --bg-menu-hover: #e5e7eb;
}

body[data-theme="dark"] {
    --bg-sidebar: #0d0d0d;
    --bg-menu-item: #1f2937;
    --text-menu-item: #ffffff;
    --bg-menu-hover: #374151;
}

#sidebar {
    background-color: var(--bg-sidebar);
    color: var(--text-menu-item);
}

#sidebar a {
    background-color: var(--bg-menu-item);
    color: var(--text-menu-item);
}

#sidebar a:hover {
    background-color: var(--bg-menu-hover);
}*/

body[data-theme="light"] {
    --bg-sidebar: #FAFAFA; /* Pure white for clean light mode */
    --bg-menu-item: #FAFAFA; /* Soft gray to distinguish menu items */
    --text-menu-item: #2d3748; /* Neutral dark text for readability */
    --bg-menu-hover: #E4E6F1; /* Slightly darker gray for hover effect */
    --border-color: #edf5fc; /* Border for divisions */
    --bg-button-color: #545ddc;
}

body[data-theme="dark"] {
    --bg-sidebar: #252526; /* Dark gray for a balanced dark mode */
    --bg-menu-item: #2d3748; /* Lighter shade of gray for menu items */
    --text-menu-item: #e2e8f0; /* Pale white text for dark backgrounds */
    --bg-menu-hover: #4a5568; /* Medium contrast gray for hover */
    --border-color: #2d3748; /* Subtle borders in dark mode */
    --bg-button-color: #545ddc;
}

#sidebar {
    background-color: var(--bg-sidebar);
    color: var(--text-menu-item);
    border-left: 1px solid var(--border-color); /* Add border for a cleaner layout */
}

    #sidebar a {
        background-color: var(--bg-menu-item);
        color: var(--text-menu-item);
        transition: background-color 0.3s, color 0.3s; /* Smooth hover effect */
        border-radius: 6px; /* Modern rounded corners */
    }

        #sidebar a:hover {
            background-color: var(--bg-menu-hover);
            color: var(--text-menu-item); /* Keeps text consistent on hover */
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); /* Add slight shadow for hover effect */
        }

body {
    font-family: "Segoe UI", "Inter", sans-serif; /* Prioritize Segoe UI, fallback to Inter */
    line-height: 1.6; /* Enhanced readability */
    color: var(--text-menu-item); /* Text matches selected theme */
    background-color: var(--bg-sidebar); /* Body background matches sidebar */
    transition: background-color 0.3s, color 0.3s; /* Smooth theme transition */
}