/* ============================================================
   InstanyERP — Telas de entrada (landing /index e login /entrar)
   Layout split-screen. Painel de marca sempre escuro; coluna do
   formulario adapta ao tema via tokens --bs-* (data-pc-theme).
   Tudo escopado sob .ie-auth para nao afetar o resto do sistema.
   ============================================================ */

.ie-auth,
.ie-auth *,
.ie-auth *::before,
.ie-auth *::after { box-sizing: border-box; }

.ie-auth {
    --ie-form-max: 420px;
    --ie-radius: 14px;
    --ie-field-h: 52px;
    --ie-accent: var(--bs-primary, #4680ff);

    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    overflow-x: hidden;
    background: var(--bs-body-bg);
    font-family: 'Inter var', 'Inter', system-ui, sans-serif;
}

/* ── Painel de marca (sempre escuro) ─────────────────────── */
.ie-auth__brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2rem, 4vw, 3.75rem);
    color: #fff;
    background:
        radial-gradient(120% 120% at 85% 0%, #16233a 0%, transparent 55%),
        linear-gradient(158deg, #0a0e14 0%, #0d131c 45%, #101a28 100%);
}

.ie-auth__aurora { position: absolute; inset: 0; pointer-events: none; }
.ie-auth__aurora::before,
.ie-auth__aurora::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(22px);
}
.ie-auth__aurora::before {
    width: 560px; height: 560px; top: -150px; right: -110px;
    background: radial-gradient(circle at center, rgba(70, 128, 255, 0.42), transparent 62%);
    animation: ieDrift1 20s ease-in-out infinite alternate;
}
.ie-auth__aurora::after {
    width: 480px; height: 480px; bottom: -160px; left: -130px;
    background: radial-gradient(circle at center, rgba(227, 6, 19, 0.28), transparent 60%);
    animation: ieDrift2 24s ease-in-out infinite alternate;
}
.ie-auth__grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 25% 15%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 90% 80% at 25% 15%, #000 0%, transparent 78%);
}

.ie-auth__brand-top {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ie-auth__badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.72);
}
.ie-auth__badge i { font-size: 0.95rem; color: #7ea6ff; }

.ie-auth__brand-inner { position: relative; z-index: 2; margin: auto 0; max-width: 460px; }
.ie-auth__brand-logo { width: clamp(200px, 21vw, 258px); height: auto; margin-bottom: 2.5rem; }
.ie-auth__brand-title {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 2.7vw, 2.5rem);
    font-weight: 700; line-height: 1.12; letter-spacing: -0.025em;
    color: #fff;
}
.ie-auth__brand-title span { color: #7ea6ff; }
.ie-auth__brand-text {
    margin: 0 0 2.4rem;
    font-size: 1.02rem; line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}
.ie-auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; }
.ie-auth__point {
    display: flex; align-items: center; gap: 0.9rem;
    font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.85);
}
.ie-auth__point-ic {
    width: 44px; height: 44px; min-width: 44px; border-radius: 13px;
    display: grid; place-items: center; font-size: 1.35rem; color: #cfe0ff;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ie-auth__brand-foot {
    position: relative; z-index: 2;
    font-size: 0.78rem; color: rgba(255, 255, 255, 0.38);
}

