/* ============================================
   SHARED THEME STYLES
   Used across homepage, auth pages, and other public pages
   ============================================ */

/* ============================================
   GLOBAL OVERSCROLL PREVENTION
   Prevents white flash when scrolling past content
   ============================================ */
html, body {
    overscroll-behavior: none;
}

/* ============================================
   OB-V-20 (2026-05-11): BODY-LOCK WHILE CAVE OPEN

   The Cave of Wonders overlay is `position: fixed` over the viewport
   with `overflow: hidden` on its own scroll surface. But on iOS Safari,
   the body underneath an overlay can still be touch-scrolled — when the
   cave is opened from a long page like /workitems, the user perceives
   touch-drag over the (visually-static) cave overlay as scrolling that
   reveals a "blank abyss" beneath the cave content. Root cause: the
   body has scrollable content (the underlying page), and iOS treats
   touch gestures on top of position:fixed elements as body-scroll
   gestures.

   Fix: while a `.cave-overlay` element exists in the DOM, lock the
   body and html. `position: fixed` + `width: 100%` ensures the body
   can't shift. `overflow: hidden` and `overscroll-behavior: none`
   block any residual touch-scroll attempts.

   Lives in this global file (not the scoped CaveOfWonders.razor.css)
   because Blazor scoped-CSS adds [b-xxx] attributes to every selector,
   making `body[b-xxx]` match nothing.

   `:has()` is widely supported (Safari 15.4+, Chrome 105+, Firefox 121+).
   For older browsers without :has() support, the lock simply doesn't
   apply and the user falls back to the pre-fix behavior — acceptable
   degradation for a tiny minority of users. */
html:has(.cave-overlay),
body:has(.cave-overlay) {
    overflow: hidden !important;
    overscroll-behavior: none;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* ============================================
   THEME BACKGROUNDS
   ============================================ */

/* All Themes - apply page background. Exclude overlay elements (dialogs, modals)
   which get theme classes but should NOT receive the page background gradient. */
body[class*="theme-"],
.theme-cloud:not([class*="overlay"]),
.theme-space:not([class*="overlay"]),
.theme-winter:not([class*="overlay"]),
.theme-nature:not([class*="overlay"]),
.theme-ocean:not([class*="overlay"]),
.theme-mystic:not([class*="overlay"]),
.theme-tron:not([class*="overlay"]),
.theme-executive:not([class*="overlay"]),
.theme-executivedark:not([class*="overlay"]) {
    background: var(--theme-page-bg) !important;
}

/* Fixed-position components that use GetThemeClass() but should NOT get the page background */
.action-dock[class*="theme-"] {
    background: transparent !important;
}

/* Header maintains its own background via --theme-header-bg, not the page background */
.app-header[class*="theme-"] {
    background: var(--theme-header-bg, #0f172a) !important;
}

/* Executive & Cloud light-theme page backgrounds — hardcoded values
   Must beat the generic var(--theme-page-bg) rule above (specificity 0,2,0)
   by using :not([class*="overlay"]) to reach 0,2,1 / 0,3,0 */
html.theme-executive:not([class*="overlay"]),
body.theme-executive:not([class*="overlay"]),
.main-content.theme-executive:not([class*="overlay"]),
.detail-page.theme-executive:not([class*="overlay"]),
.list-page.theme-executive:not([class*="overlay"]) {
    background: linear-gradient(180deg, #f5f5f5 0%, #efefef 35%, #e8e8e8 65%, #e0e0e0 100%) !important;
}

html.theme-cloud:not([class*="overlay"]),
body.theme-cloud:not([class*="overlay"]),
.main-content.theme-cloud:not([class*="overlay"]),
.detail-page.theme-cloud:not([class*="overlay"]),
.list-page.theme-cloud:not([class*="overlay"]) {
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%) !important;
}

/* Executive Dark page background — hardcoded, mirrors the Executive rule above.
   PRO-DARK-1 (2026-07-21). Same deep-slate gradient as --theme-page-bg. */
html.theme-executivedark:not([class*="overlay"]),
body.theme-executivedark:not([class*="overlay"]),
.main-content.theme-executivedark:not([class*="overlay"]),
.detail-page.theme-executivedark:not([class*="overlay"]),
.list-page.theme-executivedark:not([class*="overlay"]) {
    background: linear-gradient(180deg, #0f172a 0%, #131c2e 35%, #172033 65%, #1a2438 100%) !important;
}

/* ============================================
   PUBLIC PAGE OVERRIDES
   Public pages (invoices, quotes, etc.) should
   maintain their professional light theme
   regardless of user's theme preference
   ============================================ */
.public-invoice-container {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

/* Ensure public layout pages don't inherit theme backgrounds */
.public-layout {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

/* ============================================
   VIDEO TOOLS HUB - FULL WIDTH HERO
   ============================================ */
.video-tools-page {
    overflow-x: hidden;
}

.video-tools-page .hero-section {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* ============================================
   APP HEADER - SOLID COLORS (Global styles)
   ============================================ */
.app-header {
    background: var(--theme-header-bg) !important;
}

/* ============================================
   SIGN IN BUTTON - Theme-aware styling
   ============================================ */
/* Base Sign In button - prominent solid gradient for Cloud theme */
.signin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    border-radius: 24px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 
        0 4px 14px rgba(99, 102, 241, 0.4),
        0 2px 6px rgba(99, 102, 241, 0.2);
}

.signin-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    box-shadow: 
        0 6px 20px rgba(99, 102, 241, 0.5),
        0 4px 10px rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
}

.signin-btn svg {
    color: rgba(255, 255, 255, 0.9);
}

.signin-btn:hover svg {
    color: white;
}

/* Dark themes - consolidated using :is() selector */
:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean) .signin-btn {
    color: white;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
    box-shadow: 
        0 0 0 2px rgba(99, 102, 241, 0.6),
        0 4px 12px rgba(99, 102, 241, 0.3);
}

:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean) .signin-btn:hover {
    color: white;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(139, 92, 246, 0.4) 100%);
    box-shadow: 
        0 0 0 2px rgba(99, 102, 241, 0.8),
        0 6px 20px rgba(99, 102, 241, 0.4);
}

:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean) .signin-btn svg {
    color: #a5b4fc;
}

/* 💼 Executive Theme - Neutral professional sign-in button */
.theme-executive .signin-btn {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

.theme-executive .signin-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: white;
}

.theme-executive .signin-btn svg {
    color: rgba(255, 255, 255, 0.85);
}

.theme-executive .signin-btn:hover svg {
    color: white;
}

/* ============================================
   USER MENU DROPDOWN - Solid Colors (Global)
   ============================================ */
.user-menu-dropdown {
    background: var(--theme-surface) !important;
}

.user-menu-dropdown .menu-header {
    background: var(--theme-header-bg) !important;
}

/* Ensure no borders between menu items */
.user-menu-dropdown .menu-item {
    color: var(--theme-text-primary);
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.user-menu-dropdown .menu-item:not(.menu-item-danger) {
    border-top: none !important;
}

.user-menu-dropdown .menu-item:hover {
    background: var(--theme-link-hover-bg);
}

.user-menu-dropdown .menu-item svg {
    color: var(--theme-text-muted);
}

.user-menu-dropdown .menu-divider {
    background: var(--theme-border);
}

/* Sign out button */
.user-menu-dropdown .menu-item-danger {
    color: var(--theme-text-danger);
}

.user-menu-dropdown .menu-item-danger:hover {
    background: var(--theme-bg-danger);
}

.user-menu-dropdown .menu-item-danger svg {
    color: var(--theme-text-danger);
}

/* ============================================
   NOTIFICATION DROPDOWN - Theme Styles
   ============================================ */
.notification-dropdown {
    background: var(--theme-surface) !important;
}

.notification-dropdown .notification-header {
    background: var(--theme-surface-secondary);
    border-bottom-color: var(--theme-border);
}

.notification-dropdown .notification-header-left {
    color: var(--theme-text-primary);
}

.notification-dropdown .notification-header-left svg {
    color: var(--theme-text-muted);
}

.notification-dropdown .notification-item {
    border-bottom-color: var(--theme-border);
    color: var(--theme-text-secondary); /* ensure default text color */
}

.notification-dropdown .notification-item:hover {
    background: var(--theme-link-hover-bg);
}

.notification-dropdown .notification-item.unread {
    background: var(--theme-chip-bg);
}

.notification-dropdown .notification-item.unread:hover {
    background: var(--theme-chip-hover-bg);
}

.notification-dropdown .notification-item.overdue {
    background: var(--theme-bg-danger);
}

.notification-dropdown .notification-item-title {
    color: var(--theme-text-primary);
}

.notification-dropdown .notification-item-message {
    color: var(--theme-text-muted);
}

.notification-dropdown .notification-item-time {
    color: var(--theme-text-hint);
}

.notification-dropdown .notification-footer {
    background: var(--theme-surface-secondary);
    border-top-color: var(--theme-border);
}

.notification-dropdown .empty-title {
    color: var(--theme-text-muted);
}

.notification-dropdown .empty-subtitle {
    color: var(--theme-text-hint);
}

.notification-dropdown .dismiss-btn:hover {
    background: var(--theme-bg-danger);
}


/* ============================================
   THEME EFFECTS CONTAINER
   ============================================ */
.theme-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    perspective: 1000px;
    z-index: 1;
    overflow: hidden;
}

/* When sidebar is present (authenticated pages), clip effects from sidebar area */
/* Home page has .home-sidebar which is ~300px wide */
.home-authenticated .theme-effects,
.has-sidebar .theme-effects {
    clip-path: inset(0 0 0 300px);
}

/* For pages with narrower sidebars (250px) */
.page .theme-effects {
    clip-path: inset(0 0 0 250px);
}

/* ============================================
   🌟 IMMERSIVE THEME TRANSITIONS
   Smooth morphing between themes
   ============================================ */
html {
    --cursor-x: 50%;
    --cursor-y: 50%;
}

body {
    transition: background 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme transition ripple overlay */
.theme-transition-active::before {
    content: '';
    position: fixed;
    top: var(--cursor-y, 50%);
    left: var(--cursor-x, 50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--theme-accent);
    transform: translate(-50%, -50%) scale(0);
    animation: theme-ripple-expand 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.3;
}

@keyframes theme-ripple-expand {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(400); opacity: 0; }
}

/* ============================================
   CURSOR-BASED PARALLAX EFFECTS
   Elements respond to mouse movement
   ============================================ */

/* Base parallax transform variable - set by JavaScript */
/* CL-V-1 (2026-05-10): `.sun-rays` removed from this list — element retired. */
.floating-cloud,
.flying-bird,
.star,
.shooting-star,
.shooting-star-2,
.nebula,
.snowflake,
.aurora,
.aurora-wave,
.butterfly,
.firefly,
.leaf,
.dolphin,
.sea-turtle,
.bubble,
.jellyfish,
.jellyfish-2,
.bioluminescent-wave,
.mystic-portal,
.mystic-rune,
.mystic-mandala,
.mystic-spark {
    --parallax-transform: translate(0, 0);
    will-change: transform;
    transition: transform 0.15s ease-out;
}

/* Apply parallax transform to cloud theme elements */
.floating-cloud {
    transform: var(--parallax-transform);
}

.flying-bird {
    transform: var(--parallax-transform);
}

/* CL-V-1 (2026-05-10): `.sun-rays` parallax transform rule removed — element retired. */

/* Apply parallax transform to space theme elements */
.theme-space .star,
body.theme-space .star {
    transform: var(--parallax-transform);
}

.shooting-star,
.shooting-star-2 {
    transform: var(--parallax-transform);
}

.nebula {
    transform: var(--parallax-transform);
}

/* Apply parallax transform to winter theme elements */
.aurora,
.aurora-wave {
    transform: var(--parallax-transform);
}

/* Apply parallax transform to nature theme elements */
.butterfly {
    transform: var(--parallax-transform);
}

.firefly {
    transform: var(--parallax-transform);
}

.leaf {
    transform: var(--parallax-transform);
}

/* Apply parallax transform to ocean theme elements */
.dolphin {
    transform: var(--parallax-transform);
}

.sea-turtle {
    transform: var(--parallax-transform);
}

.bubble {
    transform: var(--parallax-transform);
}

.jellyfish,
.jellyfish-2 {
    transform: var(--parallax-transform);
}


.bioluminescent-wave {
    transform: var(--parallax-transform);
}

/* Apply parallax transform to mystic theme elements */
.mystic-portal {
    transform: var(--parallax-transform);
}

.mystic-rune {
    transform: var(--parallax-transform);
}

.mystic-mandala {
    transform: var(--parallax-transform);
}

.mystic-spark {
    transform: var(--parallax-transform);
}

.mystic-fog {
    transform: var(--parallax-transform);
}

.dimensional-rift {
    transform: var(--parallax-transform);
}

.mystic-eye {
    transform: var(--parallax-transform);
}

.spell-circle {
    transform: var(--parallax-transform);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    /* CL-V-1 (2026-05-10): `.sun-rays` removed — element retired with the rest of the Cloud-theme sun. */
    .floating-cloud,
    .flying-bird,
    .star,
    .shooting-star,
    .shooting-star-2,
    .nebula,
    .snowflake,
    .aurora,
    .aurora-wave,
    .butterfly,
    .firefly,
    .leaf,
    .dolphin,
    .sea-turtle,
    .bubble,
    .jellyfish,
    .jellyfish-2,
    .bioluminescent-wave,
    .mystic-portal,
    .mystic-rune,
    .mystic-mandala,
    .mystic-spark,
    .mirror-fracture,
    .mystic-fog,
    .dimensional-rift,
    .mystic-eye,
    .spell-circle {
        --parallax-transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    
    #cursor-trail-canvas,
    #ambient-particle-canvas {
        display: none !important;
    }
}

/* Hide all theme effects by default */
body .snowflake,
body .star,
body .particle,
body .sparkle,
body .cloud {
    display: none !important;
}

/* Only show effects for the active theme */
.theme-winter .snowflake,
body.theme-winter .snowflake { display: block !important; }

.theme-space .star,
body.theme-space .star { display: block !important; }

.theme-nature .particle,
body.theme-nature .particle { display: block !important; }

.theme-ocean .sparkle,
body.theme-ocean .sparkle { display: block !important; }

.theme-cloud .cloud,
body.theme-cloud .cloud { display: block !important; }



/* ============================================
   ❄️ SNOWFLAKES (Winter Theme)
   ============================================ */
/* WI-V-1.9 (2026-05-10): Opacity bumped down (0.5 → 0.35) so the unicode
   flakes blend with the JS-canvas drawn snow instead of standing out as
   distinctly different "characters". Combined with the size tightening
   below this gives a more uniform snow look. */
.snowflake {
    position: absolute;
    top: -5vh;
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.05rem;
    animation: snowflake-fall linear infinite;
    display: none;
    text-shadow: 0 0 6px rgba(224, 242, 254, 0.4);
}

/* WI-V-1 (2026-05-10, third bump): Snowflake fall durations slowed AGAIN +
   density reduced. Previous bump (65-105s) still read as a snowstorm per
   Josh's re-screenshot. The bigger issue was density — 6 always-rendered
   flakes moving together creates a "field of falling snow" perception even
   when each individual flake is slow. This bump:
     1. Durations: 65-105s → 120-200s range (another ~1.8×, total ~7-9×
        the original 14-23s). Each flake takes 2-3 minutes to traverse the
        screen — sustained ambient drift, not active snowfall.
     2. Density: always-rendered count reduced 6 → 3 in
        `Components/ThemeEffects.razor` (paired change). At base intensity,
        only 3 flakes are visible at any time. Higher intensities still add
        more (+2 at >35, +2 at >50) for atmospheric variation, but the
        sparse default should read as calm.

   WI-V-1.9 (2026-05-10): Size variation tightened from 1.0-1.5rem to
   0.95-1.15rem (≤20% delta). The 50% size delta read as "some flakes
   are huge and some are tiny" against the calm JS canvas particles.
   Subtle variation now — they're all snow, just slightly different
   distances.

   WI-V-1.10 (2026-05-10): Two fixes for "snowflake cluster doesn't look
   natural" feedback:
     1. Horizontal redistribution. `ThemeEffects.razor` only renders the
        first 7 flake divs, which were CSS-positioned at left 5%, 12%,
        22%, 32%, 42%, 52%, 62% — clustered on the left half. The right
        side was empty. Now spread across 5-92% with non-uniform spacing.
     2. NEGATIVE animation-delays. The previous 0-6s positive delays meant
        all 7 flakes started near the top on page load and "drifted down
        as a cluster" until they reached steady state ~30s later. Negative
        delays start each flake mid-animation, so the visible vertical
        positions are PRE-SCATTERED from t=0. Each flake is at a different
        point in its cycle from the very first render. */
.snowflake:nth-child(1)  { left: 8%;  animation-duration: 130s; animation-delay: -25s;  font-size: 0.95rem; }
.snowflake:nth-child(2)  { left: 28%; animation-duration: 170s; animation-delay: -85s;  font-size: 1.10rem; }
.snowflake:nth-child(3)  { left: 47%; animation-duration: 145s; animation-delay: -55s;  font-size: 1.00rem; }
.snowflake:nth-child(4)  { left: 73%; animation-duration: 190s; animation-delay: -130s; font-size: 1.05rem; }
.snowflake:nth-child(5)  { left: 92%; animation-duration: 135s; animation-delay: -10s;  font-size: 0.95rem; }
.snowflake:nth-child(6)  { left: 19%; animation-duration: 165s; animation-delay: -110s; font-size: 1.15rem; }
.snowflake:nth-child(7)  { left: 60%; animation-duration: 120s; animation-delay: -75s;  font-size: 1.05rem; }
.snowflake:nth-child(8)  { left: 38%; animation-duration: 180s; animation-delay: -40s;  font-size: 1.00rem; }
.snowflake:nth-child(9)  { left: 84%; animation-duration: 155s; animation-delay: -100s; font-size: 1.10rem; }
.snowflake:nth-child(10) { left: 13%; animation-duration: 135s; animation-delay: -65s;  font-size: 0.95rem; }
.snowflake:nth-child(11) { left: 51%; animation-duration: 200s; animation-delay: -150s; font-size: 1.05rem; }
.snowflake:nth-child(12) { left: 77%; animation-duration: 165s; animation-delay: -20s;  font-size: 1.00rem; }

@keyframes snowflake-fall {
    0% { transform: translateY(-5vh) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 0.6; }
    100% { transform: translateY(105vh) translateX(40px) rotate(360deg); opacity: 0; }
}

/* ============================================
   ✨ STARS (Space Theme)
   ============================================ */
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 2s ease-in-out infinite;
    display: none;
}

.star:nth-child(13) { width: 2px; height: 2px; left: 10%; top: 15%; animation-delay: 0s; }
.star:nth-child(14) { width: 3px; height: 3px; left: 25%; top: 10%; animation-delay: 0.5s; }
.star:nth-child(15) { width: 2px; height: 2px; left: 40%; top: 25%; animation-delay: 1s; }
.star:nth-child(16) { width: 2px; height: 2px; left: 55%; top: 8%; animation-delay: 1.5s; }
.star:nth-child(17) { width: 3px; height: 3px; left: 70%; top: 20%; animation-delay: 0.3s; }
.star:nth-child(18) { width: 2px; height: 2px; left: 85%; top: 30%; animation-delay: 0.8s; }
.star:nth-child(19) { width: 2px; height: 2px; left: 15%; top: 45%; animation-delay: 1.2s; }
.star:nth-child(20) { width: 3px; height: 3px; left: 50%; top: 35%; animation-delay: 0.6s; }
.star:nth-child(21) { width: 2px; height: 2px; left: 90%; top: 50%; animation-delay: 1.8s; }
.star:nth-child(22) { width: 2px; height: 2px; left: 30%; top: 60%; animation-delay: 0.4s; }
.star:nth-child(23) { width: 3px; height: 3px; left: 65%; top: 55%; animation-delay: 1.1s; }
.star:nth-child(24) { width: 2px; height: 2px; left: 5%; top: 70%; animation-delay: 0.9s; }

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* ============================================
   🌿 PARTICLES (Nature Theme)
   ============================================ */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(253, 224, 71, 0.6);
    border-radius: 50%;
    animation: particle-float 6s ease-in-out infinite;
    display: none;
}

.particle:nth-child(25) { left: 15%; top: 25%; animation-delay: 0s; }
.particle:nth-child(26) { left: 35%; top: 45%; animation-delay: 1s; }
.particle:nth-child(27) { left: 55%; top: 20%; animation-delay: 2s; }
.particle:nth-child(28) { left: 75%; top: 55%; animation-delay: 0.5s; }
.particle:nth-child(29) { left: 85%; top: 35%; animation-delay: 1.5s; }
.particle:nth-child(30) { left: 25%; top: 70%; animation-delay: 2.5s; }
.particle:nth-child(31) { left: 65%; top: 75%; animation-delay: 3s; }
.particle:nth-child(32) { left: 45%; top: 85%; animation-delay: 0.8s; }

@keyframes particle-float {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.6; }
    50% { transform: translateY(-15px) translateX(8px); opacity: 1; }
}

/* ============================================
   🌊 SPARKLES (Ocean Theme)
   ============================================ */
.sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: water-sparkle 3s ease-in-out infinite;
    display: none;
}

.sparkle:nth-child(33) { left: 20%; top: 30%; animation-delay: 0s; }
.sparkle:nth-child(34) { left: 40%; top: 25%; animation-delay: 0.5s; }
.sparkle:nth-child(35) { left: 60%; top: 35%; animation-delay: 1s; }
.sparkle:nth-child(36) { left: 80%; top: 28%; animation-delay: 1.5s; }
.sparkle:nth-child(37) { left: 15%; top: 45%; animation-delay: 0.3s; }
.sparkle:nth-child(38) { left: 50%; top: 40%; animation-delay: 0.8s; }
.sparkle:nth-child(39) { left: 85%; top: 50%; animation-delay: 1.2s; }
.sparkle:nth-child(40) { left: 30%; top: 55%; animation-delay: 0.6s; }

@keyframes water-sparkle {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* ============================================
   ☁️ CLOUDS (Cloud Theme)
   ============================================ */
.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    filter: blur(20px);
    animation: cloud-drift 30s ease-in-out infinite;
    display: none;
}

.cloud:nth-child(41) { width: 200px; height: 80px; left: 5%; top: 15%; animation-delay: 0s; }
.cloud:nth-child(42) { width: 150px; height: 60px; left: 80%; top: 10%; animation-delay: 5s; animation-direction: reverse; }
.cloud:nth-child(43) { width: 180px; height: 70px; left: 60%; top: 30%; animation-delay: 10s; }
.cloud:nth-child(44) { width: 120px; height: 50px; left: 20%; top: 40%; animation-delay: 15s; animation-direction: reverse; }

@keyframes cloud-drift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(30px); }
}

/* ============================================
   🌌 NEBULA (Space Theme Extended)
   ============================================ */
.nebula {
    position: absolute;
    width: 400px;
    height: 300px;
    top: 20%;
    right: 10%;
    background: radial-gradient(ellipse at center,
        rgba(168, 85, 247, 0.15) 0%,
        rgba(139, 92, 246, 0.1) 30%,
        rgba(99, 102, 241, 0.05) 60%,
        transparent 80%);
    border-radius: 50%;
    filter: blur(40px);
    animation: nebula-pulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes nebula-pulse {
    0%, 100% { 
        opacity: 0.6; 
        transform: scale(1) var(--parallax-transform, translate(0, 0)); 
    }
    50% { 
        opacity: 0.9; 
        transform: scale(1.1) var(--parallax-transform, translate(0, 0)); 
    }
}

/* ============================================
   🎐 JELLYFISH (Ocean Theme Extended)
   ============================================ */
.jellyfish {
    position: absolute;
    width: 60px;
    height: 80px;
    bottom: 30%;
    right: 15%;
    animation: jellyfish-float 12s ease-in-out infinite;
    pointer-events: none;
}

.jellyfish::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 35px;
    background: radial-gradient(ellipse at 50% 80%,
        rgba(103, 232, 249, 0.6) 0%,
        rgba(34, 211, 238, 0.4) 50%,
        rgba(6, 182, 212, 0.2) 100%);
    border-radius: 50% 50% 40% 40%;
    box-shadow: 0 0 20px rgba(103, 232, 249, 0.4);
}

.jellyfish::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 50px;
    background: 
        linear-gradient(180deg, transparent 0%, rgba(103, 232, 249, 0.3) 100%),
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 4px,
            rgba(103, 232, 249, 0.4) 4px,
            rgba(103, 232, 249, 0.4) 6px);
    animation: jellyfish-tentacles 2s ease-in-out infinite;
}

@keyframes jellyfish-float {
    0%, 100% {
        transform: translateY(0) translateX(0) var(--parallax-transform, translate(0, 0));
        opacity: 0.8;
    }
    25% {
        transform: translateY(-30px) translateX(10px) var(--parallax-transform, translate(0, 0));
    }
    50% {
        transform: translateY(-50px) translateX(-5px) var(--parallax-transform, translate(0, 0));
        opacity: 1;
    }
    75% {
        transform: translateY(-25px) translateX(15px) var(--parallax-transform, translate(0, 0));
    }
}

@keyframes jellyfish-tentacles {
    0%, 100% { transform: translateX(-50%) scaleX(1); }
    50% { transform: translateX(-50%) scaleX(0.85); }
}

/* Second jellyfish for depth */
.jellyfish-2 {
    position: absolute;
    width: 40px;
    height: 55px;
    bottom: 45%;
    left: 12%;
    animation: jellyfish-float-2 15s ease-in-out infinite;
    animation-delay: 3s;
    opacity: 0.5;
    pointer-events: none;
}

.jellyfish-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 25px;
    background: radial-gradient(ellipse at 50% 80%,
        rgba(103, 232, 249, 0.4) 0%,
        rgba(34, 211, 238, 0.2) 100%);
    border-radius: 50% 50% 40% 40%;
    box-shadow: 0 0 15px rgba(103, 232, 249, 0.3);
}

.jellyfish-2::after {
    content: '';
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 35px;
    background: 
        linear-gradient(180deg, transparent 0%, rgba(103, 232, 249, 0.2) 100%),
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 3px,
            rgba(103, 232, 249, 0.25) 3px,
            rgba(103, 232, 249, 0.25) 4px);
    animation: jellyfish-tentacles 2.5s ease-in-out infinite;
}

@keyframes jellyfish-float-2 {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-40px) translateX(20px);
        opacity: 0.7;
    }
}

/* Show jellyfish only for ocean theme */
.jellyfish,
.jellyfish-2 {
    display: none !important;
}

.theme-ocean .jellyfish,
.theme-ocean .jellyfish-2,
body.theme-ocean .jellyfish,
body.theme-ocean .jellyfish-2 {
    display: block !important;
}

/* Show nebula only for space theme */
.nebula {
    display: none !important;
}

.theme-space .nebula,
body.theme-space .nebula {
    display: block !important;
}

/* ============================================
   🌊 BIOLUMINESCENT WAVES (Ocean Theme)
   Subtle glowing wave effect at bottom of screen
   ============================================ */
.bioluminescent-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(180deg, 
        transparent 0%,
        rgba(6, 182, 212, 0.02) 40%,
        rgba(34, 211, 238, 0.05) 70%,
        rgba(103, 232, 249, 0.08) 100%);
    animation: wave-glow 6s ease-in-out infinite;
    pointer-events: none;
    display: none !important;
}

.bioluminescent-wave::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse 200px 40px at 15% 80%, rgba(103, 232, 249, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 150px 30px at 50% 90%, rgba(34, 211, 238, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 180px 35px at 85% 85%, rgba(103, 232, 249, 0.04) 0%, transparent 70%);
    animation: wave-drift 10s ease-in-out infinite;
}

.bioluminescent-wave::after {
    content: none;
}

.theme-ocean .bioluminescent-wave,
body.theme-ocean .bioluminescent-wave {
    display: block !important;
}

@keyframes wave-glow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

@keyframes wave-drift {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50% { transform: translateX(10px); opacity: 0.8; }
}

/* ============================================
   🌌 AURORA BOREALIS (Winter Theme)
   Northern lights effect
   ============================================ */
.aurora-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    overflow: hidden;
    pointer-events: none;
    display: none !important;
}

.theme-winter .aurora-container,
body.theme-winter .aurora-container {
    display: block !important;
}

.aurora-wave {
    position: absolute;
    width: 200%;
    height: 100%;
    opacity: 0.4;
    filter: blur(60px);
    animation: aurora-dance 15s ease-in-out infinite;
}



.aurora-wave:nth-child(1) {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(34, 211, 238, 0.3) 20%,
        rgba(56, 189, 248, 0.4) 40%,
        rgba(34, 211, 238, 0.2) 60%,
        transparent 100%);
    top: 5%;
    animation-delay: 0s;
}

.aurora-wave:nth-child(2) {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(74, 222, 128, 0.25) 30%,
        rgba(34, 211, 238, 0.35) 50%,
        rgba(74, 222, 128, 0.15) 70%,
        transparent 100%);
    top: 10%;
    animation-delay: -5s;
    animation-duration: 18s;
}

