/* Shared surface treatment for the public UI. Loaded after the legacy glass
   styles; !important is needed to override their existing surface declarations.
   Layout, content, status colors, and personalized artwork stay with their
   component styles. */
:root {
    --surface-page: #f6f7f9;
    --surface-card: #ffffff;
    --surface-muted: #f1f3f6;
    --surface-hover: #e9edf2;
    --surface-border: #e1e5eb;
    --surface-border-hover: #cbd2dd;
    --surface-text: #34394e;
    --surface-selected: #34394e;
    --surface-selected-text: #ffffff;
    --surface-selected-hover: #252a3b;
    --surface-focus: #7b8bac;
    --surface-focus-ring: rgba(105, 125, 165, .18);
    --surface-shadow: 0 2px 8px rgba(27, 36, 52, .04);
    --surface-shadow-hover: 0 4px 14px rgba(27, 36, 52, .07);
    --surface-shadow-panel: 0 12px 32px rgba(27, 36, 52, .12);
    --surface-sidebar: linear-gradient(175deg, #f7f2f6, #f1f5f9 70%);
}

html[data-background-theme="dark"] {
    --surface-page: #121722;
    --surface-card: #1b2230;
    --surface-muted: #232c3c;
    --surface-hover: #2c3749;
    --surface-border: #333e50;
    --surface-border-hover: #4b5870;
    --surface-text: #dce4f2;
    --surface-selected: #d8deed;
    --surface-selected-text: #172033;
    --surface-selected-hover: #edf1f9;
    --surface-focus: #a2b5da;
    --surface-focus-ring: rgba(162, 181, 218, .22);
    --surface-shadow: 0 2px 8px rgba(0, 0, 0, .10);
    --surface-shadow-hover: 0 4px 14px rgba(0, 0, 0, .16);
    --surface-shadow-panel: 0 12px 32px rgba(0, 0, 0, .28);
    --surface-sidebar: linear-gradient(175deg, #221f2c, #1a2330 70%);
}

/* A configured site wallpaper still takes precedence over the default canvas. */
html:root:not(.site-background-active) body {
    background: var(--surface-page) !important;
}

html:root body::before,
html:root body::after,
html:root .sidebar::before,
html:root .sidebar::after,
html:root .plugin-card::after,
html:root .search-box::before,
html:root .side-nav a::before,
html:root .plugin-card .glow,
html:root .card-glare,
html:root #pointerLight {
    display: none !important;
}

html:root .sidebar {
    background: var(--surface-sidebar) !important;
    border-color: var(--surface-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Opaque cards provide the same readable surface in both themes. */
html:root :is(.plugin-card, .stat-card, .member-card, .group-card, .lb-row,
    .lb-rules-card, .server-uptime, .user-card, .pf-main, .pf-bio-card,
    .pf-item, .pf-empty, .pf-gb-item, .navbar, .search-bar),
html:root #forumGrid .plugin-card,
html:root .sidebar .user-area {
    background: var(--surface-card) !important;
    border: 1px solid var(--surface-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: var(--surface-shadow) !important;
}

html:root :is(.plugin-card, .stat-card, .member-card, .group-card,
    .lb-row, .user-card, .pf-item):hover,
html:root #forumGrid .plugin-card:hover {
    background: var(--surface-card) !important;
    border-color: var(--surface-border-hover) !important;
    box-shadow: var(--surface-shadow-hover) !important;
}

/* Flatten the selected navigation surface without changing its indicator. */
html:root .side-nav-indicator,
html:root .side-nav:not(.glass-ind) a.active {
    background: var(--surface-selected) !important;
    border-color: var(--surface-selected) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

html:root .side-nav a.active {
    color: var(--surface-selected-text) !important;
}

html:root .side-nav a:not(.active):hover {
    background: var(--surface-hover) !important;
    box-shadow: none !important;
}

/* Controls use a thin outline instead of reflective rims and drop shadows. */
html:root :is(.search-box, .btn-feedback, .btn-login, .notification-btn,
    .locale-toggle, .language-trigger, .favorites-open, .forum-sort-btn,
    .btn-secondary, .btn-send-code),
html:root .sidebar .ua-pill,
html:root .sidebar #adminPortalBtn,
html:root .search-box button,
html:root .code-row button {
    background: var(--surface-card) !important;
    color: var(--surface-text) !important;
    border: 1px solid var(--surface-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

html:root :is(.btn-feedback, .btn-login, .notification-btn, .locale-toggle,
    .language-trigger, .favorites-open, .forum-sort-btn, .btn-secondary,
    .btn-send-code):hover,
html:root .sidebar .ua-pill:hover,
html:root .sidebar #adminPortalBtn:hover,
html:root .search-box button:hover,
html:root .code-row button:hover:not(:disabled) {
    background: var(--surface-muted) !important;
    color: var(--surface-text) !important;
    border-color: var(--surface-border-hover) !important;
    box-shadow: none !important;
}

html:root :is(.btn-primary, .btn-submit):not(.btn-danger):not(.btn-secondary):not(.account-delete-danger) {
    background: var(--surface-selected) !important;
    color: var(--surface-selected-text) !important;
    border: 1px solid var(--surface-selected) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

html:root :is(.btn-primary, .btn-submit):not(.btn-danger):not(.btn-secondary):not(.account-delete-danger):hover {
    background: var(--surface-selected-hover) !important;
    border-color: var(--surface-selected-hover) !important;
}

html:root :is(.filter-tabs, .plugin-view-toggle, .sort-bar, .lb-type-tabs,
    .lb-period-tabs, .upload-type-tabs, .tab-switch) button {
    background: var(--surface-muted) !important;
    color: var(--surface-text) !important;
    border-color: var(--surface-border) !important;
    box-shadow: none !important;
}

html:root :is(.filter-tabs, .plugin-view-toggle, .sort-bar, .lb-type-tabs,
    .lb-period-tabs, .upload-type-tabs, .tab-switch) button:hover {
    background: var(--surface-hover) !important;
    box-shadow: none !important;
}

html:root :is(.filter-tabs, .plugin-view-toggle, .sort-bar, .lb-type-tabs,
    .lb-period-tabs, .upload-type-tabs, .tab-switch) button.active {
    background: var(--surface-card) !important;
    color: var(--surface-text) !important;
    border-color: var(--surface-border-hover) !important;
    box-shadow: none !important;
}

/* Dialogs and menus stay opaque; the overlay provides separation. */
html:root :is(.modal, .upd-modal, .forum-sort-panel, .notification-panel,
    .language-menu, .lb-tooltip, .lb-rules-panel, .ai-chat-panel,
    .ban-notice-modal, .success-box, .login-container, .unlock-toast,
    .pf-prompt-box, .pf-email-box),
html:root .library-modal .library-dialog {
    background: var(--surface-card) !important;
    border: 1px solid var(--surface-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: var(--surface-shadow-panel) !important;
}

html:root .modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html:root .modal :is(input, textarea),
html:root .form-group input,
html:root .search-bar input,
html:root :is(.comment-text-input, .ai-chat-input, .avatar-upload-area,
    .fb-img-add, .file-input-label, .tab-switch),
html:root .forum-image-picker label {
    background: var(--surface-muted) !important;
    border-color: var(--surface-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

html:root .search-box:focus-within,
html:root .modal :is(input, textarea):focus,
html:root .form-group input:focus,
html:root .search-bar input:focus,
html:root .comment-text-input:focus,
html:root .ai-chat-input:focus {
    background: var(--surface-card) !important;
    border-color: var(--surface-focus) !important;
    box-shadow: 0 0 0 3px var(--surface-focus-ring) !important;
}

html:root .plugin-card .plugin-icon,
html:root .logo-icon,
html:root .nav-logo-icon {
    border-color: var(--surface-border) !important;
    box-shadow: var(--surface-shadow) !important;
}

html:root :is(.logo-icon, .nav-logo-icon, .lb-bar-track) {
    background: var(--surface-muted) !important;
}

html:root .plugin-card :is(.version, .status-badge, .updated-badge) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html:root .main .page-header h1 {
    text-shadow: none;
}

html:root ::-webkit-scrollbar-thumb {
    background-color: var(--surface-border-hover);
}

html:root ::-webkit-scrollbar-thumb:hover {
    background-color: var(--surface-focus);
}