/* auth.css — isolated styles for the GTS sign-in screen.
   Everything is scoped under .gts-auth-body so it never touches the app.
   Trimmed to only the selectors used by login.cshtml. */

.gts-auth-body{ margin:0; min-height:100vh; font-family:'Segoe UI',system-ui,-apple-system,sans-serif; color:#e7ebf3; background: radial-gradient(circle at top left, rgba(0,120,212,.4), transparent 35%), radial-gradient(circle at bottom right, rgba(107,70,255,.3), transparent 30%), #0b1120; display:flex; flex-direction:column; }

/* Decorative animated dot layer. This renders regardless of the markup and
   needs /img/dots.svg. Delete this rule + the keyframes below if unused. */
.gts-auth-body::before{ content:""; position:fixed; inset:0; background:url('/img/dots.svg'); opacity:.05; animation:floatParticles 40s linear infinite; pointer-events:none; } @keyframes floatParticles{ from{ transform:translateY(0); } to{ transform:translateY(-200px); } }

.gts-auth-shell{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 16px; }

.gts-auth-card{ width:min(1080px,100%); display:grid; grid-template-columns:1.05fr 1fr; background:rgba(15,23,42,.92); border:1px solid rgba(255,255,255,.08); border-radius:24px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45); backdrop-filter:blur(20px); min-height:430px; }

.gts-auth-brand{ position:relative; padding:34px; display:flex; flex-direction:column; background:linear-gradient(135deg,#3a0d12 0%, #1a0a14 60%, #120a1f 100%); }

.gts-auth-brand-name{ font-size:.78rem; font-weight:700; letter-spacing:.22em; color:rgba(255,255,255,.45); text-transform:uppercase; margin-bottom:24px; }

.gts-auth-hero{ margin-top:auto; background:#fff; border-radius:20px; overflow:hidden; min-height:420px; display:flex; align-items:center; justify-content:center; }
.gts-auth-hero img{ width:100%; height:100%; object-fit:contain; display:block; }

.gts-auth-main{
    padding:48px 44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.gts-auth-title{
    margin:0;
    font-size:2rem;
    font-weight:700;
    color:#fff;
}

.gts-auth-sub{
    margin:8px 0 28px;
    color:rgba(231,235,243,.6);
    font-size:.95rem;
}

.gts-auth-options{
    background:linear-gradient(180deg, rgba(40,58,110,.35), rgba(20,28,56,.25));
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.gts-auth-btn{
    position:relative;
    display:block;
    overflow:hidden;
    text-align:center;
    text-decoration:none;
    padding:15px 18px;
    border:none;
    border-radius:14px;
    font-weight:700;
    letter-spacing:.04em;
    color:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
    transition:.35s ease;
}
.gts-auth-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-150%;
    width:70%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transform:skewX(-24deg);
    transition:.75s;
}
.gts-auth-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.07);
    box-shadow:0 10px 25px rgba(59,130,246,.35);
}
.gts-auth-btn:hover::before{ left:180%; }
.gts-auth-btn:active{ transform:translateY(0); }

.gts-auth-btn--gts{
    background:linear-gradient(135deg, #7c3aed 0%, #8b5cf6 45%, #ec4899 100%);
}
.gts-auth-btn--azure{
    background:linear-gradient(135deg, #2563eb 0%, #3b82f6 40%, #06b6d4 100%);
}

.gts-auth-error{
    margin-top:18px;
    color:#ff9a9a;
    font-size:.88rem;
}

.gts-auth-foot{
    padding:18px;
    color:rgba(231,235,243,.4);
    font-size:.82rem;
    text-align:center;
}

@media (max-width:760px){
    .gts-auth-card{ grid-template-columns:1fr; }
    .gts-auth-brand{ min-height:160px; }
    .gts-auth-main{ padding:34px 26px; }
}