.aurora-wave:nth-child(3) {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(168, 85, 247, 0.2) 25%,
        rgba(56, 189, 248, 0.3) 45%,
        rgba(168, 85, 247, 0.15) 65%,
        transparent 100%);
    top: 0%;
    animation-delay: -10s;
    animation-duration: 20s;
}

@keyframes aurora-dance {
    0%, 100% {
        transform: translateX(-25%) skewX(-5deg) var(--parallax-transform, translate(0, 0));
    }
    25% {
        transform: translateX(-15%) skewX(3deg) var(--parallax-transform, translate(0, 0));
    }
    50% {
        transform: translateX(-30%) skewX(-8deg) var(--parallax-transform, translate(0, 0));
    }
    75% {
        transform: translateX(-20%) skewX(5deg) var(--parallax-transform, translate(0, 0));
    }
}

/* CL-V-1 (2026-05-10): Cloud-theme sun retired entirely — both the
   `.sun-flare` lens flare (was here) and the `.sun-rays` glow (was in
   public-pages.css) removed. Visual testing on Josh + Sage's accounts
   confirmed the page reads cleaner without either: the floating clouds
   and ambient particles carry the Cloud-theme atmosphere on their own,
   and any sun position either competed with content or floated awkwardly
   in negative space. Markup deletions: `<div class="sun-flare">` and
   `<div class="sun-rays">` in `Components/ThemeEffects.razor`; parallax
   mapping in `wwwroot/js/themeParallax.js`; the `.focus-home-page ~ .sun-flare`
   suppression rule in this file's footer was also pruned (no more element
   to suppress). To bring either back: restore the markup + the rule
   block (git history is the source of truth). */

/* ============================================
   🌸 FLOATING PETALS (Nature Theme - Spring variant)
   Optional: gentle floating petals/seeds
   ============================================ */
.floating-seed {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(253, 224, 71, 0.4) 100%);
    border-radius: 50% 50% 50% 0;
    animation: seed-float 20s ease-in-out infinite;
    pointer-events: none;
    display: none !important;
}

.floating-seed::after {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    width: 1px;
    height: 15px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5));
    transform-origin: bottom center;
}

.floating-seed:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.floating-seed:nth-child(2) { left: 30%; top: 40%; animation-delay: -5s; animation-duration: 25s; }
.floating-seed:nth-child(3) { left: 70%; top: 15%; animation-delay: -10s; animation-duration: 22s; }
.floating-seed:nth-child(4) { left: 85%; top: 50%; animation-delay: -3s; animation-duration: 28s; }
.floating-seed:nth-child(5) { left: 50%; top: 60%; animation-delay: -15s; animation-duration: 24s; }

.theme-nature .floating-seed,
body.theme-nature .floating-seed {
    display: block !important;
}

@keyframes seed-float {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.8; }
    50% {
        transform: translateY(-30vh) translateX(50px) rotate(180deg);
    }
    90% { opacity: 0.6; }
    100% {
        transform: translateY(-60vh) translateX(-30px) rotate(360deg);
        opacity: 0;
    }
}

/* ============================================
   ✨ COSMIC DUST (Space Theme)
   Subtle cosmic particle effect
   ============================================ */
.cosmic-dust {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 70%, rgba(168, 85, 247, 0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 100%),
        radial-gradient(2px 2px at 60% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 80%, rgba(255, 255, 255, 0.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 10%, rgba(168, 85, 247, 0.35) 0%, transparent 100%),
        radial-gradient(2px 2px at 90% 40%, rgba(255, 255, 255, 0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 10% 60%, rgba(139, 92, 246, 0.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 90%, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
    animation: cosmic-drift 60s linear infinite;
    pointer-events: none;
    display: none !important;
}

.theme-space .cosmic-dust,
body.theme-space .cosmic-dust {
    display: block !important;
}

@keyframes cosmic-drift {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(-100px) translateX(50px); }
}

/* ============================================
   🔮 MYSTIC THEME EFFECTS
   Arcane portals, floating runes, mandalas,
   dimensional rifts, mystical fog, energy tendrils
   ============================================ */

/* Mystical Fog/Mist Layer */
.mystic-fog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse 80% 50% at 50% 80%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(249, 115, 22, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 100% 60% at 70% 100%, rgba(45, 27, 78, 0.3) 0%, transparent 50%);
    animation: fog-drift 20s ease-in-out infinite;
    pointer-events: none;
    display: none !important;
}

@keyframes fog-drift {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.8; }
    50% { transform: translateX(30px) translateY(-20px); opacity: 1; }
}

/* Dimensional Rift - Tear in reality */
.dimensional-rift {
    position: absolute;
    width: 150px;
    height: 300px;
    top: 15%;
    right: 25%;
    pointer-events: none;
    display: none !important;
}

.dimensional-rift .rift-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 200px;
    background: linear-gradient(180deg, 
        transparent 0%,
        rgba(249, 115, 22, 0.8) 20%,
        rgba(255, 255, 255, 1) 50%,
        rgba(249, 115, 22, 0.8) 80%,
        transparent 100%);
    filter: blur(2px);
    animation: rift-pulse 3s ease-in-out infinite;
}

.dimensional-rift .rift-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 250px;
    background: radial-gradient(ellipse at center,
        rgba(249, 115, 22, 0.3) 0%,
        rgba(124, 58, 237, 0.15) 40%,
        transparent 70%);
    animation: rift-flicker 2s ease-in-out infinite alternate;
}

.dimensional-rift .rift-sparks {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
}

.dimensional-rift .rift-spark {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #f97316;
    border-radius: 50%;
    box-shadow: 0 0 10px #f97316, 0 0 20px #fbbf24;
    animation: rift-spark-fly 2s ease-out infinite;
}

.dimensional-rift .rift-spark:nth-child(1) { left: 45%; animation-delay: 0s; }
.dimensional-rift .rift-spark:nth-child(2) { left: 55%; animation-delay: 0.3s; }
.dimensional-rift .rift-spark:nth-child(3) { left: 50%; animation-delay: 0.6s; }
.dimensional-rift .rift-spark:nth-child(4) { left: 48%; animation-delay: 0.9s; }
.dimensional-rift .rift-spark:nth-child(5) { left: 52%; animation-delay: 1.2s; }

@keyframes rift-pulse {
    0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scaleY(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scaleY(1.1); }
}

@keyframes rift-flicker {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

@keyframes rift-spark-fly {
    0% { 
        top: 50%; 
        opacity: 1;
        transform: translateX(0);
    }
    100% { 
        top: 10%; 
        opacity: 0;
        transform: translateX(calc((Math.random() - 0.5) * 60px));
    }
}

/* Energy Tendrils - Flowing magical energy */
.energy-tendril {
    position: absolute;
    pointer-events: none;
    display: none !important;
}

.energy-tendril svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.energy-tendril path {
    fill: none;
    stroke: url(#tendril-gradient);
    stroke-width: 2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.6));
    animation: tendril-flow 4s ease-in-out infinite;
}

@keyframes tendril-flow {
    0%, 100% { stroke-dashoffset: 0; opacity: 0.6; }
    50% { stroke-dashoffset: 50; opacity: 1; }
}

/* Eye of Agamotto - Mystical eye */
.mystic-eye {
    position: absolute;
    width: 80px;
    height: 80px;
    bottom: 15%;
    right: 20%;
    pointer-events: none;
    display: none !important;
}

.mystic-eye .eye-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border: 2px solid rgba(249, 115, 22, 0.5);
    border-radius: 50%;
    animation: eye-rotate 10s linear infinite;
}

.mystic-eye .eye-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 1px solid rgba(251, 191, 36, 0.6);
    border-radius: 50%;
    animation: eye-rotate 7s linear infinite reverse;
}

.mystic-eye .eye-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    background: radial-gradient(circle, 
        rgba(74, 222, 128, 0.9) 0%, 
        rgba(34, 197, 94, 0.6) 50%,
        transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.6), 0 0 40px rgba(34, 197, 94, 0.3);
    animation: eye-pulse 2s ease-in-out infinite;
}

.mystic-eye .eye-pupil {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #0f172a;
    border-radius: 50%;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
}

@keyframes eye-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes eye-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* Spell Circle - Complex rotating magical circle */
.spell-circle {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.15;
    display: none !important;
}

.spell-circle .circle-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(249, 115, 22, 0.4);
    border-radius: 50%;
}

.spell-circle .circle-layer:nth-child(1) {
    width: 380px;
    height: 380px;
    animation: spell-rotate 30s linear infinite;
}

.spell-circle .circle-layer:nth-child(2) {
    width: 320px;
    height: 320px;
    animation: spell-rotate 25s linear infinite reverse;
}

.spell-circle .circle-layer:nth-child(3) {
    width: 260px;
    height: 260px;
    animation: spell-rotate 20s linear infinite;
}

.spell-circle .circle-layer:nth-child(4) {
    width: 200px;
    height: 200px;
    animation: spell-rotate 15s linear infinite reverse;
}

/* Spell circle symbols */
.spell-circle .spell-symbols {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    animation: spell-rotate 40s linear infinite;
}

.spell-circle .spell-symbol {
    position: absolute;
    font-size: 18px;
    color: rgba(249, 115, 22, 0.6);
    text-shadow: 0 0 10px rgba(249, 115, 22, 0.8);
}

@keyframes spell-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Mystic Portal - Enhanced Sling Ring style */
.mystic-portal {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 20%;
    right: 10%;
    pointer-events: none;
    display: none !important;
    animation: portal-appear 0.5s ease-out;
}

@keyframes portal-appear {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.mystic-portal .portal-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid transparent;
    animation: portal-rotate 8s linear infinite;
}

.mystic-portal .portal-ring:nth-child(1) {
    width: 180px;
    height: 180px;
    border-color: rgba(249, 115, 22, 0.6);
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.4), inset 0 0 20px rgba(249, 115, 22, 0.2);
    animation-duration: 8s;
}

.mystic-portal .portal-ring:nth-child(2) {
    width: 150px;
    height: 150px;
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.3), inset 0 0 15px rgba(251, 191, 36, 0.15);
    animation-duration: 6s;
    animation-direction: reverse;
}

.mystic-portal .portal-ring:nth-child(3) {
    width: 120px;
    height: 120px;
    border-color: rgba(249, 115, 22, 0.7);
    box-shadow: 0 0 25px rgba(249, 115, 22, 0.5), inset 0 0 25px rgba(249, 115, 22, 0.25);
    animation-duration: 5s;
}

.mystic-portal .portal-ring:nth-child(4) {
    width: 90px;
    height: 90px;
    border-color: rgba(253, 186, 116, 0.6);
    box-shadow: 0 0 30px rgba(253, 186, 116, 0.4);
    animation-duration: 4s;
    animation-direction: reverse;
}

/* Portal center glow */
.mystic-portal .portal-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(249, 115, 22, 0.8) 0%,
        rgba(251, 191, 36, 0.4) 40%,
        transparent 70%);
    animation: portal-pulse 3s ease-in-out infinite;
}

@keyframes portal-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes portal-pulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

/* Floating Arcane Runes */
.mystic-rune {
    position: absolute;
    font-size: 1.5rem;
    color: rgba(249, 115, 22, 0.6);
    text-shadow: 0 0 10px rgba(249, 115, 22, 0.8), 0 0 20px rgba(249, 115, 22, 0.4);
    animation: rune-float 10s ease-in-out infinite;
    pointer-events: none;
    display: none !important;
    font-family: serif;
}

.mystic-rune:nth-child(1) { left: 35%; top: 30%; animation-delay: 0s; }
.mystic-rune:nth-child(2) { left: 45%; top: 60%; animation-delay: -2s; font-size: 1.2rem; }
.mystic-rune:nth-child(3) { left: 85%; top: 25%; animation-delay: -4s; font-size: 1.8rem; }
.mystic-rune:nth-child(4) { left: 75%; top: 70%; animation-delay: -6s; }
.mystic-rune:nth-child(5) { left: 55%; top: 15%; animation-delay: -3s; font-size: 1.3rem; }
.mystic-rune:nth-child(6) { left: 65%; top: 80%; animation-delay: -5s; font-size: 1.6rem; }

@keyframes rune-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.4;
    }
    25% {
        transform: translateY(-20px) rotate(5deg);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-10px) rotate(-3deg);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-25px) rotate(8deg);
        opacity: 0.9;
    }
}

/* Mandala - Sacred geometry pattern */
.mystic-mandala {
    position: absolute;
    width: 300px;
    height: 300px;
    bottom: 10%;
    right: 5%;
    opacity: 0.3;
    pointer-events: none;
    display: none !important;
}

.mystic-mandala .mandala-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 50%;
}

.mystic-mandala .mandala-layer:nth-child(1) {
    width: 280px;
    height: 280px;
    animation: mandala-rotate 30s linear infinite;
}

.mystic-mandala .mandala-layer:nth-child(2) {
    width: 220px;
    height: 220px;
    animation: mandala-rotate 25s linear infinite reverse;
}

.mystic-mandala .mandala-layer:nth-child(3) {
    width: 160px;
    height: 160px;
    animation: mandala-rotate 20s linear infinite;
}

.mystic-mandala .mandala-layer:nth-child(4) {
    width: 100px;
    height: 100px;
    animation: mandala-rotate 15s linear infinite reverse;
}

/* Mandala geometric patterns */
.mystic-mandala .mandala-layer::before,
.mystic-mandala .mandala-layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 50%;
}

.mystic-mandala .mandala-layer::before {
    transform: rotate(30deg);
}

.mystic-mandala .mandala-layer::after {
    transform: rotate(60deg);
}

@keyframes mandala-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Energy Sparks - magical particles */
.mystic-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #f97316;
    border-radius: 50%;
    box-shadow: 0 0 10px #f97316, 0 0 20px #fbbf24, 0 0 30px #f97316;
    animation: spark-drift 8s ease-in-out infinite;
    pointer-events: none;
    display: none !important;
}

.mystic-spark:nth-child(1) { left: 40%; top: 40%; animation-delay: 0s; }
.mystic-spark:nth-child(2) { left: 50%; top: 20%; animation-delay: -1s; width: 3px; height: 3px; }
.mystic-spark:nth-child(3) { left: 60%; top: 50%; animation-delay: -2s; width: 5px; height: 5px; }
.mystic-spark:nth-child(4) { left: 80%; top: 35%; animation-delay: -3s; }
.mystic-spark:nth-child(5) { left: 45%; top: 70%; animation-delay: -4s; width: 3px; height: 3px; }
.mystic-spark:nth-child(6) { left: 70%; top: 75%; animation-delay: -5s; }
.mystic-spark:nth-child(7) { left: 55%; top: 55%; animation-delay: -6s; width: 5px; height: 5px; }
.mystic-spark:nth-child(8) { left: 90%; top: 60%; animation-delay: -7s; }

