/* =========================================
   THEME: MIDNIGHT PRO (High Contrast)
   ========================================= */

/* 1. GLOBAL RESET */
html, body {
    background-color: #020617 !important;
    /* This creates a soft glow in the center that fades to black at the edges */
    background-image: radial-gradient(circle at center, #1e293b 0%, #020617 100%) !important;
    background-size: cover;
    background-attachment: fixed; /* Ensures the glow stays centered when scrolling */
    min-height: 100vh;
    color: #cbd5e1; /* Light Slate Text */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
    font-weight: 700;
}

/* =========================================
   2. SIDEBAR & NAVIGATION
   ========================================= */
.sidebar {
    background-color: #1e293b !important; /* Lighter Slate (Distinct from body) */
    background-image: none !important;
    border-right: 1px solid #334155; /* Subtle separator */
    width: 280px; /* Slightly wider for better spacing */
}

/* Fix Icon Alignment: Use Flexbox */
.nav-item .nav-link {
    display: flex !important; /* FORCE FLEX */
    align-items: center !important; /* Vertically Center Items */
    gap: 12px; /* Consistent space between icon and text */

    color: #94a3b8 !important; /* Muted Text */
    padding: 0.8rem 1.5rem; /* More breathing room */
    font-weight: 500;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

    /* Hover State */
    .nav-item .nav-link:hover {
        color: #ffffff !important;
        background-color: #334155 !important;
    }

    /* Active State: Electric Blue */
    .nav-item .nav-link.active {
        color: #60a5fa !important; /* Bright Blue Text */
        background-color: rgba(59, 130, 246, 0.1) !important; /* Subtle Blue Tint */
        border-left-color: #60a5fa !important; /* Blue Bar */
    }

/* Icons follow the text color */
.bi {
    font-size: 1.2rem;
    line-height: 1; /* Prevents icon from being taller than text */
    margin: 0; /* Remove old margins since we use gap */
}

/* =========================================
   3. CARDS & FORMS (The "Surface" Layer)
   ========================================= */
/* Cards are the same color as sidebar, creating a "floating" effect on the dark body */
.auth-card, .card {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    border-radius: 0.75rem;
}

/* Inputs: Darker than the card to look "inset" */
.form-control {
    background-color: #0f172a; /* Darker Slate */
    border: 1px solid #475569;
    color: #f8fafc;
    padding: 0.75rem;
}

    .form-control:focus {
        background-color: #0f172a;
        border-color: #3b82f6; /* Blue Focus */
        color: white;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
    }

/* Floating Labels */
.form-floating label {
    color: #94a3b8;
}

/* Floating Label Animation Fixes */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #cbd5e1;
    background-color: transparent;
    opacity: 1;
}

/* Hide placeholder when inactive */
.form-floating > .form-control:not(:focus)::placeholder {
    color: transparent;
}

/* =========================================
   4. BUTTONS & UTILITIES
   ========================================= */
.btn-primary {
    background-color: #3b82f6; /* Electric Blue */
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.7rem 1.2rem;
    transition: background-color 0.2s;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); /* Soft blue glow */
    border: none;
}

    .btn-primary:hover {
        background-color: #2563eb; /* Darker Blue */
        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
        transform: translateY(-1px); /* Slight lift on hover */
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
    }

a {
    color: #60a5fa;
    text-decoration: none;
}

    a:hover {
        color: #93c5fd;
    }

.text-secondary {
    color: #94a3b8 !important;
}

/* Error Bar */
#blazor-error-ui {
    background: #ef4444;
    color: white;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem;
    position: fixed;
    z-index: 1000;
    display: none;
}

/* Make Input Groups look like one seamless bar */
.input-group-text {
    background-color: #0f172a !important; /* Match the input background */
    border: 1px solid #475569;
    border-right: none; /* Remove the line between icon and text */
    color: #94a3b8;
}

.input-group .form-control {
    border-left: none; /* Remove the left line so it merges with icon */
    padding-left: 0; /* Pull text closer to the icon */
}

/* Ensure the whole group glows blue on focus, not just the right side */
.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control {
    border-color: #3b82f6;
    box-shadow: none; /* We will apply shadow to the group instead if needed, but this usually looks clean */
}

.form-control:disabled, .form-control[readonly] {
    background-color: #0f172a !important; /* Keep the standard dark input bg */
    color: #ffffff !important; /* Pure white text for maximum contrast */
    opacity: 1 !important; /* STOP Bootstrap from fading the element */
    border-color: #334155 !important; /* Ensure border remains visible */
    cursor: not-allowed; /* UI hint that it's not editable */
}

/* Ensure the input-group icon next to a disabled input looks correct */
.input-group:has(:disabled) .input-group-text {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    /* The 'inset' shadow covers the browser's default white background with our dark blue */
    -webkit-box-shadow: 0 0 0 30px #0f172a inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: white;
    transition: background-color 5000s ease-in-out 0s;
}

/* 2. FIX FLOATING LABEL BACKGROUNDS
   Bootstrap tries to put a white box behind the label. We turn that off. */
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: #0f172a !important; /* Match input background */
    color: #cbd5e1 !important; /* Light grey text */
}

/* 3. FIX DISABLED INPUT LABELS (Like Username) */
.form-floating > .form-control:disabled ~ label {
    color: #94a3b8 !important; /* Ensure the text is readable grey, not faint */
    opacity: 1 !important; /* Stop it from being see-through */
}

    /* Remove the white background from disabled labels too */
    .form-floating > .form-control:disabled ~ label::after {
        background-color: #0f172a !important;
    }
/* =========================================
   6. UTILITIES & FIXES
   ========================================= */

/* Remove focus outline on H1 (caused by Blazor's FocusOnNavigate) */
h1:focus {
    outline: none !important;
}