/* Reset Filament simple layout wrappers */
        .fi-simple-layout { display: contents !important; }
        .fi-simple-layout > div:first-child:not(.fi-simple-main-ctn) { display: none !important; }
        .fi-simple-main-ctn { display: contents !important; }
        .fi-simple-main { all: unset !important; display: contents !important; }
        .fi-simple-layout .fi-footer { display: none !important; }
        .fi-simple-page > .fi-simple-page-content > .fi-simple-header { display: none !important; }

        /* ===== LAYOUT ===== */
        .mb-login {
            display: flex;
            min-height: 100vh;
            min-height: 100dvh;
            width: 100vw;
            position: fixed;
            inset: 0;
            z-index: 100;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
            background: var(--bg-body);
        }

        /* ===== LEFT - Form ===== */
        /* Matcht de body-kleur (wat achter de right-card schemert) zodat het
           rechter-paneel als floating card overkomt - werkt in light en dark. */
        .mb-login-left {
            width: 28rem;
            min-width: 28rem;
            background: var(--bg-body);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 3rem;
            position: relative;
            z-index: 2;
        }

        .mb-login-header { margin-bottom: 2rem; }
        .mb-login-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.375rem;
            letter-spacing: -0.02em;
        }
        .mb-login-subtitle {
            font-size: 0.9375rem;
            color: var(--text-tertiary);
            margin: 0;
        }

        .mb-login-footer {
            position: absolute;
            bottom: 1.25rem;
            left: 0; right: 0;
            text-align: center;
            font-size: 0.75rem;
            color: var(--text-tertiary);
        }

        /* ===== RIGHT - Branding (floating card) ===== */
        .mb-login-right {
            flex: 1;
            background: var(--bg-canvas);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 3rem;
            position: relative;
            overflow: hidden;
            margin: 0.5rem 0.5rem 0.5rem 0;
            border-radius: 1rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
            border: 1px solid var(--border-default);
        }

        /* Dot grid background */
        .mb-login-right::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(148, 163, 184, 0.15) 1px, transparent 1px);
            background-size: 32px 32px;
            mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
            -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
        }

        /* Subtle blue glow */
        .mb-login-right::after {
            content: '';
            position: absolute;
            top: -10%;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 60%;
            background: radial-gradient(ellipse at center, rgba(var(--color-accent-blue-rgb), 0.06) 0%, transparent 70%);
            border-radius: 50%;
        }

        /* Light/Dark logo swap - toon de juiste variant op basis van html.dark */
        .mb-login-logo-img--dark { display: none; }
        html.dark .mb-login-logo-img--light { display: none; }
        html.dark .mb-login-logo-img--dark { display: inline-block; }

        /* Right panel content */
        .mb-login-right-content {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 28rem;
        }

        .mb-login-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }
        .mb-login-logo__text {
            font-size: 1.75rem;
            font-weight: 800;
            color: var(--text-primary);
            letter-spacing: -0.03em;
        }

        .mb-login-right-content h1 {
            color: var(--text-primary);
            font-size: 2rem;
            font-weight: 700;
            margin: 0 0 0.75rem;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }
        .mb-login-right-content h1 span {
            color: var(--color-accent-blue);
        }
        .mb-login-right-content p {
            color: var(--text-secondary);
            font-size: 1rem;
            margin: 0 0 2rem;
            line-height: 1.6;
        }

        /* Feature pills */
        .mb-login-features {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
            max-width: 26rem;
        }
        .mb-login-feat {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.75rem 1rem;
            border-radius: 10px;
            background: var(--bg-surface);
            color: var(--text-secondary);
            font-size: 0.8125rem;
            font-weight: 500;
            border: 1px solid var(--border-default);
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
            transition: all 150ms ease;
        }
        .mb-login-feat:hover {
            border-color: var(--border-strong);
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
            transform: translateY(-1px);
        }
        .mb-login-feat svg {
            width: 1.125rem;
            height: 1.125rem;
            flex-shrink: 0;
            color: var(--color-accent-blue);
        }
        .mb-login-feat--orange svg {
            color: var(--color-cta);
        }

        /* ===== FORM OVERRIDES ===== */
        .mb-login-form .fi-fo-field-wrp label {
            color: var(--text-secondary) !important;
            font-size: 0.8125rem !important;
            font-weight: 500 !important;
        }
        .mb-login-form .fi-input-wrp {
            border-radius: 10px !important;
            border: 1.5px solid var(--border-default) !important;
            background: var(--bg-body) !important;
            transition: all 150ms ease !important;
        }
        .mb-login-form .fi-input-wrp:focus-within {
            border-color: var(--color-accent-blue) !important;
            box-shadow: 0 0 0 3px rgba(var(--color-accent-blue-rgb), 0.1) !important;
            background: var(--bg-surface) !important;
        }
        .mb-login-form .fi-input {
            background: transparent !important;
            border: none !important;
            color: var(--text-primary) !important;
            height: 2.75rem !important;
            font-size: 0.9375rem !important;
        }
        .mb-login-form .fi-input::placeholder { color: var(--text-tertiary) !important; }
        .mb-login-form .fi-input-wrp .fi-icon-btn { color: var(--text-tertiary) !important; }
        .mb-login-form .fi-input-wrp .fi-icon-btn:hover { color: var(--text-secondary) !important; }

        .mb-login-form .fi-btn-primary {
            background: var(--color-accent-blue) !important;
            border: none !important;
            border-radius: 10px !important;
            font-weight: 600 !important;
            height: 2.75rem !important;
            font-size: 0.9375rem !important;
            transition: all 150ms ease !important;
            box-shadow: 0 2px 8px rgba(var(--color-accent-blue-rgb), 0.25) !important;
        }
        .mb-login-form .fi-btn-primary:hover {
            background: var(--color-accent-blue-hover) !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 16px rgba(var(--color-accent-blue-rgb), 0.35) !important;
        }
        .mb-login-form .fi-btn-primary:active { transform: translateY(0) !important; }

        .mb-login-form .fi-checkbox-input:checked {
            background-color: var(--color-accent-blue) !important;
            border-color: var(--color-accent-blue) !important;
        }
        .mb-login-form .fi-checkbox label span,
        .mb-login-form [type="checkbox"] ~ * {
            color: var(--text-tertiary) !important;
            font-size: 0.8125rem !important;
        }
        .mb-login-form .fi-link { color: var(--color-accent-blue) !important; font-size: 0.8125rem !important; }
        .mb-login-form .fi-link:hover { color: var(--color-accent-blue-hover) !important; }

        /* ===== BRANDING BADGE ===== */
        .mb-login-branding {
            position: absolute;
            bottom: 1.5rem;
            right: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 1rem;
            background: var(--bg-surface);
            border-radius: 0.75rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);
            border: 1px solid var(--border-default);
            z-index: 1;
        }

        .mb-login-branding__name {
            font-size: 0.8125rem;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -0.01em;
        }

        .mb-login-branding__sep {
            color: var(--border-default);
            font-size: 0.875rem;
        }

        .mb-login-branding__slogan {
            font-size: 0.6875rem;
            color: var(--text-tertiary);
        }

        @media (max-width: 768px) {
            .mb-login-branding { display: none; }
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1024px) {
            .mb-login-left { width: 24rem; min-width: 24rem; padding: 2.5rem; }
            .mb-login-right-content h1 { font-size: 1.75rem; }
        }

        @media (max-width: 768px) {
            /* Mobile: single column, branded background, card form */
            .mb-login {
                flex-direction: column;
                background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent-blue) 8%, white) 0%, var(--bg-body) 45%, color-mix(in srgb, var(--color-cta) 8%, white) 100%);
                overflow-y: auto;
                position: relative;
            }

            /* Dot grid on the full background */
            .mb-login::before {
                content: '';
                position: fixed;
                inset: 0;
                background-image: radial-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px);
                background-size: 28px 28px;
                mask-image: radial-gradient(ellipse at 50% 30%, black 10%, transparent 60%);
                -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 10%, transparent 60%);
                pointer-events: none;
                z-index: 0;
            }

            /* Hide the right panel entirely on mobile */
            .mb-login-right { display: none; }

            /* Mobile logo (shown via ::after on left panel or dedicated element) */
            .mb-login-mobile-brand { display: flex !important; }

            /* Form panel - true center */
            .mb-login-left {
                width: 100%;
                min-width: auto;
                flex: 1;
                background: transparent;
                box-shadow: none;
                padding: 0 1.25rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: relative;
                z-index: 1;
            }
            .mb-login-left > * {
                width: 100%;
                max-width: 24rem;
            }

            .mb-login-mobile-brand {
                text-align: center;
                padding: 0 0 1rem;
            }
            .mb-login-mobile-brand .mb-m-logo {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.625rem;
                margin-bottom: 0.5rem;
            }
            .mb-login-mobile-brand .mb-m-logo__text {
                font-size: 1.5rem;
                font-weight: 800;
                color: var(--text-primary);
                letter-spacing: -0.03em;
            }
            .mb-login-mobile-brand .mb-m-tagline {
                font-size: 0.6875rem;
                color: var(--text-tertiary);
                margin: 0;
                letter-spacing: 0.02em;
            }

            /* Card wrapper for the form */
            .mb-login-card {
                display: block !important;
                background: var(--bg-surface);
                border-radius: 16px;
                padding: 1.75rem 1.5rem;
                box-shadow:
                    0 1px 3px rgba(15, 23, 42, 0.04),
                    0 8px 24px rgba(15, 23, 42, 0.06);
                border: 1px solid rgba(226, 232, 240, 0.6);
            }

            .mb-login-header { margin-bottom: 1.5rem; }
            .mb-login-title { font-size: 1.375rem; }
            .mb-login-subtitle { font-size: 0.875rem; }

            /* Tagline under card */
            .mb-login-mobile-tagline {
                display: block !important;
                text-align: center;
                padding: 1.25rem 0.5rem 0;
            }
            .mb-login-mobile-tagline h3 {
                font-size: 0.9375rem;
                font-weight: 600;
                color: var(--text-primary);
                margin: 0 0 0.25rem;
                letter-spacing: -0.01em;
            }
            .mb-login-mobile-tagline h3 span { color: var(--color-accent-blue); }
            .mb-login-mobile-tagline p {
                font-size: 0.8125rem;
                color: var(--text-tertiary);
                margin: 0;
                line-height: 1.5;
            }

            .mb-login-footer {
                position: relative;
                bottom: auto;
                margin-top: 1rem;
                padding-bottom: 0;
            }

            /* Decorative blocks */
            .mb-deco-block { display: none; }
            .mb-deco-mobile { display: block !important; }

            /* Bottom blocks row - full width, pinned to bottom */
            .mb-login-mobile-blocks {
                display: flex !important;
                justify-content: center;
                align-items: flex-end;
                gap: 8px;
                padding: 0 1.25rem;
                padding-bottom: 2rem;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 1;
                max-width: none !important;
                pointer-events: none;
            }
            .mb-mobile-block {
                border-radius: 6px;
                flex-shrink: 0;
            }
            .mb-mobile-block:nth-child(1) { width: 28px; height: 28px; }
            .mb-mobile-block:nth-child(2) { width: 36px; height: 44px; }
            .mb-mobile-block:nth-child(3) { width: 32px; height: 56px; }
            .mb-mobile-block:nth-child(4) { width: 40px; height: 64px; }
            .mb-mobile-block:nth-child(5) { width: 32px; height: 52px; }
            .mb-mobile-block:nth-child(6) { width: 36px; height: 40px; }
            .mb-mobile-block:nth-child(7) { width: 28px; height: 24px; }

            .mb-mobile-block--blue-solid { background: rgba(var(--color-accent-blue-rgb), 0.15); }
            .mb-mobile-block--blue-light { background: rgba(var(--color-accent-blue-rgb), 0.07); border: 1.5px solid rgba(var(--color-accent-blue-rgb), 0.12); }
            .mb-mobile-block--orange-solid { background: rgba(var(--color-cta-rgb), 0.15); }
            .mb-mobile-block--orange-light { background: rgba(var(--color-cta-rgb), 0.07); border: 1.5px solid rgba(var(--color-cta-rgb), 0.12); }
        }

        /* Decorative blocks for mobile (positioned on full bg) */
        .mb-deco-mobile {
            display: none;
            position: fixed;
            border-radius: 10px;
            border: 2px solid;
            z-index: 0;
            pointer-events: none;
        }
        .mb-deco-mobile--blue {
            border-color: rgba(var(--color-accent-blue-rgb), 0.12);
            background: rgba(var(--color-accent-blue-rgb), 0.04);
        }
        .mb-deco-mobile--orange {
            border-color: rgba(var(--color-cta-rgb), 0.15);
            background: rgba(var(--color-cta-rgb), 0.05);
        }

        /* Mobile elements hidden on desktop */
        .mb-login-mobile-brand { display: none; }
        .mb-login-mobile-blocks { display: none; }
        .mb-login-mobile-tagline { display: none; }
        .mb-login-card { display: contents; }

        @media (max-width: 480px) {
            .mb-login-left { padding: 0 1rem; }
            .mb-login-card { padding: 1.5rem 1.25rem; }
            .mb-login-mobile-brand { padding: 2rem 0 1.25rem; }
        }