/* ============================================================
   Clarix — Auth (Login Split + Selecionar Clínica)
   Sessão 58 / F-01 — refresh 62.F.7a (consolidação --clx-*)
   Depende de clarix-tokens.css (deve ser importado antes).

   POLÍTICA pós-62.F.7a:
   - Brand tokens (`--clarix-navy*`, `--clarix-cyan*`) PRESERVADOS — são
     identidade visual da marca, não candidatos à substituição semântica.
   - Tokens neutros, raio, sombra, fonte: migrados para aliases `--clx-*`.
   - Hex hardcoded (#fff, #fef2f2, #ecfbff, etc.): substituídos por tokens
     semânticos (`--clx-surface`, `--clx-danger-100`, `--clx-info-100`).
   - `--text-2`, `--muted-2`, `--border-2` permanecem como legados sem
     alias direto — sub-shades sem equivalente semântico no DS hoje.
   ============================================================ */

/* ---------- Reset de layout base para telas auth ---------- */

html, body {
    height: 100%;
    background-color: var(--clx-bg);
}

body.auth-body {
    margin: 0;
    font-family: var(--clx-font-sans);
    color: var(--clx-text);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Tipografia / inputs / botões (auth) ---------- */

.clarix-label {
    display: block;
    font-size: var(--clx-fs-sm);
    font-weight: var(--clx-fw-semi);
    color: var(--text-2);
    margin-bottom: .35rem;
    letter-spacing: .1px;
}

.clarix-input {
    width: 100%;
    padding: .65rem .85rem;
    font-size: .95rem;
    line-height: 1.35;
    color: var(--clx-text);
    background: var(--clx-surface);
    border: 1.5px solid var(--clx-border);
    border-radius: var(--clx-radius-md);
    transition: border-color var(--clx-dur-fast) var(--clx-ease),
                box-shadow var(--clx-dur-fast) var(--clx-ease);
    font-family: inherit;
}

.clarix-input:focus {
    outline: 0;
    border-color: var(--clarix-cyan);
    box-shadow: var(--clx-shadow-focus);
}

.clarix-input.is-invalid {
    border-color: var(--clx-danger-500);
}

.clarix-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .22);
}

.clarix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem 1.1rem;
    border-radius: var(--clx-radius-md);
    font-size: .92rem;
    font-weight: var(--clx-fw-semi);
    border: 1.5px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background-color var(--clx-dur-fast) var(--clx-ease),
                border-color var(--clx-dur-fast) var(--clx-ease),
                color var(--clx-dur-fast) var(--clx-ease),
                transform var(--clx-dur-fast) var(--clx-ease);
    text-decoration: none;
    line-height: 1.2;
}

.clarix-btn:active { transform: translateY(1px); }
.clarix-btn:disabled { opacity: .65; cursor: not-allowed; }

.clarix-btn-primary {
    background: var(--clarix-navy);
    color: var(--clx-brand-ink);
    border-color: var(--clarix-navy);
}
.clarix-btn-primary:hover:not(:disabled) {
    background: var(--clarix-navy-2);
    border-color: var(--clarix-navy-2);
    color: var(--clx-brand-ink);
}

.clarix-btn-ghost {
    background: transparent;
    color: var(--text-2);
    border-color: var(--border-2);
}
.clarix-btn-ghost:hover:not(:disabled) {
    background: var(--clx-surface-alt);
    color: var(--clx-text);
}

.clarix-btn-lg { padding: .8rem 1.25rem; font-size: var(--clx-fs-base); }
.clarix-btn-block { width: 100%; }

.clarix-divider {
    border: 0;
    border-top: 1px solid var(--clx-border);
    margin: 1.25rem 0;
}

/* ---------- Login Split (Variação B) ---------- */

.auth-split {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 480px);
    background: var(--clx-bg);
}

.auth-brand-panel {
    position: relative;
    background: linear-gradient(135deg, var(--clarix-navy) 0%, var(--clarix-navy-2) 55%, var(--clarix-navy-3) 100%);
    color: var(--clx-brand-ink);
    padding: 3rem 3.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.auth-brand-logo {
    display: flex;
    align-items: center;
    gap: .65rem;
    z-index: 1;
}

.auth-brand-wordmark {
    font-size: 1.35rem;
    font-weight: var(--clx-fw-bold);
    letter-spacing: -.4px;
    color: var(--clx-brand-ink);
}
.auth-brand-wordmark > span { color: var(--clarix-cyan); }

.auth-brand-copy {
    margin-top: 3.5rem;
    max-width: 460px;
    z-index: 1;
}

.auth-brand-title {
    font-size: 2.25rem;
    font-weight: var(--clx-fw-bold);
    line-height: var(--clx-lh-tight);
    letter-spacing: -.8px;
    margin: 0 0 1rem;
    color: var(--clx-brand-ink);
}
.auth-brand-title > span { color: var(--clarix-cyan); }

.auth-brand-lead {
    font-size: var(--clx-fs-base);
    opacity: .85;
    line-height: var(--clx-lh-base);
    margin: 0;
    color: var(--clx-brand-ink);
}

.auth-feature-list {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-top: 2.5rem;
    z-index: 1;
}

.auth-feature {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .88rem;
    opacity: .94;
    color: var(--clx-brand-ink);
}

.auth-feature-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--clx-radius-sm);
    background: rgba(0, 184, 217, .18);
    color: var(--clarix-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .95rem;
}

