/**
 * Global glass surface pass — removes flat white/black patches in light and dark mode.
 * Load after theme-engine.css on every page.
 */
@import url('tokens.css');

html:not(.dark-theme) {
    --ui-grid-vignette-center: rgba(255, 255, 255, 0);
    --ui-grid-vignette-edge: rgba(255, 255, 255, 0.35);
    --color-bg-base: #ffffff;
    --color-surface-base: #f5f5f5;
    --color-surface-raised-base: #ffffff;
    --bg-main: #ffffff;
    --text-main: #050505;
    --brand-bg: #ffffff;
    --brand-secondary: #050505;
}

html.dark-theme {
    --ui-grid-vignette-center: rgba(7, 12, 22, 0.08);
    --ui-grid-vignette-edge: rgba(7, 12, 22, 0.72);
}

/* Shared panels & cards */
.kpi-card,
.item-card,
.search-result-row,
.search-dropdown,
.cart-line,
.menu-btn,
.welcome-box,
.econ-filter-panel {
    background: var(--glass-surface, var(--ui-surface-glass, var(--color-surface))) !important;
    border-color: var(--glass-border, var(--color-border)) !important;
    backdrop-filter: var(--glass-blur, blur(14px) saturate(140%));
    -webkit-backdrop-filter: var(--glass-blur, blur(14px) saturate(140%));
}

.item-card:hover,
.search-result-row:hover,
.kpi-card:hover {
    background: var(--glass-surface-raised, var(--color-surface-raised)) !important;
}

.form-input,
select.form-input,
textarea.form-input {
    background: var(--glass-input, var(--color-surface-raised)) !important;
}

.modal-box,
.admin-tool-panel,
.op-panel {
    background: var(--glass-surface, var(--color-surface)) !important;
    border-color: var(--glass-border, var(--color-border)) !important;
    backdrop-filter: var(--glass-blur, blur(16px) saturate(150%));
    -webkit-backdrop-filter: var(--glass-blur, blur(16px) saturate(150%));
}

.qre-copilot-tabs,
.qre-support-chat,
.qre-copilot-pane {
    background: transparent;
}

.qre-copilot-tab {
    background: var(--glass-input, var(--color-surface-raised)) !important;
    border-color: var(--glass-border, var(--color-border)) !important;
}

.qre-copilot-tab.active {
    background: color-mix(in srgb, var(--brand-primary, var(--color-primary)) 10%, var(--glass-surface, var(--color-surface))) !important;
}