/* ============================================================
   LIQUID GLASS THEME — Apple / visionOS-style layer
   Loaded last; overrides tokens + chrome from styles.css,
   layout.css, modules.css and button-uniform.css. No markup
   changes required. Honors html.dark / body.dark (both are
   toggled by js/layout.js).
   ============================================================ */

/* ----------------------------------------------------------
   1. Design tokens (light)
   ---------------------------------------------------------- */
:root {
    /* iOS-style accent palette */
    --primary: #0a84ff;
    --primary-light: #409cff;
    --primary-dark: #0066d6;
    --secondary: #64d2ff;
    --accent: #ff9f0a;

    /* Neutral surfaces */
    --bg: #eef1f7;
    --bg-light: #f5f7fb;
    --card: #ffffff;

    /* Text */
    --text: #0b1526;
    --text-light: #45566e;
    --text-lighter: #7a8aa0;

    /* Hairline borders */
    --border: rgba(120, 140, 170, 0.22);
    --border-light: rgba(120, 140, 170, 0.16);

    /* Glass tokens */
    --glass-blur: saturate(180%) blur(22px);
    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-bg-strong: rgba(255, 255, 255, 0.78);
    --glass-menu-bg: rgba(255, 255, 255, 0.9);
    --glass-menu-blur: saturate(180%) blur(24px);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.55);

    /* Radii */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* Soft layered shadows */
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.05), 0 10px 28px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.06), 0 20px 48px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 8px 20px rgba(15, 23, 42, 0.08), 0 32px 72px rgba(15, 23, 42, 0.16);

    /* Sidebar: deep frosted navy glass in both modes so the
       white menu text (hardcoded !important in layout.css) stays legible */
    --menu-main-bg: linear-gradient(180deg, rgba(14, 22, 44, 0.94) 0%, rgba(17, 26, 52, 0.90) 100%);
    --menu-sub-bg: linear-gradient(180deg, rgba(11, 18, 38, 0.94) 0%, rgba(14, 22, 44, 0.92) 100%);
    --menu-column-text: #f2f6ff;
    --menu-column-muted: rgba(242, 246, 255, 0.65);
    --menu-column-hover: rgba(255, 255, 255, 0.09);
    --menu-column-active: rgba(255, 255, 255, 0.16);
    --menu-column-accent: rgba(255, 255, 255, 0.18);
    --menu-column-border: rgba(255, 255, 255, 0.08);
    --surface-1: rgba(255, 255, 255, 0.72);
    --surface-2: rgba(255, 255, 255, 0.55);
    --surface-3: rgba(91, 75, 245,  0.10);
    --hover-bg: rgba(91, 75, 245,  0.10);
}

/* ----------------------------------------------------------
   2. Design tokens (dark) — html.dark AND body.dark are both
      toggled by layout.js, so mirror both selector chains.
   ---------------------------------------------------------- */
html.dark,
body.dark {
    --primary: #0a84ff;
    --primary-light: #5eb0ff;
    --primary-dark: #0066d6;
    --secondary: #64d2ff;
    --bg: #070b14;
    --bg-light: #0b1220;
    --card: #101827;
    --text: #f2f6ff;
    --text-light: #a7b6cc;
    --text-lighter: #6f7f96;
    --border: rgba(148, 168, 200, 0.18);
    --border-light: rgba(148, 168, 200, 0.12);
    --glass-bg: rgba(16, 24, 40, 0.58);
    --glass-bg-strong: rgba(16, 24, 40, 0.78);
    --glass-menu-bg: rgba(21, 30, 48, 0.9);
    --glass-border: rgba(255, 255, 255, 0.09);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 16px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.32), 0 10px 28px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.34), 0 20px 48px rgba(0, 0, 0, 0.42);
    --shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.40), 0 32px 72px rgba(0, 0, 0, 0.50);
    --menu-main-bg: linear-gradient(180deg, rgba(10, 16, 34, 0.92) 0%, rgba(13, 20, 40, 0.88) 100%);
    --menu-sub-bg: linear-gradient(180deg, rgba(7, 12, 26, 0.94) 0%, rgba(10, 16, 34, 0.90) 100%);
    --menu-column-hover: rgba(255, 255, 255, 0.07);
    --menu-column-active: rgba(255, 255, 255, 0.13);
    --menu-column-accent: rgba(255, 255, 255, 0.14);
    --surface-1: rgba(21, 30, 48, 0.72);
    --surface-2: rgba(21, 30, 48, 0.55);
    --surface-3: rgba(94, 176, 255, 0.14);
    --hover-bg: rgba(94, 176, 255, 0.16);
}