@keyframes spark-drift {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(30px, -40px) scale(1.5);
        opacity: 1;
    }
    50% {
        transform: translate(-20px, -60px) scale(0.8);
        opacity: 0.6;
    }
    75% {
        transform: translate(40px, -30px) scale(1.2);
        opacity: 0.9;
    }
}

/* Mirror Dimension Fractures */
.mirror-fracture {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
    display: none !important;
}

.mirror-fracture .fracture-line {
    position: absolute;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(249, 115, 22, 0.1) 20%,
        rgba(249, 115, 22, 0.3) 50%,
        rgba(249, 115, 22, 0.1) 80%,
        transparent 100%);
    height: 1px;
    animation: fracture-shimmer 15s ease-in-out infinite;
}

.mirror-fracture .fracture-line:nth-child(1) {
    width: 200px;
    top: 20%;
    left: 40%;
    transform: rotate(25deg);
    animation-delay: 0s;
}

.mirror-fracture .fracture-line:nth-child(2) {
    width: 150px;
    top: 40%;
    right: 15%;
    transform: rotate(-15deg);
    animation-delay: -5s;
}

.mirror-fracture .fracture-line:nth-child(3) {
    width: 180px;
    bottom: 30%;
    left: 30%;
    transform: rotate(35deg);
    animation-delay: -10s;
}

@keyframes fracture-shimmer {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Show Mystic effects only for mystic theme */
.theme-mystic .mystic-portal,
.theme-mystic .mystic-rune,
.theme-mystic .mystic-mandala,
.theme-mystic .mystic-spark,
.theme-mystic .mirror-fracture,
.theme-mystic .mystic-fog,
.theme-mystic .dimensional-rift,
.theme-mystic .mystic-eye,
.theme-mystic .spell-circle,
body.theme-mystic .mystic-portal,
body.theme-mystic .mystic-rune,
body.theme-mystic .mystic-mandala,
body.theme-mystic .mystic-spark,
body.theme-mystic .mirror-fracture,
body.theme-mystic .mystic-fog,
body.theme-mystic .dimensional-rift,
body.theme-mystic .mystic-eye,
body.theme-mystic .spell-circle {
    display: block !important;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .snowflake { font-size: 0.9rem !important; }
    .cloud { opacity: 0.5; }
    
    /* Reduce intensity on mobile for performance */
    /* CL-V-1 (2026-05-10): `.sun-flare` mobile shrink rule removed — element retired. */
    .aurora-wave { filter: blur(40px); opacity: 0.3; }
    .nebula { filter: blur(30px); width: 200px; height: 150px; }
    .bioluminescent-wave { height: 80px; }
    .cosmic-dust { opacity: 0.5; }
    
    /* Mystic theme mobile */
    .mystic-portal { width: 120px; height: 120px; }
    .mystic-mandala { width: 150px; height: 150px; opacity: 0.2; }
    .dimensional-rift { display: none !important; }
    .spell-circle { width: 200px; height: 200px; opacity: 0.1; }
    .mystic-eye { width: 50px; height: 50px; }
    .mystic-rune:nth-child(n+4) { display: none !important; }
    .mystic-spark:nth-child(n+5) { display: none !important; }
    .jellyfish, .jellyfish-2 { transform: scale(0.7); }
    
    /* Hide some intensive effects on mobile */
    .floating-seed:nth-child(n+3) { display: none !important; }
    .aurora-wave:nth-child(3) { display: none; }
}

@media (max-width: 400px) {
    /* Further reduce on very small screens */
    /* CL-V-1 (2026-05-10): `.sun-flare` rule removed — element retired. */
    .aurora-container { display: none !important; }
    .cosmic-dust { display: none !important; }
    .jellyfish-2 { display: none !important; }
}

/* ============================================
   EFFECT INTENSITY CSS VARIABLE
   Controls the strength of all theme effects
   ============================================ */
:root {
    --effect-intensity: 0.7; /* Default 70% */
}

/* Apply intensity to various effect elements */
.theme-effects {
    opacity: var(--effect-intensity);
}

/* At 0 intensity, hide canvas effects */
[style*="--effect-intensity: 0"] #cursor-trail-canvas,
[style*="--effect-intensity: 0"] #ambient-particle-canvas {
    display: none !important;
}

/* ============================================
   THEME TOGGLE BUTTON & INTENSITY SLIDER
   ============================================ */
.theme-toggle-container {
    position: relative;
    z-index: 1050;
}

.theme-toggle {
    cursor: pointer;
    position: relative;
    z-index: 1051;
}

.intensity-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 2px;
}


.intensity-indicator:hover {
    opacity: 1;
    transform: scale(1.2);
}

/* Intensity Slider Popup */
.intensity-slider-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    padding: 14px;
    border-radius: 14px;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 9999;
    animation: slider-popup-appear 0.2s ease-out;
}

@keyframes slider-popup-appear {
    0% { opacity: 0; transform: translateY(-10px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.intensity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.intensity-title {
    font-weight: 600;
    font-size: 0.85rem;
}

.intensity-value {
    font-size: 0.75rem;
    opacity: 0.8;
    font-weight: 500;
}

.intensity-slider-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.intensity-icon-min,
.intensity-icon-max {
    font-size: 0.9rem;
    opacity: 0.7;
}

.intensity-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: transparent;
    outline: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.intensity-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: transparent;
}

.intensity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--slider-accent, #7dd3fc);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: -6px; /* Center thumb on 6px track: (18-6)/2 = 6 */
}

.intensity-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.intensity-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: transparent;
}

.intensity-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--slider-accent, #7dd3fc);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Intensity Preset Buttons */
.intensity-presets {
    display: flex;
    gap: 6px;
}

.intensity-preset {
    flex: 1;
    padding: 6px 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.intensity-preset:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.intensity-preset.active {
    background: var(--slider-accent, #7dd3fc);
    color: #000;
    border-color: var(--slider-accent, #7dd3fc);
    font-weight: 600;
}

/* Locked intensity presets for anonymous users */
.intensity-preset.locked,
.intensity-preset:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.02);
}

.intensity-preset.locked:hover,
.intensity-preset:disabled:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.2);
    transform: none;
}

/* Limited intensity slider for anonymous users - shows locked portion */
.intensity-slider-wrapper {
    position: relative;
}

.intensity-slider-track {
    position: relative;
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.intensity-slider-track .intensity-slider {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 6px;
    background: transparent;
}

/* For unauthenticated users: slider only takes 25% of track width */
.intensity-slider-wrapper.show-locked .intensity-slider-track .intensity-slider {
    width: 25%;
}

/* Locked overlay - shows the grayed out portion */
.intensity-locked-overlay {
    position: absolute;
    top: 0;
    left: 25%;
    right: 0;
    height: 100%;
    background: rgba(60, 60, 80, 0.4);
    border-radius: 0 3px 3px 0;
    pointer-events: none;
}

/* Winter theme light mode adjustments */
.theme-winter .intensity-preset {
    border-color: rgba(8, 145, 178, 0.3);
    background: rgba(8, 145, 178, 0.05);
}

.theme-winter .intensity-preset:hover {
    background: rgba(8, 145, 178, 0.1);
}

.theme-winter .intensity-slider {
    background: rgba(8, 145, 178, 0.2);
}

/* Theme Selection Grid in Popup */
.theme-selection-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 12px 0;
}

.theme-winter .theme-selection-divider {
    background: rgba(8, 145, 178, 0.2);
}

.theme-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.theme-count {
    font-size: 0.7rem;
    opacity: 0.7;
    font-weight: 500;
}

.theme-selection-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.theme-select-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.theme-select-btn:hover:not(.locked) {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.08);
}

/* Theme preview tooltip on hover */
.theme-select-btn:not(.locked)::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10;
}

.theme-select-btn:not(.locked):hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.theme-select-btn.selected {
    background: var(--slider-accent, #7dd3fc);
    border-color: var(--slider-accent, #7dd3fc);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.theme-select-btn.selected .theme-select-icon {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.theme-select-btn.locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.2);
}

.theme-select-btn.locked:hover {
    opacity: 0.7;
}

.theme-lock-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 0.6rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    padding: 1px 3px;
}

/* Upgrade Button */
.upgrade-themes-btn {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--slider-accent, #7dd3fc) 0%, rgba(255, 255, 255, 0.3) 100%);
    color: #000;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upgrade-themes-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* New User Unlock Prompt */
.theme-unlock-prompt {
    text-align: center;
    padding: 8px 0;
}

.theme-unlock-prompt .unlock-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.theme-unlock-prompt h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: inherit;
}

.theme-unlock-prompt p {
    font-size: 0.8rem;
    opacity: 0.8;
    margin: 0 0 12px;
}

.theme-unlock-prompt .unlock-activities {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    font-size: 0.8rem;
    text-align: left;
}

.theme-unlock-prompt .unlock-activities li {
    padding: 4px 0;
    opacity: 0.9;
}

.theme-unlock-prompt .unlock-cta-btn {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-unlock-prompt .unlock-cta-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* Winter theme adjustments */
.theme-winter .theme-select-btn {
    border-color: rgba(8, 145, 178, 0.3);
    background: rgba(8, 145, 178, 0.05);
}

.theme-winter .theme-select-btn:hover:not(.locked) {
    background: rgba(8, 145, 178, 0.15);
    border-color: rgba(8, 145, 178, 0.5);
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.theme-toggle-btn.cloud {
    background: rgba(255, 255, 255, 0.95);
    color: #1e3a5f;
    border: 1px solid rgba(30, 58, 95, 0.15);
}

.theme-toggle-btn.cloud:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(30, 58, 95, 0.25);
}

.theme-toggle-btn.space {
    background: rgba(30, 27, 75, 0.8);
    color: #a855f7;
    box-shadow: 0 2px 12px rgba(168, 85, 247, 0.3);
}

.theme-toggle-btn.space:hover {
    background: rgba(50, 45, 100, 0.9);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
}

.theme-toggle-btn.winter {
    background: rgba(255, 255, 255, 0.85);
    color: #0891b2;
    box-shadow: 0 2px 12px rgba(8, 145, 178, 0.2);
}

.theme-toggle-btn.winter:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(8, 145, 178, 0.3);
}

.theme-toggle-btn.nature {
    background: rgba(34, 83, 52, 0.85);
    color: #86efac;
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.25);
}

.theme-toggle-btn.nature:hover {
    background: rgba(34, 83, 52, 0.95);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
}


.theme-toggle-btn.ocean {
    background: rgba(6, 78, 108, 0.85);
    color: #67e8f9;
    box-shadow: 0 2px 12px rgba(14, 165, 233, 0.3);
}

.theme-toggle-btn.ocean:hover {
    background: rgba(6, 78, 108, 0.95);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4);
}

.theme-toggle-btn.mystic {
    background: rgba(26, 10, 46, 0.9);
    color: #f97316;
    box-shadow: 0 2px 12px rgba(249, 115, 22, 0.4), 0 0 20px rgba(124, 58, 237, 0.2);
}

.theme-toggle-btn.mystic:hover {
    background: rgba(45, 27, 78, 0.95);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.5), 0 0 30px rgba(124, 58, 237, 0.3);
}

.theme-toggle .theme-label {
    white-space: nowrap;
}

/* ============================================
   GLOBAL SELECT/DROPDOWN THEME STYLES
   Apply to ALL select elements across the app
   Consolidated using :is() selector
   ============================================ */

/* Base select styling for all light themes */
:is(.theme-executive, .theme-cloud,
    body.theme-executive, body.theme-cloud) select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: var(--theme-input-bg, #ffffff) !important;
    border-color: var(--theme-input-border, #cbd5e1) !important;
    color: var(--theme-text-primary, #1e293b) !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
    padding-right: 40px !important;
}

/* Custom dropdown arrow for Executive (slate) */
:is(.theme-executive, body.theme-executive) select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23475569'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
}

/* Custom dropdown arrow for Cloud (blue) */
:is(.theme-cloud, body.theme-cloud) select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
}

/* Base select styling for all dark themes - consolidated */
:is(.is-dark, body.is-dark) select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: var(--theme-input-bg, rgba(30, 41, 59, 0.95)) !important;
    border-color: var(--theme-border, rgba(255, 255, 255, 0.2)) !important;
    color: var(--theme-text-primary, #fff) !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
    padding-right: 40px !important;
}

/* Custom dropdown arrow colors per theme - each needs unique SVG color */
:is(.theme-space, body.theme-space) select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23a855f7'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
}

:is(.theme-winter, body.theme-winter) select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%2338bdf8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
}

:is(.theme-nature, body.theme-nature) select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%234ade80'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
}

.theme-ocean select,
body.theme-ocean select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%2322d3ee'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

:is(.theme-ocean, body.theme-ocean) select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%2322d3ee'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
}

:is(.theme-mystic, body.theme-mystic) select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23f97316'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
}

:is(.theme-tron, body.theme-tron) select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%2300d4ff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
}

/* Select option styles for dark themes - each needs unique background color */
:is(.theme-space, body.theme-space) select option {
    background-color: #1e1b4b !important;
    color: #f1f5f9 !important;
}

:is(.theme-winter, body.theme-winter) select option {
    background-color: #164e63 !important;
    color: #f0f9ff !important;
}

:is(.theme-nature, body.theme-nature) select option {
    background-color: #14532d !important;
    color: #f0fdf4 !important;
}

:is(.theme-ocean, body.theme-ocean) select option {
    background-color: #0c4a6e !important;
    color: #f0f9ff !important;
}

:is(.theme-mystic, body.theme-mystic) select option {
    background-color: #1a0a2e !important;
    color: #faf5ff !important;
}

:is(.theme-tron, body.theme-tron) select option {
    background-color: #000000 !important;
    color: #e0f7ff !important;
}

/* Focus states for dark themes - consolidated using :is() */
:is(.theme-space, body.theme-space) select:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;
    outline: none !important;
}

:is(.theme-winter, body.theme-winter) select:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
    outline: none !important;
}

:is(.theme-nature, body.theme-nature) select:focus {
    border-color: #4ade80 !important;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2) !important;
    outline: none !important;
}

:is(.theme-ocean, body.theme-ocean) select:focus {
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2) !important;
    outline: none !important;
}

:is(.theme-mystic, body.theme-mystic) select:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2) !important;
    outline: none !important;
}

:is(.theme-tron, body.theme-tron) select:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2) !important;
    outline: none !important;
}

/* ============================================
   GLOBAL INPUT/TEXTAREA THEME STYLES
   Consolidated using :is() selector
   ============================================ */

