/* Helix Coffee Co — Login Page (dark theme v4 2026-05-26) */

body[data-path="login"] {
  background-color: #1a1a1a !important;
  background-image: none !important;
  min-height: 100vh;
}

body[data-path="login"] nav.navbar,
body[data-path="login"] footer.web-footer,
body[data-path="login"] footer {
  display: none !important;
}

/* Main container — full height, centered */
body[data-path="login"] main.container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  padding: 40px 20px !important;
  margin: 0 !important;
}

/* Strip default layout from intermediate wrappers — no extra height */
body[data-path="login"] .page-header-wrapper,
body[data-path="login"] .page-header,
body[data-path="login"] .page_content,
body[data-path="login"] .page_content > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: unset !important;
  height: auto !important;
}

body[data-path="login"] section.for-login {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: unset !important;
}

body[data-path="login"] .page-card-head {
  text-align: center !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto 20px auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

body[data-path="login"] .page-card-head img.app-logo {
  max-height: 56px !important;
  width: auto !important;
  display: block !important;
  margin: 0 auto 14px !important;
  filter: brightness(0) invert(1) !important; /* white logo on dark bg */
}

body[data-path="login"] .page-card-head h4 {
  color: #a0a0a0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}

/* Login card — white, clean, centered */
body[data-path="login"] .login-content.page-card {
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
  border: none !important;
  padding: 36px 40px 28px !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
}

body[data-path="login"] label,
body[data-path="login"] .form-label {
  color: #383838 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

body[data-path="login"] .form-control {
  border: 1px solid #e2e2e2 !important;
  border-radius: 8px !important;
  background: #f8f8f8 !important;
  color: #383838 !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
}

body[data-path="login"] .form-control:focus {
  border-color: #999 !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px #e2e2e2 !important;
  outline: none !important;
}

/* Login button — charcoal */
body[data-path="login"] .btn-login,
body[data-path="login"] .btn-primary {
  background: #171717 !important;
  border-color: #171717 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  width: 100% !important;
  margin-top: 8px !important;
  transition: background 0.15s;
}

body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-primary:hover {
  background: #383838 !important;
  border-color: #383838 !important;
}

body[data-path="login"] a { color: #525252 !important; }
body[data-path="login"] a:hover { color: #171717 !important; }
body[data-path="login"] hr { border-color: #e2e2e2 !important; }

body[data-path="login"] .page-card p,
body[data-path="login"] small {
  color: #7c7c7c !important;
  font-size: 13px !important;
}

/* "or" text */
body[data-path="login"] .login-divider,
body[data-path="login"] .divider {
  color: #999 !important;
}