/* ----------------------------------------------------------
   3. Base polish — crisp text, aurora backdrop, selection
   ---------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    background:
        radial-gradient(52rem 36rem at 12% -8%, rgba(91, 75, 245,  0.14), transparent 62%),
        radial-gradient(44rem 32rem at 92% 4%, rgba(139, 92, 246, 0.12), transparent 60%),
        radial-gradient(40rem 30rem at 58% 108%, rgba(100, 210, 255, 0.12), transparent 62%),
        linear-gradient(180deg, #f2f5fa 0%, #e9edf5 100%);
}

html.dark body,
body.dark {
    background:
        radial-gradient(52rem 36rem at 12% -8%, rgba(91, 75, 245,  0.20), transparent 62%),
        radial-gradient(44rem 32rem at 92% 4%, rgba(139, 92, 246, 0.16), transparent 60%),
        radial-gradient(40rem 30rem at 58% 108%, rgba(52, 211, 153, 0.10), transparent 62%),
        linear-gradient(180deg, #060a13 0%, #0a101d 100%);
}

.main-content {
    background: transparent;
}

::selection {
    background: rgba(91, 75, 245,  0.28);
}

/* ----------------------------------------------------------
   4. Navigation chrome — frosted glass over the aurora
   ---------------------------------------------------------- */
#navShell .sidebar.main-sidebar,
#navShell .sub-sidebar {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

#navShell .sub-sidebar {
    border-right: 1px solid var(--menu-column-border) !important;
    box-shadow: 12px 0 32px rgba(4, 8, 20, 0.18);
}

#navShell .main-menu .nav-item {
    border-radius: var(--radius-md);
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#navShell .main-menu .nav-item:hover,
#navShell .sub-menu .nav-item:hover {
    background: var(--menu-column-hover);
    box-shadow: var(--glass-highlight);
}

#navShell .main-menu .nav-item.active,
#navShell .sub-menu .nav-item.active {
    background: var(--menu-column-accent);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: var(--glass-highlight), 0 6px 16px rgba(4, 8, 20, 0.22);
}

/* ----------------------------------------------------------
   5. Top bar — floating frosted capsule
   ---------------------------------------------------------- */
.top-bar {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-highlight), var(--shadow-md);
}

body.dark .top-bar,
html.dark body .top-bar {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-md);
}

/* Top-bar controls: circular glass chips */
.notification-btn,
.menu-toggle,
.top-actions .icon-btn,
.icon-btn,
.user-dropdown-btn {
    border-radius: 999px !important;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.notification-btn:hover,
.menu-toggle:hover,
.top-actions .icon-btn:hover,
.icon-btn:hover,
.user-dropdown-btn:hover {
    border-color: rgba(91, 75, 245,  0.35);
    box-shadow: var(--glass-highlight), 0 6px 20px rgba(91, 75, 245,  0.16);
}

body.dark .notification-btn,
body.dark .menu-toggle,
body.dark .top-actions .icon-btn,
body.dark .user-dropdown-btn,
body.dark .search-box input,
html.dark body .notification-btn,
html.dark body .menu-toggle,
html.dark body .top-actions .icon-btn,
html.dark body .user-dropdown-btn,
html.dark body .search-box input {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border);
}

/* Floating menus must stay readable over busy content — heavily frosted */
.notification-panel,
.user-dropdown-menu,
.dropdown-menu,
.search-results-dropdown {
    background: var(--glass-menu-bg);
    backdrop-filter: var(--glass-menu-blur);
    -webkit-backdrop-filter: var(--glass-menu-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-highlight), var(--shadow-lg);
}

