:root{
  --petrol:#4284b5;
  --bronze:#be905d;
  --black:#000000;
  --white:#ffffff;

  /* Match lists/home vibe */
  --page-bg:#121212;
  --surface:#1c1c1c;
  --border:#333333;
}

/* ============================================================
   Page base
   ============================================================ */

body.login-page{
  background: var(--page-bg);
  color: var(--white);
  font-family:"Segoe UI", Arial, sans-serif;

  /* Login pages rely on sticky footer layout */
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;

  /* If footer is fixed (WebView workaround), keep content visible */
  padding-bottom: 90px;
}

/* Login page: don't show install bar (breaks layout expectations) */
body.login-page #nabuInstallBar{ display:none !important; }

/* Layout wrapper */
main.login-main{
  flex: 1 0 auto !important;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 16px 40px;
}

/* Lift login boxes slightly higher on large screens */
@media (min-height: 800px){
  main.login-main{ padding-top: 80px; }
}

body.login-page footer{
  margin-top: auto !important;
}

/* ============================================================
   Card / layout
   ============================================================ */

.login-wrap{
  width: 100%;
  max-width: 420px;
}

.login-box{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  overflow: hidden;
}

.login-title{
  margin: 0;
  padding: 18px 18px 0;
  color:#fff;
  font-size: 1.6rem;
  font-weight: 800;
}

.login-box form{ padding: 14px 18px 18px; }

.login-footer{
  padding: 0 18px 18px;
  text-align: center;
}

/* Labels */
body.login-page .form-label{
  color:#ddd;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Inputs */
body.login-page .form-control{
  background:#2c2c2c;
  border:1px solid #444;
  color:#fff;
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.login-page .form-control:focus,
body.login-page .form-control:focus-visible{
  outline:none;
  border-color: var(--petrol);
  box-shadow: 0 0 0 2px rgba(66,132,181,0.35);
}

/* Links */
.login-link{
  color: rgba(255,255,255,0.92);
  text-decoration:none;
  font-weight:700;
  transition: color .15s ease;
}
.login-link:hover,
.login-link:focus-visible{
  color: var(--petrol);
  text-decoration:none;
}

/* ============================================================
   Lists-style buttons (login)
   ============================================================ */

.lists-btn{
  background:#2c2c2c;
  border:1px solid #444;
  color:#fff;
  padding: 9px 12px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.lists-btn:hover,
.lists-btn:focus-visible{
  background-color: rgba(66,132,181,0.18);
  border-color: var(--petrol);
  box-shadow: inset 0 0 0 1px rgba(66,132,181,0.25);
  outline:none;
}

/* Petrol-tinted primary */
.lists-btn-primary-tint{
  background: rgba(66,132,181,0.14);
  border-color: rgba(66,132,181,0.45);
  box-shadow: inset 0 0 0 1px rgba(66,132,181,0.22);
}
.lists-btn-primary-tint:hover,
.lists-btn-primary-tint:focus-visible{
  background: rgba(66,132,181,0.24);
  border-color: rgba(66,132,181,0.75);
  box-shadow: inset 0 0 0 1px rgba(66,132,181,0.35);
  outline:none;
}

/* Success glass */
.lists-btn-success{
  background: rgba(40,167,69,0.10);
  border-color: rgba(40,167,69,0.35);
  box-shadow: inset 0 0 0 1px rgba(40,167,69,0.22);
}
.lists-btn-success:hover{
  background: rgba(40,167,69,0.22);
  border-color: rgba(40,167,69,0.55);
  box-shadow: inset 0 0 0 1px rgba(40,167,69,0.40);
}
.lists-btn-success:focus-visible{
  outline:none;
  box-shadow: inset 0 0 0 2px rgba(40,167,69,0.55);
}

/* Disabled buttons */
body.login-page .lists-btn:disabled,
body.login-page .lists-btn[aria-disabled="true"]{
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.8);
  box-shadow: none;
}
body.login-page .lists-btn:disabled:hover,
body.login-page .lists-btn[aria-disabled="true"]:hover{
  background:#2c2c2c;
  border-color:#444;
  box-shadow:none;
}

/* ============================================================
   Reset page helpers
   ============================================================ */

.login-errorbox{
  background: rgba(176,42,55,0.18);
  border: 1px solid rgba(176,42,55,0.55);
  box-shadow: inset 0 0 0 1px rgba(176,42,55,0.30);
  border-radius: 12px;
  padding: 10px 12px;
  color:#ffd7d7;
  font-weight:700;
}

.login-strength{
  height: 8px;
  border-radius: 999px;
  margin-top: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  overflow:hidden;
}
.login-strength-bar{
  height: 8px;
  width: 0%;
  transition: width .3s ease;
  background:#444;
}

.login-help{
  margin-top: 8px;
  color: rgba(255,255,255,0.70);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
}

/* Password requirements */
.pw-req{
  list-style:none;
  margin: 10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pw-req-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  font-weight: 700;
  font-size: 0.92rem;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pw-req-item i{
  width: 16px;
  text-align:center;
  opacity:0.95;
}
.pw-req-item.ok{
  background: rgba(40,167,69,0.12);
  border-color: rgba(40,167,69,0.35);
  color: rgba(235,255,242,0.95);
}
.pw-req-item.ok i{ color: rgba(40,167,69,0.90); }

.pw-req-item.bad{
  background: rgba(176,42,55,0.10);
  border-color: rgba(176,42,55,0.28);
  color: rgba(255,225,228,0.90);
}
.pw-req-item.bad i{ color: rgba(176,42,55,0.90); }

.pw-match{ margin-top: 10px; }

#pw-match.is-empty{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
}
#pw-match.is-empty i{ opacity: 0.55; }

/* ============================================================
   LOGIN ONLY: footer fixed hack (WebView)
   ============================================================ */

.footer-login-fixed{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 3000;
}

/* ==========================================================
   Password toggle (override inherited button styles)
========================================================== */

.password-wrapper {
    position: relative;
}

.password-wrapper .form-control {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0;
    margin: 0;
    color: #aaa;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease, transform .15s ease;
}

.password-toggle:hover,
.password-toggle:focus,
.password-toggle:active {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: #fff;
}

.password-toggle:active {
    transform: translateY(-50%) scale(0.95);
}