/* ============================================================
   PROFESSIONAL LOGIN / AUTH THEME
   Split-screen: indigo brand panel + clean form card
   ============================================================ */
:root{
  --primary:#00ab9e;
  --primary-dark:#008f84;
  --primary-light:#2fc7b9;
  --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,#00ab9e 0%,#008f84 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:150px;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,#00ab9e,#008f84);
  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:#00184a}
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:#00184a;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}
}

/* Footer credit link */
.copyrights a.external{color:#00ab9e;font-weight:700;text-decoration:none}
.copyrights a.external:hover{color:#008f84;text-decoration:underline}