/* frontend/css/login.css */

/* =========================================
   FACIL IOT — LOGIN
========================================= */

.login-page {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 40px;
}

/* LOGIN CARD */

.login-card {

  width: 100%;

  max-width: 480px;

  background:
    rgba(255,255,255,0.82);

  backdrop-filter:
    blur(20px);

  border:
    1px solid rgba(255,255,255,0.4);

  border-radius:
    36px;

  padding:
    54px;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.08);
}

/* LOGO */

.login-logo {

  width: 280px;

  margin: 0 auto 40px;
}

/* TITLE */

.login-title {

  text-align: center;

  font-size: 42px;

  line-height: 1.1;

  font-weight: 800;

  color:
    var(--text);

  margin-bottom: 18px;
}

/* SUBTITLE */

.login-subtitle {

  text-align: center;

  font-size: 18px;

  line-height: 1.7;

  color:
    var(--text-light);

  margin-bottom: 42px;
}

/* FORM */

.login-form {

  display: flex;

  flex-direction: column;

  gap: 18px;
}

/* INPUT */

.login-input {

  width: 100%;

  height: 64px;

  border:
    1px solid var(--border);

  background:
    white;

  border-radius:
    18px;

  padding-left: 22px;
  padding-right: 22px;

  font-size: 16px;

  transition:
    var(--transition);
}

.login-input:focus {

  outline: none;

  border-color:
    var(--accent);

  box-shadow:
    0 0 0 4px rgba(255,59,29,0.08);
}

/* BUTTON */

.login-submit {

  height: 64px;

  border-radius:
    18px;

  background:
    var(--accent);

  color:
    white;

  font-size: 16px;

  font-weight: 700;

  cursor: pointer;

  transition:
    var(--transition);

  margin-top: 12px;
}

.login-submit:hover {

  transform:
    translateY(-2px);

  background:
    var(--accent-dark);
}

/* FOOTER */

.login-footer {

  text-align: center;

  margin-top: 32px;

  font-size: 13px;

  color:
    var(--text-light);
}

/* =========================================
   LOGIN ERROR
========================================= */

.login-error {

  min-height: 24px;

  margin-bottom: 18px;

  text-align: center;

  color:
    var(--danger);

  font-size: 14px;

  font-weight: 600;
}