body.dark .search-results-dropdown,
html.dark body .search-results-dropdown {
    background: var(--glass-menu-bg);
    border-color: var(--glass-border);
}

/* layout.css dark failsafe forces translucent surfaces with !important —
   win it back so menus stay frosted in dark mode */
body.dark .notification-panel,
html.dark body .notification-panel,
body.dark .user-dropdown-menu,
html.dark body .user-dropdown-menu,
body.dark .dropdown-menu,
html.dark body .dropdown-menu,
body.dark .search-results-dropdown,
html.dark body .search-results-dropdown {
    background: var(--glass-menu-bg) !important;
    backdrop-filter: var(--glass-menu-blur) !important;
    -webkit-backdrop-filter: var(--glass-menu-blur) !important;
    border: 1px solid var(--glass-border) !important;
}

/* Same frosting for every other floating surface: kebab overflow menus,
   mobile "More" sheet, FAB speed dial, meeting/messaging menus, modals,
   and module-level sheets & drawers (dark failsafe paints those 55% opaque) */
.action-menu,
.meeting-action-menu,
.messaging-actions-menu,
.mobile-nav-sheet,
.mobile-speed-dial-sheet {
    background: var(--glass-menu-bg) !important;
    backdrop-filter: var(--glass-menu-blur) !important;
    -webkit-backdrop-filter: var(--glass-menu-blur) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-highlight), var(--shadow-lg) !important;
}

body.dark .action-menu,
html.dark body .action-menu,
body.dark .meeting-action-menu,
html.dark body .meeting-action-menu,
body.dark .messaging-actions-menu,
html.dark body .messaging-actions-menu,
body.dark .mobile-nav-sheet,
html.dark body .mobile-nav-sheet,
body.dark .mobile-speed-dial-sheet,
html.dark body .mobile-speed-dial-sheet,
body.dark .modal,
html.dark body .modal,
body.dark .modal-content,
html.dark body .modal-content,
body.dark .module-section [class*="sheet"],
html.dark body .module-section [class*="sheet"],
body.dark .module-section [class*="drawer"],
html.dark body .module-section [class*="drawer"] {
    background: var(--glass-menu-bg) !important;
    backdrop-filter: var(--glass-menu-blur) !important;
    -webkit-backdrop-filter: var(--glass-menu-blur) !important;
}

/* ----------------------------------------------------------
   6. Cards & surfaces — translucent panels with hairline rims
   ---------------------------------------------------------- */
.card,
.stat-card,
.committee-card,
.training-card,
.document-card,
.advanced-filters,
.calendar-container {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-highlight), var(--shadow);
}

.card:hover,
.stat-card:hover {
    box-shadow: var(--glass-highlight), var(--shadow-md);
}

.card-header {
    border-bottom: 1px solid var(--border-light);
}

/* Module surfaces in dark mode: the dark failsafe (modules.css) paints
   every card/panel class translucent but adds NO blur, so content shows
   through undiffused. Re-frost them to match the tab bar. */
body.dark .module-section [class*="card"],
html.dark body .module-section [class*="card"],
body.dark .module-section [class*="panel"],
html.dark body .module-section [class*="panel"],
body.dark .module-section [class*="content-box"],
html.dark body .module-section [class*="content-box"],
body.dark .module-section [class*="detail-box"],
html.dark body .module-section [class*="detail-box"],
body.dark .module-section [class*="table-wrap"],
html.dark body .module-section [class*="table-wrap"] {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
}

