/* ============================================================================
   RAS Hub — login page styles
   Ported from the WebApp's Login.razor.css so the hub login matches the main
   product: light-grey left column with a centered white card, brand panel on
   the right. Self-contained (no Bootstrap dependency) — the WebApp relied on
   Bootstrap's grid, so the equivalent two-column layout is reproduced here.
   ========================================================================== */

:root { --ras-primary:#0d57b5; --ras-blue:#2f80ed; }

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:'Oswald','Segoe UI', system-ui, -apple-system, sans-serif;
  background-color:#f0f0f0;
  color:#27252a;
}

/* Two-column full-height layout (WebApp used .row.g-0 + two .col-lg-6). */
.login-shell { display:flex; min-height:100vh; }
.left-col  { flex:1 1 50%; }
.right-col { flex:1 1 50%; padding:0; }

/* Left: centered white card on grey. */
.login-container {
  display:flex; justify-content:center; align-items:center;
  background-color:#f0f0f0; height:100vh;
}
.login-card {
  width:calc(90% - 50px); margin:0 32px; max-width:600px;
  background-color:#fff; border:0; padding:2rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.1); border-radius:4px;
}
.login-card .card-header { background:#fff; border:0; padding:0; }
.login-header {
  font-size:24px; font-weight:500; color:#27252a; text-align:left;
  margin-bottom:1rem; line-height:1.333; -webkit-font-smoothing:antialiased;
}
.login-sub { font-size:14px; color:#5a6a82; margin-bottom:1.25rem; line-height:1.5; }

.form-group { width:100%; max-width:340px; margin-bottom:1rem; }
.login-label {
  display:inline-block; font-size:15px; color:#000; font-weight:500;
  line-height:1.333; margin:0 0 4px; -webkit-font-smoothing:antialiased;
}
.form-control {
  width:100%; height:44px; padding:0 12px; font-size:15px; color:#1a1a2e;
  border:2px solid lightgray; border-radius:4px; background:#fff;
  transition:border-color 0.3s ease; outline:none;
}
.form-control:hover, .form-control:focus { border-color:blue; }
.form-control.is-invalid { border-color:red !important; }

/* Modern outline button (WebApp .btn-modern--primary). */
.btn-modern {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.75rem 1.5rem; font-weight:600; font-size:15px;
  border-radius:0.5rem; border:2px solid transparent; background:transparent;
  transition:background-color 0.2s ease, color 0.2s ease; cursor:pointer;
}
.btn-modern--primary { border-color:var(--ras-blue); color:var(--ras-blue); }
.btn-modern--primary:hover { background-color:var(--ras-blue); color:#fff; }
.btn-modern[disabled] { opacity:.6; cursor:default; }

.login-actions { display:flex; justify-content:flex-end; max-width:340px; margin-top:0.5rem; }

/* Confidentiality notice button under the login form. */
.login-confidential { margin-top:1.5rem; padding-top:1rem; border-top:1px solid #e3e7ee; max-width:360px; }
.confidential-link {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:none; border:none; padding:0; font-family:inherit;
  font-size:12px; font-weight:600; color:var(--ras-primary); text-decoration:underline;
}
.confidential-link svg { width:14px; height:14px; fill:currentColor; }
.confidential-link:hover { color:#3217e3; }

/* Centered confidentiality modal (mirrors the hub modal styling). */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(6,20,40,0.55); align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.open { display:flex; }
.modal-panel {
  position:relative; background:#fff; border-radius:12px; max-width:560px; width:100%;
  padding:26px 28px 22px; box-shadow:0 24px 70px rgba(0,20,45,0.4); animation:modalPop .18s ease-out;
}
@keyframes modalPop { from { transform:translateY(8px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.modal-close { position:absolute; top:12px; right:14px; background:none; border:none; cursor:pointer; font-size:26px; line-height:1; color:#5a6a82; }
.modal-close:hover { color:var(--ras-primary); }
.modal-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.modal-lock { width:40px; height:40px; flex:0 0 auto; border-radius:9px; background:#e8f0fa; display:flex; align-items:center; justify-content:center; }
.modal-lock svg { width:20px; height:20px; fill:var(--ras-primary); }
.modal-head h3 { font-size:17px; font-weight:700; color:var(--ras-primary); }
.ack-note { background:#fff4e0; border:1px solid #f5c87a; color:#8a5a00; font-size:12.5px; font-weight:600; padding:9px 12px; border-radius:8px; margin-bottom:12px; }
.modal-body { font-size:13.5px; line-height:1.6; color:#27252a; max-height:55vh; overflow-y:auto; }
.modal-body p { margin-bottom:10px; }
.modal-body .em { color:#9a4a00; font-weight:600; }
.modal-actions { margin-top:18px; display:flex; justify-content:flex-end; }

/* Error row under the fields. */
.login-error { display:none; padding-top:10px; align-items:center; gap:7px; max-width:340px; }
.login-error.show { display:flex; }
.login-error svg { width:16px; height:16px; fill:red; flex:0 0 auto; }
.login-error span { color:red; font-size:14px; font-weight:500; }

/* Right: white brand panel with RAS logo + animated wordmark. */
.right-default-image {
  background-color:#fff; display:flex; align-items:center; justify-content:center;
  height:100vh; width:100%;
}
.brand-logo-wrap {
  width:min(40vw,360px); display:flex; flex-direction:column;
  align-items:flex-start; position:relative; overflow:hidden; padding-bottom:6px;
}
.brand-logo { width:100%; height:auto; position:relative; z-index:2; background:#fff; display:block; }
/* Small "HUB" label tucked under the blue square (left of the logo), sliding
   down from behind the logo — a compact nod to the WebApp's SPECTRUM treatment. */
.brand-word {
  /* The blue square is the left ~32% of the logo. A 32%-wide block, left-aligned
     in the wrap, sits under the square; text-align:center centers "Hub" beneath it. */
  display:block; width:32%; text-align:center; margin-top:2px;
  position:relative; z-index:1;
  font-family:'Oswald',system-ui,sans-serif; font-weight:600;
  font-size:15px; letter-spacing:3px; text-transform:uppercase;
  color:var(--ras-primary);
  animation:wordSlideDown 1s cubic-bezier(.22,.61,.36,1) 0.45s both;
}
@keyframes wordSlideDown {
  0%   { transform:translateY(-100%); opacity:0; }
  55%  { opacity:1; }
  100% { transform:translateY(0); opacity:1; }
}
@media (prefers-reduced-motion: reduce) { .brand-word { animation:none; } }

/* Hide the brand panel on smaller screens (WebApp behavior). */
@media (max-width:991.98px) {
  .right-col { display:none; }
  .left-col { flex-basis:100%; }
}
@media (max-width:767.98px) {
  .login-card { width:100%; margin:0; padding:1.25rem; }
}

/* Subtle loading spinner inside the button on submit. */
.spinner {
  width:15px; height:15px; border:2px solid rgba(255,255,255,0.5);
  border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }