/* Authentication appearance. Layout lives in experience.css; colors come from site.css. */
.auth-page,
.password-page {
    color: var(--text);
    background: var(--canvas);
}

.auth-visual {
    color: var(--on-brand);
    background: var(--brand-purple);
}

.auth-visual :is(h2, strong) {
    color: var(--on-brand);
}

.auth-visual :is(p, small, .auth-trust-line, .auth-visual__brand span) {
    color: var(--on-brand-muted);
}

.auth-visual .auth-eyebrow {
    color: var(--brand-gold);
}

.auth-form-side {
    background: var(--canvas);
}

.auth-card,
.password-card {
    color: var(--text);
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow-card);
}

.auth-card :is(h1, label),
.register-grid label > span {
    color: var(--text);
}

.auth-card > p,
.auth-copyright,
.auth-divider,
.password-card > p,
.password-card > small,
.field-help {
    color: var(--muted);
}

.password-toggle {
    background: transparent;
}

.auth-card > .auth-eyebrow,
.auth-forgot-link,
.password-toggle,
.password-card > span {
    color: var(--primary);
}

.auth-field,
.register-grid input {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}

.auth-field > .bi {
    color: var(--muted);
}

.auth-field input {
    color: var(--text);
    background: transparent;
}

.auth-field input::placeholder,
.register-grid input::placeholder {
    color: var(--muted);
}

.auth-field:focus-within,
.register-grid input:focus {
    border-color: var(--control-focus);
    box-shadow: none;
    outline: 1px solid var(--control-focus);
    outline-offset: -1px;
}

.auth-primary {
    color: var(--action-primary-text);
    background: var(--action-primary);
    border-color: var(--action-primary);
}

.auth-primary:hover {
    background: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
}

.auth-secondary,
.auth-language,
.auth-theme-toggle,
.auth-top-actions > a {
    color: var(--primary);
    background: var(--surface);
    border-color: var(--line);
}

.auth-secondary:hover,
.auth-language:hover,
.auth-theme-toggle:hover,
.auth-top-actions > a:hover {
    background: var(--surface-soft);
    border-color: var(--primary);
}

.auth-language:focus-visible,
.auth-theme-toggle:focus-visible,
.auth-primary:focus-visible,
.auth-secondary:focus-visible,
.auth-top-actions > a:focus-visible,
.password-toggle:focus-visible {
    outline: 3px solid var(--control-focus);
    outline-offset: 3px;
}

.auth-divider::before,
.auth-divider::after,
.auth-steps i {
    background: var(--line);
}

.password-icon,
.auth-steps b {
    color: var(--primary);
    background: var(--surface-soft);
}

.auth-steps > div {
    color: var(--muted);
}

.auth-steps > div.active {
    color: var(--primary);
}

.auth-steps > div.active b {
    color: var(--action-primary-text);
    background: var(--action-primary);
}

.auth-service,
.auth-service > .bi,
.auth-security-note {
    background: transparent;
    border-color: transparent;
}

.auth-service > .bi,
.auth-trust-line > .bi {
    color: var(--on-brand-muted);
}

.auth-security-note > b {
    background: var(--brand-gold);
    color: var(--brand-purple);
}

/* Validation remains semantic rather than adopting decorative brand colors. */
.auth-message--error {
    color: #9d4039;
    background: #fff0ee;
}

.auth-message.form-error {
    color: #9d4039;
    background: #fff0ee;
}

.auth-message.form-success {
    color: #176d48;
    background: #ebf7f0;
}

.auth-steps > div.done b {
    background: #dcb94c;
    color: #183d2c;
}

.employee-match-card {
    background: #ebf6ef;
}

.employee-match-card span {
    color: #708078;
}

.employee-match-card strong {
    color: #174a34;
}

.register-grid input.input-invalid {
    border-color: #dc3545 !important;
    background: #fff8f8;
    box-shadow: 0 0 0 3px #dc354514;
}

.register-grid input.input-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 4px #dc35451a;
}

html[data-theme='dark'] .auth-message--error {
    color: #fecaca !important;
    background: rgba(127, 29, 29, 0.28);
    border-color: rgba(248, 113, 113, 0.42);
}

html[data-theme='dark'] .auth-message.form-error {
    color: #fecaca !important;
    background: rgba(127, 29, 29, 0.28);
    border-color: rgba(248, 113, 113, 0.42);
}

html[data-theme='dark'] .auth-message.form-success {
    color: #d9f99d;
    background: rgba(63, 98, 18, 0.25);
    border-color: rgba(181, 198, 109, 0.42);
}

.auth-card--login .auth-field.input-invalid {
    border-color: #c8323e !important;
    background: #fff8f8 !important;
    box-shadow: 0 0 0 3px rgba(200, 50, 62, 0.1) !important;
}

html[data-theme='dark'] .auth-card--login .auth-field.input-invalid {
    border-color: #f87171 !important;
    background: rgba(127, 29, 29, 0.16) !important;
}

html[data-theme='dark'] .register-grid input.input-invalid {
    border-color: #f87171 !important;
    background: rgba(127, 29, 29, 0.16) !important;
    color: #f8fafc !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.16) !important;
}

.auth-reset-card .field.input-invalid {
    border-color: #dc3545 !important;
    background: #fff8f8 !important;
}

html[data-theme='dark'] .password-card .field.input-invalid {
    border-color: #f87171 !important;
    background: rgba(127, 29, 29, 0.16) !important;
}

html[data-theme='dark'] .employee-match-card {
    border-color: #59613e;
    background: #252b24;
}

html[data-theme='dark'] .employee-match-card span {
    color: #b4b4b1;
}

html[data-theme='dark'] .employee-match-card strong {
    color: #eef2db;
}

.platform-logo {
    display: inline-block;
    width: min(100%, 260px);
    line-height: 0;
    vertical-align: middle;
}

.platform-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: none;
}

:root:not([data-theme='dark']):not([lang='en']) .platform-logo .platform-logo__ar.platform-logo__normal,
:root:not([data-theme='dark'])[lang='en'] .platform-logo .platform-logo__en.platform-logo__normal {
    display: block;
}

:root[data-theme='dark'] .platform-logo .platform-logo__normal {
    display: none;
}

:root[data-theme='dark']:not([lang='en']) .platform-logo .platform-logo__ar.platform-logo__dark,
:root[data-theme='dark'][lang='en'] .platform-logo .platform-logo__en.platform-logo__dark {
    display: block;
}

.auth-identity .platform-logo {
    width: 100%;
}

.sidebar .platform-logo {
    width: 140px;
    height: 32px;
    max-width: 100%;
}

.sidebar .platform-logo img {
    height: 100%;
}