h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: start;
}

/* Advanced Login Design */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    /* Light grey-blue background */
    padding: 1rem;
}

.login-card {
    display: flex;
    background-color: white;
    width: 100%;
    max-width: 900px;
    height: 600px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
}

.login-left {
    flex: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.login-right {
    flex: 1;
    background: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%);
    /* Fresh blue gradient */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-direction: column;
    text-align: center;
    padding: 2rem;
}

/* The Curve */
.login-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50px;
    /* Pull it to the left to overlap */
    width: 100px;
    /* Width of the curve area */
    height: 100%;
    background-color: white;
    /* Match the left panel background */
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    /* This creates a simple convex curve. 
       For a more complex "S" curve as seen in some demos, SVG clip-path is better.
       But "Curve on the right" of the PAGE usually means the right panel has the curve.
       The user said "curve on the right of the page". 
       Wait, "put the curve on the right of the page".
       Does that mean the curve IS on the right edge of the screen?
       Or the right panel is curved?
       "make the login screen like this... put the curve on the right of the page"
       The linked demo has a curve separating the two panels.
       I will assume they mean the separator curve should be on the right side of the split (i.e. the right panel has a curved edge).
       Let's stick to a nice wave separator between white and blue.
    */
    display: none;
    /* Disabling simple border-radius approach for clip-path below */
}

.login-right {
    /* Wave clip-path for the left edge of the right panel */
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
    /* Better wave shape if possible, but polygon is safe. */
    /* Let's try a distinct curve using a hardcoded path if browser support allows, or just a swooping polygon */
    clip-path: path('M 60 0 L 1000 0 L 1000 1000 L 0 1000 C 40 700 100 300 60 0 Z');
    /* Note: 'path' support in CSS clip-path is good in modern browsers. 
        However, coordinates are absolute (px) or relative to bounding box?
        In CSS shapes, path() takes unitless numbers which are pixels? No, usually path requires specific viewBox context or it's tricky responsively.
        Let's stick to a safe, beautiful Border Radius trick or SVG background.
     */
    clip-path: none;
    /* Reset */
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    .login-card {
        flex-direction: column;
        height: auto;
        border-radius: 0;
        /* Full width on mobile often looks better without corners, or keep them small */
        width: 100%;
        max-width: 100%;
        box-shadow: none;
        /* Simplify on mobile */
    }

    .login-left {
        padding: 1.5rem;
        /* Reduce padding */
    }

    .login-right {
        display: none;
        /* Keep hidden to focus on login */
    }

    .login-page {
        padding: 0;
        /* Remove outside padding on mobile to use full screen */
        background-color: white;
        /* Seamless look */
        align-items: flex-start;
        /* Start from top */
    }
}

/* SVG separator approach (Cleanest) */
.curve-separator {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    /* Overlap slightly */
    height: 100%;
    width: auto;
    z-index: 1;
    color: white;
    /* The "fill" of the curve, matching the left side bg */
}

/* ==========================================================================
   GLOBAL SAAS UI OVERHAUL (Light Mode & Indigo/Teal)
   ========================================================================== */

:root {
    --primary-color: #4F46E5;
    --primary-hover: #4338CA;
    --secondary-color: #0EA5E9;
    --secondary-hover: #0284C7;
    --danger-color: #EF4444;
    --danger-hover: #DC2626;
    --bg-main: #F8FAFC;
    --text-main: #1E293B;
    --text-muted: #64748B;
    --card-bg: #FFFFFF;
    --border-color: #E2E8F0;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
}

