/* ==========================================================================
   Auth Branding & Clean Minimalist Background Styles
   Light Airy Backdrop with Soft Elegant Radial Geometry Waves & Rings
   Clean White Floating Card with Dual Brand Color Top Stripe (Blue & Green)
   ========================================================================== */

:root {
    --auth-brand-blue: #025aa9;
    --auth-brand-blue-hover: #014c8f;
    --auth-brand-green: #398a26;
}

/* 
   Backdrop (Option 2):
   Clean light radial gradient with soft abstract rings, diagonal plane, and ribbon.
*/
html:has(body.auth-page),
body.auth-page,
.auth-page .authentication-wrapper {
    background: transparent !important;
    position: relative;
    min-height: 100vh;
}

body.auth-page {
    background-color: #f7f9fc !important;
    font-family: var(--bs-font-sans-serif, "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    margin: 0;
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Background container with radial gradients */
.auth-bg-decorations {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    background: 
        radial-gradient(ellipse at 15% 20%, #e5f0fa 0%, transparent 48%),
        radial-gradient(ellipse at 90% 90%, #eef5e8 0%, transparent 42%),
        #f8fafc;
}

/* Architecture: Large top-right soft concentric blue ring */
.auth-architecture {
    position: absolute;
    width: 700px;
    height: 700px;
    top: -400px;
    right: -220px;
    border: 80px solid rgba(0, 100, 181, 0.035);
    border-radius: 50%;
    transform: none;
    background: none;
    pointer-events: none;
}

.auth-architecture:after {
    content: "";
    position: absolute;
    inset: 45px;
    border: 1px solid rgba(0, 100, 181, 0.1);
    border-radius: 50%;
}

/* Plane: Bottom-left angled transparent plane */
.auth-plane {
    position: absolute;
    width: 580px;
    height: 580px;
    bottom: -370px;
    left: -170px;
    transform: rotate(35deg);
    border-radius: 70px;
    background: linear-gradient(140deg, rgba(0, 100, 181, 0.08) 0%, rgba(0, 100, 181, 0.01) 100%);
    border: 1px solid rgba(0, 100, 181, 0.1);
    pointer-events: none;
}

/* Ribbon: Delicate green concentric ring on the right */
.auth-ribbon {
    position: absolute;
    width: 560px;
    height: 560px;
    right: -360px;
    bottom: 50px;
    border: 1px solid rgba(116, 181, 62, 0.2);
    border-radius: 50%;
    transform: none;
    pointer-events: none;
}

.auth-ribbon:after {
    content: "";
    position: absolute;
    inset: 48px;
    border: 1px solid rgba(116, 181, 62, 0.12);
    border-radius: 50%;
}

/* Hide legacy ambient blob shapes */
.authentication-wrapper::before,
.authentication-wrapper::after {
    display: none !important;
}

/* Clean up any default template purple geometric pseudo shapes */
.authentication-wrapper.authentication-basic .authentication-inner:before,
.authentication-wrapper.authentication-basic .authentication-inner:after {
    display: none !important;
}

/* Inner container */
.authentication-wrapper.authentication-basic .authentication-inner {
    max-width: 460px !important;
    position: relative;
    z-index: 1;
}

/* 
   Login Card:
   Crisp pure white, softly rounded (18px), with an ultra-smooth elegant floating shadow.
*/
.authentication-basic .card {
    background-color: #ffffff !important;
    border: 1px solid #e2e9f1 !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 70px rgba(24, 63, 103, 0.08) !important;
    overflow: hidden;
    position: relative;
}

/* 
   Card Top Stripe:
   Horizontal gradient bar exactly matching the logo chevron from Royal Blue into Vivid Green.
*/
.authentication-basic .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #015dab 0%, #037bdd 50%, #29a071 80%, #4ea525 100%);
    z-index: 2;
}

/* Card padding & spacing adjustments */
.authentication-wrapper.authentication-basic .card-body {
    padding: 2.75rem 2.5rem !important;
}

/* App Logo sizing */
.authentication-basic .app-brand img {
    max-height: 48px;
    width: auto;
}

/* Headings & Text */
.authentication-basic h4 {
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 1.55rem !important;
    letter-spacing: -0.02em;
}

.authentication-basic p {
    color: #64748b !important;
    font-size: 0.925rem;
}

/* Labels */
.authentication-basic .form-label {
    color: #334155 !important;
    font-size: 0.86rem !important;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

/* Inputs & Input Groups */
.authentication-basic .form-control {
    border: 1px solid #dbe3eb !important;
    border-radius: 8px !important;
    font-size: 0.925rem;
    padding: 0.6rem 0.95rem;
    color: #334155;
    background-color: #ffffff;
    transition: all 0.2s ease-in-out;
}

.authentication-basic .input-group-text {
    border: 1px solid #dbe3eb !important;
    background-color: #ffffff !important;
    color: #94a3b8;
    border-radius: 8px;
}

.authentication-basic .form-control:focus,
.authentication-basic .input-group:focus-within .form-control,
.authentication-basic .input-group:focus-within .input-group-text {
    border-color: #015dab !important;
}

.authentication-basic .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(1, 93, 171, 0.12) !important;
}

/* Checkbox */
.authentication-basic .form-check-input {
    border-color: #cbd5e1 !important;
    border-radius: 4px;
}

.authentication-basic .form-check-input:checked {
    background-color: #015dab !important;
    border-color: #015dab !important;
}

.authentication-basic .form-check-label {
    color: #475569 !important;
    font-size: 0.875rem;
}

/* Forgot password link */
.authentication-basic a:not(.btn) {
    color: #015dab !important;
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.authentication-basic a:not(.btn):hover {
    color: #013f75 !important;
    text-decoration: underline;
}

/* Primary Button (Always #005192, No color change on hover, click, or other mouse events) */
.btn-primary,
.btn-custom-primary,
.btn-submit,
a.btn-primary,
a.btn-custom-primary,
button.btn-primary,
button.btn-custom-primary,
.btn.btn-primary,
.btn.btn-custom-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-custom-primary:hover,
.btn-custom-primary:focus,
.btn-custom-primary:focus-visible,
.btn-custom-primary:active,
.btn-custom-primary.active {
    background-color: #005192 !important;
    border-color: #005192 !important;
    color: #ffffff !important;
    font-family: var(--bs-font-sans-serif, "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 0.65rem 1rem !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.btn-primary *,
.btn-primary:hover *,
.btn-primary:focus *,
.btn-primary:active *,
.btn-custom-primary *,
.btn-custom-primary:hover *,
.btn-custom-primary:focus *,
.btn-custom-primary:active * {
    color: #ffffff !important;
}

/* All buttons and link buttons do not change color on hover */
.btn:hover,
button.btn:hover,
a.btn:hover,
a[role="button"]:hover,
button:not(.btn-close):hover {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

/* Secure footer text badge */
.auth-footer-badge {
    color: #64748b;
    font-size: 0.8rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.auth-footer-badge i {
    font-size: 0.95rem;
    color: #94a3b8;
}