/* 
==========================================================================
   Mavidenta CRM - Glass Morphism Foundation
========================================================================== 
*/

:root {
    /* REGULAR GLASS (~15-20% white fill, legibility protection) */
    --glass-regular-bg: rgba(255, 255, 255, 0.05);
    --glass-regular-blur: blur(10px) saturate(1.4);
    --glass-regular-border: rgba(255, 255, 255, 0.15);

    /* CLEAR GLASS (~1-3% white fill, ambient chrome) */
    --glass-clear-bg: rgba(255, 255, 255, 0.006);
    --glass-clear-blur: blur(6px) saturate(1.3);
    --glass-clear-border: rgba(255, 255, 255, 0.1);

    /* OVERLAY BACKDROP (Low opacity, no heavy blur to preserve canvas) */
    --glass-overlay-bg: rgba(4, 7, 15, 0.25);

    /* GLASS SHELL & CARD REFINEMENTS */
    --glass-shell-blur: blur(6px) saturate(0.7);
    --glass-shell-bg: rgba(255, 255, 255, 0.035);
    --glass-card-bg: rgba(255, 255, 255, 0.035);

    /* DIVIDERS & HIGHLIGHTS */
    --glass-divider: rgba(255, 255, 255, 0.08);
    /* Single shared card/panel/modal shell border. Dark value == the literal it
       replaces in grid_layout.css, so dark mode is byte-identical. */
    --glass-card-border: rgba(255, 255, 255, 0.08);
    --inset-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    --ambient-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    --glass-hover-highlight: rgba(255, 255, 255, 0.08);

    /* ZEN NOTIFICATION (js/components/zen_notify.js) — toast tokens.
       The bubble itself is transparent; these cover the slight blur behind it, the light that spills
       from the timer line past the bubble's edge, and the CSS copy of the glass used only when no WebGL context can be created. */
    --toast-blur: blur(1.5px);
    --toast-spill-1: 58%;
    --toast-spill-2: 32%;
    --toast-spill-3: 15%;
    --toast-spill-blend: screen;
    --toast-flat-glow: 20%;
    --toast-flat-edge: rgba(255, 255, 255, 0.14);
    --toast-flat-light: rgba(255, 255, 255, 0.7);
    --toast-flat-light-low: rgba(255, 255, 255, 0.28);

    /* PHONE OVERHAUL (css/phone.css) — popovers: dropdowns and menus that float over a blurred page.
       Dark = regular glass; light adds a slight white fill (0.5) so the blurred page behind is muted. PLACEHOLDER VALUES until the final visual pass. */
    --popover-bg: var(--glass-regular-bg);
    --popover-blur: var(--glass-regular-blur);
    --popover-border: var(--glass-regular-border);
    --popover-shadow: var(--ambient-shadow), var(--inset-hairline);
    --focus-ring: 0 0 0 2px var(--accent-primary-border);
}

[data-theme="light"] {
    --popover-bg: rgba(255, 255, 255, 0.5);

    /* REGULAR GLASS — definitive light spec: zero background tint */
    --glass-regular-bg: rgba(15, 23, 42, 0);
    --glass-regular-blur: blur(5px) saturate(1.0);
    --glass-regular-border: rgba(15, 23, 42, 0.15);

    /* CLEAR GLASS */
    --glass-clear-bg: rgba(15, 23, 42, 0.01);
    --glass-clear-blur: blur(5px) saturate(1.0);
    --glass-clear-border: rgba(15, 23, 42, 0.12);

    /* OVERLAY BACKDROP — zero dimming/scrim in light mode */
    --glass-overlay-bg: rgba(0, 0, 0, 0);

    /* GLASS SHELL & CARD REFINEMENTS
       Definitive light spec: zero background tint; blur/saturate UNCHANGED (5px / 1.0). */
    --glass-shell-blur: blur(5px) saturate(1.0);
    --glass-shell-bg: rgba(15, 23, 42, 0);
    --glass-card-bg: rgba(15, 23, 42, 0);

    /* DIVIDERS & HIGHLIGHTS */
    --glass-divider: rgba(15, 23, 42, 0.10);
    /* Definitive light spec: shared shell border at 0.2 */
    --glass-card-border: rgba(15, 23, 42, 0.2);
    --inset-hairline: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    --ambient-shadow: 0 14px 20px rgba(15, 23, 42, 0.15);
    --glass-hover-highlight: rgba(15, 23, 42, 0.04);

    /* ZEN NOTIFICATION — light-mode toast tokens (additive blending disappears on white, so the spill is a softer plain tint) */
    --toast-blur: blur(1.5px);
    --toast-spill-1: 36%;
    --toast-spill-2: 20%;
    --toast-spill-3: 9%;
    --toast-spill-blend: normal;
    --toast-flat-glow: 16%;
    --toast-flat-edge: rgba(15, 23, 42, 0.26);
    --toast-flat-light: rgba(255, 255, 255, 0.85);
    --toast-flat-light-low: rgba(15, 23, 42, 0.16);
}

/* Ensure the canvas is visible behind the app */
html {
    background-color: #050505;
}
html[data-theme="light"] {
    background-color: #ffffff;
}
body {
    background-color: transparent !important;
}

/* BASE GLASS CLASSES */
.glass-regular {
    background: var(--glass-regular-bg) !important;
    backdrop-filter: var(--glass-regular-blur) !important;
    -webkit-backdrop-filter: var(--glass-regular-blur) !important;
    border: 1px solid var(--glass-regular-border) !important;
    animation: specularPulse 8s infinite alternate ease-in-out;
}

.glass-clear {
    background: var(--glass-clear-bg) !important;
    backdrop-filter: var(--glass-clear-blur) !important;
    -webkit-backdrop-filter: var(--glass-clear-blur) !important;
    border: 1px solid var(--glass-clear-border) !important;
    animation: specularPulse 8s infinite alternate ease-in-out;
}

/* SPECULAR HIGHLIGHT PULSE */
@keyframes specularPulse {
    0% { 
        border-color: rgba(255, 255, 255, 0.08); 
        box-shadow: inset 0 1px 1px rgba(255,255,255,0.02); 
    }
    50% { 
        border-color: rgba(255, 255, 255, 0.25); 
        box-shadow: inset 0 1px 3px rgba(255,255,255,0.15); 
    }
    100% { 
        border-color: rgba(255, 255, 255, 0.08); 
        box-shadow: inset 0 1px 1px rgba(255,255,255,0.02); 
    }
}

/* SMART HOVER UTILITY (.interactive) */
.interactive {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Smart :has() hover: Parent wrappers never react alongside a child */
.interactive:hover:not(:has(.interactive:hover)) {
    transform: translateY(-2px) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
    /* Explicitly NO background change per requirements */
}

/* ==========================================================================
   GLOBAL MODAL DECLUTTER (Stage 1 Addendum)
   Hides main app content when a true full-screen overlay is open,
   preventing multiple layers of glass/blur from stacking on top of the dot-wave.
   When a modal is open, the rest of the UI disappears so only the open modal
   and crisp ambient dot-matrix background canvas are visible.
   ========================================================================== */

body:has(
    .modal-overlay.show,
    .modal-overlay.active,
    #call-mode-overlay,
    #cmd-palette-overlay, 
    #dental-image-lightbox-modal, 
    .product-tour-overlay,
    .call-queue-modal-overlay
) > #app,
body:has(
    .modal-overlay.show,
    .modal-overlay.active,
    #call-mode-overlay,
    #cmd-palette-overlay, 
    #dental-image-lightbox-modal, 
    .product-tour-overlay,
    .call-queue-modal-overlay
) > .login-container,
body:has(
    .modal-overlay.show,
    .modal-overlay.active,
    #call-mode-overlay,
    #cmd-palette-overlay, 
    #dental-image-lightbox-modal, 
    .product-tour-overlay,
    .call-queue-modal-overlay
) > .portal-nav,
body:has(
    .modal-overlay.show,
    .modal-overlay.active,
    #call-mode-overlay,
    #cmd-palette-overlay, 
    #dental-image-lightbox-modal, 
    .product-tour-overlay,
    .call-queue-modal-overlay
) > .portal-content {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important;
}

#app, .login-container, .portal-nav, .portal-content {
    transition: opacity 0.3s ease-in;
}

/* Modal/Panel outer shell border-radius override */
.modal,
.modal-card,
.onboarding-modal-card,
.doctor-dossier-modal-window.modal-card,
.deepdive-modal-card,
.welcome-modal-card,
.confirm-modal-card,
#cmd-palette,
#pwa-prompt,
#help-panel,
#notif-panel {
    border-radius: 16px !important;
}

/* PHONE OVERHAUL — dark-mode accent. css/styles.css defines --accent only for the light theme, so in dark every `var(--accent)` (and --accent-primary,
   which points at it) is undefined. Phone widths get the dark purple the phone screens were designed with; desktop is left exactly as it is.
   PLACEHOLDER value (#8b7cf0, the same purple css/platform.css uses) until the final visual pass. */
@media (max-width: 768px) {
    :root:not([data-theme="light"]) { --accent: #8b7cf0; }
}