/* style.css - styles to mimic the referenced login UI.
   Tweak colors, spacing and fonts to match the exact look. */

:root{
  --primary:#2b6ef6;
  --card-bg: #ffffff;
  --muted:#6b7280;
  --accent:#0f172a;
  --left-bg: linear-gradient(135deg,#0ea5a6 0%, #0284c7 100%);
}

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

/* Layout */
.login-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

.login-card{
  width:960px;
  max-width:96%;
  background:var(--card-bg);
  display:flex;
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(2,6,23,0.12);
}

/* Left pane (branding) */
.left-pane{
  width:40%;
  padding:36px 28px;
  color:#fff;
  background: var(--left-bg);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.brand .logo{
  width:56px;
  height:56px;
  display:block;
}
.left-pane h2{
  margin:0;
  font-size:20px;
  letter-spacing:0.2px;
}
.left-note{
  margin-top:10px;
  opacity:0.95;
  max-width:220px;
  font-size:14px;
  line-height:1.4;
}

/* Right pane (form) */
.right-pane{
  width:60%;
  padding:34px 36px;
}
.form-head h3{
  margin:0 0 6px 0;
  font-size:20px;
}
.form-head .managed{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

/* Errors */
.error-box{
  margin-top:12px;
  background:#fff5f5;
  border:1px solid #fde2e2;
  padding:10px;
  border-radius:6px;
  color:#b91c1c;
}

/* Form */
.login-form{margin-top:16px}
label{
  display:block;
  font-size:13px;
  color:#374151;
  margin-top:12px;
}
input[type="text"], input[type="password"]{
  width:100%;
  padding:10px 12px;
  margin-top:6px;
  border:1px solid #e6e9ee;
  border-radius:6px;
  font-size:14px;
  background:#fff;
}
.row{margin-top:18px;display:flex;align-items:center;gap:12px}
.btn-primary{
  background:var(--primary);
  color:#fff;
  border:0;
  padding:10px 16px;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}
.note{
  margin-top:12px;
  color:var(--muted);
  font-size:13px;
}

/* help links */
.help-links{margin-top:12px}
.help-links a{
  color:var(--primary);
  text-decoration:none;
  font-size:13px;
}

/* Dashboard topbar */
.topbar{
  background:#fff;
  border-bottom:1px solid #e6e9ee;
  padding:12px 0;
}
.topbar .container{
  max-width:1100px;
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.top-logo{width:36px;height:36px}
.btn-logout{
  background:#ef4444;
  color:#fff;
  border:0;
  padding:8px 12px;
  border-radius:6px;
  cursor:pointer;
}

/* page content */
.container{max-width:1100px;margin:28px auto;padding:0 18px}
.welcome-box{
  background:#fff;
  padding:22px;
  border-radius:8px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}
.welcome-box h1{margin-top:0}
.muted{color:var(--muted)}
@media (max-width:800px){
  .login-card{flex-direction:column}
  .left-pane{width:100%;text-align:center;align-items:center;padding:26px}
  .right-pane{width:100%}
}