/* =============================================================
   NetLock RMM Web Console — "New" Design Stylesheet
   Ported from NetLock-RMM-Member-Portal (MainLayout + auth-pages.css).
   Scoped under body.theme-new ... so the file can be safely unloaded
   when the install is set to Classic (no leakage into Classic styles).
   ============================================================= */

/* Inter Font — Local Version (GDPR compliant) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter/Inter-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter/Inter-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/inter/Inter-ExtraBold.woff2') format('woff2');
}

/* ===== NETLOCK NEW DESIGN — DARK GLASS ===== */

/* Apply Inter font globally (matches launchpad + auth pages) */
body.theme-new * {
    font-family: 'Inter', sans-serif !important;
}

/* App-wide dark gradient backdrop. Decorative .bg-blur and .bg-ring
   elements sit above this. `color-scheme: dark` tells the browser to render
   native UI (scrollbars, form controls, native row-selection highlights that
   MudBlazor inherits) in dark mode regardless of the OS preference — fixes
   the light-mode bleed-through on row clicks/selection in MudTable/DataGrid. */
body.theme-new {
    background: linear-gradient(135deg, hsl(222 47% 6%) 0%, hsl(222 47% 12%) 100%) fixed !important;
    margin: 0;
    color-scheme: dark !important;
}

body.theme-new .mud-layout,
body.theme-new .mud-main-content {
    background: transparent !important;
}

/* Glass AppBar — paint only, no layout changes.
   We deliberately do NOT set `position: relative` here. Member Portal sets it
   but the rule loses specificity to MudBlazor's default `.mud-appbar.mud-appbar-fixed-top`,
   so it's a no-op there. With our `body.theme-new` prefix our specificity wins —
   which would flip the AppBar to relative while MudBlazor's MainContent still
   reserves padding-top for the fixed bar, pushing content down by the AppBar
   height. Leave positioning to MudBlazor's default. */
body.theme-new .mud-appbar {
    background-color: hsl(222 47% 8% / 0.7) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid hsl(0 0% 100% / 0.08);
}

