/* Material theme overrides: rounded corners and glass blur */

/* Theme-scoped CSS variables for easy tuning */
.material-theme {
    --btn-radius: 10px;
    --card-radius: 14px;
    --blur-amount: 12px;
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.3);
    /* Header-specific tunables */
    --header-bg: var(--glass-bg);
    --header-text: rgba(0, 0, 0, 0.85);
    --header-border: var(--glass-border);
    --header-btn-active-bg: rgba(0, 0, 0, 0.06);
}

/* Prefer dark scheme: slightly darker glass and light text */
@media (prefers-color-scheme: dark) {
    .material-theme {
        --header-bg: rgba(20, 20, 20, 0.55);
        --header-text: rgba(255, 255, 255, 0.92);
        --header-border: rgba(255, 255, 255, 0.16);
        --header-btn-active-bg: rgba(255, 255, 255, 0.08);
    }
}

/* Header/title bar: apply glass blur to top bar */
.material-theme header.gray-background,
header.gray-background {
    background: var(--header-bg, rgba(255, 255, 255, 0.65)) !important;
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur-amount, 12px));
    backdrop-filter: saturate(180%) blur(var(--blur-amount, 12px));
    border-bottom: 1px solid var(--header-border, rgba(255, 255, 255, 0.3)) !important;
    color: var(--header-text, rgba(0, 0, 0, 0.85)) !important;
}

/* Ensure inner container does not override with opaque background */
.material-theme header.gray-background .header,
header.gray-background .header {
    background: transparent !important;
}

/* Make header links/buttons inherit adaptive color */
.material-theme header.gray-background .header-title,
header.gray-background .header-title,
.material-theme header.gray-background .header-btn,
header.gray-background .header-btn,
.material-theme header.gray-background a,
header.gray-background a {
    color: inherit !important;
}

/* Active/hover state with adaptive background on buttons */
.material-theme header.gray-background .header-btn.active,
header.gray-background .header-btn.active {
    background: var(--header-btn-active-bg, rgba(0, 0, 0, 0.06)) !important;
}

/* Dark scheme for non-themed pages (no .material-theme wrapper) */
@media (prefers-color-scheme: dark) {
    header.gray-background {
        background: rgba(20, 20, 20, 0.55) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
        color: rgba(255, 255, 255, 0.92) !important;
    }
}

/* Buttons (Element UI + generic .btn) */
.material-theme .el-button,
.material-theme .btn {
    border-radius: var(--btn-radius) !important;
}

/* Cards (Element UI) */
.material-theme .el-card,
.material-theme .card {
    border-radius: var(--card-radius) !important;
    overflow: hidden;
    /* ensure children respect rounded corners */
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    /* backdrop blur for glassmorphism */
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur-amount));
    backdrop-filter: saturate(180%) blur(var(--blur-amount));
}

/* Optional: dialogs/menus feel more cohesive with slight rounding */
.material-theme .el-dialog,
.material-theme .el-message-box,
.material-theme .el-dropdown-menu,
.material-theme .el-select-dropdown,
.material-theme .el-popover {
    border-radius: calc(var(--card-radius) - 2px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(calc(var(--blur-amount) - 4px));
    backdrop-filter: saturate(180%) blur(calc(var(--blur-amount) - 4px));
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
}

/* Keep form controls consistent */
.material-theme .el-input__inner,
.material-theme .el-textarea__inner,
.material-theme .el-select .el-input__inner {
    border-radius: 8px !important;
}

/* Reduce double shadows on glass surfaces */
.material-theme .el-card,
.material-theme .el-dialog,
.material-theme .el-message-box {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Utility: apply glass to any container when needed */
.material-theme .u-glass {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur-amount));
    backdrop-filter: saturate(180%) blur(var(--blur-amount));
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--card-radius) !important;
}

/* Basic fallback for browsers without backdrop-filter: ensure contrast */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {

    .material-theme .mu-appbar,
    .material-theme .el-header,
    .material-theme header.gray-background,
    header.gray-background,
    .material-theme .el-card,
    .material-theme .el-dialog,
    .material-theme .el-message-box,
    .material-theme .u-glass {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #222 !important;
    }
}

/* Muse-UI (Material theme) components */
/* Buttons */
.material-theme .mu-button,
.material-theme .mu-raised-button,
.material-theme .mu-flat-button {
    border-radius: var(--btn-radius) !important;
}
/* keep icon/fab buttons shape as-is (usually circular) */

/* Cards and paper surfaces */
.material-theme .mu-card,
.material-theme .mu-paper {
    border-radius: var(--card-radius) !important;
    overflow: hidden;
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur-amount));
    backdrop-filter: saturate(180%) blur(var(--blur-amount));
}

/* Dialogs and popovers */
.material-theme .mu-dialog,
.material-theme .mu-popover {
    border-radius: calc(var(--card-radius) - 2px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(calc(var(--blur-amount) - 4px));
    backdrop-filter: saturate(180%) blur(calc(var(--blur-amount) - 4px));
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
}

/* Reduce double shadows on glass surfaces for Muse-UI */
.material-theme .mu-card,
.material-theme .mu-dialog {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Fallback for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    .material-theme .mu-card,
    .material-theme .mu-dialog,
    .material-theme .mu-popover,
    .material-theme .mu-paper {
        background: rgba(255, 255, 255, 0.9) !important;
    }
}

/* Hide the "关闭背景特效" control/button */
.material-theme [title*="关闭背景"],
.material-theme [alt*="关闭背景"],
.material-theme [aria-label*="关闭背景"] {
    display: none !important;
}