/* Define dark themes selector for reuse */
/* Base input styling for dark themes - only apply to inputs that don't have transparent or inherit backgrounds */
:is(.is-dark, body.is-dark)
    :is(input:not([type="checkbox"]):not([type="radio"]):not(.unified-search-input):not(.message-input),
        textarea:not(.message-input)) {
    background-color: var(--theme-input-bg, rgba(30, 41, 59, 0.95));
    border-color: var(--theme-border, rgba(255, 255, 255, 0.2));
    color: var(--theme-text-primary, #fff);
}

/* Placeholder text for dark themes - consolidated */
:is(.is-dark, body.is-dark)
    :is(input:not(.unified-search-input):not(.message-input),
        textarea:not(.message-input))::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Focus states for inputs - consolidated using :is() */
:is(.theme-space, body.theme-space)
    :is(input:not(.unified-search-input):not(.message-input),
        textarea:not(.message-input)):focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
    outline: none;
}

:is(.theme-winter, body.theme-winter)
    :is(input:not(.unified-search-input):not(.message-input),
        textarea:not(.message-input)):focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
    outline: none;
}

:is(.theme-nature, body.theme-nature)
    :is(input:not(.unified-search-input):not(.message-input),
        textarea:not(.message-input)):focus {
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
    outline: none;
}

:is(.theme-ocean, body.theme-ocean)
    :is(input:not(.unified-search-input):not(.message-input),
        textarea:not(.message-input)):focus {
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
    outline: none;
}

/* ============================================
   USER EDIT DIALOG - GLOBAL FORM STYLES
   ============================================ */

/* Base form input styling for user dialog */
.user-dialog .user-form-group input,
.user-dialog .user-form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.15s ease;
    background: white;
    color: #1e293b;
    box-sizing: border-box;
    font-family: inherit;
}

.user-dialog .user-form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 40px;
}

.user-dialog .user-form-group input:focus,
.user-dialog .user-form-group select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.user-dialog .user-form-group input:disabled {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}


.user-dialog .user-form-group input::placeholder {
    color: #9ca3af;
}

/* Dark theme styling for user dialog - consolidated */
:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean)
    .user-dialog .user-form-group :is(input, select) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean)
    .user-dialog .user-form-group select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Focus states per theme - need unique accent colors */
.theme-space .user-dialog .user-form-group :is(input, select):focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

.theme-winter .user-dialog .user-form-group :is(input, select):focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.theme-nature .user-dialog .user-form-group :is(input, select):focus {
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}

.theme-ocean .user-dialog .user-form-group :is(input, select):focus {
    border-color: #22d3d1;
    box-shadow: 0 0 0 3px rgba(34, 211, 209, 0.2);
}

:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean)
    .user-dialog .user-form-group input:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
}

:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean)
    .user-dialog .user-form-group input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}


/* ============================================
   VIP INVITE FORM STYLES
   Global styles for InputText/InputTextArea components
   ============================================ */
.vip-invite-page .form-group input,
.vip-invite-page .form-group textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    background: #f8fafc;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.vip-invite-page .form-group input::placeholder,
.vip-invite-page .form-group textarea::placeholder {
    color: #94a3b8;
}

.vip-invite-page .form-group input:hover,
.vip-invite-page .form-group textarea:hover {
    border-color: #cbd5e1;
    background: white;
}

.vip-invite-page .form-group input:focus,
.vip-invite-page .form-group textarea:focus {
    outline: none;
    border-color: #6366f1;
    background: white;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.vip-invite-page .form-group textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

/* Dark theme overrides for VIP invite - consolidated */
:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean)
    .vip-invite-page .form-group :is(input, textarea) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
}

:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean)
    .vip-invite-page .form-group :is(input, textarea)::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean)
    .vip-invite-page .form-group :is(input, textarea):hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean)
    .vip-invite-page .form-group :is(input, textarea):focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2);
}





/* VIP Invite - Linked User Section */
.vip-invite-page .form-select {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    background: #f8fafc;
    cursor: pointer;
}

.vip-invite-page .form-select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.vip-invite-page .linked-user-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 2px solid #10b981;
    border-radius: 12px;
}

.vip-invite-page .linked-badge {
    font-weight: 600;
    color: #047857;
}

