/* ============================================================
   PROFESSIONAL LOGIN / AUTH THEME
   Split-screen: Balanexa navy and teal brand panel + clean form card
   ============================================================ */
:root{
  --primary:#007e80;
  --primary-dark:#00666a;
  --primary-light:#20bcb4;
  --ink:#1f2937;
  --ink-soft:#6b7280;
  --line:#e5e7eb;
  --surface:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"Nunito","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#eef1f8;
  -webkit-font-smoothing:antialiased;
}

.login-page,.register-page{min-height:100vh;display:flex}
.login-page .container,.register-page .container{max-width:100%;width:100%;padding:0;margin:0}

/* Two-panel shell */
.form-outer{
  width:100%;
  min-height:100vh;
  display:grid!important;
  grid-template-columns:1.1fr 1fr;
  align-items:stretch!important;
}

/* Left brand panel */
.auth-brand{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:60px 70px;
  color:#fff;
  background:linear-gradient(135deg,#007e80 0%,#00666a 45%,#00766d 100%);
  overflow:hidden;
}
.auth-brand::before{
  content:"";
  position:absolute;top:-120px;right:-120px;
  width:360px;height:360px;border-radius:50%;
  background:rgba(255,255,255,.08);
}
.auth-brand::after{
  content:"";
  position:absolute;bottom:-140px;left:-80px;
  width:300px;height:300px;border-radius:50%;
  background:rgba(255,255,255,.06);
}
.auth-brand .brand-inner{position:relative;z-index:2;max-width:420px}
.auth-brand h2{font-size:2.3rem;font-weight:800;line-height:1.2;margin:0 0 18px;letter-spacing:-.5px;color:#fff}
.auth-brand p{font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.85);margin:0 0 30px}
.auth-brand .brand-badges{list-style:none;padding:0;margin:0}
.auth-brand .brand-badges li{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:.98rem;color:rgba(255,255,255,.92)}
.auth-brand .brand-badges li .dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.15);flex:0 0 30px;
}

/* Right form panel */
.auth-right{
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px;background:var(--surface);
}
.form-inner{
  width:100%;max-width:420px;
  margin:auto;
  padding:48px 44px;
  background:var(--surface);
  text-align:left!important;
}

.form-inner .logo{margin-bottom:24px;text-align:center}
.form-inner .logo img{max-width:210px;height:auto}
.form-inner .logo span{font-size:1.8rem;font-weight:800;color:var(--primary)}
.form-inner .welcome-title{font-size:1.5rem;font-weight:800;margin:0 0 6px;text-align:center;color:var(--ink)}
.form-inner .welcome-sub{font-size:.95rem;color:var(--ink-soft);margin:0 0 30px;text-align:center}

/* Floating material inputs */
.form-group-material{position:relative;margin-bottom:26px}
.input-material{
  width:100%;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f9fafb;
  padding:18px 14px 8px;
  font-size:1rem;
  color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
  outline:none;
}
.input-material:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(0,171,158,.15);
}
.label-material{
  position:absolute;left:14px;top:15px;
  font-size:1rem;color:#9ca3af;
  pointer-events:none;
  transition:all .15s ease;
}
.label-material.active,
.input-material:focus + .label-material{
  top:6px;font-size:.7rem;color:var(--primary);font-weight:700;letter-spacing:.3px;text-transform:uppercase;
}

