/* ========================================
   GLASSMORPHISM VARIABLES - LIGHT MODE
   Override dark mode defaults from index.css
   Change these values to adjust all glass effects
   ======================================== */
body {
    --glass-bg: rgba(255, 255, 255, 0.85); /* Francis Livernois - Increased to 85% to match user request */
    --glass-blur: blur(16px) saturate(180%) brightness(2); /* Charles Gratiot Jr. - Brightness boost prevents grey */
    --glass-border: 1px solid rgba(255, 255, 255, 0.6); /* Charles Gratiot Jr. - Brighter border */
    /* Charles Gratiot Jr. - --glass-shadow and --glass-shadow-hover use core values from index.css */
}

/* ========================================
   LEFT SIDE MENU - ASIDE PANEL
   ======================================== */

/* Main aside container - transparent background for light mode */
/* John R - Structural properties (position, backdrop-filter, border-radius) are in aside.css and menu_acc.css */
aside {
    background-color: transparent !important;
}

/* Note: Menu text colors and styles are handled by custom.css (loaded after this file) */

/* ========================================
   BOTTOM BUTTONS (LEFT AND RIGHT)
   ======================================== */

/* Charles Gratiot Jr. - Glassmorphism now in core btns.css using variables */
/* Light mode variables at top of file override dark mode defaults */

/* Common button SVG icons - black fill for light mode */
section[btns][common] my-btn svg * {
    fill: #000 !important;
}

/* Charles Gratiot Jr. - Hover glow handled by --glass-shadow-hover variable in btns.css */

/* Charles Gratiot Jr. - White tooltips for common buttons (left side) */
section[btns][common] my-tooltip {
    background-color: rgba(255, 255, 255, 1) !important;
    color: #000000 !important;
}

/* Charles Gratiot Jr. - Overlap caret 1px to hide sub-pixel seam */
section[btns][common] my-tooltip::before {
    border-color: rgba(255, 255, 255, 1) transparent transparent transparent !important;
    top: calc(100% - 1px) !important;
}

/* Charles Gratiot Jr. - Nav button glassmorphism now in core btns.css using variables */
/* Light mode just overrides icon colors */

/* Nav button icons - black fill for light mode */
section[btns][nav] my-btn svg .icon,
section[btns][nav] my-btn svg .icon2 {
    fill: #000000 !important;
}

/* Charles Gratiot Jr. - Removed dead ::before nav rules (nav buttons are now regular boxes, no pseudo-element) */
/* Hover glow handled by --glass-shadow-hover variable in btns.css */

/* MICE buttons - keep white background */
section[btns][mice] my-btn {
    background-color: rgba(255, 255, 255, 0.85) !important; /* Francis Livernois - Synced to 0.85 */
}

section[btns][mice] my-btn svg * {
    fill: #000 !important;
}

/* MICE button pulse ring - white → black */
body.mice_scene section[btns][mice] my-btn.measure::before,
body.mice_scene section[btns][mice] my-btn.floorplan::before,
body.mice_scene section[btns][mice] my-btn.pdf::before {
    border: 2px solid rgba(0, 0, 0, 1) !important;
}

/* ========================================
   DESCRIPTION BOX (BOTTOM RIGHT)
   ======================================== */

/* Description container - uses ::before pseudo-element for blur */
/* Charles Gratiot Jr. - Light mode uses global --glass-* variables set in body above */
/* No override needed - ::before in description.css uses var() which picks up light mode values */

/* Charles Gratiot Jr. - Mobile: full opacity white */
@media screen and (max-width: 500px) {
    body.descr my-description {
        background-color: rgba(255, 255, 255, 0.85) !important; /* Francis Livernois - Synced to 0.85 */
    }

    /* Francis Livernois - Hide the double-layer glass pseudo-element on mobile */
    body.descr my-description::before {
        opacity: 0 !important;
        display: none !important;
    }

    /* Francis Livernois - Make caret solid white on mobile to match box */
    body.descr #description-caret {
        background-color: rgba(255, 255, 255, 0.85) !important; /* Francis Livernois - Synced to 0.85 */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        margin-top: -1px !important; /* Francis Livernois - Overlap by 1px to hide seam */
    }
}

/* Description arrow pointer - black to white */
my-description::before {
    border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent !important; /* Charles Gratiot Jr. - Match container 0.8 */
}

/* Charles Gratiot Jr. - Caret uses glassmorphism variables, inherits light mode from body */
/* No override needed - caret uses var(--glass-bg) which is set in body above */

/* Charles Gratiot Jr. - Title-stage now uses global --glass-* variables from body above */
/* No override needed here - description.css uses var() which picks up light mode values */

/* Charles Gratiot Jr. - Title text black when closed in light mode */
my-description div.title-stage my-description-title {
    color: #000000 !important;
}

/* Charles Gratiot Jr. - Mobile: white title with shadow in CLOSED state only (no background)
   NOTE: Closed state = no body.descr class. Open state = body.descr present.
   The text-shadow is needed because mobile closed state has no glassmorphism background. */
@media screen and (max-width: 500px) {
    body:not(.descr) my-description div.title-stage my-description-title {
        color: #ffffff !important;
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    }
}

/* Description title text - when CLOSED stays white (no override needed) */
/* Title is white by default in description.css line 67 */

/* Description title text - when OPEN white � black */
body.descr my-description div.title-stage my-description-title {
    color: #000000 !important;
}

/* Description body text - white � black */
my-description my-description-text {
    color: #000000 !important;
}

/* Audio timeline background - white � black */
my-description .audio_timeline {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Audio timeline progress - white � black (stays same for contrast) */
my-description .audio_timeline .audio_time {
    background-color: rgba(0, 0, 0, 1) !important;
}