/* Novaedd login-only styles (inspired mock).
   Primary selector was body.view-login (toggled by JS).
   To avoid any FOUC or dependency on JS timing when redirecting to #/login,
   we also scope the same rules under .login-container (root of the login view).
   This ensures the login renders with the modern style on first paint. */

/* Import fonts for headings/body */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Merriweather:wght@700;900&display=swap');

body.view-login,
.login-container{
  --login-bg: #1F2630;          /* slate blue background */
  --login-card: #232A35;        /* surface for card */
  --login-border: #2F3744;      /* subtle border */
  --login-text: #E9EDF2;        /* main text */
  --login-muted: #B6C2D0;       /* muted text */
  --login-primary: #0A84FF;     /* blue */
  --login-gold: #D4A73F;        /* gold accent */
  --login-gold-hover: #B98A2E;  /* gold hover */
  --login-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Page background/typography on first paint */
body.view-login{
  background: var(--login-bg) !important;
  color: var(--login-text) !important;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
  min-height: 100vh;
}
.login-container{
  background: var(--login-bg);
  color: var(--login-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Decorative right bar similar to mock */
body.view-login::after,
.login-container::after{
  content: "";
  position: fixed; top: 0; right: 0; bottom: 0; width: 8px;
  background: linear-gradient(180deg, #D4A73F 0%, #A67C1E 100%);
  opacity: .95; pointer-events: none;
}

/* Center content */
.login-container .container-fluid,
.login-container .container,
body.view-login .container-fluid,
body.view-login .container{
  min-height: calc(100vh - 0px);
  display: flex; align-items: center; justify-content: center;
}

/* Card / panel */
.login-container .card, .login-container .panel,
body.view-login .card, body.view-login .panel{
  width: 100%; max-width: 520px;
  padding: 36px 32px; margin: 24px 16px;
  background: var(--login-card) !important;
  border: 1px solid var(--login-border) !important;
  box-shadow: var(--login-shadow) !important;
  border-radius: 16px !important;
}

/* Header */
.login-container .login-icon,
body.view-login .login-icon{
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--login-gold); color: #111; display:flex; align-items:center; justify-content:center;
  margin: 0 auto 12px auto; font-size: 26px; font-weight: 800;
}
.login-container h1, .login-container .login-title,
body.view-login h1, body.view-login .login-title{
  font-family: 'Merriweather', serif !important;
  font-size: 32px; font-weight: 900; letter-spacing: .4px;
  text-align: center; color: var(--login-text) !important; margin: 8px 0 4px 0;
}
.login-container .login-subtitle,
body.view-login .login-subtitle{
  text-align: center; color: var(--login-muted); font-size: 13px; margin-bottom: 10px;
}
.login-container .login-tag,
body.view-login .login-tag{
  display: inline-block; margin: 4px auto 18px auto; padding: 6px 10px;
  border-radius: 8px; background: rgba(212,167,63,.15); color: var(--login-gold); font-weight: 600; font-size: 12px;
}

/* Labels / inputs */
.login-container label{ color: var(--login-text); font-weight: 600; font-size: 13px; }
.login-container .form-control,
.login-container input[type="text"],
.login-container input[type="password"],
.login-container input[type="email"],
body.view-login label{ color: var(--login-text) !important; font-weight: 600; font-size: 13px; }
body.view-login .form-control,
body.view-login input[type="text"],
body.view-login input[type="password"],
body.view-login input[type="email"]{
  background: #1E2530 !important; color: var(--login-text) !important;
  border: 1px solid var(--login-border) !important; border-radius: 10px !important;
  height: 48px; padding: 10px 14px; transition: all .15s ease;
}
.login-container .form-control:focus,
.login-container input:focus,
body.view-login .form-control:focus,
body.view-login input:focus{
  border-color: var(--login-primary) !important; box-shadow: 0 0 0 3px rgba(10,132,255,.25) !important;
}
.login-container .input-group-text{ background: #1E2530; border: 1px solid var(--login-border); color: #8CA0B3; }
body.view-login .input-group-text{ background: #1E2530 !important; border: 1px solid var(--login-border) !important; color: #8CA0B3 !important; }

/* Remember checkbox */
.login-container .form-check-input{ border-color: var(--login-border); }
.login-container .form-check-input:checked{ background: var(--login-primary); border-color: var(--login-primary); }
.login-container .form-check-label{ color: var(--login-muted); }
body.view-login .form-check-input{ border-color: var(--login-border) !important; }
body.view-login .form-check-input:checked{ background: var(--login-primary) !important; border-color: var(--login-primary) !important; }
body.view-login .form-check-label{ color: var(--login-muted) !important; }

/* Primary action */
.login-container .btn-primary,
.login-container button[type="submit"],
.login-container .btn[type="submit"],
body.view-login .btn-primary,
body.view-login button[type="submit"],
body.view-login .btn[type="submit"]{
  height: 48px; border-radius: 10px !important; font-weight: 800;
  background: var(--login-gold) !important; border-color: var(--login-gold) !important; color: #111 !important;
}
.login-container .btn-primary:hover,
.login-container button[type="submit"]:hover,
body.view-login .btn-primary:hover,
body.view-login button[type="submit"]:hover{
  background: var(--login-gold-hover) !important; border-color: var(--login-gold-hover) !important;
}

/* Links */
.login-container a{ color: var(--login-primary); }
.login-container .link-gold{ color: var(--login-gold); }
.login-container a:hover{ opacity: .9; }
body.view-login a{ color: var(--login-primary) !important; }
body.view-login .link-gold{ color: var(--login-gold) !important; }
body.view-login a:hover{ opacity: .9; }

/* Neutralize navbar/brand if present on login */
body.view-login .navbar, body.view-login header{
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.view-login .navbar .nav-link, body.view-login .navbar a{ color: var(--login-text) !important; }

/* Tables if any rendered inside login */
body.view-login .table thead th{ background: #202733 !important; border-bottom-color: var(--login-border) !important; }
body.view-login .table, body.view-login .table td, body.view-login .table th{ border-color: var(--login-border) !important; }

/* Hide heavy dashboard layout pieces if they leak into login */
body.view-login .sidebar, body.view-login .sidenav, body.view-login .mat-sidenav{ display: none !important; }

/* LoftTrading login neon hero overlay */
/* Neon styles are now in component SCSS (login) */