/* =====================================================================
   DENTO Nova — split-screen auth layout
   Design language ported from the ServiceGeni "Nova" auth design and
   recolored to the DENTO teal brand. Dark, faithful split layout:
   Left = animated brand panel, Right = form panel.
   Used by: signin, forgot, otp, final, email (all auth screens).
   ===================================================================== */

:root {
    /* DENTO teal brand tokens */
    --dento-accent: #0EA5A6;
    --dento-accent-2: #17c1c2;
    --dento-accent-glow: #2dd4d5;

    /* sg-auth surface tokens (consumed by the rules below) */
    --sg-bg: #0e1014;
    --sg-ink: #f3f6f8;
    --sg-muted: #8b94a3;
    --sg-surface: #171a21;
    --sg-surface-2: #1d212a;
    --sg-line: #242a35;
    --sg-accent: var(--dento-accent);
    --sg-accent-soft: var(--dento-accent-2);
}

/* ── Shell ── */
.sg-auth { min-height: 100vh; min-height: 100dvh; display: flex; background: var(--sg-bg); }
.sg-auth__wrap { flex: 1; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .sg-auth__wrap { grid-template-columns: 1fr 1fr; } }

/* ── LEFT: animated branding panel ── */
.sg-auth__brandpanel {
    display: none;
    position: relative;
    overflow: hidden;
    padding: 56px 56px 48px 120px;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(120% 120% at 0% 0%, #0b4d4e 0%, rgba(11,77,78,0) 55%),
        radial-gradient(120% 120% at 100% 100%, #0e6a6b 0%, rgba(14,106,107,0) 55%),
        linear-gradient(135deg, #08161a 0%, #0a2226 100%);
    isolation: isolate;
}
@media (min-width: 992px) { .sg-auth__brandpanel { display: flex; } }

/* floating blurred orbs */
.sg-auth__orbs span {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: .55;
    z-index: -1;
    animation: sg-orb 16s ease-in-out infinite;
}
.sg-auth__orbs span:nth-child(1) { width: 320px; height: 320px; background: #0EA5A6; top: -80px; left: -60px; animation-delay: 0s; }
.sg-auth__orbs span:nth-child(2) { width: 260px; height: 260px; background: #2dd4d5; bottom: -60px; right: -40px; animation-delay: -5s; }
.sg-auth__orbs span:nth-child(3) { width: 200px; height: 200px; background: #0c8485; top: 40%; left: 55%; animation-delay: -9s; opacity: .4; }
@keyframes sg-orb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(40px, 30px) scale(1.08); }
    66%       { transform: translate(-30px, 40px) scale(.96); }
}

.sg-auth__brand { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.5px; text-decoration: none; color: #fff; }
.sg-auth__brand i { color: var(--dento-accent-2); }
.sg-auth__brand .text-glow { color: var(--dento-accent-2); text-shadow: 0 0 16px rgba(23,193,194,.55); }
.sg-auth__center { margin: auto 0; }

/* animated accent wave */
.sg-voicewave { display: flex; align-items: center; gap: 7px; height: 64px; margin-bottom: 28px; }
.sg-voicewave span {
    width: 7px; height: 100%; border-radius: 7px;
    background: linear-gradient(180deg, #2dd4d5, #0EA5A6);
    transform: scaleY(.25); transform-origin: center;
    animation: sg-wave 1.25s ease-in-out infinite;
}
.sg-voicewave span:nth-child(1) { animation-delay: -1.10s; }
.sg-voicewave span:nth-child(2) { animation-delay: -0.90s; }
.sg-voicewave span:nth-child(3) { animation-delay: -0.70s; }
.sg-voicewave span:nth-child(4) { animation-delay: -0.50s; }
.sg-voicewave span:nth-child(5) { animation-delay: -0.30s; }
.sg-voicewave span:nth-child(6) { animation-delay: -0.55s; }
.sg-voicewave span:nth-child(7) { animation-delay: -0.80s; }
.sg-voicewave span:nth-child(8) { animation-delay: -1.00s; }
.sg-voicewave span:nth-child(9) { animation-delay: -1.20s; }
@keyframes sg-wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

.sg-auth__headline { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; color: #fff; margin: 0 0 12px; }
.sg-auth__lead { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.72); max-width: 38ch; margin: 0 0 26px; }
.sg-auth__roles { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
.sg-auth__roles li {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
    color: #d7f5f5; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px; padding: 8px 14px; backdrop-filter: blur(4px);
}
.sg-auth__roles li i { color: var(--dento-accent-2); }
.sg-auth__brandfoot { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.5); }

/* right-edge fade — blends the seam between panels */
@media (min-width: 992px) {
    .sg-auth__brandpanel::after {
        content: '';
        position: absolute; top: 0; right: 0; bottom: 0; width: 100px;
        background: linear-gradient(to right, transparent, var(--sg-bg));
        pointer-events: none; z-index: 2;
    }
}

/* ── RIGHT: form panel ── */
.sg-auth__formpanel { display: flex; align-items: center; justify-content: center; padding: 40px 22px; background: var(--sg-bg); }
.sg-auth__card { width: 100%; max-width: 410px; }
.sg-auth__logo-m { display: flex; justify-content: center; margin-bottom: 22px; }
@media (min-width: 992px) { .sg-auth__logo-m { display: none; } }

.sg-auth__title { font-size: 28px; font-weight: 800; letter-spacing: -.6px; color: var(--sg-ink); margin: 0 0 6px; }
.sg-auth__msg { font-size: 14px; color: var(--sg-muted); margin: 0 0 26px; }
.sg-auth__msg :is(.text-danger, .text-success) { font-weight: 700; }

.sg-field { margin-bottom: 16px; }
.sg-auth .form-control {
    width: 100%; height: 48px; border-radius: 12px !important;
    background: var(--sg-surface) !important;
    border: 1px solid var(--sg-line) !important;
    color: var(--sg-ink) !important;
    font-size: 14px; padding: 0 15px !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.sg-auth .form-control:focus {
    border-color: var(--sg-accent) !important;
    box-shadow: 0 0 0 3px rgba(14,165,166,.20) !important;
    outline: none;
}
.sg-auth .form-control::placeholder { color: var(--sg-muted); opacity: .7; }

.sg-auth__submit {
    width: 100%; height: 48px; border: 0; border-radius: 12px;
    font-size: 14.5px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #0EA5A6 0%, #17c1c2 100%);
    box-shadow: 0 12px 26px -12px rgba(14,165,166,.75);
    cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.sg-auth__submit:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(14,165,166,.85); filter: brightness(1.05); }
.sg-auth__submit:active { transform: translateY(0); }

.sg-auth__divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--sg-muted); font-size: 12px; font-weight: 700; }
.sg-auth__divider::before, .sg-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--sg-line); }

.sg-auth__google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 48px; border-radius: 12px;
    font-size: 14px; font-weight: 700; color: var(--sg-ink);
    background: var(--sg-surface); border: 1px solid var(--sg-line);
    text-decoration: none; transition: border-color .18s ease, background .18s ease;
}
.sg-auth__google:hover { border-color: var(--sg-accent); background: var(--sg-surface-2); color: var(--sg-ink); }

.sg-auth__forgot { display: block; text-align: right; font-size: 13px; font-weight: 700; color: var(--sg-accent-soft); text-decoration: none; margin: 4px 0 20px; }
.sg-auth__forgot:hover { color: var(--sg-accent); text-decoration: underline; }

.sg-auth__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.sg-auth__btn-outline {
    height: 48px; border-radius: 12px; font-size: 14px; font-weight: 700;
    color: var(--sg-ink); background: transparent;
    border: 1px solid var(--sg-line); text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .18s ease, background .18s ease;
}
.sg-auth__btn-outline:hover { border-color: var(--sg-accent); color: var(--sg-ink); background: var(--sg-surface); }

.sg-auth__remember { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--sg-muted); margin-bottom: 20px; cursor: pointer; }
.sg-auth__remember input { accent-color: var(--sg-accent); width: 15px; height: 15px; }

.sg-auth__hint { font-size: 12.5px; color: var(--sg-muted); margin: 6px 0 18px; }

.sg-auth__back { display: block; text-align: center; font-size: 13px; font-weight: 700; color: var(--sg-accent-soft); text-decoration: none; margin-top: 20px; }
.sg-auth__back:hover { color: var(--sg-accent); text-decoration: underline; }

.sg-auth__info {
    background: rgba(14,165,166,.08); border: 1px solid rgba(14,165,166,.22);
    border-radius: 12px; padding: 20px; font-size: 14px;
    color: var(--sg-muted); margin-bottom: 24px; line-height: 1.6;
}
.sg-auth__info i { color: var(--dento-accent-2); }

@media (prefers-reduced-motion: reduce) {
    .sg-auth__orbs span, .sg-voicewave span { animation: none !important; }
    .sg-voicewave span { transform: scaleY(.7); }
}