/* =============================================================
   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 {
    /* Colour and gradient are set separately: the `background` shorthand would reset
       background-color to transparent, and browsers paint safe-area insets, overscroll and
       any sideways pan with the body colour (white on phones without one). */
    background-color: hsl(222 47% 6%) !important;
    background-image: linear-gradient(135deg, hsl(222 47% 6%) 0%, hsl(222 47% 12%) 100%) !important;
    background-attachment: fixed; /* the touch block below switches this to scroll */
    /* With html carrying its own background colour (ui-improvements.css) the body background no
       longer propagates to the canvas, so the body must cover the viewport for the gradient to
       reach the bottom on short pages. */
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    color-scheme: dark !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. */
/* Canvas colour for the New design: the exact gradient start tone, so overscroll and the
   compositor strips beside overlay scrollbars blend into the backdrop. :has() is supported by all
   browsers the console targets. */
:root:has(body.theme-new) {
    background-color: hsl(222 47% 6%);
}

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 (the shadow lives in the "Modern Drawer styling" block below) */
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;
}

/* 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. Only the open drawer casts the shadow: the closed responsive drawer
   sits off-screen at the left edge and its shadow would bleed onto every phone page. */
body.theme-new .mud-drawer.mud-drawer--open {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08) !important;
}

body.theme-new .mud-theme-dark .mud-drawer.mud-drawer--open {
    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;
}

/* Row tints for the pinned actions column of list pages. That column paints an opaque backdrop so
   the data cells do not show through it while the table scrolls sideways
   (wwwroot/css/ui-improvements.css). The tints of this design are translucent layers on the <tr> and
   would disappear behind that backdrop, so the pinned cell repaints them from these variables. The
   head tint only becomes visible on tables without a fixed header - MudBlazor paints a fixed header
   opaque itself. */
body.theme-new {
    --nlui-row-tint-hover: hsl(187 85% 53% / 0.08);
    --nlui-row-tint-selected: hsl(187 85% 53% / 0.18);
    --nlui-row-tint-selected-hover: hsl(187 85% 53% / 0.24);
    --nlui-table-head-tint: hsl(187 85% 53% / 0.1);
}

/* 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.
   Desktop only: styling ::-webkit-scrollbar on touch devices replaces Android Chrome's overlay
   scrollbars with a permanently visible classic bar, which shows up as a light strip on the
   right page edge. Phones keep the native overlay scrollbars. */
@media (hover: hover) and (pointer: fine) {
    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;
    /* only the opacity is animated, so the transform hint would keep a layer alive for nothing */
    will-change: opacity;
}

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);
}

/* Only the opacity changes over time. Scaling an element that carries an 80px blur makes the
   browser re-rasterise the whole blurred surface on every frame, while a pure opacity change
   is handled by the compositor without redrawing it. */
@keyframes pulseGlow {
    0%, 100% { opacity: 0.30; }
    50%      { opacity: 0.60; }
}

/* =============================================================
   /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;
}

/* =============================================================
   Touch / low-power performance overrides
   Disable GPU-expensive ambient effects on phones & tablets.
   Desktop (pointer:fine) keeps the full glass design.
   ============================================================= */
@media (hover: none) and (pointer: coarse) {
    /* Pulsing 80px-blur circles re-rasterize a huge GPU layer every frame.
       Drop them on touch — purely decorative. (theme-new only) */
    body.theme-new .bg-blur,
    body.theme-new .bg-blur-primary,
    body.theme-new .bg-blur-accent {
        display: none !important;
    }

    /* Replace glass backdrop-filter with a near-opaque surface on touch.
       Re-blurring the animated background every frame was the main
       authenticated-area lag source; solid bg still reads as intentional. */
    body.theme-new .mud-appbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: hsl(222 47% 8% / 0.97) !important;
    }
    body.theme-new .mud-drawer {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: hsl(222 47% 8%) !important;
    }
    body.theme-new .mud-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: hsl(222 47% 10%) !important;
    }
    /* fixed attachment forces a full-viewport repaint on every scroll. */
    body.theme-new {
        background-attachment: scroll !important;
    }

    /* Login glass card — drop the 20px backdrop blur on touch. */
    body.theme-new .login-page-wrapper .screen-1 {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: hsl(222 47% 8%) !important;
    }

    /* Dialog scrim blur — central override. .dialog-blurring is redefined
       (backdrop-filter: blur(10px), no !important) in ~36 per-page <style>
       blocks and is not theme-gated. This one !important rule overrides all
       of them in both themes — no need to touch the individual pages. */
    .dialog-blurring {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Honor reduced-motion: stop the perpetual pulse + per-page decorative
   keyframes. Scoped to theme-new so the Classic theme is untouched. */
@media (prefers-reduced-motion: reduce) {
    body.theme-new *,
    body.theme-new *::before,
    body.theme-new *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Mobile responsiveness fixes (phones, <= 600px). Scoped to theme-new so the
   Classic design is untouched. */
/* The generic phone helpers (main-content padding, .responsive-toolbar, .responsive-table-scroll,
   .col-hide-xs) moved to ui-improvements.css so both themes get them. */
@media (max-width: 600px) {
    body.theme-new .ai-fab { bottom: 12px !important; right: 12px !important; }                       /* bug4: keep the AI FAB in reach */
    body.theme-new .ai-panel { width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; }
    body.theme-new .ai-panel-resize-handle { display: none !important; } /* no manual resize on touch */
    /* Phone: show the device list as a plain name list — hide the "Name" data-label prefix and left-align the value */
    body.theme-new .mud-md-table .mud-table-body .mud-table-cell[data-label="Name"]::before { display: none !important; }
    body.theme-new .mud-md-table .mud-table-body .mud-table-cell[data-label="Name"] { justify-content: flex-start !important; }
}