/* ── Coluna do formulario (adapta ao tema) ───────────────── */
.ie-auth__form {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--bs-body-bg);
}
.ie-auth__card {
    width: 100%; max-width: var(--ie-form-max);
    animation: ieUp 0.5s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.ie-auth__heading {
    margin: 0 0 0.45rem;
    font-size: clamp(1.45rem, 2.4vw, 1.8rem);
    font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
    color: var(--bs-heading-color, var(--bs-body-color));
}
.ie-auth__sub {
    margin: 0 0 1.9rem;
    font-size: 0.95rem; line-height: 1.5; color: var(--bs-secondary-color);
}

/* Campos */
.ie-auth__field { margin-bottom: 1.05rem; }
.ie-auth__label {
    display: block; margin-bottom: 0.45rem;
    font-size: 0.8rem; font-weight: 600; color: var(--bs-body-color);
}
.ie-auth__inwrap { position: relative; }
.ie-auth__inwrap > .ie-auth__ic {
    position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
    font-size: 1.2rem; color: var(--bs-secondary-color); pointer-events: none;
}
.ie-auth__input {
    width: 100%; height: var(--ie-field-h);
    padding: 0 2.9rem 0 2.95rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 0.95rem; font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.ie-auth__input::placeholder { color: var(--bs-secondary-color); opacity: 0.7; }
.ie-auth__input:focus {
    outline: none;
    border-color: var(--ie-accent);
    box-shadow: 0 0 0 3px rgba(70, 128, 255, 0.18);
}
.ie-auth__pass-toggle {
    position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: 0; border-radius: 10px;
    display: grid; place-items: center; cursor: pointer;
    background: transparent; color: var(--bs-secondary-color);
    transition: color 0.15s, background 0.15s;
}
.ie-auth__pass-toggle i { font-size: 1.25rem; }
.ie-auth__pass-toggle:hover { color: var(--bs-body-color); background: rgba(128, 128, 128, 0.12); }

/* Linha lembrar/esqueci */
.ie-auth__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin: 0.35rem 0 1.5rem;
}
.ie-auth__check {
    display: flex; align-items: center; gap: 0.5rem; margin: 0;
    font-size: 0.88rem; color: var(--bs-body-color); cursor: pointer;
}
.ie-auth__check .form-check-input { margin: 0; float: none; }
.ie-auth__link {
    font-size: 0.86rem; font-weight: 600; color: var(--ie-accent); text-decoration: none;
}
.ie-auth__link:hover { color: var(--ie-accent); text-decoration: underline; }

/* Botoes (por cima do .btn do tema, so dentro de .ie-auth) */
.ie-auth .btn {
    height: var(--ie-field-h); border-radius: 12px;
    font-weight: 600; font-size: 0.95rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.ie-auth .btn i { font-size: 1.15rem; }
.ie-auth .btn-primary {
    border: none;
    background: linear-gradient(135deg, #4680ff 0%, #3866cc 100%);
    box-shadow: 0 8px 20px rgba(70, 128, 255, 0.26);
    transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
}
.ie-auth .btn-primary:hover { filter: brightness(1.04); box-shadow: 0 10px 26px rgba(70, 128, 255, 0.34); }
.ie-auth .btn-primary:active { transform: translateY(1px); }
.ie-auth .btn-primary:disabled { opacity: 0.7; box-shadow: none; }
.ie-auth .btn-outline-secondary { border-color: var(--bs-border-color); }

/* Divisor "ou" */
.ie-auth__divider {
    display: flex; align-items: center; gap: 0.85rem; margin: 1.35rem 0;
    font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.ie-auth__divider::before,
.ie-auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--bs-border-color); }

/* CTAs da landing */
.ie-auth__cta { display: grid; gap: 0.7rem; margin-top: 1.75rem; }

/* Mensagens de alerta do login */
.ie-auth .alert-msg:not(:empty) { margin-bottom: 1rem; }
.ie-auth .alert-msg .alert { margin: 0; border-radius: 12px; font-size: 0.9rem; padding: 0.8rem 1rem; }

/* Texto legal */
.ie-auth__legal {
    margin: 1.7rem 0 0; text-align: center;
    font-size: 0.78rem; line-height: 1.5; color: var(--bs-secondary-color);
}
.ie-auth__legal a { color: var(--bs-body-color); font-weight: 600; text-decoration: none; }
.ie-auth__legal a:hover { text-decoration: underline; }

/* ── Ajustes de tema escuro na coluna do formulario ──────── */
[data-pc-theme="dark"] .ie-auth__input { background: rgba(255, 255, 255, 0.02); }
[data-pc-theme="dark"] .ie-auth .btn-outline-secondary { color: var(--bs-body-color); }
/* Corrige o flash branco do page-loader no tema escuro (so nestas telas) */
[data-pc-theme="dark"] #page-loader { background: var(--bs-body-bg) !important; }

/* ── Animacoes ───────────────────────────────────────────── */
@keyframes ieUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
@keyframes ieDrift1 {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-40px, 34px) scale(1.1); }
}
@keyframes ieDrift2 {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(34px, -30px) scale(1.12); }
}

/* ── Responsivo ──────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ie-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .ie-auth__brand {
        min-height: auto;
        flex-direction: column; align-items: center; justify-content: center;
        text-align: center; padding: 2rem 1.5rem 1.85rem;
    }
    .ie-auth__brand-top,
    .ie-auth__brand-text,
    .ie-auth__points,
    .ie-auth__brand-foot { display: none; }
    .ie-auth__brand-inner { margin: 0; max-width: 540px; }
    .ie-auth__brand-logo { width: 168px; margin-bottom: 1.05rem; }
    .ie-auth__brand-title { font-size: 1.4rem; margin-bottom: 0.35rem; }
    .ie-auth__form { padding: 2.1rem 1.5rem 2.6rem; }
}
@media (max-width: 480px) {
    .ie-auth__brand { padding: 1.65rem 1.25rem 1.45rem; }
    .ie-auth__brand-logo { width: 150px; }
    .ie-auth__brand-title { font-size: 1.28rem; }
    .ie-auth__form { padding: 1.9rem 1.35rem 2.4rem; }
    .ie-auth__card { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ie-auth__card,
    .ie-auth__aurora::before,
    .ie-auth__aurora::after { animation: none; }
}