/* Typography Enhancements */
.gradient-text {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gradient-text-danger {
    background: linear-gradient(135deg, #EF4444, #B91C1C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* Cards */
.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.alert-card-active {
    border-left: 4px solid var(--danger-color);
    background: linear-gradient(to right, #FEF2F2, #FFFFFF);
}

/* Buttons */
.action-btn {
    background-color: var(--primary-color);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-block;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.action-btn:hover {
    background-color: var(--primary-hover);
    color: #FFFFFF;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.secondary-btn {
    background-color: #FFFFFF;
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-block;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.secondary-btn:hover {
    background-color: var(--bg-main);
    color: var(--primary-hover);
    border-color: var(--primary-color);
}

.danger-btn {
    background-color: var(--danger-color);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-block;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.danger-btn:hover {
    background-color: var(--danger-hover);
    color: #FFFFFF;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Floating Alerts */
.floating-alert-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 350px;
}

.floating-alert {
    background: var(--card-bg);
    border: 1px solid var(--danger-color);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    animation: slideInUp 0.3s ease forwards;
}

.floating-alert .close-alert {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: var(--text-muted);
    cursor: pointer;
}

.floating-alert .close-alert:hover {
    color: var(--danger-color);
}

/* Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.micro-animation {
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* Fix navbar styling */
.navbar.is-saas {
    background-color: #FFFFFF;
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 0;
    position: sticky;
    top: 0;
    z-index: 30;
}

.navbar.is-saas .navbar-item {
    font-weight: 500;
    color: var(--text-muted);
}

.navbar.is-saas .navbar-item:hover,
.navbar.is-saas .navbar-item.is-active {
    color: var(--primary-color);
    background-color: transparent;
}

.navbar-brand .navbar-item {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* -- Coming Soon page (.cs-*) --
   Kept in app.css (not scoped) so it works reliably across full-page loads
   AND Blazor enhanced navigation. Remove this block after the public launch. */

.cs-page {
    display: flex;
    min-height: 100vh;
    background: var(--bg-main, #F8FAFC);
    font-family: 'Inter', system-ui, sans-serif;
}

/* -- Left panel ---------------------------------------------------------- */
.cs-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
}

.cs-content {
    max-width: 480px;
    width: 100%;
    animation: slideInUp 0.5s ease both;
}

.cs-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2.5rem;
}

.cs-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.cs-lang-btn {
    background: transparent;
    border: 1.5px solid rgba(79, 70, 229, 0.3);
    border-radius: 8px;
    color: var(--primary-color, #4F46E5);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.8rem;
    font-family: 'Inter', system-ui, sans-serif;
    transition: background 0.18s, border-color 0.18s;
    flex-shrink: 0;
}

.cs-lang-btn:hover {
    background: rgba(79, 70, 229, 0.08);
    border-color: var(--primary-color, #4F46E5);
}

.cs-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4F46E5, #0EA5E9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.cs-brand-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main, #1E293B);
    letter-spacing: -0.5px;
}

.cs-headline {
    font-family: 'Outfit', sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-main, #1E293B);
    margin: 0 0 1rem;
    letter-spacing: -0.5px;
}

.cs-sub {
    color: var(--text-muted, #64748B);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.cs-launch-date {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.18);
    border-radius: 8px;
    padding: 0.4rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4F46E5;
    margin-bottom: 2rem;
}

.cs-countdown {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.cs-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    min-width: 70px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}

.cs-num {
    font-family: 'Outfit', monospace;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main, #1E293B);
    line-height: 1;
    letter-spacing: -1px;
}

.cs-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748B);
    margin-top: 0.25rem;
}

.cs-sep {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-muted, #64748B);
    align-self: flex-start;
    padding-top: 0.5rem;
}

.cs-blocked-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: rgba(239, 68, 68, 0.07);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    font-size: 0.9rem;
    color: #B91C1C;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.cs-blocked-callout i {
    margin-top: 2px;
    flex-shrink: 0;
}

.cs-invite-link {
    display: inline-block;
    color: var(--text-muted, #64748B);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s ease;
}

.cs-invite-link:hover { color: var(--primary-color, #4F46E5); }
.cs-invite-link strong { color: var(--primary-color, #4F46E5); }

/* -- Right gradient panel ------------------------------------------------ */
.cs-right {
    width: 44%;
    background: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.cs-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.cs-hero-icon {
    font-size: 5rem;
    color: rgba(255,255,255,0.95);
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18));
    animation: csHeroFloat 4s ease-in-out infinite;
}

.cs-hero-rings {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cs-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
}

.cs-ring--1 { width: 260px; height: 260px; }
.cs-ring--2 { width: 420px; height: 420px; }
.cs-ring--3 { width: 580px; height: 580px; }

.cs-hero-tagline {
    color: rgba(255,255,255,0.9);
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

@keyframes csHeroFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
}

/* -- Mobile -------------------------------------------------------------- */
@media (max-width: 768px) {
    .cs-page         { flex-direction: column; }
    .cs-right        { width: 100%; min-height: 200px; order: -1; }
    .cs-left         { padding: 2rem 1.25rem; }
    .cs-hero-icon    { font-size: 3.5rem; }
    .cs-hero-tagline { font-size: 1.1rem; }
    .cs-headline     { font-size: 1.9rem; }
    .cs-countdown    { flex-wrap: wrap; gap: 0.4rem; }
    .cs-unit         { min-width: 58px; padding: 0.55rem 0.7rem; }
    .cs-num          { font-size: 1.5rem; }
}