/**
 * Theme UI dropdown styles
 *
 * Shared by the client and admin sidebar theme menus. The default styling
 * follows the active dashboard theme (light/dark/system). The public-site
 * navbar and mobile drawer variants override these tokens below because they
 * render against the always-dark navigation shell.
 */

/* Container anchors the absolute panel to the trigger. */
.theme-menu {
    position: relative;
}

/* Dropdown panel: opens upward from the bottom of the trigger so it stays
   visible when the trigger sits at the bottom of the sidebar. */
.theme-menu-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: 0.5rem;
    z-index: 50;

    display: none;
    overflow: hidden;

    background-color: var(--color-panel, #ffffff);
    border: 1px solid var(--color-line, #e2e8f0);
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
}

.theme-menu-panel.theme-menu-open {
    display: block;
    animation: themeMenuFadeIn 0.18s ease-out;
}

/* Individual theme option row. */
.theme-menu-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border-radius: 0.625rem;
    color: var(--color-ink-secondary, #64748b);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-menu-option:hover,
.theme-menu-option:focus-visible {
    background-color: var(--color-subtle, #f8fafc);
    color: var(--color-ink, #0f172a);
    outline: none;
}

.theme-menu-option.active {
    color: var(--color-inverse-ink, #ffffff);
    background-color: var(--color-accent, #3b82f6);
}

/* Checkmark shown on the currently active option. */
.theme-menu-check {
    margin-left: auto;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgba(15, 23, 42, 0.12);
    color: var(--color-inverse-ink, #ffffff);
    font-size: 0.625rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.theme-menu-option.active .theme-menu-check {
    opacity: 1;
}

/* Chevron rotation when the menu is open. */
.theme-menu-open .theme-menu-chevron {
    transform: rotate(180deg);
}

/* Fade-in animation for the upward-opening panel. */
@keyframes themeMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navbar variant: the dropdown hangs from the top nav bar, so it opens
   downward and aligns to the right of the trigger instead of filling it.
   The public navbar and mobile drawer keep the always-dark inverse palette. */
.navbar-theme-menu .theme-menu-panel,
.mobile-theme-menu .theme-menu-panel {
    top: 100%;
    bottom: auto;
    left: auto;
    right: 0;
    margin-top: 0.5rem;
    margin-bottom: 0;
    min-width: 11rem;
    width: auto;

    background-color: var(--color-inverse-panel, #1e293b);
    border-color: var(--color-inverse-line, #475569);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.35);
}

.navbar-theme-menu .theme-menu-option,
.mobile-theme-menu .theme-menu-option {
    color: var(--color-inverse-ink-secondary, #94a3b8);
}

.navbar-theme-menu .theme-menu-option:hover,
.navbar-theme-menu .theme-menu-option:focus-visible,
.mobile-theme-menu .theme-menu-option:hover,
.mobile-theme-menu .theme-menu-option:focus-visible {
    background-color: var(--color-inverse-subtle, #334155);
    color: var(--color-inverse-ink, #f8fafc);
}

.navbar-theme-menu .theme-menu-option.active,
.mobile-theme-menu .theme-menu-option.active {
    color: var(--color-inverse-ink, #f8fafc);
    background-color: var(--color-accent, #3b82f6);
}

.navbar-theme-menu .theme-menu-check,
.mobile-theme-menu .theme-menu-check {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-inverse-ink, #f8fafc);
}

/* Mobile drawer variant: the trigger sits near the bottom of the drawer,
   so the panel opens upward and fills the drawer width. */
.mobile-theme-menu .theme-menu-panel {
    top: auto;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-top: 0;
    margin-bottom: 0.5rem;
    min-width: auto;
    width: 100%;
}

/* =========================================================
   Form control defaults
   Fields without an explicit bg-* utility fall back to the
   browser default white background, which makes text unreadable
   in dark mode. Theme them by default; explicit bg-* utility
   classes still win because :where() carries zero specificity.
   ========================================================= */
:where(input, select, textarea) {
    background-color: var(--color-canvas, #ffffff);
    color: var(--color-ink, inherit);
}
:where(input[type="checkbox"], input[type="radio"], input[type="hidden"], input[type="range"], input[type="file"], input[type="button"], input[type="submit"], input[type="image"], input[type="color"]) {
    background-color: transparent;
    color: inherit;
}