body, html {
  height: 100%;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;      /* Center horizontal */
  justify-content: center;    /* Center vertical */
  padding: 20px;
}

/* Bagong class para sa wrapper */
.main-wrapper {
  display: flex;
  flex-direction: column;   /* Pinapababa ang elements imbes na itabi */
  align-items: center;      /* Sinisigurong laging nasa gitna lahat */
  width: 100%;
  max-width: 500px;         /* Kapareho ng lapad ng login card para pantay */
}

/* Style para sa H1 */
.main-system-title {
  text-align: center;
  color: #008000;           /* Green para match sa theme mo */
  font-size: 1.8rem;
  margin-bottom: 2rem;      /* Space sa pagitan ng title at form */
  font-weight: 800;
}

    .login-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      padding: 2.5rem;
      max-width: 500px;
      width: 100%;
    }
    .header-title { color: #008000; font-weight: 700; margin-bottom: 0.5rem; }
    .header-subtitle { color: #555; margin-bottom: 2rem; }
    .form-label { font-weight: 500; color: #333; margin-bottom: 0.5rem; }
    .form-control {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 0.75rem 1rem;
      font-size: 1rem;
    }
    .form-control:focus {
      border-color: #008000;
      box-shadow: 0 0 0 0.2rem rgba(0,128,0,0.15);
    }
    .btn-login {
      background-color: #008000;
      border-color: #008000;
      font-weight: 600;
      padding: 0.75rem 2rem;
      border-radius: 8px;
      width: 100%;
      color: white;
    }
    .btn-login:hover { background-color: #006600; border-color: #006600; color: white; }
    .register-link { text-align: center; margin-top: 1.5rem; }
    .register-link a { color: #008000; text-decoration: none; font-weight: 500; }
    .register-link a:hover { text-decoration: underline; }
    .error { color: #dc3545; font-size: 0.9rem; margin-top: 0.25rem; }

    /* Modal icon circles */
    .modal-icon {
      width: 70px; height: 70px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 2rem;
      margin: 0 auto 1rem;
    }
    .modal-icon.success { background: #e8f5e8; color: #008000; }
    .modal-icon.warning { background: #fff8e1; color: #f59e0b; }
    .modal-icon.danger  { background: #fef2f2; color: #dc2626; }