.vip-invite-page .role-badge {
    padding: 0.25rem 0.75rem;
    background: #6366f1;
    color: white;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

.vip-invite-page .linked-info {
    color: #047857;
    margin: 0.5rem 0;
}

/* Dark theme linked user */
.theme-space .vip-invite-page .form-select,
.theme-winter .vip-invite-page .form-select,
.theme-nature .vip-invite-page .form-select,
.theme-ocean .vip-invite-page .form-select {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.theme-space .vip-invite-page .linked-user-card,
.theme-winter .vip-invite-page .linked-user-card,
.theme-nature .vip-invite-page .linked-user-card,
.theme-ocean .vip-invite-page .linked-user-card {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: white;
}

.theme-space .vip-invite-page .linked-badge,
.theme-winter .vip-invite-page .linked-badge,
.theme-nature .vip-invite-page .linked-badge,
.theme-ocean .vip-invite-page .linked-badge {
    color: #6ee7b7;
}


/* Activate VIP Account - Form Inputs */
.activate-page .form-input {
    padding: 0.875rem 1rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    color: #1e293b;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.activate-page .form-input:focus {
    outline: none;
    border-color: #6366f1;
    background: white;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.activate-page .form-input.disabled {
    background: #f1f5f9;
    color: #64748b;
}

/* ============================================
   WORK ITEM DETAIL PAGE - Dark Theme Overrides
   Cards and panels need global overrides because
   CSS isolation doesn't work with nested theme classes
   ============================================ */

/* WorkItemDetail page cards - Quick Actions, etc. */
.workitem-detail-page.theme-space .card,
.workitem-detail-page.theme-winter .card,
.workitem-detail-page.theme-nature .card,
.workitem-detail-page.theme-ocean .card {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}

.workitem-detail-page.theme-space .card-title,
.workitem-detail-page.theme-winter .card-title,
.workitem-detail-page.theme-nature .card-title,
.workitem-detail-page.theme-ocean .card-title {
    color: #f1f5f9 !important;
}

/* WorkItemStatsSummary component */
.work-item-stats.theme-space,
.work-item-stats.theme-winter,
.work-item-stats.theme-nature,
.work-item-stats.theme-ocean {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}

.work-item-stats.theme-space .stat-card,
.work-item-stats.theme-winter .stat-card,
.work-item-stats.theme-nature .stat-card,
.work-item-stats.theme-ocean .stat-card {
    background: rgba(255, 255, 255, 0.05) !important;
}

.work-item-stats.theme-space .stats-title,
.work-item-stats.theme-winter .stats-title,
.work-item-stats.theme-nature .stats-title,
.work-item-stats.theme-ocean .stats-title {
    color: #f1f5f9 !important;
}

.work-item-stats.theme-space .stat-label,
.work-item-stats.theme-winter .stat-label,
.work-item-stats.theme-nature .stat-label,
.work-item-stats.theme-ocean .stat-label {
    color: #94a3b8 !important;
}

.work-item-stats.theme-space .stat-value,
.work-item-stats.theme-winter .stat-value,
.work-item-stats.theme-nature .stat-value,
.work-item-stats.theme-ocean .stat-value {
    color: #f1f5f9 !important;
}

/* WorkItemSubTasks component */
.work-item-subtasks.theme-space,
.work-item-subtasks.theme-winter,
.work-item-subtasks.theme-nature,
.work-item-subtasks.theme-ocean {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}

.work-item-subtasks.theme-space .subtasks-title,
.work-item-subtasks.theme-winter .subtasks-title,
.work-item-subtasks.theme-nature .subtasks-title,
.work-item-subtasks.theme-ocean .subtasks-title {
    color: #f1f5f9 !important;
}

.work-item-subtasks.theme-space .subtask-card,
.work-item-subtasks.theme-winter .subtask-card,
.work-item-subtasks.theme-nature .subtask-card,
.work-item-subtasks.theme-ocean .subtask-card {
    background: rgba(255, 255, 255, 0.05) !important;
}

.work-item-subtasks.theme-space .subtask-title,
.work-item-subtasks.theme-winter .subtask-title,
.work-item-subtasks.theme-nature .subtask-title,
.work-item-subtasks.theme-ocean .subtask-title {
    color: #f1f5f9 !important;
}

.work-item-subtasks.theme-space .empty-title,
.work-item-subtasks.theme-winter .empty-title,
.work-item-subtasks.theme-nature .empty-title,
.work-item-subtasks.theme-ocean .empty-title {
    color: #94a3b8 !important;
}

/* WorkItemDetailsPanel component */
.work-item-details.theme-space,
.work-item-details.theme-winter,
.work-item-details.theme-nature,
.work-item-details.theme-ocean {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}

.work-item-details.theme-space .details-title,
.work-item-details.theme-winter .details-title,
.work-item-details.theme-nature .details-title,
.work-item-details.theme-ocean .details-title {
    color: #f1f5f9 !important;
}

.work-item-details.theme-space .detail-label,
.work-item-details.theme-winter .detail-label,
.work-item-details.theme-nature .detail-label,
.work-item-details.theme-ocean .detail-label {
    color: #94a3b8 !important;
}

.work-item-details.theme-space .detail-value,
.work-item-details.theme-winter .detail-value,
.work-item-details.theme-nature .detail-value,
.work-item-details.theme-ocean .detail-value {
    color: #f1f5f9 !important;
}

/* WorkItemQuickActions buttons in dark theme */
.workitem-detail-page.theme-space .quick-action-btn,
.workitem-detail-page.theme-winter .quick-action-btn,
.workitem-detail-page.theme-nature .quick-action-btn,
.workitem-detail-page.theme-ocean .quick-action-btn {
    background: var(--theme-primary) !important;
    color: white !important;
    border: none !important;
}

.workitem-detail-page.theme-space .quick-action-btn:hover,
.workitem-detail-page.theme-winter .quick-action-btn:hover,
.workitem-detail-page.theme-nature .quick-action-btn:hover,
.workitem-detail-page.theme-ocean .quick-action-btn:hover {
    background: var(--theme-primary-hover) !important;
}

/* WorkItemTimeEntries component */
.work-item-time-entries.theme-space,
.work-item-time-entries.theme-winter,
.work-item-time-entries.theme-nature,
.work-item-time-entries.theme-ocean {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}

.work-item-time-entries.theme-space .time-entries-title,
.work-item-time-entries.theme-winter .time-entries-title,
.work-item-time-entries.theme-nature .time-entries-title,
.work-item-time-entries.theme-ocean .time-entries-title {
    color: #f1f5f9 !important;
}

.work-item-time-entries.theme-space .timeline-content,
.work-item-time-entries.theme-winter .timeline-content,
.work-item-time-entries.theme-nature .timeline-content,
.work-item-time-entries.theme-ocean .timeline-content {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* WorkItemNotes - Override the prefers-color-scheme media query with theme classes */
.workitem-detail-page.theme-space .notes-container,
.workitem-detail-page.theme-winter .notes-container,
.workitem-detail-page.theme-nature .notes-container,
.workitem-detail-page.theme-ocean .notes-container {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

.workitem-detail-page.theme-space .notes-title,
.workitem-detail-page.theme-winter .notes-title,
.workitem-detail-page.theme-nature .notes-title,
.workitem-detail-page.theme-ocean .notes-title {
    color: #f1f5f9 !important;
}

.workitem-detail-page.theme-space .note-card,
.workitem-detail-page.theme-winter .note-card,
.workitem-detail-page.theme-nature .note-card,
.workitem-detail-page.theme-ocean .note-card {
    background: rgba(51, 65, 85, 0.5) !important;
}

.workitem-detail-page.theme-space .note-author,
.workitem-detail-page.theme-winter .note-author,
.workitem-detail-page.theme-nature .note-author,
.workitem-detail-page.theme-ocean .note-author {
    color: #f1f5f9 !important;
}

.workitem-detail-page.theme-space .note-date,
.workitem-detail-page.theme-winter .note-date,
.workitem-detail-page.theme-nature .note-date,
.workitem-detail-page.theme-ocean .note-date {
    color: #94a3b8 !important;
}

.workitem-detail-page.theme-space .note-content,
.workitem-detail-page.theme-winter .note-content,
.workitem-detail-page.theme-nature .note-content,
.workitem-detail-page.theme-ocean .note-content {
    color: #e2e8f0 !important;
}

/* WorkItemActivityHistory component */
.work-item-history.theme-space,
.work-item-history.theme-winter,
.work-item-history.theme-nature,
.work-item-history.theme-ocean {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.work-item-history.theme-space .history-title,
.work-item-history.theme-winter .history-title,
.work-item-history.theme-nature .history-title,
.work-item-history.theme-ocean .history-title {
    color: #f1f5f9 !important;
}

/* ============================================
   CHAT SIDEBAR THEME OVERRIDES
   ============================================ */

/* Cloud theme - ensure sidebar elements are readable */
.theme-cloud .conversation-sidebar,
.theme-cloud .sidebar-header {
    background: rgba(255, 255, 255, 0.95) !important;
}

.theme-cloud .sidebar-title {
    color: #1e293b !important;
}

.theme-cloud .sidebar-btn {
    color: #64748b !important;
}

.theme-cloud .sidebar-btn:hover {
    background: #f1f5f9 !important;
    color: #7c3aed !important;
}

/* Cloud theme conversation list */
.theme-cloud .conversation-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

.theme-cloud .conversation-item:hover {
    background: #f1f5f9 !important;
}

.theme-cloud .conversation-item.active {
    background: #ede9fe !important;
    border-color: #a78bfa !important;
}

.theme-cloud .conversation-title {
    color: #1e293b !important;
}

.theme-cloud .conversation-preview {
    color: #64748b !important;
}

.theme-cloud .conversation-time {
    color: #94a3b8 !important;
}

.theme-cloud .sidebar-empty,
.theme-cloud .empty-title,
.theme-cloud .empty-desc {
    color: #64748b !important;
}

.theme-cloud .sidebar-loading {
    color: #64748b !important;
}

/* Dark themes sidebar */
.theme-space .conversation-sidebar,
.theme-winter .conversation-sidebar,
.theme-nature .conversation-sidebar,
.theme-ocean .conversation-sidebar {
    background: rgba(30, 41, 59, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.theme-space .sidebar-header,
.theme-winter .sidebar-header,
.theme-nature .sidebar-header,
.theme-ocean .sidebar-header {
    background: rgba(15, 23, 42, 0.8) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-space .sidebar-title,
.theme-winter .sidebar-title,
.theme-nature .sidebar-title,
.theme-ocean .sidebar-title {
    color: #f1f5f9 !important;
}

.theme-space .sidebar-btn,
.theme-winter .sidebar-btn,
.theme-nature .sidebar-btn,
.theme-ocean .sidebar-btn {
    color: #94a3b8 !important;
}

.theme-space .sidebar-btn:hover,
.theme-winter .sidebar-btn:hover,
.theme-nature .sidebar-btn:hover,
.theme-ocean .sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* Dark themes conversation list */
.theme-space .conversation-item,
.theme-winter .conversation-item,
.theme-nature .conversation-item,
.theme-ocean .conversation-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.theme-space .conversation-item:hover,
.theme-winter .conversation-item:hover,
.theme-nature .conversation-item:hover,
.theme-ocean .conversation-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.theme-space .conversation-item.active,
.theme-winter .conversation-item.active,
.theme-nature .conversation-item.active,
.theme-ocean .conversation-item.active {
    background: rgba(124, 58, 237, 0.3) !important;
    border-color: rgba(167, 139, 250, 0.5) !important;
}

.theme-space .conversation-title,
.theme-winter .conversation-title,
.theme-nature .conversation-title,
.theme-ocean .conversation-title {
    color: #f1f5f9 !important;
}

.theme-space .conversation-preview,
.theme-winter .conversation-preview,
.theme-nature .conversation-preview,
.theme-ocean .conversation-preview {
    color: #94a3b8 !important;
}

.theme-space .conversation-time,
.theme-winter .conversation-time,
.theme-nature .conversation-time,
.theme-ocean .conversation-time {
    color: #64748b !important;
}

.theme-space .sidebar-empty,
.theme-winter .sidebar-empty,
.theme-nature .sidebar-empty,
.theme-ocean .sidebar-empty,
.theme-space .empty-title,
.theme-winter .empty-title,
.theme-nature .empty-title,
.theme-ocean .empty-title,
.theme-space .empty-desc,
.theme-winter .empty-desc,
.theme-nature .empty-desc,
.theme-ocean .empty-desc {
    color: #94a3b8 !important;
}

.theme-space .sidebar-loading,
.theme-winter .sidebar-loading,
.theme-nature .sidebar-loading,
.theme-ocean .sidebar-loading {
    color: #94a3b8 !important;
}

/* ============================================
   FLOATING CHAT - ChatInput Overrides
   Compact styling for the floating AI Companion
   ============================================ */

/* Make input area more compact in floating chat */
.floating-chat-dialog .chat-input-wrapper {
    padding: 8px 10px;
}

.floating-chat-dialog .input-row {
    gap: 6px;
}

.floating-chat-dialog .input-container {
    padding: 6px 8px 6px 12px;
    gap: 6px;
}

.floating-chat-dialog .message-input {
    padding: 6px 0;
    font-size: 0.85rem;
    min-height: 24px !important;
    max-height: 80px;
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

/* Only show scrollbar when content overflows */
.floating-chat-dialog .message-input:focus,
.floating-chat-dialog .message-input:not(:placeholder-shown) {
    overflow-y: auto;
}

/* Floating chat input scrollbar styling */
.floating-chat-dialog .message-input::-webkit-scrollbar {
    width: 6px;
}

.floating-chat-dialog .message-input::-webkit-scrollbar-track {
    background: transparent;
}

.floating-chat-dialog .message-input::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

.floating-chat-dialog .message-input::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* Hide scrollbar buttons (up/down arrows) */
.floating-chat-dialog .message-input::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

/* Dark theme input scrollbar */
.theme-space .floating-chat-dialog .message-input,
.theme-winter .floating-chat-dialog .message-input,
.theme-nature .floating-chat-dialog .message-input,
.theme-ocean .floating-chat-dialog .message-input,
.theme-mystic .floating-chat-dialog .message-input,
.theme-tron .floating-chat-dialog .message-input {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.theme-space .floating-chat-dialog .message-input::-webkit-scrollbar-thumb,
.theme-winter .floating-chat-dialog .message-input::-webkit-scrollbar-thumb,
.theme-nature .floating-chat-dialog .message-input::-webkit-scrollbar-thumb,
.theme-ocean .floating-chat-dialog .message-input::-webkit-scrollbar-thumb,
.theme-mystic .floating-chat-dialog .message-input::-webkit-scrollbar-thumb,
.theme-tron .floating-chat-dialog .message-input::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.theme-space .floating-chat-dialog .message-input::-webkit-scrollbar-thumb:hover,
.theme-winter .floating-chat-dialog .message-input::-webkit-scrollbar-thumb:hover,
.theme-nature .floating-chat-dialog .message-input::-webkit-scrollbar-thumb:hover,
.theme-ocean .floating-chat-dialog .message-input::-webkit-scrollbar-thumb:hover,
.theme-mystic .floating-chat-dialog .message-input::-webkit-scrollbar-thumb:hover,
.theme-tron .floating-chat-dialog .message-input::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Smaller buttons in floating chat */
.floating-chat-dialog .voice-button {
    width: 32px;
    height: 32px;
}

.floating-chat-dialog .voice-button svg {
    width: 18px;
    height: 18px;
}

.floating-chat-dialog .send-button {
    width: 36px;
    height: 36px;
}

.floating-chat-dialog .send-button svg {
    width: 18px;
    height: 18px;
}

/* Hide hint in floating chat */
.floating-chat-dialog .input-hint {
    display: none;
}

/* Tool suggestions dropdown - constrain height in floating chat */
.floating-chat-dialog .tool-suggestions-dropdown,
.floating-chat-dialog .tool-suggestions-dropdown.browse-mode {
    max-height: 260px;
    left: 8px;
    right: 8px;
}

/* Ensure dropdown doesn't overflow the chat container */
.floating-chat-dialog .chat-input-area {
    position: relative;
    overflow: visible;
}

/* ============================================
   FLOATING CHAT - Scrollbar Styling
   Theme-aware scrollbar for AI Companion
   ============================================ */
.floating-chat-dialog .chat-messages::-webkit-scrollbar {
    width: 8px;
}

.floating-chat-dialog .chat-messages::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}

.floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* Dark theme scrollbar styling for floating chat */
.theme-space .floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb,
.theme-winter .floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb,
.theme-nature .floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb,
.theme-ocean .floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb,
.theme-mystic .floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb,
.theme-tron .floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.theme-space .floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb:hover,
.theme-winter .floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb:hover,
.theme-nature .floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb:hover,
.theme-ocean .floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb:hover,
.theme-mystic .floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb:hover,
.theme-tron .floating-chat-dialog .chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* ============================================
   HOME PAGE - Command Center ChatInput Overrides
   Make ChatInput seamlessly integrate with the unified wrapper
   ============================================ */

/* The unified command wrapper on home page */
.command-input-wrapper {
    max-width: 600px;
}

/* Remove ChatInput's own wrapper styling when inside command center */
.command-input-wrapper > .chat-input-wrapper {
    flex: 1;
    min-width: 0;
}

.command-input-wrapper .chatbot-input {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 0 20px 0 !important;
}

.command-input-wrapper .quick-commands-bar {
    background: rgba(248, 250, 252, 0.6) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.1) !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 8px 12px !important;
}

.command-input-wrapper .input-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 12px 14px 12px 8px !important;
}

.command-input-wrapper .message-input {
    color: #1e293b !important;
    font-size: 0.95rem !important;
}

.command-input-wrapper .message-input::placeholder {
    color: #94a3b8 !important;
}

.command-input-wrapper .send-button {
    border-radius: 12px !important;
}

.command-input-wrapper .input-hint {
    color: #94a3b8 !important;
    font-size: 0.7rem !important;
    padding: 4px 14px 8px !important;
}

/* Dark theme overrides for command center */
.theme-space .command-input-wrapper .quick-commands-bar {
    background: rgba(15, 10, 30, 0.6) !important;
    border-color: rgba(168, 85, 247, 0.1) !important;
}

.theme-space .command-input-wrapper .message-input {
    color: #f1f5f9 !important;
}

.theme-space .command-input-wrapper .message-input::placeholder {
    color: #64748b !important;
}

.theme-space .command-input-wrapper .input-hint {
    color: #64748b !important;
}

.theme-winter .command-input-wrapper .quick-commands-bar {
    background: rgba(22, 78, 99, 0.5) !important;
    border-color: rgba(186, 230, 253, 0.1) !important;
}

.theme-winter .command-input-wrapper .message-input {
    color: #f0f9ff !important;
}

.theme-winter .command-input-wrapper .message-input::placeholder {
    color: #7dd3fc !important;
}

.theme-nature .command-input-wrapper .quick-commands-bar {
    background: rgba(20, 83, 45, 0.5) !important;
    border-color: rgba(134, 239, 172, 0.1) !important;
}

.theme-nature .command-input-wrapper .message-input {
    color: #f0fdf4 !important;
}

.theme-nature .command-input-wrapper .message-input::placeholder {
    color: #86efac !important;
}

.theme-ocean .command-input-wrapper .quick-commands-bar {
    background: rgba(12, 74, 110, 0.5) !important;
    border-color: rgba(56, 189, 248, 0.1) !important;
}

.theme-ocean .command-input-wrapper .message-input {
    color: #f0f9ff !important;
}

.theme-ocean .command-input-wrapper .message-input::placeholder {
    color: #7dd3fc !important;
}

/* ============================================
   FEATURE LINKS IN CHAT MESSAGES
   Links to internal features from AI responses
   ============================================ */

.feature-link {
    color: #7c3aed;
    text-decoration: none;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(124, 58, 237, 0.1);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.feature-link:hover {
    color: #6d28d9;
    background: rgba(124, 58, 237, 0.2);
    text-decoration: none;
}

/* Dark theme feature links */
.theme-space .feature-link,
.theme-winter .feature-link,
.theme-nature .feature-link,
.theme-ocean .feature-link,
.theme-mystic .feature-link,
.theme-tron .feature-link {
    color: #c4b5fd;
    background: rgba(196, 181, 253, 0.15);
}

.theme-space .feature-link:hover,
.theme-winter .feature-link:hover,
.theme-nature .feature-link:hover,
.theme-ocean .feature-link:hover,
.theme-mystic .feature-link:hover,
.theme-tron .feature-link:hover {
    color: #e9d5ff;
    background: rgba(196, 181, 253, 0.25);
}

/* Task links in chat messages - links to specific work items */
.task-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(37, 99, 235, 0.1);
    transition: all 0.2s ease;
}

.task-link:hover {
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.2);
    text-decoration: none;
}

/* Dark theme task links */
.theme-space .task-link,
.theme-winter .task-link,
.theme-nature .task-link,
.theme-ocean .task-link,
.theme-mystic .task-link,
.theme-tron .task-link {
    color: #93c5fd;
    background: rgba(147, 197, 253, 0.15);
}

.theme-space .task-link:hover,
.theme-winter .task-link:hover,
.theme-nature .task-link:hover,
.theme-ocean .task-link:hover,
.theme-mystic .task-link:hover,
.theme-tron .task-link:hover {
    color: #bfdbfe;
    background: rgba(147, 197, 253, 0.25);
}

/* Tool navigation links in chat. Inline-link treatment (2026-05-03):
   formerly rendered as a full purple pill button with chain-link glyph
   prefix and hover lift — that "tool action" pattern overwhelmed short
   2-3 sentence answers and made every linked tool feel like the primary
   call-to-action of the message. New treatment: underlined inline link
   in theme-primary color, no background, no glyph prefix, no transform.
   Reads as part of the prose, not as a button competing with it. */
.tool-link {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    font-weight: 500;
    transition: color 0.15s ease;
}

.tool-link:hover {
    color: var(--theme-primary-hover, #4f46e5);
    text-decoration-thickness: 2px;
}

/* Dark theme tool links — inherit the same inline treatment with a
   lighter primary tint for contrast against dark-card backgrounds. */
.is-dark .tool-link {
    color: var(--theme-primary-light, #c4b5fd);
}

.is-dark .tool-link:hover {
    color: var(--theme-primary-light, #e9d5ff);
}


/* ============================================
   CHAT MARKDOWN LISTS
   The .chat-md-list class is added by
   MessageLinkEnricher.RenderMinimalMarkdown when
   converting AI responses with bullet lists. We
   reset the browser default list-style and use a
   chat-native bullet so lists feel embedded in
   the conversation rather than document-y.
   One level of nesting is supported.
   ============================================ */

.chat-md-list {
    list-style: none;
    margin: 4px 0;
    padding-left: 0;
}

.chat-md-list li {
    position: relative;
    padding-left: 18px;
    margin: 2px 0;
    line-height: 1.5;
}

.chat-md-list li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: var(--accent-color, #6366f1);
}

.chat-md-list.nested {
    margin-left: 16px;
    margin-top: 2px;
}

/* ============================================
   CHAT MARKDOWN — EXTENDED FORMS (GPT56-1b)
   Headings, tables, code, and rules emitted by
   the GPT-5.6 models and rendered by
   MessageLinkEnricher.RenderMinimalMarkdown.
   Neutral gray alphas so all 9 themes work
   without per-theme overrides; accent only on
   the heading, mirroring chat-md-list bullets.
   ============================================ */

.chat-md-heading {
    font-weight: 700;
    margin: 10px 0 2px;
    color: var(--accent-color, #6366f1);
}

.chat-md-table {
    border-collapse: collapse;
    margin: 6px 0;
    font-size: 0.95em;
}

.chat-md-table th,
.chat-md-table td {
    border: 1px solid rgba(128, 128, 128, 0.35);
    padding: 4px 10px;
    text-align: left;
}

.chat-md-table th {
    font-weight: 700;
    background: rgba(128, 128, 128, 0.12);
}

.chat-md-code {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 0.9em;
    background: rgba(128, 128, 128, 0.18);
    border-radius: 4px;
    padding: 1px 5px;
}

.chat-md-pre {
    background: rgba(128, 128, 128, 0.12);
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 6px 0;
    overflow-x: auto;
}

.chat-md-pre code {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 0.9em;
    background: none;
    padding: 0;
    white-space: pre;
}

.chat-md-hr {
    border: none;
    border-top: 1px solid rgba(128, 128, 128, 0.35);
    margin: 8px 0;
}


/* ============================================
   FOCUS TOOLS EDIT DIALOG - ICON PREVIEW
   CSS isolation doesn't reach child elements
   ============================================ */

.edit-dialog .icon-preview {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-dialog .icon-preview:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: #6366f1;
}

.edit-dialog .icon-preview .material-symbols-rounded {
    font-family: 'Material Symbols Rounded' !important;
    font-size: 20px;
    color: #6366f1;
    -webkit-font-smoothing: antialiased;
}

/* Dark theme icon preview */
.theme-space .edit-dialog .icon-preview,
.theme-winter .edit-dialog .icon-preview,
.theme-nature .edit-dialog .icon-preview,
.theme-ocean .edit-dialog .icon-preview {
    background: rgba(139, 92, 246, 0.2);
}

.theme-space .edit-dialog .icon-preview:hover,
.theme-winter .edit-dialog .icon-preview:hover,
.theme-nature .edit-dialog .icon-preview:hover,
.theme-ocean .edit-dialog .icon-preview:hover {
    background: rgba(139, 92, 246, 0.35);
    border-color: #8b5cf6;
}

.theme-space .edit-dialog .icon-preview .material-symbols-rounded,
.theme-winter .edit-dialog .icon-preview .material-symbols-rounded,
.theme-nature .edit-dialog .icon-preview .material-symbols-rounded,
.theme-ocean .edit-dialog .icon-preview .material-symbols-rounded {
    color: #a78bfa;
}

/* ============================================
   UNIVERSAL DIALOG BACKDROP
   Adds a semi-transparent backdrop to all dialog overlays
   for better prominence and focus
   ============================================ */

/* Base backdrop for all dialog overlays (light theme) */
/* Exclude tour overlays - they have their own transparent/spotlight system */
[class*="-overlay"][class*="dialog"]:not(.blazor-tour-overlay),
[class*="dialog-overlay"]:not(.blazor-tour-overlay),
[class*="-dialog-overlay"]:not(.blazor-tour-overlay) {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* ============================================
   UNIVERSAL DIALOG DARK THEME OVERRIDES
   Two strategies for matching dark-themed overlays:
   1. Theme class ON the overlay (e.g., <div class="modal-overlay theme-nature">)
   2. Overlay INSIDE a themed ancestor (e.g., <div class="list-page theme-nature">...<div class="dialog-overlay">)
   Both produce: 40% dim overlay, solid #1e293b container.
   Exclude tour overlays - they handle their own styling.
   ============================================ */

/* Strategy 1: Theme class directly on the overlay element

   Exclusion list: tour overlays + non-dialog full-bleed overlays that manage
   their own backgrounds. See EVO-V-1 in DECISIONS.md for the substring trap.
   When adding a new -overlay class, ask: is it a dialog (transparent backdrop
   + solid surface child)? If yes, skip the list. If no, add it here. */
.is-dark[class*="overlay"]:not(.blazor-tour-overlay):not(.evo-arrival-overlay):not(.cave-overlay):not(.evo-overlay):not(.streak-milestone-overlay):not(.global-scene-overlay):not(.konami-overlay) {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.is-dark[class*="overlay"]:not(.blazor-tour-overlay):not(.evo-arrival-overlay):not(.cave-overlay):not(.evo-overlay):not(.streak-milestone-overlay):not(.global-scene-overlay):not(.konami-overlay) > div {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Strategy 2: Overlay inside a themed ancestor (no theme class on overlay needed)

   EVO-V-1 (2026-05-11): Built up an exclusion list of non-dialog overlays that
   are caught by the `[class*="overlay"]` substring matcher but should NOT receive
   the dark-dialog skin. The trap symptom: `> div` rule paints the overlay's first
   child (often a full-bleed decoration container, position:absolute inset:0) as
   solid #1e293b, hiding everything behind it on dark themes. Two strikes during
   launch QA before this exclusion list was filled out:
     - .evo-arrival-overlay  → confetti container hid the companion sprite
     - .cave-overlay         → cave-screen masked the WorldPicker on Space/Winter

   Audit also added these full-bleed overlays preemptively:
     - .evo-overlay              (heavyweight evolution cinematic, transparent container)
     - .streak-milestone-overlay (Cipher game celebration)
     - .global-scene-overlay     (style-variant notifications)
     - .konami-overlay           (easter egg)

   Rule for adding a new -overlay class: if it's a dialog (transparent backdrop +
   solid surface child), leave it alone. If it's a full-bleed celebration / toast /
   easter-egg / decoration overlay, add it to all four :not() chains in this section. */
.is-dark [class*="overlay"]:not(.blazor-tour-overlay):not(.tour-backdrop):not(.tour-spotlight):not(.evo-arrival-overlay):not(.cave-overlay):not(.evo-overlay):not(.streak-milestone-overlay):not(.global-scene-overlay):not(.konami-overlay) {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.is-dark [class*="overlay"]:not(.blazor-tour-overlay):not(.evo-arrival-overlay):not(.cave-overlay):not(.evo-overlay):not(.streak-milestone-overlay):not(.global-scene-overlay):not(.konami-overlay) > div:not(.tour-step):not(.tour-backdrop):not(.tour-spotlight) {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Dark theme text colors inside dialog containers (exclude tour + evo-arrival celebration) */
.is-dark [class*="overlay"]:not(.blazor-tour-overlay):not(.evo-arrival-overlay):not(.cave-overlay):not(.evo-overlay):not(.streak-milestone-overlay):not(.global-scene-overlay):not(.konami-overlay) h2,
.is-dark [class*="overlay"]:not(.blazor-tour-overlay):not(.evo-arrival-overlay):not(.cave-overlay):not(.evo-overlay):not(.streak-milestone-overlay):not(.global-scene-overlay):not(.konami-overlay) h3,
.is-dark [class*="overlay"]:not(.blazor-tour-overlay):not(.evo-arrival-overlay):not(.cave-overlay):not(.evo-overlay):not(.streak-milestone-overlay):not(.global-scene-overlay):not(.konami-overlay) label {
    color: rgba(255, 255, 255, 0.9);
}

.is-dark [class*="overlay"]:not(.blazor-tour-overlay):not(.evo-arrival-overlay):not(.cave-overlay):not(.evo-overlay):not(.streak-milestone-overlay):not(.global-scene-overlay):not(.konami-overlay) p,
.is-dark [class*="overlay"]:not(.blazor-tour-overlay):not(.evo-arrival-overlay):not(.cave-overlay):not(.evo-overlay):not(.streak-milestone-overlay):not(.global-scene-overlay):not(.konami-overlay) span {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   MAILBOX PAGE - Additional Theme Styles
   (Overlay/container handled by universal dialog rules above)
   ============================================ */

/* Dialog content for dark themes */
.mailbox-page.theme-space .dialog-content,
.mailbox-page.theme-winter .dialog-content,
.mailbox-page.theme-nature .dialog-content,
.mailbox-page.theme-ocean .dialog-content,
.mailbox-page.theme-mystic .dialog-content,
.mailbox-page.theme-tron .dialog-content,
.dialog-overlay.theme-space .dialog-content,
.dialog-overlay.theme-winter .dialog-content,
.dialog-overlay.theme-nature .dialog-content,
.dialog-overlay.theme-ocean .dialog-content,
.dialog-overlay.theme-mystic .dialog-content,
.dialog-overlay.theme-tron .dialog-content {
    background: transparent;
    border: none;
}

/* Dialog header */
.mailbox-page.theme-space .dialog-header,
.mailbox-page.theme-winter .dialog-header,
.mailbox-page.theme-nature .dialog-header,
.mailbox-page.theme-ocean .dialog-header,
.dialog-overlay.theme-space .dialog-header,
.dialog-overlay.theme-winter .dialog-header,
.dialog-overlay.theme-nature .dialog-header,
.dialog-overlay.theme-ocean .dialog-header {
    border-bottom-color: rgba(51, 65, 85, 0.5);
}

.mailbox-page.theme-space .dialog-header h2,
.mailbox-page.theme-winter .dialog-header h2,
.mailbox-page.theme-nature .dialog-header h2,
.mailbox-page.theme-ocean .dialog-header h2,
.dialog-overlay.theme-space .dialog-header h2,
.dialog-overlay.theme-winter .dialog-header h2,
.dialog-overlay.theme-nature .dialog-header h2,
.dialog-overlay.theme-ocean .dialog-header h2 {
    color: #f1f5f9;
}

/* Dialog footer */
.mailbox-page.theme-space .dialog-footer,
.mailbox-page.theme-winter .dialog-footer,
.mailbox-page.theme-nature .dialog-footer,
.mailbox-page.theme-ocean .dialog-footer,
.dialog-overlay.theme-space .dialog-footer,
.dialog-overlay.theme-winter .dialog-footer,
.dialog-overlay.theme-nature .dialog-footer,
.dialog-overlay.theme-ocean .dialog-footer {
    border-top-color: rgba(51, 65, 85, 0.5);
}

/* Form groups in dark themes */
.mailbox-page.theme-space .form-group label,
.mailbox-page.theme-winter .form-group label,
.mailbox-page.theme-nature .form-group label,
.mailbox-page.theme-ocean .form-group label,
.dialog-overlay.theme-space .form-group label,
.dialog-overlay.theme-winter .form-group label,
.dialog-overlay.theme-nature .form-group label,
.dialog-overlay.theme-ocean .form-group label {
    color: #e2e8f0;
}

.mailbox-page.theme-space .form-group input,
.mailbox-page.theme-space .form-group select,
.mailbox-page.theme-space .form-group textarea,
.mailbox-page.theme-winter .form-group input,
.mailbox-page.theme-winter .form-group select,
.mailbox-page.theme-winter .form-group textarea,
.mailbox-page.theme-nature .form-group input,
.mailbox-page.theme-nature .form-group select,
.mailbox-page.theme-nature .form-group textarea,
.mailbox-page.theme-ocean .form-group input,
.mailbox-page.theme-ocean .form-group select,
.mailbox-page.theme-ocean .form-group textarea,
.dialog-overlay.theme-space .form-group input,
.dialog-overlay.theme-space .form-group select,
.dialog-overlay.theme-space .form-group textarea,
.dialog-overlay.theme-winter .form-group input,
.dialog-overlay.theme-winter .form-group select,
.dialog-overlay.theme-winter .form-group textarea,
.dialog-overlay.theme-nature .form-group input,
.dialog-overlay.theme-nature .form-group select,
.dialog-overlay.theme-nature .form-group textarea,
.dialog-overlay.theme-ocean .form-group input,
.dialog-overlay.theme-ocean .form-group select,
.dialog-overlay.theme-ocean .form-group textarea {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(71, 85, 105, 0.5);
    color: #f1f5f9;
}

.mailbox-page.theme-space .form-group input:focus,
.mailbox-page.theme-space .form-group select:focus,
.mailbox-page.theme-space .form-group textarea:focus,
.mailbox-page.theme-winter .form-group input:focus,
.mailbox-page.theme-winter .form-group select:focus,
.mailbox-page.theme-winter .form-group textarea:focus,
.mailbox-page.theme-nature .form-group input:focus,
.mailbox-page.theme-nature .form-group select:focus,
.mailbox-page.theme-nature .form-group textarea:focus,
.mailbox-page.theme-ocean .form-group input:focus,
.mailbox-page.theme-ocean .form-group select:focus,
.mailbox-page.theme-ocean .form-group textarea:focus,
.dialog-overlay.theme-space .form-group input:focus,
.dialog-overlay.theme-space .form-group select:focus,
.dialog-overlay.theme-space .form-group textarea:focus,
.dialog-overlay.theme-winter .form-group input:focus,
.dialog-overlay.theme-winter .form-group select:focus,
.dialog-overlay.theme-winter .form-group textarea:focus,
.dialog-overlay.theme-nature .form-group input:focus,
.dialog-overlay.theme-nature .form-group select:focus,
.dialog-overlay.theme-nature .form-group textarea:focus,
.dialog-overlay.theme-ocean .form-group input:focus,
.dialog-overlay.theme-ocean .form-group select:focus,
.dialog-overlay.theme-ocean .form-group textarea:focus {
    border-color: var(--theme-primary, #a855f7);
}

/* Checkbox label in dark themes */
.mailbox-page.theme-space .checkbox-label,
.mailbox-page.theme-winter .checkbox-label,
.mailbox-page.theme-nature .checkbox-label,
.mailbox-page.theme-ocean .checkbox-label,
.dialog-overlay.theme-space .checkbox-label,
.dialog-overlay.theme-winter .checkbox-label,
.dialog-overlay.theme-nature .checkbox-label,
.dialog-overlay.theme-ocean .checkbox-label {
    color: #e2e8f0;
}

/* Dialog body text */
.mailbox-page.theme-space .dialog-body p,
.mailbox-page.theme-winter .dialog-body p,
.mailbox-page.theme-nature .dialog-body p,
.mailbox-page.theme-ocean .dialog-body p,
.dialog-overlay.theme-space .dialog-body p,
.dialog-overlay.theme-winter .dialog-body p,
.dialog-overlay.theme-nature .dialog-body p,
.dialog-overlay.theme-ocean .dialog-body p {
    color: #e2e8f0;
}

/* Close button */
.mailbox-page.theme-space .dialog-close-btn,
.mailbox-page.theme-winter .dialog-close-btn,
.mailbox-page.theme-nature .dialog-close-btn,
.mailbox-page.theme-ocean .dialog-close-btn,
.dialog-overlay.theme-space .dialog-close-btn,
.dialog-overlay.theme-winter .dialog-close-btn,
.dialog-overlay.theme-nature .dialog-close-btn,
.dialog-overlay.theme-ocean .dialog-close-btn {
    color: #94a3b8;
}

.mailbox-page.theme-space .dialog-close-btn:hover,
.mailbox-page.theme-winter .dialog-close-btn:hover,
.mailbox-page.theme-nature .dialog-close-btn:hover,
.mailbox-page.theme-ocean .dialog-close-btn:hover,
.dialog-overlay.theme-space .dialog-close-btn:hover,
.dialog-overlay.theme-winter .dialog-close-btn:hover,
.dialog-overlay.theme-nature .dialog-close-btn:hover,
.dialog-overlay.theme-ocean .dialog-close-btn:hover {
    background: rgba(51, 65, 85, 0.5);
    color: #f1f5f9;
}

/* Outlined buttons in dark themes */
.mailbox-page.theme-space .btn-outlined,
.mailbox-page.theme-winter .btn-outlined,
.mailbox-page.theme-nature .btn-outlined,
.mailbox-page.theme-ocean .btn-outlined,
.dialog-overlay.theme-space .btn-outlined,
.dialog-overlay.theme-winter .btn-outlined,
.dialog-overlay.theme-nature .btn-outlined,
.dialog-overlay.theme-ocean .btn-outlined {
    border-color: rgba(71, 85, 105, 0.5);
    color: #e2e8f0;
}

.mailbox-page.theme-space .btn-outlined:hover,
.mailbox-page.theme-winter .btn-outlined:hover,
.mailbox-page.theme-nature .btn-outlined:hover,
.mailbox-page.theme-ocean .btn-outlined:hover,
.dialog-overlay.theme-space .btn-outlined:hover,
.dialog-overlay.theme-winter .btn-outlined:hover,
.dialog-overlay.theme-nature .btn-outlined:hover,
.dialog-overlay.theme-ocean .btn-outlined:hover {
    background: rgba(51, 65, 85, 0.3);
    border-color: var(--theme-primary, #a855f7);
    color: var(--theme-primary-ink, var(--theme-primary, #a855f7));
}


/* ============================================
   TASK DIALOG (WorkItemDialog) - Theme-specific colors
   Universal overlay/container rules handle background.
   These are for elements that need per-theme accent colors.
   ============================================ */

/* Task dialog header icon per theme */
.task-dialog-overlay.theme-space .task-header-title svg { color: #a855f7; }
.task-dialog-overlay.theme-winter .task-header-title svg { color: #38bdf8; }
.task-dialog-overlay.theme-nature .task-header-title svg { color: #4ade80; }
.task-dialog-overlay.theme-ocean .task-header-title svg { color: #22d3d1; }

/* Task dialog primary button per theme */
.task-dialog-overlay.theme-space .task-btn-primary {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
}
.task-dialog-overlay.theme-winter .task-btn-primary {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}
.task-dialog-overlay.theme-nature .task-btn-primary {
    background: linear-gradient(135deg, #4ade80, #22c55e);
}
.task-dialog-overlay.theme-ocean .task-btn-primary {
    background: linear-gradient(135deg, #22d3d1, #14b8a6);
}

/* ============================================
   MODAL DIALOG FORM INPUTS (modal-overlay pattern)
   Global overrides needed because themes.css global
   input rules use !important, beating scoped CSS.
   Covers: AssetDialog, EventDialog, DailyDownload, etc.
   ============================================ */

/* Light theme - ensure clean white inputs in dialog containers */
/* Exclude checkbox, radio, color, and NativeTimePicker inputs — they have their own sizing */
.modal-container input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input),
.modal-container textarea,
.modal-container select:not(.ntp-inline-period),
.modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input),
.modal-content textarea,
.modal-content select:not(.ntp-inline-period),
[class*="overlay"] > div input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input),
[class*="overlay"] > div textarea,
[class*="overlay"] > div select:not(.ntp-inline-period) {
    background: white !important;
    border: 1px solid #d1d5db !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 0.875rem !important;
    min-height: 38px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/* Prefixed inputs (e.g., $ Hourly Rate, $ Budget Amount) need extra left padding
   for the currency symbol that sits absolutely-positioned at left:14px inside
   .*-input-with-prefix wrappers.
   The :not() chains replicate the global rule's specificity (0,7,2) so this
   override (0,8,2) wins.
   Two prefixed-input classes are in use across the app and both must be matched:
     .time-form-input-prefixed — TimeEntryDialog (legacy class name)
     .with-prefix              — BudgetDialog, RecurringExpenseDialog, and
                                 anything else following the .*-input-with-prefix
                                 wrapper convention
   BaseDialog DOM: .dialog-overlay > .dialog-container > .dialog-content > ... > input */
.dialog-container input.time-form-input-prefixed:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input),
.modal-container input.time-form-input-prefixed:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input),
.modal-content input.time-form-input-prefixed:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input),
[class*="overlay"] > div input.time-form-input-prefixed:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input),
.dialog-container input.with-prefix:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input),
.modal-container input.with-prefix:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input),
.modal-content input.with-prefix:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input),
[class*="overlay"] > div input.with-prefix:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input) {
    padding-left: 32px !important;
}

/* ============================================================
   SHARED FINANCE DIALOG FORM  (BudgetDialog + RecurringExpenseDialog)
   FIN-DLG-1 (2026-06-17): these rules used to live SCOPED inside
   BudgetDialog.razor.css, so RecurringExpenseDialog reused the class names
   but got none of the styling — its 2-col rows stacked and the "$" prefix
   couldn't overlay the input (it rendered on its own line above the box).
   Promoted to global here (one source of truth) so every finance dialog
   that follows the .budget-form / .*-input-with-prefix convention matches.
   The authoritative in-modal .with-prefix padding is the rule directly above.
   Only BudgetDialog + RecurringExpenseDialog use these class names.
   ============================================================ */
.budget-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.budget-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    .budget-form-row {
        grid-template-columns: 1fr;
    }
}

.budget-form-group {
    margin-bottom: 8px;
}

.budget-form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-bottom: 3px;
}

/* (.required-indicator is already defined globally further down in this file —
   not duplicated here.) */

.budget-form-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    transition: all 0.15s ease;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    box-sizing: border-box;
    font-family: inherit;
}

.budget-form-input:focus {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px var(--theme-shadow-color);
}

/* Input with prefix (currency) — wrapper makes the box relative + flex so the
   absolutely-positioned "$" sits inside the field instead of stacking above. */
.budget-input-with-prefix {
    position: relative;
    display: flex;
    align-items: center;
}

.budget-input-prefix {
    position: absolute;
    left: 14px;
    color: var(--theme-text-muted);
    font-weight: 500;
    pointer-events: none;
    z-index: 1;
}

/* Fallback padding for any out-of-modal usage; inside dialogs the global
   .with-prefix rule directly above (higher specificity) supplies the 32px. */
.budget-form-input.with-prefix {
    padding-left: 32px;
}

.budget-form-input::placeholder {
    color: var(--theme-text-muted, #9ca3af);
}

.is-dark .budget-form-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.modal-container input::placeholder,
.modal-container textarea::placeholder,
.modal-content input::placeholder,
.modal-content textarea::placeholder,
[class*="overlay"] > div input::placeholder,
[class*="overlay"] > div textarea::placeholder {
    color: #9ca3af !important;
}

/* Dark themes - override with dark input styles */
/* Exclude checkbox, radio, color, and NativeTimePicker inputs — they have their own sizing */
/* PRO-DARK-2 (2026-07-21): migrated from :is(six-theme) lists to the `is-dark` marker.
   Slate was missing from the list, so the light `background: white !important` baseline
   above won inside every finance dialog (RecurringExpenseDialog QA find). Never
   enumerate theme classes in new CSS. */
.is-dark .modal-container input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input),
.is-dark .modal-container textarea,
.is-dark .modal-container select:not(.ntp-inline-period),
.is-dark .modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input),
.is-dark .modal-content textarea,
.is-dark .modal-content select:not(.ntp-inline-period),
.is-dark [class*="overlay"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.ntp-inline-input):not(.ntp-input):not(.ss-search-input),
.is-dark [class*="overlay"] textarea,
.is-dark [class*="overlay"] select:not(.ntp-inline-period) {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

.is-dark .modal-container input::placeholder,
.is-dark .modal-container textarea::placeholder,
.is-dark .modal-content input::placeholder,
.is-dark .modal-content textarea::placeholder,
.is-dark [class*="overlay"] input::placeholder,
.is-dark [class*="overlay"] textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   DIALOG FOOTER COMPACT BUTTONS
   nts-btn inside dialog footers needs smaller sizing.
   Must be global — Blazor CSS isolation doesn't reach
   FooterContent child elements.
   ============================================ */
[class*="dialog"][class*="footer"] .nts-btn,
[class*="overlay"] [class*="footer"] .nts-btn {
    padding: 6px 14px !important;
    min-height: 32px !important;
    font-size: 0.8125rem !important;
    border-radius: 8px !important;
    gap: 6px !important;
}

[class*="dialog"][class*="footer"] .nts-btn svg,
[class*="overlay"] [class*="footer"] .nts-btn svg {
    width: 16px !important;
    height: 16px !important;
}

/* ============================================
   BUSINESS PROFILE DIALOG
   Global styles for form inputs (CSS isolation workaround)
   ============================================ */
.edit-dialog .form-group input,
.edit-dialog .form-group select,
.edit-dialog .form-group textarea {
    width: 100%;
    padding: 7px 10px;
    background: var(--theme-surface-secondary, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 6px;
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.2s;
    box-sizing: border-box;
}

.edit-dialog .form-group input:focus,
.edit-dialog .form-group select:focus,
.edit-dialog .form-group textarea:focus {
    outline: none;
    border-color: var(--theme-accent, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.edit-dialog .form-group input::placeholder,
.edit-dialog .form-group textarea::placeholder {
    color: var(--theme-text-muted, #94a3b8);
}

.edit-dialog .form-group textarea {
    resize: vertical;
    min-height: 90px;
}

.edit-dialog .form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* Dark theme overrides for edit-dialog */
.theme-space .edit-dialog .form-group input,
.theme-space .edit-dialog .form-group select,
.theme-space .edit-dialog .form-group textarea,
.theme-winter .edit-dialog .form-group input,
.theme-winter .edit-dialog .form-group select,
.theme-winter .edit-dialog .form-group textarea,
.theme-nature .edit-dialog .form-group input,
.theme-nature .edit-dialog .form-group select,
.theme-nature .edit-dialog .form-group textarea,
.theme-ocean .edit-dialog .form-group input,
.theme-ocean .edit-dialog .form-group select,
.theme-ocean .edit-dialog .form-group textarea {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(71, 85, 105, 0.5);
    color: #f1f5f9;
}

.theme-space .edit-dialog .form-group input::placeholder,
.theme-space .edit-dialog .form-group textarea::placeholder,
.theme-winter .edit-dialog .form-group input::placeholder,
.theme-winter .edit-dialog .form-group textarea::placeholder,
.theme-nature .edit-dialog .form-group input::placeholder,
.theme-nature .edit-dialog .form-group textarea::placeholder,
.theme-ocean .edit-dialog .form-group input::placeholder,
.theme-ocean .edit-dialog .form-group textarea::placeholder {
    color: rgba(148, 163, 184, 0.6);
}

.theme-space .edit-dialog .form-group select,
.theme-winter .edit-dialog .form-group select,
.theme-nature .edit-dialog .form-group select,
.theme-ocean .edit-dialog .form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* ============================================
   TOAST NOTIFICATIONS - Dark Theme Overrides
   Global scope needed because ToastContainer
   scoped CSS isolation doesn't reach theme classes
   ============================================ */
.is-dark .toast {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(148, 163, 184, 0.15);
}

.is-dark .toast-success {
    background: #14332a;
    border-color: rgba(34, 197, 94, 0.4);
    color: #bbf7d0;
}

.is-dark .toast-success .toast-title {
    color: #4ade80;
}

.is-dark .toast-success .toast-message {
    color: #86efac;
}

.is-dark .toast-success .toast-icon {
    color: #22c55e;
}

.is-dark .toast-info {
    background: #172554;
    border-color: rgba(59, 130, 246, 0.4);
    color: #bfdbfe;
}

.is-dark .toast-info .toast-title {
    color: #60a5fa;
}

.is-dark .toast-info .toast-message {
    color: #93c5fd;
}

.is-dark .toast-info .toast-icon {
    color: #3b82f6;
}

.is-dark .toast-warning {
    background: #422006;
    border-color: rgba(245, 158, 11, 0.4);
    color: #fef08a;
}

.is-dark .toast-warning .toast-title {
    color: #fbbf24;
}

.is-dark .toast-warning .toast-message {
    color: #fcd34d;
}

.is-dark .toast-warning .toast-icon {
    color: #f59e0b;
}

.is-dark .toast-error {
    background: #450a0a;
    border-color: rgba(239, 68, 68, 0.4);
    color: #fecaca;
}

.is-dark .toast-error .toast-title {
    color: #f87171;
}

.is-dark .toast-error .toast-message {
    color: #fca5a5;
}

.is-dark .toast-error .toast-icon {
    color: #ef4444;
}

.is-dark .toast-credit {
    background: #422006;
    border-color: rgba(251, 191, 36, 0.4);
    color: #fef08a;
}

.is-dark .toast-credit .toast-title {
    color: #fbbf24;
}

.is-dark .toast-credit .toast-message {
    color: #fcd34d;
}

.is-dark .toast-credit .toast-icon {
    color: #f59e0b;
}

.is-dark .toast-close {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .toast-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* VE-V-8 (2026-05-11): Dark-theme override for toast inline action button.
   Higher contrast than the close X — the action is the toast's primary
   affordance when present (e.g., "Undo"). */
.is-dark .toast-action {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .toast-action:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* ============================================
   AUTH PAGES - Global form input styles
   CSS isolation doesn't reach InputText/InputSelect
   child components, so these must be global.
   Scoped under .auth-layout to avoid leaking.
   ============================================ */

.auth-layout .form-label {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    font-size: 0.875rem;
}

.auth-layout .form-control {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #f9fafb;
    transition: all 0.2s ease;
    box-sizing: border-box;
    color: #1e293b;
    font-family: inherit;
}

.auth-layout .form-control::placeholder {
    color: #9ca3af;
}

.auth-layout .form-control:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    background: #ffffff;
}

.auth-layout .form-control.invalid,
.auth-layout .form-control.modified.invalid {
    border-color: #ef4444;
}

.auth-layout .form-control.modified.invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.auth-layout .validation-message {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 4px;
}

/* ============================================
   FOCUS TOOL EDIT DIALOG - GLOBAL CHECKBOX STYLES
   CSS isolation doesn't reach InputCheckbox-rendered
   elements, so these must be global.
   ============================================ */

.edit-dialog .toggle-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.edit-dialog .toggle-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    accent-color: var(--theme-accent, #6366f1);
    cursor: pointer;
}

.edit-dialog .checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.edit-dialog .checkbox-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    accent-color: var(--theme-accent, #6366f1);
    cursor: pointer;
}

/* Dark theme accent overrides for edit dialog checkboxes */
.edit-dialog.theme-space .toggle-item input[type="checkbox"],
.edit-dialog.theme-space .checkbox-item input[type="checkbox"] { accent-color: #a855f7; }
.edit-dialog.theme-winter .toggle-item input[type="checkbox"],
.edit-dialog.theme-winter .checkbox-item input[type="checkbox"] { accent-color: #38bdf8; }
.edit-dialog.theme-nature .toggle-item input[type="checkbox"],
.edit-dialog.theme-nature .checkbox-item input[type="checkbox"] { accent-color: #4ade80; }
.edit-dialog.theme-ocean .toggle-item input[type="checkbox"],
.edit-dialog.theme-ocean .checkbox-item input[type="checkbox"] { accent-color: #22d3d1; }
.edit-dialog.theme-mystic .toggle-item input[type="checkbox"],
.edit-dialog.theme-mystic .checkbox-item input[type="checkbox"] { accent-color: #f472b6; }
.edit-dialog.theme-tron .toggle-item input[type="checkbox"],
.edit-dialog.theme-tron .checkbox-item input[type="checkbox"] { accent-color: #22d3ee; }

/* ============================================
   NOTE DIALOG — GLOBAL (CSS isolation can't reach inside BaseDialog)
   ============================================ */

.note-form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.15s ease;
    background: white;
    color: #1e293b;
    box-sizing: border-box;
}

.note-form-textarea {
    min-height: 50vh;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
}

.note-form-input:focus {
    outline: none;
    border-color: var(--theme-input-focus, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.note-form-input::placeholder {
    color: #9ca3af;
}

.is-dark .note-form-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.is-dark .note-form-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}