/* 
==========================================================================
   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);
}

[data-theme="light"] {
    /* 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);
}

/* 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;
}