/* ==========================================================================
   VIZVAKUR BHARATH — Authentication screens
   Used by: login.aspx, forgot.aspx, adminlogin.aspx, success.aspx
   Depends on: vb-core.css
   Note: styling only. All ASP.NET server controls keep their own IDs.
   ========================================================================== */

.vb-auth{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  background:var(--vb-ink-900);
}
@media (min-width:960px){
  .vb-auth{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}

/* ---------- Brand / visual side ---------- */
.vb-auth__aside{
  position:relative;
  display:none;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(2rem,1.3rem + 2.4vw,3.5rem);
  overflow:hidden;
  isolation:isolate;
}
@media (min-width:960px){.vb-auth__aside{display:flex}}
.vb-auth__aside img.vb-auth__bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.8);
}
.vb-auth__aside::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(165deg,rgba(7,10,28,.82) 0%,rgba(11,16,38,.9) 55%,rgba(7,10,28,.97) 100%),
    radial-gradient(ellipse 70% 60% at 15% 15%,rgba(232,163,61,.24),transparent 62%);
}

.vb-auth__brand{display:flex;align-items:center;gap:.85rem}

.vb-auth__pitch{max-width:34ch}
.vb-auth__pitch h2{
  font-size:clamp(1.9rem,1.4rem + 1.8vw,2.85rem);
  line-height:1.1;
}
.vb-auth__pitch p{
  margin-top:1.15rem;
  color:rgba(245,241,232,.74);
  font-size:1.02rem;line-height:1.7;
}
.vb-auth__trust{margin-top:2rem;display:grid;gap:.9rem}
.vb-auth__trust li{
  display:flex;gap:.75rem;align-items:flex-start;
  font-size:.92rem;
  color:rgba(245,241,232,.8);
}
.vb-auth__trust svg{
  width:17px;height:17px;flex:none;margin-top:.3rem;
  stroke:var(--vb-saffron);stroke-width:2.2;fill:none;
}
.vb-auth__aside-foot{
  font-size:.76rem;
  color:var(--vb-text-dim);
  letter-spacing:.03em;
}

/* ---------- Form side ---------- */
.vb-auth__main{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(2rem,1.2rem + 3vw,4rem) var(--vb-gutter);
  background:var(--vb-ink-850);
  overflow:hidden;
  isolation:isolate;
}
.vb-auth__main::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%,rgba(232,163,61,.13),transparent 62%),
    radial-gradient(ellipse 60% 50% at 10% 100%,rgba(42,157,143,.11),transparent 62%);
}

.vb-authcard{
  width:100%;max-width:430px;
}
.vb-authcard__brand{
  display:flex;align-items:center;gap:.8rem;
  margin-bottom:2.25rem;
}
@media (min-width:960px){.vb-authcard__brand{display:none}}

.vb-authcard h1{
  font-size:clamp(1.7rem,1.4rem + 1.1vw,2.2rem);
  margin-bottom:.55rem;
}
.vb-authcard__sub{
  color:var(--vb-text-muted);
  font-size:.95rem;
  margin-bottom:2rem;
}

/* ASP.NET validation labels.
   A Label with no Text still renders as <span id="..."></span>, so the box
   must be driven by whether the span has content — never by its presence.
   The wrapper therefore carries no margin of its own (that lives on the
   filled state) and the empty span is taken out of flow, otherwise its
   empty inline box would still generate a line box roughly 27px tall. */
.vb-authcard .vb-alert{
  display:block;
  margin:0;
  padding:0;
  border:0;
}
.vb-authcard .vb-alert span:empty{display:none}
.vb-authcard .vb-alert span:not(:empty){
  display:block;
  margin-bottom:1rem;
  padding:.75rem 1rem;
  border-radius:var(--vb-r-sm);
  border:1px solid rgba(224,122,107,.35);
  background:rgba(224,122,107,.1);
  font-size:.88rem;
  line-height:1.5;
}
/* ForeColor="Green" renders an inline style — pair success messages with a
   teal panel instead of the error red. */
.vb-authcard .vb-alert span:not(:empty)[style*="Green"],
.vb-authcard .vb-alert span:not(:empty)[style*="green"]{
  border-color:rgba(127,207,196,.38);
  background:rgba(42,157,143,.12);
}

.vb-auth__options{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  margin-bottom:1.6rem;
}
.vb-auth__link{
  font-size:.86rem;font-weight:600;
  color:var(--vb-marigold);
  transition:color .3s var(--vb-ease);
}
.vb-auth__link:hover{color:var(--vb-saffron)}

