/**
 * Standalone login / registration / password-reset pages.
 * Requires theme-brand.css (CSS variables).
 * html.auth-pages-light: forced light appearance (see _AuthHead.cshtml).
 */

/* Lock light palette on all standalone auth routes (login / register / reset) */
html.auth-pages-light,
html.auth-pages-light.dark {
    color-scheme: light;
    --bg-color: #F8F9FA;
    --surface-color: #FFFFFF;
    --surface-alt: #F1F5F9;
    --text-color: #1A1A1B;
    --muted-color: #64748B;
    --border-color: rgba(15, 23, 42, 0.12);
    --shadow-soft: 0 6px 24px rgba(15, 23, 42, 0.08);
    --input-bg: #FFFFFF;
}

body.auth-standalone {
    margin: 0;
    min-height: 100vh;
    background: var(--surface-alt);
    color: var(--text-color);
}

/* Section wrapper (replaces cyan #0DCAF0) */
.auth-section {
    min-height: 100vh;
    background: var(--surface-alt);
    color: var(--text-color);
    padding: 1.5rem 0;
    background-image: radial-gradient(
        circle at center,
        color-mix(in srgb, var(--muted-color) 14%, transparent) 0.85px,
        transparent 0.85px
    );
    background-size: 22px 22px;
}

/* Card with image + form */
.auth-card-pro {
    background: var(--surface-color);
    border: 1px solid var(--border-color) !important;
    color: var(--text-color);
    border-radius: 0;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.auth-card-pro .card-body {
    color: var(--text-color);
}

.auth-card-pro .text-black,
.auth-card-pro .card-body.text-black {
    color: var(--text-color) !important;
}

.auth-card-pro .form-label {
    color: var(--text-color);
    font-weight: 600;
}

.auth-card-pro .form-control,
.auth-card-pro .form-control-lg,
.auth-card-pro .form-select {
    background: var(--input-bg, var(--surface-color));
    color: var(--text-color);
    border-color: var(--border-color);
}

.auth-card-pro .form-control:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-red) 18%, transparent);
}

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

.auth-card-pro a:not(.btn) {
    color: var(--brand-red);
}

.auth-card-pro a:not(.btn):hover {
    color: var(--brand-red-hover);
}

/* Primary actions: brand (covers btn-info on legacy markup) */
.auth-card-pro .btn-primary,
.auth-card-pro .btn-info {
    background: linear-gradient(135deg, var(--brand-red), color-mix(in srgb, var(--brand-red) 72%, #f6921e 28%)) !important;
    border-color: var(--brand-red) !important;
    color: #fff !important;
}

.auth-card-pro .btn-primary:hover,
.auth-card-pro .btn-info:hover {
    filter: brightness(1.05);
    color: #fff !important;
}

.auth-card-pro .btn-light {
    background: var(--surface-alt);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* Company registration */
.reg-wrap {
    min-height: 100vh;
    padding: 1.5rem 0;
    color: var(--text-color);
}

.reg-card {
    border: 1px solid var(--border-color) !important;
    border-radius: 0;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    background: var(--surface-color);
}

.reg-hero {
    background: linear-gradient(160deg, var(--brand-red), color-mix(in srgb, var(--brand-red) 45%, var(--brand-green) 55%));
    color: #fff;
    padding: 2rem 1.5rem;
    height: 100%;
}

.reg-hero .icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.reg-form {
    padding: 1.75rem;
    background: var(--surface-color);
    color: var(--text-color);
}

.reg-form .form-label {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.875rem;
    margin-bottom: 0.35rem;
}

.reg-form .form-control,
.reg-form .form-select {
    border-radius: 10px;
    background: var(--input-bg, var(--surface-color));
    color: var(--text-color);
    border-color: var(--border-color);
}

.reg-form .form-control:focus,
.reg-form .form-select:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-red) 16%, transparent);
}

.reg-form .input-group-text {
    border-radius: 10px 0 0 10px;
    background: var(--surface-alt);
    color: color-mix(in srgb, var(--brand-red) 52%, var(--muted-color) 48%);
    border-color: var(--border-color);
}

.reg-form .sec-title,
.sec-title {
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    color: var(--muted-color);
    text-transform: uppercase;
    margin: 1rem 0 0.75rem;
    font-weight: 700;
}

.reg-form h4 {
    color: var(--text-color);
}

.reg-card .btn-info {
    background: linear-gradient(135deg, var(--brand-red), color-mix(in srgb, var(--brand-red) 72%, #f6921e 28%)) !important;
    border-color: var(--brand-red) !important;
    color: #fff !important;
}

.reg-card .btn-info:hover {
    filter: brightness(1.05);
    color: #fff !important;
}

.reg-card .btn-light {
    background: var(--surface-alt);
    border-color: var(--border-color);
    color: var(--text-color);
}

.reg-card .btn-light:hover {
    background: color-mix(in srgb, var(--brand-red) 8%, var(--surface-alt));
    border-color: var(--border-color);
    color: var(--text-color);
}

.req {
    color: #ef4444;
}

/* Forgot / reset compact card (no auth-card-pro wrapper class) */
.auth-simple-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color) !important;
    border-radius: 0;
    box-shadow: var(--shadow-soft);
    color: var(--text-color);
}