body.dark .card,
html.dark body .card,
body.dark .stat-card,
html.dark body .stat-card,
body.dark .committee-card,
html.dark body .committee-card,
body.dark .training-card,
html.dark body .training-card,
body.dark .document-card,
html.dark body .document-card,
body.dark .calendar-container,
html.dark body .calendar-container {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

/* Stat card tint variants keep their colored wash over glass */
.stat-card.primary,
.stat-card.success,
.stat-card.warning,
.stat-card.info,
.stat-card.danger,
.stat-card.purple {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* Modals & drawers */
.modal-content,
.notification-panel,
.user-dropdown-menu {
    border-radius: var(--radius-lg);
}

/* ----------------------------------------------------------
   7. Buttons — liquid pills
   ---------------------------------------------------------- */
.btn {
    border-radius: 999px;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary,
.btn-standard-primary,
body.dark .btn-primary,
html.dark body .btn-primary {
    background: linear-gradient(180deg, #3b9dff 0%, var(--primary) 55%, var(--primary-dark) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: var(--glass-highlight), 0 6px 18px rgba(91, 75, 245,  0.32);
}

.btn-primary:hover,
.btn-standard-primary:hover {
    background: linear-gradient(180deg, #5cadff 0%, #2f96ff 55%, var(--primary) 100%);
    box-shadow: var(--glass-highlight), 0 8px 24px rgba(91, 75, 245,  0.42);
    transform: translateY(-1px);
}

.btn-secondary,
.btn-standard-secondary {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-highlight), var(--shadow);
}

.btn-secondary:hover,
.btn-standard-secondary:hover {
    background: var(--glass-bg);
    border-color: rgba(91, 75, 245,  0.35);
    color: var(--primary);
}

.btn-success,
.btn-danger,
.btn-purple {
    border-radius: 999px;
    box-shadow: var(--glass-highlight), var(--shadow-md);
}

/* Data-attribute buttons (button-uniform.css uses !important) */
[data-ui-button="true"],
[data-ui-button="true"]:visited {
    border-radius: 999px !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-highlight), var(--shadow) !important;
}

[data-ui-button="true"][data-ui-button-variant="primary"] {
    background: linear-gradient(180deg, #3b9dff 0%, var(--primary) 55%, var(--primary-dark) 100%) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: var(--glass-highlight), 0 6px 18px rgba(91, 75, 245,  0.32) !important;
}

[data-ui-button="true"][data-ui-button-variant="primary"]:hover {
    background: linear-gradient(180deg, #5cadff 0%, #2f96ff 55%, var(--primary) 100%) !important;
}

[data-ui-button="true"][data-ui-button-variant="secondary"] {
    background: var(--glass-bg-strong) !important;
    border-color: var(--glass-border) !important;
}

[data-ui-button="true"][data-ui-button-variant="secondary"]:hover,
[data-ui-button="true"].active[data-ui-button-variant="secondary"],
[data-ui-button="true"][aria-pressed="true"][data-ui-button-variant="secondary"] {
    background: var(--surface-3) !important;
    border-color: rgba(91, 75, 245,  0.40) !important;
}

[data-ui-button="true"][data-ui-button-variant="danger"] {
    background: rgba(220, 43, 79, 0.10) !important;
    border-color: rgba(220, 43, 79, 0.30) !important;
    color: var(--ds-danger-text) !important;
}

[data-ui-button="true"][data-ui-button-variant="danger"]:hover {
    background: rgba(220, 43, 79, 0.18) !important;
    border-color: rgba(220, 43, 79, 0.45) !important;
    color: var(--ds-danger-text) !important;
}

body.dark [data-ui-button="true"][data-ui-button-variant="secondary"],
html.dark body [data-ui-button="true"][data-ui-button-variant="secondary"] {
    background: var(--glass-bg-strong) !important;
    border-color: var(--glass-border) !important;
    color: var(--text) !important;
}

/* ----------------------------------------------------------
   8. Forms — soft translucent controls with hairline rims
   ---------------------------------------------------------- */
.form-group input,
.form-group select,
.form-group textarea,
.form-input,
.form-select,
.form-textarea,
.form-control,
.search-box input {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-highlight);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.form-control:focus,
.search-box input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(91, 75, 245,  0.22), var(--glass-highlight);
}

body.dark .form-group input,
body.dark .form-group select,
body.dark .form-group textarea,
html.dark body .form-group input,
html.dark body .form-group select,
html.dark body .form-group textarea {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border);
    color: var(--text);
}

.form-group input.is-invalid,
.form-group input.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.18);
}

/* styles.css paints ALL form labels dark in dark mode
   (rule shared with the login screen) — restore legibility */
body.dark .form-group label,
html.dark body .form-group label {
    color: var(--text-light);
}

/* Stat card icons: lift the glyph colors in dark mode */
body.dark .stat-icon.blue,
html.dark body .stat-icon.blue { color: #5eb0ff; }
body.dark .stat-icon.green,
html.dark body .stat-icon.green { color: #34d399; }
body.dark .stat-icon.orange,
html.dark body .stat-icon.orange { color: #ffb340; }
body.dark .stat-icon.red,
html.dark body .stat-icon.red { color: var(--ds-danger-text); }
body.dark .stat-icon.purple,
html.dark body .stat-icon.purple { color: #c084fc; }

/* ----------------------------------------------------------
   9. Tables, badges, tabs — hairlines + full pills
   ---------------------------------------------------------- */
table thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text-lighter);
    border-bottom: 1px solid var(--border) !important;
}

table tbody td {
    border-bottom: 1px solid var(--border-light) !important;
}

table tbody tr {
    transition: background-color 0.15s ease;
}

table tbody tr:hover {
    background: var(--hover-bg);
}

.badge,
.badge-primary,
.badge-secondary,
.badge-success,
.badge-danger,
.badge-warning,
.badge-info,
.badge-count {
    border-radius: 999px;
    border: 1px solid transparent;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.meeting-tab,
.tab-btn {
    border-radius: 999px;
}

/* ----------------------------------------------------------
   10. Login & auth screens — aurora backdrop, glass card
   ---------------------------------------------------------- */
.login-screen,
.auth-loading {
    background:
        radial-gradient(48rem 34rem at 18% 12%, rgba(91, 75, 245,  0.42), transparent 60%),
        radial-gradient(40rem 30rem at 85% 20%, rgba(139, 92, 246, 0.34), transparent 58%),
        radial-gradient(36rem 30rem at 50% 100%, rgba(100, 210, 255, 0.28), transparent 60%),
        linear-gradient(180deg, #0a1224 0%, #101a30 100%);
}

.login-container,
.auth-loading-content {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-highlight), 0 32px 80px rgba(2, 6, 23, 0.45);
}

.login-container h1,
.auth-loading-content h2,
.login-container p,
.auth-loading-content p,
.login-container .form-group label {
    color: #f2f6ff;
}

.login-container .form-group input {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: #f2f6ff;
}

.login-container .form-group input::placeholder {
    color: rgba(242, 246, 255, 0.5);
}

.login-container .form-group input:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(91, 75, 245,  0.30);
}

body.dark .login-container p,
body.dark .auth-loading-content p,
html.dark body .login-container p,
html.dark body .auth-loading-content p {
    color: rgba(242, 246, 255, 0.65);
}

/* ----------------------------------------------------------
   11. Scrollbars — thin, rounded, unobtrusive
   ---------------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(110, 125, 150, 0.35);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(110, 125, 150, 0.55);
    border: 2px solid transparent;
    background-clip: padding-box;
}

html.dark ::-webkit-scrollbar-thumb,
body.dark ::-webkit-scrollbar-thumb {
    background: rgba(148, 168, 200, 0.28);
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* ----------------------------------------------------------
   12. Reduced transparency — fall back to solid surfaces
   ---------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
    .card,
    .stat-card,
    .committee-card,
    .training-card,
    .document-card,
    .calendar-container,
    .top-bar,
    .notification-btn,
    .menu-toggle,
    .top-actions .icon-btn,
    .icon-btn,
    .user-dropdown-btn,
    .form-group input,
    .form-group select,
    .form-group textarea,
    .form-input,
    .form-select,
    .form-textarea,
    .form-control,
    .search-box input,
    .btn-secondary,
    .btn-standard-secondary,
    .notification-panel,
    .user-dropdown-menu,
    .dropdown-menu,
    .search-results-dropdown,
    .action-menu,
    .meeting-action-menu,
    .messaging-actions-menu,
    .mobile-nav-sheet,
    .mobile-speed-dial-sheet {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--card);
    }

    body.dark .card,
    html.dark body .card,
    body.dark .top-bar,
    html.dark body .top-bar {
        background: var(--card);
    }

    #navShell .sidebar.main-sidebar,
    #navShell .sub-sidebar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}