/* Server-rendered <input type=submit> gets the gold button treatment */
.vb-authcard input[type=submit].vb-btn,
.vb-authcard input[type=submit].vb-btn--gold{
  width:100%;
  display:block;
  padding:.98rem 1.7rem;
  border:0;
  border-radius:var(--vb-r-pill);
  background:var(--vb-grad-gold);
  color:#0A0D1F;
  font-family:var(--vb-font-body);
  font-size:.9rem;font-weight:700;
  letter-spacing:.045em;text-transform:uppercase;
  cursor:pointer;
  box-shadow:var(--vb-shadow-gold);
  transition:transform .3s var(--vb-ease-out),box-shadow .3s var(--vb-ease);
}
.vb-authcard input[type=submit].vb-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 56px -20px rgba(232,163,61,.72);
}
.vb-authcard input[type=submit].vb-btn:active{transform:translateY(0)}

.vb-auth__foot{
  margin-top:1.9rem;padding-top:1.5rem;
  border-top:1px solid var(--vb-line);
  font-size:.86rem;
  color:var(--vb-text-dim);
  text-align:center;
}
.vb-auth__foot a{color:var(--vb-marigold);font-weight:600}
.vb-auth__foot a:hover{color:var(--vb-saffron)}

.vb-auth__back{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-top:1.6rem;
  font-size:.82rem;
  color:var(--vb-text-dim);
  transition:color .3s var(--vb-ease);
}
.vb-auth__back svg{width:14px;height:14px;transition:transform .3s var(--vb-ease-out)}
.vb-auth__back:hover{color:var(--vb-marigold)}
.vb-auth__back:hover svg{transform:translateX(-3px)}

/* ---------- Admin variant: teal key light instead of saffron ---------- */
.vb-auth--admin .vb-auth__main::before{
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%,rgba(42,157,143,.16),transparent 62%),
    radial-gradient(ellipse 60% 50% at 10% 100%,rgba(35,42,92,.5),transparent 62%);
}
.vb-auth--admin .vb-authcard{
  padding:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);
  border:1px solid var(--vb-line);
  border-radius:var(--vb-r-xl);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--vb-shadow-lg);
}
.vb-auth__shield{
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:16px;
  border:1px solid rgba(127,207,196,.34);
  background:linear-gradient(150deg,rgba(42,157,143,.24),rgba(42,157,143,.05));
  color:var(--vb-teal-soft);
  margin-bottom:1.4rem;
}
.vb-auth__shield svg{width:23px;height:23px;stroke-width:1.6;fill:none}

/* ---------- Success / account-details screen ---------- */
.vb-success{
  min-height:100vh;min-height:100svh;
  display:grid;place-items:center;
  padding:calc(var(--vb-header-h) + 2rem) var(--vb-gutter) 3rem;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.vb-success::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,rgba(232,163,61,.17),transparent 65%),
    radial-gradient(ellipse 70% 60% at 50% 100%,rgba(42,157,143,.13),transparent 65%);
}
.vb-success__card{
  width:100%;max-width:560px;
  padding:clamp(1.75rem,1.2rem + 2vw,3rem);
  border:1px solid var(--vb-gold-line);
  border-radius:var(--vb-r-xl);
  background:rgba(11,16,38,.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--vb-shadow-lg);
  text-align:center;
}
.vb-success__tick{
  width:66px;height:66px;
  display:grid;place-items:center;
  margin:0 auto 1.5rem;
  border-radius:50%;
  background:var(--vb-grad-gold);
  color:#0A0D1F;
  box-shadow:var(--vb-shadow-gold);
}
.vb-success__tick svg{width:29px;height:29px;stroke-width:2.6;fill:none;stroke:currentColor}
.vb-success__card h1{font-size:clamp(1.6rem,1.35rem + 1vw,2.1rem);margin-bottom:.7rem}
.vb-success__card > p{color:var(--vb-text-muted);font-size:.96rem;margin-bottom:2rem}

.vb-success__table{
  text-align:left;
  border:1px solid var(--vb-line);
  border-radius:var(--vb-r-md);
  overflow:hidden;
  background:rgba(7,10,28,.5);
}
.vb-success__table td{
  padding:.95rem 1.25rem;
  border-bottom:1px solid var(--vb-line);
  font-size:.94rem;
}
.vb-success__table tr:last-child td{border-bottom:0}
.vb-success__table td:first-child{
  width:42%;
  font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--vb-text-dim);
}
.vb-success__table td:last-child{
  font-family:var(--vb-font-mono);
  color:var(--vb-marigold);
  font-weight:600;
}
.vb-success__card .vb-btn{margin-top:1.9rem}
.vb-success__note{
  margin-top:1.5rem;
  font-size:.8rem;
  color:var(--vb-text-dim);
}