.auth-simple-card .form-label {
    color: var(--text-color);
    font-weight: 600;
}

.auth-simple-card .form-control,
.auth-simple-card .form-control-lg {
    background: var(--input-bg, var(--surface-color));
    color: var(--text-color);
    border-color: var(--border-color);
}

.auth-simple-card .form-control:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-red) 18%, transparent);
}

.auth-simple-card h5,
.auth-simple-card .text-muted {
    color: var(--muted-color);
}

.auth-simple-card h5.fw-normal {
    color: var(--text-color);
}

.auth-simple-card .btn-info {
    background: linear-gradient(135deg, var(--brand-red), color-mix(in srgb, var(--brand-red) 72%, #f6921e 28%)) !important;
    border-color: var(--brand-red) !important;
    color: #fff !important;
}

.auth-simple-card a {
    color: var(--brand-red);
}

/* ------------------------------------------------------------------ */
/* Bootstrap 5 sync — cards/forms stay on theme in light & dark       */
/* (app.min.css / bootstrap defaults often force white backgrounds) */
/* ------------------------------------------------------------------ */

html {
    color-scheme: light;
}

html.dark:not(.auth-pages-light) {
    color-scheme: dark;
}

body.auth-standalone {
    --bs-body-bg: var(--surface-alt);
    --bs-body-color: var(--text-color);
    --bs-secondary-color: var(--muted-color);
    --bs-tertiary-bg: var(--surface-alt);
    --bs-tertiary-color: var(--muted-color);
    --bs-border-color: var(--border-color);
    --bs-emphasis-color: var(--text-color);
    --bs-heading-color: var(--text-color);
    --bs-card-bg: var(--surface-color);
    --bs-card-cap-bg: var(--surface-alt);
    --bs-card-border-color: var(--border-color);
    --bs-card-color: var(--text-color);
    --bs-form-control-bg: var(--input-bg, var(--surface-color));
    --bs-form-control-color: var(--text-color);
    --bs-form-control-border-color: var(--border-color);
    --bs-form-select-bg: var(--input-bg, var(--surface-color));
    --bs-form-select-color: var(--text-color);
    --bs-form-select-border-color: var(--border-color);
    --bs-input-bg: var(--input-bg, var(--surface-color));
    --bs-input-color: var(--text-color);
    --bs-input-border-color: var(--border-color);
    --bs-link-color: var(--brand-red);
    --bs-link-hover-color: var(--brand-red-hover);
}

body.auth-standalone .card {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

body.auth-standalone .card-body,
body.auth-standalone .card-header,
body.auth-standalone .card-footer {
    background-color: transparent !important;
    color: inherit;
}

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

body.auth-standalone .form-control,
body.auth-standalone .form-select,
body.auth-standalone .form-control-lg {
    background-color: var(--input-bg, var(--surface-color)) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

body.auth-standalone .form-control:focus,
body.auth-standalone .form-select:focus,
body.auth-standalone .form-control-lg:focus {
    background-color: var(--input-bg, var(--surface-color)) !important;
    color: var(--text-color) !important;
    border-color: var(--brand-red) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-red) 18%, transparent) !important;
}

body.auth-standalone .input-group-text {
    background-color: var(--surface-alt) !important;
    color: color-mix(in srgb, var(--brand-red) 52%, var(--muted-color) 48%) !important;
    border-color: var(--border-color) !important;
}

body.auth-standalone .btn-info,
body.auth-standalone .btn-primary {
    background: linear-gradient(135deg, var(--brand-red), color-mix(in srgb, var(--brand-red) 72%, #f6921e 28%)) !important;
    border-color: var(--brand-red) !important;
    color: #fff !important;
}

body.auth-standalone .btn-info:hover,
body.auth-standalone .btn-primary:hover {
    filter: brightness(1.05);
    color: #fff !important;
}

body.auth-standalone .btn-light {
    background-color: var(--surface-alt) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.auth-standalone .btn-light:hover {
    background-color: color-mix(in srgb, var(--brand-red) 8%, var(--surface-alt)) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.auth-standalone .text-info {
    color: var(--brand-red) !important;
}

body.auth-standalone .alert-success {
    background-color: color-mix(in srgb, var(--brand-green) 16%, var(--surface-alt)) !important;
    color: var(--text-color) !important;
    border-color: color-mix(in srgb, var(--brand-green) 30%, var(--border-color)) !important;
}

body.auth-standalone .alert-danger {
    background-color: color-mix(in srgb, var(--brand-red) 12%, var(--surface-alt)) !important;
    color: var(--text-color) !important;
    border-color: color-mix(in srgb, var(--brand-red) 28%, var(--border-color)) !important;
}

/* Headings inside cards (signup titles sometimes inherit wrong color) */
body.auth-standalone .card h5,
body.auth-standalone .card h4,
body.auth-standalone .card h3 {
    color: var(--text-color) !important;
}

/* Login page: dotted background still respects theme when not inside .auth-section */
body.auth-standalone.login-page-bg {
    background-color: var(--surface-alt) !important;
    background-image: radial-gradient(
        circle at center,
        color-mix(in srgb, var(--muted-color) 18%, transparent) 0.85px,
        transparent 0.85px
    ) !important;
    background-size: 22px 22px !important;
    color: var(--text-color) !important;
}