/* ===== Brand ===== */
:root{
  --brand-primary:#4f46e5;
  --brand-primary-700:#4338ca;
  --header-bg:#0f172a;  /* compact dark header */
  --header-fg:#fff;

  --page-bg:#fff;       /* pure white page */
  --card-bg:#fff;
  --border:#e5e7eb;
  --muted:#6b7280;
}

/* ===== Header (compact, no banner) ===== */
#header{
  background:var(--header-bg) !important;
  color:var(--header-fg) !important;
  padding:10px 16px !important;
  min-height:56px !important;
  display:flex !important; align-items:center !important;
}
#header a{ color:#fff !important; }
#branding{ display:flex !important; align-items:center !important; gap:.6rem !important; }
#branding #site-name,#branding #site-name a{
  margin:0 !important; font-size:16px !important; color:#fff !important; text-decoration:none !important;
}
/* Force small logo even if source is big */
.vlab-logo{ height:28px !important; width:auto !important; object-fit:contain !important; display:block !important; }

/* Right links */
.vlab-nav-global{ margin-left:auto !important; display:flex !important; gap:1rem !important; align-items:center !important; }
.vlab-link{ color:#fff !important; opacity:.9 !important; font-size:13px !important; }
.vlab-link:hover{ opacity:1 !important; text-decoration:underline !important; }

/* ===== Surface ===== */
body{ background:var(--page-bg) !important; }
.module,.card{ background:var(--card-bg) !important; border:1px solid var(--border) !important; border-radius:14px !important; }

/* ===== Buttons ===== */
.button,input[type=submit],.submit-row input[type=submit]{
  background:var(--brand-primary) !important; border-color:var(--brand-primary-700) !important;
}
.button:hover,input[type=submit]:hover,.submit-row input[type=submit]:hover{
  background:var(--brand-primary-700) !important;
}

/* ===== LOGIN ONLY ===== */
body.login{ background:#fff !important; }

/* If your site header/footer leaks in, hide on admin login */
body.login header, body.login footer,
body.login .site-header, body.login .site-footer { display:none !important; }

/* Perfectly centered card on large screens */
body.login #content{
  width:100% !important;
  max-width:520px !important;      /* <= keeps it narrow on desktop */
  margin:0 auto !important;
  min-height:calc(100vh - 56px) !important; /* minus admin header */
  display:grid !important; place-items:center !important;
  padding:24px 12px !important;
}
.vlab-login-wrap{ max-width:550px !important; 
margin: 50px auto !important;
padding: 30px !important;
}

/* Header above form */
.vlab-login-head{ text-align:center !important; margin-bottom:12px !important; }
.vlab-login-logo{ height:48px !important; width:auto !important; display:inline-block !important; }
.vlab-login-title{ margin:6px 0 0 !important; font-size:18px !important; }
.vlab-login-sub{ margin:2px 0 0 !important; font-size:13px !important; color:var(--muted) !important; }

/* Card + inputs */
.vlab-login-card{ padding:30px !important; border-radius:16px !important; box-shadow:0 18px 40px rgba(0,0,0,.08) !important; }
#login-form .form-row{ margin-bottom:12px !important; }
#login-form input[type=text], #login-form input[type=password]{
  width:100% !important; border-radius:8px !important; padding:.6rem .75rem !important;
  border: 1px solid #ccc;
}
#login-form .submit-row{ text-align:right !important; }
#login-form input[type=submit]{ padding:.5rem 1rem !important; border-radius:8px !important; color: white;}

/* Forgot link */
.vlab-login-foot{ text-align:center !important; margin-top:12px !important; }
.vlab-login-foot a{ text-decoration:none !important; }
.vlab-login-foot a:hover{ text-decoration:underline !important; }
/* Error styling */
.is-invalid { border-color:#dc2626 !important; box-shadow:0 0 0 .2rem rgba(220,38,38,.08) !important; }
ul.errorlist { margin:6px 0 0 !important; color:#b91c1c !important; }
ul.errorlist.nonfield { margin-bottom:10px !important; }
.form-hint { font-size:12px; color:#6b7280; margin-top:4px; }
.form-hint:not(.d-none){ color:#b45309; } /* amber when visible */
.d-none { display:none !important; }

/* Mobile: full width */
@media (max-width:576px){
  #branding #site-name{ font-size:14px !important; }
  .vlab-logo{ height:24px !important; }
  body.login #content{ max-width:100% !important; padding:16px 10px !important; }
  .vlab-login-card{ border-radius:12px !important; }
}