/* ==================================================================
   Auth Blue Theme (Login, Enroll2FA, Verify2FA)
   - Split layout: left illustration, right blue panel with rounded edge
   - White auth card centered on the blue panel
   - Works with Bootstrap 5
   Usage:
     <link rel="stylesheet" href="~/css/auth-blue.css" asp-append-version="true" />
     <div class="ab-shell">
       <aside class="ab-side"><img class="ab-illustration" src="~/img/login-illustration.svg" alt="" /></aside>
       <main class="ab-panel"><div class="ab-card card"> ... </div></main>
     </div>
   ================================================================== */

:root{
  --ab-bg:#ffffff;
  --ab-blue:#1f66ff;         /* primary */
  --ab-blue-600:#1750cc;     /* hover */
  --ab-blue-50:#eaf1ff;
  --ab-text:#0f172a;         /* slate-900 */
  --ab-text-dim:#6b7280;     /* slate-500 */
  --ab-border:#e5e7eb;       /* gray-200 */
  --ab-card:#ffffff;
  --ab-shadow: 0 14px 40px rgba(31,102,255,.18);
  --ab-radius-xl: 28px;
  --ab-radius-lg: 18px;
  --ab-focus: 0 0 0 .2rem rgba(31,102,255,.25);
}

html, body { height: 100%; background: var(--ab-bg); color: var(--ab-text); }

/* Shell layout: 2 columns (left illustration, right blue panel) */
.ab-shell{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr minmax(520px, 44vw);
  gap: 0;
  background: var(--ab-bg);
}

/* Left side (illustration) */
.ab-side{
  display:flex; align-items:center; justify-content:center;
  padding: clamp(16px, 3vw, 48px);
  background: var(--ab-bg);
}
.ab-illustration{
  max-width: min(560px, 85%);
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Right blue panel */
.ab-panel{
  position: relative;
  background: var(--ab-blue);
  border-radius: var(--ab-radius-xl) 0 0 var(--ab-radius-xl);
  display:flex; align-items:center; justify-content:center;
  padding: clamp(20px, 3vw, 48px);
  overflow:hidden;
}

/* Decorative arcs */
.ab-panel::before,
.ab-panel::after{
  content:"";
  position:absolute;
  right: -14%;
  bottom: -20%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
}
.ab-panel::after{
  right: -6%;
  bottom: -10%;
  width: 60%;
  height: 60%;
  border-color: rgba(255,255,255,.25);
}

/* White auth card */
.ab-card.card{
  width: min(420px, 92%);
  background: var(--ab-card);
  border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius-lg);
  box-shadow: var(--ab-shadow);
  z-index: 1;
}
.ab-card .card-header{
  background: transparent;
  border-bottom: none;
  padding: 1.25rem 1.25rem .25rem;
}
.ab-card .card-body{ padding: 1.25rem; }

/* Headline + helper */
.ab-title{ font-weight: 800; font-size: 1.35rem; margin: 0 0 .25rem; color: var(--ab-text); }
.ab-sub{ color: var(--ab-text-dim); margin-bottom: .75rem; }

/* Form controls (base) */
.ab-card .form-label{ font-weight: 600; color: #334155; }
.ab-card .form-control{
  border-radius: 12px;
  border:1px solid var(--ab-border);
  background: #fff;
  padding:.6rem .75rem;
}
.ab-card .form-control:focus{
  border-color: var(--ab-blue);
  box-shadow: var(--ab-focus);
  outline: none;
}

/* Primary button */
.ab-card .btn-primary{
  --bs-btn-bg: var(--ab-blue);
  --bs-btn-border-color: var(--ab-blue);
  --bs-btn-hover-bg: var(--ab-blue-600);
  --bs-btn-hover-border-color: var(--ab-blue-600);
  border-radius: 12px;
  padding: .6rem .75rem;
}

/* Subtle links on white card */
.ab-card a { color: var(--ab-blue); }

/* Footer link (optional) */
.ab-footer-link{ color: #0ea5e9; text-decoration:none; }
.ab-footer-link:hover{ color:#0284c7; text-decoration:underline; }

/* Validation */
.ab-card .text-danger{ color: #dc2626 !important; }

/* ===== Enroll2FA extras ===== */
.ab-qr{
  display:flex; align-items:center; justify-content:center;
  background: var(--ab-blue-50);
  border:1px solid var(--ab-border);
  border-radius: 16px;
  padding: .75rem;
}
.ab-qr img{ width: 220px; max-width: 100%; height:auto; }

/* Secret badge */
.ab-secret{
  display:inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: .35rem .55rem;
  border-radius: 10px;
  background:#eef2ff;
  border:1px solid #dbeafe;
  color:#1e3a8a;
}

/* OTP input */
.ab-otp{
  letter-spacing: .3em;
  text-align:center;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.ab-helptxt{ color: var(--ab-text-dim); font-size:.9rem; }

/* ===== Responsive ===== */
@media (max-width: 992px){
  .ab-shell{ grid-template-columns: 1fr; }
  .ab-side{ display:none; }
  .ab-panel{ border-radius: 0; }
}

/* ==================================================================
   Input polish (Auth Blue) — bigger, rounded inputs with icons
   ================================================================== */

/* Labels */
.ab-card .form-label{
  font-weight: 700;
  font-size: .95rem;
  color: #0f172a;
  margin-bottom: .35rem;
}

/* Inputs: bigger, rounded, soft shadow, smooth focus */
.ab-card .form-control{
  height: 48px;                        /* bigger touch target */
  border-radius: 14px;
  border: 1.5px solid #dbe2f1;
  background: #ffffff;
  padding: .6rem .9rem;
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.ab-card .form-control::placeholder{ color:#94a3b8; opacity:1; }
.ab-card .form-control:focus{
  border-color: var(--ab-blue);
  box-shadow: var(--ab-focus), 0 1px 0 rgba(15,23,42,.03);
  outline: none;
}

/* Add subtle leading icons (pure CSS, no markup changes) */
.ab-card input[name="UserName"].form-control{
  padding-left: 2.6rem;                /* space for icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 1 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 20px 20px;
}
.ab-card input[type="password"].form-control{
  padding-left: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 20px 20px;
}

/* Spacing between fields */
.ab-card .mb-3{ margin-bottom: 1rem !important; }

/* Button: taller + bold */
.ab-card .btn-primary{
  height: 48px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(31,102,255,.18);
}
.ab-card .btn-primary:active{ transform: translateY(1px); }

/* Optional: make validation text align nicely under inputs */
.ab-card .text-danger{
  font-size: .9rem;
  margin-top: .35rem;
}