/* Glass Drawer */
body.theme-new .mud-drawer {
    background-color: hsl(222 47% 8% / 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid hsl(0 0% 100% / 0.08) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important;
}

/* Glass Cards — only .mud-card gets the translucent glass treatment.
   .mud-paper stays opaque so dialogs / menus / popovers / tooltips
   (which all render via .mud-paper internally) read clearly. */
body.theme-new .mud-card {
    background-color: hsl(222 47% 8% / 0.6) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid hsl(0 0% 100% / 0.08) !important;
    box-shadow: 0 25px 50px -12px hsl(222 47% 4% / 0.5) !important;
}

/* Belt-and-suspenders: explicitly force dialogs and overlay surfaces opaque
   in case any inherited rule (or future palette tweak) makes them translucent. */
body.theme-new .mud-dialog,
body.theme-new .mud-dialog-container .mud-paper,
body.theme-new .mud-popover,
body.theme-new .mud-menu-popover,
body.theme-new .mud-tooltip,
body.theme-new .mud-snackbar,
body.theme-new .mud-list .mud-list-item,
body.theme-new .mud-select-popover,
body.theme-new .mud-autocomplete-popover {
    background-color: hsl(222 47% 10%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.theme-new .mud-dialog,
body.theme-new .mud-dialog-container .mud-paper {
    border: 1px solid hsl(0 0% 100% / 0.10) !important;
    box-shadow: 0 25px 50px -12px hsl(222 47% 4% / 0.7) !important;
}

/* Modern Button styling */
body.theme-new .mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(135deg, hsl(187 85% 53%) 0%, hsl(199 89% 48%) 100%) !important;
    box-shadow: 0 4px 15px hsl(187 85% 53% / 0.3) !important;
    font-weight: 600 !important;
}

body.theme-new .mud-button-filled.mud-button-filled-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px hsl(187 85% 53% / 0.4) !important;
}

/* Disabled primary buttons - keep cyan color with white text */
body.theme-new .mud-button-filled.mud-button-filled-primary:disabled,
body.theme-new .mud-button-filled.mud-button-filled-primary.mud-disabled {
    background: linear-gradient(135deg, hsl(187 85% 53%) 0%, hsl(199 89% 48%) 100%) !important;
    color: white !important;
    box-shadow: none !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Modern Icon Button hover effect */
body.theme-new .mud-icon-button:hover {
    background-color: hsl(187 85% 53% / 0.1) !important;
    transform: scale(1.1);
}

body.theme-new .mud-theme-dark .mud-icon-button:hover {
    background-color: hsl(187 85% 53% / 0.15) !important;
}

/* Modern Drawer styling */
body.theme-new .mud-drawer {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08) !important;
}

body.theme-new .mud-theme-dark .mud-drawer {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important;
}

/* Modern Navigation Link styling — Web Console drawer can collapse, so we
   intentionally drop Member Portal's `transform: translateX(5px)` rule that
   would clip nav items in the Mini drawer variant. */
body.theme-new .mud-nav-link:hover {
    background-color: hsl(187 85% 53% / 0.08) !important;
}

body.theme-new .mud-theme-dark .mud-nav-link:hover {
    background-color: hsl(187 85% 53% / 0.15) !important;
}

body.theme-new .mud-nav-link.active {
    background: linear-gradient(135deg, hsl(187 85% 53% / 0.15) 0%, hsl(187 85% 53% / 0.08) 100%) !important;
    border-left: 3px solid hsl(187 85% 53%) !important;
    font-weight: 600 !important;
}

body.theme-new .mud-theme-dark .mud-nav-link.active {
    background: linear-gradient(135deg, hsl(187 85% 53% / 0.2) 0%, hsl(187 85% 53% / 0.1) 100%) !important;
    border-left: 3px solid hsl(187 85% 53%) !important;
}

/* Modern TextField styling */
body.theme-new .mud-input-underline:before {
    border-bottom-color: hsl(187 85% 53% / 0.2) !important;
}

body.theme-new .mud-input-underline:hover:before {
    border-bottom-color: hsl(187 85% 53% / 0.5) !important;
}

body.theme-new .mud-input-underline:after {
    border-bottom-color: hsl(187 85% 53%) !important;
}

/* Modern Paper styling */
body.theme-new .mud-paper {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

body.theme-new .mud-theme-dark .mud-paper {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Modern Table / DataGrid styling — New is always dark, so we hard-code dark
   row hover/active/selected colors here regardless of whether `.mud-theme-dark`
   propagates to inner elements. (MudThemeProvider's IsDarkMode flag is forced
   true in MainLayout when New is active, but the system `prefers-color-scheme`
   may still be light, leaving some MudTable/DataGrid inner highlights at the
   light-mode default. These rules paint over that.) */
body.theme-new .mud-table,
body.theme-new .mud-data-grid {
    overflow: hidden;
}

body.theme-new .mud-table-head,
body.theme-new .mud-data-grid .mud-table-head {
    background: hsl(187 85% 53% / 0.1) !important;
    font-weight: 600 !important;
}

/* Row hover — clickable + non-clickable, MudTable + MudDataGrid */
body.theme-new .mud-table-row:hover,
body.theme-new tr.mud-table-row:hover,
body.theme-new .mud-table-row.mud-clickable-row:hover,
body.theme-new .mud-data-grid .mud-table-row:hover,
body.theme-new .mud-data-grid tr.mud-table-row:hover {
    background-color: hsl(187 85% 53% / 0.08) !important;
}

/* Row clicked / active (mouse-down state) — slightly stronger tint */
body.theme-new .mud-table-row:active,
body.theme-new .mud-data-grid .mud-table-row:active,
body.theme-new .mud-table-row.mud-clickable-row:active {
    background-color: hsl(187 85% 53% / 0.14) !important;
}

/* Row selected — MudTable / MudDataGrid use `.mud-selected-item` and similar
   variants. Cover the common ones so the highlight is dark-cyan instead of
   the light-mode default that bleeds through forced-dark mode. */
body.theme-new .mud-table-row.mud-selected-item,
body.theme-new tr.mud-selected-item,
body.theme-new .mud-table-row.mud-table-row-selected,
body.theme-new .mud-data-grid .mud-selected-item,
body.theme-new .mud-data-grid tr.mud-selected-item,
body.theme-new .mud-data-grid .mud-table-row.mud-table-row-selected {
    background-color: hsl(187 85% 53% / 0.18) !important;
    color: hsl(210 40% 98%) !important;
}

body.theme-new .mud-table-row.mud-selected-item:hover,
body.theme-new tr.mud-selected-item:hover,
body.theme-new .mud-data-grid .mud-selected-item:hover {
    background-color: hsl(187 85% 53% / 0.24) !important;
}

/* Row cells — keep text readable on the cyan-tinted backgrounds */
body.theme-new .mud-table-cell,
body.theme-new .mud-data-grid .mud-table-cell {
    color: hsl(210 40% 98%) !important;
}

body.theme-new .mud-table-row.mud-selected-item .mud-table-cell,
body.theme-new tr.mud-selected-item .mud-table-cell,
body.theme-new .mud-data-grid .mud-selected-item .mud-table-cell {
    color: hsl(210 40% 98%) !important;
}

/* Modern Dialog styling */
body.theme-new .mud-dialog {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12) !important;
}

body.theme-new .mud-theme-dark .mud-dialog {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Modern Snackbar styling */
body.theme-new .mud-snackbar {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    font-weight: 500 !important;
}

/* Modern Chip styling */
body.theme-new .mud-chip {
    font-weight: 500 !important;
}

/* Modern Progress styling */
body.theme-new .mud-progress-circular.mud-primary-text > svg > circle {
    stroke: hsl(187 85% 53%) !important;
}

body.theme-new .mud-theme-dark .mud-progress-circular.mud-primary-text > svg > circle {
    stroke: hsl(187 85% 53%) !important;
}

/* Modern Scrollbar styling */
body.theme-new ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.theme-new ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

body.theme-new ::-webkit-scrollbar-thumb {
    background: hsl(187 85% 53% / 0.3);
}

body.theme-new ::-webkit-scrollbar-thumb:hover {
    background: hsl(187 85% 53% / 0.5);
}

body.theme-new .mud-theme-dark ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body.theme-new .mud-theme-dark ::-webkit-scrollbar-thumb {
    background: hsl(187 85% 53% / 0.4);
}

body.theme-new .mud-theme-dark ::-webkit-scrollbar-thumb:hover {
    background: hsl(187 85% 53% / 0.6);
}

/* Modern Badge styling */
body.theme-new .mud-badge-primary {
    background-color: hsl(187 85% 53%) !important;
}

body.theme-new .mud-theme-dark .mud-badge-primary {
    background-color: hsl(187 85% 53%) !important;
}

/* Modern Divider styling */
body.theme-new .mud-divider {
    border-color: hsl(187 85% 53% / 0.12) !important;
}

body.theme-new .mud-theme-dark .mud-divider {
    border-color: hsl(187 85% 53% / 0.2) !important;
}

/* Modern Switch styling */
body.theme-new .mud-switch .mud-switch-thumb {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Modern Checkbox styling */
body.theme-new .mud-checkbox.mud-checked .mud-button-root {
    color: hsl(187 85% 53%) !important;
}

body.theme-new .mud-theme-dark .mud-checkbox.mud-checked .mud-button-root {
    color: hsl(187 85% 53%) !important;
}

/* -------------------------------------------------------------
   Decorative ambient backdrop — pulsing blurs + concentric rings
   (lifted from Member Portal auth-pages.css 84–133, re-scoped)
   ------------------------------------------------------------- */
body.theme-new .bg-blur {
    /* fixed so the same divs work both inside the auth-page wrappers
       (which are position:fixed themselves) and inside MudLayout's flow */
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    will-change: opacity, transform;
}

body.theme-new .bg-blur-primary {
    top: 25%;
    left: -25%;
    width: 24rem;
    height: 24rem;
    background: hsl(0 0% 100% / 0.10);
    animation: pulseGlow 8s ease-in-out infinite;
}

body.theme-new .bg-blur-accent {
    bottom: 25%;
    right: -25%;
    width: 24rem;
    height: 24rem;
    background: hsl(187 85% 53% / 0.18);
    animation: pulseGlow 10s ease-in-out infinite reverse;
}

body.theme-new .bg-ring {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

body.theme-new .bg-ring-outer {
    width: 800px;
    height: 800px;
    border: 1px solid hsl(0 0% 100% / 0.05);
}

body.theme-new .bg-ring-inner {
    width: 600px;
    height: 600px;
    border: 1px solid hsl(0 0% 100% / 0.10);
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.30; transform: scale(1); }
    50%      { opacity: 0.60; transform: scale(1.10); }
}

/* =============================================================
   /login — Member-Portal "Auth-Pages" styling
   Ported from NetLock-RMM-Member-Portal/wwwroot/css/auth-pages.css
   so the Web Console login looks identical to the Member Portal
   when the New design is active. !important is used to win over
   the inline <style> block in Login.razor.
   ============================================================= */

/* Wrapper — transparent so the body's dark gradient and the body-level
   .bg-blur / .bg-ring decorative divs show through the wrapper. The
   wrapper still owns layout (flex column, viewport-pinned, z-index 9999). */
body.theme-new .login-page-wrapper {
    font-family: 'Inter', sans-serif !important;
    background: transparent !important;
    justify-content: flex-start !important;
    align-items: center !important;
    color: hsl(210 40% 98%) !important;
    overflow-x: hidden;
}

/* Custom background image/video — keep wrapper transparent so the media still shows */
body.theme-new .login-page-wrapper.has-bg-image {
    background: none !important;
}

/* Inter font on every descendant of the login wrapper, beats the inline
   `.login-page-wrapper * { font-family: 'Poppins'... }` rule. */
body.theme-new .login-page-wrapper * {
    font-family: 'Inter', sans-serif !important;
}

/* Glass card — replace the dark-grey rounded card with the cyan-glass card */
body.theme-new .login-page-wrapper .screen-1 {
    background: hsl(222 47% 8% / 0.6) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 2.5em 2.25em !important;
    display: flex;
    flex-direction: column;
    border-radius: 16px !important;
    border: 1px solid hsl(0 0% 100% / 0.10) !important;
    box-shadow: 0 25px 50px -12px hsl(222 47% 4% / 0.5),
                0 0 60px -15px hsl(187 85% 53% / 0.30) !important;
    gap: 1.25em !important;
    max-width: 460px !important;
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: visible;
    margin: auto !important;
}

/* Side-panel layout — restore the inline side-layout rules that lose
   specificity to our base body.theme-new wrapper rule, then keep the
   full-height pinned card with the new glass treatment. */
body.theme-new .login-page-wrapper.layout-side-left {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 !important;
}

body.theme-new .login-page-wrapper.layout-side-right {
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 0 !important;
}

body.theme-new .login-page-wrapper.layout-side-left .screen-1,
body.theme-new .login-page-wrapper.layout-side-right .screen-1 {
    width: 480px !important;
    max-width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    padding: 4em 3em !important;
    box-shadow: 0 0 3em rgba(0, 0, 0, 0.5) !important;
    justify-content: center !important;
    flex: 0 0 100vh !important;
    margin: 0 !important;
}

/* Fun fact in side layouts — absolutely positioned in the empty space
   next to the panel, vertically centered. Without these explicit
   overrides our base `.fun-fact { position: relative }` rule wins the
   specificity battle and pushes fun-fact below the 100vh panel. */
body.theme-new .login-page-wrapper.layout-side-left .fun-fact,
body.theme-new .login-page-wrapper.layout-side-right .fun-fact {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 auto !important;
    max-width: 500px !important;
    padding: 0 2em !important;
    margin-top: 0 !important;
}

body.theme-new .login-page-wrapper.layout-side-left .fun-fact {
    left: 480px !important;
    right: 0 !important;
}

body.theme-new .login-page-wrapper.layout-side-right .fun-fact {
    left: 0 !important;
    right: 480px !important;
}

@media (max-width: 520px) {
    body.theme-new .login-page-wrapper.layout-side-left .screen-1,
    body.theme-new .login-page-wrapper.layout-side-right .screen-1 {
        width: 100% !important;
    }
    body.theme-new .login-page-wrapper.layout-side-left .fun-fact,
    body.theme-new .login-page-wrapper.layout-side-right .fun-fact {
        display: none !important;
    }
}

/* Logo — keep image centered with auto-sized container */
body.theme-new .login-page-wrapper .logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -0.5em;
    margin-bottom: 0.25em;
}

body.theme-new .login-page-wrapper .logo-container img {
    width: 200px;
    height: auto;
    object-fit: contain;
}

/* Titles — Inter, large weight 700, dark-on-light readable */
body.theme-new .login-page-wrapper .login-title {
    text-align: center !important;
    color: hsl(210 40% 98%) !important;
    font-size: 1.85em !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 0.25em 0 !important;
}

/* Cyan gradient text accent — used inside .login-title via <span class="title-accent"> */
body.theme-new .login-page-wrapper .title-accent {
    background: linear-gradient(135deg, hsl(187 85% 53%) 0%, hsl(199 89% 48%) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Input groups — glass-tinted, cyan focus ring */
body.theme-new .login-page-wrapper .input-group {
    background: hsl(222 30% 18% / 0.5) !important;
    border: 1px solid hsl(222 30% 25%) !important;
    padding: 0.9em 1em !important;
    display: flex;
    flex-direction: column;
    gap: 0.35em !important;
    border-radius: 12px !important;
    color: hsl(210 40% 98%) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: none !important;
}

body.theme-new .login-page-wrapper .input-group:focus-within {
    border-color: hsl(187 85% 53%) !important;
    background: hsl(222 30% 18% / 0.7) !important;
    box-shadow: 0 0 0 3px hsl(187 85% 53% / 0.15) !important;
}

body.theme-new .login-page-wrapper .input-group label {
    font-size: 0.78em !important;
    font-weight: 500 !important;
    color: hsl(215 20% 65%) !important;
    margin-bottom: 0.1em !important;
    letter-spacing: 0.02em !important;
}

body.theme-new .login-page-wrapper .input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.7em;
}

body.theme-new .login-page-wrapper .input-wrapper .mud-icon-root {
    color: hsl(187 85% 53%) !important;
    font-size: 1.2em;
    flex-shrink: 0;
}

body.theme-new .login-page-wrapper .input-group input,
body.theme-new .login-page-wrapper .input-group select {
    outline: none !important;
    border: none !important;
    background: transparent !important;
    flex: 1;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95em !important;
    color: hsl(210 40% 98%) !important;
    min-width: 0;
    box-shadow: none !important;
}

body.theme-new .login-page-wrapper .input-group input::placeholder {
    color: hsl(215 20% 45%) !important;
    font-size: 0.9em;
}

/* Browser autofill — keep the dark glass look */
body.theme-new .login-page-wrapper .input-group input:-webkit-autofill,
body.theme-new .login-page-wrapper .input-group input:-webkit-autofill:hover,
body.theme-new .login-page-wrapper .input-group input:-webkit-autofill:focus,
body.theme-new .login-page-wrapper .input-group input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px hsl(222 30% 18%) inset !important;
    -webkit-text-fill-color: hsl(210 40% 98%) !important;
    caret-color: hsl(210 40% 98%);
    transition: background-color 5000s ease-in-out 0s;
}

body.theme-new .login-page-wrapper .show-hide-icon .mud-icon-root {
    color: hsl(215 20% 65%) !important;
}

body.theme-new .login-page-wrapper .show-hide-icon:hover .mud-icon-root {
    color: hsl(187 85% 53%) !important;
}

/* Primary CTA — cyan gradient pill */
body.theme-new .login-page-wrapper .login-button {
    padding: 0.95em 1em !important;
    background: linear-gradient(135deg, hsl(187 85% 53%) 0%, hsl(199 89% 48%) 100%) !important;
    color: hsl(222 47% 6%) !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95em !important;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 60px -15px hsl(187 85% 53% / 0.50) !important;
    margin-top: 0.25em !important;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    text-transform: none !important;
}

body.theme-new .login-page-wrapper .login-button:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.01);
    opacity: 0.95;
    box-shadow: 0 0 60px -10px hsl(187 85% 53% / 0.65) !important;
}

body.theme-new .login-page-wrapper .login-button:active {
    transform: translateY(0);
}

body.theme-new .login-page-wrapper .login-button:disabled {
    background: hsl(222 30% 18%) !important;
    color: hsl(215 20% 45%) !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* Secondary outline button — used for "Register / not member" type links */
body.theme-new .login-page-wrapper .secondary-button {
    background: transparent !important;
    border: 1px solid hsl(0 0% 100% / 0.15) !important;
    padding: 0.85em 1em !important;
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.9em !important;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    color: hsl(210 40% 98%) !important;
    margin-top: 0.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

body.theme-new .login-page-wrapper .secondary-button:hover {
    background: hsl(0 0% 100% / 0.05) !important;
    border-color: hsl(0 0% 100% / 0.25) !important;
}

/* Info / error / success messages */
body.theme-new .login-page-wrapper .info-text {
    font-size: 0.9em !important;
    color: hsl(215 20% 65%) !important;
    text-align: center !important;
    line-height: 1.6 !important;
    margin: 0.25em 0 !important;
}

body.theme-new .login-page-wrapper .info-text strong {
    color: hsl(210 40% 98%);
}

body.theme-new .login-page-wrapper .error-message {
    background: hsl(0 84% 60% / 0.10) !important;
    color: hsl(0 84% 78%) !important;
    padding: 0.75em 1em !important;
    border-radius: 10px !important;
    font-size: 0.85em !important;
    text-align: center;
    margin-top: 0.25em;
    border: 1px solid hsl(0 84% 60% / 0.30) !important;
}

/* QR code container — keep white background so the QR scans reliably */
body.theme-new .login-page-wrapper .qr-code-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5em !important;
    background: hsl(0 0% 100%) !important;
    border-radius: 12px !important;
    margin: 0.5em 0;
    border: 1px solid hsl(187 85% 53% / 0.40) !important;
    box-shadow: 0 0 40px -10px hsl(187 85% 53% / 0.30) !important;
}

body.theme-new .login-page-wrapper .qr-code-container img {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

/* Footer links — small muted bar across the bottom of the card */
body.theme-new .login-page-wrapper .footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6em 1.2em !important;
    font-size: 0.78em !important;
    color: hsl(215 20% 50%) !important;
    margin-top: 0.25em !important;
    padding-top: 1em !important;
    border-top: 1px solid hsl(0 0% 100% / 0.05) !important;
}

body.theme-new .login-page-wrapper .footer-links span,
body.theme-new .login-page-wrapper .footer-links a {
    cursor: pointer;
    transition: color 0.2s ease;
    color: hsl(215 20% 50%) !important;
    text-decoration: none !important;
}

body.theme-new .login-page-wrapper .footer-links span:hover,
body.theme-new .login-page-wrapper .footer-links a:hover {
    color: hsl(187 85% 53%) !important;
}

/* Fun fact — sits below the card, muted styling */
body.theme-new .login-page-wrapper .fun-fact {
    color: hsl(215 20% 65%) !important;
    font-size: 0.95em !important;
    text-align: center;
    margin-top: 1.5em !important;
    max-width: 460px;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

/* Responsive — match Member Portal breakpoints */
@media (max-width: 768px) {
    body.theme-new .login-page-wrapper {
        padding: 1.5rem 1rem !important;
    }
    body.theme-new .login-page-wrapper .screen-1 {
        padding: 2em 1.5em !important;
        gap: 1em !important;
        max-width: 100% !important;
    }
    body.theme-new .login-page-wrapper .logo-container img {
        width: 160px;
    }
    body.theme-new .login-page-wrapper .login-title {
        font-size: 1.55em !important;
    }
}

/* =============================================================
   Quill Rich Text Editor — Dark-Theme Overrides
   quill.snow.css setzt den Placeholder auf rgba(0,0,0,0.6) (schwarz),
   was auf dem dunklen Hintergrund nicht lesbar ist. Alle Quill-Elemente
   werden hier body.theme-new-scoped auf das dunkle Design umgestellt.
   ============================================================= */

/* Placeholder-Text — von schwarz auf halbtransparentes Weiß */
body.theme-new .ql-editor.ql-blank::before {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Editor-Textfarbe sicherstellen */
body.theme-new .ql-editor {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Toolbar */
body.theme-new .ql-toolbar.ql-snow {
    background-color: hsl(222 47% 12%) !important;
    border-color: hsl(0 0% 100% / 0.12) !important;
}

/* Container-Rahmen */
body.theme-new .ql-container.ql-snow {
    border-color: hsl(0 0% 100% / 0.12) !important;
}

/* Toolbar-Icons (SVG stroke/fill) */
body.theme-new .ql-snow .ql-stroke {
    stroke: rgba(255, 255, 255, 0.7) !important;
}

body.theme-new .ql-snow .ql-fill,
body.theme-new .ql-snow .ql-stroke.ql-fill {
    fill: rgba(255, 255, 255, 0.7) !important;
}

/* Toolbar-Picker (Header, Font, Size …) */
body.theme-new .ql-snow .ql-picker {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.theme-new .ql-snow .ql-picker-options {
    background-color: hsl(222 47% 14%) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: hsl(0 0% 100% / 0.12) !important;
}

/* Link-Tooltip */
body.theme-new .ql-snow .ql-tooltip {
    background-color: hsl(222 47% 10%) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: hsl(0 0% 100% / 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

body.theme-new .ql-snow .ql-tooltip input[type=text] {
    background-color: hsl(222 47% 16%) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: hsl(0 0% 100% / 0.2) !important;
}

/* Aktiver/Hover-Zustand der Toolbar-Buttons — Cyan-Akzent */
body.theme-new .ql-snow.ql-toolbar button:hover .ql-stroke,
body.theme-new .ql-snow .ql-toolbar button:hover .ql-stroke,
body.theme-new .ql-snow.ql-toolbar button.ql-active .ql-stroke,
body.theme-new .ql-snow .ql-toolbar button.ql-active .ql-stroke {
    stroke: hsl(187 85% 53%) !important;
}

body.theme-new .ql-snow.ql-toolbar button:hover .ql-fill,
body.theme-new .ql-snow .ql-toolbar button:hover .ql-fill,
body.theme-new .ql-snow.ql-toolbar button.ql-active .ql-fill,
body.theme-new .ql-snow .ql-toolbar button.ql-active .ql-fill {
    fill: hsl(187 85% 53%) !important;
}

body.theme-new .ql-snow.ql-toolbar button:hover,
body.theme-new .ql-snow .ql-toolbar button:hover,
body.theme-new .ql-snow.ql-toolbar button.ql-active,
body.theme-new .ql-snow .ql-toolbar button.ql-active,
body.theme-new .ql-snow.ql-toolbar .ql-picker-label:hover,
body.theme-new .ql-snow .ql-toolbar .ql-picker-label:hover,
body.theme-new .ql-snow.ql-toolbar .ql-picker-label.ql-active,
body.theme-new .ql-snow .ql-toolbar .ql-picker-label.ql-active {
    color: hsl(187 85% 53%) !important;
}

/* =============================================================
   Device World Map — Leaflet popup (dark / glass)
   Overrides default white Leaflet popup so device bubbles match
   the cyan-glass palette of the new design.
   ============================================================= */

body.theme-new .leaflet-popup-content-wrapper {
    background: hsl(222 47% 8% / 0.92) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: hsl(210 40% 98%) !important;
    border: 1px solid hsl(0 0% 100% / 0.08) !important;
    box-shadow: 0 25px 50px -12px hsl(222 47% 4% / 0.7) !important;
}

body.theme-new .leaflet-popup-tip {
    background: hsl(222 47% 8% / 0.92) !important;
    border: 1px solid hsl(0 0% 100% / 0.08) !important;
    box-shadow: 0 25px 50px -12px hsl(222 47% 4% / 0.7) !important;
}

body.theme-new .leaflet-popup-close-button {
    color: hsl(215 20% 65%) !important;
}
body.theme-new .leaflet-popup-close-button:hover {
    color: hsl(187 85% 53%) !important;
}

body.theme-new .dwm-popup,
body.theme-new .dwm-popup__title,
body.theme-new .dwm-popup__table,
body.theme-new .dwm-popup__value {
    color: hsl(210 40% 98%) !important;
}

body.theme-new .dwm-popup__label {
    color: hsl(215 20% 65%) !important;
}

body.theme-new .dwm-popup__btn {
    background: hsl(187 85% 53%) !important;
    color: hsl(222 47% 6%) !important;
    font-weight: 600;
}
body.theme-new .dwm-popup__btn:hover {
    background: hsl(187 85% 45%) !important;
}