/* =========================================================
   Smart Toilet — Login Page CSS
   File: css/login.css
   ========================================================= */

/* --------- Layout constants (tweak if your sidebar differs) --------- */
:root {
  --sb-open: 288px;
  /* sidebar width when open */
  --sb-closed: 88px;
  /* sidebar width when collapsed */
  --topbar-h: 64px;
  /* set if you have a sticky topbar */
  --card-radius: 14px;
  --card-shadow: 0 10px 24px rgba(0, 0, 0, .08);
  --border-subtle: #f1f2f6;
  --text-main: #111827;
  --text-muted: #6b7280;
  --text-faint: #b1b6bf;
  --input-bg: #efeff3;
  --input-border: #e6e6eb;
  --btn-a: #4d3df0;
  --btn-b: #2c22cc;
  --focus-ring: rgba(77, 61, 240, .12);
  --page-bg: #f5f7fb;
  /* light bluish page background */
}

/* Optional nice page background */
body {
  background: var(--page-bg);
}



/* --------- Center the three cards on the page --------- */
.main-content .content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.login-cards {
  width: clamp(300px, 92vw, 420px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 16px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* --------- Card look --------- */
.form {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 22px 22px 18px;
}

.form.form-center {
  text-align: center;
}

/* Titles & subtitles inside cards */
.form p {
  margin: 0;
}

.form p b {
  display: block;
  text-align: center;
  font-size: 18px;
  color: var(--text-main);
  margin-bottom: 4px;
}

.form p+p {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 2px;
}

/* --------- Inputs --------- */
.form input[type="text"],
.form input[type="password"] {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  outline: none;
  padding: 0 44px 0 14px;
  /* room for the eye icon on password */
  font-size: 15px;
  color: var(--text-main);
  box-sizing: border-box;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  margin-bottom: 12px;
}

.form input::placeholder {
  color: #c7c9d1;
}

.form input:focus {
  background: #f7f7fb;
  border-color: #cfd2e3;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Eye button inside password field */
.eye-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
}

#toggleIcon {
  font-size: 20px;
  line-height: 1;
  color: var(--text-main);
}

.field-pass {
  position: relative;
}

.eye-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}


/* --------- Buttons (Submit / Access) --------- */
#submit,
.button-like,
.form button[type="submit"] {
  display: inline-block;
  width: 100%;
  height: 46px;
  line-height: 46px;
  /* centers label vertically */
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  color: #fff;
  letter-spacing: .6px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease;
  box-shadow: 0 6px 16px rgba(77, 61, 240, .2);
  text-decoration: none;
  /* for .button-like links */
}

#submit:hover,
.button-like:hover,
.form button[type="submit"]:hover {
  filter: brightness(1.05);
}

#submit:active,
.button-like:active,
.form button[type="submit"]:active {
  transform: translateY(1px);
}

/* Small helper text */
.form .message {
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
  margin-top: 10px;
}

/* Error alert box */
.alert-error {
  background: #fde8e8;
  border: 1px solid #f5c2c2;
  color: #7f1d1d;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* Success alert box */
.alert-success {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* Email icon in middle card */
.form.form-center img {
  width: 56px;
  height: auto;
  display: inline-block;
}

/* --------- Dark mode (works with your body.classList.toggle('dark')) --------- */
body.dark {
  --page-bg: #0f1220;
  --border-subtle: #23263b;
  --text-main: #e7e9f3;
  --text-muted: #b6bdd1;
  --text-faint: #8a90a3;
  --input-bg: #1a1d2e;
  --input-border: #2b2f47;
  --focus-ring: rgba(93, 109, 255, .18);
}

body.dark .form {
  background: #14182a;
}

body.dark .form input {
  color: var(--text-main);
}

body.dark .button-like,
body.dark #submit,
body.dark .form button[type="submit"] {
  box-shadow: 0 6px 16px rgba(77, 61, 240, .32);
}

/* --------- Responsive tweaks --------- */
@media (max-width: 480px) {
  .login-cards {
    gap: 20px;
  }

  .form {
    padding: 18px 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}