html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100%;
}

app {
    display: block;
    height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.header-logo {
    flex-shrink: 0;
    background-image: url('../images/Logo.svg');
    width: 220px;
    height: 52px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* DrBiz Login Page Custom Styling - DevExpress Theme Compatible
   This implementation follows DevExpress theming guidelines
   for compatible styling across theme switching */
:root {
    /* 
     * Theme color mapping - maps to DevExpress theme system variables
     * Using fallback values from Office White theme as defaults
     */
    
    /* Primary accent colors */
    --drbiz-primary: var(--dx-accent-color, #fe7109);
    --drbiz-primary-hover: var(--dx-accent-hover-color, #e66400);
    --drbiz-primary-pressed: var(--dx-accent-active-color, #cc5a00);
    
    /* Derived accent colors with fallbacks for all themes */
    --drbiz-primary-light: color-mix(in srgb, var(--dx-accent-color, #fe7109) 20%, white);
    --drbiz-primary-transparent: rgba(254, 113, 9, 0.1);
    --drbiz-primary-ultra-light: rgba(254, 113, 9, 0.05);
    
    /* Text colors hierarchy - respects theme's text color system */
    --drbiz-text-primary: var(--dx-primary-text-color, #444444);
    --drbiz-text-secondary: var(--dx-secondary-text-color, #555555);
    --drbiz-text-muted: var(--dx-muted-text-color, #777777);
    
    /* UI element colors - respects theme's surface colors */
    --drbiz-surface: var(--dx-surface-color, white);
    --drbiz-background: var(--dx-background-color, #ffffff);
    --drbiz-card-bg: var(--dx-card-color, white);
    --drbiz-border: var(--dx-border-color, #e5e5e5);
    
    /* Form input colors */
    --drbiz-input-bg: var(--dx-input-background-color, rgba(255, 255, 255, 0.9));
    --drbiz-input-focus-bg: var(--dx-input-background-focus-color, white);
    --drbiz-input-text: var(--dx-input-text-color, var(--drbiz-text-primary));
    
    /* Effects and gradients */
    --drbiz-shadow: var(--dx-shadow, 0px 8px 24px rgba(0, 0, 0, 0.08));
    
    /* 
     * Theme-sensitive gradients
     * Uses CSS color functions to derive from theme colors
     */
    --drbiz-gradient-bg: linear-gradient(135deg, 
        var(--drbiz-background) 0%, 
        color-mix(in srgb, var(--drbiz-background) 95%, #e0e0e0) 100%);
        
    --drbiz-gradient-accent: linear-gradient(135deg, 
        var(--drbiz-primary) 0%, 
        color-mix(in srgb, var(--drbiz-primary) 70%, black) 100%);
}

.drbiz-login-page {
    /* Apply theme - adapts to light/dark theme */
    background: var(--drbiz-gradient-bg);
    color: var(--drbiz-text-primary);
    min-height: 100%;
    height: 100vh;
    max-width: 100vw;
    overflow: hidden;
    
    /* 
     * Theme transition - smooth transition between themes
     * Animates color properties for a polished experience
     */
    transition: 
        background 0.3s ease,
        color 0.3s ease;
}

/* DevExpress theme integration - smooth transitions between themes */
.drbiz-login-page * {
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Dark theme background gradient */
:root[var(--is-dark-theme="1")] .drbiz-login-page {
    background: var(--drbiz-gradient-bg);
}

.login-container {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    max-width: 100%;
}

    .login-container:before {
        content: '';
        position: absolute;
        top: -150px;
        right: -150px;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background-color: var(--drbiz-primary-transparent, rgba(254, 113, 9, 0.1));
        z-index: 0;
    }

    .login-container:after {
        content: '';
        position: absolute;
        bottom: -100px;
        left: -100px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background-color: var(--drbiz-primary-transparent, rgba(254, 113, 9, 0.1));
        opacity: 0.6;
        z-index: 0;
    }
    
    /* Theme-specific bubbles */
    :root:has(link[href*="blazing-dark.bs5.min.css"]) .login-container:before,
    :root:has(link[href*="blazing-dark.bs5.min.css"]) .login-container:after {
        background-color: rgba(155, 23, 226, 0.1);
    }
    
    :root:has(link[href*="fluent-dark.bs5.min.css"]) .login-container:before,
    :root:has(link[href*="fluent-dark.bs5.min.css"]) .login-container:after {
        background-color: rgba(0, 120, 212, 0.1);
    }
    
    :root:has(link[href*="blazing-berry.bs5.min.css"]) .login-container:before,
    :root:has(link[href*="blazing-berry.bs5.min.css"]) .login-container:after {
        background-color: rgba(92, 45, 145, 0.1);
    }
    
    :root:has(link[href*="purple.bs5.min.css"]) .login-container:before,
    :root:has(link[href*="purple.bs5.min.css"]) .login-container:after {
        background-color: rgba(121, 137, 255, 0.1);
    }
    
    :root:has(link[href*="fluent-light.bs5.min.css"]) .login-container:before,
    :root:has(link[href*="fluent-light.bs5.min.css"]) .login-container:after {
        background-color: rgba(0, 120, 212, 0.1);
    }

.login-left-section {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.login-right-section {
    flex: 0 0 50%;
    max-width: 50%;
    background: var(--drbiz-gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
    overflow: hidden;
    box-shadow: -8px 0 25px rgba(0, 0, 0, 0.15);
}

.login-logo-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

    .login-logo-centered .header-logo {
        width: 240px;
        height: 80px;
        margin: 0 auto;
    }

.login-form-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.login-form {
    background-color: var(--dx-surface-color, white);
    color: var(--dx-primary-text-color, #444444);
    padding: 32px;
    border-radius: 12px;
    box-shadow: var(--drbiz-shadow);
    position: relative;
    overflow: hidden;
}

/* Dark theme specific login form adjustments */
:root:has(link[href*="blazing-dark.bs5.min.css"]) .login-form,
:root:has(link[href*="fluent-dark.bs5.min.css"]) .login-form {
    background-color: var(--dx-background-color, #37353d);
    color: var(--dx-primary-text-color, #fff);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

    .login-form:before {
        content: '';
        position: absolute;
        top: -30px;
        right: -30px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: var(--drbiz-primary-transparent, rgba(254, 113, 9, 0.1));
        z-index: 0;
    }

    .login-form:after {
        content: '';
        position: absolute;
        bottom: -40px;
        left: -40px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-color: var(--drbiz-primary-transparent, rgba(254, 113, 9, 0.1));
        opacity: 0.6;
        z-index: 0;
    }
    
    /* Theme-specific form bubbles */
    :root:has(link[href*="blazing-dark.bs5.min.css"]) .login-form:before,
    :root:has(link[href*="blazing-dark.bs5.min.css"]) .login-form:after {
        background-color: rgba(155, 23, 226, 0.15);
    }
    
    :root:has(link[href*="fluent-dark.bs5.min.css"]) .login-form:before,
    :root:has(link[href*="fluent-dark.bs5.min.css"]) .login-form:after {
        background-color: rgba(0, 120, 212, 0.15);
    }
    
    :root:has(link[href*="blazing-berry.bs5.min.css"]) .login-form:before,
    :root:has(link[href*="blazing-berry.bs5.min.css"]) .login-form:after {
        background-color: rgba(92, 45, 145, 0.15);
    }
    
    :root:has(link[href*="purple.bs5.min.css"]) .login-form:before,
    :root:has(link[href*="purple.bs5.min.css"]) .login-form:after {
        background-color: rgba(121, 137, 255, 0.15);
    }
    
    :root:has(link[href*="fluent-light.bs5.min.css"]) .login-form:before,
    :root:has(link[href*="fluent-light.bs5.min.css"]) .login-form:after {
        background-color: rgba(0, 120, 212, 0.15);
    }

    .login-form :deep(.dxbl-btn-toolbar) {
        margin-top: 24px;
        width: 100%;
        position: relative;
        z-index: 3;
    }

    .login-form :deep(.dxbl-btn) {
        width: 100%;
        border-radius: 6px;
        padding: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        background-color: var(--dx-accent-color, #fe7109);
        border-color: var(--dx-accent-color, #fe7109);
        color: white;
    }

        .login-form :deep(.dxbl-btn:hover) {
            background-color: var(--dx-accent-hover-color, #e66400);
            border-color: var(--dx-accent-hover-color, #e66400);
        }
        
        .login-form :deep(.dxbl-btn:active) {
            background-color: var(--dx-accent-active-color, #cc5a00);
            border-color: var(--dx-accent-active-color, #cc5a00);
        }

        .login-form :deep(.dxbl-btn):after {
            content: '';
            position: absolute;
            width: 30px;
            height: 200px;
            background-color: rgba(255, 255, 255, 0.2);
            transform: rotate(45deg);
            top: -100px;
            left: -100px;
            transition: all 0.5s ease;
        }

        .login-form :deep(.dxbl-btn):hover:after {
            left: 150%;
        }

    .login-form :deep(.form-group) {
        margin-bottom: 20px;
        position: relative;
        z-index: 2;
    }

    .login-form :deep(.form-group label) {
        color: #444444;
    }
    
    .login-form :deep(.form-control) {
        padding: 12px;
        border-radius: 6px;
        border: 1px solid var(--drbiz-border);
        transition: all 0.3s ease;
        position: relative;
        background-color: var(--drbiz-input-bg);
        color: var(--drbiz-input-text);
    }

    .login-form :deep(.form-control:focus) {
        border-color: var(--drbiz-primary);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--drbiz-primary) 20%, transparent);
        background-color: var(--drbiz-input-focus-bg);
        color: var(--drbiz-input-text);
    }
    
    /* Adjust placeholder color to maintain readability in all themes */
    .login-form :deep(.form-control::placeholder) {
        color: var(--drbiz-text-muted);
        opacity: 0.7;
    }
    
    /* Ensure inputs adapt to dark themes */
    :root:has(link[href*="blazing-dark.bs5.min.css"]) .login-form :deep(.form-group label),
    :root:has(link[href*="fluent-dark.bs5.min.css"]) .login-form :deep(.form-group label) {
        color: var(--dx-primary-text-color, #fff);
    }

    .login-form :deep(.form-check) {
        padding-left: 30px;
        margin-top: 16px;
        position: relative;
        z-index: 2;
    }

.login-options {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.accent-link,
.forgot-password a {
    color: var(--dx-accent-color, #fe7109) !important;
    text-decoration: none;
    font-size: 14px;
    position: relative;
    transition: color 0.3s ease;
    display: inline-block;
}

/* Theme-specific link colors */
:root:has(link[href*="blazing-dark.bs5.min.css"]) .accent-link,
:root:has(link[href*="blazing-dark.bs5.min.css"]) .forgot-password a,
:root:has(link[href*="blazing-dark.bs5.min.css"]) .new-account a {
    color: #9b17e2 !important;
}

:root:has(link[href*="blazing-berry.bs5.min.css"]) .accent-link,
:root:has(link[href*="blazing-berry.bs5.min.css"]) .forgot-password a,
:root:has(link[href*="blazing-berry.bs5.min.css"]) .new-account a {
    color: #5c2d91 !important;
}

:root:has(link[href*="purple.bs5.min.css"]) .accent-link,
:root:has(link[href*="purple.bs5.min.css"]) .forgot-password a,
:root:has(link[href*="purple.bs5.min.css"]) .new-account a {
    color: #7989ff !important;
}

:root:has(link[href*="fluent-dark.bs5.min.css"]) .accent-link,
:root:has(link[href*="fluent-dark.bs5.min.css"]) .forgot-password a,
:root:has(link[href*="fluent-dark.bs5.min.css"]) .new-account a,
:root:has(link[href*="fluent-light.bs5.min.css"]) .accent-link,
:root:has(link[href*="fluent-light.bs5.min.css"]) .forgot-password a,
:root:has(link[href*="fluent-light.bs5.min.css"]) .new-account a {
    color: #0078d4 !important;
}

    .accent-link:hover,
    .forgot-password a:hover {
        color: var(--dx-accent-hover-color, #e66400) !important;
    }

    .accent-link:after,
    .forgot-password a:after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background-color: var(--dx-accent-color, #fe7109);
        transition: width 0.3s ease, background-color 0.3s ease;
    }

    .accent-link:hover:after,
    .forgot-password a:hover:after {
        width: 100%;
        background-color: var(--dx-accent-hover-color, #e66400);
    }
    
    /* Theme-specific hover colors */
    :root:has(link[href*="blazing-dark.bs5.min.css"]) .accent-link:hover,
    :root:has(link[href*="blazing-dark.bs5.min.css"]) .forgot-password a:hover,
    :root:has(link[href*="blazing-dark.bs5.min.css"]) .new-account a:hover {
        color: #7512b1 !important;
    }
    
    :root:has(link[href*="blazing-dark.bs5.min.css"]) .accent-link:after,
    :root:has(link[href*="blazing-dark.bs5.min.css"]) .forgot-password a:after,
    :root:has(link[href*="blazing-dark.bs5.min.css"]) .accent-link:hover:after,
    :root:has(link[href*="blazing-dark.bs5.min.css"]) .forgot-password a:hover:after {
        background-color: #9b17e2;
    }
    
    :root:has(link[href*="blazing-berry.bs5.min.css"]) .accent-link:hover,
    :root:has(link[href*="blazing-berry.bs5.min.css"]) .forgot-password a:hover,
    :root:has(link[href*="blazing-berry.bs5.min.css"]) .new-account a:hover {
        color: #4a2477 !important;
    }
    
    :root:has(link[href*="blazing-berry.bs5.min.css"]) .accent-link:after,
    :root:has(link[href*="blazing-berry.bs5.min.css"]) .forgot-password a:after,
    :root:has(link[href*="blazing-berry.bs5.min.css"]) .accent-link:hover:after,
    :root:has(link[href*="blazing-berry.bs5.min.css"]) .forgot-password a:hover:after {
        background-color: #5c2d91;
    }
    
    :root:has(link[href*="fluent-dark.bs5.min.css"]) .accent-link:hover,
    :root:has(link[href*="fluent-dark.bs5.min.css"]) .forgot-password a:hover,
    :root:has(link[href*="fluent-dark.bs5.min.css"]) .new-account a:hover,
    :root:has(link[href*="fluent-light.bs5.min.css"]) .accent-link:hover,
    :root:has(link[href*="fluent-light.bs5.min.css"]) .forgot-password a:hover,
    :root:has(link[href*="fluent-light.bs5.min.css"]) .new-account a:hover {
        color: #0062ae !important;
    }
    
    :root:has(link[href*="fluent-dark.bs5.min.css"]) .accent-link:after,
    :root:has(link[href*="fluent-dark.bs5.min.css"]) .forgot-password a:after,
    :root:has(link[href*="fluent-light.bs5.min.css"]) .accent-link:after,
    :root:has(link[href*="fluent-light.bs5.min.css"]) .forgot-password a:after,
    :root:has(link[href*="fluent-dark.bs5.min.css"]) .accent-link:hover:after,
    :root:has(link[href*="fluent-dark.bs5.min.css"]) .forgot-password a:hover:after,
    :root:has(link[href*="fluent-light.bs5.min.css"]) .accent-link:hover:after,
    :root:has(link[href*="fluent-light.bs5.min.css"]) .forgot-password a:hover:after {
        background-color: #0078d4;
    }

.new-account {
    font-size: 14px;
    color: var(--dx-secondary-text-color, #555555);
}

    .new-account a {
        color: var(--dx-accent-color, #fe7109) !important;
        text-decoration: none;
        font-weight: 600;
        position: relative;
        transition: color 0.3s ease;
        display: inline-block;
    }

.terms-container {
    margin-top: 24px;
    text-align: center;
    font-size: 12px;
    position: relative;
    z-index: 2;
}

    .terms-container a {
        color: var(--dx-secondary-text-color, #555555);
        text-decoration: none;
        position: relative;
    }

.copyright {
    margin-top: 8px;
    color: var(--dx-muted-text-color, #777777);
    font-size: 11px;
    opacity: 0.8;
    letter-spacing: 0.5px;
}

/* Fun Facts Section */
.fun-fact-container {
    padding: 60px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Always white for contrast against the accent gradient background */
    position: relative;
    z-index: 2;
    
    /* Ensure transitions match theme switches */
    transition: background-color 0.3s ease;
}

    .fun-fact-container:before {
        content: '';
        position: absolute;
        top: 40px;
        left: 40px;
        width: 80px;
        height: 80px;
        border-radius: 40%;
        background-color: rgba(255, 255, 255, 0.1);
        z-index: 0;
    }

    .fun-fact-container:after {
        content: '';
        position: absolute;
        bottom: 60px;
        right: 60px;
        width: 120px;
        height: 120px;
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        background-color: rgba(255, 255, 255, 0.05);
        z-index: 0;
    }

.fun-fact {
    max-width: 480px;
    padding: 40px;
    background-color: white; /* Always white for readability */
    color: #333; /* Dark text for contrast */
    border-radius: 15px;
    /* Adjust shadow based on theme type */
    box-shadow: 0 15px 35px color-mix(in srgb, black 20%, transparent);
    animation: fadeIn 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    transform: rotate(-2deg);
    border: none;
    transition: 
        background-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Special handling for dark theme variants - detected by background color */
@media (prefers-color-scheme: dark), 
       (-ms-high-contrast: white-on-black) {
    /* Enhance readability in system dark mode */
    .fun-fact {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    }
}

/* Target DevExpress dark themes specifically */
:root[data-bs-theme="dark"] .fun-fact,
.dxbs-theme-dark .fun-fact,
.dx-blazor-theme-dark .fun-fact {
    /* Special handling for dark themes */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    border: 1px solid color-mix(in srgb, var(--drbiz-border) 30%, transparent);
}

/* 
 * Theme detection system
 * This section detects which DevExpress theme is currently active
 * and adjusts CSS variables accordingly
 */

/* Default theme is Office White */
:root {
    --theme-name: "office-white";
    --is-dark-theme: 0;
}

/* Blazing Dark theme detector */
:root:has(link[href*="blazing-dark.bs5.min.css"]) {
    --theme-name: "blazing-dark";
    --is-dark-theme: 1;
    
    /* Override specific variables for dark theme */
    --drbiz-gradient-bg: linear-gradient(135deg, 
        var(--dx-background-color, #37353d) 0%, 
        color-mix(in srgb, var(--dx-background-color, #37353d) 80%, black) 100%);
    
    /* Theme-specific transparent colors */
    --drbiz-primary-transparent: rgba(155, 23, 226, 0.1);
    --drbiz-primary-ultra-light: rgba(155, 23, 226, 0.05);
}

/* Blazing Berry theme detector */
:root:has(link[href*="blazing-berry.bs5.min.css"]) {
    --theme-name: "blazing-berry";
    --is-dark-theme: 0;
    
    /* Theme-specific transparent colors */
    --drbiz-primary-transparent: rgba(92, 45, 145, 0.1);
    --drbiz-primary-ultra-light: rgba(92, 45, 145, 0.05);
}

/* Purple theme detector */
:root:has(link[href*="purple.bs5.min.css"]) {
    --theme-name: "purple";
    --is-dark-theme: 0;
    
    /* Theme-specific transparent colors */
    --drbiz-primary-transparent: rgba(121, 137, 255, 0.1);
    --drbiz-primary-ultra-light: rgba(121, 137, 255, 0.05);
}

/* Fluent Light theme detector */
:root:has(link[href*="fluent-light.bs5.min.css"]) {
    --theme-name: "fluent-light";
    --is-dark-theme: 0;
    
    /* Theme-specific transparent colors */
    --drbiz-primary-transparent: rgba(0, 120, 212, 0.1);
    --drbiz-primary-ultra-light: rgba(0, 120, 212, 0.05);
}

/* Fluent Dark theme detector */
:root:has(link[href*="fluent-dark.bs5.min.css"]) {
    --theme-name: "fluent-dark";
    --is-dark-theme: 1;
    
    /* Override specific variables for dark theme */
    --drbiz-gradient-bg: linear-gradient(135deg, 
        var(--dx-background-color, #252423) 0%, 
        color-mix(in srgb, var(--dx-background-color, #252423) 80%, black) 100%);
    
    /* Theme-specific transparent colors */
    --drbiz-primary-transparent: rgba(0, 120, 212, 0.1);
    --drbiz-primary-ultra-light: rgba(0, 120, 212, 0.05);
}

/* Element styling with theme awareness */
.fun-fact-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
    border-radius: 50%;
    padding: 0;
    
    /* Forces the SVG to show properly with consistent styling */
    background-color: var(--dx-accent-color, #fe7109) !important;
    background-size: 60% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Creates a clear box to show the icon */
    display: block;
    
    /* Adjust inset shadows based on theme brightness */
    box-shadow: 
        inset 0 -4px 6px rgba(0, 0, 0, 0.1), 
        inset 0 4px 6px rgba(255, 255, 255, 0.2);
        
    /* Smooth transitions between themes */
    transition: 
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Force specific color for fun-fact-icon to ensure SVG visibility */
.fun-fact-icon {
    background-color: var(--dx-accent-color, #fe7109) !important;
}

/* Fix shadow for all themes */
.fun-fact-icon {
    box-shadow: 
        inset 0 -4px 6px rgba(0, 0, 0, 0.2), 
        inset 0 4px 6px rgba(255, 255, 255, 0.2);
}

/* Dark theme specific adjustments */
:root[data-bs-theme="dark"] .fun-fact-icon,
:root[var(--is-dark-theme="1")] .fun-fact-icon,
:root:has(link[href*="blazing-dark.bs5.min.css"]) .fun-fact-icon,
:root:has(link[href*="fluent-dark.bs5.min.css"]) .fun-fact-icon {
    box-shadow: 
        inset 0 -4px 6px rgba(0, 0, 0, 0.3), 
        inset 0 4px 6px rgba(255, 255, 255, 0.1);
    background-color: var(--dx-accent-color, #9b17e2) !important;
}

/* Special background for different themes */
:root:has(link[href*="blazing-dark.bs5.min.css"]) .login-right-section {
    background: linear-gradient(135deg, var(--dx-accent-color, #9b17e2) 0%, #4e0a72 100%);
}

:root:has(link[href*="blazing-berry.bs5.min.css"]) .login-right-section {
    background: linear-gradient(135deg, var(--dx-accent-color, #5c2d91) 0%, #341752 100%);
}

:root:has(link[href*="purple.bs5.min.css"]) .login-right-section {
    background: linear-gradient(135deg, var(--dx-accent-color, #7989ff) 0%, #4254cc 100%);
}

/* Theme-specific icon background colors to ensure SVG visibility */
:root:has(link[href*="blazing-dark.bs5.min.css"]) .fun-fact-icon {
    background-color: #9b17e2 !important;  
}

:root:has(link[href*="blazing-berry.bs5.min.css"]) .fun-fact-icon {
    background-color: #5c2d91 !important;
}

:root:has(link[href*="office-white.bs5.min.css"]) .fun-fact-icon {
    background-color: #fe7109 !important;
}

:root:has(link[href*="purple.bs5.min.css"]) .fun-fact-icon {
    background-color: #7989ff !important;
}

:root:has(link[href*="fluent-dark.bs5.min.css"]) .fun-fact-icon {
    background-color: #0078d4 !important;
}

:root:has(link[href*="fluent-light.bs5.min.css"]) .fun-fact-icon {
    background-color: #0078d4 !important;
}

/* Adaptive fun fact card for dark themes */
:root[var(--is-dark-theme="1")] .fun-fact {
    background-color: #ffffff;
    color: var(--dx-secondary-text-color, #444444);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.fact-1 .fun-fact-icon {
    /* Barcode scanning - using barcode icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.fact-2 .fun-fact-icon {
    /* RFID systems - using tag/chip icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.fact-3 .fun-fact-icon {
    /* Warehouse management - using checkmark for accuracy */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.fact-4 .fun-fact-icon {
    /* Did you know? - using information icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.fact-5 .fun-fact-icon {
    /* Manufacturing efficiency - using factory/building icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4'%3E%3C/path%3E%3C/svg%3E") !important;
}

.fact-6 .fun-fact-icon {
    /* Real-time tracking - using clock icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.fact-7 .fun-fact-icon {
    /* Labor costs reduction - using currency/money icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.fact-8 .fun-fact-icon {
    /* RFID technology - using wireless/signal icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0'%3E%3C/path%3E%3C/svg%3E") !important;
}

.fun-fact-text {
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
    font-weight: 400;
    color: #333; /* Always dark for readability */
    position: relative;
    z-index: 2;
}

/* Decorative Elements */
.shape {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}

.shape-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle at center, rgba(254, 113, 9, 0.15) 0%, rgba(254, 113, 9, 0) 70%);
    top: -150px;
    right: 20%;
    animation: float 15s ease-in-out infinite;
}

.shape-2 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at center, rgba(254, 113, 9, 0.1) 0%, rgba(254, 113, 9, 0) 70%);
    bottom: 50px;
    left: 10%;
    animation: float 20s ease-in-out infinite reverse;
}

.shape-3 {
    width: 150px;
    height: 150px;
    background: radial-gradient(circle at center, rgba(254, 113, 9, 0.12) 0%, rgba(254, 113, 9, 0) 70%);
    top: 40%;
    left: 25%;
    animation: float 25s ease-in-out infinite;
}

/* Theme-specific shapes */
:root:has(link[href*="blazing-dark.bs5.min.css"]) .shape-1 {
    background: radial-gradient(circle at center, rgba(155, 23, 226, 0.15) 0%, rgba(155, 23, 226, 0) 70%);
}

:root:has(link[href*="blazing-dark.bs5.min.css"]) .shape-2 {
    background: radial-gradient(circle at center, rgba(155, 23, 226, 0.1) 0%, rgba(155, 23, 226, 0) 70%);
}

:root:has(link[href*="blazing-dark.bs5.min.css"]) .shape-3 {
    background: radial-gradient(circle at center, rgba(155, 23, 226, 0.12) 0%, rgba(155, 23, 226, 0) 70%);
}

:root:has(link[href*="blazing-berry.bs5.min.css"]) .shape-1,
:root:has(link[href*="blazing-berry.bs5.min.css"]) .shape-2,
:root:has(link[href*="blazing-berry.bs5.min.css"]) .shape-3 {
    background: radial-gradient(circle at center, rgba(92, 45, 145, 0.15) 0%, rgba(92, 45, 145, 0) 70%);
}

:root:has(link[href*="purple.bs5.min.css"]) .shape-1,
:root:has(link[href*="purple.bs5.min.css"]) .shape-2,
:root:has(link[href*="purple.bs5.min.css"]) .shape-3 {
    background: radial-gradient(circle at center, rgba(121, 137, 255, 0.15) 0%, rgba(121, 137, 255, 0) 70%);
}

:root:has(link[href*="fluent-dark.bs5.min.css"]) .shape-1,
:root:has(link[href*="fluent-dark.bs5.min.css"]) .shape-2,
:root:has(link[href*="fluent-dark.bs5.min.css"]) .shape-3,
:root:has(link[href*="fluent-light.bs5.min.css"]) .shape-1,
:root:has(link[href*="fluent-light.bs5.min.css"]) .shape-2,
:root:has(link[href*="fluent-light.bs5.min.css"]) .shape-3 {
    background: radial-gradient(circle at center, rgba(0, 120, 212, 0.15) 0%, rgba(0, 120, 212, 0) 70%);
}

.form-decoration-circle {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--drbiz-primary-transparent);
    opacity: 0.5;
    top: -20px;
    right: -20px;
    z-index: 0;
}

.form-decoration-square {
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: var(--drbiz-primary-transparent);
    opacity: 0.4;
    transform: rotate(45deg);
    bottom: -30px;
    left: -30px;
    z-index: 0;
}

/* Adjust decorative elements for dark themes for better visibility */
:root:has(link[href*="blazing-dark.bs5.min.css"]) .form-decoration-circle,
:root:has(link[href*="fluent-dark.bs5.min.css"]) .form-decoration-circle,
:root:has(link[href*="blazing-dark.bs5.min.css"]) .form-decoration-square,
:root:has(link[href*="fluent-dark.bs5.min.css"]) .form-decoration-square {
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 0.7;
}

.fact-decoration-1 {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 30% 70% 50% 50% / 50% 30% 70% 50%;
    background-color: rgba(255, 255, 255, 0.05);
    top: 15%;
    left: 10%;
    animation: morph 8s linear infinite alternate;
}

.fact-decoration-2 {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    background-color: rgba(255, 255, 255, 0.05);
    bottom: 20%;
    right: 15%;
    animation: morph 12s linear infinite alternate-reverse;
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes morph {
    0% {
        border-radius: 30% 70% 50% 50% / 50% 30% 70% 50%;
    }

    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }

    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }

    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }

    100% {
        border-radius: 30% 70% 50% 50% / 50% 30% 70% 50%;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) rotate(-2deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) rotate(-2deg);
    }
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .login-left-section {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .login-right-section {
        flex: 0 0 50%;
        max-width: 50%;
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
    }

    .fun-fact-container {
        padding: 24px;
    }

    .fun-fact {
        padding: 30px;
        max-width: 90%;
    }
}

@media (max-width: 992px) {
    .login-container {
        flex-direction: column;
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        max-width: 100vw;
    }

    .drbiz-login-page {
        height: 100% !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .login-left-section {
        flex: 1;
        max-width: 100%;
        position: relative;
        width: 100%;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .login-right-section {
        display: none; /* Hide fun facts on mobile */
    }

    .login-form-container {
        padding: 0;
        width: 100%;
        margin: 0 auto;
        max-width: 480px;
    }

    .login-form {
        margin-top: 10px;
        margin-bottom: 0;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .shape-1, .shape-2, .shape-3 {
        display: none;
    }
}

@media (max-width: 768px) {
    .login-left-section {
        padding: 20px 16px;
        height: 100%;
    }

    .login-form-container h1 {
        font-size: 24px;
    }

    .login-form-container h3 {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .login-form {
        padding: 20px;
        margin-top: 0;
    }

    /* Fix for full page display */
    #logon-template-component {
        height: 100% !important;
        overflow: hidden;
    }

    .app {
        height: 100% !important;
        overflow: hidden;
    }
}

/* Additional mobile enhancements */
@media (max-width: 576px) {
    .login-left-section {
        padding: 16px;
    }

    .login-form-container {
        margin-top: 0;
    }

        .login-form-container h1 {
            font-size: 22px;
        }

        .login-form-container h3 {
            font-size: 14px;
            margin-bottom: 12px;
        }

    .login-form {
        padding: 16px;
        margin-top: 0;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .login-options {
        flex-direction: column;
        gap: 8px;
    }

    .login-form :deep(.form-group) {
        margin-bottom: 12px;
    }

    .login-form :deep(.form-control) {
        padding: 8px;
    }

    .login-form :deep(.dxbl-btn) {
        padding: 8px;
    }

    .terms-container {
        margin-top: 12px;
    }

    .login-logo-centered .header-logo {
        width: 180px;
        height: 60px;
    }

    .login-logo-centered {
        margin-bottom: 20px;
    }

    /* Fix height on small devices */
    .drbiz-login-page, #logon-template-component, .app, .login-container {
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        overflow: hidden;
    }
}