/* ============================================================
   login.css — Styles for the split-screen login page.
   Loaded only by _AuthSplitLayout.cshtml (used by /Account/Login).
   Colors + font come from the app theme (business-central-theme.css
   :root --bc-*). No login-specific palette variables.
   ============================================================ */

/* ---------- Page shell ---------- */
html, body {
    height: 100%;
}
body {
    margin: 0;
    /* App theme font */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.auth-shell {
    color: var(--bc-text);
}

/* ---------- Left brand panel ---------- */
.brand-panel {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #005da6 0%, #0078d4 55%, #004e8c 100%);
}
.brand-panel .bg-grid {
    position: absolute; inset: 0; opacity: .14; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 32px 32px;
}
.brand-panel .bg-dots {
    position: absolute; inset: 0; opacity: .2; pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.4) 1px, transparent 0);
    background-size: 16px 16px;
}
.blob-a { position:absolute; top:-8rem; left:-7rem; width:500px; height:500px; border-radius:50%; background:rgba(125,211,252,.15); filter:blur(60px); pointer-events:none; }
.blob-b { position:absolute; top:33%; right:-6rem; width:420px; height:420px; border-radius:50%; background:rgba(0,78,140,.4); filter:blur(40px); pointer-events:none; }
.blob-c { position:absolute; right:-5rem; bottom:-6rem; width:24rem; height:24rem; border-radius:50%; background:rgba(255,255,255,.05); filter:blur(40px); pointer-events:none; }
.blob-d { position:absolute; left:-5rem; top:25%; width:20rem; height:20rem; border-radius:50%; background:rgba(125,211,252,.1); filter:blur(60px); pointer-events:none; }
.ring-a { position:absolute; top:2.5rem; right:2rem; width:12rem; height:12rem; opacity:.06; border:1px solid #fff; border-radius:50%; pointer-events:none; }
.ring-b { position:absolute; top:1.5rem; right:1rem; width:14rem; height:14rem; opacity:.04; border:1px dashed #fff; border-radius:50%; pointer-events:none; }
.badge-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .75rem; border-radius: 999px;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
    font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.pulse-dot {
    width: .5rem; height: .5rem; border-radius: 50%; background: #34d399;
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Right panel (subtle texture) ---------- */
.auth-right {
    position: relative;
    background-color: var(--bc-bg);
    /* faint dotted texture */
    background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.05) 1px, transparent 0);
    background-size: 22px 22px;
}
/* soft accent glow in the corners for depth */
.auth-right::before {
    content: "";
    position: absolute;
    top: -6rem; right: -6rem;
    width: 22rem; height: 22rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,120,212,.08), transparent 70%);
    pointer-events: none;
}
.auth-right::after {
    content: "";
    position: absolute;
    bottom: -7rem; left: -5rem;
    width: 20rem; height: 20rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,120,212,.06), transparent 70%);
    pointer-events: none;
}
.auth-right > * { position: relative; z-index: 1; }

/* ---------- Right login panel ---------- */
.login-card {
    background: #fff;
    border: 1px solid var(--bc-border);
    border-radius: 1rem;
    box-shadow: 0 4px 20px -4px rgba(0,0,0,.05);
}
.input-group-custom {
    border: 1px solid var(--bc-border);
    border-radius: .5rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.input-group-custom:focus-within {
    border-color: var(--bc-accent);
    box-shadow: 0 0 0 3px rgba(0,120,212,.15);
}
.input-group-custom.is-invalid { border-color: var(--bc-danger); }
.input-group-custom input {
    border: none; outline: none; background: transparent;
    height: 3rem; width: 100%; font-size: .95rem; color: var(--bc-text);
}
.input-group-custom input::placeholder { color: rgba(107,114,128,.7); }
.input-group-custom select {
    border: none; outline: none; background: transparent;
    height: 3rem; width: 100%; font-size: .95rem; color: var(--bc-text);
    cursor: pointer; padding-right: .5rem;
}
.input-group-custom select:disabled { color: rgba(107,114,128,.6); cursor: not-allowed; }
.input-group-custom.disabled { background: #f8f9fa; }
.icon-slot { color: #9ca3af; padding-left: .9rem; padding-right: .5rem; display:flex; align-items:center; cursor: pointer; }
.eye-btn { border: none; background: none; color: var(--bc-text-light); padding: .35rem; border-radius: .375rem; }
.eye-btn:hover { color: var(--bc-text); }
.eye-btn:focus-visible { box-shadow: 0 0 0 2px rgba(0,120,212,.4); outline: none; }

.btn-brand {
    background-color: var(--bc-accent); border-color: var(--bc-accent); color: #fff;
    height: 3rem; font-weight: 600; font-size: .95rem; border-radius: .5rem;
}
.btn-brand:hover { background-color: var(--bc-accent-hover); border-color: var(--bc-accent-hover); color: #fff; }
.btn-brand:focus { box-shadow: 0 0 0 4px rgba(0,120,212,.3); }
.btn-brand:active { transform: scale(.99); }
.btn-brand:disabled { opacity: .75; }

.alert-error-box { background: #FEF2F2; border: 1px solid #fecaca; color: var(--bc-danger); border-radius: .5rem; }
.field-error-text { color: var(--bc-danger); font-size: .75rem; font-weight: 500; }

.brand-logo-text { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--bc-accent); }
.brand-logo-text span { color: var(--bc-text); }

.spinner-white {
    width: 1.25rem; height: 1.25rem; border: .2em solid rgba(255,255,255,.35);
    border-top-color: #fff; border-radius: 50%; animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }