/* Define basic variables in :root */
:root {
    --body-bg-light: #f5f5f5; /* Light background, light gray */
    --body-bg-dark: #1a1a1a; /* Dark background, softer dark gray */
    --toolbar-bg-light: #23a6c0; /* Toolbar background, professional tone */
    --toolbar-bg-dark: #1a5d6e; /* Toolbar background, professional tone */
}

/* Dark mode: applies styles when [data-bs-theme="dark"] is present */
[data-bs-theme="dark"] body {
    background-color: var(--body-bg-dark);
}

[data-bs-theme="dark"] .am-form {
    background-color: var(--form-bg-dark);
}

/* Global custom styles */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0); /* Ensures the element is visually hidden */
    border: 0;
}

/* General toolbar adjustments */
[data-bs-theme="dark"] #toolbar {
    background-color: var(--toolbar-bg-dark) !important; /* Toolbar background color */
}

[data-bs-theme="light"] #toolbar {
    background-color: var(--toolbar-bg-light) !important; /* Toolbar background color */
}

#toolbar {
    display: flex;
    justify-content: flex-end; /* Align all items to the right */
    align-items: center;
    background-color: var(--toolbar-bg-dark); /* Toolbar background color */
    padding: 10px 20px;
    gap: 20px; /* Space between links and the selector */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

#toolbar a {
    color: rgba(255, 255, 255, 0.7); /* Soft white by default */
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transitions */
}

#toolbar a:hover {
    color: rgba(255, 255, 255, 0.8); /* Bright white on hover */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7); /* Glow effect on hover */
    text-decoration: none; /* No underline on hover */
}

#toolbar .theme-toggle-container {
    display: flex;
    align-items: center;
}

#toolbar select {
    background-color: #34495e; /* Select background in dark mode */
    color: #ffffff; /* White text */
    border: 1px solid transparent; /* Subtle border */
    padding: 5px;
    border-radius: 4px;
    font-size: 14px;
}

/* Custom styles for the theme-toggle button */
#theme-toggle {
    padding: 5px 10px;
    font-size: 12px;
    background-color: #34495e;
    color: white;
    border: 1px solid deepskyblue;
    border-radius: 5px;
    cursor: pointer;
}

/* Ensure dropdown options have consistent styling */
#theme-toggle option {
    background-color: #2c3e50;
    color: white;
}