.auth-pattern-arcs {
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 520px;
    height: 520px;
    pointer-events: none;
    opacity: .22;
    z-index: 0;
}

/* Form panel */
.auth-form-panel {
    background: var(--clx-surface);
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-form-inner {
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
}

.auth-form-title {
    font-size: var(--clx-fs-xl);
    font-weight: var(--clx-fw-bold);
    color: var(--clarix-navy);
    margin: 0 0 .25rem;
    letter-spacing: -.2px;
}

.auth-form-sub {
    font-size: .9rem;
    color: var(--clx-text-muted);
    margin: 0 0 1.5rem;
}

.auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .35rem;
}

.auth-forgot {
    font-size: var(--clx-fs-sm);
    color: var(--clx-text-muted);
    text-decoration: none;
    font-weight: var(--clx-fw-medium);
}
.auth-forgot:hover { color: var(--clarix-cyan-ink); text-decoration: underline; }

.auth-pwd-wrap {
    position: relative;
}

.auth-pwd-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--clx-text-muted);
    cursor: pointer;
    padding: .25rem .35rem;
    font-size: 1rem;
    line-height: 1;
}
.auth-pwd-eye:hover { color: var(--clx-text); }

.auth-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .85rem;
    color: var(--text-2);
    margin: 1rem 0 1.25rem;
    cursor: pointer;
    user-select: none;
}

.auth-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--clarix-navy);
    margin: 0;
    cursor: pointer;
}

.auth-error {
    background: var(--clx-danger-100);
    border: 1px solid var(--clx-danger-300);
    color: var(--clx-danger-700);
    border-radius: var(--clx-radius-sm);
    padding: .6rem .85rem;
    font-size: .85rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.auth-error i { margin-top: 2px; flex-shrink: 0; }

/* Aviso informativo (sessão expirada, logout etc.) — usa as mesmas dimensões
   de .auth-error mas em paleta info (azul) em vez de danger (vermelho).
   Aplicado via classe extra: <div class="auth-error auth-aviso">. */
.auth-aviso {
    background: var(--clx-info-100);
    border-color: var(--clx-info-300);
    color: var(--clx-info-700);
}

.auth-validation {
    color: var(--clx-danger-700);
    font-size: var(--clx-fs-sm);
    margin-top: .3rem;
    min-height: 1rem;
    display: block;
}

.auth-env-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-weight: var(--clx-fw-bold);
    padding: .2rem .55rem;
    border-radius: var(--clx-radius-pill);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 1rem;
}
.auth-env-dev  { background: var(--clx-warn-100); color: var(--clx-warn-700); }
.auth-env-stg  { background: var(--clx-info-100); color: var(--clx-info-700); }

.auth-footer {
    font-size: .75rem;
    color: var(--muted-2);
    text-align: center;
    margin-top: 2rem;
}

/* Mobile fallback (< 900px) — stack single column, esconder painel de marca */
@media (max-width: 900px) { /* bp-md */
    .auth-split {
        grid-template-columns: 1fr;
        position: relative;
        min-height: 100vh;
    }

    .auth-brand-panel { display: none; }

    .auth-form-panel { padding: 2rem 1.25rem; min-height: 100vh; }

    .auth-mobile-brand {
        display: flex;
        align-items: center;
        gap: .65rem;
        margin-bottom: 1.75rem;
    }
}

@media (min-width: 901px) { /* > bp-md */
    .auth-mobile-brand { display: none; }
}

.auth-wordmark {
    font-size: 1.5rem;
    font-weight: var(--clx-fw-bold);
    letter-spacing: -.4px;
    color: var(--clarix-navy);
    line-height: var(--clx-lh-tight);
}
.auth-wordmark > span { color: var(--clarix-cyan); }

.auth-tagline {
    font-size: .68rem;
    color: var(--clx-text-muted);
    letter-spacing: 2.2px;
    font-weight: var(--clx-fw-medium);
    text-transform: uppercase;
    margin-top: 4px;
}

/* animação spin para loading */
@keyframes clarix-spin { to { transform: rotate(360deg); } }
.clarix-spin { display: inline-block; animation: clarix-spin 1s linear infinite; }

/* ============================================================
   Selecionar Clínica
   ============================================================ */

.tenant-shell {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--clx-bg);
}

.tenant-card {
    width: 100%;
    max-width: 540px;
    background: var(--clx-surface);
    border-radius: var(--clx-radius-lg);
    box-shadow: var(--clx-shadow-md);
    padding: 2rem;
}

.tenant-userrow {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .9rem;
    background: var(--clx-surface-alt);
    border: 1px solid var(--clx-border);
    border-radius: var(--clx-radius-md);
    margin-bottom: 1.5rem;
}

.tenant-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--clarix-navy);
    color: var(--clx-brand-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--clx-fw-bold);
    font-size: .88rem;
    flex-shrink: 0;
}

