/*
 * OneCare – Account / Login styling (LeptonX Lite + ABP Account MVC).
 * Scoped to .abp-account-layout so the rest of the app is unaffected.
 */

.abp-account-layout {
    --oc-login-primary: #2563eb;
    --oc-login-primary-hover: #1d4ed8;
    --oc-login-surface: #ffffff;
    --oc-login-muted: #64748b;
    --oc-login-border: #e2e8f0;
    background-image: url("/images/login-bg-img-dim.svg") !important;
}

/* Full page: SVG artwork instead of flat dark / gradient shell */
.abp-account-layout .lpx-login-area {
    background-color: transparent !important;
    min-height: 100vh;
}

.abp-account-layout .lpx-login-area .lpx-login-bg {
    background-image: url("/images/login-bg-img-dim.svg") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 1;
    min-height: 100vh !important;
}

.abp-account-layout .lpx-layout-login {
    background-color: transparent !important;
    backdrop-filter: none;
}

.abp-account-layout .lpx-content-container {
    background-image: none !important;
    background-color: transparent !important;
}

/* Center column */
.abp-account-layout .lpx-login-text-area {
    margin-left: auto;
    margin-right: auto;
    max-width: 28rem;
}

.abp-account-layout .lpx-login-form-max-width {
    width: 100% !important;
    max-width: 28rem !important;
}

/* Cards: single visual language (tenant + login) */
.abp-account-layout .card {
    border: 1px solid var(--oc-login-border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.07);
    background: var(--oc-login-surface);
    overflow: hidden;
}

.abp-account-layout .card:not(:last-child) {
    margin-bottom: 1rem;
}

.abp-account-layout .card-body {
    padding: 1.5rem 1.75rem;
}

@media (min-width: 576px) {
    .abp-account-layout .card-body {
        padding: 1.75rem 2rem;
    }
}

.abp-account-layout .lpx-login-title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    color: #0f172a !important;
}

/* Language selector */
.abp-account-layout .lpx-login-area .lpx-language-selection {
    right: 1.25rem;
    top: 1.25rem;
}

.abp-account-layout .lpx-login-area .lpx-language-selection .form-select,
.abp-account-layout .lpx-language-selection select {
    border-radius: 999px;
    border-color: var(--oc-login-border);
    font-size: 0.875rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Fields */
.abp-account-layout .form-control,
.abp-account-layout .form-select {
    border-radius: 10px;
    border-color: #cbd5e1;
    background-color: #fff;
    min-height: calc(2.75rem + 2px);
}

.abp-account-layout .form-control:focus {
    border-color: var(--oc-login-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

.abp-account-layout label,
.abp-account-layout .form-label {
    color: #334155;
    font-weight: 500;
    font-size: 0.875rem;
}

/* Primary / outline actions – one blue family */
.abp-account-layout .btn-primary {
    background-color: var(--oc-login-primary);
    border-color: var(--oc-login-primary);
    border-radius: 10px;
    font-weight: 600;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.abp-account-layout .btn-primary:hover,
.abp-account-layout .btn-primary:focus {
    background-color: var(--oc-login-primary-hover);
    border-color: var(--oc-login-primary-hover);
}

.abp-account-layout .btn-outline-primary {
    color: var(--oc-login-primary);
    border-color: rgba(37, 99, 235, 0.4);
    border-radius: 10px;
}

.abp-account-layout .btn-outline-primary:hover {
    background-color: rgba(37, 99, 235, 0.08);
    color: var(--oc-login-primary-hover);
    border-color: var(--oc-login-primary);
}

.abp-account-layout a:not(.btn) {
    color: var(--oc-login-primary);
    text-decoration: none;
}

.abp-account-layout a:not(.btn):hover {
    color: var(--oc-login-primary-hover);
    text-decoration: underline;
}

/* Password visibility control – neutral icon, not contrasting purple block */
.abp-account-layout .show-pass-icon {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--oc-login-muted);
}

.abp-account-layout .position-relative .form-control {
    padding-right: 2.75rem;
}

/* Branding visible on login */
.abp-account-layout .lpx-login-brand-text,
.abp-account-layout .lpx-brand-logo.lpx-login-logo {
    display: block !important;
}

.abp-account-layout .lpx-brand-name.lpx-login-name {
    color: #0f172a !important;
}

.abp-account-layout .text-muted,
.abp-account-layout small.text-muted {
    color: var(--oc-login-muted) !important;
}