/* Button */
.btn-primary.btn-block,.login-page .btn-primary,.register-page .btn-primary{
  width:100%;
  border:none;
  border-radius:10px;
  padding:13px 16px;
  font-weight:700;
  font-size:1rem;
  letter-spacing:.3px;
  color:#fff;
  background:linear-gradient(135deg,#007e80,#00666a);
  box-shadow:0 6px 18px rgba(0,171,158,.35);
  transition:transform .12s ease,box-shadow .2s ease,filter .2s ease;
}
.login-page .btn-primary:hover,.register-page .btn-primary:hover{filter:brightness(1.05);box-shadow:0 8px 22px rgba(0,171,158,.45)}
.login-page .btn-primary:active{transform:translateY(1px)}

/* Links & footer */
.forgot-pass{
  display:block;margin-top:20px;text-align:center;
  color:var(--primary);font-weight:600;font-size:.9rem;text-decoration:none;
}
.forgot-pass:hover{text-decoration:underline;color:var(--primary-dark)}
.copyrights{margin-top:26px;text-align:center}
.copyrights p{color:#9ca3af;font-size:.82rem;margin:0}
.copyrights .external{color:var(--ink-soft);font-weight:700}

/* Alerts / errors */
.alert{border:none;border-radius:10px;font-weight:600;font-size:.9rem}
.alert-danger{background:#fdecec;color:#c0342b}
.form-group-material p strong{color:#dc3545;font-size:.82rem;font-weight:600}

/* Dark mode */
body.dark-mode{background:#071b34}
body.dark-mode .form-inner,body.dark-mode .auth-right{background:#1e293b}
body.dark-mode .welcome-title,body.dark-mode .input-material{color:#e2e8f0}
body.dark-mode .input-material{background:#071b34;border-color:#334155}
body.dark-mode .welcome-sub,body.dark-mode .copyrights p{color:#94a3b8}

/* Responsive */
@media (max-width:991px){
  .form-outer{grid-template-columns:1fr}
  .auth-brand{display:none}
  .auth-right{min-height:100vh}
}
@media (max-width:480px){
  .form-inner{padding:36px 22px}
}

/* Customer signup and recovery follow the same form treatment as login. */
.auth-flow .form-inner{max-width:460px}
.auth-flow .form-group-material{margin-bottom:18px}
.auth-flow .welcome-sub{margin-bottom:24px}
.auth-step{margin:0 0 12px;text-align:center;color:var(--primary);font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.auth-hint{margin:0 0 18px;color:var(--ink-soft);font-size:.84rem;line-height:1.5}
.auth-footer-link,.auth-resend-form{margin:20px 0 0;text-align:center;color:var(--ink-soft);font-size:.9rem}
.auth-footer-link a,.auth-text-button{color:var(--primary);font:inherit;font-weight:700;text-decoration:none}
.auth-footer-link a:hover,.auth-text-button:hover{text-decoration:underline;color:var(--primary-dark)}
.auth-text-button{padding:0;border:0;background:transparent;cursor:pointer}
.auth-flow .auth-code{font-size:1.5rem;font-weight:700;letter-spacing:.35em;font-variant-numeric:tabular-nums;text-align:center}
.auth-flow .welcome-sub strong{color:var(--ink);overflow-wrap:anywhere}
.auth-progress{display:flex;gap:6px;max-width:100px;margin:0 auto 18px}
.auth-progress span{height:3px;flex:1;background:var(--line)}
.auth-progress .is-current{background:var(--primary)}
.auth-field{margin-bottom:18px}
.auth-field>label{display:block;margin:0 0 7px;font-size:.88rem;font-weight:700;color:var(--ink);line-height:1.3}
.auth-input{display:block;width:100%;min-height:48px;border:1px solid var(--line);background:#f9fafb;padding:12px 14px;font:inherit;font-size:.95rem;line-height:1.5;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.auth-input::placeholder{color:#9ca3af;opacity:1}
.auth-input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(0,171,158,.15)}
.auth-input.is-invalid{border-color:#c0342b}
.auth-input-wrap{position:relative}
.auth-input-wrap .auth-input{padding-right:72px}
.auth-password-toggle{position:absolute;top:50%;right:7px;transform:translateY(-50%);border:0;background:transparent;padding:7px 9px;min-height:36px;font:inherit;font-size:.8rem;font-weight:800;color:var(--primary);cursor:pointer}
.auth-password-toggle:focus-visible,.auth-text-button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.auth-field-help,.auth-field-error{margin:6px 0 0;font-size:.8rem;line-height:1.4}
.auth-field-help{color:var(--ink-soft)}
.auth-field-error{color:#c0342b}
.auth-assurance{display:flex;align-items:flex-start;gap:10px;margin:4px 0 20px;padding:12px;background:#eef8f7;color:#416462;font-size:.83rem;line-height:1.5}
.auth-assurance i{color:var(--primary);line-height:1.5}
@media(max-width:480px){.auth-flow .auth-right{padding:20px 12px}.auth-flow .form-inner{padding:24px 12px}}

/* Footer credit link */
.copyrights a.external{color:#007e80;font-weight:700;text-decoration:none}
.copyrights a.external:hover{color:#00666a;text-decoration:underline}

/* ===== Balanexa: square corners everywhere ===== */
*,*::before,*::after{border-radius:0!important}
/* keep genuinely circular elements round */
.rounded-circle,.saas-avatar,.img-circle,.avatar,.radio label::before,.radio label::after,.checkbox-circle label::before,nav.navbar .badge,#loader,.dash-hero::before,.dash-hero::after,.auth-brand::before,.auth-brand::after,.acc-pill::before{border-radius:50%!important}

/* ===== Balanexa: flash messages - centered banner with room on both sides ===== */
.alert.alert-dismissible{position:relative;width:calc(100% - 32px);max-width:760px;margin:0 auto 15px;padding:.8rem 2.6rem .8rem 1.1rem;border:1px solid;border-left-width:5px;box-shadow:0 4px 16px rgba(0,0,0,.08);animation:balanexaFlash .25s ease-out}
@keyframes balanexaFlash{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.alert.alert-dismissible.text-center{text-align:left}
.alert.alert-dismissible .close{position:absolute;top:50%;right:.7rem;transform:translateY(-50%);margin:0;padding:.4rem;line-height:1;font-size:1.15rem}
.alert-success{background:#eafaf7!important;border-color:#007e80!important;color:#005048!important}
.alert-danger{background:#fdecec!important;border-color:#dc3545!important;color:#7c1d1d!important}
.alert-warning{background:#fff7e8!important;border-color:#f0a92e!important;color:#6b4a06!important}
.alert-info{background:#e8f4fd!important;border-color:#17a2b8!important;color:#0b4d5c!important}