.tenant-userinfo { flex: 1; min-width: 0; }
.tenant-username {
    font-weight: var(--clx-fw-semi);
    font-size: .92rem;
    color: var(--clx-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tenant-useremail {
    font-size: var(--clx-fs-sm);
    color: var(--clx-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tenant-title {
    font-size: var(--clx-fs-xl);
    font-weight: var(--clx-fw-bold);
    color: var(--clarix-navy);
    margin: 0 0 .25rem;
    letter-spacing: -.2px;
}

.tenant-sub {
    font-size: .9rem;
    color: var(--clx-text-muted);
    margin: 0 0 1.25rem;
}

.tenant-search {
    position: relative;
    margin-bottom: 1rem;
}

.tenant-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--clx-text-muted);
    font-size: 1rem;
    pointer-events: none;
}

.tenant-search input {
    padding-left: 38px;
    font-size: .9rem;
}

.tenant-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 360px;
    overflow: auto;
    padding: 2px;
    margin-bottom: 1.25rem;
}

.tenant-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    border: 1.5px solid var(--clx-border);
    border-radius: var(--clx-radius-md);
    cursor: pointer;
    background: var(--clx-surface);
    transition: border-color var(--clx-dur-fast) var(--clx-ease),
                background-color var(--clx-dur-fast) var(--clx-ease),
                box-shadow var(--clx-dur-fast) var(--clx-ease);
    text-align: left;
    font: inherit;
    width: 100%;
    color: var(--clx-text);
}

.tenant-option:hover {
    border-color: var(--clx-border-hover);
    background: var(--clx-surface-alt);
}

.tenant-option.selected {
    border-color: var(--clarix-cyan);
    background: var(--clx-info-100);
    box-shadow: 0 0 0 3px rgba(0, 184, 217, .12);
}

.tenant-option-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--clx-radius-md);
    background: var(--clx-info-100);
    color: var(--clarix-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.05rem;
    transition: background-color var(--clx-dur-fast) var(--clx-ease),
                color var(--clx-dur-fast) var(--clx-ease);
}

.tenant-option.selected .tenant-option-icon {
    background: var(--clarix-navy);
    color: var(--clx-brand-ink);
}

.tenant-option-body { flex: 1; min-width: 0; }

.tenant-option-name {
    font-weight: var(--clx-fw-semi);
    font-size: .93rem;
    color: var(--clx-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tenant-option-meta {
    font-size: .76rem;
    color: var(--clx-text-muted);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    margin-top: 2px;
}

.tenant-option-meta > span { display: inline-flex; align-items: center; gap: .25rem; }

.tenant-option-check {
    color: var(--clarix-cyan);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tenant-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--clx-text-muted);
    font-size: .9rem;
}

.tenant-empty i {
    font-size: 1.4rem;
    display: block;
    margin-bottom: .4rem;
}

.tenant-actions {
    display: flex;
    gap: .6rem;
    margin-top: .25rem;
}

.tenant-actions .spacer { flex: 1; }

.tenant-footnote {
    font-size: .72rem;
    color: var(--muted-2);
    text-align: center;
    margin-top: 1rem;
}

/* ============================================================
   DARK MODE — overrides residuais (Sessão 62.F.2 + refresh 62.F.7a)
   ----
   Pós-62.F.7a a maioria das regras consome tokens `--clx-*` (que
   flipam automaticamente em dark via overrides em clarix-tokens.css).
   Aqui ficam APENAS os ajustes que tokens não cobrem:
   - `.clarix-btn-primary`: brand navy saturado some em fundo dark,
     elevamos para `--clarix-navy-3` (#1a3a6e) que tem contraste AA.
   - `.tenant-option.selected`: ring de focus precisa ficar em cyan
     com alpha mais alto em dark (visibilidade sobre bg saturado).
   - `.tenant-avatar` + `.tenant-option.selected .tenant-option-icon`:
     mesma lógica do btn-primary.
   ============================================================ */

/* Botão primary — eleva para navy-3 em dark para não sumir no bg. */
html[data-theme="dark"] .clarix-btn-primary {
    background: var(--clarix-navy-3);
    border-color: var(--clarix-navy-3);
    color: var(--clx-brand-ink);
}
html[data-theme="dark"] .clarix-btn-primary:hover:not(:disabled) {
    background: #2c4a7a;
    border-color: #2c4a7a;
}

/* Tenant option selected — ring cyan com alpha mais saturado em dark. */
html[data-theme="dark"] .tenant-option.selected {
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .18);
}

/* Tenant option icon (.selected) + avatar — usa navy-3 para visibilidade. */
html[data-theme="dark"] .tenant-option.selected .tenant-option-icon,
html[data-theme="dark"] .tenant-avatar {
    background: var(--clarix-navy-3);
    color: var(--clx-brand-ink);
}

/* Tenant option icon (não-selected): info-100 fica claro demais em dark
   sobre o card surface-2 — aclarar para info-700 inverso. */
html[data-theme="dark"] .tenant-option-icon {
    color: var(--clx-info-700);
}