@charset "UTF-8";
/* ==========================================================================
   MediCore HMIS - Login / Auth page
   ========================================================================== */

.auth-shell { min-height: 100vh; width: 100%; display: flex; overflow: hidden; position: relative; }

/* Top-right utility nav */
.auth-topnav {
  position: absolute; top: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}
.auth-lang {
  display: flex; align-items: center; gap: var(--space-sm);
  background: rgba(229, 238, 255, 0.8); backdrop-filter: blur(8px);
  border: 1px solid rgba(196, 197, 215, 0.4);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
}
.auth-lang select { background: transparent; border: none; outline: none; font-weight: 500; color: var(--on-surface); cursor: pointer; padding-right: var(--space-sm); }
.auth-icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: rgba(229, 238, 255, 0.8); backdrop-filter: blur(8px);
  border: 1px solid rgba(196, 197, 215, 0.3); color: var(--on-surface);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
}
.auth-icon-btn:hover { background: var(--surface-container-high); }

/* Left illustration panel */
.auth-illustration {
  display: none;
  position: relative; width: 50%; overflow: hidden;
  align-items: center; justify-content: center;
}
@media (min-width: 768px) { .auth-illustration { display: flex; } }
.auth-illustration .bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 20s ease;
}
.auth-illustration:hover .bg-img { transform: scale(1.08); }
.auth-illustration .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,55,176,0.85) 0%, rgba(0,55,176,0.45) 45%, rgba(0,55,176,0) 100%);
}
.auth-illustration .copy {
  position: relative; z-index: 2; padding: var(--space-xl); color: #fff; max-width: 640px;
}
.auth-illustration .copy h1 { font-size: var(--fs-display-lg); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 var(--space-sm); }
.auth-illustration .copy .sub { font-size: var(--fs-headline-md); font-weight: 500; color: var(--surface-container-low); opacity: 0.95; margin: 0; }
.auth-illustration .copy .accent-bar { width: 96px; height: 4px; background: var(--secondary-container); border-radius: var(--radius-full); margin: var(--space-lg) 0; box-shadow: var(--shadow-1); }
.auth-illustration .copy .tagline { font-size: var(--fs-title-lg); opacity: 0.9; line-height: 1.4; max-width: 560px; }
.auth-illustration .copy .badges { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md); opacity: 0.85; }
.auth-illustration .copy .badges .badge-item { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-label-md); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }

/* Right login panel */
.auth-panel {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-md); background: #fff;
}
@media (min-width: 768px) { .auth-panel { width: 50%; } }

.login-card {
  width: 100%; max-width: 480px;
  background: #fff; padding: var(--space-xl);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  border: 1px solid rgba(196,197,215,0.25);
}
.login-card .head { margin-bottom: var(--space-xl); }
.login-card .head h2 { font-size: var(--fs-headline-lg); font-weight: 600; color: var(--on-surface); margin: 0 0 var(--space-xs); }
.login-card .head p { color: var(--on-surface-variant); margin: 0; }
@media (min-width: 768px) { .login-card .head { text-align: left; } }

/* Floating-label field */
.float-field { position: relative; height: 64px; }
.float-field input {
  width: 100%; height: 100%; padding: 26px var(--space-md) 10px;
  border: 1px solid var(--outline-variant); border-radius: var(--radius-md);
  background: var(--surface-container-lowest); font-size: var(--fs-body-md); color: var(--on-surface);
  transition: all var(--transition-fast); outline: none;
}
.float-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0,55,176,0.2); }
.float-field label {
  position: absolute; top: 0; left: var(--space-md); height: 100%;
  display: flex; align-items: center; pointer-events: none;
  color: var(--on-surface-variant); transition: all 200ms ease; font-size: var(--fs-body-md);
}
.float-field input:focus + label,
.float-field input:not(:placeholder-shown) + label {
  transform: translateY(-10px) scale(0.85); color: var(--primary); font-weight: 600; transform-origin: left center;
}
.float-field .field-icon { position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--outline); background: transparent; border: none; cursor: pointer; }

.login-options { display: flex; align-items: center; justify-content: space-between; }
.login-options .remember { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; margin: 0; }
.login-options .remember input { width: 16px; height: 16px; accent-color: var(--primary); }
.login-options .forgot { font-size: var(--fs-label-md); font-weight: 600; color: var(--primary); }

.btn-signin {
  width: 100%; background: var(--primary-container); color: #fff;
  padding: var(--space-lg); border: none; border-radius: var(--radius-md);
  font-weight: 600; font-size: var(--fs-title-md);
  transition: all var(--transition-fast); box-shadow: var(--shadow-primary);
}
.btn-signin:hover { background: var(--primary); color: #fff; }
.btn-signin:active { transform: scale(0.99); }

/* Notifications container (alert banners are styled by plugins/alert/alert.css) */
.notifications { margin-bottom: var(--space-md); min-height: 0; }
.notifications .alert { margin-bottom: 0; }

/* Legacy inline error (used by changepassword.php #changeError) */
.login-error {
  color: var(--error);
  font-size: var(--fs-label-md);
  font-weight: 600;
  min-height: 1em;
  margin: var(--space-sm) 0;
  text-align: center;
}

.security-row {
  display: flex; justify-content: center; align-items: center; gap: var(--space-xl);
  margin-top: var(--space-xl); padding-top: var(--space-lg);
  border-top: 1px solid rgba(196,197,215,0.3); opacity: 0.65;
}
.security-row .sec { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-label-sm); font-weight: 600; }

.auth-footer { margin-top: var(--space-xl); width: 100%; max-width: 480px; }
.auth-footer .row1 { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); color: var(--on-surface-variant); font-size: var(--fs-label-md); flex-wrap: wrap; }
.auth-footer .brand { font-weight: 700; color: var(--on-surface); }
.auth-footer .version { opacity: 0.6; }
.auth-footer .links { display: flex; gap: var(--space-md); }
.auth-footer .links a:hover { color: var(--primary); }
.auth-footer .copyright { text-align: center; margin-top: var(--space-md); font-size: var(--fs-label-sm); color: var(--on-surface-variant); opacity: 0.6; }
@media (min-width: 768px) { .auth-footer .copyright { text-align: left; } }

.dark .auth-panel, .dark .login-card { background: var(--inverse-surface); color: var(--inverse-on-surface); }
.dark .login-card .head h2, .dark .login-card .head p { color: var(--inverse-on-surface); }
.dark .float-field input { background: var(--surface-container); color: var(--inverse-on-surface); }